From 5019163d38a836e20060ff8f66ac4aea26f8e9ed Mon Sep 17 00:00:00 2001
From: GihanAyesh <gihanayeshmanthadrck@gmail.com>
Date: Wed, 18 Oct 2023 12:02:33 +0530
Subject: [PATCH] change deployments to two column structure

---
 .../main/webapp/site/public/locales/en.json   |  22 +-
 .../webapp/site/public/locales/raw.en.json    |  16 +-
 .../Details/Environments/Environments.jsx     | 418 ++++++++----------
 3 files changed, 213 insertions(+), 243 deletions(-)

diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json
index 8444e8aa321..0c6833b14dc 100644
--- a/portals/publisher/src/main/webapp/site/public/locales/en.json
+++ b/portals/publisher/src/main/webapp/site/public/locales/en.json
@@ -637,6 +637,12 @@
       "value": "Protocol"
     }
   ],
+  "Apis.Details.\n                                                                                            Environments.Environments.\n                                                                                            pending.chip": [
+    {
+      "type": 0,
+      "value": "Pending"
+    }
+  ],
   "Apis.Details.\n                                                                                Environments.deploy.vhost": [
     {
       "type": 0,
@@ -4337,10 +4343,10 @@
       "value": "Display in Developer Portal"
     }
   ],
-  "Apis.Details.Environments.Environments.gateway\n                                                    .deployed.revision": [
+  "Apis.Details.Environments.Environments.gateway\n                                                    .deployment.current.revision": [
     {
       "type": 0,
-      "value": "Deployed Revision"
+      "value": "Current Revision"
     }
   ],
   "Apis.Details.Environments.Environments.gateway.accessUrl": [
@@ -4355,10 +4361,10 @@
       "value": "Action"
     }
   ],
-  "Apis.Details.Environments.Environments.gateway.status": [
+  "Apis.Details.Environments.Environments.gateway.deployment.next.revision": [
     {
       "type": 0,
-      "value": "Deployment Status"
+      "value": "Next Revision"
     }
   ],
   "Apis.Details.Environments.Environments.pending.chip": [
@@ -4527,16 +4533,10 @@
       "value": "Solace Platform Environments"
     }
   ],
