feat: persist board card fields (#1566)

Closes #1538

front/src/modules/ui/table/components/EntityTable.tsx

@@ -87,18 +87,9 @@ const StyledTableContainer = styled.div`
 
 type OwnProps = {
   updateEntityMutation: any;
-} & Pick<
-  TableHeaderProps,
-  'defaultViewName' | 'onImport' | 'onViewsChange' | 'onViewSubmit'
->;
+} & Pick<TableHeaderProps, 'onImport'>;
 
-export function EntityTable({
-  defaultViewName,
-  onImport,
-  onViewsChange,
-  onViewSubmit,
-  updateEntityMutation,
-}: OwnProps) {
+export function EntityTable({ onImport, updateEntityMutation }: OwnProps) {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   const setRowSelectedState = useSetRowSelectedState();
@@ -135,12 +126,7 @@ export function EntityTable({
     <EntityUpdateMutationContext.Provider value={updateEntityMutation}>
       <StyledTableWithHeader>
         <StyledTableContainer ref={tableBodyRef}>
-          <TableHeader
-            defaultViewName={defaultViewName}
-            onImport={onImport}
-            onViewsChange={onViewsChange}
-            onViewSubmit={onViewSubmit}
-          />
+          <TableHeader onImport={onImport} />
           <ScrollWrapper>
             <div>
               <StyledTable className="entity-table-cell">

front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx

@@ -1,6 +1,5 @@
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import type { View } from '@/ui/view-bar/types/View';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 
@@ -8,13 +7,11 @@ import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
 import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
 
 type TableOptionsDropdownProps = {
-  onViewsChange?: (views: View[]) => void;
   onImport?: () => void;
   customHotkeyScope: HotkeyScope;
 };
 
 export function TableOptionsDropdown({
-  onViewsChange,
   onImport,
   customHotkeyScope,
 }: TableOptionsDropdownProps) {
@@ -23,12 +20,7 @@ export function TableOptionsDropdown({
       buttonComponents={<TableOptionsDropdownButton />}
       dropdownHotkeyScope={customHotkeyScope}
       dropdownId={TableOptionsDropdownId}
-      dropdownComponents={
-        <TableOptionsDropdownContent
-          onImport={onImport}
-          onViewsChange={onViewsChange}
-        />
-      }
+      dropdownComponents={<TableOptionsDropdownContent onImport={onImport} />}
     />
   );
 }

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
@@ -11,31 +11,33 @@ import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection';
 import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView';
 import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
-import type { View } from '@/ui/view-bar/types/View';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
+import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 type TableOptionsDropdownButtonProps = {
-  onViewsChange?: (views: View[]) => void | Promise<void>;
   onImport?: () => void;
 };
 
 type TableOptionsMenu = 'fields';
 
 export function TableOptionsDropdownContent({
-  onViewsChange,
   onImport,
 }: TableOptionsDropdownButtonProps) {
+  const scopeId = useContextScopeId(TableRecoilScopeContext);
+
   const { closeDropdownButton } = useDropdownButton({
     dropdownId: TableOptionsDropdownId,
   });
@@ -60,17 +62,28 @@ export function TableOptionsDropdownContent({
     TableRecoilScopeContext,
   );
 
+  const { handleColumnVisibilityChange } = useTableColumns();
+
   const { upsertView } = useUpsertView({
-    onViewsChange,
     scopeContext: TableRecoilScopeContext,
   });
 
-  const { handleColumnVisibilityChange } = useTableColumns();
+  const handleViewNameSubmit = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async () => {
+        const tableColumns = await snapshot.getPromise(
+          tableColumnsScopedState(scopeId),
+        );
+        const isCreateMode = viewEditMode.mode === 'create';
+        const name = viewEditInputRef.current?.value;
+        const view = await upsertView(name);
 
-  const handleViewNameSubmit = async () => {
-    const name = viewEditInputRef.current?.value;
-    await upsertView(name);
-  };
+        if (view && isCreateMode) {
+          set(savedTableColumnsFamilyState(view.id), tableColumns);
+        }
+      },
+    [scopeId, upsertView, viewEditMode.mode],
+  );
 
   const handleSelectMenu = (option: TableOptionsMenu) => {
     handleViewNameSubmit();

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@@ -5,7 +6,8 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { ViewBar, ViewBarProps } from '@/ui/view-bar/components/ViewBar';
+import { ViewBar } from '@/ui/view-bar/components/ViewBar';
+import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
@@ -18,14 +20,11 @@ import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 export type TableHeaderProps = {
   onImport?: () => void;
-} & Pick<ViewBarProps, 'defaultViewName' | 'onViewsChange' | 'onViewSubmit'>;
+};
 
-export function TableHeader({
-  onImport,
-  onViewsChange,
-  onViewSubmit,
-  ...props
-}: TableHeaderProps) {
+export function TableHeader({ onImport }: TableHeaderProps) {
+  const { onCurrentViewSubmit, ...viewBarContextProps } =
+    useContext(ViewBarContext);
   const tableScopeId = useContextScopeId(TableRecoilScopeContext);
 
   const currentViewId = useRecoilScopedValue(
@@ -43,9 +42,7 @@ export function TableHeader({
     savedTableColumnsFamilyState(currentViewId),
   );
 
-  function handleViewBarReset() {
-    setTableColumns(savedTableColumns);
-  }
+  const handleViewBarReset = () => setTableColumns(savedTableColumns);
 
   const handleViewSelect = useRecoilCallback(
     ({ set, snapshot }) =>
@@ -58,32 +55,36 @@ export function TableHeader({
     [tableScopeId],
   );
 
-  async function handleViewSubmit() {
+  async function handleCurrentViewSubmit() {
     if (canPersistTableColumns) {
       setSavedTableColumns(tableColumns);
     }
 
-    await onViewSubmit?.();
+    await onCurrentViewSubmit?.();
   }
 
   return (
     <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
-      <ViewBar
-        {...props}
-        canPersistViewFields={canPersistTableColumns}
-        onReset={handleViewBarReset}
-        onViewSelect={handleViewSelect}
-        onViewSubmit={handleViewSubmit}
-        optionsDropdownButton={
-          <TableOptionsDropdown
-            onImport={onImport}
-            onViewsChange={onViewsChange}
-            customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
-          />
-        }
-        optionsDropdownKey={TableOptionsDropdownId}
-        scopeContext={TableRecoilScopeContext}
-      />
+      <ViewBarContext.Provider
+        value={{
+          ...viewBarContextProps,
+          canPersistViewFields: canPersistTableColumns,
+          onCurrentViewSubmit: handleCurrentViewSubmit,
+          onViewBarReset: handleViewBarReset,
+          onViewSelect: handleViewSelect,
+        }}
+      >
+        <ViewBar
+          optionsDropdownButton={
+            <TableOptionsDropdown
+              onImport={onImport}
+              customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+            />
+          }
+          optionsDropdownKey={TableOptionsDropdownId}
+          scopeContext={TableRecoilScopeContext}
+        />
+      </ViewBarContext.Provider>
     </RecoilScope>
   );
 }