janus-idp · its-mitesh-kumar · Oct 16, 2024
@@ -2,17 +2,16 @@ 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 {
@@ -24,18 +23,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-"]': {
@@ -49,7 +37,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
   },
-}));
+});
 
 export const AddRepositoriesDrawer = ({
   open,
@@ -115,7 +103,7 @@ export const AddRepositoriesDrawer = ({
             </Link>
           </div>
           <div>
-            <IconButton onClick={onClose} className="align-right">
+            <IconButton onClick={onClose} className="align-right" size="large">
               <CloseIcon />
             </IconButton>
           </div>
@@ -133,13 +121,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
@@ -154,7 +153,7 @@ export const AddRepositoriesDrawer = ({
               Cancel
             </Button>
           </span>
-        </div>
+        </Box>
       </Container>
     </Drawer>
   );

@@ -33,8 +33,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',

@@ -1,8 +1,9 @@
 import React from '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 { useDrawer } from '@janus-idp/shared-react';
@@ -20,30 +21,18 @@ 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,
-  },
 
   approvalToolTooltip: {
     paddingTop: '4px',
     paddingRight: '24px',
     paddingLeft: '5px',
   },
-}));
+});
 
 export const AddRepositoriesForm = ({
   error,

@@ -2,9 +2,11 @@ import React from 'react';
 
 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 {
@@ -13,10 +15,7 @@ import {
   ApprovalTool,
 } from '../../types';
 
-const useStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
+const useStyles = makeStyles({
   illustration: {
     flexDirection: 'row',
     display: 'flex',
@@ -26,25 +25,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' : '';
@@ -73,7 +54,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" />
@@ -84,7 +65,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>
@@ -95,6 +96,6 @@ export const AddRepositoriesFormFooter = () => {
       <Link to="/bulk-import/repositories">
         <Button variant="outlined">Cancel</Button>
       </Link>
-    </div>
+    </Box>
   );
 };
@@ -5,16 +5,15 @@ import { Content, Header, Page, Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  makeStyles,
-  useTheme,
-} from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
 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 Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { Formik, FormikHelpers } from 'formik';
 import { get } from 'lodash';
 
@@ -135,39 +134,39 @@ export const AddRepositoriesPage = () => {
               <AccordionDetails className={classes.accordionDetails}>
                 {/* <Illustrations
                 iconClassname={
-                  theme.palette.type === 'dark'
+                  theme.palette.mode === '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'
+                    theme.palette.mode === 'dark'
                       ? 'icon-choose-repositories-white'
                       : 'icon-choose-repositories-black'
                   }
                   iconText="Choose repositories you want to add"
                 />
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === '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'
+                    theme.palette.mode === 'dark'
                       ? 'icon-edit-pullrequest-white'
                       : 'icon-edit-pullrequest-black'
                   }
                   iconText="Edit the pull request details if needed"
                 />
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === 'dark'
                       ? 'icon-track-status-white'
                       : 'icon-track-status-black'
                   }

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Box, Paper } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, RepositorySelection } from '../../types';

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
-import { makeStyles, Toolbar } from '@material-ui/core';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
 
 import { getImageForIconClass } from '../../utils/icons';
 

@@ -1,12 +1,10 @@
 import * as React from 'react';
 
-import {
-  Checkbox,
-  TableCell,
-  TableHead,
-  TableRow,
-  TableSortLabel,
-} from '@material-ui/core';
+import Checkbox from '@mui/material/Checkbox';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
 
 import { Order } from '../../types';
 import { RepositoriesListColumns } from '../Repositories/RepositoriesListColumns';