Merge branch 'main' into context-menu-vertical

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

@@ -3,17 +3,18 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue, useSetRecoilState } 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 { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
 import {
   Checkbox,
   CheckboxVariant,
 } from '@/ui/input/checkbox/components/Checkbox';
 import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -112,7 +113,7 @@ export function CompanyBoardCard() {
   const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
     selectedBoardCardIdsState,
   );
-  const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
+  const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
 
   const selected = selectedBoardCards.includes(boardCardId ?? '');
   const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
@@ -128,7 +129,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;
   }
 
@@ -149,42 +151,52 @@ 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>
+          <EditableFieldMutationContext.Provider
+            value={useUpdateOnePipelineProgressMutation}
+          >
+            <EditableFieldEntityIdContext.Provider value={boardCardId}>
+              {viewFieldsDefinitions.map((viewField) => {
+                return (
+                  <PreventSelectOnClickContainer key={viewField.id}>
+                    <EditableFieldDefinitionContext.Provider
+                      value={{
+                        id: viewField.id,
+                        label: viewField.columnLabel,
+                        icon: viewField.columnIcon,
+                        type: viewField.metadata.type,
+                        metadata: viewField.metadata,
+                      }}
+                    >
+                      <GenericEditableField />
+                    </EditableFieldDefinitionContext.Provider>
+                  </PreventSelectOnClickContainer>
+                );
+              })}
+            </EditableFieldEntityIdContext.Provider>
+          </EditableFieldMutationContext.Provider>
+        </StyledBoardCardBody>
+      </StyledBoardCard>
+    </StyledBoardCardWrapper>
   );
 }

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

@@ -12,6 +12,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledTitleContainer = styled.div`
@@ -32,7 +33,6 @@ const StyledListContainer = styled.div`
   border-radius: ${({ theme }) => theme.spacing(1)};
   display: flex;
   flex-direction: column;
-  max-height: ${({ theme }) => theme.spacing(35)};
   overflow: auto;
   width: 100%;
 `;
@@ -63,8 +63,12 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
             <StyledTitle>Team</StyledTitle>
           </StyledTitleContainer>
           <StyledListContainer>
-            {data?.people?.map((person) => (
-              <PeopleCard key={person.id} person={person} />
+            {data?.people?.map((person, id) => (
+              <PeopleCard
+                key={person.id}
+                person={person}
+                hasBottomBorder={id !== data.people.length - 1}
+              />
             ))}
           </StyledListContainer>
         </StyledContainer>

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);

front/src/modules/companies/queries/show.ts

@@ -19,6 +19,15 @@ export const GET_COMPANY = gql`
         displayName
         avatarUrl
       }
+      Favorite {
+        id
+        person {
+          id
+        }
+        company {
+          id
+        }
+      }
     }
   }
 `;