Skip to content

Commit d5cc14d

Browse files
debsmita1debsmita1
authored
fix(bulk-import): add MUI class generator (#592)
1 parent 3401f0c commit d5cc14d

14 files changed

Lines changed: 139 additions & 417 deletions

File tree

‎workspaces/bulk-import/.changeset/honest-garlics-greet.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
3+
---
4+
5+
added MUI class generator

‎workspaces/bulk-import/plugins/bulk-import/package.json‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@
4343
"@backstage/plugin-permission-react": "^0.4.31",
4444
"@backstage/theme": "^0.6.4",
4545
"@janus-idp/shared-react": "^2.13.1",
46-
"@mui/icons-material": "5.16.14",
46+
"@mui/icons-material": "^5.15.17",
4747
"@mui/material": "^5.12.2",
48-
"@mui/styles": "^6.1.6",
48+
"@mui/styles": "5.16.14",
4949
"@red-hat-developer-hub/backstage-plugin-bulk-import-common": "workspace:^",
5050
"@tanstack/react-query": "^4.29.21",
5151
"formik": "^2.4.5",
@@ -65,7 +65,7 @@
6565
"@backstage/dev-utils": "^1.1.7",
6666
"@backstage/test-utils": "^1.7.5",
6767
"@playwright/test": "1.50.1",
68-
"@redhat-developer/red-hat-developer-hub-theme": "0.4.0",
68+
"@redhat-developer/red-hat-developer-hub-theme": "^0.5.0",
6969
"@spotify/prettier-config": "^15.0.0",
7070
"@testing-library/dom": "^10.0.0",
7171
"@testing-library/jest-dom": "^6.0.0",
@@ -75,16 +75,7 @@
7575
"@types/react": "^18.2.58",
7676
"msw": "1.3.5",
7777
"prettier": "3.4.2",
78-
"react": "16.13.1 || ^17.0.0 || ^18.0.0",
79-
"react-dom": "16.13.1 || ^17.0.0 || ^18.0.0",
80-
"react-router-dom": "^6.0.0",
81-
"start-server-and-test": "2.0.10"
82-
},
83-
"scalprum": {
84-
"name": "janus-idp.backstage-plugin-bulk-import",
85-
"exposedModules": {
86-
"BulkImportPlugin": "./src/index.ts"
87-
}
78+
"react": "16.13.1 || ^17.0.0 || ^18.0.0"
8879
},
8980
"files": [
9081
"dist",
@@ -105,7 +96,8 @@
10596
"homepage": "https://red.ht/rhdh",
10697
"bugs": "https://github.com/redhat-developer/rhdh-plugins/issues",
10798
"maintainers": [
108-
"@rm3l"
99+
"@rm3l",
100+
"@debsmita1"
109101
],
110102
"author": "Red Hat"
111103
}

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

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { useDrawer } from '@janus-idp/shared-react';
2020
import Alert from '@mui/material/Alert';
2121
import AlertTitle from '@mui/material/AlertTitle';
2222
import FormControl from '@mui/material/FormControl';
23-
import { makeStyles } from '@mui/styles';
2423
import { useFormikContext } from 'formik';
2524
import { get } from 'lodash';
2625

@@ -37,33 +36,28 @@ import { PreviewFileSidebar } from '../PreviewFile/PreviewFileSidebar';
3736
import { AddRepositoriesFormFooter } from './AddRepositoriesFormFooter';
3837
import { AddRepositoriesTable } from './AddRepositoriesTable';
3938

40-
const useStyles = makeStyles(() => ({
41-
body: {
42-
marginBottom: '50px',
43-
padding: '24px',
44-
},
45-
// We would need this once the ServiceNow approval tool is incorporated in the plugin
46-
// approvalTool: {
47-
// display: 'flex',
48-
// flexDirection: 'row',
49-
// justifyContent: 'left',
50-
// alignItems: 'center',
51-
// paddingTop: '24px',
52-
// paddingBottom: '24px',
53-
// paddingLeft: '16px',
54-
// backgroundColor: theme.palette.background.paper,
55-
// borderBottomStyle: 'groove',
56-
// border: theme.palette.divider,
57-
// },
58-
approvalToolTooltip: {
59-
paddingTop: '4px',
60-
paddingRight: '24px',
61-
paddingLeft: '5px',
62-
},
63-
}));
39+
// const useStyles = makeStyles(() => ({
40+
// // We would need this once the ServiceNow approval tool is incorporated in the plugin
41+
// approvalTool: {
42+
// display: 'flex',
43+
// flexDirection: 'row',
44+
// justifyContent: 'left',
45+
// alignItems: 'center',
46+
// paddingTop: '24px',
47+
// paddingBottom: '24px',
48+
// paddingLeft: '16px',
49+
// backgroundColor: theme.palette.background.paper,
50+
// borderBottomStyle: 'groove',
51+
// border: theme.palette.divider,
52+
// },
53+
// approvalToolTooltip: {
54+
// paddingTop: '4px',
55+
// paddingRight: '24px',
56+
// paddingLeft: '5px',
57+
// },
58+
// }));
6459

