feat: show/hide table columns (#1078)

Closes #813

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

@@ -1,9 +1,8 @@
-import React, { ComponentProps, useRef } from 'react';
+import { cloneElement, ComponentProps, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { IconButtonGroup } from '@/ui/button/components/IconButtonGroup';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
@@ -19,23 +18,6 @@ const StyledColumnMenu = styled(DropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
-const StyledIconButtonGroup = styled(IconButtonGroup)`
-  display: none;
-  position: absolute;
-  right: ${({ theme }) => theme.spacing(1)};
-`;
-const styledIconButtonGroupClassName = 'column-menu-item-icon-button-group';
-
-const StyledColumnMenuItem = styled(DropdownMenuItem)`
-  position: relative;
-
-  &:hover {
-    .${styledIconButtonGroupClassName} {
-      display: flex;
-    }
-  }
-`;
-
 type EntityTableColumnMenuProps = {
   onAddViewField: (
     viewFieldDefinition: ViewFieldDefinition<ViewFieldMetadata>,
@@ -62,23 +44,21 @@ export const EntityTableColumnMenu = ({
     <StyledColumnMenu {...props} ref={ref}>
       <DropdownMenuItemsContainer>
         {viewFieldDefinitions.map((viewFieldDefinition) => (
-          <StyledColumnMenuItem key={viewFieldDefinition.id}>
-            {viewFieldDefinition.columnIcon &&
-              React.cloneElement(viewFieldDefinition.columnIcon, {
-                size: theme.icon.size.md,
-              })}
-            {viewFieldDefinition.columnLabel}
-            <StyledIconButtonGroup
-              className={styledIconButtonGroupClassName}
-              variant="transparent"
-              size="small"
-            >
+          <DropdownMenuItem
+            key={viewFieldDefinition.id}
+            actions={
               <IconButton
                 icon={<IconPlus size={theme.icon.size.sm} />}
                 onClick={() => onAddViewField(viewFieldDefinition)}
               />
-            </StyledIconButtonGroup>
-          </StyledColumnMenuItem>
+            }
+          >
+            {viewFieldDefinition.columnIcon &&
+              cloneElement(viewFieldDefinition.columnIcon, {
+                size: theme.icon.size.md,
+              })}
+            {viewFieldDefinition.columnLabel}
+          </DropdownMenuItem>
         ))}
       </DropdownMenuItemsContainer>
     </StyledColumnMenu>