From 76667f910ba01bdbf7cda732e98a995979c2d50a Mon Sep 17 00:00:00 2001
From: hiranyakavishani <hiranyakavi@gmail.com>
Date: Thu, 28 Sep 2023 00:17:02 +0530
Subject: [PATCH 1/3] UI fixes for versioning support of API Products

---
 .../main/webapp/site/public/locales/en.json   | 20 ++++-
 .../webapp/site/public/locales/raw.en.json    | 11 ++-
 .../APIProduct/APIProductCreateWrapper.jsx    |  5 +-
 .../Apis/Create/Components/DefaultAPIForm.jsx | 38 +++++++-
 .../Configuration/DesignConfigurations.jsx    | 11 ++-
 .../Details/LifeCycle/LifeCycleUpdate.jsx     |  9 +-
 .../Apis/Details/NewVersion/NewVersion.jsx    | 88 ++++++++++++-------
 .../Apis/Details/TryOut/TryOutConsole.jsx     | 30 +++----
 .../Details/components/APIDetailsTopMenu.jsx  | 12 +--
 .../components/CreateNewVersionButton.jsx     |  8 +-
 .../src/app/components/Apis/Details/index.jsx |  5 ++
 .../APICards/ApiThumbClassic.jsx              | 20 ++---
 .../source/src/app/data/ScopeValidation.jsx   |  1 +
 .../main/webapp/source/src/app/data/api.js    | 36 ++++++--
 14 files changed, 205 insertions(+), 89 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 0c6833b14dc..93d80e57c01 100644
--- a/portals/publisher/src/main/webapp/site/public/locales/en.json
+++ b/portals/publisher/src/main/webapp/site/public/locales/en.json
@@ -104,7 +104,7 @@
   "Apis.Create.APIProduct.APIProductCreateWrapper.sub.heading": [
     {
       "type": 0,
-      "value": "Create an API Product by providing a Name, a Context, Resources, and Business Plans (optional)."
+      "value": "Create an API Product by providing a Name, a Context, a Version, Resources, and Business Plans (optional)."
     }
   ],
   "Apis.Create.AsyncAPI.ApiCreateAsyncAPI.advertiseOnly.warning": [
@@ -225,6 +225,12 @@
       "value": "Version"
     }
   ],
+  "Apis.Create.Components.DefaultAPIForm.api.product.version": [
+    {
+      "type": 0,
+      "value": "Version"
+    }
+  ],
   "Apis.Create.Components.NewTopic.topic.name": [
     {
       "type": 0,
@@ -1359,6 +1365,18 @@
       "value": "Selected Rate Limiting Policy will be applied to all the requests of this API."
     }
   ],
