fix(bulk-import): bulk import ux improvements

janus-idp · Sep 5, 2024 · b33c045 · b33c045
1 parent acc73d4
commit b33c045
Show file tree

Hide file tree

Showing 41 changed files with 1,300 additions and 871 deletions.
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
@@ -65,7 +65,8 @@ export const AddRepositoriesDrawer = ({
   orgData: AddRepositoryData;
 }) => {
   const classes = useStyles();
-  const { values } = useFormikContext<AddRepositoriesFormValues>();
+  const { values, status, setStatus } =
+    useFormikContext<AddRepositoriesFormValues>();
   const [searchString, setSearchString] = useState<string>('');
   const [selectedRepos, setSelectedRepos] = useState<AddedRepositories>({});
 
@@ -75,6 +76,13 @@ export const AddRepositoriesDrawer = ({
 
   const handleSelectRepoFromDrawer = (selected: AddedRepositories) => {
     onSelect(selected, orgData?.orgName || '');
+    const newStatus = { ...(status?.errors || {}) };
+    Object.keys(newStatus).forEach(s => {
+      if (!Object.keys(selected).find(sel => sel === s)) {
+        delete newStatus[s];
+      }
+    });
+    setStatus({ ...status, errors: newStatus });
     onClose();
   };
 

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
@@ -4,7 +4,12 @@ import { WarningPanel } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
 import FormControl from '@mui/material/FormControl';
+import { useFormikContext } from 'formik';
 
+import { useDrawer } from '@janus-idp/shared-react';
+
+import { AddRepositoriesFormValues, PullRequestPreviewData } from '../../types';
+import { PreviewFileSidebar } from '../PreviewFile/PreviewFile';
 // import HelpIcon from '@mui/icons-material/HelpOutline';
 // import FormControlLabel from '@mui/material/FormControlLabel';
 // import Radio from '@mui/material/Radio';
@@ -47,6 +52,23 @@ export const AddRepositoriesForm = ({
   error: { message: string; title: string } | null;
 }) => {
   const styles = useStyles();
+  const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
+  const { setFieldValue, values } =
+    useFormikContext<AddRepositoriesFormValues>();
+
+  const closeDrawer = () => {
+    setOpenDrawer(false);
+  };
+
+  const handleSave = (pullRequest: PullRequestPreviewData, _event: any) => {
+    Object.keys(pullRequest).forEach(pr => {
+      setFieldValue(
+        `repositories.${pr}.catalogInfoYaml.prTemplate`,
+        pullRequest[pr],
+      );
+    });
+    setOpenDrawer(false);
+  };
 
   return (
     <>
@@ -99,6 +121,15 @@ export const AddRepositoriesForm = ({
         <br />
       </FormControl>
       <AddRepositoriesFormFooter />
+      {openDrawer && (
+        <PreviewFileSidebar
+          open={openDrawer}
+          onClose={closeDrawer}
+          data={drawerData}
+          repositoryType={values.repositoryType}
+          handleSave={handleSave}
+        />
+      )}
     </>
   );
 };
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import { makeStyles } from '@material-ui/core';
-import Button from '@mui/material/Button';
+import { Button, makeStyles } from '@material-ui/core';
 import CircularProgress from '@mui/material/CircularProgress';
 import Tooltip from '@mui/material/Tooltip';
 import { useFormikContext } from 'formik';
@@ -36,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     paddingTop: '24px',
     paddingBottom: '24px',
     paddingLeft: '24px',
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: theme.palette.background.default,
     width: '100%',
     borderTopStyle: 'groove',
     border: theme.palette.divider,
@@ -68,6 +67,7 @@ export const AddRepositoriesFormFooter = () => {
   const submitButton = (
     <Button
       variant="contained"
+      color="primary"
       onClick={handleSubmit as any}
       className={styles.createButton}
       disabled={disableCreate || isSubmitting}

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
@@ -4,15 +4,20 @@ import { useNavigate } from 'react-router-dom';
 import { Content, Header, Page } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-import { useTheme } from '@material-ui/core';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  makeStyles,
+  useTheme,
+} from '@material-ui/core';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import { Formik, FormikHelpers } from 'formik';
 import { get } from 'lodash';
 
+import { DrawerContextProvider } from '@janus-idp/shared-react';
+
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
   AddRepositoriesFormValues,
@@ -27,8 +32,18 @@ import {
 import { AddRepositoriesForm } from './AddRepositoriesForm';
 import { Illustrations } from './Illustrations';
 
+const useStyles = makeStyles(() => ({
+  accordionDetails: {
+    flexDirection: 'row',
+    display: 'flex',
+    justifyContent: 'space-around',
+    overflow: 'auto',
+  },
+}));
+
 export const AddRepositoriesPage = () => {
   const theme = useTheme();
+  const classes = useStyles();
   const navigate = useNavigate();
   const [generalSubmitError, setGeneralSubmitError] = React.useState<{
     message: string;
@@ -107,14 +122,7 @@ export const AddRepositoriesPage = () => {
                 Add repositories to Red Hat Developer Hub in 4 steps
               </Typography>
             </AccordionSummary>
-            <AccordionDetails
-              sx={{
-                flexDirection: 'row',
-                display: 'flex',
-                justifyContent: 'space-around',
-                overflow: 'auto',
-              }}
-            >
+            <AccordionDetails className={classes.accordionDetails}>
               {/* <Illustrations
                 iconClassname={
                   theme.palette.type === 'dark'
@@ -158,13 +166,15 @@ export const AddRepositoriesPage = () => {
             </AccordionDetails>
           </Accordion>
         </div>
-        <Formik
-          initialValues={initialValues}
-          enableReinitialize
-          onSubmit={handleSubmit}
-        >
-          <AddRepositoriesForm error={generalSubmitError} />
-        </Formik>
+        <DrawerContextProvider>
+          <Formik
+            initialValues={initialValues}
+            enableReinitialize
+            onSubmit={handleSubmit}
+          >
+            <AddRepositoriesForm error={generalSubmitError} />
+          </Formik>
+        </DrawerContextProvider>
       </Content>
     </Page>
   );

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 
-import { makeStyles } from '@material-ui/core';
-import Clear from '@mui/icons-material/Clear';
-import Search from '@mui/icons-material/Search';
-import FormControl from '@mui/material/FormControl';
-import IconButton from '@mui/material/IconButton';
-import Input from '@mui/material/Input';
-import InputAdornment from '@mui/material/InputAdornment';
+import {
+  FormControl,
+  IconButton,
+  Input,
+  InputAdornment,
+  makeStyles,
+} from '@material-ui/core';
+import Clear from '@material-ui/icons/Clear';
+import Search from '@material-ui/icons/Search';
 
 const useStyles = makeStyles({
   formControl: {
@@ -37,7 +39,6 @@ export const RepositoriesSearchBar = ({
         autoComplete="off"
         onChange={event => onChange(event.target.value)}
         value={value}
-        size="medium"
         startAdornment={
           <InputAdornment position="start">
             <Search />

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx
@@ -8,37 +8,54 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { useRepositories } from '../../hooks';
 import {
+  mockGetImportJobs,
   mockGetOrganizations,
   mockGetRepositories,
 } from '../../mocks/mockData';
-import { RepositorySelection } from '../../types';
+import { ImportJobStatus, RepositorySelection } from '../../types';
 import { AddRepositoriesTable } from './AddRepositoriesTable';
 
 jest.mock('formik', () => ({
   ...jest.requireActual('formik'),
   useFormikContext: jest.fn(),
 }));
 
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn().mockReturnValue({
+    getImportAction: jest.fn(),
+  }),
+}));
+
 jest.mock('react-use', () => ({
   ...jest.requireActual('react-use'),
   useAsync: jest.fn().mockReturnValue({ loading: false }),
 }));
 
-jest.mock('@backstage/core-plugin-api', () => ({
-  ...jest.requireActual('@backstage/core-plugin-api'),
-  useApi: jest.fn(),
-}));
-
 jest.mock('../../hooks', () => ({
   useRepositories: jest.fn(),
 }));
 
+class MockBulkImportApi {
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
 const mockUseRepositories = useRepositories as jest.MockedFunction<
   typeof useRepositories
 >;
 
+const mockBulkImportApi = new MockBulkImportApi();
+
 describe('Add Repositories Table', () => {
   const mockIdentityApi = {
     getBackstageIdentity: jest.fn(),
@@ -107,7 +124,12 @@ describe('Add Repositories Table', () => {
       error: undefined,
     });
     const { getByText, getByTestId } = render(
-      <TestApiProvider apis={[[identityApiRef, mockIdentityApi]]}>
+      <TestApiProvider
+        apis={[
+          [identityApiRef, mockIdentityApi],
+          [bulkImportApiRef, mockBulkImportApi],
+        ]}
+      >
         <BrowserRouter>
           <AddRepositoriesTable title="Selected repositories" />
         </BrowserRouter>
@@ -139,7 +161,12 @@ describe('Add Repositories Table', () => {
       error: undefined,
     });
     const { getByText, getByTestId } = render(
-      <TestApiProvider apis={[[identityApiRef, mockIdentityApi]]}>
+      <TestApiProvider
+        apis={[
+          [identityApiRef, mockIdentityApi],
+          [bulkImportApiRef, mockBulkImportApi],
+        ]}
+      >
         <BrowserRouter>
           <AddRepositoriesTable title="Selected repositories" />
         </BrowserRouter>

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import { Box, Paper } from '@material-ui/core';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, RepositorySelection } from '../../types';
@@ -15,7 +14,7 @@ export const AddRepositoriesTable = ({ title }: { title: string }) => {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Paper sx={{ width: '100%', mb: 7 }}>
+      <Paper style={{ width: '100%' }}>
         <AddRepositoriesTableToolbar
           title={title}
           setSearchString={setSearchString}

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Toolbar from '@mui/material/Toolbar';
+import { makeStyles, Toolbar } from '@material-ui/core';
+import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import Typography from '@mui/material/Typography';
 import { useFormikContext } from 'formik';
 
@@ -13,6 +12,13 @@ import {
 } from '../../types';
 import { RepositoriesSearchBar } from './AddRepositoriesSearchBar';
 
+const useStyles = makeStyles(() => ({
+  toolbar: {
+    paddingTop: '14px',
+    paddingBottom: '14px',
+  },
+}));
+
 export const AddRepositoriesTableToolbar = ({
   title,
   setSearchString,
@@ -32,6 +38,7 @@ export const AddRepositoriesTableToolbar = ({
     RepositorySelection.Repository,
   );
   const [search, setSearch] = React.useState<string>('');
+  const classes = useStyles();
   const [selectedReposNumber, setSelectedReposNumber] = React.useState(0);
   const handleToggle = (
     _event: React.MouseEvent<HTMLElement>,
@@ -63,14 +70,7 @@ export const AddRepositoriesTableToolbar = ({
   }, [selectedReposFromDrawer, values.repositories, activeOrganization]);
 
   return (
-    <Toolbar
-      sx={{
-        pl: { sm: 2 },
-        pr: { xs: 1, sm: 1, lg: 3, md: 3 },
-        pt: '14px',
-        pb: '14px',
-      }}
-    >
+    <Toolbar className={classes.toolbar}>
       <Typography sx={{ flex: '1 1 100%' }} variant="h5" id={title}>
         {`${title} (${selectedReposNumber})`}
       </Typography>

diff --git a/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx b/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx
@@ -58,7 +58,7 @@ export const CatalogInfoStatus = ({
     (isSelected ||
       (data?.totalReposInOrg && data.totalReposInOrg > 0 && allSelected))
   ) {
-    return <PreviewFile data={data} repositoryType={values.repositoryType} />;
+    return <PreviewFile data={data} />;
   }
 
   if (!isDrawer && isLoading) {
@@ -73,12 +73,7 @@ export const CatalogInfoStatus = ({
     );
   }
 
-  if (
-    (!isDrawer && importStatus) ||
-    (isDrawer &&
-      importStatus &&
-      importStatus !== RepositoryStatus.WAIT_PR_APPROVAL)
-  ) {
+  if (importStatus) {
     return (
       <span style={{ color: '#6A6E73' }}>{getImportStatus(importStatus)}</span>
     );