Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/ui/table/components/ColumnHead.tsx

@@ -1,9 +1,11 @@
-import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 type OwnProps = {
   viewName: string;
-  viewIcon?: ReactNode;
+  ViewIcon?: IconComponent;
 };
 
 const StyledTitle = styled.div`
@@ -32,10 +34,13 @@ const StyledText = styled.span`
   white-space: nowrap;
 `;
 
-export function ColumnHead({ viewName, viewIcon }: OwnProps) {
+export function ColumnHead({ viewName, ViewIcon }: OwnProps) {
+  const theme = useTheme();
   return (
     <StyledTitle>
-      <StyledIcon>{viewIcon}</StyledIcon>
+      <StyledIcon>
+        {ViewIcon && <ViewIcon size={theme.icon.size.md} />}
+      </StyledIcon>
       <StyledText>{viewName}</StyledText>
     </StyledTitle>
   );

front/src/modules/ui/table/components/EntityTableColumnMenu.tsx

@@ -1,13 +1,11 @@
-import { cloneElement, type ComponentProps, useCallback, useRef } from 'react';
-import { useTheme } from '@emotion/react';
+import { type ComponentProps, useCallback, useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { IconButton } from '@/ui/button/components/IconButton';
-import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { IconPlus } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
@@ -31,7 +29,6 @@ export const EntityTableColumnMenu = ({
   ...props
 }: EntityTableColumnMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const theme = useTheme();
 
   const hiddenTableColumns = useRecoilScopedValue(
     hiddenTableColumnsScopedSelector,
@@ -57,22 +54,17 @@ export const EntityTableColumnMenu = ({
     <StyledColumnMenu {...props} ref={ref}>
       <StyledDropdownMenuItemsContainer>
         {hiddenTableColumns.map((column) => (
-          <DropdownMenuItem
+          <MenuItem
             key={column.key}
-            actions={[
-              <IconButton
-                key={`add-${column.key}`}
-                icon={<IconPlus size={theme.icon.size.sm} />}
-                onClick={() => handleAddColumn(column)}
-              />,
+            iconButtons={[
+              {
+                Icon: IconPlus,
+                onClick: () => handleAddColumn(column),
+              },
             ]}
-          >
-            {column.icon &&
-              cloneElement(column.icon, {
-                size: theme.icon.size.md,
-              })}
-            {column.name}
-          </DropdownMenuItem>
+            LeftIcon={column.Icon}
+            text={column.name}
+          />
         ))}
       </StyledDropdownMenuItemsContainer>
     </StyledColumnMenu>

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -173,7 +173,7 @@ export function EntityTableHeader() {
               COLUMN_MIN_WIDTH,
             )}
           >
-            <ColumnHead viewName={column.name} viewIcon={column.icon} />
+            <ColumnHead viewName={column.name} ViewIcon={column.Icon} />
             <StyledResizeHandler
               className="cursor-col-resize"
               role="separator"