Change Api Provider Screen Added

(cherry picked from commit ff9008a)

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

@@ -62,6 +62,9 @@
   "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.successful": "Api owner changed successfully",
+  "AdminPages.ApiSettings.EditApi.form.helperText": "Enter a new Owner. Make sure the new owner has logged into the Developer Portal at least once",
+  "AdminPages.ApiSettings.EditApi.form.name": "Api 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 +87,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 Api by Api Owner",
+  "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 Owner",
+  "Apis.Listing.apiTableHead.actions": "Actions",
+  "Apis.Listing.apiTableHead.name": "Name",
+  "Apis.Listing.apiTableHead.owner": "Owner",
   "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",
@@ -119,6 +131,7 @@
   "Base.RouteMenuMapping.application.deletion": "Application Deletion",
   "Base.RouteMenuMapping.application.throttling.policies": "Application Policies",
   "Base.RouteMenuMapping.applications": "Applications",
+  "Base.RouteMenuMapping.apps": "Apps",
   "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,163 @@
+/*
+ * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. 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, { Component } from 'react';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import ResourceNotFound from 'AppComponents/Base/Errors/ResourceNotFound';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import EditApi from 'AppComponents/APISettings/EditApi';
+/**
+ * @inheritdoc
+ * @param {*} theme theme object
+ */
+const styles = (theme) => ({
+    fullHeight: {
+        height: '100%',
+    },
+    tableRow: {
+        height: theme.spacing(5),
+        '& td': {
+            padding: theme.spacing(0.5),
+        },
+    },
+    appOwner: {
+        pointerEvents: 'none',
+    },
+    appName: {
+        '& a': {
+            color: '#1b9ec7 !important',
+        },
+    },
+    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',
+        },
+    },
+});
+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);
+
+/**
+ *
+ *
+ * @class ApisTableContent
+ * @extends {Component}
+ */
+class ApisTableContent extends Component {
+    /**
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+        this.state = {
+            notFound: false,
+        };
+        this.handleAppEdit = this.handleAppEdit.bind(this);
+    }
+
+    handleAppEdit = (app) => {
+        const { EditComponent, editComponentProps, apiCall } = this.props;
+        return (
+            <>
+                {EditComponent && (
+                    <EditComponent
+                        dataRow={app}
+                        updateList={apiCall}
+                        {...editComponentProps}
+                    />
+                )}
+            </>
+        );
+    };
+
+    /**
+     * @inheritdoc
+     * @memberof ApisTableContent
+     */
+    render() {
+        const {
+            apps, classes, editComponentProps, apiCall,
+        } = this.props;
+        const { notFound } = this.state;
+
+        if (notFound) {
+            return <ResourceNotFound />;
+        }
+        return (
+            <TableBody className={classes.fullHeight}>
+                {apps && apps.map((app) => {
+                    return (
+                        <StyledTableRow className={classes.tableRow} key={app.apiId}>
+                            <StyledTableCell align='left'>
+                                {app.name}
+                            </StyledTableCell>
+                            <StyledTableCell align='left'>{app.owner}</StyledTableCell>
+                            <StyledTableCell align='left'>
+                                <EditApi
+                                    dataRow={app}
+                                    updateList={apiCall}
+                                    {...editComponentProps}
+                                />
+                            </StyledTableCell>
+                        </StyledTableRow>
+                    );
+                })}
+            </TableBody>
+        );
+    }
+}
+ApisTableContent.propTypes = {
+    toggleDeleteConfirmation: PropTypes.func.isRequired,
+    apps: PropTypes.instanceOf(Map).isRequired,
+};
+export default withStyles(styles)(ApisTableContent);

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

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. 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 from 'react';
+import PropTypes from 'prop-types';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import { FormattedMessage } from 'react-intl';
+
+/**
+ * @inheritdoc
+ * @class apiTableHead
+ * @extends {Component}
+ */
+const apisTableHead = (props) => {
+    const createSortHandler = (property) => (event) => {
+        props.onRequestSort(event, property);
+    };
+    const columnData = [
+        {
+            id: 'name',
+            numeric: false,
+            disablePadding: true,
+            label: (<FormattedMessage
+                id='Apis.Listing.apiTableHead.name'
+                defaultMessage='Name'
+            />),
+            sorting: true,
+        },
+        {
+            id: 'owner',
+            numeric: false,
+            disablePadding: false,
+            label: (<FormattedMessage
+                id='Apis.Listing.apiTableHead.owner'
+                defaultMessage='Owner'
+            />),
+            sorting: true,
+        },
+        {
+            id: 'actions',
+            numeric: false,
+            disablePadding: false,
+            label: (<FormattedMessage
+                id='Apis.Listing.apiTableHead.actions'
+                defaultMessage='Actions'
+            />),
+            sorting: false,
+        },
+    ];
+    const { order, orderBy } = props;
+    return (
+        <TableHead>
+            <TableRow>
+                {columnData.map((column) => {
+                    return (
+                        <TableCell
+                            key={column.id}
+                            align='left'
+                            sortDirection={orderBy === column.id ? order : false}
+                        >
+                            {column.sorting ? (
+                                <TableSortLabel
+                                    active={orderBy === column.id}
+                                    direction={order}
+                                    onClick={createSortHandler(column.id)}
+                                >
+                                    {column.label}
+                                </TableSortLabel>
+                            ) : (
+                                column.label
+                            )}
+                        </TableCell>
+                    );
+                })}
+            </TableRow>
+        </TableHead>
+    );
+};
+apisTableHead.propTypes = {
+    onRequestSort: PropTypes.func.isRequired,
+    order: PropTypes.string.isRequired,
+    orderBy: PropTypes.string.isRequired,
+};
+export default apisTableHead;