Change Api Provider Functionality Added

portals/admin/src/main/webapp/site/public/locales/en.json

@@ -62,6 +62,10 @@
   "AdminPages.ApiCategories.table.header.category.description": "Description",
   "AdminPages.ApiCategories.table.header.category.name": "Category Name",
   "AdminPages.ApiCategories.table.header.category.number.of.apis": "Number of APIs",
+  "AdminPages.ApiSettings.EditApi.form.edit.error": "API provider should not be empty.",
+  "AdminPages.ApiSettings.EditApi.form.edit.other.error": "Given Username is not valid.",
+  "AdminPages.ApiSettings.EditApi.form.edit.successful": "API provider changed successfully",
+  "AdminPages.ApiSettings.EditApi.form.edit.user.notvalid": "Error while updating the provider name.",
   "AdminPages.ApplicationSettings.Edit.form.edit.successful": "Application owner changed successfully",
   "AdminPages.ApplicationSettings.Edit.form.helperText": "Enter a new Owner. Make sure the new owner has logged into the Developer Portal at least once",
   "AdminPages.ApplicationSettings.Edit.form.name": "Application Name",
@@ -84,6 +88,15 @@
   "AdminPagesGatewayEnvironments.AddEditGWEnvironment.form.environment.vhost.empty": "VHost is empty",
   "Apis.Details.Scopes.CreateScope.roles.help": "Enter a valid role and press `Enter`.",
   "Apis.Details.Scopes.Roles.Invalid": "A Role is invalid",
+  "Apis.Listing.Listing.apis.search": "Search",
+  "Apis.Listing.Listing.apis.search.label": "Search by API",
+  "Apis.Listing.Listing.apis.searching": "Searching",
+  "Apis.Listing.Listing.clear.search": "Clear Search",
+  "Apis.Listing.Listing.empty.message": "No Data to Display",
+  "Apis.Listing.Listing.search.placeholder": "API Name",
+  "Apis.Listing.apiTableHead.name": "Name",
+  "Apis.Listing.apiTableHead.provider": "Provider",
+  "Apis.Listing.apiTableHead.version": "Version",
   "Apis.Shared.AdminRootErrorBoundary.refresh": "Refresh",
   "Apis.Shared.AdminRootErrorBoundary.refresh.or.try.again.message": "You may refresh the page now or try again later",
   "Apis.Shared.AdminRootErrorBoundary.something.went.wrong.while.rendering.button": "Something went wrong while rendering the",
@@ -115,10 +128,11 @@
   "Base.RouteMenuMapping.advanced.throttling.policies.Adding": "Add Advanced Policy",
   "Base.RouteMenuMapping.advanced.throttling.policies.Editing": "Edit Advanced Policy",
   "Base.RouteMenuMapping.api.categories": "API Categories",
+  "Base.RouteMenuMapping.apis": "Change API Provider",
   "Base.RouteMenuMapping.application.creation": "Application Creation",
   "Base.RouteMenuMapping.application.deletion": "Application Deletion",
   "Base.RouteMenuMapping.application.throttling.policies": "Application Policies",
-  "Base.RouteMenuMapping.applications": "Applications",
+  "Base.RouteMenuMapping.applications": "Change Application Owner",
   "Base.RouteMenuMapping.blacklisted.items": "Deny Policies",
   "Base.RouteMenuMapping.custom.throttling.policies": "Custom Policies",
   "Base.RouteMenuMapping.custom.throttling.policies.items.Adding": "Add Custom Policy",

portals/admin/src/main/webapp/site/public/locales/fr.json

@@ -62,6 +62,9 @@
   "AdminPages.ApiCategories.table.header.category.description": "",
   "AdminPages.ApiCategories.table.header.category.name": "",
   "AdminPages.ApiCategories.table.header.category.number.of.apis": "",
+  "AdminPages.ApiSettings.EditApi.form.edit.successful": "",
+  "AdminPages.ApiSettings.EditApi.form.helperText": "",
+  "AdminPages.ApiSettings.EditApi.form.name": "",
   "AdminPages.ApplicationSettings.Edit.form.edit.successful": "",
   "AdminPages.ApplicationSettings.Edit.form.helperText": "",
   "AdminPages.ApplicationSettings.Edit.form.name": "",
