Merge pull request #1397 from line/fix/minor-bugs

feat: update column sizes and integrate js-base64 for encoding/decoding in feedback and issue components

Author: jihun

apps/web/src/entities/dashboard/ui/issue-rank.ui.tsx

@@ -53,7 +53,7 @@ const getColumns = (t: TFunction) => [
   columnHelper.accessor('no', {
     header: 'No',
     enableSorting: false,
-    size: 100,
+    size: 30,
   }),
   columnHelper.accessor('name', {
     header: 'Issue',

apps/web/src/entities/feedback/lib/use-feedback-query-converter.ts

@@ -16,6 +16,7 @@
 
 import { useCallback, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
+import { decode, encode } from 'js-base64';
 import { createParser, useQueryState } from 'nuqs';
 
 import type {
@@ -72,10 +73,10 @@ const useFeedbackQueryConverter = (input: {
     'queries',
     createParser({
       parse: (value) => {
-        return JSON.parse(atob(value)) as Record<string, unknown>[];
+        return JSON.parse(decode(value)) as Record<string, unknown>[];
       },
       serialize: (value) => {
-        return btoa(JSON.stringify(value));
+        return encode(JSON.stringify(value));
       },
     }).withDefault([{ createdAt: DEFAULT_DATE_RANGE, condition: 'IS' }]),
   );

apps/web/src/entities/feedback/ui/feedback-detail-sheet.ui.tsx

@@ -17,6 +17,7 @@
 import { useState } from 'react';
 import { useOverlay } from '@toss/use-overlay';
 import dayjs from 'dayjs';
+import { encode } from 'js-base64';
 import { useTranslation } from 'next-i18next';
 
 import {
@@ -147,7 +148,7 @@ const FeedbackDetailSheet = (props: Props) => {
               className="cursor-pointer"
               onClick={async () => {
                 await navigator.clipboard.writeText(
-                  `${window.location.origin}/${window.location.pathname}?queries=${btoa(JSON.stringify([{ id: feedback.id, condition: 'IS' }]))}&channelId=${channelId}`,
+                  `${window.location.origin}/${window.location.pathname}?queries=${encode(JSON.stringify([{ id: feedback.id, condition: 'IS' }]))}&channelId=${channelId}`,
                 );
                 toast(t('v2.toast.copy'), {
                   icon: <Icon name="RiCheckboxMultipleFill" />,

apps/web/src/entities/field/field-columns.tsx

@@ -36,7 +36,7 @@ export const getFieldColumns = (reorder?: (data: FieldInfo[]) => void) =>
       columnHelper.display({
         id: 'drag-handle',
         cell: ({ row }) => <RowDragHandleCell rowId={row.id} />,
-        size: 10,
+        size: 30,
         enableSorting: false,
       })
     : null,

apps/web/src/entities/member/member-columns.tsx

@@ -43,7 +43,7 @@ export const memberColumns = [
         onCheckedChange={(checked) => row.toggleSelected(checked)}
       />
     ),
-    size: 50,
+    size: 30,
     enableSorting: false,
   }),
   columnHelper.accessor('user.email', {

apps/web/src/entities/user/ui/user-management-table.ui.tsx

@@ -152,7 +152,7 @@ const UserManagementTable: React.FC<IProps> = ({ createButton }) => {
   useEffect(() => {
     table.setPageIndex(0);
     table.resetRowSelection();
-  }, [pagination.pageSize]);
+  }, [pagination.pageSize, queries]);
 
   const selectedRowIds = useMemo(() => {
     return Object.entries(table.getState().rowSelection).reduce(

apps/web/src/pages/main/project/[projectId]/feedback.tsx

@@ -167,6 +167,7 @@ const FeedbackManagementPage: NextPageWithLayout<IProps> = (props) => {
             format: 'issue',
             name: field.name,
             matchType: ['IS'],
+            visible: true,
           };
         }
         if (field.format === 'select') {

apps/web/src/shared/ui/table-filter-popover/table-filter-popover.type.ts

@@ -21,6 +21,7 @@ export type TableFilterOperator = 'AND' | 'OR';
 export type TableFilterField = {
   key: string;
   name: string;
+  visible?: boolean;
 } & (
   | TableFilterFieldString
   | TableFilterFieldNumber

apps/web/src/shared/ui/table-filter-popover/table-filter-popover.ui.tsx

@@ -206,7 +206,7 @@ const TableFilterPopover = (props: Props) => {
                         options={filterFields
                           .filter(
                             (v) =>
-                              v.key === 'issueIds' ||
+                              !!v.visible ||
                               (table ?
                                 table
                                   .getVisibleFlatColumns()

apps/web/src/shared/ui/tables/basic-table.ui.tsx

@@ -45,7 +45,6 @@ import {
 
 import { cn } from '@/shared/utils';
 
-import InfiniteScrollArea from '../infinite-scroll-area.ui';
 import SortingTableHead from '../sorting-table-head.ui';
 import DraggableRow from './draggable-row.ui';
 import TableLoadingRow from './table-loading-row';
@@ -62,7 +61,6 @@ interface IProps<T> {
   onClickRow?: (index: number, row: T) => void;
   reorder?: (data: T[]) => void;
   disableRound?: boolean;
-  isInfiniteScroll?: boolean;
 }
 
 const BasicTable = <T,>(props: IProps<T>) => {
@@ -75,7 +73,6 @@ const BasicTable = <T,>(props: IProps<T>) => {
     onClickRow,
     reorder,
     disableRound,
-    isInfiniteScroll,
   } = props;
 
   // reorder rows after drag & drop
@@ -195,16 +192,6 @@ const BasicTable = <T,>(props: IProps<T>) => {
                     }
                   />
                 ))}
-                {isInfiniteScroll && (
-                  <tr>
-                    <td>
-                      <InfiniteScrollArea
-                        fetchNextPage={table.nextPage}
-                        hasNextPage={table.getCanNextPage()}
-                      />
-                    </td>
-                  </tr>
-                )}
               </SortableContext>
             }
           </TableBody>

apps/web/src/shared/ui/tables/row-drag-handle-cell.ui.tsx

@@ -27,9 +27,11 @@ const RowDragHandleCell: React.FC<Props> = (props) => {
   const { attributes, listeners } = useSortable({ id: rowId });
 
   return (
-    <button {...attributes} {...listeners}>
-      <Icon name="RiDraggable" className="text-neutral-tertiary" size={16} />
-    </button>
+    <div>
+      <button {...attributes} {...listeners}>
+        <Icon name="RiDraggable" className="text-neutral-tertiary" size={16} />
+      </button>
+    </div>
   );
 };
 

apps/web/src/widgets/issue-table/ui/issue-detail-sheet.ui.tsx

@@ -218,7 +218,7 @@ const IssueDetailSheet = (props: Props) => {
                     query: {
                       projectId,
                       channelId: v.id,
-                      queries: btoa(
+                      queries: encode(
                         JSON.stringify([
                           { issueIds: [data.id], condition: 'IS' },
                         ]),

apps/web/src/widgets/project-settings/ui/member-setting.ui.tsx

@@ -111,7 +111,7 @@ const MemberSetting: React.FC<IProps> = (props) => {
   useEffect(() => {
     table.setPageIndex(0);
     table.resetRowSelection();
-  }, [pagination.pageSize]);
+  }, [pagination.pageSize, queries]);
 
   const rowSelectionIds = useMemo(
     () =>
@@ -229,24 +229,28 @@ const MemberSetting: React.FC<IProps> = (props) => {
       />
     ));
   };
+
   const filterFields: TableFilterField[] = [
     {
       key: 'email',
       format: 'string',
       name: 'Email',
       matchType: ['CONTAINS', 'IS'],
+      visible: true,
     },
     {
       key: 'name',
       format: 'string',
       name: 'Name',
       matchType: ['CONTAINS', 'IS'],
+      visible: true,
     },
     {
       key: 'department',
       format: 'string',
       name: 'Department',
       matchType: ['CONTAINS', 'IS'],
+      visible: true,
     },
     {
       key: 'role',
@@ -258,12 +262,14 @@ const MemberSetting: React.FC<IProps> = (props) => {
           name: role.name,
         })) ?? [],
       matchType: ['IS'],
+      visible: true,
     },
     {
       key: 'createdAt',
       format: 'date',
       name: 'Joined',
       matchType: ['IS', 'BETWEEN'],
+      visible: true,
     },
   ];