feat: allow adding available pre-defined table columns to views (#1371)

* feat: allow adding available pre-defined table columns to views

Closes #1360

* fix: allow creating views with the same name for the same table

* refactor: code review

- rename things
- move handleColumnVisibilityChange to useTableColumns hook

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

@@ -1,4 +1,4 @@
-import { cloneElement, ComponentProps, useRef } from 'react';
+import { cloneElement, type ComponentProps, useCallback, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -6,19 +6,22 @@ import { IconButton } from '@/ui/button/components/IconButton';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { IconPlus } from '@/ui/icon';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
+import { useTableColumns } from '../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
+import type { ColumnDefinition } from '../types/ColumnDefinition';
 
 const StyledColumnMenu = styled(StyledDropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
 type EntityTableColumnMenuProps = {
-  onAddColumn: (columnId: string) => void;
+  onAddColumn?: () => void;
   onClickOutside?: () => void;
 } & ComponentProps<'div'>;
 
@@ -40,6 +43,16 @@ export const EntityTableColumnMenu = ({
     callback: onClickOutside,
   });
 
+  const { handleColumnVisibilityChange } = useTableColumns();
+
+  const handleAddColumn = useCallback(
+    (column: ColumnDefinition<ViewFieldMetadata>) => {
+      onAddColumn?.();
+      handleColumnVisibilityChange(column);
+    },
+    [handleColumnVisibilityChange, onAddColumn],
+  );
+
   return (
     <StyledColumnMenu {...props} ref={ref}>
       <StyledDropdownMenuItemsContainer>
@@ -48,8 +61,9 @@ export const EntityTableColumnMenu = ({
             key={column.id}
             actions={[
               <IconButton
+                key={`add-${column.id}`}
                 icon={<IconPlus size={theme.icon.size.sm} />}
-                onClick={() => onAddColumn(column.id)}
+                onClick={() => handleAddColumn(column)}
               />,
             ]}
           >

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

@@ -148,19 +148,6 @@ export function EntityTableHeader() {
     setIsColumnMenuOpen((previousValue) => !previousValue);
   }, []);
 
-  const handleAddColumn = useCallback(
-    (columnId: string) => {
-      setIsColumnMenuOpen(false);
-
-      const nextColumns = columns.map((column) =>
-        column.id === columnId ? { ...column, isVisible: true } : column,
-      );
-
-      setColumns(nextColumns);
-    },
-    [columns, setColumns],
-  );
-
   return (
     <thead data-select-disable>
       <tr>
@@ -204,7 +191,7 @@ export function EntityTableHeader() {
               />
               {isColumnMenuOpen && (
                 <StyledEntityTableColumnMenu
-                  onAddColumn={handleAddColumn}
+                  onAddColumn={toggleColumnMenu}
                   onClickOutside={toggleColumnMenu}
                 />
               )}

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+
+import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+
+import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableColumnsByIdScopedSelector } from '../states/selectors/tableColumnsByIdScopedSelector';
+import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
+import type { ColumnDefinition } from '../types/ColumnDefinition';
+
+export const useTableColumns = () => {
+  const [tableColumns, setTableColumns] = useRecoilScopedState(
+    tableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+  const tableColumnsById = useRecoilScopedValue(
+    tableColumnsByIdScopedSelector,
+    TableRecoilScopeContext,
+  );
+
+  const handleColumnVisibilityChange = useCallback(
+    (column: ColumnDefinition<ViewFieldMetadata>) => {
+      const nextColumns = tableColumnsById[column.id]
+        ? tableColumns.map((previousColumn) =>
+            previousColumn.id === column.id
+              ? { ...previousColumn, isVisible: !column.isVisible }
+              : previousColumn,
+          )
+        : [...tableColumns, { ...column, isVisible: true }].sort(
+            (columnA, columnB) => columnA.order - columnB.order,
+          );
+
+      setTableColumns(nextColumns);
+    },
+    [setTableColumns, tableColumns, tableColumnsById],
+  );
+
+  return { handleColumnVisibilityChange };
+};

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

@@ -27,9 +27,9 @@ import {
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 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 { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
@@ -74,10 +74,6 @@ export function TableOptionsDropdownContent({
   const [viewEditMode, setViewEditMode] = useRecoilState(
     tableViewEditModeState,
   );
-  const [columns, setColumns] = useRecoilScopedState(
-    tableColumnsScopedState,
-    TableRecoilScopeContext,
-  );
   const visibleColumns = useRecoilScopedValue(
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
@@ -91,18 +87,7 @@ export function TableOptionsDropdownContent({
     TableRecoilScopeContext,
   );
 
-  const handleColumnVisibilityChange = useCallback(
-    async (columnId: string, nextIsVisible: boolean) => {
-      const nextColumns = columns.map((column) =>
-        column.id === columnId
-          ? { ...column, isVisible: nextIsVisible }
-          : column,
-      );
-
-      setColumns(nextColumns);
-    },
-    [columns, setColumns],
-  );
+  const { handleColumnVisibilityChange } = useTableColumns();
 
   const renderFieldActions = useCallback(
     (column: ColumnDefinition<ViewFieldMetadata>) =>
@@ -110,6 +95,7 @@ export function TableOptionsDropdownContent({
       !column.isVisible || visibleColumns.length > 1
         ? [
             <IconButton
+              key={`action-${column.id}`}
               icon={
                 column.isVisible ? (
                   <IconMinus size={theme.icon.size.sm} />
@@ -117,9 +103,7 @@ export function TableOptionsDropdownContent({
                   <IconPlus size={theme.icon.size.sm} />
                 )
               }
-              onClick={() =>
-                handleColumnVisibilityChange(column.id, !column.isVisible)
-              }
+              onClick={() => handleColumnVisibilityChange(column)}
             />,
           ]
         : undefined,

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

@@ -112,12 +112,15 @@ export const TableUpdateViewButtonGroup = ({
   }, []);
 
   const handleViewSubmit = useCallback(async () => {
-    await Promise.resolve(onViewSubmit?.());
+    if (canPersistColumns) setSavedColumns(currentColumns);
+    if (canPersistFilters) setSavedFilters(selectedFilters);
+    if (canPersistSorts) setSavedSorts(selectedSorts);
 
-    setSavedColumns(currentColumns);
-    setSavedFilters(selectedFilters);
-    setSavedSorts(selectedSorts);
+    await Promise.resolve(onViewSubmit?.());
   }, [
+    canPersistColumns,
+    canPersistFilters,
+    canPersistSorts,
     currentColumns,
     onViewSubmit,
     selectedFilters,

front/src/modules/ui/table/states/availableTableColumnsScopedState.ts

@@ -0,0 +1,13 @@
+import { atomFamily } from 'recoil';
+
+import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+
+import type { ColumnDefinition } from '../types/ColumnDefinition';
+
+export const availableTableColumnsScopedState = atomFamily<
+  ColumnDefinition<ViewFieldMetadata>[],
+  string
+>({
+  key: 'availableTableColumnsScopedState',
+  default: [],
+});

front/src/modules/ui/table/states/selectors/hiddenTableColumnsScopedSelector.ts

@@ -1,13 +1,22 @@
 import { selectorFamily } from 'recoil';
 
+import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
 export const hiddenTableColumnsScopedSelector = selectorFamily({
   key: 'hiddenTableColumnsScopedSelector',
   get:
     (scopeId: string) =>
-    ({ get }) =>
-      get(tableColumnsScopedState(scopeId)).filter(
-        (column) => !column.isVisible,
-      ),
+    ({ get }) => {
+      const columns = get(tableColumnsScopedState(scopeId));
+      const columnLabels = columns.map(({ label }) => label);
+      const otherAvailableColumns = get(
+        availableTableColumnsScopedState(scopeId),
+      ).filter(({ label }) => !columnLabels.includes(label));
+
+      return [
+        ...columns.filter((column) => !column.isVisible),
+        ...otherAvailableColumns,
+      ];
+    },
 });