UI improvements on dev file registry web view

src/webview/common-ext/createComponentHelpers.ts

@@ -26,7 +26,7 @@ export async function isValidProjectFolder(
     if (!folder) { // Folder cannot be Undefined
         return {
             status: ValidationStatus.error,
-            message:  'Please specify a valid folder path'
+            message: 'Please specify a valid folder path'
         };
     }
 
@@ -98,7 +98,7 @@ async function canRecursivelyCreateProjectFolder(
     const folderPath = path.parse(folder);
     const root = folderPath.root;
 
-     // Reconstruct the folder to avoid having `/` (or `\` on Windows) at the end
+    // Reconstruct the folder to avoid having `/` (or `\` on Windows) at the end
     let parentFolder: string = path.join(folderPath.dir, folderPath.base).toString();
     let parentFolderExists = false;
     while (parentFolder !== root && !parentFolderExists) {
@@ -134,18 +134,18 @@ async function canRecursivelyCreateProjectFolder(
  * @param isComponentBasedValidation component based validation or not
  * @returns the validation message if the component name is invalid, and undefined otherwise
  */
-export function validateName(name: string, isComponentBasedValidation=true): string {
-    let validationMessage = NameValidator.emptyName(`Please enter a ${isComponentBasedValidation? 'component' : ''} name.`, name);
+export function validateName(name: string, isComponentBasedValidation = true): string {
+    let validationMessage = NameValidator.emptyName(`Please enter a ${isComponentBasedValidation ? 'component' : ''} name.`, name);
     if (!validationMessage) {
         validationMessage = NameValidator.validateMatches(
-            `Not a valid ${isComponentBasedValidation? 'component' : ''} name.
+            `Not a valid ${isComponentBasedValidation ? 'component' : ''} name.
         Please use lower case alphanumeric characters or '-', start with an alphabetic character, and end with an alphanumeric character`,
             name,
         );
     }
     if (!validationMessage) {
         validationMessage = NameValidator.lengthName(
-            `${isComponentBasedValidation? 'Component name' : 'Name'} should be between 2-63 characters`,
+            `${isComponentBasedValidation ? 'Component name' : 'Name'} should be between 2-63 characters`,
             name,
             0,
         );
@@ -204,38 +204,40 @@ export function getDevfileRegistries(): DevfileRegistry[] {
             (devfileRegistry) => format(devfileRegistry.url) === format(component.registry.url),
         );
 
-        devfileRegistry.devfiles.push({
-            description: component.description,
-            registryName: devfileRegistry.name,
-            logoUrl: component.devfileData.devfile.metadata.icon,
-            name: component.displayName,
-            id: component.name,
-            starterProjects: component.devfileData.devfile.starterProjects,
-            tags: component.tags,
-            yaml: JSYAML.dump(component.devfileData.devfile),
-            supportsDebug:
-                Boolean(
-                    component.devfileData.devfile.commands?.find(
-                        (command) => command.exec?.group?.kind === 'debug',
+        if (!component?.tags.some((value) => value.toLowerCase().includes('deprecate'))) {
+            devfileRegistry.devfiles.push({
+                description: component.description,
+                registryName: devfileRegistry.name,
+                logoUrl: component.devfileData.devfile.metadata.icon,
+                name: component.displayName,
+                id: component.name,
+                starterProjects: component.devfileData.devfile.starterProjects,
+                tags: component.tags,
+                yaml: JSYAML.dump(component.devfileData.devfile),
+                supportsDebug:
+                    Boolean(
+                        component.devfileData.devfile.commands?.find(
+                            (command) => command.exec?.group?.kind === 'debug',
+                        ),
+                    ) ||
+                    Boolean(
+                        component.devfileData.devfile.commands?.find(
+                            (command) => command.composite?.group?.kind === 'debug',
+                        ),
                     ),
-                ) ||
-                Boolean(
-                    component.devfileData.devfile.commands?.find(
-                        (command) => command.composite?.group?.kind === 'debug',
+                supportsDeploy:
+                    Boolean(
+                        component.devfileData.devfile.commands?.find(
+                            (command) => command.exec?.group?.kind === 'deploy',
+                        ),
+                    ) ||
+                    Boolean(
+                        component.devfileData.devfile.commands?.find(
+                            (command) => command.composite?.group?.kind === 'deploy',
+                        ),
                     ),
-                ),
-            supportsDeploy:
-                Boolean(
-                    component.devfileData.devfile.commands?.find(
-                        (command) => command.exec?.group?.kind === 'deploy',
-                    ),
-                ) ||
-                Boolean(
-                    component.devfileData.devfile.commands?.find(
-                        (command) => command.composite?.group?.kind === 'deploy',
-                    ),
-                ),
-        } as Devfile);
+            } as Devfile);
+        }
     }
     devfileRegistries.sort((a, b) => (a.name < b.name ? -1 : 1));
     return devfileRegistries;
@@ -251,25 +253,23 @@ export function getDevfileRegistries(): DevfileRegistry[] {
  * @returns a list of the devfile capabilities
  */
 export function getDevfileCapabilities(): string[] {
-    return [ 'Debug Support', 'Deploy Support'];
+    return ['Debug', 'Deploy'];
 }
 
 /**
  * Returns a list of the devfile tags found in devfiles registries.
  *
  * @returns a list of the devfile tags
  */
-export function getDevfileTags(url?:string ): string[] {
+export function getDevfileTags(url?: string): string[] {
     const devfileRegistries = getDevfileRegistries();
 
     const devfileTags: string[] = [
-            ...new Set(
-                devfileRegistries
-                    .filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
-                    .flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
-                    .flatMap((_devfile) => _devfile.tags))
-        ]
-        .sort((a, b) => a.localeCompare(b));
-
-    return devfileTags;
+        ...new Set(
+            devfileRegistries
+                .filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
+                .flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
+                .flatMap((_devfile) => _devfile.tags))
+    ]
+    return devfileTags.filter((devfileTag) => !devfileTag.toLowerCase().includes('deprecate'));
 }

src/webview/common/devfileExplanation.tsx

@@ -2,13 +2,13 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import { Alert, AlertTitle } from '@mui/material';
+import { Alert } from '@mui/material';
 import * as React from 'react';
 
 export function DevfileExplanation() {
     return (
-        <Alert severity="info">
-            <AlertTitle>Devfile</AlertTitle>A YAML file that contains information on how to deploy
+        <Alert severity="info" sx={{padding: '0 8px !important'}}>
+            Devfile: A YAML file that contains information on how to deploy
             your component to OpenShift, based on the language or framework that the project uses.
         </Alert>
     );

src/webview/common/devfileListItem.tsx

@@ -2,7 +2,7 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import { Check, Close } from '@mui/icons-material';
+import { Check } from '@mui/icons-material';
 import { Box, Chip, Stack, Tooltip, Typography } from '@mui/material';
 import * as React from 'react';
 import { Devfile } from '../common/devfile';
@@ -12,6 +12,7 @@ import validator from 'validator'
 export type DevfileListItemProps = {
     devfile: Devfile;
     buttonCallback?: () => void;
+    showFullDescription?: boolean;
 };
 
 function checkedDevfileLogoUrl(logoUrl?: string) {
@@ -38,11 +39,12 @@ export function DevfileListItem(props: DevfileListItemProps) {
                     <DevfileListContent
                         devfile={props.devfile}
                         buttonCallback={props.buttonCallback}
+                        showFullDescription={props.showFullDescription}
                     />
                 </Box>
             ) : (
                 <>
-                    <DevfileListContent devfile={props.devfile} />
+                    <DevfileListContent devfile={props.devfile} showFullDescription={props.showFullDescription} />
                 </>
             )}
         </>
@@ -53,74 +55,93 @@ function DevfileListContent(props: DevfileListItemProps) {
     // for the width setting:
     // one unit of padding is 8px with the default MUI theme, and we add a margin on both sides
     return (
-        <Stack direction="row" spacing={3} sx={{ width: 'calc(100% - 16px)' }} alignItems="center">
+        <Stack direction="row" spacing={3} alignItems="center">
             <Box
                 sx={{
                     display: 'flex',
-                    width: '7em',
-                    height: '7em',
+                    width: !props.showFullDescription ? '4em' : '7em',
+                    height: !props.showFullDescription ? '4em' : '7em',
                     bgcolor: 'white',
                     alignItems: 'center',
                     justifyContent: 'center',
                     borderRadius: '4px',
                 }}
             >
-                <img src={checkedDevfileLogoUrl(props.devfile.logoUrl)} style={{ maxWidth: '6em', maxHeight: '6em' }} />
+                <img src={checkedDevfileLogoUrl(props.devfile.logoUrl)} style={{
+                    maxWidth: !props.showFullDescription ? '3em' : '6em',
+                    maxHeight: !props.showFullDescription ? '3em' : '6em'
+                }} />
             </Box>
             <Stack
                 direction="column"
                 spacing={1}
-                sx={{ flexShrink: '5', minWidth: '0', maxWidth: '35rem' }}
+                maxWidth={ !props.showFullDescription ? '90%': '50rem'}
+                minWidth={0}
+                sx={{ flexShrink: '10' }}
             >
                 <Stack direction="row" spacing={2} alignItems="center">
                     <Typography
                         id="devfileName"
                         variant="body1"
+                        maxWidth={'30%'}
                         sx={{
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
-                            textOverflow: 'ellipsis',
+                            textOverflow: 'ellipsis'
                         }}
                     >
                         {props.devfile.name}
                     </Typography>
 
                     {props.devfile.registryName && (
-                        <Typography variant="body2" fontStyle="italic">
+                        <Typography variant="body2" fontStyle="italic" maxWidth={'50%'}>
                             from {props.devfile.registryName}
                         </Typography>
                     )}
+
+                    <Stack direction="row" spacing={1} maxWidth={'30%'}>
+                        {
+                            props.devfile.supportsDebug && <Chip
+                                size="small"
+                                label="Debug Support"
+                                icon={<Check />}
+                                color={'success'}
+                            />
+                        }
+                        {
+                            props.devfile.supportsDeploy && <Chip
+                                size="small"
+                                label="Deploy Support"
+                                icon={<Check />}
+                                color={'success'}
+                            />
+                        }
+                        {(props.devfile.tags && props.devfile.tags.map((tag, i) => {
+                            if (i >= 4) {
+                                return;
+                            }
+                            return <Chip size="small" label={tag} key={tag} />;
+                        }))}
+                        {(props.devfile.tags && props.devfile.tags.length > 4 && (
+                            <Tooltip title={props.devfile.tags.slice(4).join(', ')}>
+                                <Chip size="small" label="• • •" />
+                            </Tooltip>
+                        ))}
+                    </Stack>
                 </Stack>
-                <Typography
-                    variant="body2"
-                    sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-                >
-                    {props.devfile.description}
-                </Typography>
                 <Stack direction="row" spacing={1}>
-                    <Chip
-                        size="small"
-                        label="Debug Support"
-                        icon={props.devfile.supportsDebug ? <Check /> : <Close />}
-                        color={props.devfile.supportsDebug ? 'success' : 'error'}
-                    />
-                    <Chip
-                        size="small"
-                        label="Deploy Support"
-                        icon={props.devfile.supportsDeploy ? <Check /> : <Close />}
-                        color={props.devfile.supportsDeploy ? 'success' : 'error'}
-                    />
-                    {(props.devfile.tags && props.devfile.tags.map((tag, i) => {
-                        if (i >= 4) {
-                            return;
-                        }
-                        return <Chip size="small" label={tag} key={tag} />;
-                    }))}
-                    {(props.devfile.tags && props.devfile.tags.length > 4 && (
-                        <Tooltip title={props.devfile.tags.slice(4).join(', ')}>
-                            <Chip size="small" label="• • •" />
-                        </Tooltip>
-                    ))}
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            whiteSpace: !props.showFullDescription ? 'nowrap' : 'pre-wrap',
+                            overflow: !props.showFullDescription ? 'hidden' : 'visible',
+                            textOverflow: !props.showFullDescription ? 'ellipsis' : 'unset',
+                            textAlign: 'justify',
+                            maxHeight: !props.showFullDescription ? '4rem' : 'unset'
+                        }}
+                    >
+                        {props.devfile.description}
+                    </Typography>
                 </Stack>
             </Stack>
         </Stack>