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 2bede92a8c8..71c968d86c8 100644
--- a/portals/publisher/src/main/webapp/site/public/locales/en.json
+++ b/portals/publisher/src/main/webapp/site/public/locales/en.json
@@ -1625,9 +1625,12 @@
"Apis.Listing.SampleAPIProduct.creator.error": "API is not deployed yet! Please deploy the API before trying out",
"Apis.Listing.SampleAPIProduct.description": "Combine multiple API resources in to a single API",
"Apis.Listing.SampleAPIProduct.onboarding.menu.card.name": "API Product",
+ "Apis.Listing.TableView.TableView.def.flag": "[Def]",
"Apis.Listing.TableView.TableView.doc.flag": "[Doc]",
"Apis.Listing.TableView.TableView.error.loading": "Error While Loading APIs",
"Apis.Listing.TaskState.generic.error.prefix": "Error while",
+ "Apis.Listing.components.ImageGenerator.DefThumb.apiName": "API Name",
+ "Apis.Listing.components.ImageGenerator.DefThumb.apiVersion": "API Version",
"Apis.Listing.components.ImageGenerator.DocThumb.apiName": "API Name",
"Apis.Listing.components.ImageGenerator.DocThumb.apiVersion": "API Version",
"Apis.Listing.components.ImageGenerator.DocThumb.sourceType": "Source Type:",
@@ -2030,4 +2033,4 @@
"upload.image": "Click or drag the image to upload.",
"upload.image.size.error": "Uploaded File is too large. Maximum file size limit to 1MB",
"upload.image.size.info": "Maximum file size limit to 1MB"
-}
\ No newline at end of file
+}
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/TableView/TableView.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/TableView/TableView.jsx
index aadd9d74f89..a7c65059f8e 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/TableView/TableView.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/TableView/TableView.jsx
@@ -35,6 +35,7 @@ import TopMenu from 'AppComponents/Apis/Listing/components/TopMenu';
import CustomIcon from 'AppComponents/Shared/CustomIcon';
import SampleAPIProduct from 'AppComponents/Apis/Listing/SampleAPI/SampleAPIProduct';
import Alert from 'AppComponents/Shared/Alert';
+import DefThumb from '../components/ImageGenerator/DefThumb';
const PREFIX = 'TableView';
@@ -349,6 +350,23 @@ class TableView extends React.Component {
{apiName}
);
+ } else if (artifact.type === 'DEFINITION') {
+ const linkTo = artifact.associatedType === 'API'
+ ? `/apis/${artifact.apiUUID}/api-definition`
+ : `/api-products/${artifact.apiUUID}/api-definition`;
+ return (
+
+ code
+
+ {artifact.name}
+
+ );
}
return (
@@ -449,6 +467,8 @@ class TableView extends React.Component {
if (artifact) {
if (artifact.type === 'DOC') {
return ;
+ } else if (artifact.type === 'DEFINITION') {
+ return ;
} else if (artifact.type === 'APIPRODUCT') {
artifact.state = 'PUBLISHED';
return ;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbClassic.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbClassic.jsx
new file mode 100644
index 00000000000..76576d821ee
--- /dev/null
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbClassic.jsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright (c) 2024, 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, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+import Link from '@mui/material/Link';
+import PropTypes from 'prop-types';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import LetterGenerator from 'AppComponents/Apis/Listing/components/ImageGenerator/LetterGenerator';
+import Configurations from 'Config';
+
+const PREFIX = 'DefThumb';
+
+const classes = {
+ card: `${PREFIX}-card`,
+ thumbHeader: `${PREFIX}-thumbHeader`
+};
+
+const StyledLink = styled(Link)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.card}`]: {
+ margin: theme.spacing(3 / 2),
+ maxWidth: theme.spacing(32),
+ transition: 'box-shadow 0.3s ease-in-out',
+ },
+
+ [`& .${classes.thumbHeader}`]: {
+ maxWidth: theme.spacing(16),
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'normal',
+ wordBreak: 'break-word',
+ overflowWrap: 'break-word',
+ },
+
+ [`& .${classes.defaultCardContent}`]: {
+ height: '111px',
+ },
+
+ [`& .${classes.maxCardContent}`]: {
+ height: '208px',
+ },
+
+ [`& .${classes.minCardContent}`]: {
+ height: '187px',
+ },
+}));
+
+
+const DefThumb = (props) => {
+ const { def } = props;
+ const [isHover, setIsHover] = useState(false);
+ const toggleMouseOver = () => setIsHover(!isHover);
+ const linkTo = def.associatedType === 'API'
+ ? `/apis/${def.apiUUID}/api-definition`
+ : `/api-products/${def.apiUUID}/api-definition`;
+
+ let thumbIcon;
+ let configValue;
+ const { tileDisplayInfo } = Configurations.apis;
+ if (tileDisplayInfo.showBusinessDetails === true && tileDisplayInfo.showTechnicalDetails === true) {
+ configValue = 2;
+ } else if (tileDisplayInfo.showBusinessDetails === true || tileDisplayInfo.showTechnicalDetails === true) {
+ configValue = 1;
+ }
+ let cardContentClassName;
+ if (configValue === 1) {
+ cardContentClassName = classes.minCardContent;
+ } else if (configValue === 2) {
+ cardContentClassName = classes.maxCardContent;
+ } else {
+ cardContentClassName = classes.defaultCardContent;
+ }
+ return (
+
+
+
+
+
+
+
+
+ {def.name}
+
+
+
+
+
+
+ {def.associatedType}
+
+
+ {def.apiName}
+
+
+ Version:
+ {' '}
+ {def.apiVersion}
+
+
+
+
+
+
+
+ );
+};
+
+DefThumb.propTypes = {
+ def: PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ apiName: PropTypes.string.isRequired,
+ apiVersion: PropTypes.string.isRequired,
+ }).isRequired,
+};
+export default DefThumb;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbPlain.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbPlain.jsx
new file mode 100644
index 00000000000..c4f6d864422
--- /dev/null
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbPlain.jsx
@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2024, 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 { styled } from '@mui/material/styles';
+import Icon from '@mui/material/Icon';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+
+const PREFIX = 'DefThumbPlain';
+
+const classes = {
+ root: `${PREFIX}-root`,
+ bullet: `${PREFIX}-bullet`,
+ title: `${PREFIX}-title`,
+ pos: `${PREFIX}-pos`,
+ thumbHeader: `${PREFIX}-thumbHeader`,
+ contextBox: `${PREFIX}-contextBox`,
+ caption: `${PREFIX}-caption`,
+ imageDisplay: `${PREFIX}-imageDisplay`
+};
+
+const StyledCard = styled(Card)((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.root}`]: {
+ minWidth: 200,
+ marginTop: 10,
+ marginRight: 10,
+ marginBottom: 10,
+ },
+
+ [`& .${classes.bullet}`]: {
+ display: 'inline-block',
+ margin: '0 2px',
+ transform: 'scale(0.8)',
+ },
+
+ [`& .${classes.title}`]: {
+ fontSize: 14,
+ },
+
+ [`& .${classes.pos}`]: {
+ marginBottom: 12,
+ },
+
+ [`& .${classes.thumbHeader}`]: {
+ width: '150px',
+ color: '#444',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ cursor: 'pointer',
+ margin: 0,
+ whiteSpace: 'normal',
+ wordBreak: 'break-word',
+ overflowWrap: 'break-word',
+ },
+
+ [`& .${classes.contextBox}`]: {
+ maxWidth: 120,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+
+ [`& .${classes.caption}`]: {
+ color: theme.palette.grey[700],
+ },
+
+ [`& .${classes.imageDisplay}`]: {
+ maxWidth: '40px',
+ maxHeight: '40px',
+ }
+}));
+
+/**
+ * Render a thumbnail
+ * @param {JSON} props required pros.
+ * @returns {JSX} Thumbnail rendered output.
+ */
+function DefThumbPlain(props) {
+
+ const { def } = props;
+ const linkTo = def.associatedType === 'API'
+ ? `/apis/${def.apiUUID}/api-definition`
+ : `/api-products/${def.apiUUID}/api-definition`;
+ return (
+
+
+
+
+
+
+
+ description
+
+
+
+ {def.name}
+
+
+
+
+
+
+
+ {def.apiName}
+
+
+
+
+
+
+
+
+ {def.apiVersion}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DefThumbPlain;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DocThumbClassic.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DocThumbClassic.jsx
index e27f19b8d9d..36bd16dfb6d 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DocThumbClassic.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DocThumbClassic.jsx
@@ -105,7 +105,6 @@ const DocThumb = (props) => {
component={RouterLink}
to={'/apis/' + doc.apiUUID + '/documents/' + doc.id + '/details'}
aria-hidden='true'
- sx={{ border: '2px solid blue'}}
>
+
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/DefThumb.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/DefThumb.jsx
new file mode 100644
index 00000000000..6d6db796ba6
--- /dev/null
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/DefThumb.jsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2024, 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 { useTheme } from '@mui/material/styles';
+import DefThumbClassic from 'AppComponents/Apis/Listing/components/ImageGenerator/APICards/DefThumbClassic';
+import DefThumbPlain from 'AppComponents/Apis/Listing/components/ImageGenerator/APICards/DefThumbPlain';
+
+/**
+ * Render a thumbnail
+ * @param {JSON} props required pros.
+ * @returns {JSX} Thumbnail rendered output.
+ */
+export default function DefThumb(props) {
+ const theme = useTheme();
+ const { custom } = theme;
+ const { classes, def } = props;
+
+ if (!custom.thumbnailTemplates || !custom.thumbnailTemplates.active) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/headersearch/SearchUtils.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/headersearch/SearchUtils.jsx
index 0461491a3af..ba560298129 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/headersearch/SearchUtils.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/headersearch/SearchUtils.jsx
@@ -85,6 +85,12 @@ function getPath(suggestion) {
return `/apis/${suggestion.id}/overview`;
case 'APIPRODUCT':
return `/api-products/${suggestion.id}/overview`;
+ case 'DEFINITION':
+ if (suggestion.associatedType === 'API') {
+ return `/apis/${suggestion.apiUUID}/api-definition`
+ } else {
+ return `/api-products/${suggestion.apiUUID}/api-definition`
+ }
default:
if (suggestion.associatedType === 'API') {
return `/apis/${suggestion.apiUUID}/documents/${suggestion.id}/details`;
@@ -118,6 +124,8 @@ function getIcon(type) {
strokeColor='#000000'
/>
);
+ case 'DEFINITION':
+ return code;
default:
return library_books;
}