feat(bulk-import): use react query to fetch repositories

plugins/bulk-import/package.json

@@ -54,6 +54,7 @@
     "formik": "^2.4.5",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "@tanstack/react-query": "^4.29.21",
     "react-use": "^17.2.4",
     "yaml": "^2.0.0"
   },

plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
+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/PreviewFileSidebar';
+// import HelpIcon from '@mui/icons-material/HelpOutline';
+// import FormControlLabel from '@mui/material/FormControlLabel';
+// import Radio from '@mui/material/Radio';
+// import RadioGroup from '@mui/material/RadioGroup';
+// import Tooltip from '@mui/material/Tooltip';
+// import Typography from '@mui/material/Typography';
+// import { useFormikContext } from 'formik';
+// import { AddRepositoriesFormValues } from '../../types';
+import { AddRepositoriesFormFooter } from './AddRepositoriesFormFooter';
+import { AddRepositoriesTable } from './AddRepositoriesTable';
+
+const useStyles = makeStyles(theme => ({
+  body: {
+    marginBottom: '50px',
+    padding: '24px',
+  },
+  approvalTool: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'left',
+    alignItems: 'center',
+    paddingTop: '24px',
+    paddingBottom: '24px',
+    paddingLeft: '16px',
+    backgroundColor: theme.palette.background.paper,
+    borderBottomStyle: 'groove',
+    border: theme.palette.divider,
+  },
+
+  approvalToolTooltip: {
+    paddingTop: '4px',
+    paddingRight: '24px',
+    paddingLeft: '5px',
+  },
+}));
+
+export const AddRepositories = ({
+  error,
+}: {
+  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 (
+    <>
+      <FormControl fullWidth>
+        <div className={styles.body}>
+          {error && (
+            <div style={{ paddingBottom: '10px' }}>
+              <Alert severity="error">
+                <AlertTitle>{error?.title}</AlertTitle>
+                {error?.message}
+              </Alert>
+            </div>
+          )}
+          {/* 
+          // Enable this when ServiceNow approval tool is supported
+          <span className={styles.approvalTool}>
+            <Typography fontSize="16px" fontWeight="500">
+              Approval tool
+            </Typography>
+            <Tooltip
+              placement="top"
+              title="When adding a new repository, it requires approval. Once the PR is approved or the ServiceNow ticket is closed, the repositories will be added to the Catalog page."
+            >
+              <span className={styles.approvalToolTooltip}>
+                <HelpIcon fontSize="small" />
+              </span>
+            </Tooltip>
+            <RadioGroup
+              id="approval-tool"
+              data-testid="approval-tool"
+              row
+              name="approvalTool"
+              value={values.approvalTool}
+              onChange={(_event, value: string) => {
+                setFieldValue('approvalTool', value);
+              }}
+            >
+              <FormControlLabel value="git" control={<Radio />} label="Git" />
+              <FormControlLabel
+                value="servicenow"
+                control={<Radio />}
+                label="ServiceNow"
+                disabled
+              />
+            </RadioGroup>
+          </span> */}
+          <AddRepositoriesTable title="Selected repositories" />
+        </div>
+        <br />
+      </FormControl>
+      <AddRepositoriesFormFooter />
+      {openDrawer && (
+        <PreviewFileSidebar
+          open={openDrawer}
+          onClose={closeDrawer}
+          data={drawerData}
+          repositoryType={values.repositoryType}
+          handleSave={handleSave}
+        />
+      )}
+    </>
+  );
+};

plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { configApiRef, identityApiRef } from '@backstage/core-plugin-api';
 import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
@@ -12,7 +13,7 @@ import { useDrawer } from '@janus-idp/shared-react';
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { mockGetImportJobs, mockGetRepositories } from '../../mocks/mockData';
 import { ImportJobStatus, RepositorySelection } from '../../types';
-import { AddRepositoriesForm } from './AddRepositoriesForm';
+import { AddRepositories } from './AddRepositories';
 
 jest.mock('formik', () => ({
   ...jest.requireActual('formik'),
@@ -44,6 +45,16 @@ jest.mock('@material-ui/core', () => ({
   },
 }));
 
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false, // Disable retries for testing
+      },
+    },
+  });
+let queryClient: QueryClient;
+
 class MockBulkImportApi {
   async getImportAction(
     repo: string,
@@ -70,6 +81,7 @@ beforeEach(() => {
     },
     setFieldValue: jest.fn(),
   });
+  queryClient = createTestQueryClient();
 });
 
 describe('AddRepsositoriesForm', () => {
@@ -97,7 +109,9 @@ describe('AddRepsositoriesForm', () => {
             ],
           ]}
         >
-          <AddRepositoriesForm error={null} />
+          <QueryClientProvider client={queryClient}>
+            <AddRepositories error={null} />
+          </QueryClientProvider>
         </TestApiProvider>
       </Router>,
     );
@@ -134,9 +148,11 @@ describe('AddRepsositoriesForm', () => {
             ],
           ]}
         >
-          <AddRepositoriesForm
-            error={{ message: 'error', title: 'error occurred' }}
-          />
+          <QueryClientProvider client={queryClient}>
+            <AddRepositories
+              error={{ message: 'error', title: 'error occurred' }}
+            />
+          </QueryClientProvider>
         </TestApiProvider>
       </Router>,
     );