@finos/legend-application-marketplace 0.1.56 → 0.1.58

package/src/pages/Lakehouse/entitlements/EntitlementsPendingContractsDashboard.tsx

@@ -15,15 +15,10 @@
  */
 
 import {
-  type V1_ContractUserEventRecord,
-  type V1_LiteDataContract,
-  type V1_UserPendingContractsRecord,
   GraphManagerState,
-  V1_AdhocTeam,
   V1_ContractState,
-  V1_deserializeTaskResponse,
-  V1_ResourceType,
-  V1_UserApprovalStatus,
+  type V1_LiteDataContract,
+  V1_LiteDataContractWithUserStatus,
 } from '@finos/legend-graph';
 import {
   DataGrid,
@@ -35,24 +30,24 @@ import {
   Box,
   CircularProgress,
   FormControlLabel,
+  FormGroup,
   Switch,
-  Tooltip,
 } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
-import type { EntitlementsDashboardState } from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
+import { useMemo, useState } from 'react';
+import type {
+  ContractCreatedByUserDetails,
+  EntitlementsDashboardState,
+} from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
 import { useLegendMarketplaceBaseStore } from '../../../application/providers/LegendMarketplaceFrameworkProvider.js';
 import { observer } from 'mobx-react-lite';
-import { assertErrorThrown, startCase } from '@finos/legend-shared';
+import { startCase } from '@finos/legend-shared';
 import { useAuth } from 'react-oidc-context';
-import { InfoCircleIcon } from '@finos/legend-art';
 import {
   MultiUserRenderer,
   isContractInTerminalState,
-  getOrganizationalScopeTypeName,
-  getOrganizationalScopeTypeDetails,
-  UserRenderer,
   EntitlementsDataContractViewer,
   EntitlementsDataContractViewerState,
+  isApprovalStatusTerminal,
 } from '@finos/legend-extension-dsl-data-product';
 import {
   generateContractPagePath,
@@ -60,195 +55,61 @@ import {
 } from '../../../__lib__/LegendMarketplaceNavigation.js';
 import type { LakehouseEntitlementsStore } from '../../../stores/lakehouse/entitlements/LakehouseEntitlementsStore.js';
 import { flowResult } from 'mobx';
+import { getCommonEntitlementsColDefs } from '../../../utils/EntitlementsUtils.js';
 
 const AssigneesCellRenderer = (props: {
-  dataContract: V1_LiteDataContract | undefined;
-  pendingContractRecords: V1_UserPendingContractsRecord[] | undefined;
+  dataContract:
+    | V1_LiteDataContractWithUserStatus
+    | ContractCreatedByUserDetails
+    | undefined;
   entitlementsStore: LakehouseEntitlementsStore;
-  token: string | undefined;
 }): React.ReactNode => {
-  const { dataContract, pendingContractRecords, entitlementsStore, token } =
-    props;
-  const pendingContractRecord = pendingContractRecords?.find(
-    (record) => record.contractId === dataContract?.guid,
-  );
-  const [assignees, setAssignees] = useState<string[]>(
-    pendingContractRecord?.pendingTaskWithAssignees.assignees ??
-      entitlementsStore.contractIdToAssigneesMap.get(
-        dataContract?.guid ?? '',
-      ) ??
-      [],
-  );
-  const [loading, setLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    const fetchAssignees = async () => {
-      if (dataContract) {
-        setLoading(true);
-        try {
-          const rawTasks =
-            await entitlementsStore.lakehouseContractServerClient.getContractTasks(
-              dataContract.guid,
-              token,
-            );
-          const tasks = V1_deserializeTaskResponse(rawTasks);
-          const pendingTasks = tasks.filter(
-            (task) => task.rec.status === V1_UserApprovalStatus.PENDING,
-          );
-          const pendingAssignees = Array.from(
-            new Set<string>(pendingTasks.map((task) => task.assignees).flat()),
-          );
-          setAssignees(pendingAssignees);
-          entitlementsStore.contractIdToAssigneesMap.set(
-            dataContract.guid,
-            pendingAssignees,
-          );
-        } catch (error) {
-          assertErrorThrown(error);
-          entitlementsStore.applicationStore.notificationService.notifyError(
-            `Error fetching contract assignees: ${error.message}`,
-          );
-        } finally {
-          setLoading(false);
-        }
-      }
-    };
+  const { dataContract, entitlementsStore } = props;
 
-    if (assignees.length === 0) {
-      // eslint-disable-next-line no-void
-      void fetchAssignees();
-    }
-  }, [
-    assignees.length,
-    dataContract,
-    entitlementsStore.applicationStore.notificationService,
-    entitlementsStore.contractIdToAssigneesMap,
-    entitlementsStore.lakehouseContractServerClient,
-    token,
-  ]);
+  const assignees =
+    (dataContract instanceof V1_LiteDataContractWithUserStatus
+      ? dataContract.pendingTaskWithAssignees?.assignees.toSorted()
+      : dataContract?.sortedAssigneeIds) ?? [];
 
-  return loading ? (
-    <CircularProgress size={20} />
-  ) : assignees.length > 0 ? (
+  return (
     <MultiUserRenderer
       userIds={assignees}
       applicationStore={entitlementsStore.applicationStore}
       userSearchService={
         entitlementsStore.marketplaceBaseStore.userSearchService
       }
+      disableOnClick={true}
       singleUserClassName="marketplace-lakehouse-entitlements__grid__user-display"
     />
-  ) : (
-    <>Unknown</>
   );
 };
 
-const TargetUserCellRenderer = observer(
-  (props: {
-    dataContract: V1_LiteDataContract | undefined;
-    entitlementsStore: LakehouseEntitlementsStore;
-    token: string | undefined;
-  }): React.ReactNode => {
-    const { dataContract, entitlementsStore, token } = props;
-    const [targetUsers, setTargetUsers] = useState<string[]>(
-      entitlementsStore.contractIdToTargetUsersMap.get(
-        dataContract?.guid ?? '',
-      ) ?? [],
-    );
-    const [loading, setLoading] = useState<boolean>(false);
-
-    useEffect(() => {
-      const fetchTargetUsers = async () => {
-        if (dataContract) {
-          setLoading(true);
-          try {
-            // We try to get the target users from the associated tasks first, since the
-            // tasks are what drive the timeline view. If there are no associated tasks,
-            // then we use the contract consumer.
-            const rawTasks =
-              await entitlementsStore.lakehouseContractServerClient.getContractTasks(
-                dataContract.guid,
-                token,
-              );
-            const tasks = V1_deserializeTaskResponse(rawTasks);
-            const taskTargetUsers = Array.from(
-              new Set<string>(tasks.map((task) => task.rec.consumer)),
-            );
-            const _targetUsers = taskTargetUsers.length
-              ? taskTargetUsers
-              : dataContract.consumer instanceof V1_AdhocTeam
-                ? dataContract.consumer.users.map((user) => user.name)
-                : [];
-            setTargetUsers(_targetUsers);
-            entitlementsStore.contractIdToTargetUsersMap.set(
-              dataContract.guid,
-              _targetUsers,
-            );
-          } catch (error) {
-            assertErrorThrown(error);
-            entitlementsStore.applicationStore.notificationService.notifyError(
-              `Error fetching contract target users: ${error.message}`,
-            );
-          } finally {
-            setLoading(false);
-          }
-        }
-      };
-      if (targetUsers.length === 0) {
-        // eslint-disable-next-line no-void
-        void fetchTargetUsers();
-      }
-    }, [dataContract, entitlementsStore, targetUsers.length, token]);
-
-    return loading ? (
-      <CircularProgress size={20} />
-    ) : targetUsers.length > 0 ? (
-      <MultiUserRenderer
-        userIds={targetUsers}
-        applicationStore={entitlementsStore.applicationStore}
-        userSearchService={
-          entitlementsStore.marketplaceBaseStore.userSearchService
-        }
-        singleUserClassName="marketplace-lakehouse-entitlements__grid__user-display"
-      />
-    ) : (
-      <>Unknown</>
-    );
-  },
-);
-
 export const EntitlementsPendingContractsDashboard = observer(
   (props: { dashboardState: EntitlementsDashboardState }): React.ReactNode => {
     const { dashboardState } = props;
-    const { pendingContracts, allContracts } = dashboardState;
+    const { allContractsForUser, allContractsCreatedByUser } = dashboardState;
     const marketplaceBaseStore = useLegendMarketplaceBaseStore();
     const auth = useAuth();
 
     const myPendingContracts = useMemo(
       () =>
-        allContracts?.filter((contract) =>
-          pendingContracts?.some(
-            (pendingContract) => pendingContract.contractId === contract.guid,
-          ),
+        allContractsForUser?.filter(
+          (contract) => !isApprovalStatusTerminal(contract.status),
         ) ?? [],
-      [allContracts, pendingContracts],
+      [allContractsForUser],
+    );
+    const myPendingContractIds = useMemo(
+      () => new Set(myPendingContracts.map((c) => c.contractResultLite.guid)),
+      [myPendingContracts],
     );
     const pendingContractsForOthers = useMemo(
       () =>
-        allContracts?.filter(
+        allContractsCreatedByUser.filter(
           (contract) =>
-            contract.createdBy ===
-              dashboardState.lakehouseEntitlementsStore.applicationStore
-                .identityService.currentUser &&
-            !isContractInTerminalState(contract) &&
-            !myPendingContracts.includes(contract),
-        ) ?? [],
-      [
-        allContracts,
-        dashboardState.lakehouseEntitlementsStore.applicationStore
-          .identityService.currentUser,
-        myPendingContracts,
-      ],
+            !isContractInTerminalState(contract.contractResultLite) &&
+            !myPendingContractIds.has(contract.contractResultLite.guid),
+        ),
+      [allContractsCreatedByUser, myPendingContractIds],
     );
 
     const [selectedContract, setSelectedContract] = useState<
@@ -259,116 +120,34 @@ export const EntitlementsPendingContractsDashboard = observer(
     );
 
     const handleCellClicked = (
-      event: DataGridCellClickedEvent<V1_LiteDataContract>,
+      event: DataGridCellClickedEvent<
+        V1_LiteDataContractWithUserStatus | ContractCreatedByUserDetails
+      >,
     ) => {
-      if (
-        event.colDef.colId !== 'targetUser' &&
-        event.colDef.colId !== 'requester' &&
-        event.colDef.colId !== 'assignees'
-      ) {
-        setSelectedContract(event.data);
-      }
+      setSelectedContract(event.data?.contractResultLite);
     };
 
-    const defaultColDef: DataGridColumnDefinition<V1_LiteDataContract> =
-      useMemo(
-        () => ({
-          minWidth: 50,
-          sortable: true,
-          resizable: true,
-          flex: 1,
-        }),
-        [],
-      );
+    const defaultColDef: DataGridColumnDefinition<
+      V1_LiteDataContractWithUserStatus | ContractCreatedByUserDetails
+    > = useMemo(
+      () => ({
+        minWidth: 50,
+        sortable: true,
+        resizable: true,
+        flex: 1,
+      }),
+      [],
+    );
 
-    const colDefs: DataGridColumnDefinition<V1_LiteDataContract>[] = useMemo(
+    const colDefs: DataGridColumnDefinition<
+      V1_LiteDataContractWithUserStatus | ContractCreatedByUserDetails
+    >[] = useMemo(
       () => [
-        {
-          colId: 'consumerType',
-          headerName: 'Consumer Type',
-          cellRenderer: (
-            params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
-          ) => {
-            const consumer = params.data?.consumer;
-            const typeName = consumer
-              ? getOrganizationalScopeTypeName(
-                  consumer,
-                  dashboardState.lakehouseEntitlementsStore.applicationStore.pluginManager.getApplicationPlugins(),
-                )
-              : undefined;
-            const typeDetails = consumer
-              ? getOrganizationalScopeTypeDetails(
-                  consumer,
-                  dashboardState.lakehouseEntitlementsStore.applicationStore.pluginManager.getApplicationPlugins(),
-                )
-              : undefined;
-            return (
-              <>
-                {typeName ?? 'Unknown'}
-                {typeDetails !== undefined && (
-                  <Tooltip
-                    className="marketplace-lakehouse-entitlements__grid__consumer-type__tooltip__icon"
-                    title={typeDetails}
-                  >
-                    <InfoCircleIcon />
-                  </Tooltip>
-                )}
-              </>
-            );
-          },
-        },
-        {
-          headerName: 'Target User(s)',
-          colId: 'targetUser',
-          cellRenderer: (
-            params: DataGridCellRendererParams<V1_LiteDataContract>,
-          ) => (
-            <TargetUserCellRenderer
-              dataContract={params.data}
-              entitlementsStore={dashboardState.lakehouseEntitlementsStore}
-              token={auth.user?.access_token}
-            />
-          ),
-        },
-        {
-          headerName: 'Requester',
-          colId: 'requester',
-          cellRenderer: (
-            params: DataGridCellRendererParams<V1_LiteDataContract>,
-          ) => {
-            const requester = params.data?.createdBy;
-            return requester ? (
-              <UserRenderer
-                userId={requester}
-                applicationStore={marketplaceBaseStore.applicationStore}
-                userSearchService={marketplaceBaseStore.userSearchService}
-                className="marketplace-lakehouse-entitlements__grid__user-display"
-              />
-            ) : (
-              <>Unknown</>
-            );
-          },
-        },
-        {
-          headerName: 'Target Data Product',
-          valueGetter: (params) => {
-            return params.data?.resourceId ?? 'Unknown';
-          },
-        },
-        {
-          headerName: 'Target Access Point Group',
-          valueGetter: (params) => {
-            const accessPointGroup =
-              params.data?.resourceType === V1_ResourceType.ACCESS_POINT_GROUP
-                ? params.data.accessPointGroup
-                : `${params.data?.accessPointGroup ?? 'Unknown'} (${params.data?.resourceType ?? 'Unknown Type'})`;
-            return accessPointGroup ?? 'Unknown';
-          },
-        },
+        ...getCommonEntitlementsColDefs(dashboardState),
         {
           headerName: 'State',
           valueGetter: (params) => {
-            const state = params.data?.state;
+            const state = params.data?.contractResultLite.state;
             switch (state) {
               case V1_ContractState.PENDING_DATA_OWNER_APPROVAL:
                 return 'Data Owner Approval';
@@ -381,35 +160,36 @@ export const EntitlementsPendingContractsDashboard = observer(
         },
         {
           headerName: 'Business Justification',
-          valueGetter: (p) => p.data?.description,
+          valueGetter: (p) => p.data?.contractResultLite.description,
         },
         {
           headerName: 'Assignees',
           colId: 'assignees',
+          valueGetter: (params) => {
+            const assignees =
+              (params.data instanceof V1_LiteDataContractWithUserStatus
+                ? params.data.pendingTaskWithAssignees?.assignees.toSorted()
+                : params.data?.sortedAssigneeIds) ?? [];
+            return assignees.length > 0 ? assignees.join(', ') : 'Unknown';
+          },
           cellRenderer: (
-            params: DataGridCellRendererParams<V1_LiteDataContract>,
+            params: DataGridCellRendererParams<
+              V1_LiteDataContractWithUserStatus | ContractCreatedByUserDetails
+            >,
           ) => (
             <AssigneesCellRenderer
               dataContract={params.data}
-              pendingContractRecords={pendingContracts}
               entitlementsStore={dashboardState.lakehouseEntitlementsStore}
-              token={auth.user?.access_token}
             />
           ),
         },
         {
           hide: true,
           headerName: 'Contract ID',
-          valueGetter: (p) => p.data?.guid,
+          valueGetter: (p) => p.data?.contractResultLite.guid,
         },
       ],
-      [
-        auth.user?.access_token,
-        dashboardState.lakehouseEntitlementsStore,
-        marketplaceBaseStore.applicationStore,
-        marketplaceBaseStore.userSearchService,
-        pendingContracts,
-      ],
+      [dashboardState],
     );
 
     const gridRowData = useMemo(
@@ -422,17 +202,30 @@ export const EntitlementsPendingContractsDashboard = observer(
 
     return (
       <Box className="marketplace-lakehouse-entitlements__pending-contracts">
-        <Box className="marketplace-lakehouse-entitlements__pending-contracts__action-btns">
+        <FormGroup className="marketplace-lakehouse-entitlements__pending-contracts__action-btns">
           <FormControlLabel
             control={
-              <Switch
-                checked={showForOthers}
-                onChange={(event) => setShowForOthers(event.target.checked)}
-              />
+              dashboardState.fetchingContractsByUserState.isInProgress ? (
+                <Box className="marketplace-lakehouse-entitlements__pending-contracts__action-btn--loading">
+                  <CircularProgress size={20} />
+                </Box>
+              ) : (
+                <Switch
+                  checked={showForOthers}
+                  onChange={(event) => setShowForOthers(event.target.checked)}
+                />
+              )
             }
             label="Show my requests for others"
+            title={
+              dashboardState.fetchingContractsByUserState.isInProgress
+                ? 'Loading requests for others'
+                : undefined
+            }
+            disabled={dashboardState.fetchingContractsByUserState.isInProgress}
+            className="marketplace-lakehouse-entitlements__pending-contracts__action-btn"
           />
-        </Box>
+        </FormGroup>
         <Box className="marketplace-lakehouse-entitlements__pending-contracts__grid ag-theme-balham">
           <DataGrid
             rowData={gridRowData}
@@ -446,7 +239,7 @@ export const EntitlementsPendingContractsDashboard = observer(
             defaultColDef={defaultColDef}
             rowHeight={45}
             overlayNoRowsTemplate="You have no pending contracts"
-            loading={dashboardState.initializationState.isInProgress}
+            loading={dashboardState.fetchingContractsForUserState.isInProgress}
             overlayLoadingTemplate="Loading contracts"
           />
         </Box>