Merge pull request #1647 from SeedCompany/type-and-reach-partner-profile

Author: CarsonF

src/scenes/Partners/Detail/PartnerDetail.graphql

@@ -6,14 +6,20 @@ query Partner($input: ID!) {
 
 fragment partnerDetails on Partner {
   ...Id
-  createdAt
+  ...partnerOwnDetails
   organization {
     canRead
     canEdit
     value {
       ...organizationDetails
     }
   }
+}
+
+# Seperated for UpdatePartner mutation
+fragment partnerOwnDetails on Partner {
+  ...Id
+  createdAt
   pointOfContact {
     canRead
     canEdit
@@ -72,4 +78,14 @@ fragment organizationDetails on Organization {
     canEdit
     value
   }
+  types {
+    canRead
+    canEdit
+    value
+  }
+  reach {
+    canRead
+    canEdit
+    value
+  }
 }

src/scenes/Partners/Detail/Tabs/Profile/PartnerDetailProfile.tsx

@@ -5,6 +5,7 @@ import { TabPanelContent } from '~/components/Tabs';
 import { EditablePartnerField } from '../../../Edit';
 import { PartnerDetailsFragment } from '../../PartnerDetail.graphql';
 import { PartnerContactSection } from './PartnerContactSection';
+import { PartnerOrgReachAndTypeSection } from './PartnerOrgReachAndTypeSection';
 import { PartnerTypesSection } from './PartnerTypesSection';
 
 interface Props {
@@ -35,6 +36,12 @@ export const PartnerDetailProfile = ({ partner, editPartner: edit }: Props) => (
           }
         />
       </Grid>
+      <Grid xs={12} md={6}>
+        <PartnerOrgReachAndTypeSection
+          partner={partner}
+          onEdit={() => edit(['organization.types', 'organization.reach'])}
+        />
+      </Grid>
     </Grid>
   </TabPanelContent>
 );

src/scenes/Partners/Detail/Tabs/Profile/PartnerOrgReachAndTypeSection.tsx

@@ -0,0 +1,75 @@
+import { Edit } from '@mui/icons-material';
+import { Stack, Tooltip } from '@mui/material';
+import {
+  OrganizationReachLabels,
+  OrganizationTypeLabels,
+} from '~/api/schema.graphql';
+import { canEditAny, labelFrom } from '~/common';
+import { ActionableSection } from '~/components/ActionableSection';
+import { IconButton } from '~/components/IconButton';
+import { PartnerDetailsFragment } from '../../PartnerDetail.graphql';
+import { DisplaySecuredList } from './PartnerTypesSection';
+
+interface PartnerOrgReachAndTypeProps {
+  partner?: PartnerDetailsFragment;
+  onEdit: () => void;
+  className?: string;
+}
+
+export const PartnerOrgReachAndTypeSection = ({
+  partner,
+  onEdit,
+}: PartnerOrgReachAndTypeProps) => {
+  const canEdit = canEditAny(
+    partner?.organization.value,
+    false,
+    'types',
+    'reach'
+  );
+
+  return (
+    <ActionableSection
+      title="Additional Information"
+      loading={!partner}
+      action={
+        <Tooltip title="Edit">
+          <span>
+            <IconButton
+              disabled={!canEdit}
+              onClick={onEdit}
+              loading={!partner}
+              size="small"
+            >
+              <Edit />
+            </IconButton>
+          </span>
+        </Tooltip>
+      }
+    >
+      <Stack
+        direction="row"
+        columnGap={4}
+        rowGap={3}
+        justifyContent="space-between"
+        flexWrap="wrap"
+        maxWidth={350}
+      >
+        <DisplaySecuredList
+          title="Organizational Types"
+          data={partner?.organization.value?.types}
+          labelBy={labelFrom(OrganizationTypeLabels)}
+          redacted={{ fieldDescription: `organizational types` }}
+        />
+        <DisplaySecuredList
+          title="Reach"
+          data={partner?.organization.value?.reach}
+          labelBy={labelFrom(OrganizationReachLabels)}
+          redacted={{
+            fieldDescription: `partner's reach`,
+            width: `75%`,
+          }}
+        />
+      </Stack>
+    </ActionableSection>
+  );
+};

src/scenes/Partners/Detail/Tabs/Profile/PartnerTypesSection.tsx

@@ -75,7 +75,7 @@ export const PartnerTypesSection = ({
   );
 };
 
-const DisplaySecuredList = <T extends string>({
+export const DisplaySecuredList = <T extends string>({
   title,
   data,
   labelBy,

src/scenes/Partners/Edit/EditPartner.tsx

@@ -8,6 +8,10 @@ import {
   CoerceNonPrimitives,
   FinancialReportingTypeLabels,
   FinancialReportingTypeList,
+  OrganizationReachLabels,
+  OrganizationReachList,
+  OrganizationTypeLabels,
+  OrganizationTypeList,
   PartnerTypeList,
   UpdateOrganization,
   UpdatePartner,
@@ -108,6 +112,26 @@ const fieldMapping = {
   'organization.acronym': ({ props }) => (
     <TextField {...props} label="Acronym" />
   ),
+  'organization.reach': ({ props }) => (
+    <EnumField
+      multiple
+      label="Reach"
+      options={OrganizationReachList}
+      getLabel={labelFrom(OrganizationReachLabels)}
+      layout="column"
+      {...props}
+    />
+  ),
+  'organization.types': ({ props }) => (
+    <EnumField
+      multiple
+      label="Organizational Types"
+      options={OrganizationTypeList}
+      getLabel={labelFrom(OrganizationTypeLabels)}
+      layout="two-column"
+      {...props}
+    />
+  ),
 } satisfies PossibleFields;
 
 const decorators: Array<Decorator<PartnerFormValues>> = [
@@ -151,6 +175,8 @@ export const EditPartner = ({
         id: organization.id,
         name: organization.name.value,
         acronym: organization.acronym.value,
+        types: organization.types.value,
+        reach: organization.reach.value,
       },
     } satisfies PartnerFormValues;
   }, [partner]);

src/scenes/Partners/Edit/UpdatePartner.graphql

@@ -4,7 +4,20 @@ mutation UpdatePartner(
 ) {
   updatePartner(input: { partner: $partner }) {
     partner {
-      ...partnerDetails
+      # Organization data cannot be fetched here as it will be stale.
+      #
+      # The API executes these two mutations in parallel, independently.
+      # `Partner.organization` doesn't know it there's another organization update going on,
+      # and will return the stale data.
+      # Apollo Client would then receive two sets of org data:
+      # - `updateOrganization.organization` result
+      # - `updatePartner.partner.organization` result
+      # They will be conflict, with the former fresh, and the latter stale.
+      # We can avoid this race / nondeterministic behavior by only returning one org data set.
+      #
+      # Also, Apollo Client still has the normalized organization for the partner record,
+      # so it knows how to connect it together when requested for the detail page.
+      ...partnerOwnDetails
     }
   }
   updateOrganization(input: { organization: $organization }) {