feat: webhook description

apps/web/package.json

@@ -43,6 +43,7 @@
     "axios": "^1.6.7",
     "axios-auth-refresh": "^3.3.6",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.0",
     "cookies-next": "^4.0.0",
     "countries-and-timezones": "^3.6.0",
     "date-fns": "^3.0.6",

apps/web/public/locales/en/common.json

@@ -398,7 +398,11 @@
     }
   },
   "tooltip": {
-    "issue-feedback-count": "Number of feedbacks registered in the issue."
+    "issue-feedback-count": "Number of feedbacks registered in the issue.",
+    "webhook-feedback-creation": "This event is triggered whenever channel-specific feedback is collected.",
+    "webhook-issue-addition": "This event is triggered whenever an issue is registered in the channel-specific feedback.",
+    "webhook-issue-creation": "This event is triggered whenever an issue is generated, regardless of the channel.",
+    "webhook-issue-status-change": "This event is triggered whenever the issue status changes, regardless of the channel."
   },
   "tenant-setting-menu": {
     "tenant-info": "Tenant Information",

apps/web/public/locales/ja/common.json

@@ -398,7 +398,11 @@
     }
   },
   "tooltip": {
-    "issue-feedback-count": "該当イシューに登録されたフィードバック数です。"
+    "issue-feedback-count": "該当イシューに登録されたフィードバック数です。",
+    "webhook-feedback-creation": "このイベントは、チャネル固有のフィードバックが収集されるたびにトリガーされます。",
+    "webhook-issue-addition": "このイベントは、チャネル固有のフィードバックに問題が登録されるたびにトリガーされます。",
+    "webhook-issue-creation": "このイベントは、チャネルに関係なく、問題が発生するたびにトリガーされます。",
+    "webhook-issue-status-change": "このイベントは、チャネルに関係なく、イシューステータスが変更されるたびにトリガーされます。"
   },
   "tenant-setting-menu": {
     "tenant-info": "Tenant情報",

apps/web/public/locales/ko/common.json

@@ -398,7 +398,11 @@
     }
   },
   "tooltip": {
-    "issue-feedback-count": "해당 이슈에 등록된 피드백 개수입니다."
+    "issue-feedback-count": "해당 이슈에 등록된 피드백 개수입니다.",
+    "webhook-feedback-creation": "채널별 피드백이 수집될 때마다 해당 이벤트를 발동합니다.",
+    "webhook-issue-addition": "채널별 이슈를 등록할 때마다 해당 이벤트를 발동합니다.",
+    "webhook-issue-creation": "채널에 상관없이 이슈를 생성할 때마다 해당 이벤트를 발동합니다.",
+    "webhook-issue-status-change": "채널에 상관없이 이슈상태를 변경할 때마다 해당 이벤트를 발동합니다."
   },
   "tenant-setting-menu": {
     "tenant-info": "Tenant 정보",

apps/web/src/components/etc/HelpCardDocs/HelpCardDocs.tsx

@@ -13,6 +13,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import { useMemo } from 'react';
 import { Trans } from 'react-i18next';
 
 import { Icon } from '@ufb/ui';
@@ -22,6 +23,16 @@ interface IProps {
 }
 
 const HelpCardDocs: React.FC<IProps> = ({ i18nKey }) => {
+  const url = useMemo(() => {
+    switch (i18nKey) {
+      case 'help-card.image-setting':
+        return 'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#image-storage-integration';
+      case 'help-card.webhook':
+        return 'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#Webhook Feature';
+      default:
+        return 'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md';
+    }
+  }, [i18nKey]);
   return (
     <Trans
       i18nKey={i18nKey}
@@ -31,25 +42,13 @@ const HelpCardDocs: React.FC<IProps> = ({ i18nKey }) => {
             name="ExpandPopup"
             className="text-blue-primary cursor-pointer"
             size={12}
-            onClick={() => {
-              if (typeof window === 'undefined') return;
-              window.open(
-                'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
-                '_blank',
-              );
-            }}
+            onClick={() => window.open(url, '_blank')}
           />
         ),
         docs: (
           <span
             className="text-blue-primary cursor-pointer"
-            onClick={() => {
-              if (typeof window === 'undefined') return;
-              window.open(
-                'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
-                '_blank',
-              );
-            }}
+            onClick={() => window.open(url, '_blank')}
           />
         ),
       }}

apps/web/src/containers/setting-menu/ImageSetting/ImageSetting.tsx

@@ -17,12 +17,12 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
-import { Badge, Icon, Input, TextInput, toast } from '@ufb/ui';
+import { Badge, Input, TextInput, toast } from '@ufb/ui';
 
-import { SettingMenuTemplate } from '@/components';
+import { HelpCardDocs, SettingMenuTemplate } from '@/components';
 import { useOAIMutation, useOAIQuery, usePermissions } from '@/hooks';
 
 interface IForm {
@@ -210,37 +210,7 @@ const ImageSetting: React.FC<IProps> = ({ channelId, projectId }) => {
     >
       <div className="flex items-center rounded border px-6 py-2">
         <p className="flex-1 whitespace-pre-line py-5">
-          <Trans
-            i18nKey="help-card.image-setting"
-            components={{
-              icon: (
-                <Icon
-                  name="ExpandPopup"
-                  className="text-blue-primary cursor-pointer"
-                  size={12}
-                  onClick={() => {
-                    if (typeof window === 'undefined') return;
-                    window.open(
-                      'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
-                      '_blank',
-                    );
-                  }}
-                />
-              ),
-              docs: (
-                <span
-                  className="text-blue-primary cursor-pointer"
-                  onClick={() => {
-                    if (typeof window === 'undefined') return;
-                    window.open(
-                      'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
-                      '_blank',
-                    );
-                  }}
-                />
-              ),
-            }}
-          />
+          <HelpCardDocs i18nKey="help-card.image-setting" />
         </p>
         <div className="relative h-full w-[80px]">
           <Image

apps/web/src/containers/setting-menu/WebhookSetting/WebhookTypePopover.tsx → apps/web/src/containers/setting-menu/WebhookSetting/WebhookEventTableCell.tsx

@@ -13,6 +13,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -24,22 +25,31 @@ import {
 } from '@ufb/ui';
 
 import type { ChannelType } from '@/types/channel.type';
-import type { WebhookEventEnum } from '@/types/webhook.type';
+import type { WebhookEventEnum, WebhookStatusEnum } from '@/types/webhook.type';
 import { toCamelCase } from '@/utils/str';
 
 interface IProps {
+  webhookStatus: WebhookStatusEnum;
   type: WebhookEventEnum;
   channels: ChannelType[];
 }
 
-const WebhookTypePopover: React.FC<IProps> = (props) => {
-  const { channels, type } = props;
+const WebhookEventTableCell: React.FC<IProps> = (props) => {
+  const { channels, type, webhookStatus } = props;
   const { t } = useTranslation();
+  if (type === 'ISSUE_CREATION' || type === 'ISSUE_STATUS_CHANGE') {
+    return <p>{toCamelCase(t(`text.webhook-type.${type}`))}</p>;
+  }
 
   return (
     <Popover>
-      <PopoverTrigger>
-        <span className="text-blue-primary font-12-regular cursor-pointer underline">
+      <PopoverTrigger disabled={webhookStatus === 'INACTIVE'}>
+        <span
+          className={clsx(
+            'text-blue-primary font-12-regular cursor-pointer underline',
+            { 'text-tertiary': webhookStatus === 'INACTIVE' },
+          )}
+        >
           {toCamelCase(t(`text.webhook-type.${type}`))}
         </span>
       </PopoverTrigger>
@@ -59,4 +69,4 @@ const WebhookTypePopover: React.FC<IProps> = (props) => {
   );
 };
 
-export default WebhookTypePopover;
+export default WebhookEventTableCell;

apps/web/src/containers/setting-menu/WebhookSetting/WebhookSetting.tsx

@@ -21,7 +21,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 
@@ -32,7 +32,7 @@ import { DATE_TIME_FORMAT } from '@/constants/dayjs-format';
 import { useOAIMutation, useOAIQuery, usePermissions } from '@/hooks';
 import type { WebhookType } from '@/types/webhook.type';
 import WebhookDeleteDialog from './WebhookDeleteDialog';
-import WebhookTypePopover from './WebhookTypePopover';
+import WebhookEventTableCell from './WebhookEventTableCell';
 import WebhookUpsertDialog from './WebhookUpsertDialog';
 
 const columnHelper = createColumnHelper<WebhookType>();
@@ -42,11 +42,13 @@ const getColumns = (projectId: number, refetch: () => Promise<any>) => [
     header: '',
     cell: ({ row }) => {
       return (
-        <WebhookSwitch
-          projectId={projectId}
-          row={row.original}
-          refetch={refetch}
-        />
+        <div className="flex justify-center">
+          <WebhookSwitch
+            projectId={projectId}
+            row={row.original}
+            refetch={refetch}
+          />
+        </div>
       );
     },
     size: 50,
@@ -58,28 +60,33 @@ const getColumns = (projectId: number, refetch: () => Promise<any>) => [
   }),
   columnHelper.accessor('url', {
     header: 'URL',
-    cell: ({ getValue }) => getValue(),
+    cell: ({ getValue }) => (
+      <p className="line-clamp-2 break-all">{getValue()}</p>
+    ),
     size: 100,
   }),
   columnHelper.accessor('events', {
     header: 'Event',
-    cell: ({ getValue }) => (
-      <div className="flex flex-wrap gap-2.5">
+    cell: ({ getValue, row }) => (
+      <div className="my-1 flex flex-wrap gap-x-2.5 gap-y-1">
         {getValue()
           .filter((v) => v.status === 'ACTIVE')
           .map((v) => (
-            <WebhookTypePopover
+            <WebhookEventTableCell
               key={v.id}
               channels={v.channels}
               type={v.type}
+              webhookStatus={row.original.status}
             />
           ))}
       </div>
     ),
+    size: 300,
   }),
   columnHelper.accessor('createdAt', {
     header: 'Created',
     cell: ({ getValue }) => dayjs(getValue()).format(DATE_TIME_FORMAT),
+    size: 150,
   }),
   columnHelper.display({
     id: 'edit',
@@ -174,7 +181,7 @@ const WebhookSetting: React.FC<IProps> = ({ projectId }) => {
           {table.getRowModel().rows.map((row) => (
             <tr
               key={row.index}
-              className={classNames({
+              className={clsx({
                 'text-tertiary': row.original.status === 'INACTIVE',
               })}
             >
@@ -222,7 +229,7 @@ const WebhookSwitch: React.FC<IWebhookSwitch> = (props) => {
   return (
     <input
       type="checkbox"
-      className={classNames('toggle toggle-sm', {
+      className={clsx('toggle toggle-sm', {
         'border-fill-primary bg-fill-primary': row.status === 'INACTIVE',
       })}
       checked={row.status === 'ACTIVE'}