Fix 4363 modify kanban menu (#5337)

**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 <k.darivaki03@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Kyriaki Darivaki
2024-06-03 23:17:37 +03:00
committed by GitHub
parent dcd769f20f
commit 59c7bcd705
4 changed files with 141 additions and 6 deletions

View File

@ -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<ColumnDefinition<FieldMetadata>, '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 (
<div ref={ref}>
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
{showSubheader && (
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
)}
<DropdownMenuItemsContainer>
{nonDraggableItems.map((field, fieldIndex) => (
<MenuItem