feat: toggle board field visibilities (#1547)

Closes #1537, Closes #1539

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -1,11 +1,16 @@
+import { useEffect } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
+import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext';
+import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import { BoardColumnRecoilScopeContext } from '@/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
 
@@ -16,26 +21,43 @@ const meta: Meta<typeof CompanyBoardCard> = {
   title: 'Modules/Companies/CompanyBoardCard',
   component: CompanyBoardCard,
   decorators: [
-    (Story) => (
+    (Story, context) => {
-      <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
+      const [, setBoardCardFields] = useRecoilScopedState(
-        <HooksCompanyBoard />
+        boardCardFieldsScopedState,
-        <RecoilScope SpecificContext={BoardColumnRecoilScopeContext}>
+        context.parameters.recoilScopeContext,
-          <BoardCardIdContext.Provider value={mockedPipelineProgressData[1].id}>
+      );
-            <MemoryRouter>
+
-              <Story />
+      useEffect(() => {
-            </MemoryRouter>
+        setBoardCardFields(pipelineAvailableFieldDefinitions);
-          </BoardCardIdContext.Provider>
+      }, [setBoardCardFields]);
-        </RecoilScope>
+
-      </RecoilScope>
+      return (
-    ),
+        <>
+          <HooksCompanyBoard />
+          <RecoilScope SpecificContext={BoardColumnRecoilScopeContext}>
+            <BoardCardIdContext.Provider
+              value={mockedPipelineProgressData[1].id}
+            >
+              <MemoryRouter>
+                <Story />
+              </MemoryRouter>
+            </BoardCardIdContext.Provider>
+          </RecoilScope>
+        </>
+      );
+    },
+    ComponentWithRecoilScopeDecorator,
     ComponentDecorator,
   ],
+  args: { scopeContext: CompanyBoardRecoilScopeContext },
+  argTypes: { scopeContext: { control: false } },
   parameters: {
     msw: graphqlMocks,
+    recoilScopeContext: CompanyBoardRecoilScopeContext,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof CompanyBoardCard>;
 
-export const CompanyCompanyBoardCard: Story = {};
+export const Default: Story = {};

front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -1,3 +1,4 @@
+import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import {
   EntityBoard,
   type EntityBoardProps,
@@ -21,6 +22,7 @@ export const CompanyBoard = ({ ...props }: CompanyBoardProps) => {
     availableSorts: opportunitiesBoardOptions.sorts,
     objectId: 'company',
     scopeContext: CompanyBoardRecoilScopeContext,
+    fieldDefinitions: pipelineAvailableFieldDefinitions,
   });
 
   return (

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -1,16 +1,17 @@
-import { ReactNode, useContext } from 'react';
+import { type Context, type ReactNode, useContext } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext';
 import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected';
-import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
+import { visibleBoardCardFieldsScopedSelector } from '@/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
 import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -18,6 +19,10 @@ import { companyProgressesFamilyState } from '../states/companyProgressesFamilyS
 
 import { CompanyChip } from './CompanyChip';
 
+type OwnProps = {
+  scopeContext: Context<string | null>;
+};
+
 const StyledBoardCard = styled.div<{ selected: boolean }>`
   background-color: ${({ theme, selected }) =>
     selected ? theme.accent.quaternary : theme.background.secondary};
@@ -98,7 +103,7 @@ const StyledFieldContainer = styled.div`
   width: 100%;
 `;
 
-export function CompanyBoardCard() {
+export function CompanyBoardCard({ scopeContext }: OwnProps) {
   const { currentCardSelected, setCurrentCardSelected } =
     useCurrentCardSelected();
   const boardCardId = useContext(BoardCardIdContext);
@@ -108,7 +113,10 @@ export function CompanyBoardCard() {
   );
   const { pipelineProgress, company } = companyProgress ?? {};
 
-  const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
+  const visibleBoardCardFields = useRecoilScopedValue(
+    visibleBoardCardFieldsScopedSelector,
+    scopeContext,
+  );
 
   // boardCardId check can be moved to a wrapper to avoid unnecessary logic above
   if (!company || !pipelineProgress || !boardCardId) {
@@ -157,23 +165,21 @@ export function CompanyBoardCard() {
             value={useUpdateOnePipelineProgressMutation}
           >
             <EditableFieldEntityIdContext.Provider value={boardCardId}>
-              {viewFieldsDefinitions.map((viewField) => {
+              {visibleBoardCardFields.map((viewField) => (
-                return (
+                <PreventSelectOnClickContainer key={viewField.key}>
-                  <PreventSelectOnClickContainer key={viewField.key}>
+                  <EditableFieldDefinitionContext.Provider
-                    <EditableFieldDefinitionContext.Provider
+                    value={{
-                      value={{
+                      key: viewField.key,
-                        key: viewField.key,
+                      name: viewField.name,
-                        name: viewField.name,
+                      Icon: viewField.Icon,
-                        Icon: viewField.Icon,
+                      type: viewField.metadata.type,
-                        type: viewField.metadata.type,
+                      metadata: viewField.metadata,
-                        metadata: viewField.metadata,
+                    }}
-                      }}
+                  >
-                    >
+                    <GenericEditableField />
-                      <GenericEditableField />
+                  </EditableFieldDefinitionContext.Provider>
-                    </EditableFieldDefinitionContext.Provider>
+                </PreventSelectOnClickContainer>
-                  </PreventSelectOnClickContainer>
+              ))}
-                );
-              })}
             </EditableFieldEntityIdContext.Provider>
           </EditableFieldMutationContext.Provider>
         </StyledBoardCardBody>

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useMemo } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
-import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries';
 import { useBoardContextMenuEntries } from '@/ui/board/hooks/useBoardContextMenuEntries';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
-import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
@@ -26,9 +24,6 @@ import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 export function HooksCompanyBoard() {
-  const setFieldsDefinitionsState = useSetRecoilState(
-    viewFieldsDefinitionsState,
-  );
   const [, setAvailableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
     CompanyBoardRecoilScopeContext,
@@ -36,7 +31,6 @@ export function HooksCompanyBoard() {
 
   useEffect(() => {
     setAvailableFilters(opportunitiesBoardOptions.filters);
-    setFieldsDefinitionsState(pipelineAvailableFieldDefinitions);
   });
 
   const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);

front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx

@@ -20,6 +20,7 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       key: 'closeDate',
       name: 'Close Date',
       Icon: IconCalendarEvent,
+      index: 0,
       metadata: {
         type: 'date',
         fieldName: 'closeDate',
@@ -30,6 +31,7 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       key: 'amount',
       name: 'Amount',
       Icon: IconCurrencyDollar,
+      index: 1,
       metadata: {
         type: 'number',
         fieldName: 'amount',
@@ -40,6 +42,7 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       key: 'probability',
       name: 'Probability',
       Icon: IconProgressCheck,
+      index: 2,
       metadata: {
         type: 'probability',
         fieldName: 'probability',
@@ -50,6 +53,7 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       key: 'pointOfContact',
       name: 'Point of Contact',
       Icon: IconUser,
+      index: 3,
       metadata: {
         type: 'relation',
         fieldName: 'pointOfContact',

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 {
+type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages';
-  StageCreation = 'StageCreation',
-  Stages = '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 (
+    if (currentMenu !== 'stage-creation' || !stageInputRef?.current?.value)
-      currentMenu !== BoardOptionsMenu.StageCreation ||
-      !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>
             ))}

front/src/modules/ui/board/hooks/useBoardCardFields.ts

@@ -0,0 +1,42 @@
+import type { Context } from 'react';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+
+import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
+import { boardCardFieldsByKeyScopedSelector } from '../states/selectors/boardCardFieldsByKeyScopedSelector';
+
+export const useBoardCardFields = ({
+  scopeContext,
+}: {
+  scopeContext: Context<string | null>;
+}) => {
+  const [boardCardFields, setBoardCardFields] = useRecoilScopedState(
+    boardCardFieldsScopedState,
+    scopeContext,
+  );
+  const boardCardFieldsByKey = useRecoilScopedValue(
+    boardCardFieldsByKeyScopedSelector,
+    scopeContext,
+  );
+
+  const handleFieldVisibilityChange = (
+    field: ViewFieldDefinition<ViewFieldMetadata>,
+  ) => {
+    const nextFields = boardCardFieldsByKey[field.key]
+      ? boardCardFields.map((previousField) =>
+          previousField.key === field.key
+            ? { ...previousField, isVisible: !field.isVisible }
+            : previousField,
+        )
+      : [...boardCardFields, { ...field, isVisible: true }];
+
+    setBoardCardFields(nextFields);
+  };
+
+  return { handleFieldVisibilityChange };
+};

front/src/modules/ui/board/states/availableBoardCardFieldsScopedState.ts

@@ -0,0 +1,14 @@
+import { atomFamily } from 'recoil';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+export const availableBoardCardFieldsScopedState = atomFamily<
+  ViewFieldDefinition<ViewFieldMetadata>[],
+  string
+>({
+  key: 'availableBoardCardFieldsScopedState',
+  default: [],
+});

front/src/modules/ui/board/states/boardCardFieldsScopedState.ts

@@ -0,0 +1,14 @@
+import { atomFamily } from 'recoil';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+export const boardCardFieldsScopedState = atomFamily<
+  ViewFieldDefinition<ViewFieldMetadata>[],
+  string
+>({
+  key: 'boardCardFieldsScopedState',
+  default: [],
+});

front/src/modules/ui/board/states/selectors/boardCardFieldsByKeyScopedSelector.ts

@@ -0,0 +1,18 @@
+import { selectorFamily } from 'recoil';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const boardCardFieldsByKeyScopedSelector = selectorFamily({
+  key: 'boardCardFieldsByKeyScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) =>
+      get(boardCardFieldsScopedState(scopeId)).reduce<
+        Record<string, ViewFieldDefinition<ViewFieldMetadata>>
+      >((result, field) => ({ ...result, [field.key]: field }), {}),
+});

front/src/modules/ui/board/states/selectors/hiddenBoardCardFieldsScopedSelector.ts

@@ -0,0 +1,22 @@
+import { selectorFamily } from 'recoil';
+
+import { availableBoardCardFieldsScopedState } from '../availableBoardCardFieldsScopedState';
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const hiddenBoardCardFieldsScopedSelector = selectorFamily({
+  key: 'hiddenBoardCardFieldsScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) => {
+      const fields = get(boardCardFieldsScopedState(scopeId));
+      const fieldKeys = fields.map(({ key }) => key);
+      const otherAvailableKeys = get(
+        availableBoardCardFieldsScopedState(scopeId),
+      ).filter(({ key }) => !fieldKeys.includes(key));
+
+      return [
+        ...fields.filter((field) => !field.isVisible),
+        ...otherAvailableKeys,
+      ];
+    },
+});

front/src/modules/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector.ts

@@ -0,0 +1,13 @@
+import { selectorFamily } from 'recoil';
+
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const visibleBoardCardFieldsScopedSelector = selectorFamily({
+  key: 'visibleBoardCardFieldsScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) =>
+      get(boardCardFieldsScopedState(scopeId)).filter(
+        (field) => field.isVisible,
+      ),
+});

front/src/modules/ui/board/states/viewFieldsDefinitionsState.ts

@@ -1,13 +0,0 @@
-import { atom } from 'recoil';
-
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
-
-export const viewFieldsDefinitionsState = atom<
-  ViewFieldDefinition<ViewFieldMetadata>[]
->({
-  key: 'viewFieldsDefinitionState',
-  default: [],
-});

front/src/modules/ui/board/types/BoardOptions.ts

@@ -1,3 +1,5 @@
+import type { ComponentType, Context } from 'react';
+
 import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { SortType } from '@/ui/view-bar/types/interface';
 import { PipelineProgress } from '~/generated/graphql';
@@ -5,7 +7,7 @@ import { PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By
 
 export type BoardOptions = {
   newCardComponent: React.ReactNode;
-  cardComponent: React.ReactNode;
+  CardComponent: ComponentType<{ scopeContext: Context<string | null> }>;
   filters: FilterDefinitionByEntity<PipelineProgress>[];
   sorts: Array<SortType<PipelineProgresses_Order_By>>;
 };

front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx

@@ -49,6 +49,7 @@ export function FloatingIconButtonGroup({
             applyBlur={false}
             applyShadow={false}
             Icon={Icon}
+            key={index}
             onClick={onClick}
             position={position}
             size={size}

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -117,11 +117,12 @@ export type ViewFieldMetadata = { type: ViewFieldType } & (
 );
 
 export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
-  key: string;
-  name: string;
   Icon?: IconComponent;
+  index: number;
   isVisible?: boolean;
+  key: string;
   metadata: T;
+  name: string;
 };
 
 export type ViewFieldTextValue = string;

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

@@ -12,25 +12,25 @@ import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 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 { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
 import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
-import { TableOptionsDropdownColumnVisibility } from './TableOptionsDropdownSection';
-
 type TableOptionsDropdownButtonProps = {
   onViewsChange?: (views: View[]) => void | Promise<void>;
   onImport?: () => void;
 };
 
-type TableOptionsMenu = 'properties';
+type TableOptionsMenu = 'fields';
 
 export function TableOptionsDropdownContent({
   onViewsChange,
@@ -40,9 +40,9 @@ export function TableOptionsDropdownContent({
     key: TableOptionsDropdownKey,
   });
 
-  const [selectedMenu, setSelectedMenu] = useState<
+  const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(
-    TableOptionsMenu | undefined
+    undefined,
-  >(undefined);
+  );
 
   const viewEditInputRef = useRef<HTMLInputElement>(null);
 
@@ -65,6 +65,8 @@ export function TableOptionsDropdownContent({
     scopeContext: TableRecoilScopeContext,
   });
 
+  const { handleColumnVisibilityChange } = useTableColumns();
+
   const handleViewNameSubmit = async () => {
     const name = viewEditInputRef.current?.value;
     await upsertView(name);
@@ -72,10 +74,10 @@ export function TableOptionsDropdownContent({
 
   const handleSelectMenu = (option: TableOptionsMenu) => {
     handleViewNameSubmit();
-    setSelectedMenu(option);
+    setCurrentMenu(option);
   };
 
-  const resetMenu = () => setSelectedMenu(undefined);
+  const resetMenu = () => setCurrentMenu(undefined);
 
   useScopedHotkeys(
     Key.Escape,
@@ -97,7 +99,7 @@ export function TableOptionsDropdownContent({
 
   return (
     <StyledDropdownMenu>
-      {!selectedMenu && (
+      {!currentMenu && (
         <>
           {!!viewEditMode.mode ? (
             <DropdownMenuInput
@@ -118,9 +120,9 @@ export function TableOptionsDropdownContent({
           <StyledDropdownMenuSeparator />
           <StyledDropdownMenuItemsContainer>
             <MenuItem
-              onClick={() => handleSelectMenu('properties')}
+              onClick={() => handleSelectMenu('fields')}
               LeftIcon={IconTag}
-              text="Properties"
+              text="Fields"
             />
             {onImport && (
               <MenuItem
@@ -132,22 +134,24 @@ export function TableOptionsDropdownContent({
           </StyledDropdownMenuItemsContainer>
         </>
       )}
-      {selectedMenu === 'properties' && (
+      {currentMenu === 'fields' && (
         <>
           <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}>
-            Properties
+            Fields
           </DropdownMenuHeader>
           <StyledDropdownMenuSeparator />
-          <TableOptionsDropdownColumnVisibility
+          <ViewFieldsVisibilityDropdownSection
             title="Visible"
-            columns={visibleTableColumns}
+            fields={visibleTableColumns}
+            onVisibilityChange={handleColumnVisibilityChange}
           />
           {hiddenTableColumns.length > 0 && (
             <>
               <StyledDropdownMenuSeparator />
-              <TableOptionsDropdownColumnVisibility
+              <ViewFieldsVisibilityDropdownSection
                 title="Hidden"
-                columns={hiddenTableColumns}
+                fields={hiddenTableColumns}
+                onVisibilityChange={handleColumnVisibilityChange}
               />
             </>
           )}

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

@@ -1,41 +0,0 @@
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
-import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
-import { IconMinus, IconPlus } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
-
-import { useTableColumns } from '../../hooks/useTableColumns';
-import type { ColumnDefinition } from '../../types/ColumnDefinition';
-
-type OwnProps = {
-  title: string;
-  columns: ColumnDefinition<ViewFieldMetadata>[];
-};
-
-export function TableOptionsDropdownColumnVisibility({
-  title,
-  columns,
-}: OwnProps) {
-  const { handleColumnVisibilityChange } = useTableColumns();
-
-  return (
-    <>
-      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
-      <StyledDropdownMenuItemsContainer>
-        {columns.map((column) => (
-          <MenuItem
-            key={column.key}
-            LeftIcon={column.Icon}
-            iconButtons={[
-              {
-                Icon: column.isVisible ? IconMinus : IconPlus,
-                onClick: () => handleColumnVisibilityChange(column),
-              },
-            ]}
-            text={column.name}
-          />
-        ))}
-      </StyledDropdownMenuItemsContainer>
-    </>
-  );
-}

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@@ -70,17 +69,6 @@ export function TableHeader<SortField>({
     await onViewSubmit?.();
   }
 
-  const OptionsDropdownButton = useCallback(
-    () => (
-      <TableOptionsDropdown
-        onImport={onImport}
-        onViewsChange={onViewsChange}
-        customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
-      />
-    ),
-    [onImport, onViewsChange],
-  );
-
   return (
     <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
       <ViewBar
@@ -89,7 +77,13 @@ export function TableHeader<SortField>({
         onReset={handleViewBarReset}
         onViewSelect={handleViewSelect}
         onViewSubmit={handleViewSubmit}
-        OptionsDropdownButton={OptionsDropdownButton}
+        optionsDropdownButton={
+          <TableOptionsDropdown
+            onImport={onImport}
+            onViewsChange={onViewsChange}
+            customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+          />
+        }
         optionsDropdownKey={TableOptionsDropdownKey}
         scopeContext={TableRecoilScopeContext}
       />

front/src/modules/ui/table/types/ColumnDefinition.ts

@@ -6,5 +6,4 @@ import type {
 export type ColumnDefinition<T extends ViewFieldMetadata | unknown> =
   ViewFieldDefinition<T> & {
     size: number;
-    index: number;
   };

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentType, Context } from 'react';
+import type { ComponentProps, Context, ReactNode } from 'react';
 
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { TopBar } from '@/ui/top-bar/TopBar';
@@ -22,7 +22,7 @@ import {
 } from './ViewsDropdownButton';
 
 export type ViewBarProps<SortField> = ComponentProps<'div'> & {
-  OptionsDropdownButton: ComponentType;
+  optionsDropdownButton: ReactNode;
   optionsDropdownKey: string;
   scopeContext: Context<string | null>;
 } & Pick<
@@ -41,7 +41,7 @@ export const ViewBar = <SortField,>({
   onViewsChange,
   onViewSelect,
   onViewSubmit,
-  OptionsDropdownButton,
+  optionsDropdownButton,
   optionsDropdownKey,
   scopeContext,
   ...props
@@ -76,7 +76,7 @@ export const ViewBar = <SortField,>({
             hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
             isPrimaryButton
           />
-          <OptionsDropdownButton />
+          {optionsDropdownButton}
         </>
       }
       bottomComponent={

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

@@ -0,0 +1,39 @@
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { IconMinus, IconPlus } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+
+type OwnProps<Field> = {
+  fields: Field[];
+  onVisibilityChange: (field: Field) => void;
+  title: string;
+};
+
+export function ViewFieldsVisibilityDropdownSection<
+  Field extends ViewFieldDefinition<ViewFieldMetadata>,
+>({ fields, onVisibilityChange, title }: OwnProps<Field>) {
+  return (
+    <>
+      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      <StyledDropdownMenuItemsContainer>
+        {fields.map((field) => (
+          <MenuItem
+            key={field.key}
+            LeftIcon={field.Icon}
+            iconButtons={[
+              {
+                Icon: field.isVisible ? IconMinus : IconPlus,
+                onClick: () => onVisibilityChange(field),
+              },
+            ]}
+            text={field.name}
+          />
+        ))}
+      </StyledDropdownMenuItemsContainer>
+    </>
+  );
+}

front/src/modules/views/hooks/useBoardViewFields.ts

@@ -0,0 +1,113 @@
+import { type Context } from 'react';
+
+import { availableBoardCardFieldsScopedState } from '@/ui/board/states/availableBoardCardFieldsScopedState';
+import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import {
+  SortOrder,
+  useCreateViewFieldsMutation,
+  useGetViewFieldsQuery,
+} from '~/generated/graphql';
+import { assertNotNull } from '~/utils/assert';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+const toViewFieldInput = (
+  objectId: 'company' | 'person',
+  fieldDefinition: ViewFieldDefinition<ViewFieldMetadata>,
+) => ({
+  key: fieldDefinition.key,
+  name: fieldDefinition.name,
+  index: fieldDefinition.index,
+  isVisible: fieldDefinition.isVisible ?? true,
+  objectId,
+});
+
+export const useBoardViewFields = ({
+  objectId,
+  fieldDefinitions,
+  scopeContext,
+  skipFetch,
+}: {
+  objectId: 'company' | 'person';
+  fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
+  scopeContext: Context<string | null>;
+  skipFetch?: boolean;
+}) => {
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    scopeContext,
+  );
+  const [availableBoardCardFields, setAvailableBoardCardFields] =
+    useRecoilScopedState(availableBoardCardFieldsScopedState, scopeContext);
+  const [boardCardFields, setBoardCardFields] = useRecoilScopedState(
+    boardCardFieldsScopedState,
+    scopeContext,
+  );
+
+  const [createViewFieldsMutation] = useCreateViewFieldsMutation();
+
+  const createViewFields = (
+    fields: ViewFieldDefinition<ViewFieldMetadata>[],
+    viewId = currentViewId,
+  ) => {
+    if (!viewId || !fields.length) return;
+
+    return createViewFieldsMutation({
+      variables: {
+        data: fields.map((field) => ({
+          ...toViewFieldInput(objectId, field),
+          viewId,
+        })),
+      },
+    });
+  };
+
+  const { refetch } = useGetViewFieldsQuery({
+    skip: !currentViewId || skipFetch,
+    variables: {
+      orderBy: { index: SortOrder.Asc },
+      where: {
+        viewId: { equals: currentViewId },
+      },
+    },
+    onCompleted: async (data) => {
+      if (!data.viewFields.length) {
+        // Populate if empty
+        await createViewFields(fieldDefinitions);
+        return refetch();
+      }
+
+      const nextFields = data.viewFields
+        .map<ViewFieldDefinition<ViewFieldMetadata> | null>((viewField) => {
+          const fieldDefinition = fieldDefinitions.find(
+            ({ key }) => viewField.key === key,
+          );
+
+          return fieldDefinition
+            ? {
+                ...fieldDefinition,
+                key: viewField.key,
+                name: viewField.name,
+                index: viewField.index,
+                isVisible: viewField.isVisible,
+              }
+            : null;
+        })
+        .filter<ViewFieldDefinition<ViewFieldMetadata>>(assertNotNull);
+
+      if (!isDeeplyEqual(boardCardFields, nextFields)) {
+        setBoardCardFields(nextFields);
+      }
+
+      if (!availableBoardCardFields.length) {
+        setAvailableBoardCardFields(fieldDefinitions);
+      }
+    },
+  });
+};

front/src/modules/views/hooks/useBoardViews.ts

@@ -1,5 +1,9 @@
-import { type Context } from 'react';
+import type { Context } from 'react';
 
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
@@ -7,6 +11,7 @@ import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinit
 import type { SortType } from '@/ui/view-bar/types/interface';
 import { ViewType } from '~/generated/graphql';
 
+import { useBoardViewFields } from './useBoardViewFields';
 import { useViewFilters } from './useViewFilters';
 import { useViews } from './useViews';
 import { useViewSorts } from './useViewSorts';
@@ -14,11 +19,13 @@ import { useViewSorts } from './useViewSorts';
 export const useBoardViews = <Entity, SortField>({
   availableFilters,
   availableSorts,
+  fieldDefinitions,
   objectId,
   scopeContext,
 }: {
   availableFilters: FilterDefinitionByEntity<Entity>[];
   availableSorts: SortType<SortField>[];
+  fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
   objectId: 'company';
   scopeContext: Context<string | null>;
 }) => {
@@ -31,6 +38,12 @@ export const useBoardViews = <Entity, SortField>({
     type: ViewType.Pipeline,
     scopeContext,
   });
+  useBoardViewFields({
+    objectId,
+    fieldDefinitions,
+    scopeContext,
+    skipFetch: isFetchingViews,
+  });
   const { createViewFilters, persistFilters } = useViewFilters({
     availableFilters,
     scopeContext,

front/src/pages/opportunities/opportunitiesBoardOptions.tsx

@@ -7,7 +7,7 @@ import { opportunitiesSorts } from './opportunities-sorts';
 
 export const opportunitiesBoardOptions: BoardOptions = {
   newCardComponent: <NewCompanyProgressButton />,
-  cardComponent: <CompanyBoardCard />,
+  CardComponent: CompanyBoardCard,
   filters: opportunitiesFilters,
   sorts: opportunitiesSorts,
 };

front/src/testing/graphqlMocks.ts

@@ -32,6 +32,7 @@ import {
 import { mockedActivities, mockedTasks } from './mock-data/activities';
 import {
   mockedCompaniesData,
+  mockedCompanyBoardCardFields,
   mockedCompanyBoardViews,
   mockedCompanyTableColumns,
   mockedCompanyTableViews,
@@ -264,7 +265,9 @@ export const graphqlMocks = [
     return res(
       ctx.data({
         viewFields:
-          viewId === mockedCompanyTableViews[0].id
+          viewId === mockedCompanyBoardViews[0].id
+            ? mockedCompanyBoardCardFields
+            : viewId === mockedCompanyTableViews[0].id
             ? mockedCompanyTableColumns
             : mockedPersonTableColumns,
       }),

front/src/testing/mock-data/companies.ts

@@ -1,4 +1,5 @@
 import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
+import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import {
   Company,
   Favorite,
@@ -168,6 +169,19 @@ export const mockedCompanyBoardViews: View[] = [
   },
 ];
 
+export const mockedCompanyBoardCardFields =
+  pipelineAvailableFieldDefinitions.map<Omit<ViewField, 'view'>>(
+    (viewFieldDefinition) => ({
+      __typename: 'ViewField',
+      name: viewFieldDefinition.name,
+      index: viewFieldDefinition.index,
+      isVisible: true,
+      key: viewFieldDefinition.key,
+      objectId: 'company',
+      viewId: mockedCompanyBoardViews[0].id,
+    }),
+  );
+
 export const mockedCompanyTableViews: View[] = [
   {
     __typename: 'View',