Separate Text Description and the Markdown Overview Description in Publisher Portal

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

@@ -519,9 +519,11 @@
   "Apis.Details.Configuration.components.CORSConfigurations.header.helper": "Press `Enter` after typing the header name, to add a new header",
   "Apis.Details.Configuration.components.CORSConfigurations.method.helper": "Press `Enter` after typing the method name, to add a new method",
   "Apis.Details.Configuration.components.CORSConfigurations.origin.helper": "Press `Enter` after typing the origin name,to add a new origin",
-  "Apis.Details.Configuration.components.DescriptionEditor.edit.content.button": "Edit description",
-  "Apis.Details.Configuration.components.DescriptionEditor.edit.description.of": "Description :",
-  "Apis.Details.Configuration.components.DescriptionEditor.markdown.help": "The Markdown option allows you to replace the content of the Overview page in devportal with the content given below.",
+  "Apis.Details.Configuration.components.Description.help": "This Description will be available in the API overview page in developer portal",
+  "Apis.Details.Configuration.components.Description.title": "Description",
+  "Apis.Details.Configuration.components.DescriptionEditor.edit.content.button": "Edit overview markdown",
+  "Apis.Details.Configuration.components.DescriptionEditor.edit.description.of": "Overview :",
+  "Apis.Details.Configuration.components.DescriptionEditor.markdown.help": "The option allows you to replace the content of the Overview page in devportal with the content given below. To reset to the default overview content, clear all the text below, click `Update Content,` and save your changes.",
   "Apis.Details.Configuration.components.DescriptionEditor.update.cont.button": "Update Content",
   "Apis.Details.Configuration.components.Endpoints.dynamic": "Dynamic",
   "Apis.Details.Configuration.components.Endpoints.endpoints": "Endpoints",

portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx

@@ -66,6 +66,7 @@ import StoreVisibility from './components/StoreVisibility';
 import Tags from './components/Tags';
 import Social from './components/Social';
 import APICategories from './components/APICategories';
+import APIDescription from './components/APIDescription';
 import SharedOrganizations from './components/SharedOrganizations';
 
 const PREFIX = 'DesignConfigurations';
@@ -341,7 +342,6 @@ export default function DesignConfigurations() {
     const [searchResult, setSearchResult] = useState({});
     const [updatedLabels, setUpdatedLabels] = useState([]);
     const [unselectedLabels, setUnselectedLabels] = useState([]);
-    const [descriptionType, setDescriptionType] = useState('');
     const [overview, setOverview] = useState('');
     const [overviewDocument, setOverviewDocument] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -362,26 +362,8 @@ export default function DesignConfigurations() {
         setAnchorEl(null);
     }
 
-    const handleChange = (event) => {
-        const type = event.target.value;
-        if (type === CONSTS.DESCRIPTION_TYPES.DESCRIPTION) {
-            if (apiConfig.description === null) {
-                configDispatcher({ action: CONSTS.DESCRIPTION_TYPES.DESCRIPTION, value: overview });
-            }
-        } else if (type === CONSTS.DESCRIPTION_TYPES.OVERVIEW) {
-            if (overviewDocument === null) {
-                setOverview(apiConfig.description);
-            }
-        }
-        setDescriptionType(type);
-    };
     const updateContent = (content) => {
-        if (descriptionType === CONSTS.DESCRIPTION_TYPES.DESCRIPTION) {
-            configDispatcher({ action: CONSTS.DESCRIPTION_TYPES.DESCRIPTION, value: content });
-        } else if (descriptionType === CONSTS.DESCRIPTION_TYPES.OVERVIEW) {
-            configDispatcher({ action: CONSTS.DESCRIPTION_TYPES.DESCRIPTION, value: null });
-            setOverview(content);
-        }
+        setOverview(content);
     };
     const loadContentForDoc = (documentId) => {
         const { apiType } = api.apiType;
@@ -454,9 +436,6 @@ export default function DesignConfigurations() {
                     const doc = overviewDoc[0];
                     setOverviewDocument(doc);
                     loadContentForDoc(doc.documentId);
-                    setDescriptionType(CONSTS.DESCRIPTION_TYPES.OVERVIEW); // Only one doc we can render
-                } else {
-                    setDescriptionType(CONSTS.DESCRIPTION_TYPES.DESCRIPTION);
                 }
             })
             .catch((error) => {
@@ -520,13 +499,13 @@ export default function DesignConfigurations() {
                     }));
                 }
             });
-        if (descriptionType === CONSTS.DESCRIPTION_TYPES.DESCRIPTION) {
+        if (overview.trim() === '') {
             if (overviewDocument) {
                 deleteOverviewDocument();
             }
         }
 
-        if (descriptionType === CONSTS.DESCRIPTION_TYPES.OVERVIEW) {
+        else {
             let document = overviewDocument;
             if (document === null) {
                 document = await addDocument();
@@ -774,13 +753,17 @@ export default function DesignConfigurations() {
                                                 <DescriptionEditor
                                                     api={apiConfig}
                                                     updateContent={updateContent}
-                                                    descriptionType={descriptionType}
-                                                    handleChange={handleChange}
                                                     overview={overview}
                                                 />
                                             </Grid>
                                         </Grid>
                                     </Box>
+                                    <Box py={1}>
+                                        <APIDescription
+                                            api={apiConfig}
+                                            configDispatcher={configDispatcher}                                        
+                                        />
+                                    </Box>
                                     <Box py={1}>
                                         <AccessControl api={apiConfig} configDispatcher={configDispatcher}
                                             setIsDisabled={setErrorInAccessRoles} />

portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/APIDescription.jsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2025, WSO2 LLC. (http://www.wso2.com).
+ *
+ * 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 from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import { isRestricted } from 'AppData/AuthManager';
+import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext';
+
+/**
+ *
+ *
+ * @export
+ * @param {*} props
+ * @returns
+ */
+function APIDescription(props) {
+    const { api, configDispatcher } = props;
+    const [apiFromContext] = useAPI();
+
+    return (
+        <TextField
+            label={(
+                <FormattedMessage
+                    id='Apis.Details.Configuration.components.Description.title'
+                    defaultMessage='Description'
+                />
+            )}
+            id='description'
+            variant='outlined'
+            value={api.description || ''}
+            fullWidth
+            multiline
+            rows={3}
+            margin='dense'
+            onChange={(e) => configDispatcher(
+                { action: 'description', value: e.target.value }
+            )}
+            disabled={isRestricted(
+                ['apim:api_create', 'apim:api_publish'], apiFromContext
+            )}
+            helperText={(
+                <FormattedMessage
+                    id='Apis.Details.Configuration.components.Description.help'
+                    defaultMessage='This Description will be available in the 
+                    API overview page in developer portal'
+                />
+            )}
+            style={{ marginTop: 0, paddingBottom: 0  }}
+        />
+    );
+}
+
+APIDescription.propTypes = {
+    api: PropTypes.shape({}).isRequired,
+    configDispatcher: PropTypes.func.isRequired,
+};
+
+export default APIDescription;