working Type

TouK · Dec 11, 2024 · 023d0a2 · 023d0a2
1 parent 1e9f0a4
commit 023d0a2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx b/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx
@@ -11,7 +11,7 @@ export const SearchLabeledAutocomplete = ({ children, name, values }) => {
                 className={nodeInput}
                 renderInput={(params) => (
                     <div ref={params.InputProps.ref}>
-                        <input name={name} {...params.inputProps} placeholder="Type to search..." className={nodeInput} />
+                        <input name={name} {...params.inputProps} className={nodeInput} />
                     </div>
                 )}
             />

diff --git a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
@@ -43,7 +43,6 @@ export function AdvancedSearchFilters({
             name: t("panels.search.field.id", "Name"),
             description: t("panels.search.field.description", "Description"),
             type: t("panels.search.field.type", "Type"),
-            componentGroup: t("panels.search.field.componentGroup", "Component Group"),
             paramName: t("panels.search.field.paramName", "Label"),
             paramValue: t("panels.search.field.paramValue", "Value"),
             outputValue: t("panels.search.field.outputValue", "Output"),
@@ -112,10 +111,7 @@ export function AdvancedSearchFilters({
             <SearchLabeledInput name="paramValue">
                 <SearchLabel label={displayNames["paramValue"]} />
             </SearchLabeledInput>
-            <SearchLabeledAutocomplete name="componentGroup" values={useNodeTypes("componentGroup")}>
-                <SearchLabel label={displayNames["componentGroup"]} />
-            </SearchLabeledAutocomplete>
-            <SearchLabeledAutocomplete name="type" values={useNodeTypes("type")}>
+            <SearchLabeledAutocomplete name="type" values={useNodeTypes()}>
                 <SearchLabel label={displayNames["type"]} />
             </SearchLabeledAutocomplete>
             <SearchLabeledInput name="paramName">

diff --git a/designer/client/src/components/toolbars/search/utils.ts b/designer/client/src/components/toolbars/search/utils.ts
@@ -7,6 +7,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ensureArray } from "../../../common/arrayUtils";
 import { SearchQuery } from "./SearchResults";
+import { getComponentGroups } from "../../../reducers/selectors/settings";
 
 type SelectorResult = { expression: string } | string;
 type Selector = (node: NodeType) => SelectorResult | SelectorResult[];
@@ -18,17 +19,13 @@ const fieldsSelectors: FilterSelector = [
 
         selector: (node) => node.id,
     },
-    {
-        name: "componentGroup",
-        selector: (node) => node.type,
-    },
     {
         name: "description",
         selector: (node) => node.additionalFields?.description,
     },
     {
         name: "type",
-        selector: (node) => [node.nodeType, node.ref?.typ, node.ref?.id],
+        selector: (node) => [node.nodeType, node.ref?.typ, node.ref?.id, node.type, node.service?.id],
     },
     {
         name: "paramValue",
@@ -83,17 +80,29 @@ const findFieldsUsingSelectorWithName = (selectorName: string, filterValues: str
     );
 };
 
-export function useNodeTypes(selectorName: string): string[] {
+function useComponentTypes(): Set<string> {
+    const componentsGroups = useSelector(getComponentGroups);
+
+    return useMemo(() => {
+        return new Set(
+            componentsGroups.flatMap((componentGroup) => componentGroup.components).map((component) => component.label.toLowerCase()),
+        );
+    }, []);
+}
+
+export function useNodeTypes(): string[] {
     const { scenarioGraph } = useSelector(getScenario);
     const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph);
+    const componentsSet = useComponentTypes();
 
     return useMemo(() => {
-        const nodeSelector = fieldsSelectors.find((selector) => selector.name == selectorName)?.selector;
-        const partial = allNodes
+        const nodeSelector = fieldsSelectors.find((selector) => selector.name == "type")?.selector;
+        const availableTypes = allNodes
             .flatMap((node) => ensureArray(nodeSelector(node)).filter((item) => item !== undefined))
-            .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression));
+            .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression))
+            .filter((type) => componentsSet.has(type.toLowerCase()));
 
-        return uniq(partial);
+        return uniq(availableTypes);
     }, [allNodes]);
 }
 
@@ -112,10 +121,8 @@ export function useFilteredNodes(searchQuery: SearchQuery): {
 
     const displayNames = useMemo(
         () => ({
-            id: t("panels.search.field.id", "Name"),
             name: t("panels.search.field.id", "Name"),
             description: t("panels.search.field.description", "Description"),
-            componentGroup: t("panels.search.field.componentGroup", "component Group"),
             paramName: t("panels.search.field.paramName", "Label"),
             paramValue: t("panels.search.field.paramValue", "Value"),
             outputValue: t("panels.search.field.outputValue", "Output"),

diff --git a/designer/client/src/reducers/selectors/settings.ts b/designer/client/src/reducers/selectors/settings.ts
@@ -1,7 +1,7 @@
 import { createSelector } from "reselect";
 import { MetricsType } from "../../actions/nk";
 import { DynamicTabData } from "../../containers/DynamicTab";
-import { ProcessDefinitionData } from "../../types";
+import { ComponentGroup, ProcessDefinitionData } from "../../types";
 import { RootState } from "../index";
 import { AuthenticationSettings, SettingsState } from "../settings";
 import { uniqBy } from "lodash";
@@ -17,6 +17,7 @@ export const getSurveySettings = createSelector(getFeatureSettings, (s) => s?.su
 export const getLoggedUser = createSelector(getSettings, (s) => s.loggedUser);
 export const getLoggedUserId = createSelector(getLoggedUser, (s) => s.id);
 export const getProcessDefinitionData = createSelector(getSettings, (s) => s.processDefinitionData || ({} as ProcessDefinitionData));
+export const getComponentGroups = createSelector(getProcessDefinitionData, (p) => p.componentGroups || ({} as ComponentGroup[]));
 export const getCategories = createSelector(getLoggedUser, (u) => u.categories || []);
 export const getWritableCategories = createSelector(getLoggedUser, getCategories, (user, categories) =>
     categories.filter((c) => user.canWrite(c)),