Allow adding a data store at the top level (#1004)

* Show tiles at the top level

* Add a data store from the top level

* Pre pr cleanup

spiffworkflow-frontend/src/components/DataStoreListTiles.tsx

@@ -41,10 +41,9 @@ export default function DataStoreListTiles({
       if (defaultDataStores) {
         setDataStores(defaultDataStores);
       } else {
-        let queryParams = '?per_page=1000';
-        if (processGroup) {
-          queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
-        }
+        const queryParams = `?per_page=1000&process_group_identifier=${
+          processGroup?.id ?? ''
+        }`;
         HttpService.makeCallToBackend({
           path: `${targetUris.dataStoreListPath}${queryParams}`,
           successCallback: setDataStores,

spiffworkflow-frontend/src/routes/ProcessGroupList.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Button,
+  Stack,
   // @ts-ignore
 } from '@carbon/react';
 import { Can } from '@casl/react';
@@ -13,6 +14,7 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import ProcessModelSearch from '../components/ProcessModelSearch';
 import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
+import DataStoreListTiles from '../components/DataStoreListTiles';
 
 export default function ProcessGroupList() {
   const navigate = useNavigate();
@@ -23,6 +25,7 @@ export default function ProcessGroupList() {
 
   const { targetUris } = useUriListForPermissions();
   const permissionRequestData: PermissionsToCheck = {
+    [targetUris.dataStoreListPath]: ['POST'],
     [targetUris.processGroupListPath]: ['POST'],
   };
   const { ability } = usePermissionFetcher(permissionRequestData);
@@ -69,17 +72,32 @@ export default function ProcessGroupList() {
     return (
       <>
         <ProcessBreadcrumb hotCrumbs={[['Process Groups']]} />
-        <Can I="POST" a={targetUris.processGroupListPath} ability={ability}>
-          <Button kind="secondary" href="/process-groups/new">
-            Add a process group
-          </Button>
-          <br />
-          <br />
-        </Can>
+        <Stack orientation="horizontal" gap={3}>
+          <Can I="POST" a={targetUris.processGroupListPath} ability={ability}>
+            <Button kind="secondary" href="/process-groups/new">
+              Add a process group
+            </Button>
+          </Can>
+          <Can I="POST" a={targetUris.dataStoreListPath} ability={ability}>
+            <Button href="/data-stores/new?parentGroupId=">
+              Add a data store
+            </Button>
+          </Can>
+        </Stack>
+        <br />
         <br />
         {processModelSearchArea()}
         <br />
         <ProcessGroupListTiles showNoItemsDisplayText />
+        <br />
+        <br />
+        <DataStoreListTiles
+          headerElement={<h2 className="clear-left">Data Stores</h2>}
+          userCanCreateDataStores={ability.can(
+            'POST',
+            targetUris.dataStoreListPath
+          )}
+        />
       </>
     );
   }