fix: web bugs (#49)

* fix: seed bug

* fix: line share bug

* fix: remote login toast

* chore: code refactoring

* chore: update react-table version

* fix: route only with projectId

* fix: reset page in issue table

apps/web/package.json

@@ -22,7 +22,7 @@
     "@hookform/resolvers": "^2.9.11",
     "@mui/base": "^5.0.0-beta.4",
     "@tanstack/react-query": "^4.29.12",
-    "@tanstack/react-table": "^8.9.1",
+    "@tanstack/react-table": "^8.10.0",
     "@ufb/tailwind": "*",
     "@ufb/ui": "*",
     "axios": "^1.4.0",
@@ -85,4 +85,4 @@
     "ts-toolbelt": "^9.6.0",
     "typescript": "^4.9.5"
   }
-}
+}

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

@@ -19,20 +19,23 @@ import { useTranslation } from 'react-i18next';
 
 interface IProps {
   id: number;
+  pathname: string;
 }
 
-const ShareButton: React.FC<IProps> = ({ id: id }) => {
+const ShareButton: React.FC<IProps> = ({ id, pathname }) => {
   const { t } = useTranslation();
+
   const onClickLinkCopy: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
     try {
-      const { origin, pathname } = window.location;
+      const { origin } = window.location;
       navigator.clipboard.writeText(`${origin}${pathname}?id=${id}`);
       toast.positive({ title: t('toast.copy'), iconName: 'CopyFill' });
     } catch (error) {
       toast.negative({ title: 'fail' });
     }
   };
+
   return (
     <button
       className="icon-btn icon-btn-tertiary icon-btn-sm"

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

@@ -22,7 +22,7 @@ const TableLoadingRow: React.FC<IProps> = ({ colSpan }) => {
     <tr>
       <td colSpan={colSpan} style={{ padding: 0, height: 0 }}>
         <div className="relative w-full bg-gray-200 rounded">
-          <div className={'top-0 h-1 rounded w-full relative loading'} />
+          <div className="top-0 h-1 rounded w-full relative loading" />
         </div>
       </td>
     </tr>

apps/web/src/components/layouts/SideNav/SideNav.tsx

@@ -48,15 +48,21 @@ const SideNav: React.FC<IProps> = () => {
         }}
       >
         <MenuItem
-          href={{ pathname: Path.FEEDBACK, query: router.query }}
+          href={{
+            pathname: Path.FEEDBACK,
+            query: { projectId: router.query.projectId },
+          }}
           iconName="BubbleDotsStroke"
           activePathname={Path.FEEDBACK}
           disabled={!perms.includes('feedback_read')}
           isHover={isHover}
           text={t('main.feedback.title')}
         />
         <MenuItem
-          href={{ pathname: Path.ISSUE, query: router.query }}
+          href={{
+            pathname: Path.ISSUE,
+            query: { projectId: router.query.projectId },
+          }}
           iconName="DocumentStroke"
           activePathname={Path.ISSUE}
           disabled={!perms.includes('issue_read')}
@@ -65,7 +71,10 @@ const SideNav: React.FC<IProps> = () => {
         />
         <hr />
         <MenuItem
-          href={{ pathname: Path.SETTINGS, query: router.query }}
+          href={{
+            pathname: Path.SETTINGS,
+            query: { projectId: router.query.projectId },
+          }}
           iconName="SettingStroke"
           activePathname={Path.SETTINGS}
           disabled={!perms.includes('issue_read')}

apps/web/src/components/layouts/setting-menu/SettingMenuBox.tsx

@@ -39,10 +39,12 @@ const SettingMenuBox: React.FC<IBoxProps> = ({
       show={show}
       className={`${boxCN} ${flexCN}`}
       enter="transition-all duration-500"
-      enterTo={'px-3 opacity-100 overflow-hidden ' + transitionFlexCN}
+      enterTo={['px-3 opacity-100 overflow-hidden', transitionFlexCN].join(' ')}
       enterFrom="flex-[0] px-0 opacity-0 overflow-hidden"
       leave="transition-all duration-500"
-      leaveFrom={'px-3 opacity-100 overflow-hidden ' + transitionFlexCN}
+      leaveFrom={['px-3 opacity-100 overflow-hidden', transitionFlexCN].join(
+        ' ',
+      )}
       leaveTo="flex-[0] px-0 opacity-0 overflow-hidden"
     >
       {children}

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

@@ -78,18 +78,7 @@ const APIKeySetting: React.FC<IProps> = ({ projectId }) => {
                 }
               }}
             >
-              <Icon
-                name="Clips"
-                size={16}
-                className="cursor-pointer"
-                onClick={() => {
-                  navigator.clipboard.writeText(getValue());
-                  toast.positive({
-                    title: t('toast.copy'),
-                    iconName: 'CopyFill',
-                  });
-                }}
-              />
+              <Icon name="Clips" size={16} className="cursor-pointer" />
             </button>
           </div>
         ),

apps/web/src/containers/setting-menu/FieldSetting/OptionBadge.tsx

@@ -66,16 +66,16 @@ const OptionDeletePopover: React.FC<IProps> = ({
           {t('main.setting.dialog.delete-option.title')}
         </PopoverHeading>
         <div className="m-5">
-          <p className={'font-14-regular mb-10 whitespace-pre-line'}>
+          <p className="font-14-regular mb-10 whitespace-pre-line">
             {t('main.setting.dialog.delete-option.description')}
           </p>
           <div className="flex justify-end gap-2">
             <button className="btn btn-secondary" onClick={close}>
               {t('button.cancel')}
             </button>
             <button
-              className={'btn btn-primary'}
-              type={'button'}
+              className="btn btn-primary"
+              type="button"
               onClick={() => {
                 if (typeof targetOptionIndex !== 'undefined') {
                   removeOption(targetOptionIndex);

apps/web/src/containers/setting-menu/RoleSetting/RoleTitleRow.tsx

@@ -24,7 +24,7 @@ const RoleTitleRow: React.FC<IProps> = ({ colspan, depth, title }) => {
     <tr>
       <td colSpan={colspan}>
         <p
-          className={'font-12-bold'}
+          className="font-12-bold"
           style={{ marginLeft: depth ? depth * 10 * 4 : 0 }}
         >
           {title}

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

@@ -278,7 +278,7 @@ const SignUpSetting: React.FC<IProps> = () => {
                   rightChildren={
                     <button
                       type="button"
-                      className={'btn btn-xs btn-rounded btn-primary'}
+                      className="btn btn-xs btn-rounded btn-primary"
                       onClick={onClickAdd}
                     >
                       {t('button.register')}

apps/web/src/containers/tables/FeedbackTable/AllExpandButton/AllExpandButton.tsx

@@ -35,20 +35,16 @@ const AllExpandButton: React.FC<IProps> = ({
           !isAllExpanded ? 'left-0.5' : 'right-0.5',
         ].join(' ')}
       />
-      <button
-        className={'w-[28px] h-[28px] flex items-center justify-center z-20'}
-      >
+      <button className="w-[28px] h-[28px] flex items-center justify-center z-20">
         <Icon
           name="List"
           size={16}
           className={!isAllExpanded ? 'text-primary' : 'text-tertiary'}
         />
       </button>
-      <button
-        className={'w-[28px] h-[28px] flex items-center justify-center z-20'}
-      >
+      <button className="w-[28px] h-[28px] flex items-center justify-center z-20">
         <Icon
-          name={'ViewRowsFill'}
+          name="ViewRowsFill"
           size={16}
           className={isAllExpanded ? 'text-primary' : 'text-tertiary'}
         />

apps/web/src/containers/tables/FeedbackTable/ColumnSettingPopover/ColumnSettingPopover.tsx

@@ -31,16 +31,10 @@ import {
 } from 'react-beautiful-dnd';
 
 import { FieldType } from '@/types/field.type';
+import { reorder } from '@/utils/reorder';
 
 import DraggableColumnItem from './DraggableColumnItem';
 
-const reorder = (list: string[], startIndex: number, endIndex: number) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-
-  return result;
-};
 interface IProps extends React.PropsWithChildren {
   columns: ColumnDef<any, any>[];
   fieldData: FieldType[];
@@ -68,14 +62,16 @@ const ColumnSettingPopover: React.FC<IProps> = ({
   );
 
   const onDragEnd: OnDragEndResponder = (result) => {
-    if (!result.destination) return;
-    if (result.destination.index === result.source.index) return;
-    if (result.destination.index < 2) result.destination.index = 2;
+    const { destination, source } = result;
+
+    if (!destination) return;
+    if (destination.index === source.index) return;
+    if (destination.index < 2) destination.index = 2;
 
     const newFields: string[] = reorder(
       columnOrder.length === 0 ? columnKeys : columnOrder,
-      result.source.index,
-      result.destination.index,
+      source.index,
+      destination.index,
     );
     onChangeColumnOrder(['select'].concat(newFields));
   };

apps/web/src/containers/tables/FeedbackTable/ColumnSettingPopover/DraggableColumnItem.tsx

@@ -32,7 +32,6 @@ const DraggableColumnItem: React.FC<IProps> = ({
 }: IProps) => {
   return (
     <Draggable
-      key={name}
       draggableId={name}
       index={index}
       isDragDisabled={isDisabled}

apps/web/src/containers/tables/FeedbackTable/DownloadButton/DownloadButton.tsx

@@ -36,9 +36,10 @@ const DownloadButton: React.FC<IDownloadButtonProps> = ({
   query,
   isHead = false,
 }) => {
+  const { channelId, projectId, createdAtRange } = useFeedbackTable();
+
   const [open, setOpen] = useState(false);
   const { theme } = useStore(themeStore);
-  const { channelId, projectId, createdAtRange } = useFeedbackTable();
   const perms = usePermissions(projectId);
 
   const { t } = useTranslation();

apps/web/src/containers/tables/FeedbackTable/FeedbackSearch/index.ts → apps/web/src/containers/tables/FeedbackTable/EditableCell/index.ts

@@ -13,4 +13,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export { default } from './FeedbackSearch';
+export { default } from './EditableCell';

apps/web/src/containers/tables/FeedbackTable/FeedbackCell/FeedbackCell.tsx

@@ -31,25 +31,23 @@ const FeedbackCell: React.FC<IProps> = (props) => {
 
   return (
     <ExpandableText isExpanded={isExpanded}>
-      <>
-        {typeof value === 'undefined'
-          ? undefined
-          : field.format === 'date'
-          ? dayjs(value as string).format(DATE_TIME_FORMAT)
-          : field.format === 'multiSelect'
-          ? (value as string[])
-              .map(
-                (key) =>
-                  field.options?.find((option) => option.key === key)?.name ??
-                  value,
-              )
-              .join(', ')
-          : field.format === 'select'
-          ? field.options?.find((option) => option.key === value)?.name ?? value
-          : field.format === 'text'
-          ? (value as string)
-          : String(value)}
-      </>
+      {typeof value === 'undefined'
+        ? undefined
+        : field.format === 'date'
+        ? dayjs(value as string).format(DATE_TIME_FORMAT)
+        : field.format === 'multiSelect'
+        ? (value as string[])
+            .map(
+              (key) =>
+                field.options?.find((option) => option.key === key)?.name ??
+                value,
+            )
+            .join(', ')
+        : field.format === 'select'
+        ? field.options?.find((option) => option.key === value)?.name ?? value
+        : field.format === 'text'
+        ? (value as string)
+        : String(value)}
     </ExpandableText>
   );
 };

apps/web/src/containers/tables/FeedbackTable/FeedbackDeleteDialog/FeedbackDeleteDialog.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import { toast } from '@ufb/ui';
+import { useTranslation } from 'react-i18next';
+
+import { Dialog } from '@/components';
+import { useOAIMutation } from '@/hooks';
+
+interface IProps {
+  open: boolean;
+  close: () => void;
+  projectId: number;
+  channelId: number;
+  rowSelectionIds: number[];
+  handleSuccess: () => Promise<void>;
+}
+
+const FeedbackDeleteDialog: React.FC<IProps> = (props) => {
+  const { close, open, channelId, projectId, handleSuccess, rowSelectionIds } =
+    props;
+
+  const { t } = useTranslation();
+
+  const { mutate: deleteFeedback, isLoading: deleteFeedbackLoading } =
+    useOAIMutation({
+      method: 'delete',
+      path: '/api/projects/{projectId}/channels/{channelId}/feedbacks',
+      pathParams: { projectId, channelId },
+      queryOptions: {
+        async onSuccess() {
+          await handleSuccess();
+          close();
+        },
+        onError(error) {
+          toast.negative({ title: error?.message ?? 'Error' });
+        },
+      },
+    });
+
+  const onClickDelete = () => {
+    deleteFeedback({ feedbackIds: rowSelectionIds });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      close={close}
+      title={t('main.feedback.dialog.delete-feedback.title')}
+      description={t('main.feedback.dialog.delete-feedback.description')}
+      submitButton={{
+        onClick: onClickDelete,
+        children: t('button.delete'),
+        disabled: deleteFeedbackLoading,
+      }}
+      icon={{
+        name: 'WarningCircleFill',
+        className: 'text-red-primary',
+        size: 56,
+      }}
+    />
+  );
+};
+
+export default FeedbackDeleteDialog;

apps/web/src/containers/tables/FeedbackTable/FeedbackDeleteDialog/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+export { default } from './FeedbackDeleteDialog';