From 59c7bcd7050b53774899b162a235501fd99d9366 Mon Sep 17 00:00:00 2001 From: Kyriaki Darivaki <115654088+kiridarivaki@users.noreply.github.com> Date: Mon, 3 Jun 2024 23:17:37 +0300 Subject: [PATCH] Fix 4363 modify kanban menu (#5337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Changes:** - Changed -/+ to eye and eye off icons - Changed menu width to 200px - Created separate menu for hidden fields - Added Edit Fields option to hidden fields menu - Added test file MenuItemSelectTag (wasn't included in the issue) As this is my first pr, feedback is very welcome! **Note:** These changes cover most of #4363 . I left out the implementation of the RightIcon in the "Hidden Fields" menu item. --------- Co-authored-by: kiridarivaki Co-authored-by: Félix Malfait --- .../components/RecordIndexOptionsDropdown.tsx | 1 + .../RecordIndexOptionsDropdownContent.tsx | 40 +++++++- .../__stories__/MenuItemSelectTag.stories.tsx | 94 +++++++++++++++++++ .../ViewFieldsVisibilityDropdownSection.tsx | 12 ++- 4 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx index 4b1d32086..25e53d8cc 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx @@ -20,6 +20,7 @@ export const RecordIndexOptionsDropdown = ({ } + dropdownMenuWidth={'200px'} dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} dropdownOffset={{ y: 8 }} dropdownComponents={ diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 7ed6b1650..70bcb43cb 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -1,10 +1,13 @@ import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { Key } from 'ts-key-enum'; import { IconBaselineDensitySmall, IconChevronLeft, + IconEyeOff, IconFileExport, IconFileImport, + IconSettings, IconTag, } from 'twenty-ui'; @@ -17,6 +20,8 @@ import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/opti import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable'; import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; import { useSpreadsheetRecordImport } from '@/object-record/spreadsheet-import/useSpreadsheetRecordImport'; +import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; +import { SettingsPath } from '@/types/SettingsPath'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; @@ -28,7 +33,7 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { ViewType } from '@/views/types/ViewType'; -type RecordIndexOptionsMenu = 'fields'; +type RecordIndexOptionsMenu = 'fields' | 'hiddenFields'; type RecordIndexOptionsDropdownContentProps = { recordIndexId: string; @@ -43,6 +48,8 @@ export const RecordIndexOptionsDropdownContent = ({ }: RecordIndexOptionsDropdownContentProps) => { const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); + const navigate = useNavigate(); + const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID); const [currentMenu, setCurrentMenu] = useState< @@ -55,6 +62,10 @@ export const RecordIndexOptionsDropdownContent = ({ setCurrentMenu(option); }; + const handleEditClick = () => { + navigate(getSettingsPagePath(SettingsPath.Objects)); + }; + useScopedHotkeys( [Key.Escape], () => { @@ -142,20 +153,45 @@ export const RecordIndexOptionsDropdownContent = ({ isDraggable onDragEnd={handleReorderFields} onVisibilityChange={handleChangeFieldVisibility} + showSubheader={false} /> + + handleSelectMenu('hiddenFields')} + LeftIcon={IconEyeOff} + text="Hidden Fields" + /> + + )} + {currentMenu === 'hiddenFields' && ( + <> + setCurrentMenu('fields')} + > + Hidden Fields + + {hiddenRecordFields.length > 0 && ( <> - )} + + )} + {viewType === ViewType.Kanban && ( <> diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx new file mode 100644 index 000000000..3a1314756 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx @@ -0,0 +1,94 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { + CatalogDecorator, + CatalogDimension, + CatalogOptions, + CatalogStory, + ComponentDecorator, + ThemeColor, +} from 'twenty-ui'; + +import { MenuItemSelectTag } from '../MenuItemSelectTag'; + +const meta: Meta = { + title: 'UI/Navigation/MenuItem/MenuItemSelectTag', + component: MenuItemSelectTag, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + selected: false, + onClick: undefined, + text: 'Item A', + }, + argTypes: { + selected: { + control: 'boolean', + defaultValue: false, + }, + onClick: { + control: false, + }, + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + args: { + text: 'Item A', + }, + parameters: { + pseudo: { + hover: ['.hover'], + active: ['.pressed'], + focus: ['.focus'], + }, + catalog: { + dimensions: [ + { + name: 'color', + values: [ + 'green', + 'turquoise', + 'sky', + 'blue', + 'purple', + 'pink', + 'red', + 'orange', + 'yellow', + 'gray', + ], + props: (color: ThemeColor) => ({ color }), + }, + { + name: 'states', + values: ['default', 'hover', 'selected', 'hover+selected'], + props: (state: string) => { + switch (state) { + case 'default': + return {}; + case 'hover': + return { className: 'hover' }; + case 'selected': + return { selected: true }; + case 'hover+selected': + return { className: 'hover', selected: true }; + default: + return {}; + } + }, + labels: (state: string) => `State: ${state}`, + }, + ] as CatalogDimension[], + options: { + elementContainer: { width: 200 }, + } as CatalogOptions, + }, + }, + decorators: [CatalogDecorator], +}; diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index bf9fa7907..9bc30f5a2 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -7,9 +7,9 @@ import { } from '@hello-pangea/dnd'; import { AppTooltip, + IconEye, + IconEyeOff, IconInfoCircle, - IconMinus, - IconPlus, useIcons, } from 'twenty-ui'; @@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = { field: Omit, 'size' | 'position'>, ) => void; title: string; + showSubheader: boolean; }; export const ViewFieldsVisibilityDropdownSection = ({ @@ -41,6 +42,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ onDragEnd, onVisibilityChange, title, + showSubheader = true, }: ViewFieldsVisibilityDropdownSectionProps) => { const handleOnDrag = (result: DropResult, provided: ResponderProvided) => { onDragEnd?.(result, provided); @@ -69,7 +71,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ field.isLabelIdentifier ? null : { - Icon: field.isVisible ? IconMinus : IconPlus, + Icon: field.isVisible ? IconEyeOff : IconEye, onClick: () => onVisibilityChange(field), }, ].filter(isDefined); @@ -94,7 +96,9 @@ export const ViewFieldsVisibilityDropdownSection = ({ return (
- {title} + {showSubheader && ( + {title} + )} {nonDraggableItems.map((field, fieldIndex) => (