From fe9748da18f4f9e4acac8e612c094a371350673c Mon Sep 17 00:00:00 2001 From: Avishka-Shamendra Date: Tue, 3 Sep 2024 13:36:46 +0530 Subject: [PATCH] Update publisher Ui to support search improvements --- .../main/webapp/site/public/locales/en.json | 5 +- .../Apis/Listing/TableView/TableView.jsx | 20 ++ .../APICards/DefThumbClassic.jsx | 169 +++++++++++++++++ .../ImageGenerator/APICards/DefThumbPlain.jsx | 173 ++++++++++++++++++ .../APICards/DocThumbClassic.jsx | 1 - .../ImageGenerator/APICards/DocThumbPlain.jsx | 2 +- .../components/ImageGenerator/DefThumb.jsx | 41 +++++ .../Base/Header/headersearch/SearchUtils.jsx | 8 + 8 files changed, 416 insertions(+), 3 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbClassic.jsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/APICards/DefThumbPlain.jsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/components/ImageGenerator/DefThumb.jsx 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 ( + + ); +}; + +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; }