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>

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

@@ -19,6 +19,7 @@ import {
   addableViewFieldDefinitionsState,
   columnWidthByViewFieldIdState,
   viewFieldsState,
+  visibleViewFieldsState,
 } from '../states/viewFieldsState';
 import type {
   ViewFieldDefinition,
@@ -87,8 +88,8 @@ const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
 export function EntityTableHeader() {
   const theme = useTheme();
 
-  const [{ objectName, viewFields }, setViewFieldsState] =
-    useRecoilState(viewFieldsState);
+  const [{ objectName }, setViewFieldsState] = useRecoilState(viewFieldsState);
+  const viewFields = useRecoilValue(visibleViewFieldsState);
   const columnWidths = useRecoilValue(columnWidthByViewFieldIdState);
   const addableViewFieldDefinitions = useRecoilValue(
     addableViewFieldDefinitionsState,

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { ViewFieldContext } from '../states/ViewFieldContext';
-import { viewFieldsState } from '../states/viewFieldsState';
+import { visibleViewFieldsState } from '../states/viewFieldsState';
 
 import { CheckboxCell } from './CheckboxCell';
 import { EntityTableCell } from './EntityTableCell';
@@ -13,7 +13,7 @@ const StyledRow = styled.tr<{ selected: boolean }>`
 `;
 
 export function EntityTableRow({ rowId }: { rowId: string }) {
-  const { viewFields } = useRecoilValue(viewFieldsState);
+  const viewFields = useRecoilValue(visibleViewFieldsState);
 
   return (
     <StyledRow data-testid={`row-id-${rowId}`} selected={false}>
@@ -22,10 +22,7 @@ export function EntityTableRow({ rowId }: { rowId: string }) {
       </td>
       {viewFields.map((viewField, columnIndex) => {
         return (
-          <ViewFieldContext.Provider
-            value={viewField}
-            key={viewField.columnOrder}
-          >
+          <ViewFieldContext.Provider value={viewField} key={viewField.id}>
             <EntityTableCell cellIndex={columnIndex} />
           </ViewFieldContext.Provider>
         );