feat: improve table options dropdown view name input (#1604)

- Always show view name input in dropdown
- Edit current view name by default
- Add focus style
- Reset view edit mode on dropdown close

Closes #1540

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

@@ -1,5 +1,8 @@
+import { useResetRecoilState } from 'recoil';
+
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 
@@ -15,12 +18,15 @@ export function TableOptionsDropdown({
   onImport,
   customHotkeyScope,
 }: TableOptionsDropdownProps) {
+  const resetViewEditMode = useResetRecoilState(viewEditModeState);
+
   return (
     <DropdownButton
       buttonComponents={<TableOptionsDropdownButton />}
       dropdownHotkeyScope={customHotkeyScope}
       dropdownId={TableOptionsDropdownId}
       dropdownComponents={<TableOptionsDropdownContent onImport={onImport} />}
+      onClickOutside={resetViewEditMode}
     />
   );
 }

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

@@ -1,20 +1,23 @@
 import { useRef, useState } from 'react';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
+import styled from '@emotion/styled';
+import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
-import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 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 { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { rgba } from '@/ui/theme/constants/colors';
+import { textInputStyle } from '@/ui/theme/constants/effects';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection';
 import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView';
+import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector';
 import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
@@ -33,6 +36,29 @@ type TableOptionsDropdownButtonProps = {
 
 type TableOptionsMenu = 'fields';
 
+const StyledInputContainer = styled.div`
+  box-sizing: border-box;
+  padding: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledViewNameInput = styled.input`
+  ${textInputStyle}
+
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-sizing: border-box;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: 32px;
+  position: relative;
+  width: 100%;
+
+  &:focus {
+    border-color: ${({ theme }) => theme.color.blue};
+    box-shadow: 0px 0px 0px 3px ${({ theme }) => rgba(theme.color.blue, 0.1)};
+  }
+`;
+
 export function TableOptionsDropdownContent({
   onImport,
 }: TableOptionsDropdownButtonProps) {
@@ -48,7 +74,12 @@ export function TableOptionsDropdownContent({
 
   const viewEditInputRef = useRef<HTMLInputElement>(null);
 
+  const currentView = useRecoilScopedValue(
+    currentViewScopedSelector,
+    TableRecoilScopeContext,
+  );
   const viewEditMode = useRecoilValue(viewEditModeState);
+  const resetViewEditMode = useResetRecoilState(viewEditModeState);
   const visibleTableColumns = useRecoilScopedValue(
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
@@ -95,6 +126,7 @@ export function TableOptionsDropdownContent({
   useScopedHotkeys(
     Key.Escape,
     () => {
+      resetViewEditMode();
       closeDropdownButton();
     },
     TableOptionsHotkeyScope.Dropdown,
@@ -105,6 +137,7 @@ export function TableOptionsDropdownContent({
     () => {
       handleViewNameSubmit();
       resetMenu();
+      resetViewEditMode();
       closeDropdownButton();
     },
     TableOptionsHotkeyScope.Dropdown,
@@ -114,22 +147,24 @@ export function TableOptionsDropdownContent({
     <StyledDropdownMenu>
       {!currentMenu && (
         <>
-          {!!viewEditMode.mode ? (
-            <DropdownMenuInput
+          <StyledInputContainer>
+            <StyledViewNameInput
               ref={viewEditInputRef}
-              autoFocus
+              autoFocus={
+                viewEditMode.mode === 'create' || !!viewEditMode.viewId
+              }
               placeholder={
                 viewEditMode.mode === 'create' ? 'New view' : 'View name'
               }
               defaultValue={
-                viewEditMode.viewId
+                viewEditMode.mode === 'create'
+                  ? ''
+                  : viewEditMode.viewId
                   ? viewsById[viewEditMode.viewId]?.name
-                  : undefined
+                  : currentView?.name
               }
             />
-          ) : (
-            <DropdownMenuHeader>View settings</DropdownMenuHeader>
-          )}
+          </StyledInputContainer>
           <StyledDropdownMenuSeparator />
           <StyledDropdownMenuItemsContainer>
             <MenuItem

front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { TableOptionsDropdown } from '../TableOptionsDropdown';
+
+const meta: Meta<typeof TableOptionsDropdown> = {
+  title: 'UI/Table/Options/TableOptionsDropdown',
+  component: TableOptionsDropdown,
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={TableRecoilScopeContext}>
+        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <Story />
+        </RecoilScope>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TableOptionsDropdown>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = canvas.getByText('Options');
+
+    await userEvent.click(dropdownButton);
+  },
+};