Skip to content

Commit bc3c68c

Browse files
vrubezhnyvrubezhny
committed
In devfile search view, add an option to filter by debug support and deploy support redhat-developer#3086
Fixes: redhat-developer#3086 Signed-off-by: Victor Rubezhny <[email protected]>
1 parent ed06390 commit bc3c68c

File tree

3 files changed

+144
-10
lines changed

3 files changed

+144
-10
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,3 +169,24 @@ export function getDevfileRegistries(): DevfileRegistry[] {
169169
devfileRegistries.sort((a, b) => (a.name < b.name ? -1 : 1));
170170
return devfileRegistries;
171171
}
172+
173+
/**
174+
* Returns a list of the devfile tags found in devfiles registries.
175+
*
176+
* @returns a list of the devfile tags
177+
*/
178+
export function getDevfileTags(url?:string ): string[] {
179+
const devfileRegistries = getDevfileRegistries();
180+
181+
const defaultTags = [ 'Debug Support', 'Deploy Support'];
182+
const devfileTags: string[] = [
183+
...new Set(
184+
devfileRegistries
185+
.filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
186+
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
187+
.flatMap((_devfile) => _devfile.tags))
188+
]
189+
.sort((a, b) => a.localeCompare(b));
190+
191+
return [...defaultTags, ...devfileTags];
192+
}

‎src/webview/common/devfileSearch.tsx

Lines changed: 106 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,56 @@ function RegistriesPicker(props: {
165165
);
166166
}
167167

