diff --git a/designer/client/cypress/e2e/search.cy.ts b/designer/client/cypress/e2e/search.cy.ts
index 2ecc7f16e17..b454ead3942 100644
--- a/designer/client/cypress/e2e/search.cy.ts
+++ b/designer/client/cypress/e2e/search.cy.ts
@@ -46,7 +46,7 @@ describe("Search Panel View", () => {
         cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "sink");
 
         cy.get("[data-testid=search-panel]").find("input[name='type']").click();
-        cy.realType(",processor");
+        cy.realType(",dynamicService");
 
         cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
 
@@ -61,13 +61,13 @@ describe("Search Panel View", () => {
         cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
         cy.get("[data-testid=search-panel]").find("input[name='type']").click();
 
-        cy.realType("sink,processor");
+        cy.realType("sink,dynamicSe");
 
         cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
 
         cy.get("[data-testid=search-panel]")
             .find("input[data-selector='NODES_IN_SCENARIO']")
-            .should("have.value", "type:(sink,processor) se");
+            .should("have.value", "type:(sink,dynamicSe) se");
 
         cy.get("[data-testid=search-panel]").contains("dynamicService");
         cy.get("[data-testid=search-panel]").contains("sendSms");
@@ -76,7 +76,7 @@ describe("Search Panel View", () => {
     it("should filter nodes when setting up multiple selectors using form", () => {
         cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
 
-        cy.get("[data-testid=search-panel]").find("input[name='id']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='name']").click();
         cy.realType("bounded,dynamic,send,enricher");
 
         cy.get("[data-testid=search-panel]").find("input[name='type']").click();
@@ -86,7 +86,7 @@ describe("Search Panel View", () => {
 
         cy.get("[data-testid=search-panel]")
             .find("input[data-selector='NODES_IN_SCENARIO']")
-            .should("have.value", "id:(bounded,dynamic,send,enricher) type:(sink,enricher) ");
+            .should("have.value", "name:(bounded,dynamic,send,enricher) type:(sink,enricher)");
 
         cy.get("[data-testid=search-panel]").contains("enricher");
         cy.get("[data-testid=search-panel]").contains("sendSms");
diff --git a/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx b/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx
new file mode 100644
index 00000000000..4bd32b9e85f
--- /dev/null
+++ b/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx
@@ -0,0 +1,30 @@
+import { Autocomplete, FormControl } from "@mui/material";
+import { nodeInput } from "../graph/node-modal/NodeDetailsContent/NodeTableStyled";
+import React from "react";
+
+export const SearchLabeledAutocomplete = ({ children, name, options, value, setFilterFields }) => {
+    function handleChange(_, value) {
+        setFilterFields((prev) => ({ ...prev, [name]: [value] }));
+    }
+
+    return (
+        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
+            {children}
+            <Autocomplete
+                freeSolo
+                options={options}
+                value={value.join(",")}
+                onChange={handleChange}
+                onInputChange={handleChange}
+                className={nodeInput}
+                renderInput={(params) => (
+                    <div ref={params.InputProps.ref}>
+                        <input name={name} {...params.inputProps} className={nodeInput} />
+                    </div>
+                )}
+            />
+        </FormControl>
+    );
+};
+
+SearchLabeledAutocomplete.displayName = "SearchLabeledAutocomplete";
diff --git a/designer/client/src/components/sidePanels/SearchLabeledInput.tsx b/designer/client/src/components/sidePanels/SearchLabeledInput.tsx
index 23e5354edd9..96acec5c5b5 100644
--- a/designer/client/src/components/sidePanels/SearchLabeledInput.tsx
+++ b/designer/client/src/components/sidePanels/SearchLabeledInput.tsx
@@ -1,19 +1,18 @@
-import { forwardRef, PropsWithChildren } from "react";
+import React from "react";
 import { FormControl } from "@mui/material";
 import { nodeInput } from "../graph/node-modal/NodeDetailsContent/NodeTableStyled";
-import React from "react";
 
-export type SearchLabeledInputProps = PropsWithChildren<{
-    name: string;
-}>;
+export const SearchLabeledInput = ({ children, name, value, setFilterFields }) => {
+    function handleChange(event) {
+        setFilterFields((prev) => ({ ...prev, [name]: event.target.value.split(",") }));
+    }
 
-export const SearchLabeledInput = forwardRef<HTMLInputElement, SearchLabeledInputProps>(({ children, ...props }, ref) => {
     return (
         <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
             {children}
-            <input ref={ref} {...props} className={nodeInput} />
+            <input name={name} value={value} className={nodeInput} onChange={handleChange} />
         </FormControl>
     );
-});
+};
 
 SearchLabeledInput.displayName = "SearchLabeledInput";
diff --git a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
index 51f0f9bf713..a939285597c 100644
--- a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
+++ b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
@@ -1,99 +1,58 @@
-import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Button, Box, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { SearchLabeledInput } from "../../sidePanels/SearchLabeledInput";
 import { SearchLabel } from "../../sidePanels/SearchLabel";
+import { resolveSearchQuery, searchQueryToString, useNodeTypes } from "./utils";
 import { SearchQuery } from "./SearchResults";
-import { resolveSearchQuery } from "./utils";
-
-const transformInput = (input: string, fieldName: string) => {
-    return input === "" ? "" : `${fieldName}:(${input})`;
-};
-
-function extractSimpleSearchQuery(text: string): string {
-    const regex = /(\w+):\(([^)]*)\)/g;
-    let match: RegExpExecArray | null;
-    let lastIndex = 0;
-
-    while ((match = regex.exec(text)) !== null) {
-        lastIndex = regex.lastIndex;
-    }
-
-    const rest = text.slice(lastIndex).trim();
-
-    return rest;
-}
+import { SearchLabeledAutocomplete } from "../../sidePanels/SearchLabeledAutocomplete";
 
 export function AdvancedSearchFilters({
+    filterFields,
+    setFilterFields,
     filter,
     setFilter,
     setCollapsedHandler,
-    refForm,
 }: {
+    filterFields: SearchQuery;
+    setFilterFields: React.Dispatch<React.SetStateAction<SearchQuery>>;
     filter: string;
     setFilter: React.Dispatch<React.SetStateAction<string>>;
     setCollapsedHandler: React.Dispatch<React.SetStateAction<boolean>>;
-    refForm: MutableRefObject<HTMLFormElement>;
 }) {
     const { t } = useTranslation();
-    //const refForm = useRef<HTMLFormElement>(null);
 
     const displayNames = useMemo(
         () => ({
-            id: t("panels.search.field.id", "Name"),
+            name: t("panels.search.field.id", "Name"),
             description: t("panels.search.field.description", "Description"),
             type: t("panels.search.field.type", "Type"),
-            paramName: t("panels.search.field.paramName", "Label"),
-            paramValue: t("panels.search.field.paramValue", "Value"),
-            outputValue: t("panels.search.field.outputValue", "Output"),
-            edgeExpression: t("panels.search.field.edgeExpression", "Edge"),
+            label: t("panels.search.field.paramName", "Label"),
+            value: t("panels.search.field.paramValue", "Value"),
+            output: t("panels.search.field.outputValue", "Output"),
+            edge: t("panels.search.field.edgeExpression", "Edge"),
         }),
         [t],
     );
 
-    //Here be dragons: direct DOM manipulation
     useEffect(() => {
-        if (refForm.current) {
-            const searchQuery = resolveSearchQuery(filter);
-            const formElements = refForm.current.elements;
-
-            Array.from(formElements).forEach((element: HTMLInputElement) => {
-                if (element.name in searchQuery) {
-                    element.value = (searchQuery[element.name] || []).join(",");
-                } else {
-                    element.value = "";
-                }
-            });
-        }
+        const searchQuery = resolveSearchQuery(filter);
+        setFilterFields(searchQuery);
     }, [filter]);
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
 
-        const formData = new FormData(event.currentTarget);
-
-        const transformedInputs = Array.from(formData.entries())
-            .map(([fieldName, fieldValue]) => {
-                const input = (fieldValue as string) || "";
-                return transformInput(input, fieldName);
-            })
-            .filter((input) => input !== "");
-
-        const finalText = transformedInputs.join(" ").trim() + " " + extractSimpleSearchQuery(filter);
-
-        setFilter(finalText);
+        setFilter(searchQueryToString(filterFields));
         setCollapsedHandler(false);
     };
 
     const handleClear = () => {
-        setFilter(extractSimpleSearchQuery(filter));
-
-        refForm.current.reset();
+        setFilter(filterFields?.plainQuery);
     };
 
     return (
         <Box
-            ref={refForm}
             component="form"
             onSubmit={handleSubmit}
             sx={{
@@ -105,26 +64,31 @@ export function AdvancedSearchFilters({
             }}
         >
             <Typography fontWeight="bold">{t("search.panel.advancedFilters.label", "Advanced Search")}</Typography>
-            <SearchLabeledInput name="id">
-                <SearchLabel label={displayNames["id"]} />
-            </SearchLabeledInput>
-            <SearchLabeledInput name="description">
-                <SearchLabel label={displayNames["description"]} />
+            <SearchLabeledInput name="name" value={filterFields?.name || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["name"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="paramName">
-                <SearchLabel label={displayNames["paramName"]} />
+            <SearchLabeledInput name="value" value={filterFields?.value || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["value"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="paramValue">
-                <SearchLabel label={displayNames["paramValue"]} />
+            <SearchLabeledAutocomplete
+                name="type"
+                options={useNodeTypes()}
+                value={filterFields?.type || []}
+                setFilterFields={setFilterFields}
+            >
+                <SearchLabel label={displayNames["type"]} />
+            </SearchLabeledAutocomplete>
+            <SearchLabeledInput name="label" value={filterFields?.label || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["label"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="outputValue">
-                <SearchLabel label={displayNames["outputValue"]} />
+            <SearchLabeledInput name="description" value={filterFields?.description || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["description"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="type">
-                <SearchLabel label={displayNames["type"]} />
+            <SearchLabeledInput name="output" value={filterFields?.output || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["output"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="edgeExpression">
-                <SearchLabel label={displayNames["edgeExpression"]} />
+            <SearchLabeledInput name="edge" value={filterFields?.edge || []} setFilterFields={setFilterFields}>
+                <SearchLabel label={displayNames["edge"]} />
             </SearchLabeledInput>
             <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "100%", mt: 2, mb: 1 }}>
                 <Button sx={{ width: "45%" }} size="small" variant="outlined" onClick={handleClear}>
diff --git a/designer/client/src/components/toolbars/search/SearchPanel.tsx b/designer/client/src/components/toolbars/search/SearchPanel.tsx
index 1243ff60559..1e5f7528e77 100644
--- a/designer/client/src/components/toolbars/search/SearchPanel.tsx
+++ b/designer/client/src/components/toolbars/search/SearchPanel.tsx
@@ -5,20 +5,20 @@ import { AdvancedOptionsIcon, SearchIcon } from "../../table/SearchFilter";
 import { Focusable } from "../../themed/InputWithIcon";
 import { ToolbarPanelProps } from "../../toolbarComponents/DefaultToolbarPanel";
 import { ToolbarWrapper } from "../../toolbarComponents/toolbarWrapper/ToolbarWrapper";
-import { SearchResults } from "./SearchResults";
+import { SearchQuery, SearchResults } from "./SearchResults";
 import { SearchInputWithIcon } from "../../themed/SearchInput";
 import { EventTrackingSelector, getEventTrackingProps } from "../../../containers/event-tracking";
 import { Collapse } from "@mui/material";
 import { AdvancedSearchFilters } from "./AdvancedSearchFilters";
-import { SearchPanelStyled, TipPanelStyled } from "../../tips/Styled";
+import { SearchPanelStyled } from "../../tips/Styled";
 
 export function SearchPanel(props: ToolbarPanelProps): ReactElement {
     const { t } = useTranslation();
+    const [filterFields, setFilterFields] = useState<SearchQuery>({});
     const [filter, setFilter] = useState<string>("");
-    const refForm = useRef<HTMLFormElement>(null);
     const clearFilter = useCallback(() => {
         setFilter("");
-        refForm.current.reset();
+        setFilterFields({});
     }, []);
     const [advancedOptionsCollapsed, setAdvancedOptionsCollapsed] = useState(false);
 
@@ -44,7 +44,8 @@ export function SearchPanel(props: ToolbarPanelProps): ReactElement {
             <Collapse in={advancedOptionsCollapsed} timeout="auto" unmountOnExit={false}>
                 <SearchPanelStyled>
                     <AdvancedSearchFilters
-                        refForm={refForm}
+                        filterFields={filterFields}
+                        setFilterFields={setFilterFields}
                         filter={filter}
                         setFilter={setFilter}
                         setCollapsedHandler={setAdvancedOptionsCollapsed}
diff --git a/designer/client/src/components/toolbars/search/SearchResults.tsx b/designer/client/src/components/toolbars/search/SearchResults.tsx
index f5db20a32f8..bf3f486d170 100644
--- a/designer/client/src/components/toolbars/search/SearchResults.tsx
+++ b/designer/client/src/components/toolbars/search/SearchResults.tsx
@@ -11,13 +11,13 @@ import { resetSelection } from "../../../actions/nk";
 import { useWindows } from "../../../windowManager";
 
 export type SearchQuery = {
-    id?: string[];
+    name?: string[];
     description?: string[];
     type?: string[];
-    paramName?: string[];
-    paramValue?: string[];
-    outputValue?: string[];
-    edgeExpression?: string[];
+    label?: string[];
+    value?: string[];
+    output?: string[];
+    edge?: string[];
     plainQuery?: string;
 };
 
diff --git a/designer/client/src/components/toolbars/search/utils.ts b/designer/client/src/components/toolbars/search/utils.ts
index 8998c5f37f3..b2e1e588f4f 100644
--- a/designer/client/src/components/toolbars/search/utils.ts
+++ b/designer/client/src/components/toolbars/search/utils.ts
@@ -1,13 +1,13 @@
 import { Edge, NodeType } from "../../../types";
-import { uniq } from "lodash";
+import { isEqual, uniq } from "lodash";
 import { useSelector } from "react-redux";
-import { isEqual } from "lodash";
 import { getScenario } from "../../../reducers/selectors/graph";
 import NodeUtils from "../../graph/NodeUtils";
 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[];
@@ -15,7 +15,8 @@ type FilterSelector = { name: string; selector: Selector }[];
 
 const fieldsSelectors: FilterSelector = [
     {
-        name: "id",
+        name: "name",
+
         selector: (node) => node.id,
     },
     {
@@ -24,30 +25,30 @@ const fieldsSelectors: FilterSelector = [
     },
     {
         name: "type",
-        selector: (node) => node.type,
+        selector: (node) => [node.nodeType, node.ref?.typ, node.ref?.id, node.type, node.service?.id],
     },
     {
-        name: "paramValue",
+        name: "value",
         selector: (node) => node.ref?.outputVariableNames && Object.values(node.ref?.outputVariableNames),
     },
     {
-        name: "paramName",
+        name: "label",
         selector: (node) => node.ref?.outputVariableNames && Object.keys(node.ref?.outputVariableNames),
     },
     {
-        name: "paramValue",
+        name: "value",
         selector: (node) => [node.expression, node.exprVal, node.value],
     },
     {
-        name: "outputValue",
+        name: "output",
         selector: (node) => [node.outputName, node.output, node.outputVar, node.varName],
     },
     {
-        name: "paramValue",
+        name: "value",
         selector: (node) => [node.parameters, node.ref?.parameters, node.service?.parameters, node.fields].flat().map((p) => p?.expression),
     },
     {
-        name: "paramName",
+        name: "label",
         selector: (node) => [node.parameters, node.ref?.parameters, node.service?.parameters, node.fields].flat().map((p) => p?.name),
     },
 ];
@@ -79,6 +80,32 @@ const findFieldsUsingSelectorWithName = (selectorName: string, filterValues: str
     );
 };
 
+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 == "type")?.selector;
+        const availableTypes = allNodes
+            .flatMap((node) => ensureArray(nodeSelector(node)).filter((item) => item !== undefined))
+            .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression))
+            .filter((type) => componentsSet.has(type.toLowerCase()));
+
+        return uniq(availableTypes);
+    }, [allNodes]);
+}
+
 export function useFilteredNodes(searchQuery: SearchQuery): {
     groups: string[];
     node: NodeType;
@@ -94,13 +121,13 @@ 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"),
+            label: t("panels.search.field.label", "Label"),
+            value: t("panels.search.field.value", "Value"),
+            output: t("panels.search.field.output", "Output"),
+            edge: t("panels.search.field.edge", "Edge"),
             type: t("panels.search.field.type", "Type"),
-            paramName: t("panels.search.field.paramName", "Label"),
-            paramValue: t("panels.search.field.paramValue", "Value"),
-            outputValue: t("panels.search.field.outputValue", "Output"),
-            edgeExpression: t("panels.search.field.edgeExpression", "Edge"),
         }),
         [t],
     );
@@ -118,7 +145,7 @@ export function useFilteredNodes(searchQuery: SearchQuery): {
                             .filter((e) => matchFilters(e.edgeType?.condition, [searchQuery.plainQuery]));
 
                         groups = findFields([searchQuery.plainQuery], node)
-                            .concat(edges.length ? "edgeExpression" : null)
+                            .concat(edges.length ? "edge" : null)
                             .map((name) => displayNames[name])
                             .filter(Boolean);
 
@@ -129,15 +156,15 @@ export function useFilteredNodes(searchQuery: SearchQuery): {
                             .filter((e) => matchFilters(e.edgeType?.condition, [searchQuery.plainQuery]));
 
                         const groupsAux: string[] = findFields([searchQuery.plainQuery], node)
-                            .concat(edgesAux.length ? "edgeExpression" : null)
+                            .concat(edgesAux.length ? "edge" : null)
                             .map((name) => displayNames[name])
                             .filter(Boolean);
 
                         edges =
-                            "edgeExpression" in searchQuery
+                            "edge" in searchQuery
                                 ? allEdges
                                       .filter((e) => e.from === node.id)
-                                      .filter((e) => matchFilters(e.edgeType?.condition, searchQuery.edgeExpression))
+                                      .filter((e) => matchFilters(e.edgeType?.condition, searchQuery.edge))
                                 : [];
 
                         const keyNamesRelevantForFiltering = Object.keys(searchQuery).filter(
@@ -151,7 +178,7 @@ export function useFilteredNodes(searchQuery: SearchQuery): {
                         groups = keyNamesRelevantForFiltering
                             .map((key) => findFieldsUsingSelectorWithName(key, searchQuery[key], node))
                             .flat()
-                            .concat(edges.length ? "edgeExpression" : null)
+                            .concat(edges.length ? "edge" : null)
                             .map((name) => displayNames[name])
                             .filter(Boolean);
 
@@ -172,18 +199,7 @@ export function useFilteredNodes(searchQuery: SearchQuery): {
     );
 }
 
-export function resolveSearchQuery(filterRawText: string): SearchQuery {
-    return parseRawTextToSearchQuery(filterRawText);
-}
-
-function splitString(input: string): string[] {
-    //split string by comma respecting quoted elements
-    //"a,b,c" -> ["a", "b", "c"]
-    //"a,\"b,c\",d" -> ["a", "b,c", "d"]
-    return input.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
-}
-
-function parseRawTextToSearchQuery(text: string): SearchQuery {
+export function resolveSearchQuery(text: string): SearchQuery {
     const result: SearchQuery = {};
     const regex = /(\w+):\(([^)]*)\)/g;
     let match: RegExpExecArray | null;
@@ -200,3 +216,25 @@ function parseRawTextToSearchQuery(text: string): SearchQuery {
 
     return result;
 }
+
+export function searchQueryToString(query: SearchQuery): string {
+    const plainQuery = query.plainQuery;
+
+    const formattedParts = Object.entries(query)
+        .filter(([key]) => key !== "plainQuery")
+        .map(([key, value]) => {
+            if (Array.isArray(value) && !(value.length === 1 && value[0] === "")) {
+                return `${key}:(${value})`;
+            } else if (typeof value === "string" && value.length > 0) {
+                return `${key}:(${[value]})`;
+            }
+            return []; // Skip undefined or invalid values
+        })
+        .filter(Boolean) // Remove null values
+        .join(" "); // Join the formatted parts with a space
+
+    // Append plainQuery at the end without a key if it exists
+    return plainQuery
+        ? `${formattedParts} ${plainQuery}`.trim() // Ensure no trailing space
+        : formattedParts;
+}
diff --git a/designer/client/src/reducers/selectors/settings.ts b/designer/client/src/reducers/selectors/settings.ts
index 7a4ad2c57a9..d5767d18144 100644
--- 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)),