+
{noDataMessage}
)}
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/WarningBase.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/WarningBase.jsx
index e7eb670f832..feaf780064b 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/WarningBase.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/WarningBase.jsx
@@ -17,7 +17,6 @@
* under the License.
*/
import React from 'react';
-import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import ContentBase from 'AppComponents/AdminPages/Addons/ContentBase';
@@ -25,22 +24,6 @@ import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import WarningIcon from '@mui/icons-material/Warning';
-const PREFIX = 'WarningBase';
-
-const classes = {
- root: `${PREFIX}-root`,
- warningIcon: `${PREFIX}-warningIcon`,
-};
-
-const StyledContentBase = styled(ContentBase)(({ theme }) => ({
- [`& .${classes.root}`]: {},
-
- [`& .${classes.warningIcon}`]: {
- color: theme.palette.warning.dark,
- fontSize: 44,
- },
-}));
-
/**
* Adds two numbers together.
* @param {JSON} props The first number.
@@ -50,14 +33,14 @@ export default function SimplePaper(props) {
const { content, title, pageProps } = props;
return (
-
-
+
-
+ ({ fontSize: 44, color: theme.palette.warning.dark })} />
{title}
@@ -68,6 +51,6 @@ export default function SimplePaper(props) {
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx
index 92a4e491b12..1e8015bd2af 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx
@@ -17,7 +17,6 @@
*/
import React, { useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
import { FormattedMessage } from 'react-intl';
import { Link as RouterLink } from 'react-router-dom';
import { Card } from '@mui/material';
@@ -32,34 +31,6 @@ import Progress from 'AppComponents/Shared/Progress';
import API from 'AppData/api';
import Configurations from 'Config';
-const PREFIX = 'APICategoriesCard';
-
-const classes = {
- root: `${PREFIX}-root`,
- title: `${PREFIX}-title`,
- cardText: `${PREFIX}-cardText`,
-};
-
-const StyledCard = styled(Card)(() => ({
- [`& .${classes.root}`]: {
- minWidth: 275,
- minHeight: 270,
- textAlign: 'center',
-
- },
-
- [`& .${classes.title}`]: {
- fontSize: 20,
- fontWeight: 'fontWeightBold',
- },
-
- [`& .${classes.cardText}`]: {
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- },
-}));
-
/**
* Render progress inside a container centering in the container.
* @returns {JSX} Loading animation.
@@ -84,14 +55,14 @@ export default function APICategoriesCard() {
}, []);
const noApiCategoriesCard = (
-
+
-
+
-
+
);
const apiCategoriesListingCard = () => {
return (
-
+
-
+
-
+
{numberOfCategories}
@@ -172,10 +143,16 @@ export default function APICategoriesCard() {
return (
-
+
{category.name}
-
+
{category.description || (
-
+
);
};
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/RateLimitingCard.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/RateLimitingCard.jsx
index 8d55b081982..d5ef7994efb 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/RateLimitingCard.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/RateLimitingCard.jsx
@@ -17,7 +17,6 @@
*/
import React from 'react';
-import { styled } from '@mui/material/styles';
import { FormattedMessage, useIntl } from 'react-intl';
import { Link as RouterLink } from 'react-router-dom';
import { Card } from '@mui/material';
@@ -32,31 +31,6 @@ import AssignmentIcon from '@mui/icons-material/Assignment';
import PhonelinkSetupIcon from '@mui/icons-material/PhonelinkSetup';
import { useAppContext } from 'AppComponents/Shared/AppContext';
-const PREFIX = 'RateLimitingCard';
-
-const classes = {
- root: `${PREFIX}-root`,
- title: `${PREFIX}-title`,
- pos: `${PREFIX}-pos`,
-};
-
-const StyledCard = styled(Card)(() => ({
- [`&.${classes.root}`]: {
- minWidth: 275,
- minHeight: 270,
- textAlign: 'center',
- },
-
- [`& .${classes.title}`]: {
- fontSize: 20,
- fontWeight: 'fontWeightBold',
- },
-
- [`& .${classes.pos}`]: {
- marginBottom: 12,
- },
-}));
-
/**
* Render progress inside a container centering in the container.
* @returns {JSX} Loading animation.
@@ -122,9 +96,9 @@ export default function RateLimitingCard() {
}
return (
-
+
-
+
{policy.name}
@@ -157,6 +131,6 @@ export default function RateLimitingCard() {
})}
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/TasksWorkflowCard.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/TasksWorkflowCard.jsx
index b6993773aa4..7c80e9c0587 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/TasksWorkflowCard.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/TasksWorkflowCard.jsx
@@ -17,7 +17,6 @@
*/
import React, { useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
import { FormattedMessage, useIntl } from 'react-intl';
import { Link as RouterLink } from 'react-router-dom';
import { Card } from '@mui/material';
@@ -35,47 +34,6 @@ import PublicIcon from '@mui/icons-material/Public';
import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
import Api from 'AppData/api';
-const PREFIX = 'TasksWorkflowCard';
-
-const classes = {
- root: `${PREFIX}-root`,
- title: `${PREFIX}-title`,
- avatar: `${PREFIX}-avatar`,
- approveButton: `${PREFIX}-approveButton`,
- rejectButton: `${PREFIX}-rejectButton`,
-};
-
-const StyledCard = styled(Card)(({ theme }) => ({
- [`&.${classes.root}`]: {
- minWidth: 275,
- minHeight: 270,
- textAlign: 'center',
-
- },
-
- [`& .${classes.title}`]: {
- fontSize: 20,
- fontWeight: 'fontWeightBold',
- },
-
- [`& .${classes.avatar}`]: {
- width: theme.spacing(4),
- height: theme.spacing(4),
- },
-
- [`& .${classes.approveButton}`]: {
- textDecoration: 'none',
- backgroundColor: theme.palette.success.light,
- margin: theme.spacing(0.5),
- },
-
- [`& .${classes.rejectButton}`]: {
- textDecoration: 'none',
- backgroundColor: theme.palette.error.light,
- margin: theme.spacing(0.5),
- },
-}));
-
/**
* Render progress inside a container centering in the container.
* @returns {JSX} Loading animation.
@@ -150,13 +108,13 @@ export default function TasksWorkflowCard() {
// Component to be displayed when there's no task available
// Note: When workflow is not enabled, this will be displayed
const noTasksCard = (
-
+
-
+
-
+
);
// Compact task card component's individual category component
@@ -180,7 +138,7 @@ export default function TasksWorkflowCard() {
return (
-
+
@@ -306,11 +264,11 @@ export default function TasksWorkflowCard() {
},
];
return (
-
+
-
+
-
+
{getAllTaskCount()}
@@ -338,7 +296,7 @@ export default function TasksWorkflowCard() {
})}
-
+
);
};
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdvancedSettings/TenantConfSave.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdvancedSettings/TenantConfSave.jsx
index a2f16a7367f..fb9bba02c12 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/AdvancedSettings/TenantConfSave.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/AdvancedSettings/TenantConfSave.jsx
@@ -19,77 +19,17 @@
import React, {
useReducer, useState, Suspense, lazy, useEffect,
} from 'react';
-import { styled } from '@mui/material/styles';
import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import {
Box, Grid, Button,
} from '@mui/material';
-import { green } from '@mui/material/colors';
import API from 'AppData/api';
import Alert from 'AppComponents/Shared/Alert';
import { Progress } from 'AppComponents/Shared';
import ContentBase from 'AppComponents/AdminPages/Addons/ContentBase';
-const PREFIX = 'TenantConfSave';
-
-const classes = {
- root: `${PREFIX}-root`,
- error: `${PREFIX}-error`,
- dialog: `${PREFIX}-dialog`,
- tenantConfHeading: `${PREFIX}-tenantConfHeading`,
- showSampleButton: `${PREFIX}-showSampleButton`,
- helperText: `${PREFIX}-helperText`,
- infoBox: `${PREFIX}-infoBox`,
- buttonBox: `${PREFIX}-buttonBox`,
- saveButton: `${PREFIX}-saveButton`,
-};
-
-const StyledContentBase = styled(ContentBase)(({ theme }) => ({
- [`& .${classes.root}`]: {
- marginBottom: theme.spacing(15),
- },
-
- [`& .${classes.error}`]: {
- color: theme.palette.error.dark,
- },
-
- [`& .${classes.dialog}`]: {
- minWidth: theme.spacing(150),
-
- },
-
- [`& .${classes.tenantConfHeading}`]: {
- marginBottom: theme.spacing(1),
- },
-
- [`& .${classes.showSampleButton}`]: {
- marginTop: theme.spacing(2),
- },
-
- [`& .${classes.helperText}`]: {
- color: green[600],
- fontSize: theme.spacing(1.6),
- marginLeft: theme.spacing(1),
- },
-
- [`& .${classes.infoBox}`]: {
- marginTop: theme.spacing(1),
- marginBottom: theme.spacing(2),
- },
-
- [`& .${classes.buttonBox}`]: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(2),
- marginLeft: theme.spacing(1),
- },
-
- [`& .${classes.saveButton}`]: {
- marginRight: theme.spacing(2),
- },
-}));
-
const MonacoEditor = lazy(() => import('react-monaco-editor' /* webpackChunkName: "TeantConfAddMonacoEditor" */));
/**
@@ -193,7 +133,7 @@ function TenantConfSave() {
};
return (
-
)}
>
-
-
-
+
+
+
}>
-
+
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/AppsTableContent.jsx b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/AppsTableContent.jsx
index eeccf2cc2cb..f76e034b1f3 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/AppsTableContent.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/AppsTableContent.jsx
@@ -17,7 +17,6 @@
*/
import React, { Component } from 'react';
-import { styled } from '@mui/material/styles';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
@@ -25,67 +24,6 @@ import ResourceNotFound from 'AppComponents/Base/Errors/ResourceNotFound';
import EditApplication from 'AppComponents/ApplicationSettings/EditApplication';
import PropTypes from 'prop-types';
-const PREFIX = 'AppsTableContent';
-
-const classes = {
- head: `${PREFIX}-head`,
- body: `${PREFIX}-body`,
- root: `${PREFIX}-root`,
- root2: `${PREFIX}-root2`,
- fullHeight: `${PREFIX}-fullHeight`,
- tableRow: `${PREFIX}-tableRow`,
- appOwner: `${PREFIX}-appOwner`,
- appName: `${PREFIX}-appName`,
- appTablePaper: `${PREFIX}-appTablePaper`,
- tableCellWrapper: `${PREFIX}-tableCellWrapper`,
-};
-
-const StyledTableBody = styled(TableBody)(({ theme }) => ({
- [`&.${classes.fullHeight}`]: {
- height: '100%',
- },
-
- [`& .${classes.tableRow}`]: {
- height: theme.spacing(5),
- '& td': {
- padding: theme.spacing(0.5),
- },
- },
-
- [`& .${classes.appOwner}`]: {
- pointerEvents: 'none',
- },
-
- [`& .${classes.appName}`]: {
- '& a': {
- color: '#1b9ec7 !important',
- },
- },
-
- [`& .${classes.appTablePaper}`]: {
- '& table tr td': {
- paddingLeft: theme.spacing(1),
- },
- '& table tr td:first-child, & table tr th:first-child': {
- paddingLeft: theme.spacing(2),
- },
- '& table tr td button.Mui-disabled span.material-icons': {
- color: theme.palette.action.disabled,
- },
- },
-
- [`& .${classes.tableCellWrapper}`]: {
- '& td': {
- 'word-break': 'break-all',
- 'white-space': 'normal',
- },
- },
-}));
-
-const StyledTableCell = TableCell;
-
-const StyledTableRow = TableRow;
-
/**
*
*
@@ -133,54 +71,40 @@ class AppsTableContent extends Component {
return ;
}
return (
-
+
{apps && apps.map((app) => {
return (
-
-
+
{app.name}
-
-
+
+
{app.owner}
-
-
+
+
-
-
+
+
);
})}
-
+
);
}
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/EditApplication.jsx b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/EditApplication.jsx
index 0ee1f20e88f..072d6cc1573 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/EditApplication.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/EditApplication.jsx
@@ -24,17 +24,7 @@ import TextField from '@mui/material/TextField';
import { FormattedMessage } from 'react-intl';
import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase';
-const PREFIX = 'Edit';
-
-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
@@ -147,7 +137,7 @@ function Edit(props) {
}
};
return (
-
- *
+ *
)}
fullWidth
@@ -189,7 +179,7 @@ function Edit(props) {
)}
variant='outlined'
/>
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/ListApplications.jsx b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/ListApplications.jsx
index 5244c2b20f4..466e7dfaa0c 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/ListApplications.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/ApplicationSettings/ListApplications.jsx
@@ -17,7 +17,6 @@
*/
import React, { useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
import API from 'AppData/api';
import { useIntl, FormattedMessage } from 'react-intl';
import EditApplication from 'AppComponents/ApplicationSettings/EditApplication';
@@ -42,35 +41,6 @@ import SearchIcon from '@mui/icons-material/Search';
import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';
-const PREFIX = 'ListApplications';
-
-const classes = {
- searchBar: `${PREFIX}-searchBar`,
- block: `${PREFIX}-block`,
- clearSearch: `${PREFIX}-clearSearch`,
- addUser: `${PREFIX}-addUser`,
-};
-
-const StyledContentBase = styled(ContentBase)(({ theme }) => ({
- [`& .${classes.searchBar}`]: {
- borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
- },
-
- [`& .${classes.block}`]: {
- display: 'block',
- },
-
- [`& .${classes.clearSearch}`]: {
- position: 'absolute',
- right: 111,
- top: 13,
- },
-
- [`& .${classes.addUser}`]: {
- marginRight: theme.spacing(1),
- },
-}));
-
export default function ListApplications() {
const intl = useIntl();
@@ -160,13 +130,18 @@ export default function ListApplications() {
}
return (
-
-
+
+
)}
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Avatar.jsx b/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Avatar.jsx
index 178e2b66fbf..48fd3444a58 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Avatar.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Avatar.jsx
@@ -1,6 +1,5 @@
/* eslint-disable react/sort-comp */
import React, { Component } from 'react';
-import { styled } from '@mui/material/styles';
import {
IconButton,
Menu,
@@ -13,32 +12,6 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Configurations from 'Config';
-const PREFIX = 'Avatar';
-
-const classes = {
- profileMenu: `${PREFIX}-profileMenu`,
- userLink: `${PREFIX}-userLink`,
- accountIcon: `${PREFIX}-accountIcon`,
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled('div')(({ theme }) => ({
- [`& .${classes.profileMenu}`]: {
- zIndex: theme.zIndex.modal + 1,
- paddingTop: '5px',
- },
-
- [`& .${classes.userLink}`]: {
- fontSize: theme.typography.fontSize,
- textTransform: 'uppercase',
- fontWeight: 'bold',
- },
-
- [`& .${classes.accountIcon}`]: {
- marginRight: 10,
- },
-}));
-
/**
* Render the User Avatar with their name inside the Top AppBar component
*
@@ -101,17 +74,21 @@ class Avatar extends Component {
}
const { anchorEl } = this.state;
return (
-
+ <>
+
);
}
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/Base/Header/index.jsx b/portals/admin/src/main/webapp/source/src/app/components/Base/Header/index.jsx
index 137e8df6da6..e966159018c 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/Base/Header/index.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/Base/Header/index.jsx
@@ -16,7 +16,6 @@
* under the License.
*/
import React from 'react';
-import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
import { Avatar as AvatarComponent } from '@mui/material';
import Grid from '@mui/material/Grid';
@@ -26,50 +25,6 @@ import MenuIcon from '@mui/icons-material/Menu';
import Toolbar from '@mui/material/Toolbar';
import Breadcrumbs from 'AppComponents/Base/Header/Breadcrumbs';
-const lightColor = 'rgba(255, 255, 255, 0.7)';
-
-const PREFIX = 'index';
-
-const classes = {
- secondaryBar: `${PREFIX}-secondaryBar`,
- menuButton: `${PREFIX}-menuButton`,
- iconButtonAvatar: `${PREFIX}-iconButtonAvatar`,
- link: `${PREFIX}-link`,
- button: `${PREFIX}-button`,
- headerToolbar: `${PREFIX}-headerToolbar`,
-};
-
-const Root = styled('div')(({ theme }) => ({
- [`& .${classes.secondaryBar}`]: {
- zIndex: 0,
- },
-
- [`& .${classes.menuButton}`]: {
- marginLeft: -theme.spacing(1),
- },
-
- [`& .${classes.iconButtonAvatar}`]: {
- padding: 4,
- },
-
- [`& .${classes.link}`]: {
- textDecoration: 'none',
- color: lightColor,
- '&:hover': {
- color: theme.palette.common.white,
- },
- },
-
- [`& .${classes.button}`]: {
- borderColor: lightColor,
- },
-
- [`& .${classes.headerToolbar}`]: {
- boxShadow: '0 -1px 0 #dddddd inset',
- height: 50,
- },
-}));
-
/**
* Render header component
* @param {JSON} props .
@@ -79,8 +34,8 @@ function Header(props) {
const { handleDrawerToggle, avatar } = props;
return (
-
-
+ <>
+
@@ -88,7 +43,7 @@ function Header(props) {
color='inherit'
aria-label='open drawer'
onClick={() => handleDrawerToggle()}
- className={classes.menuButton}
+ sx={{ ml: -1 }}
size='large'
>
@@ -105,7 +60,7 @@ function Header(props) {
-
+
);
}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/Base/index.jsx b/portals/admin/src/main/webapp/source/src/app/components/Base/index.jsx
index 6fd01ff0a08..f9ca5f08d53 100644
--- a/portals/admin/src/main/webapp/source/src/app/components/Base/index.jsx
+++ b/portals/admin/src/main/webapp/source/src/app/components/Base/index.jsx
@@ -24,44 +24,16 @@ import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
import { Toaster } from 'react-hot-toast';
-const drawerWidth = 256;
+const StyledDiv = styled('div')({});
-const PREFIX = 'index';
+const StyledNav = styled('nav')({});
-const classes = {
- root: `${PREFIX}-root`,
- drawer: `${PREFIX}-drawer`,
- app: `${PREFIX}-app`,
- footer: `${PREFIX}-footer`,
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled('div')(({ theme }) => ({
- [`& .${classes.root}`]: {
- display: 'flex',
- minHeight: '100vh',
- },
-
- [`& .${classes.drawer}`]: {
- [theme.breakpoints.up('sm')]: {
- width: drawerWidth,
- flexShrink: 0,
- },
- },
-
- [`& .${classes.app}`]: {
- flex: 1,
- display: 'flex',
- flexDirection: 'column',
- },
-
- [`& .${classes.footer}`]: {
- padding: theme.spacing(2),
- background: '#eaeff1',
- position: 'relative',
- bottom: 0,
- },
-}));
+const StyledFooter = styled('footer')({
+ padding: 2,
+ background: '#eaeff1',
+ position: 'relative',
+ bottom: 0,
+});
/**
* Render copyright
@@ -69,7 +41,7 @@ const Root = styled('div')(({ theme }) => ({
*/
function Copyright() {
return (
-
+