Chore: First table column should not be hideable (#1711)

* First table column should not be hideable

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: chiazokam <chiazokamecheta@gmail.com>

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

@@ -12,6 +12,7 @@ type OwnProps = {
   column: ColumnDefinition<ViewFieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
+  primaryColumnKey: string;
 };
 
 const StyledTitle = styled.div`
@@ -44,6 +45,7 @@ export const ColumnHead = ({
   column,
   isFirstColumn,
   isLastColumn,
+  primaryColumnKey,
 }: OwnProps) => {
   const theme = useTheme();
 
@@ -63,6 +65,7 @@ export const ColumnHead = ({
         column={column}
         isFirstColumn={isFirstColumn}
         isLastColumn={isLastColumn}
+        primaryColumnKey={primaryColumnKey}
       />
     </>
   );

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

@@ -158,6 +158,8 @@ export const EntityTableHeader = () => {
     setIsColumnMenuOpen((previousValue) => !previousValue);
   }, []);
 
+  const primaryColumn = visibleTableColumns[0];
+
   return (
     <StyledTableHead data-select-disable>
       <tr>
@@ -183,8 +185,9 @@ export const EntityTableHeader = () => {
             >
               <ColumnHead
                 column={column}
-                isFirstColumn={index === 0}
+                isFirstColumn={index === 1}
                 isLastColumn={index === visibleTableColumns.length - 1}
+                primaryColumnKey={primaryColumn.key}
               />
 
               <StyledResizeHandler

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

@@ -1,15 +1,10 @@
 import styled from '@emotion/styled';
 
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
-import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import {
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+  EntityTableHeaderOptionsProps,
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+  TableColumnDropdownMenu,
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+} from '@/ui/table/components/TableColumnDropdownMenu';
-import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
-
-import { useTableColumns } from '../hooks/useTableColumns';
-import { ColumnDefinition } from '../types/ColumnDefinition';
 
 const StyledDropdownContainer = styled.div`
   left: 0px;
@@ -17,70 +12,24 @@ const StyledDropdownContainer = styled.div`
   top: 32px;
   z-index: 1;
 `;
-type EntityTableHeaderOptionsProps = {
+
-  column: ColumnDefinition<ViewFieldMetadata>;
-  isFirstColumn: boolean;
-  isLastColumn: boolean;
-};
 export const EntityTableHeaderOptions = ({
   column,
   isFirstColumn,
   isLastColumn,
+  primaryColumnKey,
 }: EntityTableHeaderOptionsProps) => {
-  const {
-    handleColumnVisibilityChange,
-    handleColumnLeftMove,
-    handleColumnRightMove,
-  } = useTableColumns();
-
-  const { closeDropdownButton } = useDropdownButton({
-    dropdownId: column.key + '-header',
-  });
-
-  const handleColumnMoveLeft = () => {
-    closeDropdownButton();
-    if (isFirstColumn) {
-      return;
-    }
-    handleColumnLeftMove(column);
-  };
-
-  const handleColumnMoveRight = () => {
-    closeDropdownButton();
-    if (isLastColumn) {
-      return;
-    }
-    handleColumnRightMove(column);
-  };
-
-  const handleColumnVisibility = () => {
-    handleColumnVisibilityChange(column);
-  };
-
   return (
     <StyledDropdownContainer>
       <DropdownButton
         dropdownId={column.key + '-header'}
         dropdownComponents={
-          <StyledDropdownMenu>
+          <TableColumnDropdownMenu
-            <StyledDropdownMenuItemsContainer>
+            column={column}
-              <MenuItem
+            isFirstColumn={isFirstColumn}
-                LeftIcon={IconArrowLeft}
+            isLastColumn={isLastColumn}
-                onClick={handleColumnMoveLeft}
+            primaryColumnKey={primaryColumnKey}
-                text="Move left"
+          />
-              />
-              <MenuItem
-                LeftIcon={IconArrowRight}
-                onClick={handleColumnMoveRight}
-                text="Move right"
-              />
-              <MenuItem
-                LeftIcon={IconEyeOff}
-                onClick={handleColumnVisibility}
-                text="Hide"
-              />
-            </StyledDropdownMenuItemsContainer>
-          </StyledDropdownMenu>
         }
         dropdownHotkeyScope={{ scope: column.key + '-header' }}
       />

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

@@ -0,0 +1,82 @@
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+
+import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
+import { useTableColumns } from '../hooks/useTableColumns';
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+export type EntityTableHeaderOptionsProps = {
+  column: ColumnDefinition<ViewFieldMetadata>;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  primaryColumnKey: string;
+};
+
+export const TableColumnDropdownMenu = ({
+  column,
+  isFirstColumn,
+  isLastColumn,
+  primaryColumnKey,
+}: EntityTableHeaderOptionsProps) => {
+  const {
+    handleColumnVisibilityChange,
+    handleColumnLeftMove,
+    handleColumnRightMove,
+  } = useTableColumns();
+
+  const { closeDropdownButton } = useDropdownButton({
+    dropdownId: ColumnHeadDropdownId,
+  });
+
+  const handleColumnMoveLeft = () => {
+    closeDropdownButton();
+    if (isFirstColumn) {
+      return;
+    }
+    handleColumnLeftMove(column);
+  };
+
+  const handleColumnMoveRight = () => {
+    closeDropdownButton();
+    if (isLastColumn) {
+      return;
+    }
+    handleColumnRightMove(column);
+  };
+
+  const handleColumnVisibility = () => {
+    handleColumnVisibilityChange(column);
+  };
+
+  return column.key === primaryColumnKey ? (
+    <></>
+  ) : (
+    <StyledDropdownMenu>
+      <StyledDropdownMenuItemsContainer>
+        {!isFirstColumn && (
+          <MenuItem
+            LeftIcon={IconArrowLeft}
+            onClick={handleColumnMoveLeft}
+            text="Move left"
+          />
+        )}
+        {!isLastColumn && (
+          <MenuItem
+            LeftIcon={IconArrowRight}
+            onClick={handleColumnMoveRight}
+            text="Move right"
+          />
+        )}
+        <MenuItem
+          LeftIcon={IconEyeOff}
+          onClick={handleColumnVisibility}
+          text="Hide"
+        />
+      </StyledDropdownMenuItemsContainer>
+    </StyledDropdownMenu>
+  );
+};

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -95,7 +95,7 @@ export const TableOptionsDropdownContent = () => {
 
   const handleReorderField: OnDragEndResponder = useCallback(
     (result) => {
-      if (!result.destination) {
+      if (!result.destination || result.destination.index === 0) {
         return;
       }
 

front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -41,6 +41,18 @@ export const ViewFieldsVisibilityDropdownSection = <
   const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
     onDragEnd?.(result, provided);
   };
+
+  const getIconButtons = (index: number, field: Field) => {
+    if (index !== 0) {
+      return [
+        {
+          Icon: field.isVisible ? IconMinus : IconPlus,
+          onClick: () => onVisibilityChange(field),
+        },
+      ];
+    }
+  };
+
   return (
     <>
       <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
@@ -56,6 +68,7 @@ export const ViewFieldsVisibilityDropdownSection = <
                         key={field.key}
                         draggableId={field.key}
                         index={index}
+                        isDragDisabled={index === 0}
                       >
                         {(draggableProvided) => {
                           const draggableStyle =
@@ -79,17 +92,10 @@ export const ViewFieldsVisibilityDropdownSection = <
                               {...draggableProvided.dragHandleProps}
                             >
                               <MenuItem
-                                isDraggable={isDraggable}
+                                isDraggable={index !== 0 && isDraggable}
                                 key={field.key}
                                 LeftIcon={field.Icon}
-                                iconButtons={[
+                                iconButtons={getIconButtons(index, field)}
-                                  {
-                                    Icon: field.isVisible
-                                      ? IconMinus
-                                      : IconPlus,
-                                    onClick: () => onVisibilityChange(field),
-                                  },
-                                ]}
                                 text={field.name}
                               />
                             </div>