Skip to content

Commit ff12285

Browse files
msivasubramaniaanmsivasubramaniaan
authored
UI improvements on dev file registry web view (#3629)
* 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>
1 parent 29f4e48 commit ff12285

File tree

9 files changed

+338
-240
lines changed

9 files changed

+338
-240
lines changed

‎src/webview/common-ext/createComponentHelpers.ts‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export async function isValidProjectFolder(
2626
if (!folder) { // Folder cannot be Undefined
2727
return {
2828
status: ValidationStatus.error,
29-
message: 'Please specify a valid folder path'
29+
message: 'Please specify a valid folder path'
3030
};
3131
}
3232

@@ -98,7 +98,7 @@ async function canRecursivelyCreateProjectFolder(
9898
const folderPath = path.parse(folder);
9999
const root = folderPath.root;
100100

101-
// Reconstruct the folder to avoid having `/` (or `\` on Windows) at the end
101+
// Reconstruct the folder to avoid having `/` (or `\` on Windows) at the end
102102
let parentFolder: string = path.join(folderPath.dir, folderPath.base).toString();
103103
let parentFolderExists = false;
104104
while (parentFolder !== root && !parentFolderExists) {
@@ -134,18 +134,18 @@ async function canRecursivelyCreateProjectFolder(
134134
* @param isComponentBasedValidation component based validation or not
135135
* @returns the validation message if the component name is invalid, and undefined otherwise
136136
*/
137-
export function validateName(name: string, isComponentBasedValidation=true): string {
138-
let validationMessage = NameValidator.emptyName(`Please enter a ${isComponentBasedValidation? 'component' : ''} name.`, name);
137+
export function validateName(name: string, isComponentBasedValidation = true): string {
138+
let validationMessage = NameValidator.emptyName(`Please enter a ${isComponentBasedValidation ? 'component' : ''} name.`, name);
139139
if (!validationMessage) {
140140
validationMessage = NameValidator.validateMatches(
141-
`Not a valid ${isComponentBasedValidation? 'component' : ''} name.
141+
`Not a valid ${isComponentBasedValidation ? 'component' : ''} name.
142142
Please use lower case alphanumeric characters or '-', start with an alphabetic character, and end with an alphanumeric character`,
143143
name,
144144
);
145145
}
146146
if (!validationMessage) {
147147
validationMessage = NameValidator.lengthName(
148-
`${isComponentBasedValidation? 'Component name' : 'Name'} should be between 2-63 characters`,
148+
`${isComponentBasedValidation ? 'Component name' : 'Name'} should be between 2-63 characters`,
149149
name,
150150
0,
151151
);
@@ -204,38 +204,40 @@ export function getDevfileRegistries(): DevfileRegistry[] {
204204
(devfileRegistry) => format(devfileRegistry.url) === format(component.registry.url),
205205
);
206206

207-
devfileRegistry.devfiles.push({
208-
description: component.description,
209-
registryName: devfileRegistry.name,
210-
logoUrl: component.devfileData.devfile.metadata.icon,
211-
name: component.displayName,
212-
id: component.name,
213-
starterProjects: component.devfileData.devfile.starterProjects,
214-
tags: component.tags,
215-
yaml: JSYAML.dump(component.devfileData.devfile),
216-
supportsDebug:
217-
Boolean(
218-
component.devfileData.devfile.commands?.find(
219-
(command) => command.exec?.group?.kind === 'debug',
207+
if (!component?.tags.some((value) => value.toLowerCase().includes('deprecate'))) {
208+
devfileRegistry.devfiles.push({
209+
description: component.description,
210+
registryName: devfileRegistry.name,
211+
logoUrl: component.devfileData.devfile.metadata.icon,
212+
name: component.displayName,
213+
id: component.name,
214+
starterProjects: component.devfileData.devfile.starterProjects,
215+
tags: component.tags,
216+
yaml: JSYAML.dump(component.devfileData.devfile),
217+
supportsDebug:
218+
Boolean(
219+
component.devfileData.devfile.commands?.find(
220+
(command) => command.exec?.group?.kind === 'debug',
221+
),
222+
) ||
223+
Boolean(
224+
component.devfileData.devfile.commands?.find(
225+
(command) => command.composite?.group?.kind === 'debug',
226+
),
220227
),
221-
) ||
222-
Boolean(
223-
component.devfileData.devfile.commands?.find(
224-
(command) => command.composite?.group?.kind === 'debug',
228+
supportsDeploy:
229+
Boolean(
230+
component.devfileData.devfile.commands?.find(
231+
(command) => command.exec?.group?.kind === 'deploy',
232+
),
233+
) ||
234+
Boolean(
235+
component.devfileData.devfile.commands?.find(
236+
(command) => command.composite?.group?.kind === 'deploy',
237+
),
225238
),
226-
),
227-
supportsDeploy:
228-
Boolean(
229-
component.devfileData.devfile.commands?.find(
230-
(command) => command.exec?.group?.kind === 'deploy',
231-
),
232-
) ||
233-
Boolean(
234-
component.devfileData.devfile.commands?.find(
235-
(command) => command.composite?.group?.kind === 'deploy',
236-
),
237-
),
238-
} as Devfile);
239+
} as Devfile);
240+
}
239241
}
240242
devfileRegistries.sort((a, b) => (a.name < b.name ? -1 : 1));
241243
return devfileRegistries;
@@ -251,25 +253,23 @@ export function getDevfileRegistries(): DevfileRegistry[] {
251253
* @returns a list of the devfile capabilities
252254
*/
253255
export function getDevfileCapabilities(): string[] {
254-
return [ 'Debug Support', 'Deploy Support'];
256+
return ['Debug', 'Deploy'];
255257
}
256258

257259
/**
258260
* Returns a list of the devfile tags found in devfiles registries.
259261
*
260262
* @returns a list of the devfile tags
261263
*/
262-
export function getDevfileTags(url?:string ): string[] {
264+
export function getDevfileTags(url?: string): string[] {
263265
const devfileRegistries = getDevfileRegistries();
264266

265267
const devfileTags: string[] = [
266-
...new Set(
267-
devfileRegistries
268-
.filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
269-
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
270-
.flatMap((_devfile) => _devfile.tags))
271-
]
272-
.sort((a, b) => a.localeCompare(b));
273-
274-
return devfileTags;
268+
...new Set(
269+
devfileRegistries
270+
.filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
271+
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
272+
.flatMap((_devfile) => _devfile.tags))
273+
]
274+
return devfileTags.filter((devfileTag) => !devfileTag.toLowerCase().includes('deprecate'));
275275
}

‎src/webview/common/devfileExplanation.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
* Copyright (c) Red Hat, Inc. All rights reserved.
33
* Licensed under the MIT License. See LICENSE file in the project root for license information.
44
*-----------------------------------------------------------------------------------------------*/
5-
import { Alert, AlertTitle } from '@mui/material';
5+
import { Alert } from '@mui/material';
66
import * as React from 'react';
77

88
export function DevfileExplanation() {
99
return (
10-
<Alert severity="info">
11-
<AlertTitle>Devfile</AlertTitle>A YAML file that contains information on how to deploy
10+
<Alert severity="info" sx={{padding: '0 8px !important'}}>
11+
Devfile: A YAML file that contains information on how to deploy
1212
your component to OpenShift, based on the language or framework that the project uses.
1313
</Alert>
1414
);

‎src/webview/common/devfileListItem.tsx‎

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) Red Hat, Inc. All rights reserved.
33
* Licensed under the MIT License. See LICENSE file in the project root for license information.
44
*-----------------------------------------------------------------------------------------------*/
5-
import { Check, Close } from '@mui/icons-material';
5+
import { Check } from '@mui/icons-material';
66
import { Box, Chip, Stack, Tooltip, Typography } from '@mui/material';
77
import * as React from 'react';
88
import { Devfile } from '../common/devfile';
@@ -12,6 +12,7 @@ import validator from 'validator'
1212
export type DevfileListItemProps = {
1313
devfile: Devfile;
1414
buttonCallback?: () => void;
15+
showFullDescription?: boolean;
1516
};
1617

1718
function checkedDevfileLogoUrl(logoUrl?: string) {
@@ -38,11 +39,12 @@ export function DevfileListItem(props: DevfileListItemProps) {
3839
<DevfileListContent
3940
devfile={props.devfile}
4041
buttonCallback={props.buttonCallback}
42+
showFullDescription={props.showFullDescription}
4143
/>
4244
</Box>
4345
) : (
4446
<>
45-
<DevfileListContent devfile={props.devfile} />
47+
<DevfileListContent devfile={props.devfile} showFullDescription={props.showFullDescription} />
4648
</>
4749
)}
4850
</>
@@ -53,74 +55,93 @@ function DevfileListContent(props: DevfileListItemProps) {
5355
// for the width setting:
5456
// one unit of padding is 8px with the default MUI theme, and we add a margin on both sides
5557
return (
56-
<Stack direction="row" spacing={3} sx={{ width: 'calc(100% - 16px)' }} alignItems="center">
58+
<Stack direction="row" spacing={3} alignItems="center">
5759
<Box
5860
sx={{
5961
display: 'flex',
60-
width: '7em',
61-
height: '7em',
62+
width: !props.showFullDescription ? '4em' : '7em',
63+
height: !props.showFullDescription ? '4em' : '7em',
6264
bgcolor: 'white',
6365
alignItems: 'center',
6466
justifyContent: 'center',
6567
borderRadius: '4px',
6668
}}
6769
>
68-
<img src={checkedDevfileLogoUrl(props.devfile.logoUrl)} style={{ maxWidth: '6em', maxHeight: '6em' }} />
70+
<img src={checkedDevfileLogoUrl(props.devfile.logoUrl)} style={{
71+
maxWidth: !props.showFullDescription ? '3em' : '6em',
72+
maxHeight: !props.showFullDescription ? '3em' : '6em'
73+
}} />
6974
</Box>
7075
<Stack
7176
direction="column"
7277
spacing={1}
73-
sx={{ flexShrink: '5', minWidth: '0', maxWidth: '35rem' }}
78+
maxWidth={ !props.showFullDescription ? '90%': '50rem'}
79+
minWidth={0}
80+
sx={{ flexShrink: '10' }}
7481
>
7582
<Stack direction="row" spacing={2} alignItems="center">
7683
<Typography
7784
id="devfileName"
7885
variant="body1"
86+
maxWidth={'30%'}
7987
sx={{
8088
whiteSpace: 'nowrap',
8189
overflow: 'hidden',
82-
textOverflow: 'ellipsis',
90+
textOverflow: 'ellipsis'
8391
}}
8492
>
8593
{props.devfile.name}
8694
</Typography>
8795

8896
{props.devfile.registryName && (
89-
<Typography variant="body2" fontStyle="italic">
97+
<Typography variant="body2" fontStyle="italic" maxWidth={'50%'}>
9098
from {props.devfile.registryName}
9199
</Typography>
92100
)}
101+
102+
<Stack direction="row" spacing={1} maxWidth={'30%'}>
103+
{
104+
props.devfile.supportsDebug && <Chip
105+
size="small"
106+
label="Debug Support"
107+
icon={<Check />}
108+
color={'success'}
109+
/>
110+
}
111+
{
112+
props.devfile.supportsDeploy && <Chip
113+
size="small"
114+
label="Deploy Support"
115+
icon={<Check />}
116+
color={'success'}
117+
/>
118+
}
119+
{(props.devfile.tags && props.devfile.tags.map((tag, i) => {
120+
if (i >= 4) {
121+
return;
122+
}
123+
return <Chip size="small" label={tag} key={tag} />;
124+
}))}
125+
{(props.devfile.tags && props.devfile.tags.length > 4 && (
126+
<Tooltip title={props.devfile.tags.slice(4).join(', ')}>
127+
<Chip size="small" label="• • •" />
128+
</Tooltip>
129+
))}
130+
</Stack>
93131
</Stack>
94-
<Typography
95-
variant="body2"
96-
sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
97-
>
98-
{props.devfile.description}
99-
</Typography>
100132
<Stack direction="row" spacing={1}>
101-
<Chip
102-
size="small"
103-
label="Debug Support"
104-
icon={props.devfile.supportsDebug ? <Check /> : <Close />}
105-
color={props.devfile.supportsDebug ? 'success' : 'error'}
106-
/>
107-
<Chip
108-
size="small"
109-
label="Deploy Support"
110-
icon={props.devfile.supportsDeploy ? <Check /> : <Close />}
111-
color={props.devfile.supportsDeploy ? 'success' : 'error'}
112-
/>
113-
{(props.devfile.tags && props.devfile.tags.map((tag, i) => {
114-
if (i >= 4) {
115-
return;
116-
}
117-
return <Chip size="small" label={tag} key={tag} />;
118-
}))}
119-
{(props.devfile.tags && props.devfile.tags.length > 4 && (
120-
<Tooltip title={props.devfile.tags.slice(4).join(', ')}>
121-
<Chip size="small" label="• • •" />
122-
</Tooltip>
123-
))}
133+
<Typography
134+
variant="body2"
135+
sx={{
136+
whiteSpace: !props.showFullDescription ? 'nowrap' : 'pre-wrap',
137+
overflow: !props.showFullDescription ? 'hidden' : 'visible',
138+
textOverflow: !props.showFullDescription ? 'ellipsis' : 'unset',
139+
textAlign: 'justify',
140+
maxHeight: !props.showFullDescription ? '4rem' : 'unset'
141+
}}
142+
>
143+
{props.devfile.description}
144+
</Typography>
124145
</Stack>
125146
</Stack>
126147
</Stack>

0 commit comments

Comments
 (0)
⚡