feat(bulk-import): upgrading to mui5 (#24)

* feat(bulk-import): upgrading to mui5 * feat(bulk-import): upgrading to mui to v5 for new file changes * feat(bulk-import): adding yarn lock after merging main * feat(bulk-import): fixing prettier * feat(bulk-import) : resolving resize warning * feat(bulk-import): removing commented line
redhat-developer · Nov 14, 2024 · 9de1573 · 9de1573
1 parent faa82f1
commit 9de1573
Show file tree

Hide file tree

Showing 44 changed files with 421 additions and 310 deletions.
diff --git a/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx b/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx
@@ -42,13 +42,6 @@ import { makeStyles } from '@mui/styles';
 import React from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  bar: {
-    padding: theme.spacing(1, 0),
-  },
-  filters: {
-    padding: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  },
   filter: {
     '& + &': {
       marginTop: theme.spacing(2.5),
@@ -67,7 +60,11 @@ const SearchPage = () => {
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
-            <Paper className={classes.bar}>
+            <Paper
+              sx={{
+                py: 1,
+              }}
+            >
               <SearchBar />
             </Paper>
           </Grid>
@@ -88,7 +85,12 @@ const SearchPage = () => {
                 },
               ]}
             />
-            <Paper className={classes.filters}>
+            <Paper
+              sx={{
+                p: 2,
+                mt: 2,
+              }}
+            >
               {types.includes('techdocs') && (
                 <SearchFilter.Select
                   className={classes.filter}

diff --git a/workspaces/bulk-import/packages/backend/src/index.ts b/workspaces/bulk-import/packages/backend/src/index.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { createBackend } from '@backstage/backend-defaults';
+ */
+import { createBackend } from '@backstage/backend-defaults';
 
 const backend = createBackend();
 

diff --git a/workspaces/bulk-import/plugins/bulk-import/package.json b/workspaces/bulk-import/plugins/bulk-import/package.json
@@ -43,11 +43,9 @@
     "@backstage/plugin-permission-react": "^0.4.27",
     "@backstage/theme": "^0.6.0",
     "@janus-idp/shared-react": "^2.13.1",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "5.16.4",
     "@mui/material": "^5.12.2",
+    "@mui/styles": "^6.1.6",
     "@red-hat-developer-hub/backstage-plugin-bulk-import-common": "^1.4.0",
     "@tanstack/react-query": "^4.29.21",
     "formik": "^2.4.5",

diff --git a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { IdentityApi } from '@backstage/core-plugin-api';
+ */
+import { IdentityApi } from '@backstage/core-plugin-api';
 
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';

diff --git a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import {
+ */
+import {
   ConfigApi,
   createApiRef,
   IdentityApi,

diff --git a/...spaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx b/...spaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx
@@ -12,12 +12,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 
 import { useDrawer } from '@janus-idp/shared-react';
-import { makeStyles } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import FormControl from '@mui/material/FormControl';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 import { get } from 'lodash';
 
@@ -34,24 +36,24 @@ import { PreviewFileSidebar } from '../PreviewFile/PreviewFileSidebar';
 import { AddRepositoriesFormFooter } from './AddRepositoriesFormFooter';
 import { AddRepositoriesTable } from './AddRepositoriesTable';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   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,
-  },
-
+  // We would need this once the ServiceNow approval tool is incorporated in the plugin
+  // 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',

diff --git a/.../bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx b/.../bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
@@ -12,21 +12,21 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React, { useState } from 'react';
+ */
+import React, { useState } from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import {
-  Button,
-  Card,
-  Container,
-  Drawer,
-  IconButton,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
 import CloseIcon from '@mui/icons-material/Close';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {
@@ -38,18 +38,7 @@ import { urlHelper } from '../../utils/repository-utils';
 import { AddRepositoriesTableToolbar } from './AddRepositoriesTableToolbar';
 import { RepositoriesTable } from './RepositoriesTable';
 
-const useStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
-  sidePanelfooter: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'right',
-    marginTop: theme.spacing(2),
-    position: 'fixed',
-    bottom: '20px',
-  },
+const useStyles = makeStyles({
   drawerPaper: {
     ['@media (max-width: 960px)']: {
       '& > div[class*="MuiDrawer-paper-"]': {
@@ -63,7 +52,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
   },
-}));
+});
 
 export const AddRepositoriesDrawer = ({
   open,
@@ -129,7 +118,7 @@ export const AddRepositoriesDrawer = ({
             </Link>
           </div>
           <div>
-            <IconButton onClick={onClose} className="align-right">
+            <IconButton onClick={onClose} className="align-right" size="large">
               <CloseIcon />
             </IconButton>
           </div>
@@ -147,13 +136,24 @@ export const AddRepositoriesDrawer = ({
             drawerOrganization={orgData?.orgName}
           />
         </Card>
-        <div className={classes.sidePanelfooter}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'right',
+            mt: 2,
+            position: 'fixed',
+            bottom: '20px',
+          }}
+        >
           <span>
             <Button
               variant="contained"
               color="primary"
               onClick={() => handleSelectRepoFromDrawer(selectedRepos)}
-              className={classes.createButton}
+              sx={{
+                mr: 1,
+              }}
               data-testid="select-from-drawer"
             >
               Select
@@ -168,7 +168,7 @@ export const AddRepositoriesDrawer = ({
               Cancel
             </Button>
           </span>
-        </div>
+        </Box>
       </Container>
     </Drawer>
   );

diff --git a/...lk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx b/...lk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { configApiRef, identityApiRef } from '@backstage/core-plugin-api';
@@ -51,8 +52,8 @@ jest.mock('@janus-idp/shared-react', () => ({
   useDrawer: jest.fn(),
 }));
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       body: 'body',

diff --git a/...k-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/...k-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -16,9 +16,11 @@
 
 import { Link } from '@backstage/core-components';
 
-import { Button, makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Tooltip from '@mui/material/Tooltip';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {
@@ -27,10 +29,7 @@ import {
   ApprovalTool,
 } from '../../types';
 
-const useStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
+const useStyles = makeStyles({
   illustration: {
     flexDirection: 'row',
     display: 'flex',
@@ -40,25 +39,7 @@ const useStyles = makeStyles(theme => ({
   tooltip: {
     maxWidth: 'none',
   },
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'left',
-    position: 'fixed',
-    bottom: 0,
-    paddingTop: '24px',
-    paddingBottom: '24px',
-    paddingLeft: '24px',
-    backgroundColor:
-      theme.palette.type === 'light'
-        ? '#fff'
-        : theme.palette.navigation.background,
-    width: '100%',
-    borderTopStyle: 'groove',
-    border: theme.palette.divider,
-    zIndex: 1,
-  },
-}));
+});
 
 const sPad = (repositories: AddedRepositories) =>
   Object.keys(repositories || []).length > 1 ? 's' : '';
@@ -85,7 +66,7 @@ export const AddRepositoriesFormFooter = () => {
       variant="contained"
       color="primary"
       onClick={handleSubmit as any}
-      className={styles.createButton}
+      sx={{ mr: 1 }}
       disabled={disableCreate || isSubmitting}
       startIcon={
         isSubmitting && <CircularProgress size="20px" color="inherit" />
@@ -96,7 +77,27 @@ export const AddRepositoriesFormFooter = () => {
   );
 
   return (
-    <div className={styles.footer} data-testid="add-repository-footer">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'left',
+        position: 'fixed',
+        bottom: 0,
+        pt: 3,
+        pb: 3,
+        pl: 3,
+        backgroundColor: theme =>
+          theme.palette.mode === 'light'
+            ? '#fff'
+            : theme.palette.navigation.background,
+        width: '100%',
+        borderTopStyle: 'groove',
+        borderColor: 'divider',
+        zIndex: 1,
+      }}
+      data-testid="add-repository-footer"
+    >
       {toolTipTitle ? (
         <Tooltip classes={{ tooltip: styles.tooltip }} title={toolTipTitle}>
           <span>{submitButton}</span>
@@ -107,6 +108,6 @@ export const AddRepositoriesFormFooter = () => {
       <Link to="/bulk-import/repositories">
         <Button variant="outlined">Cancel</Button>
       </Link>
-    </div>
+    </Box>
   );
 };