Migrated webapp/source/src/app/components/Shared

wso2 · Feb 16, 2024 · 3a78c2b · 3a78c2b
1 parent e32a514
commit 3a78c2b
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 120 deletions.
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/ApiKey.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/ApiKey.jsx
@@ -16,23 +16,33 @@
  * under the License.
  */
 import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import withStyles from '@mui/styles/withStyles';
 import TextField from '@mui/material/TextField';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import Validation from 'AppData/Validation';
 
-// Styles for Grid and Paper elements
-const styles = theme => ({
-    FormControl: {
+const PREFIX = 'ApiKey';
+
+const classes = {
+    FormControl: `${PREFIX}-FormControl`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+    {
+        theme
+    }
+) => ({
+    [`& .${classes.FormControl}`]: {
         'margin-bottom': '8px',
         width: '100%',
         padding: '0px 10px',
-    },
-});
+    }
+}));
 
 /**
  * Used to display generate api key in UI
@@ -76,10 +86,10 @@ const tokens = (props) => {
         }
         updateAccessTokenRequest(newRequest);
     };
-    const { classes, intl, accessTokenRequest } = props;
+    const {  intl, accessTokenRequest } = props;
 
     return (
-        <React.Fragment>
+        <Root>
             <FormControl variant="standard" margin='normal' className={classes.FormControl}>
                 <FormControlLabel
                     control={<Checkbox
@@ -132,10 +142,10 @@ const tokens = (props) => {
                 />
                 }
             </FormControl>
-        </React.Fragment>
+        </Root>
     );
 };
 tokens.contextTypes = {
     intl: PropTypes.shape({}).isRequired,
 };
-export default injectIntl(withStyles(styles)(tokens));
+export default injectIntl((tokens));
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/ApiKeyRestriction.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/ApiKeyRestriction.jsx
@@ -16,9 +16,9 @@
  * under the License.
  */
 import React, { useState } from "react";
+import { styled } from '@mui/material/styles';
 import { injectIntl, FormattedMessage } from "react-intl";
 import PropTypes from "prop-types";
-import withStyles from '@mui/styles/withStyles';
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import IconButton from "@mui/material/IconButton";
@@ -38,23 +38,38 @@ import FormControl from "@mui/material/FormControl";
 import Typography from "@mui/material/Typography";
 import Validation from 'AppData/Validation';
 
