Merge pull request #849 from nimsara66/3407

Add scopes details to tooltip in `CustomPadLock`

Author: hisanhunais

portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx

@@ -17,14 +17,33 @@
  */
 
 import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import 'swagger-ui-react/swagger-ui.css';
 import LockIcon from '@mui/icons-material/Lock';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Grid from '@mui/material/Grid';
+import {
+    IconButton, Tooltip, Grid, Table, TableBody, TableCell, TableRow,
+} from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 
+const StyledTableCell = styled(TableCell)(() => ({
+    color: 'white',
+    paddingBottom: '0',
+    paddingLeft: '0',
+    paddingTop: '0',
+    textAlign: 'left',
+}));
+
+const StyledScopeCell = styled(TableCell)(() => ({
+    color: 'white',
+    padding: '0',
+    textAlign: 'left',
+    borderBottom: 'none',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+
 /**
  *
  *
@@ -38,6 +57,27 @@ function isSecurityEnabled(spec, resourcePath) {
     return operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none';
 }
 
+/**
+ *
+ *
+ * @export
+ * @param {*} spec
+ * @param {*} resourcePath
+ * @returns
+ */
+function getScopesForOperation(spec, resourcePath) {
+    const operation = resourcePath.reduce((a, v) => a[v], spec);
+    const security = operation.security || [];
+    const scopes = [];
+
+    security.forEach((auth) => {
+        Object.values(auth).forEach((scopeList) => {
+            scopes.push(...scopeList);
+        });
+    });
+    return scopes;
+}
+
 /**
  *
  * Handles the resource level lock icon
@@ -52,6 +92,7 @@ function CustomPadLock(props) {
         BaseLayout, oldProps, spec,
     } = props;
     const securityEnabled = useMemo(() => isSecurityEnabled(spec, oldProps.specPath), []);
+    const scopes = useMemo(() => getScopesForOperation(spec, oldProps.specPath), []);
 
     return (
         <div>
@@ -61,22 +102,58 @@ function CustomPadLock(props) {
                 </Grid>
                 <Grid item justifyContent='flex-end' alignItems='right'>
                     <Tooltip
-                        title={
-                            (securityEnabled)
-                                ? (
-                                    <FormattedMessage
-                                        id={'Apis.Details.Resources.components.Operation.disable.security'
-                                            + '.when.used.in.api.products'}
-                                        defaultMessage='Security enabled'
-                                    />
-                                )
-                                : (
-                                    <FormattedMessage
-                                        id='Apis.Details.Resources.components.enabled.security'
-                                        defaultMessage='No security'
-                                    />
-                                )
-                        }
+                        title={(
+                            <Table size='small'>
+                                <TableBody>
+                                    <TableRow>
+                                        <StyledTableCell>
+                                            <FormattedMessage
+                                                id='Apis.Details.Resources.components.Operation.security'
+                                                defaultMessage='Security'
+                                            />
+                                        </StyledTableCell>
+                                        <StyledTableCell>
+                                            {securityEnabled
+                                                ? (
+                                                    <FormattedMessage
+                                                        id='Apis.Details.Resources.components.Operation.security.enabled'
+                                                        defaultMessage='Enabled'
+                                                    />
+                                                )
+                                                : (
+                                                    <FormattedMessage
+                                                        id='Apis.Details.Resources.components.Operation.security.disabled'
+                                                        defaultMessage='Disabled'
+                                                    />
+                                                )}
+                                        </StyledTableCell>
+                                    </TableRow>
+                                    {securityEnabled && (
+                                        <TableRow>
+                                            <StyledTableCell>
+                                                <FormattedMessage
+                                                    id='Apis.Details.Resources.components.Operation.scopes'
+                                                    defaultMessage='Scopes'
+                                                />
+                                            </StyledTableCell>
+                                            <StyledTableCell style={{ maxWidth: 100, paddingRight: 0 }}>
+                                                {scopes.length > 0 && (
+                                                    scopes.map((scope, index) => (
+                                                    // eslint-disable-next-line react/no-array-index-key
+                                                        <TableRow key={index}>
+                                                            <StyledScopeCell style={{ maxWidth: 100 }}>
+                                                                {scope}
+                                                            </StyledScopeCell>
+                                                        </TableRow>
+                                                    ))
+                                                )}
+                                            </StyledTableCell>
+                                        </TableRow>
+                                    )}
+
+                                </TableBody>
+                            </Table>
+                        )}
                         aria-label={(
                             <FormattedMessage
                                 id='Apis.Details.Resources.components.Operation.security.operation'