feat: add views dropdown (list, add & edit views) (#1220)

Closes #1218

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

@@ -1,30 +1,50 @@
-import { useCallback, useState } from 'react';
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTheme } from '@emotion/react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { IconButton } from '@/ui/button/components/IconButton';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import {
+import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
 } from '@/ui/editable-field/types/ViewField';
 import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
-import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { IconChevronLeft, IconMinus, IconPlus, IconTag } from '@/ui/icon';
 import {
   hiddenTableColumnsState,
   tableColumnsState,
   visibleTableColumnsState,
 } from '@/ui/table/states/tableColumnsState';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+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 {
+  type TableView,
+  tableViewEditModeState,
+  tableViewsByIdState,
+  tableViewsState,
+} from '../../states/tableViewsState';
+import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 import { TableOptionsDropdownSection } from './TableOptionsDropdownSection';
 
 type TableOptionsDropdownButtonProps = {
   onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
-  HotkeyScope: FiltersHotkeyScope;
+  onViewsChange?: (views: TableView[]) => void;
+  HotkeyScope: TableOptionsHotkeyScope;
 };
 
 enum Option {
@@ -33,17 +53,37 @@ enum Option {
 
 export const TableOptionsDropdownButton = ({
   onColumnsChange,
+  onViewsChange,
   HotkeyScope,
 }: TableOptionsDropdownButtonProps) => {
   const theme = useTheme();
+
   const [isUnfolded, setIsUnfolded] = useState(false);
   const [selectedOption, setSelectedOption] = useState<Option | undefined>(
     undefined,
   );
 
+  const viewEditInputRef = useRef<HTMLInputElement>(null);
+
   const [columns, setColumns] = useRecoilState(tableColumnsState);
+  const [viewEditMode, setViewEditMode] = useRecoilState(
+    tableViewEditModeState,
+  );
+  const [views, setViews] = useRecoilScopedState(
+    tableViewsState,
+    TableRecoilScopeContext,
+  );
   const visibleColumns = useRecoilValue(visibleTableColumnsState);
   const hiddenColumns = useRecoilValue(hiddenTableColumnsState);
+  const viewsById = useRecoilScopedValue(
+    tableViewsByIdState,
+    TableRecoilScopeContext,
+  );
+
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
 
   const handleColumnVisibilityChange = useCallback(
     (columnId: string, nextIsVisible: boolean) => {
@@ -79,25 +119,109 @@ export const TableOptionsDropdownButton = ({
     [handleColumnVisibilityChange, theme.icon.size.sm, visibleColumns.length],
   );
 
+  const resetViewEditMode = useCallback(() => {
+    setViewEditMode({ mode: undefined, viewId: undefined });
+
+    if (viewEditInputRef.current) {
+      viewEditInputRef.current.value = '';
+    }
+  }, [setViewEditMode]);
+
+  const handleViewNameSubmit = useCallback(
+    (event?: FormEvent) => {
+      event?.preventDefault();
+
+      if (viewEditMode.mode && viewEditInputRef.current?.value) {
+        const name = viewEditInputRef.current.value;
+        const nextViews =
+          viewEditMode.mode === 'create'
+            ? [...views, { id: v4(), name }]
+            : views.map((view) =>
+                view.id === viewEditMode.viewId ? { ...view, name } : view,
+              );
+
+        (onViewsChange ?? setViews)(nextViews);
+      }
+
+      resetViewEditMode();
+    },
+    [
+      onViewsChange,
+      resetViewEditMode,
+      setViews,
+      viewEditMode.mode,
+      viewEditMode.viewId,
+      views,
+    ],
+  );
+
+  const handleSelectOption = useCallback(
+    (option: Option) => {
+      handleViewNameSubmit();
+      setIsUnfolded(true);
+      setSelectedOption(option);
+    },
+    [handleViewNameSubmit],
+  );
+
   const resetSelectedOption = useCallback(() => {
     setSelectedOption(undefined);
   }, []);
 
+  const handleUnfoldedChange = useCallback(
+    (nextIsUnfolded: boolean) => {
+      setIsUnfolded(nextIsUnfolded);
+
+      if (!nextIsUnfolded) {
+        handleViewNameSubmit();
+        resetSelectedOption();
+      }
+    },
+    [handleViewNameSubmit, resetSelectedOption],
+  );
+
+  useEffect(() => {
+    isUnfolded || viewEditMode.mode
+      ? setHotkeyScopeAndMemorizePreviousScope(HotkeyScope)
+      : goBackToPreviousHotkeyScope();
+  }, [
+    HotkeyScope,
+    goBackToPreviousHotkeyScope,
+    isUnfolded,
+    setHotkeyScopeAndMemorizePreviousScope,
+    viewEditMode.mode,
+  ]);
+
   return (
     <DropdownButton
       label="Options"
       isActive={false}
-      isUnfolded={isUnfolded}
-      onIsUnfoldedChange={setIsUnfolded}
+      isUnfolded={isUnfolded || !!viewEditMode.mode}
+      onIsUnfoldedChange={handleUnfoldedChange}
       HotkeyScope={HotkeyScope}
     >
       {!selectedOption && (
         <>
-          <DropdownMenuHeader>View settings</DropdownMenuHeader>
+          {!!viewEditMode.mode ? (
+            <DropdownMenuInput
+              ref={viewEditInputRef}
+              autoFocus
+              placeholder={
+                viewEditMode.mode === 'create' ? 'New view' : 'View name'
+              }
+              defaultValue={
+                viewEditMode.viewId
+                  ? viewsById[viewEditMode.viewId]?.name
+                  : undefined
+              }
+            />
+          ) : (
+            <DropdownMenuHeader>View settings</DropdownMenuHeader>
+          )}
           <DropdownMenuSeparator />
           <DropdownMenuItemsContainer>
             <DropdownMenuItem
-              onClick={() => setSelectedOption(Option.Properties)}
+              onClick={() => handleSelectOption(Option.Properties)}
             >
               <IconTag size={theme.icon.size.md} />
               Properties

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

@@ -0,0 +1,149 @@
+import { type MouseEvent, useCallback, useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useSetRecoilState } from 'recoil';
+
+import { IconButton } from '@/ui/button/components/IconButton';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
+import { IconChevronDown, IconList, IconPencil, IconPlus } from '@/ui/icon';
+import {
+  currentTableViewIdState,
+  currentTableViewState,
+  tableViewEditModeState,
+  tableViewsState,
+} from '@/ui/table/states/tableViewsState';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+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 { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';
+
+const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+const StyledDropdownLabelAdornments = styled.span`
+  align-items: center;
+  color: ${({ theme }) => theme.grayScale.gray35};
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledViewIcon = styled(IconList)`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+type TableViewsDropdownButtonProps = {
+  defaultViewName: string;
+  HotkeyScope: TableViewsHotkeyScope;
+};
+
+export const TableViewsDropdownButton = ({
+  defaultViewName,
+  HotkeyScope,
+}: TableViewsDropdownButtonProps) => {
+  const theme = useTheme();
+  const [isUnfolded, setIsUnfolded] = useState(false);
+
+  const currentView = useRecoilScopedValue(
+    currentTableViewState,
+    TableRecoilScopeContext,
+  );
+  const views = useRecoilScopedValue(tableViewsState, TableRecoilScopeContext);
+  const [, setCurrentViewId] = useRecoilScopedState(
+    currentTableViewIdState,
+    TableRecoilScopeContext,
+  );
+  const setViewEditMode = useSetRecoilState(tableViewEditModeState);
+
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
+
+  const handleViewSelect = useCallback(
+    (viewId?: string) => {
+      setCurrentViewId(viewId);
+      setIsUnfolded(false);
+    },
+    [setCurrentViewId],
+  );
+
+  const handleAddViewButtonClick = useCallback(() => {
+    setViewEditMode({ mode: 'create', viewId: undefined });
+    setIsUnfolded(false);
+  }, [setViewEditMode]);
+
+  const handleEditViewButtonClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
+      event.stopPropagation();
+      setViewEditMode({ mode: 'edit', viewId });
+      setIsUnfolded(false);
+    },
+    [setViewEditMode],
+  );
+
+  useEffect(() => {
+    isUnfolded
+      ? setHotkeyScopeAndMemorizePreviousScope(HotkeyScope)
+      : goBackToPreviousHotkeyScope();
+  }, [
+    HotkeyScope,
+    goBackToPreviousHotkeyScope,
+    isUnfolded,
+    setHotkeyScopeAndMemorizePreviousScope,
+  ]);
+
+  return (
+    <DropdownButton
+      label={
+        <>
+          <StyledViewIcon size={theme.icon.size.md} />
+          {currentView?.name || defaultViewName}{' '}
+          <StyledDropdownLabelAdornments>
+            · {views.length + 1} <IconChevronDown size={theme.icon.size.sm} />
+          </StyledDropdownLabelAdornments>
+        </>
+      }
+      isActive={false}
+      isUnfolded={isUnfolded}
+      onIsUnfoldedChange={setIsUnfolded}
+      anchor="left"
+      HotkeyScope={HotkeyScope}
+    >
+      <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItem onClick={() => handleViewSelect(undefined)}>
+          <IconList size={theme.icon.size.md} />
+          {defaultViewName}
+        </DropdownMenuItem>
+        {views.map((view) => (
+          <DropdownMenuItem
+            key={view.id}
+            actions={
+              <IconButton
+                onClick={(event) => handleEditViewButtonClick(event, view.id)}
+                icon={<IconPencil size={theme.icon.size.sm} />}
+              />
+            }
+            onClick={() => handleViewSelect(view.id)}
+          >
+            <IconList size={theme.icon.size.md} />
+            {view.name}
+          </DropdownMenuItem>
+        ))}
+      </StyledDropdownMenuItemsContainer>
+      <DropdownMenuSeparator />
+      <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItem onClick={handleAddViewButtonClick}>
+          <IconPlus size={theme.icon.size.md} />
+          Add view
+        </DropdownMenuItem>
+      </StyledDropdownMenuItemsContainer>
+    </DropdownButton>
+  );
+};