Fix/opportunities board (#2610)

* WIP

* wip

* update pipelineStepId

* rename pipeline stage to pipeline step

* rename pipelineProgress to Opportunity

* fix UUID type not queried

* fix boardColumnTotal

* fix micros

* fixing filters, sorts and fields

* wip

* wip

* Fix opportunity board re-render

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

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

@@ -74,6 +74,7 @@ export const BoardOptionsDropdownContent = ({
     hiddenBoardCardFieldsScopedSelector,
     BoardRecoilScopeContext,
   );
+
   const hasHiddenFields = hiddenBoardCardFields.length > 0;
   const visibleBoardCardFields = useRecoilScopedValue(
     visibleBoardCardFieldsScopedSelector,

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

@@ -65,11 +65,11 @@ export const EntityBoard = ({
   const { unselectAllActiveCards } = useCurrentCardSelected();
 
   const updatePipelineProgressStageInDB = useCallback(
-    async (pipelineProgressId: string, pipelineStageId: string) => {
+    async (pipelineProgressId: string, pipelineStepId: string) => {
       await updateOneOpportunity?.({
         idToUpdate: pipelineProgressId,
         input: {
-          pipelineStepId: pipelineStageId,
+          pipelineStepId: pipelineStepId,
         },
       });
 
@@ -80,7 +80,7 @@ export const EntityBoard = ({
           __typename: 'PipelineProgress',
         }),
         fields: {
-          pipelineStageId: () => pipelineStageId,
+          pipelineStepId: () => pipelineStepId,
         },
       });
     },

front/src/modules/ui/layout/board/hooks/useBoardActionBarEntries.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { IconTrash } from '@/ui/display/icon';
@@ -5,19 +6,22 @@ import { useDeleteSelectedBoardCards } from '@/ui/layout/board/hooks/useDeleteSe
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
 
 export const useBoardActionBarEntries = () => {
-  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
+  const setActionBarEntriesRecoil = useSetRecoilState(actionBarEntriesState);
 
   const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
 
+  const setActionBarEntries = useCallback(() => {
+    setActionBarEntriesRecoil([
+      {
+        label: 'Delete',
+        Icon: IconTrash,
+        accent: 'danger',
+        onClick: deleteSelectedBoardCards,
+      },
+    ]);
+  }, [deleteSelectedBoardCards, setActionBarEntriesRecoil]);
+
   return {
-    setActionBarEntries: () =>
-      setActionBarEntries([
-        {
-          label: 'Delete',
-          Icon: IconTrash,
-          accent: 'danger',
-          onClick: deleteSelectedBoardCards,
-        },
-      ]),
+    setActionBarEntries,
   };
 };

front/src/modules/ui/layout/board/hooks/useBoardColumns.ts

@@ -17,7 +17,7 @@ export const useBoardColumns = () => {
       objectNameSingular: 'pipelineStep',
     });
 
-  const updatedPipelineStages = (stages: BoardColumnDefinition[]) => {
+  const updatedPipelineSteps = (stages: BoardColumnDefinition[]) => {
     if (!stages.length) return;
 
     return Promise.all(
@@ -33,7 +33,7 @@ export const useBoardColumns = () => {
   };
 
   const persistBoardColumns = async () => {
-    await updatedPipelineStages(boardColumns);
+    await updatedPipelineSteps(boardColumns);
   };
 
   const handleMoveBoardColumn = (

front/src/modules/ui/layout/board/hooks/useBoardContextMenuEntries.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { IconTrash } from '@/ui/display/icon';
@@ -5,19 +6,24 @@ import { useDeleteSelectedBoardCards } from '@/ui/layout/board/hooks/useDeleteSe
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
 
 export const useBoardContextMenuEntries = () => {
-  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
+  const setContextMenuEntriesRecoil = useSetRecoilState(
+    contextMenuEntriesState,
+  );
 
   const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
 
+  const setContextMenuEntries = useCallback(() => {
+    setContextMenuEntriesRecoil([
+      {
+        label: 'Delete',
+        Icon: IconTrash,
+        accent: 'danger',
+        onClick: deleteSelectedBoardCards,
+      },
+    ]);
+  }, [deleteSelectedBoardCards, setContextMenuEntriesRecoil]);
+
   return {
-    setContextMenuEntries: () =>
-      setContextMenuEntries([
-        {
-          label: 'Delete',
-          Icon: IconTrash,
-          accent: 'danger',
-          onClick: () => deleteSelectedBoardCards(),
-        },
-      ]),
+    setContextMenuEntries,
   };
 };

front/src/modules/ui/layout/board/hooks/useDeleteSelectedBoardCards.ts

@@ -34,7 +34,7 @@ export const useDeleteSelectedBoardCards = () => {
           apolloClient.cache.evict({ id: `Opportunity:${id}` });
         });
       },
-    [apolloClient.cache, deleteOneOpportunity, removeCardIds],
+    [apolloClient.cache, removeCardIds, deleteOneOpportunity],
   );
 
   return deleteSelectedBoardCards;

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

@@ -1,13 +1,11 @@
-import { atomFamily } from 'recoil';
-
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
 
 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
-export const availableBoardCardFieldsScopedState = atomFamily<
-  BoardFieldDefinition<FieldMetadata>[],
-  string
+export const availableBoardCardFieldsScopedState = createScopedState<
+  BoardFieldDefinition<FieldMetadata>[]
 >({
   key: 'availableBoardCardFieldsScopedState',
-  default: [],
+  defaultValue: [],
 });

front/src/modules/ui/layout/board/states/selectors/boardColumnTotalsFamilySelector.ts

@@ -9,20 +9,21 @@ import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFami
 export const boardColumnTotalsFamilySelector = selectorFamily({
   key: 'boardColumnTotalsFamilySelector',
   get:
-    (pipelineStageId: string) =>
+    (pipelineStepId: string) =>
     ({ get }) => {
-      const cardIds = get(boardCardIdsByColumnIdFamilyState(pipelineStageId));
+      const cardIds = get(boardCardIdsByColumnIdFamilyState(pipelineStepId));
 
-      const pipelineProgresses = cardIds.map((pipelineProgressId: string) =>
-        get(companyProgressesFamilyState(pipelineProgressId)),
+      const opportunities = cardIds.map((opportunityId: string) =>
+        get(companyProgressesFamilyState(opportunityId)),
       );
 
-      const pipelineStageTotal: number =
-        pipelineProgresses?.reduce(
-          (acc: number, curr: any) => acc + curr?.pipelineProgress.amount,
+      const pipelineStepTotal: number =
+        opportunities?.reduce(
+          (acc: number, curr: any) =>
+            acc + curr?.opportunity.amount.amountMicros / 1000000,
           0,
         ) || 0;
 
-      return pipelineStageTotal;
+      return pipelineStepTotal;
     },
 });

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

@@ -11,7 +11,7 @@ export const hiddenBoardCardFieldsScopedSelector = selectorFamily({
       const fields = get(boardCardFieldsScopedState(scopeId));
       const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
       const otherAvailableKeys = get(
-        availableBoardCardFieldsScopedState(scopeId),
+        availableBoardCardFieldsScopedState({ scopeId }),
       ).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
 
       return [