Skip to content

UI improvements on dev file registry web view #3629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mohitsuman merged 11 commits into from
Dec 7, 2023
Merged

UI improvements on dev file registry web view #3629

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bc58169
moved filter by field on top of the page
msivasubramaniaan Nov 27, 2023
902fcfc
removed unused import
msivasubramaniaan Nov 27, 2023
9f2cf6c
changed filter by with checkbox
msivasubramaniaan Nov 27, 2023
ce756b4
Merge branch 'devfile-registry-ui-improvements' of https://github.com…
msivasubramaniaan Nov 27, 2023
6fe2dd0
revert the change
msivasubramaniaan Nov 27, 2023
54bdc06
added clear all and other UI improvements
msivasubramaniaan Nov 30, 2023
7b455c0
improve UI based on Mohit comment in the PR
msivasubramaniaan Dec 2, 2023
e6ebad7
reduced alert padding top and bottom
msivasubramaniaan Dec 2, 2023
b2ca699
fix ui test case
msivasubramaniaan Dec 2, 2023
eedcd3a
update tag sorting
msivasubramaniaan Dec 2, 2023
f8775c5
fixed tag unselect issue and moved devfile selection on top
msivasubramaniaan Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 65 additions & 46 deletions src/webview/common-ext/createComponentHelpers.ts
View file
Open in desktop
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,42 @@ export function getDevfileRegistries(): DevfileRegistry[] {
* @returns a list of the devfile capabilities
*/
export function getDevfileCapabilities(): string[] {
return [ 'Debug Support', 'Deploy Support'];
return ['Debug Support', 'Deploy Support'];
}

/**
* 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));
...new Set(
devfileRegistries
.filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles).sort(devfileSort)
.flatMap((_devfile) => _devfile.tags))
]
return devfileTags.filter((devfileTag) => !devfileTag.toLowerCase().includes('deprecate'));
}

function devfileSort(a: Devfile, b: Devfile): number {
const QUARKUS_REGEX = /[Qq]uarkus/;
const aQuarkus = QUARKUS_REGEX.test(a.name);
const bQuarkus = QUARKUS_REGEX.test(b.name);
if (aQuarkus && !bQuarkus) {
return -1;
} else if (bQuarkus && !aQuarkus) {
return 1;
}
Comment thread
datho7561 marked this conversation as resolved.
Outdated

if (a.supportsDebug && !b.supportsDebug) {
return -1;
} else if (b.supportsDebug && !a.supportsDebug) {
return 1;
}

return devfileTags;
return a.name < b.name ? -1 : 1;
}
6 changes: 3 additions & 3 deletions src/webview/common/devfileExplanation.tsx
View file
Open in desktop
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
Open in desktop
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
⚡