+  "Apis.Details.APIProduct.NewVersion.NewVersion.error": [
+    {
+      "type": 0,
+      "value": "Something went wrong while creating a new version!. Error:"
+    }
+  ],
+  "Apis.Details.APIProduct.NewVersion.NewVersion.success": [
+    {
+      "type": 0,
+      "value": "Successfully created new version"
+    }
+  ],
   "Apis.Details.AccessControl.roles.help": [
     {
       "type": 0,
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 aaf9f58c97f..05a50132584 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
@@ -51,7 +51,7 @@
     "defaultMessage": "Add Resources"
   },
   "Apis.Create.APIProduct.APIProductCreateWrapper.sub.heading": {
-    "defaultMessage": "Create an API Product by providing a Name, a Context, Resources, and Business Plans (optional)."
+    "defaultMessage": "Create an API Product by providing a Name, a Context, a Version, Resources, and Business Plans (optional)."
   },
   "Apis.Create.AsyncAPI.ApiCreateAsyncAPI.advertiseOnly.warning": {
     "defaultMessage": "API Manager only supports the streaming APIs of types WebSocket, SSE and WebSub. Please create one of the supported types if you want to deploy it in the gateway."
@@ -98,6 +98,9 @@
   "Apis.Create.Components.DefaultAPIForm.api.product.context": {
     "defaultMessage": "Context"
   },
+  "Apis.Create.Components.DefaultAPIForm.api.product.version": {
+    "defaultMessage": "Version"
+  },
   "Apis.Create.Components.DefaultAPIForm.name": {
     "defaultMessage": "Name"
   },
@@ -582,6 +585,12 @@
   "Apis.Details.APILevelRateLimitingPolicies.components.Configuration.tooltip": {
     "defaultMessage": "Selected Rate Limiting Policy will be applied to all the requests of this API."
   },
+  "Apis.Details.APIProduct.NewVersion.NewVersion.error": {
+    "defaultMessage": "Something went wrong while creating a new version!. Error:"
+  },
+  "Apis.Details.APIProduct.NewVersion.NewVersion.success": {
+    "defaultMessage": "Successfully created new version"
+  },
   "Apis.Details.AccessControl.roles.help": {
     "defaultMessage": "Enter valid role and press enter"
   },
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx
index 43dae82e9cf..557f5e6d099 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx
@@ -105,7 +105,7 @@ export default function ApiProductCreateWrapper(props) {
                 <FormattedMessage
                     id='Apis.Create.APIProduct.APIProductCreateWrapper.sub.heading'
                     defaultMessage={
-                        'Create an API Product by providing a Name, a Context, Resources, '
+                        'Create an API Product by providing a Name, a Context, a Version, Resources, '
                         + 'and Business Plans (optional).'
                     }
                 />
@@ -190,11 +190,12 @@ export default function ApiProductCreateWrapper(props) {
     const createAPIProduct = () => {
         setCreating(true);
         const {
-            name, context,
+            name, context, version,
         } = apiInputs;
         const apiData = {
             name,
             context,
+            version,
             policies,
             apis: apiResources,
         };
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx
index 661fdf64f88..1a2a1ed6f3e 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx
@@ -143,7 +143,7 @@ export default function DefaultAPIForm(props) {
     // Check the provided API validity on mount, TODO: Better to use Joi schema here ~tmkb
     useEffect(() => {
         onValidate(Boolean(api.name)
-            && (isAPIProduct || Boolean(api.version))
+            && (Boolean(api.version))
             && Boolean(api.context));
     }, []);
 
@@ -154,10 +154,9 @@ export default function DefaultAPIForm(props) {
                 .reduce((acc, cVal) => acc && cVal); // Aggregate the individual validation states
         // TODO: refactor following redundant validation.
         // The valid state should available in the above reduced state ~tmkb
-        // if isAPIProduct gets true version validation has been skipped
         isFormValid = isFormValid
             && Boolean(api.name)
-            && (isAPIProduct || Boolean(api.version))
+            && Boolean(api.version)
             && Boolean(api.context);
         onValidate(isFormValid, validity);
         setValidity(newState);
@@ -430,7 +429,7 @@ export default function DefaultAPIForm(props) {
                         </>
                     ) : (
                         <>
-                            <Grid item md={12}>
+                            <Grid item md={8} xs={6}>
                                 <TextField
                                     fullWidth
                                     id='context'
@@ -470,6 +469,37 @@ export default function DefaultAPIForm(props) {
                                     variant='outlined'
                                 />
                             </Grid>
+                            <Grid item md={4} xs={6}>
+                                <TextField
+                                    fullWidth
+                                    id='version'
+                                    error={Boolean(validity.version)}
+                                    label={(
+                                        <>
+                                            <FormattedMessage
+                                                id='Apis.Create.Components.DefaultAPIForm.api.product.version'
+                                                defaultMessage='Version'
+                                            />
+                                            <sup className={classes.mandatoryStar}>*</sup>
+                                        </>
+                                    )}
+                                    name='version'
+                                    value={api.version}
+                                    onChange={onChange}
+                                    InputProps={{
+                                        id: 'itest-id-apiversion-input',
+                                        onBlur: ({ target: { value } }) => {
+                                            validate('version', value);
+                                        },
+                                    }}
+                                    InputLabelProps={{
+                                        for: 'itest-id-apiversion-input',
+                                    }}
+                                    helperText={validity.version && validity.version.message}
+                                    margin='normal'
+                                    variant='outlined'
+                                />
+                            </Grid>
                         </>
                     )}
                 </Grid>
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
index ce558acbed1..668cf3472ad 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
@@ -136,6 +136,11 @@ const useStyles = makeStyles((theme) => ({
  * @returns {Object} Deep copy of an object
  */
 function copyAPIConfig(api) {
+    let isDefaultVersion = false;
+    // to set isDefaultVersion of migrated APIProducts as true
+    if (api.apiType === API.CONSTS.APIProduct && api.isDefaultVersion == null) {
+        isDefaultVersion = true;
+    }
     const copiedConfig = {
         id: api.id,
         name: api.name,
@@ -146,7 +151,7 @@ function copyAPIConfig(api) {
         responseCachingEnabled: api.responseCachingEnabled,
         cacheTimeout: api.cacheTimeout,
         visibility: api.visibility,
-        isDefaultVersion: api.isDefaultVersion,
+        isDefaultVersion: api.isDefaultVersion || isDefaultVersion,
         enableSchemaValidation: api.enableSchemaValidation,
         accessControlRoles: [...api.accessControlRoles],
         visibleRoles: [...api.visibleRoles],
@@ -562,9 +567,7 @@ export default function DesignConfigurations() {
                                         )}
                                     </Box>
                                     <Box py={1}>
-                                        {api.apiType !== API.CONSTS.APIProduct && (
-                                            <DefaultVersion api={apiConfig} configDispatcher={configDispatcher} />
-                                        )}
+                                        <DefaultVersion api={apiConfig} configDispatcher={configDispatcher} />
                                     </Box>
                                     <Box pt={2}>
                                         <Button
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
index 7ea1eee7296..41cc76f4f05 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
@@ -171,11 +171,12 @@ class LifeCycleUpdate extends Component {
         const lifecycleChecklist = this.props.checkList.map((item) => item.value + ':' + item.checked);
         const { isAPIProduct } = this.props;
         if (isAPIProduct) {
-            promisedUpdate = this.apiProduct.updateLcState(apiUUID, action, lifecycleChecklist);
-        } else if (lifecycleChecklist.length > 0) {
-            promisedUpdate = this.api.updateLcState(apiUUID, action, lifecycleChecklist.toString());
+            promisedUpdate = this.apiProduct.updateLcState(apiUUID, action, lifecycleChecklist.length > 0
+                ? lifecycleChecklist.toString() : lifecycleChecklist );
         } else {
-            promisedUpdate = this.api.updateLcState(apiUUID, action);
+            promisedUpdate = (lifecycleChecklist.length > 0)
+                ? this.api.updateLcState(apiUUID, action, lifecycleChecklist.toString())
+                : this.api.updateLcState(apiUUID, action);
         }
         promisedUpdate
             .then((response) => {
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/NewVersion/NewVersion.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/NewVersion/NewVersion.jsx
index 95dbddbbed3..728fced1458 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/NewVersion/NewVersion.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/NewVersion/NewVersion.jsx
@@ -37,6 +37,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import FormLabel from '@material-ui/core/FormLabel';
 import Alert from 'AppComponents/Shared/Alert';
+import API from 'AppData/api';
 import { withAPI } from 'AppComponents/Apis/Details/components/ApiContext';
 
 const styles = (theme) => ({
@@ -114,15 +115,17 @@ class CreateNewVersion extends React.Component {
 
     componentDidMount() {
         const { api } = this.props;
-        if (api.serviceInfo !== null) {
-            const promisedServices = ServiceCatalog.getServiceByName(api.serviceInfo);
-            promisedServices.then((data) => {
-                const array = data.list.map((item) => item.version);
-                this.setState({ versionList: array });
-            }).catch((error) => {
-                console.error(error);
-                Alert.error('Error while loading services version');
-            });
+        if (api.serviceInfo !== undefined) {
+            if (api.serviceInfo !== null) {
+                const promisedServices = ServiceCatalog.getServiceByName(api.serviceInfo);
+                promisedServices.then((data) => {
+                    const array = data.list.map((item) => item.version);
+                    this.setState({ versionList: array });
+                }).catch((error) => {
+                    console.error(error);
+                    Alert.error('Error while loading services version');
+                });
+            }
         }
     }
 
@@ -168,28 +171,53 @@ class CreateNewVersion extends React.Component {
             return;
         }
         const isDefaultVersionBool = isDefaultVersion === 'yes';
+        const apiClient = new API();
         const { intl } = this.props;
-        api.createNewAPIVersion(newVersion, isDefaultVersionBool, serviceVersion)
-            .then((response) => {
-                this.setState({
-                    redirectToReferrer: true,
-                    apiId: response.obj.id,
+        if (api.apiType === 'APIPRODUCT') {
+            apiClient.createNewAPIProductVersion(api.id ,newVersion, isDefaultVersionBool)
+                .then((response) => {
+                    this.setState({
+                        redirectToReferrer: true,
+                        apiId: response.obj.id,
+                    });
+                    Alert.info(intl.formatMessage({
+                        id: 'Apis.Details.APIProduct.NewVersion.NewVersion.success',
+                        defaultMessage: 'Successfully created new version ',
+                    }) + newVersion);
+                })
+                .catch((error) => {
+                    if (error.status === 409) {
+                        this.setState({ valid: { version: { alreadyExists: true } } });
+                    } else {
+                        Alert.error(intl.formatMessage({
+                            id: 'Apis.Details.APIProduct.NewVersion.NewVersion.error',
+                            defaultMessage: 'Something went wrong while creating a new version!. Error: ',
+                        }) + error.status);
+                    }
+                });
+        } else {
+            apiClient.createNewAPIVersion(api.id, newVersion, isDefaultVersionBool, serviceVersion)
+                .then((response) => {
+                    this.setState({
+                        redirectToReferrer: true,
+                        apiId: response.obj.id,
+                    });
+                    Alert.info(intl.formatMessage({
+                        id: 'Apis.Details.NewVersion.NewVersion.success',
+                        defaultMessage: 'Successfully created new version ',
+                    }) + newVersion);
+                })
+                .catch((error) => {
+                    if (error.status === 409) {
+                        this.setState({ valid: { version: { alreadyExists: true } } });
+                    } else {
+                        Alert.error(intl.formatMessage({
+                            id: 'Apis.Details.NewVersion.NewVersion.error',
+                            defaultMessage: 'Something went wrong while creating a new version!. Error: ',
+                        }) + error.status);
+                    }
                 });
-                Alert.info(intl.formatMessage({
-                    id: 'Apis.Details.NewVersion.NewVersion.success',
-                    defaultMessage: 'Successfully created new version ',
-                }) + newVersion);
-            })
-            .catch((error) => {
-                if (error.status === 409) {
-                    this.setState({ valid: { version: { alreadyExists: true } } });
-                } else {
-                    Alert.error(intl.formatMessage({
-                        id: 'Apis.Details.NewVersion.NewVersion.error',
-                        defaultMessage: 'Something went wrong while creating a new version!. Error: ',
-                    }) + error.status);
-                }
-            });
+        }
     }
 
     /**
@@ -224,7 +252,7 @@ class CreateNewVersion extends React.Component {
             isDefaultVersion, newVersion, redirectToReferrer, apiId, valid, serviceVersion, versionList,
         } = this.state;
         if (redirectToReferrer) {
-            return <Redirect to={'/apis/' + apiId + '/overview'} />;
+            return <Redirect to={(api.apiType === 'APIPRODUCT' ? '/api-products/' : '/apis/') + apiId + '/overview'} />;
         }
 
         let helperText = '';
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx
index 1a8fd151f0b..c9e017f70d9 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx
@@ -146,7 +146,6 @@ const TryOutConsole = () => {
         }
     }, [publisherSettings]);
 
-    const isAPIProduct = api.apiType === 'APIPRODUCT';
     const isAdvertised = api.advertiseInfo && api.advertiseInfo.advertised;
     const setServersSpec = (spec, serverUrl) => {
         let schemes;
@@ -186,18 +185,12 @@ const TryOutConsole = () => {
                     }
                     if (transportPort !== -1) {
                         const baseURL = `${transport}://${selectedDeployment.vhost}:${transportPort}`;
-                        let url;
-                        if (isAPIProduct) {
-                            url = `${baseURL}${pathSeparator}`
-                                + `${selectedDeploymentVhost.httpContext}${api.context}`;
-                        } else {
-                            url = `${baseURL}${pathSeparator}`
+                        let url = `${baseURL}${pathSeparator}`
                             + `${selectedDeploymentVhost.httpContext}${api.context}/${api.version}`;
-                            if (`${api.context}`.includes('{version}')) {
-                                url = `${baseURL}${pathSeparator}`
+                        if (`${api.context}`.includes('{version}')) {
+                            url = `${baseURL}${pathSeparator}`
                                         + `${selectedDeploymentVhost.httpContext}${api.context}`
                                             .replaceAll('{version}', `${api.version}`);
-                            }
                         }
                         return {url};
                     }
@@ -216,16 +209,15 @@ const TryOutConsole = () => {
                 }
                 const host = `${selectedDeploymentVhost.host}:${transportPort}`;
                 let basePath;
-                if (isAPIProduct) {
-                    basePath = `${pathSeparator}${selectedDeploymentVhost.httpContext}${api.context}`;
-                } else {
-                    basePath = `${pathSeparator}${selectedDeploymentVhost.
-                        httpContext}${api.context}/${api.version}`;
-                    if (`${api.context}`.includes('{version}')) {
-                        basePath = `${pathSeparator}${selectedDeploymentVhost.httpContext}${api.context}`
-                            .replaceAll('{version}', `${api.version}`);
-                    }
+
+                basePath = `${pathSeparator}${selectedDeploymentVhost.
+                    httpContext}${api.context}/${api.version}`;
+
+                if (`${api.context}`.includes('{version}')) {
+                    basePath = `${pathSeparator}${selectedDeploymentVhost
+                        .httpContext}${api.context}`.replaceAll('{version}', `${api.version}`);
                 }
+
                 let schemes = api.transport.slice().sort((a, b) => ((a > b) ? -1 : 1));
                 if (selectedDeploymentVhost.httpPort === -1){
                     schemes = schemes.filter(item => item !== 'http');
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
index 07e62135d05..32f91582d5a 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
@@ -205,7 +205,7 @@ const APIDetailsTopMenu = (props) => {
                 className={classes.backLink}
             >
                 <Box width={70} height={50} marginLeft={1}>
-                    <ThumbnailView api={api} width={70} height={50} imageUpdate={imageUpdate} 
+                    <ThumbnailView api={api} width={70} height={50} imageUpdate={imageUpdate}
                         updateAPI={updateAPI} />
                 </Box>
                 <div style={{ marginLeft: theme.spacing(1), maxWidth: 500 }}>
@@ -217,8 +217,8 @@ const APIDetailsTopMenu = (props) => {
                     >
                         <Typography id='itest-api-name-version' variant='h4' component='h1' className={classes.apiName}>
                             {api.name}
-                            {' '}
-                            {isAPIProduct ? '' : ':' + api.version}
+                            {' : '}
+                            {api.version}
                         </Typography>
                         <Typography variant='caption' gutterBottom align='left'>
                             <FormattedMessage
@@ -402,8 +402,10 @@ const APIDetailsTopMenu = (props) => {
             )}
             {/* Page error banner */}
             {/* end of Page error banner */}
-            {isAPIProduct || api.isRevision
-                ? null : <CreateNewVersionButton buttonClass={classes.viewInStoreLauncher} api={api} />}
+            {api.isRevision
+                ? null :
+                <CreateNewVersionButton buttonClass={classes.viewInStoreLauncher}
+                    api={api} isAPIProduct={isAPIProduct} />}
             {(isDownloadable) && <VerticalDivider height={70} />}
             <div className={classes.downloadApi}>
                 {(isDownloadable) && (
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/CreateNewVersionButton.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/CreateNewVersionButton.jsx
index 7aafb31a22d..a99c5803291 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/CreateNewVersionButton.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/CreateNewVersionButton.jsx
@@ -77,16 +77,17 @@ const styles = (theme) => ({
  * @constructor
  */
 function CreateNewVersionButton(props) {
-    const { api, classes } = props;
+    const { api, classes, isAPIProduct } = props;
     return (
         <>
             {/* allowing create new version based on scopes */}
-            <ScopeValidation resourceMethod={resourceMethod.POST} resourcePath={resourcePath.API_COPY}>
+            <ScopeValidation resourceMethod={resourceMethod.POST}
+                resourcePath={isAPIProduct ? resourcePath.API_PRODUCT_COPY : resourcePath.API_COPY}>
                 <div className={classes.createNewVersionWrapper} id='create-new-version-btn'>
                     <VerticalDivider height={70} />
                     <Link
                         className={classes.createNewVersion}
-                        to={'/apis/' + api.id + '/new_version'}
+                        to={(isAPIProduct ? '/api-products/' : '/apis/') + api.id + '/new_version'}
                         style={{ minWidth: 95 }}
                     >
 
@@ -110,6 +111,7 @@ CreateNewVersionButton.propTypes = {
     api: PropTypes.shape({
         id: PropTypes.string,
     }).isRequired,
+    isAPIProduct: PropTypes.bool.isRequired,
     history: PropTypes.shape({ push: PropTypes.func }).isRequired,
     classes: PropTypes.shape({}).isRequired,
 };
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/index.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
index 90ab242013e..b60dd84650d 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
@@ -972,6 +972,10 @@ class Details extends Component {
                                         component={() => <Properties api={api} />}
                                     />
                                     <Route path={Details.subPaths.NEW_VERSION} component={() => <CreateNewVersion />} />
+                                    <Route
+                                        path={Details.subPaths.NEW_VERSION_PRODUCT}
+                                        component={() => <CreateNewVersion />} />
+
                                     <Route path={Details.subPaths.SUBSCRIPTIONS} component={() => <Subscriptions />} />
                                     <Route
                                         path={Details.subPaths.MONETIZATION}
@@ -1047,6 +1051,7 @@ Details.subPaths = {
     PROPERTIES: '/apis/:api_uuid/properties',
     PROPERTIES_PRODUCT: '/api-products/:apiprod_uuid/properties',
     NEW_VERSION: '/apis/:api_uuid/new_version',
+    NEW_VERSION_PRODUCT: '/api-products/:api_uuid/new_version',
     MONETIZATION: '/apis/:api_uuid/monetization',
     MONETIZATION_PRODUCT: '/api-products/:apiprod_uuid/monetization',
     EXTERNAL_STORES: '/apis/:api_uuid/external-devportals',
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/ApiThumbClassic.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/ApiThumbClassic.jsx
index b9ac82fd6d2..a7937ffdd42 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/ApiThumbClassic.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/ApiThumbClassic.jsx
@@ -299,19 +299,17 @@ class APIThumb extends Component {
                         </Typography>
                     </div>
                     <div className={classes.thumbInfo}>
-                        {isAPIProduct ? null : (
-                            <div className={classes.row}>
-                                <div className={classes.thumbLeft}>
-                                    <Typography variant='subtitle1'>{api.version}</Typography>
-                                </div>
+                        <div className={classes.row}>
+                            <div className={classes.thumbLeft}>
+                                <Typography variant='subtitle1'>{api.version}</Typography>
+                            </div>
 
-                                <div className={classes.thumbLeft}>
-                                    <Typography variant='caption' gutterBottom align='left'>
-                                        <FormattedMessage defaultMessage='Version' id='Apis.Listing.ApiThumb.version' />
-                                    </Typography>
-                                </div>
+                            <div className={classes.thumbLeft}>
+                                <Typography variant='caption' gutterBottom align='left'>
+                                    <FormattedMessage defaultMessage='Version' id='Apis.Listing.ApiThumb.version' />
+                                </Typography>
                             </div>
-                        )}
+                        </div>
                         <div className={classes.row}>
                             <div className={classes.thumbRight}>
                                 <Typography variant='subtitle1' align='right' className={classes.contextBox}>
diff --git a/portals/publisher/src/main/webapp/source/src/app/data/ScopeValidation.jsx b/portals/publisher/src/main/webapp/source/src/app/data/ScopeValidation.jsx
index 55dd276a7d1..0f8de514bce 100644
--- a/portals/publisher/src/main/webapp/source/src/app/data/ScopeValidation.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/data/ScopeValidation.jsx
@@ -31,6 +31,7 @@ const resourcePath = {
     API_GW_CONFIG: '/apis/{apiId}/gateway-config',
     API_THUMBNAIL: '/apis/{apiId}/thumbnail',
     API_COPY: '/apis/copy-api',
+    API_PRODUCT_COPY: '/api-products/copy-api-products',
     API_LC_HISTORY: '/apis/{apiId}/lifecycle-history',
     API_CHANGE_LC: '/apis/change-lifecycle',
     API_LC: '/apis/{apiId}/lifecycle',
diff --git a/portals/publisher/src/main/webapp/source/src/app/data/api.js b/portals/publisher/src/main/webapp/source/src/app/data/api.js
index 47e65bd293c..2b74e5cd9e5 100644
--- a/portals/publisher/src/main/webapp/source/src/app/data/api.js
+++ b/portals/publisher/src/main/webapp/source/src/app/data/api.js
@@ -462,11 +462,11 @@ class API extends Resource {
      * @param callback {function} A callback function to invoke after receiving successful response.
      * @returns {promise} With given callback attached to the success chain else API invoke promise.
      */
-    createNewAPIVersion(version, isDefaultVersion, serviceVersion, callback = null) {
+    createNewAPIVersion(apiId, version, isDefaultVersion, serviceVersion, callback = null) {
         const promise_copy_api = this.client.then(client => {
             return client.apis['APIs'].createNewAPIVersion(
                 {
-                    apiId: this.id,
+                    apiId: this.id || apiId,
                     newVersion: version,
                     serviceVersion: serviceVersion,
                     defaultVersion: isDefaultVersion,
@@ -481,6 +481,32 @@ class API extends Resource {
         }
     }
 
+
+    /**
+     * Create a new version of a given API Product
+     * @param version {string} new API Product version.
+     * @param isDefaultVersion specifies whether new API Product version is set as default version
+     * @param callback {function} A callback function to invoke after receiving successful response.
+     * @returns {promise} With given callback attached to the success chain else API Product invoke promise.
+     */
+     createNewAPIProductVersion(apiProductId, version, isDefaultVersion, callback = null) {
+        const promise_copy_api_products = this.client.then(client => {
+            return client.apis['API Products'].createNewAPIProductVersion(
+                {
+                    newVersion: version,
+                    apiProductId: apiProductId,
+                    defaultVersion: isDefaultVersion,
+                },
+                this._requestMetaData(),
+            );
+        });
+        if (callback) {
+            return promise_copy_api_products.then(callback);
+        } else {
+            return promise_copy_api_products;
+        }
+    }
+
     /**
      * Mock sample responses for Inline Prototyping
      * of a swagger OAS defintion
@@ -770,7 +796,7 @@ class API extends Resource {
         });
         return promised_update;
     }
-    
+
     /**
      * Update an api via PUT HTTP method, Need to give the updated API object as the argument.
      * @param api {Object} Updated API object(JSON) which needs to be updated
@@ -2895,7 +2921,7 @@ class API extends Resource {
             );
         });
     }
-    
+
     /**
      * Add a common operation policy
      * @param {Object} policySpec policy specification of the common operation policy to upload
@@ -2978,7 +3004,7 @@ class API extends Resource {
             );
         });
     }
-    
+
     /**
      * Get API Operation Policies
      * @param {String} apiId UUID of the API

From 0a0c493c43b49326d8daffc1ac5066cfe6bebb50 Mon Sep 17 00:00:00 2001
From: Savindu Dimal <dimalsavindu@gmail.com>
Date: Mon, 4 Dec 2023 21:57:33 +0530
Subject: [PATCH 2/3] Update UI tests for API Product versioning

---
 ...-api-product-invoke-with-keys.spec..skipjs |   2 +
 ...e-product-and-update-underline-api.spec.js |   2 +
 ...ion-for-the-api-product-and-deploy.spec.js |   2 +
 ...deploy-new-revision-of-api-product.spec.js |   2 +
 ...lifecycle-support-for-api-products.spec.js |   2 +
 ...-create-new-version-of-api-product.spec.js | 130 ++++++++++++++++++
 6 files changed, 140 insertions(+)
 create mode 100644 tests/cypress/integration/publisher/013-api-product/05-create-new-version-of-api-product.spec.js

diff --git a/tests/cypress/integration/devportal/004-api-product/00-api-product-invoke-with-keys.spec..skipjs b/tests/cypress/integration/devportal/004-api-product/00-api-product-invoke-with-keys.spec..skipjs
index 8d29d6ec6b5..90141d1081a 100644
--- a/tests/cypress/integration/devportal/004-api-product/00-api-product-invoke-with-keys.spec..skipjs
+++ b/tests/cypress/integration/devportal/004-api-product/00-api-product-invoke-with-keys.spec..skipjs
@@ -27,6 +27,7 @@ describe("Invoke API Product", () => {
     const appName = Utils.generateName();
     const appDescription = 'Testing app ';
     const productName = Utils.generateName();
+    const productVersion = '1.0.0';
     it("Invoke API Product using Oauth 2 and API Key", {
         retries: {
             runMode: 3,
@@ -74,6 +75,7 @@ describe("Invoke API Product", () => {
                 // fill the form
                 cy.get('#itest-id-apiname-input').type(productName);
                 cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
                 cy.get('#itest-id-apiname-input').click();
 
 
diff --git a/tests/cypress/integration/publisher/013-api-product/01-create-product-and-update-underline-api.spec.js b/tests/cypress/integration/publisher/013-api-product/01-create-product-and-update-underline-api.spec.js
index dced86e0a9c..4bc10d73d36 100644
--- a/tests/cypress/integration/publisher/013-api-product/01-create-product-and-update-underline-api.spec.js
+++ b/tests/cypress/integration/publisher/013-api-product/01-create-product-and-update-underline-api.spec.js
@@ -22,6 +22,7 @@ describe("Mock the api response and test it", () => {
       });
     const { publisher, password, } = Utils.getUserInfo();
     const productName = Utils.generateName();
+    const productVersion = '1.0.0';
     const apiName = Utils.generateName();
     let testApiID;
     beforeEach(function () {
@@ -70,6 +71,7 @@ describe("Mock the api response and test it", () => {
                 // fill the form
                 cy.get('#itest-id-apiname-input').type(productName);
                 cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
                 cy.get('#itest-id-apiname-input').click();
                 cy.get('body').click(0,0);
 
diff --git a/tests/cypress/integration/publisher/013-api-product/02-create-a-new-revision-for-the-api-product-and-deploy.spec.js b/tests/cypress/integration/publisher/013-api-product/02-create-a-new-revision-for-the-api-product-and-deploy.spec.js
index 3a5e123a2cb..6f105d71c1e 100644
--- a/tests/cypress/integration/publisher/013-api-product/02-create-a-new-revision-for-the-api-product-and-deploy.spec.js
+++ b/tests/cypress/integration/publisher/013-api-product/02-create-a-new-revision-for-the-api-product-and-deploy.spec.js
@@ -19,6 +19,7 @@ import Utils from "@support/utils";
 describe("Mock the api response and test it", () => {
     const { publisher, password, } = Utils.getUserInfo();
     const productName = Utils.generateName();
+    const productVersion = '1.0.0';
     const apiName = Utils.generateName();
     let testApiID;
     beforeEach(function () {
@@ -64,6 +65,7 @@ describe("Mock the api response and test it", () => {
                 // fill the form
                 cy.get('#itest-id-apiname-input').type(productName);
                 cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
                 cy.get('#itest-id-apiname-input').click();
 
                 cy.intercept('**/swagger').as('swaggerGet');
diff --git a/tests/cypress/integration/publisher/013-api-product/03-undeploy-new-revision-of-api-product.spec.js b/tests/cypress/integration/publisher/013-api-product/03-undeploy-new-revision-of-api-product.spec.js
index ca7b35a4f6b..d908359df4d 100644
--- a/tests/cypress/integration/publisher/013-api-product/03-undeploy-new-revision-of-api-product.spec.js
+++ b/tests/cypress/integration/publisher/013-api-product/03-undeploy-new-revision-of-api-product.spec.js
@@ -19,6 +19,7 @@ import Utils from "@support/utils";
 describe("Mock the api response and test it", () => {
     const { publisher, password, } = Utils.getUserInfo();
     const productName = Utils.generateName();
+    const productVersion = '1.0.0';
     const apiName = Utils.generateName();
     let testApiID;
     beforeEach(function () {
@@ -69,6 +70,7 @@ describe("Mock the api response and test it", () => {
                 // fill the form
                 cy.get('#itest-id-apiname-input').type(productName);
                 cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
                 cy.get('#itest-id-apiname-input').click();
 
                 cy.intercept('**/swagger').as('swaggerGet');
diff --git a/tests/cypress/integration/publisher/013-api-product/04-lifecycle-support-for-api-products.spec.js b/tests/cypress/integration/publisher/013-api-product/04-lifecycle-support-for-api-products.spec.js
index 85625d72e62..47b0f347558 100644
--- a/tests/cypress/integration/publisher/013-api-product/04-lifecycle-support-for-api-products.spec.js
+++ b/tests/cypress/integration/publisher/013-api-product/04-lifecycle-support-for-api-products.spec.js
@@ -18,6 +18,7 @@ import Utils from "@support/utils";
 
 describe("Life cycle support for API Products", () => {
     const { publisher, password, } = Utils.getUserInfo();
+    const productVersion = '1.0.0';
     let productName;
     let apiName;
 
@@ -70,6 +71,7 @@ describe("Life cycle support for API Products", () => {
                 productName = Utils.generateName();
                 cy.get('#itest-id-apiname-input').type(productName);
                 cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
                 cy.get('#itest-id-apiname-input').click();
 
                 cy.intercept('**/swagger').as('swaggerGet');
diff --git a/tests/cypress/integration/publisher/013-api-product/05-create-new-version-of-api-product.spec.js b/tests/cypress/integration/publisher/013-api-product/05-create-new-version-of-api-product.spec.js
new file mode 100644
index 00000000000..bca406827ec
--- /dev/null
+++ b/tests/cypress/integration/publisher/013-api-product/05-create-new-version-of-api-product.spec.js
@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Utils from "@support/utils";
+
+describe("Create new API product version", () => {
+    Cypress.on('uncaught:exception', (err, runnable) => {
+        return false;
+      });
+    const { publisher, password, } = Utils.getUserInfo();
+    const apiName = Utils.generateName();
+    const productName = Utils.generateName();
+    const productVersion = '1.0.0';
+    const newVersion = '2.0.0';
+    let testApiID;
+
+    beforeEach(function () {
+        cy.loginToPublisher(publisher, password);
+    })
+
+    it("Create new API product version", {
+        retries: {
+            runMode: 3,
+            openMode: 0,
+        },
+    }, () => {
+        // create a new api
+        cy.visit(`/publisher/apis/create/openapi`, {timeout: Cypress.config().largeTimeout});
+        cy.get('#open-api-file-select-radio').click();
+
+        // upload the swagger
+        cy.get('#browse-to-upload-btn').then(function () {
+            const filepath = `api_artifacts/petstore-v3.json`
+            cy.get('input[type="file"]').attachFile(filepath)
+        });
+
+        cy.get('#open-api-create-next-btn').click();
+
+        cy.get('#itest-id-apiversion-input', {timeout: Cypress.config().largeTimeout});
+        cy.document().then((doc) => {
+            cy.get('#itest-id-apiname-input').clear().type(apiName);
+            cy.get('#itest-id-apicontext-input').clear();
+            cy.get('#itest-id-apicontext-input').type(apiName);
+            cy.get('#itest-id-apiversion-input').click();
+            const version = doc.querySelector('#itest-id-apiversion-input').value;
+            cy.get('#open-api-create-btn').should('not.have.class', 'Mui-disabled').click({force:true});
+
+            cy.url().should('contains', 'overview').then(url => {
+                testApiID = /apis\/(.*?)\/overview/.exec(url)[1];
+                cy.log("API ID", testApiID);
+                // validate
+                cy.get('#itest-api-name-version', {timeout: Cypress.config().largeTimeout});
+                cy.get('#itest-api-name-version').contains(version);
+
+                // Go to api product create page
+                cy.visit(`/publisher/api-products/create`);
+
+                // fill the form
+                cy.get('#itest-id-apiname-input').type(productName);
+                cy.get('#context').type(productName);
+                cy.get('#itest-id-apiversion-input').type(productVersion);
+                cy.get('#itest-id-apiname-input').click();
+                cy.get('body').click(0,0);
+
+                cy.intercept('**/swagger').as('swaggerGet');
+
+                cy.get('#api-product-next-btn').should('not.have.class', 'Mui-disabled').click({force:true});
+
+                cy.wait('@swaggerGet', { timeout: Cypress.config().largeTimeout }).then(() => {
+                    cy.intercept('GET', '**/swagger').as('getSwagger');
+                    cy.get(`#checkbox-list-label-${testApiID}`).click();
+                    cy.wait('@getSwagger');
+                    // wait until the api is saved
+                    cy.get('#resource-wrapper').children().should('have.length.gte', 1);
+
+                    // add all resources
+                    cy.get('#add-all-resources-btn').click({ force: true });
+                    cy.get('#create-api-product-btn').scrollIntoView().dblclick({ force: true });
+                    cy.url().should('contains', 'overview').then(urlProduct => {
+                        const productID = /api-products\/(.*?)\/overview/.exec(urlProduct)[1];
+                        cy.log("API Product ID", productID);
+                        cy.get('#itest-api-name-version', { timeout: Cypress.config().largeTimeout });
+                        cy.get('#itest-api-name-version').contains(productName);
+
+                        // create new version of the api product
+                        cy.log(testApiID, productID);
+                        cy.visit(`/publisher/api-products/${productID}/overview`);
+                        cy.get('#create-new-version-btn').click();
+                        cy.get('#newVersion').click();
+                        cy.get('#newVersion').type(newVersion);
+                        cy.intercept('**/api-products/**').as('apiGet');
+                        cy.get('#createBtn').click();
+                        cy.wait('@apiGet', { timeout: 30000 }).then(() => {
+                            // validate
+                            cy.get('#itest-api-name-version', { timeout: 30000 }).should('be.visible');
+                            cy.get('#itest-api-name-version').contains(`${productName}`);
+                            cy.get('#itest-api-name-version').contains(`${newVersion}`);
+                        })
+                        // delete api product verions
+                        cy.get(`#itest-id-deleteapi-icon-button`).click();
+                        cy.get(`#itest-id-deleteconf`).click();
+
+                        cy.visit(`/publisher/api-products/${productID}/overview`);
+                        cy.get('#itest-api-name-version', { timeout: Cypress.config().largeTimeout });
+                        cy.get(`#itest-id-deleteapi-icon-button`).click();
+                        cy.get(`#itest-id-deleteconf`).click();
+                    });
+                });
+            });
+        });
+    });
+    afterEach(() => {
+        Utils.deleteAPI(testApiID);
+    })
+})

From cc826b38be3dcaa3a1e11a6af6c7795b1c0e5fb4 Mon Sep 17 00:00:00 2001
From: hiranyakavishani <hiranyakavi@gmail.com>
Date: Tue, 19 Dec 2023 15:44:41 +0530
Subject: [PATCH 3/3] Adding minor Change

---
 .../components/Apis/Details/components/APIDetailsTopMenu.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
index 32f91582d5a..27ee0518155 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/components/APIDetailsTopMenu.jsx
@@ -217,7 +217,7 @@ const APIDetailsTopMenu = (props) => {
                     >
                         <Typography id='itest-api-name-version' variant='h4' component='h1' className={classes.apiName}>
                             {api.name}
-                            {' : '}
+                            {' :'}
                             {api.version}
                         </Typography>
                         <Typography variant='caption' gutterBottom align='left'>