In devfile search view, add an option to filter by debug support and deploy support redhat-developer#3086

vrubezhny · vrubezhny · commit c90eb20c8fe3 · 2023-09-18T18:28:48.000+02:00
Fixes: redhat-developer#3086 Signed-off-by: Victor Rubezhny <vrubezhny@redhat.com>
diff --git a/src/webview/common-ext/createComponentHelpers.ts b/src/webview/common-ext/createComponentHelpers.ts
@@ -169,3 +169,36 @@ export function getDevfileRegistries(): DevfileRegistry[] {
     devfileRegistries.sort((a, b) => (a.name < b.name ? -1 : 1));
     return devfileRegistries;
 }
+
+/**
+ * Returns a list of possible the devfile capabilities.
+ *
+ * Currently the capabilities are predefined and include:
+ * - Debug Support
+ * - Deploy Support
+ *
+ * @returns a list of the devfile capabilities
+ */
+export function getDevfileCapabilities(): string[] {
+    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[] {
+    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;
+}
diff --git a/src/webview/common/devfileSearch.tsx b/src/webview/common/devfileSearch.tsx
@@ -165,6 +165,103 @@ function RegistriesPicker(props: {
     );
 }
 
+function RegistryCapabilitiesPicker(props: {
+    capabilityEnabled: { capabilityName: string; enabled: boolean }[];
+    setCapabilityEnabled: React.Dispatch<
+        React.SetStateAction<{ capabilityName: string; enabled: boolean }[]>
+    >;
+}) {
+    function onCheckboxClick(clickedCapability: string, checked: boolean) {
+        const updatedList = [...props.capabilityEnabled] //
+            .filter((entry) => entry.capabilityName !== clickedCapability);
+        updatedList.push({
+            capabilityName: clickedCapability,
+            enabled: checked,
+        });
+        const filteredUpdatedList = updatedList
+            .sort((capA, capB) => {
+                return capA.capabilityName.localeCompare(capB.capabilityName)
+            });
+        props.setCapabilityEnabled([...filteredUpdatedList]);
+    }
+
+    return (
+        <Stack direction="column" spacing={1} marginY={2}>
+            <Typography variant="body2" marginBottom={1}>
+                Filter by Capabilities
+            </Typography>
+            <FormGroup>
+                {props.capabilityEnabled.map((_cap) => {
+                    return (
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={_cap.enabled}
+                                    onChange={(_e, checked) =>
+                                        onCheckboxClick(_cap.capabilityName, checked)
+                                    }
+                                />
+                            }
+                            label={_cap.capabilityName}
+                            key={_cap.capabilityName}
+                        />
+                    );
+                })}
+            </FormGroup>
+        </Stack>
+    );
+}
+
+function RegistryTagsPicker(props: {
+    tagEnabled: { tagName: string; enabled: boolean }[];
+    setTagEnabled: React.Dispatch<
+        React.SetStateAction<{ tagName: string; enabled: boolean }[]>
+    >;
+}) {
+    function onCheckboxClick(clickedTag: string, checked: boolean) {
+        const prevVal = props.tagEnabled.find(
+            (entry) => entry.tagName === clickedTag,
+        );
+        const updatedList = [...props.tagEnabled] //
+            .filter((entry) => entry.tagName !== clickedTag);
+        updatedList.push({
+            tagName: clickedTag,
+            enabled: checked,
+        });
+        const filteredUpdatedList = updatedList
+            .sort((tagA, tagB) => {
+                return tagA.tagName.localeCompare(tagB.tagName)
+            });
+        props.setTagEnabled([...filteredUpdatedList]);
+    }
+
+    return (
+        <Stack direction="column" spacing={1} marginY={2}>
+            <Typography variant="body2" marginBottom={1}>
+                Filter by Tags
+            </Typography>
+            <FormGroup>
+                {props.tagEnabled.map((tag) => {
+                    return (
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={tag.enabled}
+                                    onChange={(_e, checked) =>
+                                        onCheckboxClick(tag.tagName, checked)
+                                    }
+                                />
+                            }
+                            label={tag.tagName}
+                            key={tag.tagName}
+                        />
+                    );
+                })}
+            </FormGroup>
+        </Stack>
+    );
+}
+
 const SelectTemplateProject = React.forwardRef(
     (
         props: {
@@ -389,6 +486,22 @@ export type DevfileSearchProps = {
     goBack?: () => void;
 };
 
+/**
+ * Calculates if specified devfile is to be included into search results
+ * based on devfile tags and tags filter. A devfile is to be included if:
+ * - it contains any of selected tags
+ * - always if there is no any selected tags
+ *
+ * @param tags1
+ * @param tags2
+ * @returns
+ */
+function isToBeIncluded(devfileTags: string[], selectedTags: string[]): boolean {
+    return selectedTags.length == 0 || devfileTags.filter((_devfileTag) => {
+      return selectedTags.find((_selectedTags) => _devfileTag === _selectedTags) !== undefined;
+    }).length > 0;
+  }
+
 export function DevfileSearch(props: DevfileSearchProps) {
     const ITEMS_PER_PAGE = 6;
     const QUARKUS_REGEX = /[Qq]uarkus/;
@@ -399,13 +512,30 @@ export function DevfileSearch(props: DevfileSearchProps) {
     const [registryEnabled, setRegistryEnabled] = React.useState<
         { registryName: string; registryUrl: string; enabled: boolean }[]
     >([]);
+    const [devfileCapabilities, setDevfileCapabilities] = React.useState<string[]>([]);
+    const [capabilityEnabled, setCapabilityEnabled] = React.useState<
+        { capabilityName: string; enabled: boolean }[]
+    >([]);
+    const [devfileTags, setDevfileTags] = React.useState<string[]>([]);
+    const [tagEnabled, setTagEnabled] = React.useState<
+        { tagName: string; enabled: boolean }[]
+    >([]);
     const [searchText, setSearchText] = React.useState('');
 
     function respondToMessage(messageEvent: MessageEvent) {
         const message = messageEvent.data as Message;
         switch (message.action) {
             case 'devfileRegistries': {
                 setDevfileRegistries((_devfileRegistries) => message.data);
+                break;
+            }
+            case 'devfileCapabilities': {
+                setDevfileCapabilities((_devfileCapabilities) => message.data);
+                break;
+            }
+            case 'devfileTags': {
+                setDevfileTags((_devfileTags) => message.data);
+                break;
             }
         }
     }
@@ -422,6 +552,28 @@ export function DevfileSearch(props: DevfileSearchProps) {
         setRegistryEnabled((_) => enabledArray);
     }, [devfileRegistries]);
 
+    React.useEffect(() => {
+        const enabledArray = [];
+        for (let capability of devfileCapabilities) {
+            enabledArray.push({
+                capabilityName: capability,
+                enabled: true,
+            });
+        }
+        setCapabilityEnabled((_) => enabledArray);
+    }, [devfileCapabilities]);
+
+    React.useEffect(() => {
+        const enabledArray = [];
+        for (let tag of devfileTags) {
+            enabledArray.push({
+                tagName: tag,
+                enabled: true,
+            });
+        }
+        setTagEnabled((_) => enabledArray);
+    }, [devfileTags]);
+
     React.useEffect(() => {
         props.setSelectedDevfile(selectedDevfile);
     }, [selectedDevfile]);
@@ -437,6 +589,14 @@ export function DevfileSearch(props: DevfileSearchProps) {
         window.vscodeApi.postMessage({ action: 'getDevfileRegistries' });
     }, []);
 
+    React.useEffect(() => {
+        window.vscodeApi.postMessage({ action: 'getDevfileCapabilities' });
+    }, []);
+
+    React.useEffect(() => {
+        window.vscodeApi.postMessage({ action: 'getDevfileTags' });
+    }, []);
+
     React.useEffect(() => {
         setCurrentPage((_) => 1);
     }, [registryEnabled, searchText]);
@@ -445,13 +605,38 @@ export function DevfileSearch(props: DevfileSearchProps) {
         return <LoadScreen title="Retrieving list of Devfiles" />;
     }
 
+    if(!devfileCapabilities) {
+        return <LoadScreen title="Retrieving list of Devfile Capabilities" />;
+    }
+
+    if(!devfileTags) {
+        return <LoadScreen title="Retrieving list of Devfile Tags" />;
+    }
+
     const activeRegistries = registryEnabled //
         .filter((entry) => entry.enabled) //
         .map((entry) => entry.registryName);
 
+    const debugSupport = capabilityEnabled //
+        .filter((_cap) => _cap.capabilityName === 'Debug Support') //
+        .filter((_cap) => _cap.enabled) //
+        .length > 0;
+
+    const deploySupport = capabilityEnabled //
+        .filter((_cap) => _cap.capabilityName === 'Deploy Support') //
+        .filter((_cap) => _cap.enabled) //
+        .length > 0;
+
+    const activeTags = tagEnabled
+        .filter((_tag) => _tag.enabled) //
+        .map((_tag) => _tag.tagName);
+
     const devfiles: Devfile[] = devfileRegistries //
         .filter((devfileRegistry) => activeRegistries.includes(devfileRegistry.name)) //
         .flatMap((devfileRegistry) => devfileRegistry.devfiles) //
+        .filter((devfile) => (debugSupport === devfile.supportsDebug)) //
+        .filter((devfile) => (deploySupport === devfile.supportsDeploy)) //
+        .filter((devfile) => isToBeIncluded(devfile.tags, activeTags)) //
         .filter((devfile) => {
             const searchTerms = searchText.split(/\s+/);
             return every(
@@ -486,16 +671,50 @@ export function DevfileSearch(props: DevfileSearchProps) {
             <Stack direction="column" height="100%" spacing={3}>
                 <Typography variant="h5">{props.titleText}</Typography>
                 <Stack direction="row" flexGrow="1" spacing={2}>
-                    {devfileRegistries.length > 1 && (
-                        <>
-                            <RegistriesPicker
-                                registryEnabled={registryEnabled}
-                                setRegistryEnabled={setRegistryEnabled}
-                            />
-                            <Divider orientation="vertical" />
-                        </>
-                    )}
-                    <Stack direction="column" sx={{ flexGrow: '1', height: '100%' }} spacing={3}>
+                    <Stack direction="column" sx={{ height: 'calc(100vh - 200px - 5em)', overflow: 'scroll', minWidth:'20%' }} spacing={0}>
+                            {devfileRegistries.length > 1 && (
+                                <>
+                                    <Stack direction="row" sx={{ flexGrow: '1', width: '100%' }} spacing={0}>
+                                        <RegistriesPicker
+                                            registryEnabled={registryEnabled}
+                                            setRegistryEnabled={setRegistryEnabled}
+                                        />
+                                    </Stack>
+                                    <Stack direction="column" sx={{ flexGrow: '1', width: '100%' }} spacing={0} marginBottom={1}>
+                                        <Divider orientation="horizontal" />
+                                    </Stack>
+                                </>
+                            )}
+                            {devfileCapabilities.length > 1 && (
+                                <>
+                                    <Stack direction="row" sx={{ flexGrow: '1', width: '100%'  }} spacing={0}>
+                                        <RegistryCapabilitiesPicker
+                                            capabilityEnabled={capabilityEnabled}
+                                            setCapabilityEnabled={setCapabilityEnabled}
+                                        />
+                                    </Stack>
+                                    <Stack direction="column" sx={{ flexGrow: '1', width: '100%' }} spacing={0} marginBottom={1}>
+                                        <Divider orientation="horizontal" />
+                                    </Stack>
+                                </>
+                            )}
+                            {/* disabled */ false && devfileTags.length > 1 && (
+                                <>
+                                    <Stack direction="row" sx={{ flexGrow: '1', width: '100%'  }} spacing={0}>
+                                        <RegistryTagsPicker
+                                            tagEnabled={tagEnabled}
+                                            setTagEnabled={setTagEnabled}
+                                        />
+                                    </Stack>
+                                </>
+                            )}
+                            <Stack direction="column" sx={{ flexGrow: '1', height: '100%', width: '100%' }} spacing={0}>
+                            </Stack>
+                    </Stack>
+                    <Stack direction="column" sx={{ flexGrow: '1' }} spacing={3}>
+                        <Divider orientation="vertical"  sx={{ height: 'calc(100vh - 200px - 5em)'}} />
+                    </Stack>
+                    <Stack direction="column" sx={{ flexGrow: '1' }} spacing={3}>
                         <SearchBar
                             searchText={searchText}
                             setSearchText={setSearchText}
diff --git a/src/webview/create-component/createComponentLoader.ts b/src/webview/create-component/createComponentLoader.ts
@@ -20,6 +20,8 @@ import { ExtensionID } from '../../util/constants';
 import { DevfileConverter } from '../../util/devfileConverter';
 import { selectWorkspaceFolder } from '../../util/workspace';
 import {
+    getDevfileCapabilities,
+    getDevfileTags,
     getDevfileRegistries,
     isValidProjectFolder,
     validateComponentName
@@ -128,6 +130,26 @@ export default class CreateComponentLoader {
                 });
                 break;
             }
+            /**
+             * The panel requested the list of devfile capabilities. Respond with this list.
+             */
+            case 'getDevfileCapabilities': {
+                void CreateComponentLoader.panel.webview.postMessage({
+                    action: 'devfileCapabilities',
+                    data: getDevfileCapabilities(),
+                });
+                break;
+            }
+            /**
+             * The panel requested the list of devfile tags. Respond with this list.
+             */
+            case 'getDevfileTags': {
+                void CreateComponentLoader.panel.webview.postMessage({
+                    action: 'devfileTags',
+                    data: getDevfileTags(),
+                });
+                break;
+            }
             /**
              * The panel requested the list of workspace folders. Respond with this list.
              */
@@ -513,3 +535,23 @@ function sendUpdatedRegistries() {
         });
     }
 }
+
+function sendUpdatedCapabilities() {
+    if (CreateComponentLoader.panel) {
+        let capabilities = getDevfileCapabilities();
+        void CreateComponentLoader.panel.webview.postMessage({
+            action: 'devfileCapabilities',
+            data: capabilities,
+        });
+    }
+}
+
+function sendUpdatedTags() {
+    if (CreateComponentLoader.panel) {
+        let tags = getDevfileTags();
+        void CreateComponentLoader.panel.webview.postMessage({
+            action: 'devfileTags',
+            data: tags,
+        });
+    }
+}
diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts
