Feat/hide board fields (#1271)

* Renamed AuthAutoRouter * Moved RecoilScope * Refactored old WithTopBarContainer to make it less transclusive * Created new add opportunity button and refactored DropdownButton * Added tests * Deactivated new eslint rule * Refactored Table options with new dropdown * Started BoardDropdown * Fix lint * Refactor dropdown openstate * Fix according to PR * Fix tests --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-08-24 13:19:42 +02:00
parent 64cef963bc
commit 252f1c655e
48 changed files with 860 additions and 580 deletions
--- a/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx
+++ b/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx
@ -4,15 +4,15 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';

 import { IconButton } from '@/ui/button/components/IconButton';
-import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconPlus } from '@/ui/icon';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';

 import { hiddenTableColumnsState } from '../states/tableColumnsState';

-const StyledColumnMenu = styled(DropdownMenu)`
+const StyledColumnMenu = styled(StyledDropdownMenu)`
  font-weight: ${({ theme }) => theme.font.weight.regular};
 `;

@ -38,7 +38,7 @@ export const EntityTableColumnMenu = ({

  return (
    <StyledColumnMenu {...props} ref={ref}>
-      <DropdownMenuItemsContainer>
+      <StyledDropdownMenuItemsContainer>
        {hiddenColumns.map((column) => (
          <DropdownMenuItem
            key={column.id}
@ -56,7 +56,7 @@ export const EntityTableColumnMenu = ({
            {column.columnLabel}
          </DropdownMenuItem>
        ))}
-      </DropdownMenuItemsContainer>
+      </StyledDropdownMenuItemsContainer>
    </StyledColumnMenu>
  );
 };
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
@ -0,0 +1,40 @@
+import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+import { type TableView } from '../../states/tableViewsState';
+
+import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
+import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
+
+type TableOptionsDropdownProps = {
+  onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
+  onViewsChange?: (views: TableView[]) => void;
+  onImport?: () => void;
+  customHotkeyScope: HotkeyScope;
+};
+
+export function TableOptionsDropdown({
+  onColumnsChange,
+  onViewsChange,
+  onImport,
+  customHotkeyScope,
+}: TableOptionsDropdownProps) {
+  return (
+    <DropdownButton
+      buttonComponents={<TableOptionsDropdownButton />}
+      dropdownHotkeyScope={customHotkeyScope}
+      dropdownKey="options"
+      dropdownComponents={
+        <TableOptionsDropdownContent
+          onColumnsChange={onColumnsChange}
+          onImport={onImport}
+          onViewsChange={onViewsChange}
+        />
+      }
+    />
+  );
+}
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx
@ -1,273 +1,17 @@
-import {
-  type FormEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { useTheme } from '@emotion/react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { v4 } from 'uuid';
+import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';

-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 type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
-import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
-import {
-  IconChevronLeft,
-  IconFileImport,
-  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;
-  onViewsChange?: (views: TableView[]) => void;
-  onImport?: () => void;
-  HotkeyScope: TableOptionsHotkeyScope;
-};
-
-enum Option {
-  Properties = 'Properties',
-}
-
-export const TableOptionsDropdownButton = ({
-  onColumnsChange,
-  onViewsChange,
-  onImport,
-  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) => {
-      const nextColumns = columns.map((column) =>
-        column.id === columnId
-          ? { ...column, isVisible: nextIsVisible }
-          : column,
-      );
-
-      (onColumnsChange ?? setColumns)(nextColumns);
-    },
-    [columns, onColumnsChange, setColumns],
-  );
-
-  const renderFieldActions = useCallback(
-    (column: ViewFieldDefinition<ViewFieldMetadata>) =>
-      // Do not allow hiding last visible column
-      !column.isVisible || visibleColumns.length > 1 ? (
-        <IconButton
-          icon={
-            column.isVisible ? (
-              <IconMinus size={theme.icon.size.sm} />
-            ) : (
-              <IconPlus size={theme.icon.size.sm} />
-            )
-          }
-          onClick={() =>
-            handleColumnVisibilityChange(column.id, !column.isVisible)
-          }
-        />
-      ) : undefined,
-    [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,
-  ]);
+export function TableOptionsDropdownButton() {
+  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
+    key: 'options',
+  });

  return (
-    <DropdownButton
-      label="Options"
-      isActive={false}
-      isUnfolded={isUnfolded || !!viewEditMode.mode}
-      onIsUnfoldedChange={handleUnfoldedChange}
-      HotkeyScope={HotkeyScope}
+    <StyledHeaderDropdownButton
+      isUnfolded={isDropdownButtonOpen}
+      onClick={toggleDropdownButton}
    >
-      {!selectedOption && (
-        <>
-          {!!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={() => handleSelectOption(Option.Properties)}
-            >
-              <IconTag size={theme.icon.size.md} />
-              Properties
-            </DropdownMenuItem>
-            {onImport && (
-              <DropdownMenuItem onClick={onImport}>
-                <IconFileImport size={theme.icon.size.md} />
-                Import
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuItemsContainer>
-        </>
-      )}
-      {selectedOption === Option.Properties && (
-        <>
-          <DropdownMenuHeader
-            startIcon={<IconChevronLeft size={theme.icon.size.md} />}
-            onClick={resetSelectedOption}
-          >
-            Properties
-          </DropdownMenuHeader>
-          <DropdownMenuSeparator />
-          <TableOptionsDropdownSection
-            renderActions={renderFieldActions}
-            title="Visible"
-            columns={visibleColumns}
-          />
-          {hiddenColumns.length > 0 && (
-            <>
-              <DropdownMenuSeparator />
-              <TableOptionsDropdownSection
-                renderActions={renderFieldActions}
-                title="Hidden"
-                columns={hiddenColumns}
-              />
-            </>
-          )}
-        </>
-      )}
-    </DropdownButton>
+      Options
+    </StyledHeaderDropdownButton>
  );
-};
+}
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
@ -0,0 +1,250 @@
+import { type FormEvent, useCallback, useRef, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+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 { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import {
+  IconChevronLeft,
+  IconFileImport,
+  IconMinus,
+  IconPlus,
+  IconTag,
+} from '@/ui/icon';
+import {
+  hiddenTableColumnsState,
+  tableColumnsState,
+  visibleTableColumnsState,
+} from '@/ui/table/states/tableColumnsState';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+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;
+  onViewsChange?: (views: TableView[]) => void;
+  onImport?: () => void;
+};
+
+enum Option {
+  Properties = 'Properties',
+}
+
+export function TableOptionsDropdownContent({
+  onColumnsChange,
+  onViewsChange,
+  onImport,
+}: TableOptionsDropdownButtonProps) {
+  const theme = useTheme();
+
+  const { closeDropdownButton } = useDropdownButton({ key: 'options' });
+
+  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 handleColumnVisibilityChange = useCallback(
+    (columnId: string, nextIsVisible: boolean) => {
+      const nextColumns = columns.map((column) =>
+        column.id === columnId
+          ? { ...column, isVisible: nextIsVisible }
+          : column,
+      );
+
+      (onColumnsChange ?? setColumns)(nextColumns);
+    },
+    [columns, onColumnsChange, setColumns],
+  );
+
+  const renderFieldActions = useCallback(
+    (column: ViewFieldDefinition<ViewFieldMetadata>) =>
+      // Do not allow hiding last visible column
+      !column.isVisible || visibleColumns.length > 1 ? (
+        <IconButton
+          icon={
+            column.isVisible ? (
+              <IconMinus size={theme.icon.size.sm} />
+            ) : (
+              <IconPlus size={theme.icon.size.sm} />
+            )
+          }
+          onClick={() =>
+            handleColumnVisibilityChange(column.id, !column.isVisible)
+          }
+        />
+      ) : undefined,
+    [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();
+      setSelectedOption(option);
+    },
+    [handleViewNameSubmit],
+  );
+
+  const resetSelectedOption = useCallback(() => {
+    setSelectedOption(undefined);
+  }, []);
+
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      closeDropdownButton();
+    },
+    TableOptionsHotkeyScope.Dropdown,
+  );
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      handleViewNameSubmit();
+      resetSelectedOption();
+      closeDropdownButton();
+    },
+    TableOptionsHotkeyScope.Dropdown,
+  );
+
+  return (
+    <StyledDropdownMenu>
+      {!selectedOption && (
+        <>
+          {!!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>
+          )}
+          <StyledDropdownMenuSeparator />
+          <StyledDropdownMenuItemsContainer>
+            <DropdownMenuItem
+              onClick={() => handleSelectOption(Option.Properties)}
+            >
+              <IconTag size={theme.icon.size.md} />
+              Properties
+            </DropdownMenuItem>
+            {onImport && (
+              <DropdownMenuItem onClick={onImport}>
+                <IconFileImport size={theme.icon.size.md} />
+                Import
+              </DropdownMenuItem>
+            )}
+          </StyledDropdownMenuItemsContainer>
+        </>
+      )}
+      {selectedOption === Option.Properties && (
+        <>
+          <DropdownMenuHeader
+            startIcon={<IconChevronLeft size={theme.icon.size.md} />}
+            onClick={resetSelectedOption}
+          >
+            Properties
+          </DropdownMenuHeader>
+          <StyledDropdownMenuSeparator />
+          <TableOptionsDropdownSection
+            renderActions={renderFieldActions}
+            title="Visible"
+            columns={visibleColumns}
+          />
+          {hiddenColumns.length > 0 && (
+            <>
+              <StyledDropdownMenuSeparator />
+              <TableOptionsDropdownSection
+                renderActions={renderFieldActions}
+                title="Hidden"
+                columns={hiddenColumns}
+              />
+            </>
+          )}
+        </>
+      )}
+    </StyledDropdownMenu>
+  );
+}
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx
@ -5,8 +5,8 @@ import {
  DropdownMenuItem,
  DropdownMenuItemProps,
 } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSubheader } from '@/ui/dropdown/components/DropdownMenuSubheader';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import {
  ViewFieldDefinition,
  ViewFieldMetadata,
@ -20,17 +20,17 @@ type TableOptionsDropdownSectionProps = {
  columns: ViewFieldDefinition<ViewFieldMetadata>[];
 };

-export const TableOptionsDropdownSection = ({
+export function TableOptionsDropdownSection({
  renderActions,
  title,
  columns,
-}: TableOptionsDropdownSectionProps) => {
+}: TableOptionsDropdownSectionProps) {
  const theme = useTheme();

  return (
    <>
-      <DropdownMenuSubheader>{title}</DropdownMenuSubheader>
-      <DropdownMenuItemsContainer>
+      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      <StyledDropdownMenuItemsContainer>
        {columns.map((column) => (
          <DropdownMenuItem key={column.id} actions={renderActions(column)}>
            {column.columnIcon &&
@ -40,7 +40,7 @@ export const TableOptionsDropdownSection = ({
            {column.columnLabel}
          </DropdownMenuItem>
        ))}
-      </DropdownMenuItemsContainer>
+      </StyledDropdownMenuItemsContainer>
    </>
  );
-};
+}
--- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
+++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
@ -7,7 +7,7 @@ import { Key } from 'ts-key-enum';
 import { Button, ButtonSize } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { DropdownMenuContainer } from '@/ui/filter-n-sort/components/DropdownMenuContainer';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
@ -110,12 +110,12 @@ export const TableUpdateViewButtonGroup = ({

      {isDropdownOpen && (
        <StyledDropdownMenuContainer onClose={handleDropdownClose}>
-          <DropdownMenuItemsContainer>
+          <StyledDropdownMenuItemsContainer>
            <DropdownMenuItem onClick={handleCreateViewButtonClick}>
              <IconPlus size={theme.icon.size.md} />
              Create view
            </DropdownMenuItem>
-          </DropdownMenuItemsContainer>
+          </StyledDropdownMenuItemsContainer>
        </StyledDropdownMenuContainer>
      )}
    </StyledContainer>
--- a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
@ -5,8 +5,9 @@ import { useRecoilCallback, 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 { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
@ -34,7 +35,9 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';

-const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+const StyledBoldDropdownMenuItemsContainer = styled(
+  StyledDropdownMenuItemsContainer,
+)`
  font-weight: ${({ theme }) => theme.font.weight.regular};
 `;

@ -66,6 +69,10 @@ export const TableViewsDropdownButton = ({

  const tableScopeId = useContextScopeId(TableRecoilScopeContext);

+  const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({
+    key: 'options',
+  });
+
  const currentView = useRecoilScopedValue(
    currentTableViewState,
    TableRecoilScopeContext,
@ -105,8 +112,9 @@ export const TableViewsDropdownButton = ({

  const handleAddViewButtonClick = useCallback(() => {
    setViewEditMode({ mode: 'create', viewId: undefined });
+    openOptionsDropdownButton();
    setIsUnfolded(false);
-  }, [setViewEditMode]);
+  }, [setViewEditMode, openOptionsDropdownButton]);

  const handleEditViewButtonClick = useCallback(
    (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
@ -184,13 +192,13 @@ export const TableViewsDropdownButton = ({
          </DropdownMenuItem>
        ))}
      </StyledDropdownMenuItemsContainer>
-      <DropdownMenuSeparator />
-      <StyledDropdownMenuItemsContainer>
+      <StyledDropdownMenuSeparator />
+      <StyledBoldDropdownMenuItemsContainer>
        <DropdownMenuItem onClick={handleAddViewButtonClick}>
          <IconPlus size={theme.icon.size.md} />
          Add view
        </DropdownMenuItem>
-      </StyledDropdownMenuItemsContainer>
+      </StyledBoldDropdownMenuItemsContainer>
    </DropdownButton>
  );
 };
--- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx
+++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx
@ -1,5 +1,6 @@
 import { useCallback } from 'react';

+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import type {
  ViewFieldDefinition,
  ViewFieldMetadata,
@ -10,10 +11,11 @@ import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownBu
 import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
-import { TableOptionsDropdownButton } from '@/ui/table/options/components/TableOptionsDropdownButton';
 import { TopBar } from '@/ui/top-bar/TopBar';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';

+import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
 import { TableUpdateViewButtonGroup } from '../../options/components/TableUpdateViewButtonGroup';
 import { TableViewsDropdownButton } from '../../options/components/TableViewsDropdownButton';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
@ -60,54 +62,56 @@ export function TableHeader<SortField>({
  );

  return (
-    <TopBar
-      leftComponent={
-        <TableViewsDropdownButton
-          defaultViewName={viewName}
-          onViewsChange={onViewsChange}
-          HotkeyScope={TableViewsHotkeyScope.ListDropdown}
-        />
-      }
-      displayBottomBorder={false}
-      rightComponent={
-        <>
-          <FilterDropdownButton
-            context={TableRecoilScopeContext}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-            isPrimaryButton
-          />
-          <SortDropdownButton<SortField>
-            context={TableRecoilScopeContext}
-            isSortSelected={sorts.length > 0}
-            availableSorts={availableSorts || []}
-            onSortSelect={sortSelect}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-            isPrimaryButton
-          />
-          <TableOptionsDropdownButton
-            onImport={onImport}
-            onColumnsChange={onColumnsChange}
+    <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+      <TopBar
+        leftComponent={
+          <TableViewsDropdownButton
+            defaultViewName={viewName}
            onViewsChange={onViewsChange}
-            HotkeyScope={TableOptionsHotkeyScope.Dropdown}
+            HotkeyScope={TableViewsHotkeyScope.ListDropdown}
          />
-        </>
-      }
-      bottomComponent={
-        <SortAndFilterBar
-          context={TableRecoilScopeContext}
-          sorts={sorts}
-          onRemoveSort={sortUnselect}
-          onCancelClick={() => setSorts([])}
-          hasFilterButton
-          rightComponent={
-            <TableUpdateViewButtonGroup
-              onViewSubmit={onViewSubmit}
-              HotkeyScope={TableViewsHotkeyScope.CreateDropdown}
+        }
+        displayBottomBorder={false}
+        rightComponent={
+          <>
+            <FilterDropdownButton
+              context={TableRecoilScopeContext}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+              isPrimaryButton
            />
-          }
-        />
-      }
-    />
+            <SortDropdownButton<SortField>
+              context={TableRecoilScopeContext}
+              isSortSelected={sorts.length > 0}
+              availableSorts={availableSorts || []}
+              onSortSelect={sortSelect}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+              isPrimaryButton
+            />
+            <TableOptionsDropdown
+              onImport={onImport}
+              onColumnsChange={onColumnsChange}
+              onViewsChange={onViewsChange}
+              customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+            />
+          </>
+        }
+        bottomComponent={
+          <SortAndFilterBar
+            context={TableRecoilScopeContext}
+            sorts={sorts}
+            onRemoveSort={sortUnselect}
+            onCancelClick={() => setSorts([])}
+            hasFilterButton
+            rightComponent={
+              <TableUpdateViewButtonGroup
+                onViewSubmit={onViewSubmit}
+                HotkeyScope={TableViewsHotkeyScope.CreateDropdown}
+              />
+            }
+          />
+        }
+      />
+    </RecoilScope>
  );
 }