-const styles = (theme) => ({
-  FormControl: {
+const PREFIX = 'ApiKeyRestriction';
+
+const classes = {
+  FormControl: `${PREFIX}-FormControl`,
+  outterBox: `${PREFIX}-outterBox`,
+  Fab: `${PREFIX}-Fab`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.FormControl}`]: {
     "margin-bottom": theme.spacing(1),
     width: "100%",
     padding: theme.spacing(0, 1),
   },
-  outterBox: {
+
+  [`& .${classes.outterBox}`]: {
     margin: theme.spacing(1),
     padding: theme.spacing(1),
     marginLeft: 20,
     borderColor: '#cccccc',
   },
-  Fab: {
+
+  [`& .${classes.Fab}`]: {
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
-  },
-});
+  }
+}));
 
 /**
  * Used to display IP address and Http Referer restrictions in generate api key UI
@@ -65,7 +80,6 @@ const apiKeyRestrictions = (props) => {
 
   const {
     intl,
-    classes,
     newIP,
     updateNewIp,
     ipList,
@@ -137,7 +151,7 @@ const apiKeyRestrictions = (props) => {
   };
 
   return (
-    <React.Fragment>
+    <Root>
       <Box border={1} borderRadius="5px" className={classes.outterBox}>
         <Typography variant="body1">
           <FormattedMessage
@@ -372,10 +386,10 @@ const apiKeyRestrictions = (props) => {
           </Box>
         )}
       </Box>
-    </React.Fragment>
+    </Root>
   );
 };
 apiKeyRestrictions.contextTypes = {
   intl: PropTypes.shape({}).isRequired,
 };
-export default injectIntl(withStyles(styles)(apiKeyRestrictions));
+export default injectIntl((apiKeyRestrictions));
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/ConfirmDialog.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/ConfirmDialog.jsx
@@ -16,26 +16,37 @@
  * under the License.
  */
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import {
     Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle,
 } from '@mui/material';
 import Button from '@mui/material/Button';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import withStyles from '@mui/styles/withStyles';
+const PREFIX = 'ConfirmDialog';
 
-const styles = (theme) => ({
-    dialogWrapper: {
+const classes = {
+    dialogWrapper: `${PREFIX}-dialogWrapper`,
+    deleteConformButton: `${PREFIX}-deleteConformButton`
+};
+
+const StyledDialog = styled(Dialog)((
+    {
+        theme
+    }
+) => ({
+    [`&.${classes.dialogWrapper}`]: {
         '& span, & h5, & label, & td, & li, & div, & p': {
             color: theme.palette.getContrastText(theme.palette.background.paper),
         },
     },
-    deleteConformButton: {
+
+    [`& .${classes.deleteConformButton}`]: {
         '& span.MuiButton-label': {
             color: theme.palette.getContrastText(theme.palette.primary.main),
         },
-    },
-});
+    }
+}));
 
 /**
  * React component for handling confirmation dialog box
@@ -64,11 +75,11 @@ class ConfirmDialog extends React.Component {
      */
     render() {
         const {
-            title, message, labelCancel, labelOk, open, classes,
+            title, message, labelCancel, labelOk, open,
         } = this.props;
 
         return (
-            <Dialog role='alertdialog' open={open} onClose={this.handleRequestClose} className={classes.dialogWrapper}>
+            <StyledDialog role='alertdialog' open={open} onClose={this.handleRequestClose} className={classes.dialogWrapper}>
                 <DialogTitle>{title || <FormattedMessage id='Shared.ConfirmDialog.please.confirm' defaultMessage='Please Confirm' />}</DialogTitle>
                 <DialogContent>
                     <DialogContentText>{message || <FormattedMessage id='Shared.ConfirmDialog.please.confirm.sure' defaultMessage='Are you sure?' />}</DialogContentText>
@@ -86,7 +97,7 @@ class ConfirmDialog extends React.Component {
                         {labelOk || <FormattedMessage id='Shared.ConfirmDialog.ok' defaultMessage='OK' />}
                     </Button>
                 </DialogActions>
-            </Dialog>
+            </StyledDialog>
         );
     }
 }
@@ -104,4 +115,4 @@ ConfirmDialog.Action = {
     CANCEL: 'cancel',
 };
 
-export default withStyles(styles)(ConfirmDialog);
+export default (ConfirmDialog);
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/GenericDisplayDialog.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/GenericDisplayDialog.jsx
@@ -17,28 +17,40 @@
  */
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import InlineMessage from 'AppComponents/Shared/InlineMessage';
 import { Typography } from '@mui/material';
 import Button from '@mui/material/Button';
-import makeStyles from '@mui/styles/makeStyles';
 import { ScopeValidation, resourceMethods, resourcePaths } from 'AppComponents/Shared/ScopeValidation';
 
-const useStyles = makeStyles((theme) => ({
-    appContent: {
+const PREFIX = 'genericDisplayDialog';
+
+const classes = {
+    appContent: `${PREFIX}-appContent`,
+    button: `${PREFIX}-button`
+};
+
+const Root = styled('div')((
+    {
+        theme
+    }
+) => ({
+    [`&.${classes.appContent}`]: {
         margin: theme.spacing(2),
     },
-    button: {
+
+    [`& .${classes.button}`]: {
         color: theme.palette.getContrastText(theme.palette.primary.main),
-    },
-  }));
+    }
+}));
 
 const genericDisplayDialog = (props) => {
     const {
         handleClick, heading, caption, buttonText,
     } = props;
-    const classes = useStyles();
+
     return (
-        <div className={classes.appContent}>
+        <Root className={classes.appContent}>
             <InlineMessage type='info' className={classes.dialogContainer}>
                 <Typography variant='h5' component='h2'>
                     {heading}
@@ -58,7 +70,7 @@ const genericDisplayDialog = (props) => {
                     </Button>
                 </ScopeValidation>
             </InlineMessage>
-        </div>
+        </Root>
     );
 };
 

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/InlineMessage.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/InlineMessage.jsx
@@ -1,25 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@mui/styles/withStyles';
-import Paper from '@mui/material/Paper';
-import Icon from '@mui/material/Icon';
-import VerticalDivider from './VerticalDivider';
 import { Alert, AlertTitle } from '@mui/material';
-import CircularProgress from "@mui/material/CircularProgress";
 
-/**
- * Main style object
- *
- * @param {*} theme
- */
-const styles = theme => ({
-    root: {
-        width: '100%',
-        '& > * + *': {
-            marginTop: theme.spacing(2),
-        },
-    },
-});
 /**
  *  Renders a inline massage
  *