From 999a978553685894afca9685c38dbc9c5c101022 Mon Sep 17 00:00:00 2001
From: amvanbaren <aart.vanbaren@eclipse-foundation.org>
Date: Mon, 2 Dec 2024 16:03:43 +0200
Subject: [PATCH] Add engines to Works With section

---
 webui/src/extension-registry-types.ts         |  2 +-
 .../extension-detail-overview.tsx             | 63 +++++++++++++++----
 webui/src/utils.ts                            | 19 ++++++
 3 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/webui/src/extension-registry-types.ts b/webui/src/extension-registry-types.ts
index 569125632..45fecbe0b 100644
--- a/webui/src/extension-registry-types.ts
+++ b/webui/src/extension-registry-types.ts
@@ -91,7 +91,7 @@ export interface Extension {
     description?: string;
 
     // key: engine, value: version constraint
-    engines?: string[];
+    engines?: Record<string, string>;
     categories?: string[];
     tags?: string[];
     license?: string;
diff --git a/webui/src/pages/extension-detail/extension-detail-overview.tsx b/webui/src/pages/extension-detail/extension-detail-overview.tsx
index 17b952e04..4ebf8f59d 100644
--- a/webui/src/pages/extension-detail/extension-detail-overview.tsx
+++ b/webui/src/pages/extension-detail/extension-detail-overview.tsx
@@ -8,15 +8,15 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, ReactNode, useContext, useEffect, useState, useRef } from 'react';
-import { Box, Theme, Typography, Button, Link, NativeSelect, SxProps, styled } from '@mui/material';
+import React, { FunctionComponent, ReactNode, useContext, useEffect, useState, useRef, useMemo } from 'react';
+import { Box, Theme, Typography, Button, Link, NativeSelect, SxProps, styled, Grid, Stack } from '@mui/material';
 import { Link as RouteLink, useNavigate, useParams } from 'react-router-dom';
 import HomeIcon from '@mui/icons-material/Home';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import BugReportIcon from '@mui/icons-material/BugReport';
 import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
 import { MainContext } from '../../context';
-import { addQuery, createRoute, getTargetPlatformDisplayName } from '../../utils';
+import { addQuery, createRoute, getTargetPlatformDisplayName, getEngineDisplayName } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { SanitizedMarkdown } from '../../components/sanitized-markdown';
 import { Timestamp } from '../../components/timestamp';
@@ -24,7 +24,6 @@ import { Extension, ExtensionReference, VERSION_ALIASES } from '../../extension-
 import { ExtensionListRoutes } from '../extension-list/extension-list-container';
 import { ExtensionDetailRoutes } from './extension-detail';
 import { ExtensionDetailDownloadsMenu } from './extension-detail-downloads-menu';
-import { UrlString } from '../..';
 
 export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewProps> = props => {
 
@@ -35,6 +34,50 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
     const navigate = useNavigate();
     const abortController = useRef<AbortController>(new AbortController());
 
+    const worksWithEngines = useMemo(() => {
+        const engines = props.extension.engines;
+        if (engines == null) {
+            return null;
+        }
+
+        const data = Object.keys(engines)
+            .map((engine) => ({
+                key: engine,
+                name: getEngineDisplayName(engine),
+                version: engines[engine]
+            }))
+            .filter((d) => d.name != null);
+
+        return (<>
+            <Grid item xs='auto'>
+                <Stack spacing={0.5}>
+                    {
+                        data.map((d) => <Box component='span' key={d.key} sx={{ color: 'primary.dark', fontWeight: 'fontWeightBold' }}>{d.name}:</Box>)
+                    }
+                </Stack>
+            </Grid>
+            <Grid item xs>
+                <Stack spacing={0.5}>
+                    {
+                        data.map((d) => <Box component='span' key={d.key}>{d.version}</Box>)
+                    }
+                </Stack>
+            </Grid>
+        </>);
+    }, [props.extension.engines]);
+
+    const worksWithTargetPlatforms = useMemo(() => {
+        return (<Grid item xs={12}>
+            <Box component='span' sx={{ color: 'primary.dark', fontWeight: 'fontWeightBold' }}>Target Platforms:{' '}</Box>
+            {
+                Object.keys(props.extension.downloads).map((targetPlatform, index) => {
+                    const displayName = getTargetPlatformDisplayName(targetPlatform);
+                    return displayName ? <span key={targetPlatform}>{index > 0 ? ', ' : ''}{displayName}</span> : null;
+                })
+            }
+        </Grid>);
+    }, [props.extension.downloads]);
+
     useEffect(() => {
         updateReadme();
         return () => {
@@ -163,13 +206,6 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
         </>;
     };
 
-    const renderWorksWithList = (downloads: { [targetPlatform: string]: UrlString }): ReactNode => {
-        return Object.keys(downloads).map((targetPlatform, index) => {
-            const displayName = getTargetPlatformDisplayName(targetPlatform);
-            return displayName ? <span key={targetPlatform}>{index > 0 ? ', ' : ''}{displayName}</span> : null;
-        });
-    };
-
     const renderResourceLink = (label: string, resourceLink: SxProps<Theme>, href?: string): ReactNode => {
         if (!href || !(href.startsWith('http') || href.startsWith('mailto'))) {
             return '';
@@ -294,7 +330,10 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                     <Box sx={resourcesGroup}>
                         <Box>
                             <Typography variant='h6'>Works With</Typography>
-                            {renderWorksWithList(extension.downloads)}
+                            <Grid container spacing={0.5}>
+                                {worksWithEngines}
+                                {worksWithTargetPlatforms}
+                            </Grid>
                         </Box>
                     </Box>
                     : null
diff --git a/webui/src/utils.ts b/webui/src/utils.ts
index c952c9c6a..b8c9fd9f1 100644
--- a/webui/src/utils.ts
+++ b/webui/src/utils.ts
@@ -198,3 +198,22 @@ export function getTargetPlatformDisplayName(targetPlatform: string): string {
 
     return targetPlatformDisplayNames.get(targetPlatform) ?? '';
 }
+
+export function getEngineDisplayName(engine: string): string {
+    const engineDisplayNames = new Map([
+        ['vscode', 'VS Code'],
+        ['node', 'Node.js'],
+        ['npm', 'npm'],
+        ['pnpm', 'pnpm'],
+        ['yarn', 'Yarn'],
+        ['vsce', 'vsce'],
+        ['sqlops', 'SQL Operation Studio'],
+        ['azdata', 'Azure Data Studio'],
+        ['theiaPlugin', 'Theia Plugin'],
+        ['opensumi', 'OpenSumi'],
+        ['nadako.vshaxe', 'nadako.vshaxe'],
+        ['hbenl.vscode-test-explorer', 'hbenl.vscode-test-explorer'],
+    ]);
+
+    return engineDisplayNames.get(engine) ?? '';
+}
\ No newline at end of file