@@ -84,6 +87,15 @@
   "AdminPagesGatewayEnvironments.AddEditGWEnvironment.form.environment.vhost.empty": "",
   "Apis.Details.Scopes.CreateScope.roles.help": "",
   "Apis.Details.Scopes.Roles.Invalid": "",
+  "Apis.Listing.Listing.apis.search": "",
+  "Apis.Listing.Listing.apis.search.label": "",
+  "Apis.Listing.Listing.apis.searching": "",
+  "Apis.Listing.Listing.clear.search": "",
+  "Apis.Listing.Listing.empty.message": "",
+  "Apis.Listing.Listing.search.placeholder": "",
+  "Apis.Listing.apiTableHead.actions": "",
+  "Apis.Listing.apiTableHead.name": "",
+  "Apis.Listing.apiTableHead.owner": "",
   "Apis.Shared.AdminRootErrorBoundary.refresh": "",
   "Apis.Shared.AdminRootErrorBoundary.refresh.or.try.again.message": "",
   "Apis.Shared.AdminRootErrorBoundary.something.went.wrong.while.rendering.button": "",
@@ -119,6 +131,7 @@
   "Base.RouteMenuMapping.application.deletion": "",
   "Base.RouteMenuMapping.application.throttling.policies": "",
   "Base.RouteMenuMapping.applications": "",
+  "Base.RouteMenuMapping.apps": "",
   "Base.RouteMenuMapping.blacklisted.items": "",
   "Base.RouteMenuMapping.custom.throttling.policies": "",
   "Base.RouteMenuMapping.custom.throttling.policies.items.Adding": "",
@@ -347,6 +360,7 @@
   "Manage.Alerts.unsubscribe.success.msg": "",
   "RolePermissions.Common.AddRoleWizard.add.mapping.button": "",
   "RolePermissions.Common.AddRoleWizard.add.mapping.title": "",
+  "RolePermissions.Common.AddRoleWizard.add.role.warn.empty": "",
   "RolePermissions.Common.AddRoleWizard.add.scope.error": "",
   "RolePermissions.Common.DeletePermission.delete.scope.error": "",
   "RolePermissions.ListRoles.error.retrieving.perm": "",

portals/admin/src/main/webapp/source/src/app/components/APISettings/ApisTableContent.jsx

