fix(bulk-import): bulk import fixes (#2156)

fix(bulk-import): bulk import bug fixes
janus-idp · Sep 12, 2024 · eb1b634 · eb1b634
1 parent 22e107e
commit eb1b634
Show file tree

Hide file tree

Showing 22 changed files with 708 additions and 438 deletions.
diff --git a/plugins/bulk-import/README.md b/plugins/bulk-import/README.md
@@ -10,8 +10,8 @@ This plugin allows bulk import of multiple catalog entities into the catalog.
 
 The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
 
-- follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
-- add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
+- Follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
+- Add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
 
 #### Prerequisites
 
@@ -23,29 +23,6 @@ The sections below are relevant for static plugins. If the plugin is expected to
 
 **NOTE**
 
-- When RBAC permission framework is enabled, for non-admin users wanting to access bulk import UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file:
-
-```CSV
-p, role:default/team_a, catalog-entity.read, read, allow
-p, role:default/team_a, catalog-entity.create, create, allow
-g, user:default/<login-id/user-name>, role:default/team_a
-```
-
-#### Installing as a dynamic plugin?
-
-The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
-
-- follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
-- add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
-
-#### Prerequisites
-
-Follow the Bulk import backend plugin [README](https://github.com/janus-idp/backstage-plugins/blob/main/plugins/bulk-import-backend/README.md) to integrate bulk import in your Backstage instance.
-
----
-
-**NOTE**
-
 - When RBAC permission framework is enabled, for non-admin users to access bulk import UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file:
 
 ```CSV

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -39,6 +39,7 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     borderTopStyle: 'groove',
     border: theme.palette.divider,
+    zIndex: 1,
   },
 }));
 

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
@@ -47,6 +47,7 @@ const useStyles = makeStyles(() => ({
 export const AddRepositoriesPage = () => {
   const theme = useTheme();
   const classes = useStyles();
+  const bulkImportApi = useApi(bulkImportApiRef);
   const navigate = useNavigate();
   const [generalSubmitError, setGeneralSubmitError] = React.useState<{
     message: string;
@@ -59,7 +60,6 @@ export const AddRepositoriesPage = () => {
     approvalTool: ApprovalTool.Git,
   };
 
-  const bulkImportApi = useApi(bulkImportApiRef);
   const bulkImportViewPermissionResult = usePermission({
     permission: bulkImportPermission,
     resourceRef: bulkImportPermission.resourceType,
@@ -102,7 +102,7 @@ export const AddRepositoriesPage = () => {
             formikHelpers.setStatus(createJobErrors);
             formikHelpers.setSubmitting(false);
           } else {
-            navigate(`../bulk-import/repositories`);
+            navigate(`..`);
           }
         }
       }
@@ -115,87 +115,94 @@ export const AddRepositoriesPage = () => {
     }
   };
 
-  return (
-    <Page themeId="tool">
-      <Header title="Add repositories" type="Bulk import" typeLink=".." />
-      <Content noPadding>
-        {bulkImportViewPermissionResult.loading && <Progress />}
-        {bulkImportViewPermissionResult.allowed ? (
-          <>
-            <div style={{ padding: '24px' }}>
-              <Accordion defaultExpanded>
-                <AccordionSummary
-                  expandIcon={<ExpandMoreIcon />}
-                  id="add-repository-summary"
-                >
-                  <Typography variant="h5">
-                    Add repositories to Red Hat Developer Hub in 4 steps
-                  </Typography>
-                </AccordionSummary>
-                <AccordionDetails className={classes.accordionDetails}>
-                  {/* <Illustrations
+  const showContent = () => {
+    if (bulkImportViewPermissionResult.loading) {
+      return <Progress />;
+    }
+    if (bulkImportViewPermissionResult.allowed) {
+      return (
+        <>
+          <div style={{ padding: '24px' }}>
+            <Accordion defaultExpanded>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                id="add-repository-summary"
+              >
+                <Typography variant="h5">
+                  Add repositories to Red Hat Developer Hub in 4 steps
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.accordionDetails}>
+                {/* <Illustrations
                 iconClassname={
                   theme.palette.type === 'dark'
                     ? 'icon-approval-tool-white'
                     : 'icon-approval-tool-black'
                 }
                 iconText="Choose approval tool (git/ServiceNow) for PR/ticket creation"
               /> */}
-                  <Illustrations
-                    iconClassname={
-                      theme.palette.type === 'dark'
-                        ? 'icon-choose-repositories-white'
-                        : 'icon-choose-repositories-black'
-                    }
-                    iconText="Choose repositories you want to add"
-                  />
-                  <Illustrations
-                    iconClassname={
-                      theme.palette.type === 'dark'
-                        ? 'icon-generate-cataloginfo-white'
-                        : 'icon-generate-cataloginfo-black'
-                    }
-                    iconText="Generate a catalog-info.yaml file for each repository"
-                  />
-                  <Illustrations
-                    iconClassname={
-                      theme.palette.type === 'dark'
-                        ? 'icon-edit-pullrequest-white'
-                        : 'icon-edit-pullrequest-black'
-                    }
-                    iconText="Edit the pull request details if needed"
-                  />
-                  <Illustrations
-                    iconClassname={
-                      theme.palette.type === 'dark'
-                        ? 'icon-track-status-white'
-                        : 'icon-track-status-black'
-                    }
-                    iconText="Track the approval status"
-                  />
-                </AccordionDetails>
-              </Accordion>
-            </div>
-            <DrawerContextProvider>
-              <Formik
-                initialValues={initialValues}
-                enableReinitialize
-                onSubmit={handleSubmit}
-              >
-                <AddRepositoriesForm error={generalSubmitError} />
-              </Formik>
-            </DrawerContextProvider>
-          </>
-        ) : (
-          <div style={{ padding: '24px' }}>
-            <Alert severity="warning" data-testid="no-permission-alert">
-              <AlertTitle>Permission required</AlertTitle>
-              To add repositories, contact your administrator to give you the
-              `bulk.import` permission.
-            </Alert>
+                <Illustrations
+                  iconClassname={
+                    theme.palette.type === 'dark'
+                      ? 'icon-choose-repositories-white'
+                      : 'icon-choose-repositories-black'
+                  }
+                  iconText="Choose repositories you want to add"
+                />
+                <Illustrations
+                  iconClassname={
+                    theme.palette.type === 'dark'
+                      ? 'icon-generate-cataloginfo-white'
+                      : 'icon-generate-cataloginfo-black'
+                  }
+                  iconText="Generate a catalog-info.yaml file for each repository"
+                />
+                <Illustrations
+                  iconClassname={
+                    theme.palette.type === 'dark'
+                      ? 'icon-edit-pullrequest-white'
+                      : 'icon-edit-pullrequest-black'
+                  }
+                  iconText="Edit the pull request details if needed"
+                />
+                <Illustrations
+                  iconClassname={
+                    theme.palette.type === 'dark'
+                      ? 'icon-track-status-white'
+                      : 'icon-track-status-black'
+                  }
+                  iconText="Track the approval status"
+                />
+              </AccordionDetails>
+            </Accordion>
           </div>
-        )}
-      </Content>
+          <DrawerContextProvider>
+            <Formik
+              initialValues={initialValues}
+              enableReinitialize
+              onSubmit={handleSubmit}
+            >
+              <AddRepositoriesForm error={generalSubmitError} />
+            </Formik>
+          </DrawerContextProvider>
+        </>
+      );
+    }
+    return (
+      <div style={{ padding: '24px' }}>
+        <Alert severity="warning" data-testid="no-permission-alert">
+          <AlertTitle>Permission required</AlertTitle>
+          To add repositories, contact your administrator to give you the
+          `bulk.import` permission.
+        </Alert>
+      </div>
+    );
+  };
+
+  return (
+    <Page themeId="tool">
+      <Header title="Add repositories" type="Bulk import" typeLink=".." />
+      <Content noPadding>{showContent()}</Content>
     </Page>
   );
 };
diff --git a/plugins/bulk-import/src/components/BulkImportPage.tsx b/plugins/bulk-import/src/components/BulkImportPage.tsx
@@ -33,32 +33,39 @@ export const BulkImportPage = () => {
     resourceRef: bulkImportPermission.resourceType,
   });
 
+  const showContent = () => {
+    if (bulkImportViewPermissionResult.loading) {
+      return <Progress />;
+    }
+    if (bulkImportViewPermissionResult.allowed) {
+      return (
+        <Formik
+          initialValues={initialValues}
+          enableReinitialize
+          onSubmit={async (_values: AddRepositoriesFormValues) => {}}
+        >
+          <FormControl fullWidth>
+            <RepositoriesList />
+          </FormControl>
+        </Formik>
+      );
+    }
+    return (
+      <Alert severity="warning" data-testid="no-permission-alert">
+        <AlertTitle>Permission required</AlertTitle>
+        To view the added repositories, contact your administrator to give you
+        the `bulk.import` permission.
+      </Alert>
+    );
+  };
+
   return (
     <Page themeId="tool">
       <Header title="Bulk import" />
       <DrawerContextProvider>
         <DeleteDialogContextProvider>
           <Content noPadding>
-            <div style={{ padding: '24px' }}>
-              {bulkImportViewPermissionResult.loading && <Progress />}
-              {bulkImportViewPermissionResult.allowed ? (
-                <Formik
-                  initialValues={initialValues}
-                  enableReinitialize
-                  onSubmit={async (_values: AddRepositoriesFormValues) => {}}
-                >
-                  <FormControl fullWidth>
-                    <RepositoriesList />
-                  </FormControl>
-                </Formik>
-              ) : (
-                <Alert severity="warning" data-testid="no-permission-alert">
-                  <AlertTitle>Permission required</AlertTitle>
-                  To view the added repositories, contact your administrator to
-                  give you the `bulk.import` permission.
-                </Alert>
-              )}
-            </div>
+            <div style={{ padding: '24px' }}>{showContent()}</div>
           </Content>
         </DeleteDialogContextProvider>
       </DrawerContextProvider>

diff --git a/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx b/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx
@@ -55,7 +55,7 @@ const KeyValueTextField: React.FC<KeyValueTextFieldProps> = ({
     return {
       ...formErrors,
       [repoId]: {
-        ...formErrors[repoId],
+        ...(formErrors?.[repoId] || {}),
         [fieldName]: validationError,
       },
     };

diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx
@@ -60,7 +60,7 @@ export const PreviewFile = ({ data }: { data: AddRepositoryData }) => {
           <Link
             to={errorMessage.showRepositoryLink ? data.repoUrl || '' : ''}
             onClick={() =>
-              errorMessage.showRepositoryLink ? null : setOpenDrawer(true)
+              errorMessage.showRepositoryLink ? null : openDrawer(data)
             }
             data-testid="edit-pull-request"
           >