168+
function RegistryTagsPicker(props: {
169+
tagEnabled: { tagName: string; enabled: boolean }[];
170+
setTagEnabled: React.Dispatch<
171+
React.SetStateAction<{ tagName: string; enabled: boolean }[]>
172+
>;
173+
}) {
174+
function onCheckboxClick(clickedTag: string, checked: boolean) {
175+
const prevVal = props.tagEnabled.find(
176+
(entry) => entry.tagName === clickedTag,
177+
);
178+
const updatedList = [...props.tagEnabled] //
179+
.filter((entry) => entry.tagName !== clickedTag);
180+
updatedList.push({
181+
tagName: clickedTag,
182+
enabled: checked,
183+
});
184+
updatedList.sort((tagA, tagB) => tagA.tagName.localeCompare(tagB.tagName));
185+
props.setTagEnabled(updatedList);
186+
}
187+
188+
return (
189+
<Stack direction="column" spacing={1} marginY={2}>
190+
<Typography variant="body2" marginBottom={1}>
191+
Filter by
192+
</Typography>
193+
<FormGroup>
194+
{props.tagEnabled.map((tag) => {
195+
return (
196+
<FormControlLabel
197+
control={
198+
<Checkbox
199+
// disabled={
200+
// registry.registryUrl === 'https://registry.devfile.io'
201+
// }
202+
checked={tag.enabled}
203+
onChange={(_e, checked) =>
204+
onCheckboxClick(tag.tagName, checked)
205+
}
206+
/>
207+
}
208+
label={tag.tagName}
209+
key={tag.tagName}
210+
/>
211+
);
212+
})}
213+
</FormGroup>
214+
</Stack>
215+
);
216+
}
217+
168218
const SelectTemplateProject = React.forwardRef(
169219
(
170220
props: {
@@ -399,6 +449,10 @@ export function DevfileSearch(props: DevfileSearchProps) {
399449
const [registryEnabled, setRegistryEnabled] = React.useState<
400450
{ registryName: string; registryUrl: string; enabled: boolean }[]
401451
>([]);
452+
const [devfileTags, setDevfileTags] = React.useState<string[]>([]);
453+
const [tagEnabled, setTagEnabled] = React.useState<
454+
{ tagName: string; enabled: boolean }[]
455+
>([]);
402456
const [searchText, setSearchText] = React.useState('');
403457

404458
function respondToMessage(messageEvent: MessageEvent) {
@@ -407,6 +461,9 @@ export function DevfileSearch(props: DevfileSearchProps) {
407461
case 'devfileRegistries': {
408462
setDevfileRegistries((_devfileRegistries) => message.data);
409463
}
464+
case 'devfileTags': {
465+
setDevfileTags((_devfileTags) => message.data);
466+
}
410467
}
411468
}
412469

@@ -422,6 +479,17 @@ export function DevfileSearch(props: DevfileSearchProps) {
422479
setRegistryEnabled((_) => enabledArray);
423480
}, [devfileRegistries]);
424481

482+
React.useEffect(() => {
483+
const enabledArray = [];
484+
for (let tag of devfileTags) {
485+
enabledArray.push({
486+
tagName: tag,
487+
enabled: true,
488+
});
489+
}
490+
setTagEnabled((_) => enabledArray);
491+
}, [devfileTags]);
492+
425493
React.useEffect(() => {
426494
props.setSelectedDevfile(selectedDevfile);
427495
}, [selectedDevfile]);
@@ -437,6 +505,10 @@ export function DevfileSearch(props: DevfileSearchProps) {
437505
window.vscodeApi.postMessage({ action: 'getDevfileRegistries' });
438506
}, []);
439507

508+
React.useEffect(() => {
509+
window.vscodeApi.postMessage({ action: 'getDevfileTags' });
510+
}, []);
511+
440512
React.useEffect(() => {
441513
setCurrentPage((_) => 1);
442514
}, [registryEnabled, searchText]);
@@ -445,6 +517,10 @@ export function DevfileSearch(props: DevfileSearchProps) {
445517
return <LoadScreen title="Retrieving list of Devfiles" />;
446518
}
447519

520+
if(!devfileTags) {
521+
return <LoadScreen title="Retrieving list of Devfile Tags" />;
522+
}
523+
448524
const activeRegistries = registryEnabled //
449525
.filter((entry) => entry.enabled) //
450526
.map((entry) => entry.registryName);
@@ -486,15 +562,36 @@ export function DevfileSearch(props: DevfileSearchProps) {
486562
<Stack direction="column" height="100%" spacing={3}>
487563
<Typography variant="h5">{props.titleText}</Typography>
488564
<Stack direction="row" flexGrow="1" spacing={2}>
489-
{devfileRegistries.length > 1 && (
490-
<>
491-
<RegistriesPicker
492-
registryEnabled={registryEnabled}
493-
setRegistryEnabled={setRegistryEnabled}
494-
/>
495-
<Divider orientation="vertical" />
496-
</>
497-
)}
565+
<Stack direction="column" sx={{ flexGrow: '1', height: '100%' , minWidth:'20%' }} spacing={0}>
566+
{devfileRegistries.length > 1 && (
567+
<>
568+
<Stack direction="row" sx={{ flexGrow: '1', width: '100%' }} spacing={0}>
569+
<RegistriesPicker
570+
registryEnabled={registryEnabled}
571+
setRegistryEnabled={setRegistryEnabled}
572+
/>
573+
</Stack>
574+
<Stack direction="column" sx={{ flexGrow: '1', width: '100%' }} spacing={0} marginBottom={1}>
575+
<Divider orientation="horizontal" />
576+
</Stack>
577+
</>
578+
)}
579+
{devfileTags.length > 1 && (
580+
<>
581+
<Stack direction="row" sx={{ flexGrow: '1', width: '100%' }} spacing={0}>
582+
<RegistryTagsPicker
583+
tagEnabled={tagEnabled}
584+
setTagEnabled={setTagEnabled}
585+
/>
586+
</Stack>
587+
</>
588+
)}
589+
<Stack direction="column" sx={{ flexGrow: '1', height: '100%', width: '100%' }} spacing={0}>
590+
</Stack>
591+
</Stack>
592+
<Stack direction="column" sx={{ flexGrow: '1', height: '100%' }} spacing={3}>
593+
<Divider orientation="vertical" />
594+
</Stack>
498595
<Stack direction="column" sx={{ flexGrow: '1', height: '100%' }} spacing={3}>
499596
<SearchBar
500597
searchText={searchText}

‎src/webview/devfile-registry/registryViewLoader.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import sendTelemetry from '../../telemetry';
1212
import { ExtensionID } from '../../util/constants';
1313
import { selectWorkspaceFolder } from '../../util/workspace';
1414
import { vsCommand } from '../../vscommand';
15-
import { getDevfileRegistries, isValidProjectFolder, validateComponentName } from '../common-ext/createComponentHelpers';
15+
import { getDevfileRegistries, getDevfileTags, isValidProjectFolder, validateComponentName } from '../common-ext/createComponentHelpers';
1616
import { loadWebviewHtml } from '../common-ext/utils';
1717
import { TemplateProjectIdentifier } from '../common/devfile';
1818

@@ -38,6 +38,9 @@ async function devfileRegistryViewerMessageListener(event: any): Promise<any> {
3838
case 'getDevfileRegistries':
3939
RegistryViewLoader.sendUpdatedRegistries();
4040
break;
41+
case 'getDevfileTags':
42+
RegistryViewLoader.sendUpdatedTags();
43+
break;
4144
case 'createComponent': {
4245
const { projectFolder, componentName } = event.data;
4346
const templateProject: TemplateProjectIdentifier = event.data.templateProject;
@@ -178,8 +181,21 @@ export default class RegistryViewLoader {
178181
}
179182
}
180183

184+
static sendUpdatedTags() {
185+
if (panel) {
186+
let tags = getDevfileTags(RegistryViewLoader.url);
187+
void panel.webview.postMessage({
188+
action: 'devfileTags',
189+
data: tags,
190+
});
191+
}
192+
}
181193
}
182194

183195
ComponentTypesView.instance.subject.subscribe(() => {
184196
RegistryViewLoader.sendUpdatedRegistries();
185197
});
198+
199+
ComponentTypesView.instance.subject.subscribe(() => {
200+
RegistryViewLoader.sendUpdatedTags();
201+
});

0 commit comments

Comments
 (0)