@@ -0,0 +1,242 @@
+/*
+* Copyright (c) 2024, WSO2 LLC. (http://www.wso2.org) 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 React, { useState } from 'react';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import PropTypes from 'prop-types';
+import API from 'AppData/api';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Alert from 'AppComponents/Shared/Alert';
+import TextField from '@material-ui/core/TextField';
+import EditIcon from '@material-ui/icons/Edit';
+import { FormattedMessage } from 'react-intl';
+import { IconButton } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+import CancelIcon from '@material-ui/icons/Cancel';
+
+const useStyles = makeStyles((theme) => ({
+    fullHeight: {
+        height: '100%',
+    },
+    tableRow: {
+        height: theme.spacing(5),
+        '& td': {
+            padding: theme.spacing(0.5),
+        },
+    },
+    appOwner: {
+        pointerEvents: 'none',
+    },
+    appName: {
+        '& a': {
+            color: '#1b9ec7 !important',
+        },
+    },
+    button: {
+        marginLeft: theme.spacing(0.5),
+        marginRight: theme.spacing(0.5),
+        marginTop: theme.spacing(1),
+    },
+    appTablePaper: {
+        '& table tr td': {
+            paddingLeft: theme.spacing(1),
+        },
+        '& table tr td:first-child, & table tr th:first-child': {
+            paddingLeft: theme.spacing(2),
+        },
+        '& table tr td button.Mui-disabled span.material-icons': {
+            color: theme.palette.action.disabled,
+        },
+    },
+    tableCellWrapper: {
+        '& td': {
+            'word-break': 'break-all',
+            'white-space': 'normal',
+        },
+    },
+    tableActionBtnContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'left',
+        justifyContent: 'left',
+        marginLeft: 10,
+    },
+    textfield: {
+        maxHeight: '10px',
+        marginTop: '-5px',
+        maxWidth: '120px',
+    },
+    tableCell: {
+        marginLeft: 10,
+    },
+}));
+
+const StyledTableCell = withStyles((theme) => ({
+    head: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white,
+    },
+    body: {
+        fontSize: 14,
+    },
+    root: {
+        '&:first-child': {
+            paddingLeft: theme.spacing(2),
+        },
+    },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+    root: {
+        '&:nth-of-type(odd)': {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+}))(TableRow);
+
+const ApisTableContent = ({ apis, updateApiList }) => {
+    const restApi = new API();
+    const [provider, setProvider] = useState('');
+    const [editableRows, setEditableRows] = useState(new Set());
+
+    const classes = useStyles();
+
+    const handleEditClick = (apiId) => {
+        setEditableRows((prevRows) => {
+            const newRows = new Set(prevRows);
+            newRows.add(apiId);
+            return newRows;
+        });
+    };
+
+    const handleCancelClick = (apiId) => {
+        setEditableRows((prevRows) => {
+            const newRows = new Set(prevRows);
+            newRows.delete(apiId);
+            return newRows;
+        });
+        setProvider('');
+    };
+
+    const handleSubmitClick = (apiId, apiProvider) => {
+        if (apiProvider === '') {
+            return (
+                Alert.error(
+                    <FormattedMessage
+                        id='AdminPages.ApiSettings.EditApi.form.edit.error'
+                        defaultMessage='API provider should not be empty.'
+                    />,
+                )
+            );
+        } else {
+            return restApi.updateApiProvider(apiId, apiProvider)
+                .then(() => {
+                    return (
+                        Alert.success(
+                            <FormattedMessage
+                                id='AdminPages.ApiSettings.EditApi.form.edit.successful'
+                                defaultMessage='API provider changed successfully'
+                            />,
+                        )
+                    );
+                })
+                .catch((error) => {
+                    const { response } = error;
+                    // This api returns 404 when the $provider is not found.
+                    // error codes: 901502, 901500 for user not found and scope not found
+                    if (response?.body?.code === 901502 || response?.body?.code === 901500) {
+                        return (
+                            Alert.error(
+                                <FormattedMessage
+                                    id='AdminPages.ApiSettings.EditApi.form.edit.other.error'
+                                    defaultMessage='Given Username is not valid.'
+                                />,
+                            )
+                        );
+                    } else {
+                        return (
+                            Alert.error(
+                                <FormattedMessage
+                                    id='AdminPages.ApiSettings.EditApi.form.edit.user.notvalid'
+                                    defaultMessage='Error while updating the provider name.'
+                                />,
+                            )
+                        );
+                    }
+                })
+                .finally(() => {
+                    updateApiList();
+                    handleCancelClick(apiId);
+                });
+        }
+    };
+
+    return (
+        <TableBody className={classes.fullHeight}>
+            {apis && apis.map((api) => (
+                <StyledTableRow className={classes.tableRow} key={api.id}>
+                    <StyledTableCell align='left'>
+                        {api.name}
+                    </StyledTableCell>
+                    <StyledTableCell align='left'>
+                        <div className={classes.tableCell}>
+                            {api.version}
+                        </div>
+                    </StyledTableCell>
+                    <StyledTableCell align='left'>
+                        {!editableRows.has(api.id) && (
+                            <div className={classes.tableCell}>
+                                { api.provider }
+                                <IconButton color='primary' onClick={() => handleEditClick(api.id)}>
+                                    <EditIcon aria-label='edit-api-settings' />
+                                </IconButton>
+                            </div>
+                        )}
+                        { editableRows.has(api.id) && (
+                            <div className={classes.tableActionBtnContainer}>
+                                <TextField
+                                    id='standard-basic'
+                                    label='Provider Name'
+                                    variant='standard'
+                                    size='small'
+                                    defaultValue={api.provider}
+                                    className={classes.textfield}
+                                    onChange={(e) => { setProvider(e.target.value); }}
+                                />
+                                <IconButton color='primary' onClick={() => handleSubmitClick(api.id, provider)}>
+                                    <SaveIcon aria-label='edit-api-settings' />
+                                </IconButton>
+                                <IconButton onClick={() => handleCancelClick(api.id)}>
+                                    <CancelIcon aria-label='edit-api-settings' />
+                                </IconButton>
+                            </div>
+                        )}
+                    </StyledTableCell>
+                </StyledTableRow>
+            ))}
+        </TableBody>
+    );
+};
+
+ApisTableContent.propTypes = {
+    apis: PropTypes.instanceOf(Map).isRequired,
+};
+
+export default ApisTableContent;