Fixes 4488: Add upload custom content modal

src/Pages/Repositories/ContentListTable/ContentListTable.tsx

@@ -51,7 +51,7 @@ import ConditionalTooltip from 'components/ConditionalTooltip/ConditionalTooltip
 import dayjs from 'dayjs';
 import ChangedArrows from './components/SnapshotListModal/components/ChangedArrows';
 import { Outlet, useNavigate, useOutletContext, useSearchParams } from 'react-router-dom';
-import { ADD_ROUTE, DELETE_ROUTE, EDIT_ROUTE } from 'Routes/constants';
+import { ADD_ROUTE, DELETE_ROUTE, EDIT_ROUTE, UPLOAD_ROUTE } from 'Routes/constants';
 import UploadRepositoryLabel from 'components/UploadRepositoryLabel/UploadRepositoryLabel';
 
 const useStyles = createUseStyles({
@@ -317,9 +317,20 @@ const ContentListTable = () => {
               isDisabled: actionTakingPlace || rowData?.status === 'Pending',
               title: 'Edit',
               onClick: () => {
-                navigate(`${EDIT_ROUTE}?repoUUIDS=${rowData.uuid}`);
+                navigate(`${rowData.uuid}/${EDIT_ROUTE}`);
               },
             },
+            ...(rowData.origin === ContentOrigin.UPLOAD
+              ? [
+                  {
+                    isDisabled: actionTakingPlace || rowData?.status === 'Pending',
+                    title: 'Upload content',
+                    onClick: () => {
+                      navigate(`${rowData.uuid}/${UPLOAD_ROUTE}`);
+                    },
+                  },
+                ]
+              : []),
             ...(features?.snapshots?.accessible
               ? [
                   {
@@ -444,19 +455,22 @@ const ContentListTable = () => {
 
   return (
     <>
-      <Outlet
-        context={{
-          clearCheckedRepositories,
-          deletionContext: {
-            page,
-            perPage,
-            filterData,
-            contentOrigin,
-            sortString: sortString,
-            checkedRepositories,
-          },
-        }}
-      />
+      {/* This ensures that the modal doesn't temporarily flash on initial render */}
+      <Hide hide={isLoading}>
+        <Outlet
+          context={{
+            clearCheckedRepositories,
+            deletionContext: {
+              page,
+              perPage,
+              filterData,
+              contentOrigin,
+              sortString: sortString,
+              checkedRepositories,
+            },
+          }}
+        />
+      </Hide>
       <Grid
         data-ouia-component-id='content_list_page'
         className={countIsZero ? classes.mainContainer100Height : classes.mainContainer}

src/Pages/Repositories/ContentListTable/components/AddContent/AddContent.tsx

@@ -48,7 +48,7 @@ import ConditionalTooltip from 'components/ConditionalTooltip/ConditionalTooltip
 import { isEmpty, isEqual } from 'lodash';
 import useDeepCompareEffect from 'Hooks/useDeepCompareEffect';
 import useDebounce from 'Hooks/useDebounce';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useContentListOutletContext } from '../../ContentListTable';
 import useRootPath from 'Hooks/useRootPath';
 import CustomHelperText from 'components/CustomHelperText/CustomHelperText';
@@ -92,18 +92,14 @@ interface Props {
 const AddContent = ({ isEdit = false }: Props) => {
   const classes = useStyles();
   const queryClient = useQueryClient();
+  const { repoUUID: uuid } = useParams();
   const navigate = useNavigate();
   const rootPath = useRootPath();
-  const { search } = useLocation();
   const { isProd } = useChrome();
   const isInProd = useMemo(() => isProd(), []);
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const uuids = useMemo(
-    () => new URLSearchParams(search).get('repoUUIDS')?.split(',') || [],
-    [search],
-  );
-  const { data, isLoading: isLoadingInitialContent, isSuccess } = useFetchContent(uuids, isEdit);
+  const { data, isLoading: isLoadingInitialContent, isSuccess } = useFetchContent(uuid!, isEdit);
 
   const [values, setValues] = useState(getDefaultValues(isInProd ? { snapshot: false } : {}));
   const [changeVerified, setChangeVerified] = useState(false);

src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx

@@ -93,7 +93,7 @@ export default function SnapshotListModal() {
     data = { data: [], meta: { count: 0, limit: 20, offset: 0 } },
   } = useGetSnapshotList(uuid as string, page, perPage, sortString);
 
-  const { data: contentData } = useFetchContent([uuid]);
+  const { data: contentData } = useFetchContent(uuid);
 
   useEffect(() => {
     if (isError) {

src/Pages/Repositories/ContentListTable/components/UploadContent/UploadContent.tsx

@@ -0,0 +1,76 @@
+import { Bullseye, Button, Modal, ModalVariant, Stack, StackItem } from '@patternfly/react-core';
+import { global_Color_200 } from '@patternfly/react-tokens';
+import { createUseStyles } from 'react-jss';
+import { useNavigate, useParams } from 'react-router-dom';
+import useRootPath from 'Hooks/useRootPath';
+import { REPOSITORIES_ROUTE } from 'Routes/constants';
+import FileUploader from './compontents/FileUploader';
+import { useState } from 'react';
+import { useAddUploadsQuery } from 'services/Content/ContentQueries';
+
+const useStyles = createUseStyles({
+  description: {
+    paddingTop: '12px', // 4px on the title bottom padding makes this the "standard" 16 total padding
+    color: global_Color_200.value,
+  },
+  saveButton: {
+    marginRight: '36px',
+    transition: 'unset!important',
+  },
+});
+
+const UploadContent = () => {
+  const classes = useStyles();
+  const { repoUUID: uuid } = useParams();
+  const [fileUUIDs, setFileUUIDs] = useState<{ sha256: string; uuid: string }[]>([]);
+  const rootPath = useRootPath();
+  const navigate = useNavigate();
+  const onClose = () => navigate(`${rootPath}/${REPOSITORIES_ROUTE}`);
+
+  const { mutateAsync: uploadItems, isLoading } = useAddUploadsQuery({
+    repoUUID: uuid!,
+    uploads: fileUUIDs,
+  });
+
+  return (
+    <Modal
+      position='top'
+      variant={ModalVariant.medium}
+      title='Upload content'
+      ouiaId='upload_content_modal'
+      description={
+        <p className={classes.description}>
+          Use the form below to upload content to your repository.
+        </p>
+      }
+      isOpen={!!uuid}
+      onClose={onClose}
+      footer={
+        <Stack>
+          <StackItem>
+            <Button
+              className={classes.saveButton}
+              key='confirm'
+              ouiaId='modal_save'
+              variant='primary'
+              isLoading={isLoading}
+              isDisabled={!fileUUIDs.length}
+              onClick={() => uploadItems().then(onClose)}
+            >
+              Upload now
+            </Button>
+            <Button key='cancel' variant='link' onClick={onClose} ouiaId='modal_cancel'>
+              Cancel
+            </Button>
+          </StackItem>
+        </Stack>
+      }
+    >
+      <Bullseye>
+        <FileUploader isLoading={isLoading} setFileUUIDs={setFileUUIDs} />
+      </Bullseye>
+    </Modal>
+  );
+};
+
+export default UploadContent;