Content Search Enhancements UI Improvements

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

@@ -355,7 +355,9 @@
   "Apis.Listing.ApiThumb.version": "Version",
   "Apis.Listing.CategoryListingCategories.categoriesNotFound": "Categories cannot be found",
   "Apis.Listing.CategoryListingCategories.title": "API Categories",
-  "Apis.Listing.DocThumb.apiName": "Api Name",
+  "Apis.Listing.DefThumb.apiName": "API Name",
+  "Apis.Listing.DefThumb.apiVersion": "API Version",
+  "Apis.Listing.DocThumb.apiName": "API Name",
   "Apis.Listing.DocThumb.apiVersion": "API Version",
   "Apis.Listing.DocThumb.sourceType": "Source Type:",
   "Apis.Listing.Listing.ApiTagCloud.title": "Tags / API Categories",
@@ -373,6 +375,7 @@
   "Apis.Listing.StarRatingBar.users": "users",
   "Apis.Listing.StarRatingBar.you": "You",
   "Apis.Listing.SubscriptionPolicySelect.subscribe": "Subscribe",
+  "Apis.Listing.TableView.TableView.def.flag": "[Def]",
   "Apis.Listing.TableView.TableView.doc.flag": "[Doc]",
   "Apis.Listing.TagCloudListing.apigroups.main": "API Groups",
   "Apis.Listing.TagCloudListingTags.allApis": "All Apis",

portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/DefThumb.jsx

@@ -0,0 +1,190 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import { FormattedMessage } from 'react-intl';
+import ImageGenerator from './ImageGenerator';
+
+const PREFIX = 'DefinitionThumb';
+
+const classes = {
+    root: `${PREFIX}-root`,
+    media: `${PREFIX}-media`,
+    content: `${PREFIX}-content`,
+    actions: `${PREFIX}-actions`,
+    header: `${PREFIX}-header`,
+    info: `${PREFIX}-info`,
+    apiName: `${PREFIX}-apiName`,
+    version: `${PREFIX}-version`,
+    subtitle: `${PREFIX}-subtitle`,
+};
+
+const StyledCard = styled(Card)(({ theme }) => ({
+    [`&.${classes.root}`]: {
+        width: theme.custom.thumbnail.width,
+        backgroundColor: '#f5f5f5',
+        minHeight: 330,
+        margin: theme.spacing(2),
+        cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'background-color 0.3s ease',
+        '&:hover': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+    [`& .${classes.media}`]: {
+        height: 200,
+    },
+    [`& .${classes.content}`]: {
+        flexGrow: 1,
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${classes.actions}`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(1),
+    },
+    [`& .${classes.header}`]: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
+    },
+    [`& .${classes.info}`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    [`& .${classes.apiName}`]: {
+        flex: 1,
+    },
+    [`& .${classes.version}`]: {
+        flex: 1,
+        textAlign: 'right',
+    },
+    [`& .${classes.subtitle}`]: {
+        color: theme.palette.grey[600],
+        fontSize: '0.75rem',
+    },
+}));
+
+const DefinitionThumb = ({ def }) => {
+    const [state] = useState({
+        category: null,
+        selectedIcon: null,
+        color: null,
+        backgroundIndex: null,
+        imageObj: null,
+    });
+
+    const theme = useTheme();
+    const history = useHistory();
+    const detailsLink = `/apis/${def.apiUUID}/overview`;
+    const {
+        name, apiName, apiVersion,
+    } = def;
+    const {
+        category, selectedIcon, color, backgroundIndex,
+    } = state;
+
+    useEffect(() => {
+        return () => {
+            if (state.imageObj) {
+                window.URL.revokeObjectURL(state.imageObj);
+            }
+        };
+    }, [state.imageObj]);
+
+    const handleCardClick = () => {
+        history.push(detailsLink);
+    };
+
+    return (
+        <StyledCard className={classes.root} onClick={handleCardClick}>
+            {theme.custom.thumbnail.defaultApiImage ? (
+                <CardMedia
+                    className={classes.media}
+                    image={theme.custom.thumbnail.defaultApiImage}
+                    title='API Definition Image'
+                />
+            ) : (
+                <ImageGenerator
+                    width={theme.custom.thumbnail.width}
+                    height={140}
+                    api={def}
+                    fixedIcon={{
+                        key: selectedIcon,
+                        color,
+                        backgroundIndex,
+                        category,
+                        def,
+                    }}
+                />
+            )}
+            <CardContent className={classes.content}>
+                <Typography
+                    variant='h5'
+                    component='div'
+                    className={classes.header}
+                    title={name}
+                >
+                    {name}
+                </Typography>
+                <div className={classes.info}>
+                    <Typography variant='subtitle1' className={classes.apiName}>
+                        {apiName}
+                    </Typography>
+                    <Typography variant='subtitle1' className={classes.version}>
+                        {apiVersion}
+                    </Typography>
+                </div>
+                <div className={classes.info}>
+                    <Typography className={classes.subtitle}>
+                        <FormattedMessage defaultMessage='API Name' id='Apis.Listing.DefThumb.apiName' />
+                    </Typography>
+                    <Typography className={classes.subtitle} style={{ textAlign: 'right' }}>
+                        <FormattedMessage defaultMessage='API Version' id='Apis.Listing.DefThumb.apiVersion' />
+                    </Typography>
+                </div>
+            </CardContent>
+        </StyledCard>
+    );
+};
+
+DefinitionThumb.propTypes = {
+    def: PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        apiName: PropTypes.string,
+        apiVersion: PropTypes.string,
+        apiContext: PropTypes.string,
+        apiUUID: PropTypes.string,
+        apiProvider: PropTypes.string,
+        apiType: PropTypes.string,
+    }).isRequired,
+};
+
+export default DefinitionThumb;