feat: toggle board field visibilities (#1547)

Closes #1537, Closes #1539

front/src/modules/ui/board/components/BoardHeader.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, useCallback } from 'react';
+import type { ComponentProps } from 'react';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@@ -29,18 +29,6 @@ export function BoardHeader<SortField>({
   availableSorts,
   defaultViewName,
 }: BoardHeaderProps<SortField>) {
-  const OptionsDropdownButton = useCallback(
-    () => (
-      <BoardOptionsDropdown
-        customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
-        onStageAdd={onStageAdd}
-        onViewsChange={onViewsChange}
-        scopeContext={scopeContext}
-      />
-    ),
-    [onStageAdd, onViewsChange, scopeContext],
-  );
-
   return (
     <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
       <ViewBar
@@ -48,8 +36,15 @@ export function BoardHeader<SortField>({
         defaultViewName={defaultViewName}
         onViewsChange={onViewsChange}
         onViewSubmit={onViewSubmit}
+        optionsDropdownButton={
+          <BoardOptionsDropdown
+            customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
+            onStageAdd={onStageAdd}
+            onViewsChange={onViewsChange}
+            scopeContext={scopeContext}
+          />
+        }
         optionsDropdownKey={BoardOptionsDropdownKey}
-        OptionsDropdownButton={OptionsDropdownButton}
         scopeContext={scopeContext}
       />
     </RecoilScope>

front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx

@@ -16,6 +16,7 @@ import {
   IconLayoutKanban,
   IconPlus,
   IconSettings,
+  IconTag,
 } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/menu-item/components/MenuItemNavigate';
@@ -23,12 +24,16 @@ import { ThemeColor } from '@/ui/theme/constants/colors';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection';
 import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView';
 import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 import type { View } from '@/ui/view-bar/types/View';
 
+import { useBoardCardFields } from '../hooks/useBoardCardFields';
 import { boardColumnsState } from '../states/boardColumnsState';
+import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
+import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
 import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
@@ -43,10 +48,7 @@ const StyledIconSettings = styled(IconSettings)`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-enum BoardOptionsMenu {
-  StageCreation = 'StageCreation',
-  Stages = 'Stages',
-}
+type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages';
 
 type ColumnForCreate = {
   id: string;
@@ -72,14 +74,22 @@ export function BoardOptionsDropdownContent({
 
   const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
 
+  const hiddenBoardCardFields = useRecoilScopedValue(
+    hiddenBoardCardFieldsScopedSelector,
+    scopeContext,
+  );
+  const hasHiddenFields = hiddenBoardCardFields.length > 0;
+  const visibleBoardCardFields = useRecoilScopedValue(
+    visibleBoardCardFieldsScopedSelector,
+    scopeContext,
+  );
+  const hasVisibleFields = visibleBoardCardFields.length > 0;
+
   const viewsById = useRecoilScopedValue(viewsByIdScopedSelector, scopeContext);
   const viewEditMode = useRecoilValue(viewEditModeState);
 
   const handleStageSubmit = () => {
-    if (
-      currentMenu !== BoardOptionsMenu.StageCreation ||
-      !stageInputRef?.current?.value
-    )
+    if (currentMenu !== 'stage-creation' || !stageInputRef?.current?.value)
       return;
 
     const columnToCreate: ColumnForCreate = {
@@ -113,6 +123,8 @@ export function BoardOptionsDropdownContent({
     setCurrentMenu(menu);
   };
 
+  const { handleFieldVisibilityChange } = useBoardCardFields({ scopeContext });
+
   const { closeDropdownButton } = useDropdownButton({
     key: BoardOptionsDropdownKey,
   });
@@ -161,14 +173,19 @@ export function BoardOptionsDropdownContent({
           <StyledDropdownMenuSeparator />
           <StyledDropdownMenuItemsContainer>
             <MenuItemNavigate
-              onClick={() => handleMenuNavigate(BoardOptionsMenu.Stages)}
+              onClick={() => handleMenuNavigate('stages')}
               LeftIcon={IconLayoutKanban}
               text="Stages"
             />
+            <MenuItemNavigate
+              onClick={() => handleMenuNavigate('fields')}
+              LeftIcon={IconTag}
+              text="Fields"
+            />
           </StyledDropdownMenuItemsContainer>
         </>
       )}
-      {currentMenu === BoardOptionsMenu.Stages && (
+      {currentMenu === 'stages' && (
         <>
           <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}>
             Stages
@@ -176,20 +193,45 @@ export function BoardOptionsDropdownContent({
           <StyledDropdownMenuSeparator />
           <StyledDropdownMenuItemsContainer>
             <MenuItem
-              onClick={() => setCurrentMenu(BoardOptionsMenu.StageCreation)}
+              onClick={() => setCurrentMenu('stage-creation')}
               LeftIcon={IconPlus}
               text="Add stage"
             />
           </StyledDropdownMenuItemsContainer>
         </>
       )}
-      {currentMenu === BoardOptionsMenu.StageCreation && (
+      {currentMenu === 'stage-creation' && (
         <DropdownMenuInput
           autoFocus
           placeholder="New stage"
           ref={stageInputRef}
         />
       )}
+      {currentMenu === 'fields' && (
+        <>
+          <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}>
+            Fields
+          </DropdownMenuHeader>
+          <StyledDropdownMenuSeparator />
+          {hasVisibleFields && (
+            <ViewFieldsVisibilityDropdownSection
+              title="Visible"
+              fields={visibleBoardCardFields}
+              onVisibilityChange={handleFieldVisibilityChange}
+            />
+          )}
+          {hasVisibleFields && hasHiddenFields && (
+            <StyledDropdownMenuSeparator />
+          )}
+          {hasHiddenFields && (
+            <ViewFieldsVisibilityDropdownSection
+              title="Hidden"
+              fields={hiddenBoardCardFields}
+              onVisibilityChange={handleFieldVisibilityChange}
+            />
+          )}
+        </>
+      )}
     </StyledDropdownMenu>
   );
 }

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -160,8 +160,9 @@ export function EntityBoard({
                   <EntityBoardColumn
                     boardOptions={boardOptions}
                     column={column}
-                    onTitleEdit={onEditColumnTitle}
                     onDelete={onColumnDelete}
+                    onTitleEdit={onEditColumnTitle}
+                    scopeContext={scopeContext}
                   />
                 </RecoilScope>
               </BoardColumnIdContext.Provider>

front/src/modules/ui/board/components/EntityBoardCard.tsx

@@ -1,3 +1,4 @@
+import type { Context } from 'react';
 import { Draggable } from '@hello-pangea/dnd';
 import { useSetRecoilState } from 'recoil';
 
@@ -11,10 +12,12 @@ export function EntityBoardCard({
   boardOptions,
   cardId,
   index,
+  scopeContext,
 }: {
   boardOptions: BoardOptions;
   cardId: string;
   index: number;
+  scopeContext: Context<string | null>;
 }) {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
@@ -43,7 +46,7 @@ export function EntityBoardCard({
           data-select-disable
           onContextMenu={handleContextMenu}
         >
-          {boardOptions.cardComponent}
+          {<boardOptions.CardComponent scopeContext={scopeContext} />}
         </div>
       )}
     </Draggable>

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { type Context, useContext } from 'react';
 import styled from '@emotion/styled';
 import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
 import { useRecoilValue } from 'recoil';
@@ -48,15 +48,17 @@ const BoardColumnCardsContainer = ({
 };
 
 export function EntityBoardColumn({
-  column,
   boardOptions,
+  column,
   onDelete,
   onTitleEdit,
+  scopeContext,
 }: {
-  column: BoardColumnDefinition;
   boardOptions: BoardOptions;
+  column: BoardColumnDefinition;
   onDelete?: (columnId: string) => void;
   onTitleEdit: (columnId: string, title: string, color: string) => void;
+  scopeContext: Context<string | null>;
 }) {
   const boardColumnId = useContext(BoardColumnIdContext) ?? '';
 
@@ -92,6 +94,7 @@ export function EntityBoardColumn({
                   index={index}
                   cardId={cardId}
                   boardOptions={boardOptions}
+                  scopeContext={scopeContext}
                 />
               </BoardCardIdContext.Provider>
             ))}