Add FieldDefinition (#1162)

* add fieldDefinition

* update naming

* use a unique contextProvider for editable fields

* remove EntityUpdateMutationHookContext.Provider usage in CompanyBoardCard

* add fieldDefinitionState

* remove unnecessary refetchQueries to avoid re-render

* add FieldMetadata

* add type guards and update useUpdateGenericEntityField

* restore refetchQueries

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

@@ -3,16 +3,15 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
-import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '@/ui/editable-field/states/EditableFieldContext';
 import {
   Checkbox,
   CheckboxVariant,
 } from '@/ui/input/checkbox/components/Checkbox';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -111,7 +110,7 @@ export function CompanyBoardCard() {
   const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
     selectedBoardCardIdsState,
   );
-  const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
+  const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
 
   const selected = selectedBoardCards.includes(boardCardId ?? '');
 
@@ -125,7 +124,8 @@ export function CompanyBoardCard() {
     }
   }
 
-  if (!company || !pipelineProgress) {
+  // boardCardId check can be moved to a wrapper to avoid unnecessary logic above
+  if (!company || !pipelineProgress || !boardCardId) {
     return null;
   }
 
@@ -146,42 +146,50 @@ export function CompanyBoardCard() {
   }
 
   return (
-    <EntityUpdateMutationHookContext.Provider
-      value={useUpdateOnePipelineProgressMutation}
-    >
-      <StyledBoardCardWrapper>
-        <StyledBoardCard
-          selected={selected}
-          onClick={() => setSelected(!selected)}
-        >
-          <StyledBoardCardHeader>
-            <CompanyChip
-              id={company.id}
-              name={company.name}
-              pictureUrl={getLogoUrlFromDomainName(company.domainName)}
-              variant={EntityChipVariant.Transparent}
+    <StyledBoardCardWrapper>
+      <StyledBoardCard
+        selected={selected}
+        onClick={() => setSelected(!selected)}
+      >
+        <StyledBoardCardHeader>
+          <CompanyChip
+            id={company.id}
+            name={company.name}
+            pictureUrl={getLogoUrlFromDomainName(company.domainName)}
+            variant={EntityChipVariant.Transparent}
+          />
+          <StyledCheckboxContainer className="checkbox-container">
+            <Checkbox
+              checked={selected}
+              onChange={() => setSelected(!selected)}
+              variant={CheckboxVariant.Secondary}
             />
-            <StyledCheckboxContainer className="checkbox-container">
-              <Checkbox
-                checked={selected}
-                onChange={() => setSelected(!selected)}
-                variant={CheckboxVariant.Secondary}
-              />
-            </StyledCheckboxContainer>
-          </StyledBoardCardHeader>
-          <StyledBoardCardBody>
-            {fieldsDefinitions.map((viewField) => {
-              return (
-                <PreventSelectOnClickContainer key={viewField.id}>
-                  <EditableFieldEntityIdContext.Provider value={boardCardId}>
-                    <GenericEditableField viewField={viewField} />
-                  </EditableFieldEntityIdContext.Provider>
-                </PreventSelectOnClickContainer>
-              );
-            })}
-          </StyledBoardCardBody>
-        </StyledBoardCard>
-      </StyledBoardCardWrapper>
-    </EntityUpdateMutationHookContext.Provider>
+          </StyledCheckboxContainer>
+        </StyledBoardCardHeader>
+        <StyledBoardCardBody>
+          {viewFieldsDefinitions.map((viewField) => {
+            return (
+              <PreventSelectOnClickContainer key={viewField.id}>
+                <EditableFieldContext.Provider
+                  value={{
+                    entityId: boardCardId,
+                    mutation: useUpdateOnePipelineProgressMutation,
+                    fieldDefinition: {
+                      id: viewField.id,
+                      label: viewField.columnLabel,
+                      icon: viewField.columnIcon,
+                      type: viewField.metadata.type,
+                      metadata: viewField.metadata,
+                    },
+                  }}
+                >
+                  <GenericEditableField />
+                </EditableFieldContext.Provider>
+              </PreventSelectOnClickContainer>
+            );
+          })}
+        </StyledBoardCardBody>
+      </StyledBoardCard>
+    </StyledBoardCardWrapper>
   );
 }

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

@@ -2,8 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@@ -27,7 +27,9 @@ export function HooksCompanyBoard({
 }: {
   orderBy: PipelineProgresses_Order_By[];
 }) {
-  const setFieldsDefinitionsState = useSetRecoilState(fieldsDefinitionsState);
+  const setFieldsDefinitionsState = useSetRecoilState(
+    viewFieldsDefinitionsState,
+  );
 
   useEffect(() => {
     setFieldsDefinitionsState(pipelineViewFields);