feat: toggle board field visibilities (#1547)

Closes #1537, Closes #1539

Author: thaisguigon

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) => (
-      <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
-        <HooksCompanyBoard />
-        <RecoilScope SpecificContext={BoardColumnRecoilScopeContext}>
-          <BoardCardIdContext.Provider value={mockedPipelineProgressData[1].id}>
-            <MemoryRouter>
-              <Story />
-            </MemoryRouter>
-          </BoardCardIdContext.Provider>
-        </RecoilScope>
-      </RecoilScope>
-    ),
+    (Story, context) => {
+      const [, setBoardCardFields] = useRecoilScopedState(
+        boardCardFieldsScopedState,
+        context.parameters.recoilScopeContext,
+      );
+
+      useEffect(() => {
+        setBoardCardFields(pipelineAvailableFieldDefinitions);
+      }, [setBoardCardFields]);
+
+      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,23 +1,28 @@
-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';
 
 import { companyProgressesFamilyState } from '../states/companyProgressesFamilyState';
 
 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) => {
-                return (
-                  <PreventSelectOnClickContainer key={viewField.key}>
-                    <EditableFieldDefinitionContext.Provider
-                      value={{
-                        key: viewField.key,
-                        name: viewField.name,
-                        Icon: viewField.Icon,
-                        type: viewField.metadata.type,
-                        metadata: viewField.metadata,
-                      }}
-                    >
-                      <GenericEditableField />
-                    </EditableFieldDefinitionContext.Provider>
-                  </PreventSelectOnClickContainer>
-                );
-              })}
+              {visibleBoardCardFields.map((viewField) => (
+                <PreventSelectOnClickContainer key={viewField.key}>
+                  <EditableFieldDefinitionContext.Provider
+                    value={{
+                      key: viewField.key,
+                      name: viewField.name,
+                      Icon: viewField.Icon,
+                      type: viewField.metadata.type,
+                      metadata: viewField.metadata,
+                    }}
+                  >
+                    <GenericEditableField />
+                  </EditableFieldDefinitionContext.Provider>
+                </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,17 +24,13 @@ 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,
   );
 
   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,27 +29,22 @@ 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
         availableSorts={availableSorts}
         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>