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