Add the user inputs inside the ApisTableContent.

wso2 · Dec 5, 2023 · 13094e0 · 13094e0
1 parent f6415ba
commit 13094e0
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 8 deletions.
diff --git a/portals/admin/src/main/webapp/source/src/app/components/APISettings/ApisTableContent.jsx b/portals/admin/src/main/webapp/source/src/app/components/APISettings/ApisTableContent.jsx
@@ -4,8 +4,11 @@ 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 API from 'AppData/api';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import Alert from 'AppComponents/Shared/Alert';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
 import EditIcon from '@material-ui/icons/Edit';
 import { IconButton } from '@material-ui/core';
 
@@ -27,6 +30,11 @@ const useStyles = makeStyles((theme) => ({
             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),
@@ -69,27 +77,100 @@ const StyledTableRow = withStyles((theme) => ({
     },
 }))(TableRow);
 
-const ApisTableContent = ({ apis }) => {
+const ApisTableContent = ({ apis, updateApiList }) => {
     const [notFound, setNotFound] = useState(false);
+    const restApi = new API();
+    const [provider, setProvider] = useState("");
+    const [editableRows, setEditableRows] = useState(new Set());
+
     const classes = useStyles();
 
     if (notFound) {
         return <ResourceNotFound />;
     }
 
+    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;
+        });
+    };
+
+    const handleSubmitClick = (apiId, apiProvider) => {
+        return restApi.updateApiProvider(apiId, apiProvider)
+            .then(() => {
+                return (
+                    Alert.success(
+                        <FormattedMessage
+                        id='AdminPages.ApiSettings.EditApi.form.edit.successful'
+                        defaultMessage='Api provider changed successfully'
+                        />,
+                    )
+                );
+            })
+            .catch((error) => {
+                let validationError = 'Something went wrong when validating the user';
+                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) {
+                    validationError = `${provider} is not a valid User`;
+                }
+                if (response?.body?.code === 500) {
+                    const notValidUser = 'Error while updating the provider name to ' + provider;
+                    throw notValidUser;
+                } else {
+                    const updateError = validationError;
+                    throw updateError;
+                }
+            })
+            .finally(() => {
+                updateApiList();
+                handleCancelClick(apiId);
+            });
+    };
+
     return (
         <TableBody className={classes.fullHeight}>
             {apis && apis.map((api) => (
-                <StyledTableRow className={classes.tableRow} key={api.apiId}>
+                <StyledTableRow className={classes.tableRow} key={api.id}>
                     <StyledTableCell align='left'>
                         {api.name}
                     </StyledTableCell>
                     <StyledTableCell align='left'>{api.version}</StyledTableCell>
                     <StyledTableCell align='left'>
-                        {api.provider}
-                        <IconButton color="primary" onClick={() => console.log("123")}>
-                            <EditIcon aria-label='edit-api-settings' />
-                        </IconButton>
+                        {!editableRows.has(api.id) && (
+                            <>
+                                {api.provider}
+                                <IconButton color="primary" onClick={() => handleEditClick(api.id)}>
+                                    <EditIcon aria-label='edit-api-settings' />
+                                </IconButton>
+                            </>
+                        )}
+                        {editableRows.has(api.id) && (
+                            <>
+                                <TextField
+                                    id="standard-basic"
+                                    label="Enter Provider Name"
+                                    variant="standard"
+                                    size="small"
+                                    defaultValue={api.provider}
+                                    value={provider}
+                                    onChange={(e) => { setProvider(e.target.value) }}
+                                />
+                                <Button variant="contained" color="primary" size='small' className={classes.button} onClick={() => handleSubmitClick(api.id, provider)}>Submit</Button>
+                                <Button variant="outlined" size='small' className={classes.button} onClick={() => handleCancelClick(api.id)}>Cancel</Button>
+                            </>
+                        )}
                     </StyledTableCell>
                 </StyledTableRow>
             ))}

diff --git a/portals/admin/src/main/webapp/source/src/app/components/APISettings/ListApis.jsx b/portals/admin/src/main/webapp/source/src/app/components/APISettings/ListApis.jsx
@@ -236,7 +236,7 @@ export default function ListApis() {
                             editComponentProps={{
                                 apiList,
                             }}
-                            apiCall={apiCall}
+                            updateApiList={apiCall}
                         />
                         <TableFooter>
                             <TableRow>