Add Group Secrets UI

CHANGELOG.md

@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 
 View TapisUI at https://tacc.tapis.io.
+
 - Feel free to make use of your preferred tenant.
 
 Please find documentation here:
@@ -16,6 +17,7 @@ https://tapis-project.github.io/live-docs
 Release of TapisUI with great work from Nathan Freeman, Alex Fields, SGX3 interns, Dhanny, and more.
 
 ### New features:
+
 - Moving to Vite multi-package monorepo setup. Leaving create-react-app framework as that's deprecated.
 - Updating to latest React 18 alongside updates to several major libraries.
 - Reworked development flows with new `npm run` methods. `npm run dev`, `npm run init-project`, and more.
@@ -33,4 +35,5 @@ Release of TapisUI with great work from Nathan Freeman, Alex Fields, SGX3 intern
 - Initial versioned release.
 
 ### Bug fixes:
+
 - No change.

src/app/Workflows/Groups/Group/Group.module.scss

@@ -8,7 +8,7 @@
   padding: 2px;
 }
 
-.users-container {
+.objects-container {
   margin-top: 16px;
   border-radius: 3px;
   border: 1px solid #cccccc;

src/app/Workflows/Groups/Group/Group.tsx

@@ -1,8 +1,12 @@
 import React, { useCallback } from 'react';
 import { Workflows } from '@tapis/tapis-typescript';
-import { SectionMessage, Icon, SectionHeader } from '@tapis/tapisui-common';
-import { QueryWrapper } from '@tapis/tapisui-common';
-import { PipelineCardList, Toolbar } from '../../_components';
+import {
+  SectionMessage,
+  Icon,
+  SectionHeader,
+  QueryWrapper,
+} from '@tapis/tapisui-common';
+import { PipelineCardList, GroupSecretList, Toolbar } from '../../_components';
 import { useTapisConfig } from '@tapis/tapisui-hooks';
 import styles from './Group.module.scss';
 import { Button, Spinner } from 'reactstrap';
@@ -71,14 +75,17 @@ const Group: React.FC<UsersProps> = ({ groupId }) => {
   return (
     <div>
       <PipelineCardList groupId={groupId} />
+      <div className={styles['container']}>
+        <GroupSecretList groupId={groupId} />
+      </div>
       <div className={styles['container']}>
         <SectionHeader>
           <span>
             Users <span className={styles['count']}>{users.length}</span>
           </span>
           <Toolbar groupId={groupId} buttons={['addgroupuser']} />
         </SectionHeader>
-        <div className={styles['users-container']}>
+        <div className={styles['objects-container']}>
           <QueryWrapper isLoading={isLoading} error={error}>
             <div id="users">
               {users.length ? (

src/app/Workflows/_components/GroupSecretList/GroupSecretList.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { Workflows } from '@tapis/tapis-typescript';
+import {
+  SectionMessage,
+  SectionHeader,
+  QueryWrapper,
+} from '@tapis/tapisui-common';
+import { Toolbar } from '../../_components';
+import { Workflows as Hooks } from '@tapis/tapisui-hooks';
+import { Delete, Key } from '@mui/icons-material';
+import { DataGrid, gridClasses } from '@mui/x-data-grid';
+import { Alert, AlertTitle } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { GroupSecretsHelp } from 'app/_components/Help';
+
+type GroupSecretListProps = {
+  groupId: string;
+};
+
+const GroupSecretList: React.FC<GroupSecretListProps> = ({ groupId }) => {
+  const {
+    data: groupSecretData,
+    isLoading: groupSecretsIsLoading,
+    error: groupSecretsError,
+  } = Hooks.GroupSecrets.useList({ groupId });
+  const groupSecrets: Array<Workflows.GroupSecret> =
+    groupSecretData?.result ?? [];
+  const {
+    remove,
+    invalidate,
+    isLoading: isDeleting,
+    error: deleteError,
+    isError: isDeleteError,
+    reset,
+  } = Hooks.GroupSecrets.useDelete();
+  return (
+    <div>
+      <SectionHeader>
+        <span>
+          <span>
+            <Key fontSize="large" /> Group Secrets [{groupSecrets.length}]
+          </span>
+          <span style={{ marginLeft: '16px' }}>
+            <GroupSecretsHelp />
+          </span>
+        </span>
+        <Toolbar groupId={groupId} buttons={['addgroupsecret']} />
+      </SectionHeader>
+      {isDeleteError && (
+        <Alert
+          severity="error"
+          style={{ marginTop: '8px' }}
+          onClose={() => {
+            reset();
+          }}
+        >
+          <AlertTitle>Error</AlertTitle>
+          {deleteError && deleteError.message}
+        </Alert>
+      )}
+      <div>
+        <QueryWrapper
+          isLoading={groupSecretsIsLoading}
+          error={groupSecretsError}
+        >
+          <div id="group-secrets">
+            {groupSecrets.length ? (
+              <div style={{ width: '100%' }}>
+                <DataGrid
+                  getRowHeight={() => 'auto'}
+                  rows={(groupSecrets || []).map((groupSecret) => {
+                    return {
+                      id: groupSecret.id,
+                      source: groupSecret.secret!.id,
+                      description: groupSecret.secret!.description,
+                      owner: groupSecret.secret!.owner,
+                    };
+                  })}
+                  sx={{
+                    [`& .${gridClasses.cell}`]: {
+                      py: 1,
+                    },
+                    '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
+                      borderRight: '1px solid #f0f0f0',
+                    },
+                  }}
+                  columns={[
+                    { field: 'id', headerName: 'Group Secret ID', width: 200 },
+                    {
+                      field: 'source',
+                      headerName: 'Group Secret Source',
+                      width: 300,
+                      hideSortIcons: true,
+                      sortable: false,
+                    },
+                    {
+                      field: 'description',
+                      headerName: 'Description',
+                      width: 300,
+                      hideSortIcons: true,
+                      disableColumnMenu: true,
+                      sortable: false,
+                    },
+                    {
+                      field: 'owner',
+                      headerName: 'Owner',
+                      width: 300,
+                      disableColumnMenu: true,
+                    },
+                    {
+                      field: 'actions',
+                      type: 'actions',
+                      hideSortIcons: true,
+                      disableColumnMenu: true,
+                      renderCell: (params) => {
+                        return (
+                          <LoadingButton
+                            disabled={isDeleting}
+                            loading={isDeleting}
+                            onClick={() => {
+                              remove(
+                                {
+                                  groupId,
+                                  groupSecretId: params.row.id!,
+                                },
+                                {
+                                  onSuccess: () => {
+                                    invalidate();
+                                  },
+                                }
+                              );
+                            }}
+                          >
+                            <Delete color="error" />
+                          </LoadingButton>
+                        );
+                      },
+                    },
+                  ]}
+                  autosizeOptions={{
+                    includeOutliers: false,
+                  }}
+                  rowSelection={false}
+                  initialState={{
+                    pagination: {
+                      paginationModel: { page: 0, pageSize: 5 },
+                    },
+                  }}
+                  pageSizeOptions={[5, 10]}
+                />
+              </div>
+            ) : (
+              <SectionMessage type="info">No group secrets</SectionMessage>
+            )}
+          </div>
+        </QueryWrapper>
+      </div>
+    </div>
+  );
+};
+
+export default GroupSecretList;

src/app/Workflows/_components/GroupSecretList/index.ts

@@ -0,0 +1 @@
+export { default as GroupSecretList } from './GroupSecretList';

src/app/Workflows/_components/Modals/AddGroupSecretModal/AddGroupSecretModal.module.scss

@@ -0,0 +1,6 @@
+.form {
+  width: 100%;
+  padding: 16px;
+  display: grid;
+  gap: 16px;
+}