6560
export const AddRepositories = ({ error }: { error: any }) => {
66-
const styles = useStyles();
6761
const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
6862
const { setFieldValue, values } =
6963
useFormikContext<AddRepositoriesFormValues>();
@@ -85,7 +79,12 @@ export const AddRepositories = ({ error }: { error: any }) => {
8579
return (
8680
<>
8781
<FormControl fullWidth>
88-
<div className={styles.body}>
82+
<div
83+
style={{
84+
marginBottom: '50px',
85+
padding: '24px',
86+
}}
87+
>
8988
{error && (
9089
<div style={{ paddingBottom: '10px' }}>
9190
<Alert severity="error">

‎workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import Box from '@mui/material/Box';
2222
import Button from '@mui/material/Button';
2323
import CircularProgress from '@mui/material/CircularProgress';
2424
import Tooltip from '@mui/material/Tooltip';
25-
import { makeStyles } from '@mui/styles';
2625
import { useFormikContext } from 'formik';
2726

2827
import {
@@ -31,23 +30,10 @@ import {
3130
ApprovalTool,
3231
} from '../../types';
3332

34-
const useStyles = makeStyles({
35-
illustration: {
36-
flexDirection: 'row',
37-
display: 'flex',
38-
justifyContent: 'space-around',
39-
overflow: 'scroll',
40-
},
41-
tooltip: {
42-
maxWidth: 'none',
43-
},
44-
});
45-
4633
const sPad = (repositories: AddedRepositories) =>
4734
Object.keys(repositories || []).length > 1 ? 's' : '';
4835

4936
export const AddRepositoriesFormFooter = () => {
50-
const styles = useStyles();
5137
const { values, handleSubmit, isSubmitting } =
5238
useFormikContext<AddRepositoriesFormValues>();
5339
const approvalToolTitle =
@@ -101,7 +87,12 @@ export const AddRepositoriesFormFooter = () => {
10187
data-testid="add-repository-footer"
10288
>
10389
{toolTipTitle ? (
104-
<Tooltip classes={{ tooltip: styles.tooltip }} title={toolTipTitle}>
90+
<Tooltip
91+
title={toolTipTitle}
92+
sx={{
93+
maxWidth: 'none',
94+
}}
95+
>
10596
<span>{submitButton}</span>
10697
</Tooltip>
10798
) : (

‎workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,16 @@ import Alert from '@mui/material/Alert';
2727
import AlertTitle from '@mui/material/AlertTitle';
2828
import { useTheme } from '@mui/material/styles';
2929
import Typography from '@mui/material/Typography';
30-
import { makeStyles } from '@mui/styles';
3130
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3231

3332
import { bulkImportPermission } from '@red-hat-developer-hub/backstage-plugin-bulk-import-common';
3433

3534
import { AddRepositoriesForm } from './AddRepositoriesForm';
3635
import { Illustrations } from './Illustrations';
3736

38-
const useStyles = makeStyles(() => ({
39-
accordionDetails: {
40-
flexDirection: 'row',
41-
display: 'flex',
42-
justifyContent: 'space-around',
43-
overflow: 'auto',
44-
},
45-
}));
46-
4737
export const AddRepositoriesPage = () => {
4838
const queryClientRef = React.useRef<QueryClient>();
4939
const theme = useTheme();
50-
const classes = useStyles();
5140

5241
if (!queryClientRef.current) {
5342
queryClientRef.current = new QueryClient();
@@ -75,7 +64,14 @@ export const AddRepositoriesPage = () => {
7564
Add repositories to Red Hat Developer Hub in 4 steps
7665
</Typography>
7766
</AccordionSummary>
78-
<AccordionDetails className={classes.accordionDetails}>
67+
<AccordionDetails
68+
sx={{
69+
flexDirection: 'row',
70+
display: 'flex',
71+
justifyContent: 'space-around',
72+
overflow: 'auto',
73+
}}
74+
>
7975
{/* <Illustrations
8076
iconClassname={
8177
theme.palette.mode === 'dark'

‎workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import ToggleButton from '@mui/material/ToggleButton';
2020
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
2121
import Toolbar from '@mui/material/Toolbar';
2222
import Typography from '@mui/material/Typography';
23-
import { makeStyles } from '@mui/styles';
2423
import { useFormikContext } from 'formik';
2524

2625
import {
@@ -30,13 +29,6 @@ import {
3029
} from '../../types';
3130
import { RepositoriesSearchBar } from './RepositoriesSearchBar';
3231

33-
const useStyles = makeStyles(() => ({
34-
toolbar: {
35-
paddingTop: '14px',
36-
paddingBottom: '14px',
37-
},
38-
}));
39-
4032
export const AddRepositoriesTableToolbar = ({
4133
title,
4234
setSearchString,
@@ -56,7 +48,6 @@ export const AddRepositoriesTableToolbar = ({
5648
RepositorySelection.Repository,
5749
);
5850
const [search, setSearch] = React.useState<string>('');
59-
const classes = useStyles();
6051
const [selectedReposNumber, setSelectedReposNumber] = React.useState(0);
6152
const handleToggle = (
6253
_event: React.MouseEvent<HTMLElement>,
@@ -90,7 +81,12 @@ export const AddRepositoriesTableToolbar = ({
9081
}, [selectedReposFromDrawer, values.repositories, activeOrganization]);
9182

9283
return (
93-
<Toolbar className={classes.toolbar}>
84+
<Toolbar
85+
sx={{
86+
paddingTop: '14px',
87+
paddingBottom: '14px',
88+
}}
89+
>
9490
<Typography
9591
sx={{ flex: '1 1 100%', fontWeight: 'bold' }}
9692
variant="h5"
@@ -100,7 +96,6 @@ export const AddRepositoriesTableToolbar = ({
10096
</Typography>
10197
{!activeOrganization && (
10298
<ToggleButtonGroup
103-
size="medium"
10499
color="primary"
105100
value={selection}
106101
exclusive

‎workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,37 @@
1616

1717
import * as React from 'react';
1818

19-
import { makeStyles } from '@mui/styles';
20-
2119
import { getImageForIconClass } from '../../utils/icons';
2220

23-
const useStyles = makeStyles(() => ({
24-
text: {
25-
maxWidth: '150px',
26-
textAlign: 'center',
27-
},
28-
img: {
29-
justifyContent: 'center',
30-
display: 'flex',
31-
},
32-
}));
33-
3421
export const Illustrations = ({
3522
iconClassname,
3623
iconText,
3724
}: {
3825
iconClassname: string;
3926
iconText: string;
4027
}) => {
41-
const styles = useStyles();
4228
return (
4329
<div>
44-
<span className={styles.img}>
30+
<span
31+
style={{
32+
justifyContent: 'center',
33+
display: 'flex',
34+
}}
35+
>
4536
<img
4637
src={getImageForIconClass(iconClassname)}
4738
alt={iconText}
4839
height="100px"
4940
/>
5041
</span>
51-
<p className={styles.text}>{iconText}</p>
42+
<p
43+
style={{
44+
maxWidth: '150px',
45+
textAlign: 'center',
46+
}}
47+
>
48+
{iconText}
49+
</p>
5250
</div>
5351
);
5452
};

‎workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesSearchBar.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,6 @@ import FormControl from '@mui/material/FormControl';
2222
import IconButton from '@mui/material/IconButton';
2323
import Input from '@mui/material/Input';
2424
import InputAdornment from '@mui/material/InputAdornment';
25-
import { makeStyles } from '@mui/styles';
26-
27-
const useStyles = makeStyles({
28-
formControl: {
29-
alignItems: 'flex-end',
30-
flexGrow: 1,
31-
paddingLeft: '21px',
32-
},
33-
});
3425

3526
export const RepositoriesSearchBar = ({
3627
value,
@@ -41,11 +32,16 @@ export const RepositoriesSearchBar = ({
4132
onChange: (filter: string) => void;
4233
activeOrganization?: boolean;
4334
}) => {
44-
const classes = useStyles();
4535
const ariaLabel = activeOrganization ? 'search-in-organization' : 'search';
4636

4737
return (
48-
<FormControl className={classes.formControl}>
38+
<FormControl
39+
sx={{
40+
alignItems: 'flex-end',
41+
flexGrow: 1,
42+
paddingLeft: '21px',
43+
}}
44+
>
4945
<Input
5046
data-testid={ariaLabel}
5147
placeholder="Search"

‎workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,7 @@ export const BulkImportPage = () => {
9090
<Header title="Bulk import" />
9191
<DrawerContextProvider>
9292
<DeleteDialogContextProvider>
93-
<Content noPadding>
94-
<div style={{ padding: '24px' }}>{showContent()}</div>
95-
</Content>
93+
<Content>{showContent()}</Content>
9694
</DeleteDialogContextProvider>
9795
</DrawerContextProvider>
9896
</Page>

0 commit comments

Comments
 (0)