Feat: First column style update (#1746)

reimplemented as per suggestions by lucas

front/src/modules/ui/table/table-cell/components/TableCell.tsx

@@ -68,7 +68,7 @@ export const TableCell = ({
         />
       }
       nonEditModeContent={<FieldDisplay />}
-      useEditButton={fieldDefinition.useEditButton}
+      buttonIcon={fieldDefinition.buttonIcon}
     ></TableCellContainer>
   );
 };

front/src/modules/ui/table/table-cell/components/TableCellButton.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+const StyledEditButtonContainer = styled(motion.div)`
+  position: absolute;
+  right: 5px;
+`;
+
+type TableCellButtonProps = {
+  onClick?: () => void;
+  Icon: IconComponent;
+};
+
+export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
+  <StyledEditButtonContainer
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.1 }}
+    whileHover={{ scale: 1.04 }}
+  >
+    <FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
+  </StyledEditButtonContainer>
+);

front/src/modules/ui/table/table-cell/components/TableCellContainer.tsx

@@ -1,18 +1,21 @@
-import { ReactElement, useState } from 'react';
+import { ReactElement, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 
+import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
 import { useIsFieldInputOnly } from '@/ui/field/hooks/useIsFieldInputOnly';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
+import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
 import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
 import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
 import { useTableCell } from '../hooks/useTableCell';
 
+import { TableCellButton } from './TableCellButton';
 import { TableCellDisplayMode } from './TableCellDisplayMode';
-import { TableCellEditButton } from './TableCellEditButton';
 import { TableCellEditMode } from './TableCellEditMode';
 import { TableCellSoftFocusMode } from './TableCellSoftFocusMode';
 
@@ -34,7 +37,7 @@ export type EditableCellProps = {
   editHotkeyScope?: HotkeyScope;
   transparent?: boolean;
   maxContentWidth?: number;
-  useEditButton?: boolean;
+  buttonIcon?: IconComponent;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -51,16 +54,17 @@ export const TableCellContainer = ({
   editHotkeyScope,
   transparent = false,
   maxContentWidth,
-  useEditButton,
+  buttonIcon,
 }: EditableCellProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
+
   const [isHovered, setIsHovered] = useState(false);
 
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
   const { openTableCell } = useTableCell();
 
-  const handlePenClick = () => {
+  const handleButtonClick = () => {
     setSoftFocusOnCurrentTableCell();
     openTableCell();
   };
@@ -75,11 +79,16 @@ export const TableCellContainer = ({
 
   const editModeContentOnly = useIsFieldInputOnly();
 
-  const showEditButton =
-    useEditButton &&
+  const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
+
+  const isEmpty = useIsFieldEmpty();
+
+  const showButton =
+    buttonIcon &&
     isHovered &&
     !isCurrentTableCellInEditMode &&
-    !editModeContentOnly;
+    !editModeContentOnly &&
+    (!isFirstColumnCell || !isEmpty);
 
   const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
 
@@ -102,14 +111,18 @@ export const TableCellContainer = ({
           </TableCellEditMode>
         ) : hasSoftFocus ? (
           <>
-            {showEditButton && <TableCellEditButton onClick={handlePenClick} />}
+            {showButton && (
+              <TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
+            )}
             <TableCellSoftFocusMode>
               {editModeContentOnly ? editModeContent : nonEditModeContent}
             </TableCellSoftFocusMode>
           </>
         ) : (
           <>
-            {showEditButton && <TableCellEditButton onClick={handlePenClick} />}
+            {showButton && (
+              <TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
+            )}
             <TableCellDisplayMode isHovered={isHovered}>
               {editModeContentOnly ? editModeContent : nonEditModeContent}
             </TableCellDisplayMode>

front/src/modules/ui/table/table-cell/components/TableCellEditButton.tsx

@@ -2,26 +2,25 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { IconPencil } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 const StyledEditButtonContainer = styled(motion.div)`
   position: absolute;
   right: 5px;
 `;
 
-type EditableCellEditButtonProps = {
+type TableCellButtonProps = {
   onClick?: () => void;
+  Icon: IconComponent;
 };
 
-export const TableCellEditButton = ({
-  onClick,
-}: EditableCellEditButtonProps) => (
+export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
   <StyledEditButtonContainer
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.1 }}
     whileHover={{ scale: 1.04 }}
   >
-    <FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
+    <FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
   </StyledEditButtonContainer>
 );

front/src/modules/ui/table/table-cell/hooks/useTableCell.ts

@@ -1,10 +1,14 @@
 import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
+import { FieldContext } from '@/ui/field/contexts/FieldContext';
+import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
+import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
 import { useCloseCurrentTableCellInEditMode } from '../../hooks/useCloseCurrentTableCellInEditMode';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
@@ -30,7 +34,20 @@ export const useTableCell = () => {
     setHotkeyScope(TableHotkeyScope.TableSoftFocus);
   };
 
+  const navigate = useNavigate();
+
+  const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
+
+  const isEmpty = useIsFieldEmpty();
+
+  const { entityId, fieldDefinition } = useContext(FieldContext);
+
   const openTableCell = () => {
+    if (isFirstColumnCell && !isEmpty && fieldDefinition.basePathToShowPage) {
+      navigate(`${fieldDefinition.basePathToShowPage}${entityId}`);
+      return;
+    }
+
     setDragSelectionStartEnabled(false);
     setCurrentTableCellInEditMode();