Migrated webapp/source/src/app/components/Apis/Details/Credentials/Wi…

…zard

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Credentials/Wizard/CopyAccessTokenStep.jsx

@@ -17,18 +17,29 @@
  */
 
 import React, { useContext } from 'react';
+import { styled } from '@mui/material/styles';
 import ViewToken from 'AppComponents/Shared/AppsAndKeys/ViewToken';
 import { ApiContext } from 'AppComponents/Apis/Details/ApiContext';
 import { Box } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import { useHistory } from 'react-router-dom';
-import makeStyles from '@mui/styles/makeStyles';
 import ButtonPanel from './ButtonPanel';
 
-const useStyles = makeStyles((theme) => ({
-    tokenWrapper: {
+const PREFIX = 'copyAccessTokenStep';
+
+const classes = {
+    tokenWrapper: `${PREFIX}-tokenWrapper`,
+};
+
+const Root = styled('div')((
+    {
+        theme,
+    },
+) => ({
+    [`&.${classes.tokenWrapper}`]: {
         paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(25),
+        paddingRight: theme.spacing(2),
+        width: '160%',
     },
 }));
 
@@ -41,10 +52,9 @@ const copyAccessTokenStep = (props) => {
     const completeStep = () => {
         updateSubscriptionData(history.push(`/apis/${api.id}/credentials`));
     };
-    const classes = useStyles();
 
     return (
-        <div className={classes.tokenWrapper}>
+        <Root className={classes.tokenWrapper}>
             <Grid md={10}>
                 <Box my={1} mx={2}>
                     <ViewToken token={{ ...createdToken, isOauth: true }} />
@@ -56,7 +66,7 @@ const copyAccessTokenStep = (props) => {
                 handleCurrentStep={completeStep}
                 handleReset={handleReset}
             />
-        </div>
+        </Root>
     );
 };
 

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Credentials/Wizard/CreateAppStep.jsx

@@ -17,6 +17,7 @@
  */
 
 import React, { useState, useEffect, useContext } from 'react';
+import { styled } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -25,18 +26,28 @@ import API from 'AppData/api';
 import Alert from 'AppComponents/Shared/Alert';
 import cloneDeep from 'lodash.clonedeep';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import makeStyles from '@mui/styles/makeStyles';
 import Button from '@mui/material/Button';
 import InlineMessage from 'AppComponents/Shared/InlineMessage';
 import { ApiContext } from 'AppComponents/Apis/Details/ApiContext';
 import ButtonPanel from './ButtonPanel';
 
-const useStyles = makeStyles((theme) => ({
-    appCreateFormWrapper: {
+const PREFIX = 'CreateAppStep';
+
+const classes = {
+    appCreateFormWrapper: `${PREFIX}-appCreateFormWrapper`,
+    warningIcon: `${PREFIX}-warningIcon`,
+};
+
+const Root = styled('div')((
+    {
+        theme,
+    },
+) => ({
+    [`&.${classes.appCreateFormWrapper}`]: {
         paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(80),
     },
-    warningIcon: {
+
+    [`& .${classes.warningIcon}`]: {
         color: '#ff9a00',
         fontSize: 43,
         marginRight: 10,
@@ -229,7 +240,6 @@ const createAppStep = (props) => {
             });
     }, []);
 
-    const classes = useStyles();
     if (!hasValidKM) {
         return (
             <Box mb={1} ml={4}>
@@ -255,7 +265,7 @@ const createAppStep = (props) => {
     }
 
     return (
-        <div className={classes.appCreateFormWrapper}>
+        <Root className={classes.appCreateFormWrapper}>
             <Box px={2} display='flex' justifyContent='flex-start'>
                 <Grid item xs={10} md={6}>
                     <ApplicationCreateForm
@@ -278,7 +288,7 @@ const createAppStep = (props) => {
                 currentStep={currentStep}
                 handleCurrentStep={createApplication}
             />
-        </div>
+        </Root>
     );
 };
 

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Credentials/Wizard/GenerateAccessTokenStep.jsx

@@ -17,20 +17,33 @@
  */
 
 import React, { useState, useEffect } from 'react';
+import { styled } from '@mui/material/styles';
 import Tokens from 'AppComponents/Shared/AppsAndKeys/Tokens';
 import Application from 'AppData/Application';
-import makeStyles from '@mui/styles/makeStyles';
 import { defineMessages, useIntl } from 'react-intl';
 import Typography from '@mui/material/Typography';
 import Alert from 'AppComponents/Shared/Alert';
 import ButtonPanel from './ButtonPanel';
 
-const useStyles = makeStyles((theme) => ({
-    tokenWrapper: {
+const PREFIX = 'generateAccessTokenStep';
+
+const classes = {
+    tokenWrapper: `${PREFIX}-tokenWrapper`,
+    title: `${PREFIX}-title`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+    {
+        theme,
+    },
+) => ({
+    [`& .${classes.tokenWrapper}`]: {
         paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(7),
+        width: '180%',
     },
-    title: {
+
+    [`& .${classes.title}`]: {
         paddingLeft: theme.spacing(2),
     },
 }));
@@ -108,7 +121,7 @@ const generateAccessTokenStep = (props) => {
                 }
             });
     };
-    const classes = useStyles();
+
     const messages = defineMessages({
         dataInfo: {
             id: 'Apis.Details.Credentials.Wizard.GenerateAccessTokenStep',
@@ -117,7 +130,7 @@ const generateAccessTokenStep = (props) => {
     });
 
     return (
-        <>
+        <Root>
             <div className={classes.tokenWrapper}>
                 <Typography variant='subtitle1' component='div' className={classes.title}>
                     {intl.formatMessage(messages.dataInfo, { keyType })}
@@ -133,7 +146,7 @@ const generateAccessTokenStep = (props) => {
                     handleCurrentStep={generateAccessToken}
                 />
             </div>
-        </>
+        </Root>
     );
 };
 

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Credentials/Wizard/GenerateKeysStep.jsx

@@ -17,6 +17,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -27,50 +28,78 @@ import Alert from 'AppComponents/Shared/Alert';
 import Application from 'AppData/Application';
 import API from 'AppData/api';
 import { FormattedMessage, useIntl } from 'react-intl';
-import makeStyles from '@mui/styles/makeStyles';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Settings from 'Settings';
 import ButtonPanel from './ButtonPanel';
 
-const useStyles = makeStyles((theme) => ({
-    keyConfigWrapper: {
+const PREFIX = 'generateKeysStep';
+
+const classes = {
+    keyConfigWrapper: `${PREFIX}-keyConfigWrapper`,
+    radioWrapper: `${PREFIX}-radioWrapper`,
+    paper: `${PREFIX}-paper`,
+    subTitle: `${PREFIX}-subTitle`,
+    tabPanel: `${PREFIX}-tabPanel`,
+    hr: `${PREFIX}-hr`,
+    muiFormGroupRoot: `${PREFIX}-muiFormGroupRoot`,
+    table: `${PREFIX}-table`,
+    leftCol: `${PREFIX}-leftCol`,
+    iconAligner: `${PREFIX}-iconAligner`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+    {
+        theme,
+    },
+) => ({
+    [`& .${classes.keyConfigWrapper}`]: {
         paddingLeft: theme.spacing(4),
         flexDirection: 'column',
     },
-    radioWrapper: {
+
+    [`& .${classes.radioWrapper}`]: {
         flexDirection: 'row',
     },
-    paper: {
+
+    [`& .${classes.paper}`]: {
         background: 'none',
         marginBottom: theme.spacing(2),
         marginTop: theme.spacing(2),
     },
-    subTitle: {
+
+    [`& .${classes.subTitle}`]: {
         fontWeight: 400,
     },
-    tabPanel: {
+
+    [`& .${classes.tabPanel}`]: {
         '& .MuiBox-root': {
             padding: 0,
         },
     },
-    hr: {
+
+    [`& .${classes.hr}`]: {
         border: 'solid 1px #efefef',
     },
-    muiFormGroupRoot: {
+
+    [`& .${classes.muiFormGroupRoot}`]: {
         flexDirection: 'row',
     },
-    table: {
+
+    [`& .${classes.table}`]: {
         minWidth: '100%',
         '& td, & th': {
             padding: theme.spacing(),
         },
     },
-    leftCol: {
+
+    [`& .${classes.leftCol}`]: {
         width: 200,
     },
-    iconAligner: {
+
+    [`& .${classes.iconAligner}`]: {
         display: 'flex',
         justifyContent: 'flex-start',
         alignItems: 'center',
@@ -91,7 +120,7 @@ function TabPanel(props) {
             {...other}
         >
             {value === index && (
-                <>{children}</>
+                (<Root>{children}</Root>)
             )}
         </div>
     );
@@ -212,15 +241,13 @@ const generateKeysStep = (props) => {
         });
     };
 
-    const classes = useStyles();
-
     return (
-        <>
-            <Box component='div' marginLeft={4}>
+        <Root>
+            <Box component='div' marginLeft={4} width='180%'>
                 <Grid container spacing={2}>
                     {keyManager && (
                         <>
-                            <Grid item xs={12} md={12} lg={3}>
+                            <Grid item xs={12} md={20} lg={3}>
                                 <Typography color='inherit' variant='subtitle2' component='div'>
                                     <FormattedMessage
                                         defaultMessage='Key Configuration'
@@ -326,7 +353,7 @@ const generateKeysStep = (props) => {
                     </Grid>
                 </Grid>
             </Box>
-        </>
+        </Root>
     );
 };
 

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Credentials/Wizard/SubscribeToAppStep.jsx

@@ -15,13 +15,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+/* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useContext } from 'react';
 import SubscribeToApi from 'AppComponents/Shared/AppsAndKeys/SubscribeToApi';
 import Alert from 'AppComponents/Shared/Alert';
 import API from 'AppData/api';
 import { ApiContext } from 'AppComponents/Apis/Details/ApiContext';
 import { injectIntl } from 'react-intl';
+import Box from '@mui/material/Box';
+import Tokens from 'AppComponents/Shared/AppsAndKeys/Tokens';
 import ButtonPanel from './ButtonPanel';
 
 const subscribeToAppStep = (props) => {
@@ -81,7 +83,7 @@ const subscribeToAppStep = (props) => {
     }, [createdApp]);
 
     return (
-        <>
+        <Box component='div' width='190%'>
             <SubscribeToApi
                 throttlingPolicyList={throttlingPolicyList}
                 applicationsAvailable={[newApp]}
@@ -93,7 +95,7 @@ const subscribeToAppStep = (props) => {
                 currentStep={currentStep}
                 handleCurrentStep={subscribeToApplication}
             />
-        </>
+        </Box>
     );
 };