feat: persist board card fields (#1566)

Closes #1538

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>
   );
 }