Remove unwanted styled components and fix styling and runtime issues

wso2 · Jan 29, 2024 · 85c62c0 · 85c62c0
1 parent 316331e
commit 85c62c0
Show file tree

Hide file tree

Showing 59 changed files with 1,537 additions and 4,379 deletions.
diff --git a/portals/admin/src/main/webapp/package-lock.json b/portals/admin/src/main/webapp/package-lock.json
diff --git a/portals/admin/src/main/webapp/package.json b/portals/admin/src/main/webapp/package.json
@@ -43,6 +43,7 @@
         "lodash.isempty": "^4.4.0",
         "moment": "^2.29.4",
         "monaco-editor": "^0.39.0",
+        "mui-chips-input": "^2.1.3",
         "mui-datatables": "^4.3.0",
         "prop-types": "^15.8.1",
         "qs": "^6.11.0",

diff --git a/portals/admin/src/main/webapp/site/public/conf/userTheme.js b/portals/admin/src/main/webapp/site/public/conf/userTheme.js
@@ -67,7 +67,7 @@ const AppThemes = {
                 },
             },
             MuiButton: {
-                label: {
+                root: {
                     textTransform: 'none',
                 },
                 contained: {
@@ -96,6 +96,17 @@ const AppThemes = {
                     padding: 0,
                 },
             },
+            MuiTableCell: {
+                root: {
+                    '&:first-of-type': {
+                        paddingLeft: 16,
+                        paddingRight: 4,
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                    },
+                    borderBottom: '1px solid #e0e0e0',
+                },
+            },
             MuiIconButton: {
                 root: {
                     padding: 8,
@@ -147,6 +158,38 @@ const AppThemes = {
                     },
                 },
             },
+            MuiInputLabel: {
+                root: {
+                    display: 'block',
+                    transformOrigin: 'top left',
+                },
+                outlined: {
+                    zIndex: 1,
+                    transform: 'translate(14px, 12px) scale(1)',
+                    pointerEvents: 'none',
+                    '&.MuiInputLabel-shrink': {
+                        transform: 'translate(14px, -6px) scale(0.75)',
+                    },
+                    '&.MuiInputLabel-marginDense': {
+                        transform: 'translate(10px, 12px) scale(1)',
+                    },
+                },
+            },
+            MuiOutlinedInput: {
+                root: {
+                    position: 'relative',
+                    borderRadius: '8px',
+                },
+                input: {
+                    padding: '10.5px 14px',
+                },
+                multiline: {
+                    padding: '10.5px 14px',
+                },
+                marginDense: {
+                    padding: '10.5px 14px',
+                },
+            },
         },
     },
 };

diff --git a/portals/admin/src/main/webapp/source/src/app/components/APICategories/AddEditAPICategory.jsx b/portals/admin/src/main/webapp/source/src/app/components/APICategories/AddEditAPICategory.jsx
@@ -25,17 +25,7 @@ import { FormattedMessage } from 'react-intl';
 import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase';
 import Alert from 'AppComponents/Shared/Alert';
 