-  "Apis.Details.Environments.Environments.status.deployed": [
-    {
-      "type": 0,
-      "value": "Deployed"
-    }
-  ],
   "Apis.Details.Environments.Environments.status.not.deployed": [
     {
       "type": 0,
-      "value": "N/A"
+      "value": "No Revision Deployed"
     }
   ],
   "Apis.Details.Environments.Environments.undeploy.btn": [
diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json
index 2b8484fe56c..aaf9f58c97f 100644
--- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json
+++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json
@@ -278,6 +278,9 @@
   "Apis.Create.streaming.Components.SelectPolicies.business.plans": {
     "defaultMessage": "Protocol"
   },
+  "Apis.Details.\n                                                                                            Environments.Environments.\n                                                                                            pending.chip": {
+    "defaultMessage": "Pending"
+  },
   "Apis.Details.\n                                                                                Environments.deploy.vhost": {
     "defaultMessage": "VHost"
   },
@@ -2061,8 +2064,8 @@
   "Apis.Details.Environments.Environments.display.in.devportal": {
     "defaultMessage": "Display in Developer Portal"
   },
-  "Apis.Details.Environments.Environments.gateway\n                                                    .deployed.revision": {
-    "defaultMessage": "Deployed Revision"
+  "Apis.Details.Environments.Environments.gateway\n                                                    .deployment.current.revision": {
+    "defaultMessage": "Current Revision"
   },
   "Apis.Details.Environments.Environments.gateway.accessUrl": {
     "defaultMessage": "Gateway Access URL"
@@ -2070,8 +2073,8 @@
   "Apis.Details.Environments.Environments.gateway.action": {
     "defaultMessage": "Action"
   },
-  "Apis.Details.Environments.Environments.gateway.status": {
-    "defaultMessage": "Deployment Status"
+  "Apis.Details.Environments.Environments.gateway.deployment.next.revision": {
+    "defaultMessage": "Next Revision"
   },
   "Apis.Details.Environments.Environments.pending.chip": {
     "defaultMessage": "Pending"
@@ -2142,11 +2145,8 @@
   "Apis.Details.Environments.Environments.solace.platform.environments.heading": {
     "defaultMessage": "Solace Platform Environments"
   },
-  "Apis.Details.Environments.Environments.status.deployed": {
-    "defaultMessage": "Deployed"
-  },
   "Apis.Details.Environments.Environments.status.not.deployed": {
-    "defaultMessage": "N/A"
+    "defaultMessage": "No Revision Deployed"
   },
   "Apis.Details.Environments.Environments.undeploy.btn": {
     "defaultMessage": "Undeploy"
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Environments/Environments.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Environments/Environments.jsx
index 086db516315..fd0f40cdb63 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Environments/Environments.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Environments/Environments.jsx
@@ -1523,77 +1523,6 @@ export default function Environments() {
             return gateway.name === row.name});
         const gatewayRevisions = deployingGateway?.revisions;
     
-        if (!gatewayRevisions.length) {
-            // Content to display when there is no revision
-            return (
-                <FormattedMessage
-                    id='Apis.Details.Environments.Environments.status.not.deployed'
-                    defaultMessage='N/A'
-                />
-            );
-        }
-        const pendingDeployment =gatewayRevisions.find(revision => {
-            return revision.deploymentInfo.some(info => info.status === "CREATED" && info.name === row.name);});
-
-        const hasApprovedDeployment =gatewayRevisions.some(revision => {
-            return revision.deploymentInfo.some(info => (info.status === null || info.status === "APPROVED") && 
-            info.name === row.name);});
-
-        if (pendingDeployment) {
-            // Content to display when revision status is created
-            return (
-                <div>
-                    <Chip
-                        label={
-                            <div style={{ whiteSpace: 'normal', fontSize:'smaller' }}> 
-                                <FormattedMessage
-                                    id='Apis.Details.Environments.Environments.pending.chip'
-                                    defaultMessage='Pending'
-                                />
-                                <br />
-                                {pendingDeployment.displayName}
-                            </div>
-                        }
-                        style={{ backgroundColor: '#FFBF00' }}
-                    />
-                    <Button
-                        className={classes.button1}
-                        variant='outlined'
-                        disabled={api.isRevision || isRestricted(['apim:api_create', 'apim:api_publish'], api)}
-                        onClick={() => cancelRevisionDeploymentWorkflow(pendingDeployment.id, row.name)}
-                        size='small'
-                        id='cancel-btn'
-                    >
-                        <FormattedMessage
-                            id='Apis.Details.Environments.Environments.cancel.btn'
-                            defaultMessage='Cancel'
-                        />
-                    </Button>
-                </div>
-            );
-        } else if (hasApprovedDeployment ) {
-            // Content to display when revision status is approved
-            return (
-                <FormattedMessage
-                    id='Apis.Details.Environments.Environments.status.deployed'
-                    defaultMessage='Deployed'
-                />
-            );
-        } 
-        return (<div/>);
-    }
-
-    /**
-     * Get the deployment component based on the environment and revision status.
-     * @param {*} row Row
-     * @param {*} allEnvRevisionMapping All environment revision mapping
-     * @returns {JSX.Element} The JSX element representing the deployment component
-     */
-    function getDeployedRevisionComponent(row, allEnvRevisionMapping) {
-        const deployingGateway = allEnvRevisionMapping.find(gateway => {
-            return gateway.name === row.name});
-        const gatewayRevisions = deployingGateway?.revisions;
-    
         if (!gatewayRevisions.length) {
             // Content to display when there is no revision
             return (
@@ -1670,153 +1599,156 @@ export default function Environments() {
             }
             return true;
         });
-    
-        if (approvedDeployment) {
+
+        if (pendingDeployment) {
+            // Content to display when revision status is created
             return (
                 <div>
-                    <div>
-                        <Chip
-                            label={approvedDeployment.displayName}
-                            style={{ backgroundColor: '#15B8CF' }}
-                        />
-                        <Button
-                            className={classes.button1}
-                            variant='outlined'
-                            disabled={api.isRevision || isRestricted(['apim:api_create', 'apim:api_publish'], api)}
-                            onClick={() => undeployRevision(approvedDeployment.id, row.name)}
-                            size='small'
-                            id='undeploy-btn'
-                        >
-                            <FormattedMessage
-                                id='Apis.Details.Environments.Environments.undeploy.btn'
-                                defaultMessage='Undeploy'
-                            />
-                        </Button>
-                    </div>
-                    {filteredRevisions.length > 0 && ( <div>
-                        <TextField
-                            id='revision-selector'
-                            select
-                            label={(
+                    <Chip
+                        label={
+                            <div style={{ whiteSpace: 'normal', fontSize:'smaller' }}> 
                                 <FormattedMessage
-                                    id='Apis.Details.Environments.Environments.select.table'
-                                    defaultMessage='Select Revision'
+                                    id='Apis.Details.Environments.Environments.pending.chip'
+                                    defaultMessage='Pending'
                                 />
-                            )}
-                            SelectProps={{
-                                MenuProps: {
-                                    anchorOrigin: {
-                                        vertical: 'bottom',
-                                        horizontal: 'left',
-                                    },
-                                    getContentAnchorEl: null,
-                                },
-                            }}
-                            name={row.name}
-                            onChange={handleSelect}
-                            margin='dense'
-                            variant='outlined'
-                            style={{ width: '50%' }}
-                            disabled={api.isRevision || !allRevisions || allRevisions.length === 0}
-                        >
-                            {filteredRevisions.map
-                            ((number) => (
-                                <MenuItem 
-                                    value={number.id}>{number.displayName}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                        <Button
-                            className={classes.button2}
-                            disabled={
-                                api.isRevision ||
-                                !selectedRevision.some((r) => r.env === row.name && r.revision) ||
-                                !selectedVhosts.some((v) => v.env === row.name && v.vhost) ||
-                                (api.advertiseInfo && api.advertiseInfo.advertised) ||
-                                isDeployButtonDisabled
-                            }
-                            variant='outlined'
-                            onClick={() =>
-                                deployRevision(
-                                    selectedRevision.find((r) => r.env === row.name).revision,
-                                    row.name,
-                                    selectedVhosts.find((v) => v.env === row.name).vhost,
-                                    selectedRevision.find((r) => r.env === row.name).displayOnDevPortal
-                                )
-                            }
-                        >
-                            <FormattedMessage
-                                id='Apis.Details.Environments.Environments.deploy.button'
-                                defaultMessage='Deploy'
-                            />
-                        </Button>
-                    </div> 
-                    )}
+                                <br />
+                                {pendingDeployment.displayName}
+                            </div>
+                        }
+                        style={{ backgroundColor: '#FFBF00' }}
+                    />
+                    <Button
+                        className={classes.button1}
+                        variant='outlined'
+                        disabled={api.isRevision || isRestricted(['apim:api_create', 'apim:api_publish'], api)}
+                        onClick={() => cancelRevisionDeploymentWorkflow(pendingDeployment.id, row.name)}
+                        size='small'
+                        id='cancel-btn'
+                    >
+                        <FormattedMessage
+                            id='Apis.Details.Environments.Environments.cancel.btn'
+                            defaultMessage='Cancel'
+                        />
+                    </Button>
                 </div>
             );
-            
-        } else if (pendingDeployment) {
+        }
+        return (
+            <div>
+                <TextField
+                    id='revision-selector'
+                    select
+                    label={(
+                        <FormattedMessage
+                            id='Apis.Details.Environments.Environments.select.table'
+                            defaultMessage='Select Revision'
+                        />
+                    )}
+                    SelectProps={{
+                        MenuProps: {
+                            anchorOrigin: {
+                                vertical: 'bottom',
+                                horizontal: 'left',
+                            },
+                            getContentAnchorEl: null,
+                        },
+                    }}
+                    name={row.name}
+                    onChange={handleSelect}
+                    margin='dense'
+                    variant='outlined'
+                    style={{ width: '50%' }}
+                    disabled={api.isRevision || !filteredRevisions || filteredRevisions.length === 0}
+                >
+                    {filteredRevisions && filteredRevisions.length !== 0 && filteredRevisions.map((number) => (
+                        <MenuItem value={number.id}>{number.displayName}</MenuItem>
+                    ))}
+                </TextField>
+                <Button
+                    className={classes.button2}
+                    disabled={
+                        api.isRevision ||
+                        !selectedRevision.some((r) => r.env === row.name && r.revision) ||
+                        !selectedVhosts.some((v) => v.env === row.name && v.vhost) ||
+                        (api.advertiseInfo && api.advertiseInfo.advertised) ||
+                        isDeployButtonDisabled
+                    }
+                    variant='outlined'
+                    onClick={() =>
+                        deployRevision(
+                            selectedRevision.find((r) => r.env === row.name).revision,
+                            row.name,
+                            selectedVhosts.find((v) => v.env === row.name).vhost,
+                            selectedRevision.find((r) => r.env === row.name).displayOnDevPortal
+                        )
+                    }
+                >
+                    <FormattedMessage
+                        id='Apis.Details.Environments.Environments.deploy.button'
+                        defaultMessage='Deploy'
+                    />
+                </Button>
+            </div>
+        );
+    }
+
+    /**
+     * Get the deployment component based on the environment and revision status.
+     * @param {*} row Row
+     * @param {*} allEnvRevisionMapping All environment revision mapping
+     * @returns {JSX.Element} The JSX element representing the deployment component
+     */
+    function getDeployedRevisionComponent(row, allEnvRevisionMapping) {
+        const deployingGateway = allEnvRevisionMapping.find(gateway => {
+            return gateway.name === row.name});
+        const gatewayRevisions = deployingGateway?.revisions;
+    
+        if (!gatewayRevisions.length) {
             // Content to display when there is no revision
+            return (
+                <FormattedMessage
+                    id='Apis.Details.Environments.Environments.status.not.deployed'
+                    defaultMessage='No Revision Deployed'
+                />
+            );
+            
+        }
+
+        const approvedDeployment =gatewayRevisions.find(revision => {
+            return revision.deploymentInfo.some(info => (info.status === null || info.status === "APPROVED") && 
+            info.name === row.name);});
+
+    
+        if (approvedDeployment) {
             return (
                 <div>
-                    <TextField
-                        id='revision-selector'
-                        select
-                        label={(
-                            <FormattedMessage
-                                id='Apis.Details.Environments.Environments.select.table'
-                                defaultMessage='Select Revision'
-                            />
-                        )}
-                        SelectProps={{
-                            MenuProps: {
-                                anchorOrigin: {
-                                    vertical: 'bottom',
-                                    horizontal: 'left',
-                                },
-                                getContentAnchorEl: null,
-                            },
-                        }}
-                        name={row.name}
-                        onChange={handleSelect}
-                        margin='dense'
-                        variant='outlined'
-                        style={{ width: '50%' }}
-                        disabled={api.isRevision || !allRevisions || allRevisions.length === 0}
-                    >
-                        {filteredRevisions.map((number) => (
-                            <MenuItem value={number.id}>{number.displayName}</MenuItem>
-                        ))}
-                    </TextField>
+                    <Chip
+                        label={approvedDeployment.displayName}
+                        style={{ backgroundColor: '#15B8CF' }}
+                    />
                     <Button
-                        className={classes.button2}
-                        disabled={
-                            api.isRevision ||
-                            !selectedRevision.some((r) => r.env === row.name && r.revision) ||
-                            !selectedVhosts.some((v) => v.env === row.name && v.vhost) ||
-                            (api.advertiseInfo && api.advertiseInfo.advertised) ||
-                            isDeployButtonDisabled
-                        }
+                        className={classes.button1}
                         variant='outlined'
-                        onClick={() =>
-                            deployRevision(
-                                selectedRevision.find((r) => r.env === row.name).revision,
-                                row.name,
-                                selectedVhosts.find((v) => v.env === row.name).vhost,
-                                selectedRevision.find((r) => r.env === row.name).displayOnDevPortal
-                            )
-                        }
+                        disabled={api.isRevision || isRestricted(['apim:api_create', 'apim:api_publish'], api)}
+                        onClick={() => undeployRevision(approvedDeployment.id, row.name)}
+                        size='small'
+                        id='undeploy-btn'
                     >
                         <FormattedMessage
-                            id='Apis.Details.Environments.Environments.deploy.button'
-                            defaultMessage='Deploy'
+                            id='Apis.Details.Environments.Environments.undeploy.btn'
+                            defaultMessage='Undeploy'
                         />
                     </Button>
                 </div>
             );
-            // Content to display when revision status is approved
+            
         }
-        return (<div/>);
+        return (
+            <FormattedMessage
+                id='Apis.Details.Environments.Environments.status.not.deployed'
+                defaultMessage='No Revision Deployed'
+            />
+        );
     }
 
     /**
@@ -2067,6 +1999,10 @@ export default function Environments() {
                                     {internalGateways && internalGateways.map((row) => (
                                         <Grid item xs={4}>
                                             <Card
+                                                style={{ opacity: allEnvRevision.some(o1 => {
+                                                    return o1.deploymentInfo.some(o2 => 
+                                                        o2.name === row.name && 
+                                                        o2.status === 'CREATED');})? '0.6' : '1' }}
                                                 className={clsx(SelectedEnvironment
                                                 && SelectedEnvironment.includes(row.name)
                                                     ? (classes.changeCard)
@@ -2075,19 +2011,40 @@ export default function Environments() {
                                             >
                                                 <Box height='100%'>
                                                     <CardHeader
-                                                        action={(
-                                                            <Checkbox
-                                                                id={row.name.split(' ').join('')}
-                                                                value={row.name}
-                                                                checked={SelectedEnvironment.includes(row.name)}
-                                                                onChange={handleChange}
-                                                                color='primary'
-                                                                icon={<RadioButtonUncheckedIcon />}
-                                                                checkedIcon={<CheckCircleIcon color='primary' />}
-                                                                inputProps={{ 'aria-label': 'secondary checkbox' }}
-                                                                data-testid={row.displayName + 'gateway-select-btn'}
-                                                            />
-                                                        )}
+                                                        action={
+                                                            <>
+                                                                {allEnvRevision.some(o1 => {
+                                                                    return o1.deploymentInfo.some(o2 => 
+                                                                        o2.name === row.name && 
+                                                                        o2.status === 'CREATED');})? 
+                                                                    (
+                                                                        <Checkbox
+                                                                            color='primary'
+                                                                            icon={<RadioButtonUncheckedIcon />}
+                                                                            checkedIcon={<
+                                                                                CheckCircleIcon color='primary' />}
+                                                                            disabled
+                                                                        />
+                                                                    ):
+                                                                    (
+                                                                        <Checkbox
+                                                                            id={row.name.split(' ').join('')}
+                                                                            value={row.name}
+                                                                            checked={SelectedEnvironment.
+                                                                                includes(row.name)}
+                                                                            onChange={handleChange}
+                                                                            color='primary'
+                                                                            icon={<RadioButtonUncheckedIcon />}
+                                                                            checkedIcon={<
+                                                                                CheckCircleIcon color='primary' />}
+                                                                            inputProps={{ 
+                                                                                'aria-label': 'secondary checkbox' }}
+                                                                            data-testid={
+                                                                                row.displayName + 'gateway-select-btn'}
+                                                                        />
+                                                                    )
+                                                                }
+                                                            </>}
                                                         title={(
                                                             <Typography variant='subtitle2'>
                                                                 {row.displayName}
@@ -2196,7 +2153,20 @@ export default function Environments() {
                                                                     .map(o3 => (
                                                                         <div key={o3.displayName}>
                                                                             <Chip
-                                                                                label={o3.displayName}
+                                                                                label={
+                                                                                    <div style={{ 
+                                                                                        whiteSpace: 'normal', 
+                                                                                        fontSize:'smaller' }}>
+                                                                                        <FormattedMessage
+                                                                                            id='Apis.Details.
+                                                                                            Environments.Environments.
+                                                                                            pending.chip'
+                                                                                            defaultMessage='Pending'
+                                                                                        />
+                                                                                        <br />
+                                                                                        {o3.displayName}
+                                                                                    </div>
+                                                                                }
                                                                                 style={{ backgroundColor: '#FFBF00' }}
                                                                             />
                                                                         </div>
@@ -2534,19 +2504,13 @@ export default function Environments() {
                                             defaultMessage='Gateway Access URL'
                                         />
                                     </TableCell>
-                                    <TableCell align='left'>
-                                        <FormattedMessage
-                                            id='Apis.Details.Environments.Environments.gateway.status'
-                                            defaultMessage='Deployment Status'
-                                        />
-                                    </TableCell>
                                     {api && api.isDefaultVersion !== true
                                         ? (
                                             <TableCell align='left'>
                                                 <FormattedMessage
                                                     id='Apis.Details.Environments.Environments.gateway
-                                                    .deployed.revision'
-                                                    defaultMessage='Deployed Revision'
+                                                    .deployment.current.revision'
+                                                    defaultMessage='Current Revision'
                                                 />
                                             </TableCell>
                                         )
@@ -2558,6 +2522,12 @@ export default function Environments() {
                                                 />
                                             </TableCell>
                                         )}
+                                    <TableCell align='left'>
+                                        <FormattedMessage
+                                            id='Apis.Details.Environments.Environments.gateway.deployment.next.revision'
+                                            defaultMessage='Next Revision'
+                                        />
+                                    </TableCell>
                                     <TableCell align='left'>
                                         <FormattedMessage
                                             id='Apis.Details.Environments.Environments.visibility.in.devportal'
@@ -2683,10 +2653,10 @@ export default function Environments() {
                                             </>
                                         )}
                                         <TableCell component='th' scope='row'>
-                                            {getDeployedRevisionStatusComponent(row, allEnvRevisionMapping)}
+                                            {getDeployedRevisionComponent(row, allEnvRevisionMapping)}
                                         </TableCell>
                                         <TableCell align='left' style={{ width: '300px' }}>
-                                            {getDeployedRevisionComponent(row, allEnvRevisionMapping)}
+                                            {getDeployedRevisionStatusComponent(row, allEnvRevisionMapping)}
                                         </TableCell>
                                         <TableCell align='left'>
                                             <DisplayDevportal