[EASI-4469] add Open Requests on home page table (#2752)

* clean branch * naming - typo * allow sort on col * remove test code * remove unneeded Cell prop
CMS-Enterprise · Aug 8, 2024 · fba612b · fba612b
1 parent fe5edd0
commit fba612b
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 59 deletions.
diff --git a/src/i18n/en-US/systemProfile.ts b/src/i18n/en-US/systemProfile.ts
@@ -402,6 +402,7 @@ const systemProfile = {
     id: 'system-list',
     search: 'Search table',
     header: {
+      openRequests: 'Open EASi requests',
       systemName: 'System name',
       systemOwner: 'CMS component',
       systemAcronym: 'Acronym',

diff --git a/src/queries/GetCedarSystemsQuery.ts b/src/queries/GetCedarSystemsQuery.ts
@@ -14,6 +14,12 @@ export default gql`
       systemMaintainerOrgComp
       isBookmarked
       atoExpirationDate
+      linkedTrbRequests(state: OPEN) {
+        id
+      }
+      linkedSystemIntakes(state: OPEN) {
+        id
+      }
     }
   }
 `;
diff --git a/src/queries/GetMyCedarSystemsQuery.ts b/src/queries/GetMyCedarSystemsQuery.ts
@@ -14,6 +14,12 @@ export default gql`
       systemMaintainerOrgComp
       isBookmarked
       atoExpirationDate
+      linkedSystemIntakes(state: OPEN) {
+        id
+      }
+      linkedTrbRequests(state: OPEN) {
+        id
+      }
     }
   }
 `;
diff --git a/src/queries/types/GetCedarSystems.ts b/src/queries/types/GetCedarSystems.ts
@@ -7,6 +7,16 @@
 // GraphQL query operation: GetCedarSystems
 // ====================================================
 
+export interface GetCedarSystems_cedarSystems_linkedTrbRequests {
+  __typename: "TRBRequest";
+  id: UUID;
+}
+
+export interface GetCedarSystems_cedarSystems_linkedSystemIntakes {
+  __typename: "SystemIntake";
+  id: UUID;
+}
+
 export interface GetCedarSystems_cedarSystems {
   __typename: "CedarSystem";
   id: string;
@@ -20,6 +30,8 @@ export interface GetCedarSystems_cedarSystems {
   systemMaintainerOrgComp: string | null;
   isBookmarked: boolean;
   atoExpirationDate: Time | null;
+  linkedTrbRequests: GetCedarSystems_cedarSystems_linkedTrbRequests[];
+  linkedSystemIntakes: GetCedarSystems_cedarSystems_linkedSystemIntakes[];
 }
 
 export interface GetCedarSystems {

diff --git a/src/queries/types/GetMyCedarSystems.ts b/src/queries/types/GetMyCedarSystems.ts
@@ -7,6 +7,16 @@
 // GraphQL query operation: GetMyCedarSystems
 // ====================================================
 
+export interface GetMyCedarSystems_myCedarSystems_linkedSystemIntakes {
+  __typename: "SystemIntake";
+  id: UUID;
+}
+
+export interface GetMyCedarSystems_myCedarSystems_linkedTrbRequests {
+  __typename: "TRBRequest";
+  id: UUID;
+}
+
 export interface GetMyCedarSystems_myCedarSystems {
   __typename: "CedarSystem";
   id: string;
@@ -20,6 +30,8 @@ export interface GetMyCedarSystems_myCedarSystems {
   systemMaintainerOrgComp: string | null;
   isBookmarked: boolean;
   atoExpirationDate: Time | null;
+  linkedSystemIntakes: GetMyCedarSystems_myCedarSystems_linkedSystemIntakes[];
+  linkedTrbRequests: GetMyCedarSystems_myCedarSystems_linkedTrbRequests[];
 }
 
 export interface GetMyCedarSystems {

diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
@@ -74,11 +74,7 @@ const Home = () => {
                 </p>
 
                 {/* TODO: figure out why need to pass empty params here when they are optional with defaults */}
-                <SystemsListTable
-                  systems={[]}
-                  isMySystems
-                  defaultPageSize={5}
-                />
+                <SystemsListTable systems={[]} isHomePage defaultPageSize={5} />
               </Grid>
 
               <hr className="margin-bottom-3 margin-top-4" aria-hidden />

diff --git a/src/views/SystemList/Table.tsx b/src/views/SystemList/Table.tsx
@@ -60,13 +60,13 @@ export type SystemTableType =
 type TableProps = {
   systems?: CedarSystem[];
   defaultPageSize?: number;
-  isMySystems?: boolean;
+  isHomePage?: boolean;
 };
 
 export const Table = ({
   systems = [],
   defaultPageSize = 10,
-  isMySystems
+  isHomePage
 }: TableProps) => {
   const { t } = useTranslation('systemProfile');
 
@@ -92,14 +92,14 @@ export const Table = ({
   // Sets the systemTableType state to the query param, defaults to all-systems if no param present
   // If the query param changes, update the component state
   useEffect(() => {
-    if (!tableType && !isMySystems) {
+    if (!tableType && !isHomePage) {
       history.replace({
         search: 'table-type=all-systems'
       });
     }
 
-    setSystemTableType(isMySystems ? 'my-systems' : tableType);
-  }, [tableType, isMySystems, history]);
+    setSystemTableType(isHomePage ? 'my-systems' : tableType);
+  }, [tableType, isHomePage, history]);
 
   // On button group toggle, change query param
   const switchTableType = (type: SystemTableType) => {
@@ -147,7 +147,7 @@ export const Table = ({
 
     const cols: Column<CedarSystem>[] = [];
 
-    if (!isMySystems) {
+    if (!isHomePage) {
       cols.push({
         Header: <IconBookmark />,
         accessor: 'id',
@@ -190,7 +190,7 @@ export const Table = ({
       }
     });
 
-    if (!isMySystems) {
+    if (!isHomePage) {
       cols.push({
         Header: t<string>('systemTable.header.systemOwner'),
         accessor: 'businessOwnerOrg',
@@ -219,27 +219,20 @@ export const Table = ({
           : -1
     });
 
-    /*
-    {
-      Header: t<string>('systemTable.header.systemStatus'),
-      accessor: 'status',
-      id: 'systemStatus',
-      disableGlobalFilter: true,
-      Cell: ({ row }: { row: Row<CedarSystem> }) => (
-        <div>
-          <SystemHealthIcon
-            status={mapCedarStatusToIcon(row.original.status)}
-            size="medium"
-            className="margin-right-1"
-          />
-          <span>{row.original.status}</span>
-        </div>
-      )
+    if (isHomePage) {
+      cols.push({
+        Header: t<string>('systemTable.header.openRequests'),
+        accessor: (system: CedarSystem) => {
+          return (
+            system.linkedTrbRequests.length + system.linkedSystemIntakes.length
+          );
+        },
+        id: 'openRequests'
+      });
     }
-    */
 
     return cols;
-  }, [t, systems, systemTableType, createMutate, deleteMutate, isMySystems]);
+  }, [t, systems, systemTableType, createMutate, deleteMutate, isHomePage]);
 
   const {
     getTableProps,
@@ -291,7 +284,7 @@ export const Table = ({
   rows.map(row => prepareRow(row));
 
   if (
-    (isMySystems || tableType === 'my-systems') &&
+    (isHomePage || tableType === 'my-systems') &&
     loading &&
     !mySystems?.myCedarSystems
   ) {
@@ -300,7 +293,7 @@ export const Table = ({
 
   return (
     <div className="margin-bottom-6">
-      {!isMySystems && (
+      {!isHomePage && (
         <>
           <p className="text-bold margin-0 margin-top-3">
             {t('systemTable.view')}
@@ -437,13 +430,13 @@ export const Table = ({
 
       {/* Alerts to show if there is no system/data */}
       {filteredSystems.length === 0 &&
-        (tableType === 'my-systems' || isMySystems) && (
+        (tableType === 'my-systems' || isHomePage) && (
           <Alert
             type="info"
             heading={t('systemTable.noMySystem.header')}
             className="margin-top-5"
           >
-            {isMySystems ? (
+            {isHomePage ? (
               <Trans
                 i18nKey="systemProfile:systemTable.noMySystem.description"
                 components={{
@@ -469,8 +462,8 @@ export const Table = ({
           </Alert>
         )}
 
-      {/* Alery to show to direct to Systems tab when viewing My sytems */}
-      {filteredSystems.length > 0 && isMySystems && (
+      {/* Alert to show to direct to Systems tab when viewing My sytems */}
+      {filteredSystems.length > 0 && isHomePage && (
         <Alert
           type="info"
           heading={t('systemProfile:systemTable:dontSeeSystem.header')}

diff --git a/src/views/SystemProfile/mockSystemData.ts b/src/views/SystemProfile/mockSystemData.ts
@@ -133,7 +133,9 @@ export const mockSystemInfo: CedarSystemProps[] = [
     feugiat laoreet quis. Sapien, sagittis, consectetur adipiscing elit.
     Sollicitudin donec aliquam dui sed odio porta.`,
     isBookmarked: false,
-    atoExpirationDate: null
+    atoExpirationDate: null,
+    linkedTrbRequests: [],
+    linkedSystemIntakes: []
   },
   {
     __typename: 'CedarSystem',
@@ -153,7 +155,9 @@ export const mockSystemInfo: CedarSystemProps[] = [
     feugiat laoreet quis. Sapien, sagittis, consectetur adipiscing elit.
     Sollicitudin donec aliquam dui sed odio porta.`,
     isBookmarked: false,
-    atoExpirationDate: null
+    atoExpirationDate: null,
+    linkedTrbRequests: [],
+    linkedSystemIntakes: []
   },
   {
     __typename: 'CedarSystem',
@@ -173,7 +177,9 @@ export const mockSystemInfo: CedarSystemProps[] = [
     feugiat laoreet quis. Sapien, sagittis, consectetur adipiscing elit.
     Sollicitudin donec aliquam dui sed odio porta.`,
     isBookmarked: false,
-    atoExpirationDate: null
+    atoExpirationDate: null,
+    linkedTrbRequests: [],
+    linkedSystemIntakes: []
   },
   {
     __typename: 'CedarSystem',
@@ -194,26 +200,9 @@ export const mockSystemInfo: CedarSystemProps[] = [
     feugiat laoreet quis. Sapien, sagittis, consectetur adipiscing elit.
     Sollicitudin donec aliquam dui sed odio porta.`,
     isBookmarked: false,
-    atoExpirationDate: null
-  }
-];
-
-export const products: tempProductsProp[] = [
-  {
-    id: '1',
-    name: 'Drupal',
-    manufacturer: 'Drupal Association',
-    type: 'Enterprise Content Management (ECM)',
-    version: '9.3',
-    edition: 'Enterprise'
-  },
-  {
-    id: '2',
-    name: 'Kong',
-    manufacturer: 'Kong Enterprise',
-    type: 'Software Development',
-    tags: ['API Gateway'],
-    version: '2.1'
+    atoExpirationDate: null,
+    linkedTrbRequests: [],
+    linkedSystemIntakes: []
   }
 ];