Skip to content

Commit

Permalink
UI improvements on dev file registry web view (#3629)
Browse files Browse the repository at this point in the history 
* moved filter by field on top of the page

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* removed unused import

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* changed filter by with checkbox

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* revert the change

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* added clear all and other UI improvements

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* improve UI based on Mohit comment in the PR

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* reduced alert padding top and bottom

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* fix ui test case

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* update tag sorting

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* fixed tag unselect issue and moved devfile selection on top

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

---------

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
  • Loading branch information
@msivasubramaniaan
msivasubramaniaan authored Dec 7, 2023
1 parent 29f4e48 commit ff12285
Show file tree
Hide file tree
Showing 9 changed files with 338 additions and 240 deletions.
94 changes: 47 additions & 47 deletions src/webview/common-ext/createComponentHelpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
};
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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,
);
Expand Down Expand Up @@ -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;
Expand All @@ -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'));
}
6 changes: 3 additions & 3 deletions src/webview/common/devfileExplanation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
97 changes: 59 additions & 38 deletions src/webview/common/devfileListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -12,6 +12,7 @@ import validator from 'validator'
export type DevfileListItemProps = {
devfile: Devfile;
buttonCallback?: () => void;
showFullDescription?: boolean;
};

function checkedDevfileLogoUrl(logoUrl?: string) {
Expand All @@ -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} />
</>
)}
</>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit ff12285

Please sign in to comment.