-const PREFIX = 'AddEdit';
-
-const classes = {
-    error: `${PREFIX}-error`,
-};
-
-const StyledFormDialogBase = styled(FormDialogBase)(({ theme }) => ({
-    [`& .${classes.error}`]: {
-        color: theme.palette.error.dark,
-    },
-}));
+const StyledSpan = styled('span')(({ theme }) => ({ color: theme.palette.error.dark }));
 
 /**
  * Reducer
@@ -184,7 +174,7 @@ function AddEdit(props) {
         }
     };
     return (
-        <StyledFormDialogBase
+        <FormDialogBase
             title={title}
             saveButtonText='Save'
             icon={icon}
@@ -201,7 +191,7 @@ function AddEdit(props) {
                 label={(
                     <span>
                         <FormattedMessage id='AdminPages.ApiCategories.AddEdit.form.name' defaultMessage='Name' />
-                        <span className={classes.error}>*</span>
+                        <StyledSpan>*</StyledSpan>
                     </span>
                 )}
                 fullWidth
@@ -222,7 +212,7 @@ function AddEdit(props) {
                 helperText={hasErrors('description', description) || 'Description of the API category'}
                 variant='outlined'
             />
-        </StyledFormDialogBase>
+        </FormDialogBase>
     );
 }
 

diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/ContentBase.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/ContentBase.jsx
@@ -23,28 +23,11 @@ import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import clsx from 'clsx';
 
-const PREFIX = 'ContentBase';
-
-const classes = {
-    pageTitle: `${PREFIX}-pageTitle`,
-    root: `${PREFIX}-root`,
-};
-
-const Root = styled('div')(() => {
-    const minHeight = 43;
-    return {
-        [`& .${classes.pageTitle}`]: {
-            minHeight,
-            backgroundColor: '#f6f6f6',
-        },
-        [`&.${classes.root}`]: {
-            flexGrow: 1,
-            minHeight: `calc(100vh - (${minHeight + 57}px))`,
-            backgroundColor: '#eaeff1',
-        },
-    };
+const Root = styled('div')({
+    flexGrow: 1,
+    minHeight: `calc(100vh - (${43 + 57}px))`,
+    backgroundColor: '#eaeff1',
 });
 
 /**
@@ -60,7 +43,7 @@ const Root = styled('div')(() => {
  */
 function ContentBase(props) {
     const {
-        title, pageDescription, children, help, width, pageStyle, PaperProps, classes: classesProp, paperLess,
+        title, pageDescription, children, help, width, pageStyle, PaperProps, paperLess,
     } = props;
     let size = 8;// default half/medium
     if ([width, pageStyle].includes('small')) {
@@ -69,15 +52,15 @@ function ContentBase(props) {
         size = 11;
     }
     return (
-        <Root className={clsx(classesProp.root, classes.root)}>
+        <Root>
             <Grid
                 container
                 direction='row'
                 justifyContent='center'
                 alignItems='flex-start'
             >
                 <Grid item xs={12}>
-                    <Toolbar className={clsx(classesProp.pageTitle, classes.pageTitle)}>
+                    <Toolbar sx={{ minHeight: 43, backgroundColor: '#f6f6f6' }}>
                         <Grid container alignItems='center' spacing={1}>
                             <Grid item xs>
                                 <Typography color='inherit' variant='h5' component='h1'>
@@ -116,7 +99,6 @@ function ContentBase(props) {
 ContentBase.defaultProps = {
     width: 'medium',
     PaperProps: {},
-    classes: {},
     pageStyle: 'half',
     paperLess: false,
     pageDescription: null,
@@ -133,7 +115,6 @@ ContentBase.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-    classes: PropTypes.shape({ root: PropTypes.string }),
     paperLess: PropTypes.bool,
 };
 

diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/FormDialogBase.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/FormDialogBase.jsx
@@ -124,7 +124,7 @@ FormDialogBase.propTypes = {
     title: PropTypes.string.isRequired,
     children: PropTypes.element.isRequired,
     icon: PropTypes.element.isRequired,
-    triggerButtonText: PropTypes.string.isRequired,
+    triggerButtonText: PropTypes.element.isRequired,
     saveButtonText: PropTypes.string.isRequired,
     triggerButtonProps: PropTypes.shape({}),
     triggerIconProps: PropTypes.shape({}),

diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/InlineProgress.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/InlineProgress.jsx
@@ -23,22 +23,7 @@ import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import { FormattedMessage } from 'react-intl';
 
-const PREFIX = 'InlineProgress';
-
-const classes = {
-    root: `${PREFIX}-root`,
-};
-
-const Root = styled('div')(({ theme }) => ({
-    [`&.${classes.root}`]: {
-        display: 'flex',
-        '& > * + *': {
-            marginLeft: theme.spacing(2),
-        },
-        justifyContent: 'center',
-        padding: 20,
-    },
-}));
+const Root = styled('div')(() => ({}));
 
 /**
  * Render progress inside a container centering in the container.
@@ -48,7 +33,16 @@ const Root = styled('div')(({ theme }) => ({
 function InlineProgress(props) {
     const { message } = props;
     return (
-        <Root className={classes.root}>
+        <Root
+            sx={{
+                display: 'flex',
+                '& > * + *': {
+                    marginLeft: 2,
+                },
+                justifyContent: 'center',
+                padding: 20,
+            }}
+        >
             <CircularProgress />
             <Typography color='textSecondary' align='center'>
                 {message || (