Sidebar Filter
@@ -129,8 +127,7 @@ describe("SidebarHeaderComponent", () => {
const mockHandleInputFocus = jest.fn();
const mockHandleInputBlur = jest.fn();
const mockHandleInputChange = jest.fn();
- const mockSetFilterEdge = jest.fn();
- const mockSetFilterData = jest.fn();
+ const mockResetFilters = jest.fn();
const defaultProps: SidebarHeaderComponentProps = {
showConfig: false,
@@ -145,10 +142,9 @@ describe("SidebarHeaderComponent", () => {
handleInputFocus: mockHandleInputFocus,
handleInputBlur: mockHandleInputBlur,
handleInputChange: mockHandleInputChange,
- filterType: undefined,
- setFilterEdge: mockSetFilterEdge,
- setFilterData: mockSetFilterData,
- data: mockAPIData,
+ filterName: "",
+ filterDescription: "",
+ resetFilters: mockResetFilters,
};
beforeEach(() => {
@@ -349,66 +345,80 @@ describe("SidebarHeaderComponent", () => {
});
describe("Filter Component Conditional Rendering", () => {
- it("should not render filter component when filterType is null", () => {
+ it("should not render filter component when filterName and filterDescription are empty", () => {
render(
);
expect(screen.queryByTestId("sidebar-filter")).not.toBeInTheDocument();
});
- it("should render filter component when filterType is provided", () => {
+ it("should not render filter component when only filterName is provided", () => {
+ const propsWithOnlyName = {
+ ...defaultProps,
+ filterName: "Test Filter",
+ filterDescription: "",
+ };
+
+ render(
);
+
+ expect(screen.queryByTestId("sidebar-filter")).not.toBeInTheDocument();
+ });
+
+ it("should not render filter component when only filterDescription is provided", () => {
+ const propsWithOnlyDescription = {
+ ...defaultProps,
+ filterName: "",
+ filterDescription: "Test Description",
+ };
+
+ render(
);
+
+ expect(screen.queryByTestId("sidebar-filter")).not.toBeInTheDocument();
+ });
+
+ it("should render filter component when both filterName and filterDescription are provided", () => {
const propsWithFilter = {
...defaultProps,
- filterType: {
- source: "input",
- sourceHandle: "input",
- target: undefined,
- targetHandle: undefined,
- type: "input",
- color: "#FF0000",
- },
+ filterName: "Input Filter",
+ filterDescription: "Showing input components",
};
render(
);
const filterComponent = screen.getByTestId("sidebar-filter");
expect(filterComponent).toBeInTheDocument();
- expect(filterComponent).toHaveAttribute("data-is-input", "true");
- expect(filterComponent).toHaveAttribute("data-type", "input");
- expect(filterComponent).toHaveAttribute("data-color", "#FF0000");
+ expect(filterComponent).toHaveAttribute("data-name", "Input Filter");
+ expect(filterComponent).toHaveAttribute(
+ "data-description",
+ "Showing input components",
+ );
});
- it("should pass correct props to filter component for output", () => {
- const propsWithOutputFilter = {
+ it("should pass correct props to filter component", () => {
+ const propsWithFilter = {
...defaultProps,
- filterType: {
- source: undefined,
- sourceHandle: undefined,
- target: "output",
- targetHandle: "output",
- type: "output",
- color: "#00FF00",
- },
+ filterName: "Output Filter",
+ filterDescription: "Showing output components",
};
- render(
);
+ render(
);
const filterComponent = screen.getByTestId("sidebar-filter");
- expect(filterComponent).toHaveAttribute("data-is-input", "false");
- expect(filterComponent).toHaveAttribute("data-type", "output");
- expect(filterComponent).toHaveAttribute("data-color", "#00FF00");
+ expect(filterComponent).toHaveAttribute("data-name", "Output Filter");
+ expect(filterComponent).toHaveAttribute(
+ "data-description",
+ "Showing output components",
+ );
+ expect(filterComponent).toHaveAttribute(
+ "data-reset-filters",
+ expect.stringContaining("function"),
+ );
});
it("should handle filter reset correctly", () => {
const propsWithFilter = {
...defaultProps,
- filterType: {
- source: "input",
- sourceHandle: "input",
- target: "output",
- targetHandle: "output",
- type: "input",
- color: "#FF0000",
- },
+ filterName: "Test Filter",
+ filterDescription: "Test Description",
};
render(
);
@@ -416,7 +426,7 @@ describe("SidebarHeaderComponent", () => {
const filterComponent = screen.getByTestId("sidebar-filter");
expect(filterComponent).toHaveAttribute(
"data-reset-filters",
- expect.stringContaining("function"),
+ mockResetFilters.toString(),
);
});
});
@@ -440,14 +450,8 @@ describe("SidebarHeaderComponent", () => {
it("should maintain structure with filter component", () => {
const propsWithFilter = {
...defaultProps,
- filterType: {
- source: "input",
- sourceHandle: "input",
- target: "output",
- targetHandle: "output",
- type: "input",
- color: "#FF0000",
- },
+ filterName: "Test Filter",
+ filterDescription: "Test Description",
};
render(
);
@@ -515,6 +519,7 @@ describe("SidebarHeaderComponent", () => {
handleInputFocus: undefined as any,
handleInputBlur: undefined as any,
handleInputChange: undefined as any,
+ resetFilters: undefined as any,
};
expect(() => {
@@ -522,36 +527,39 @@ describe("SidebarHeaderComponent", () => {
}).not.toThrow();
});
- it("should handle undefined filterType gracefully", () => {
- const propsWithUndefinedFilter = {
+ it("should handle empty filter strings gracefully", () => {
+ const propsWithEmptyFilters = {
...defaultProps,
- filterType: undefined,
+ filterName: "",
+ filterDescription: "",
};
- render(
);
+ render(
);
expect(screen.queryByTestId("sidebar-filter")).not.toBeInTheDocument();
});
- it("should handle complex filterType objects", () => {
- const propsWithComplexFilter = {
+ it("should handle long filter names and descriptions", () => {
+ const propsWithLongFilters = {
...defaultProps,
- filterType: {
- source: "input",
- sourceHandle: "input",
- target: undefined,
- targetHandle: undefined,
- type: "complex-input",
- color: "#ABCDEF",
- additionalProp: "ignored",
- },
+ filterName: "Very Long Filter Name That Might Cause Issues",
+ filterDescription:
+ "This is a very long description that might contain multiple lines and special characters @#$%",
};
expect(() => {
- render(
);
+ render(
);
}).not.toThrow();
const filterComponent = screen.getByTestId("sidebar-filter");
expect(filterComponent).toBeInTheDocument();
+ expect(filterComponent).toHaveAttribute(
+ "data-name",
+ "Very Long Filter Name That Might Cause Issues",
+ );
+ expect(filterComponent).toHaveAttribute(
+ "data-description",
+ "This is a very long description that might contain multiple lines and special characters @#$%",
+ );
});
});
@@ -582,14 +590,8 @@ describe("SidebarHeaderComponent", () => {
showBeta: true,
showLegacy: false,
isInputFocused: true,
- filterType: {
- source: "input",
- sourceHandle: "input",
- target: undefined,
- targetHandle: undefined,
- type: "input",
- color: "#123456",
- },
+ filterName: "Integration Filter",
+ filterDescription: "Testing integration",
};
render(
);
@@ -601,8 +603,12 @@ describe("SidebarHeaderComponent", () => {
"integration test",
);
expect(screen.getByTestId("sidebar-filter")).toHaveAttribute(
- "data-type",
- "input",
+ "data-name",
+ "Integration Filter",
+ );
+ expect(screen.getByTestId("sidebar-filter")).toHaveAttribute(
+ "data-description",
+ "Testing integration",
);
expect(screen.getByTestId("disclosure")).toHaveAttribute(
"data-open",
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent.tsx
index 410cb4525319..f9fe51e02ec8 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent.tsx
@@ -3,34 +3,29 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
import { Button } from "@/components/ui/button";
export function SidebarFilterComponent({
- isInput,
- type,
- color,
+ name,
+ description,
resetFilters,
}: {
- isInput: boolean;
- type: string;
- color: string;
+ name: string;
+ description: string;
resetFilters: () => void;
}) {
- const tooltips = type.split("\n");
+ const tooltips = description.split("\n");
const plural = tooltips.length > 1 ? "s" : "";
return (
-
+
-
- {isInput ? "Input" : "Output"}
+
+ {name}
{plural}:{" "}
-
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx
index 06c582ccfd46..ad9828c35622 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx
@@ -28,10 +28,9 @@ export const SidebarHeaderComponent = memo(function SidebarHeaderComponent({
handleInputFocus,
handleInputBlur,
handleInputChange,
- filterType,
- setFilterEdge,
- setFilterData,
- data,
+ filterName,
+ filterDescription,
+ resetFilters,
}: SidebarHeaderComponentProps) {
return (
@@ -79,15 +78,11 @@ export const SidebarHeaderComponent = memo(function SidebarHeaderComponent({
handleInputBlur={handleInputBlur}
handleInputChange={handleInputChange}
/>
- {filterType && (
+ {filterName !== "" && filterDescription !== "" && (
{
- setFilterEdge([]);
- setFilterData(data);
- }}
+ name={filterName}
+ description={filterDescription}
+ resetFilters={resetFilters}
/>
)}
{ENABLE_NEW_SIDEBAR && (
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-component-filter.ts b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-component-filter.ts
new file mode 100644
index 000000000000..7bc9a35daa37
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-component-filter.ts
@@ -0,0 +1,18 @@
+import type { APIDataType } from "@/types/api";
+
+export const applyComponentFilter = (
+ filteredData: APIDataType,
+ getFilterComponent,
+) => {
+ const [category, component] = getFilterComponent.split(".");
+ return Object.fromEntries(
+ Object.entries(filteredData).map(([cat, items]) => [
+ cat,
+ Object.fromEntries(
+ Object.entries(items).filter(
+ ([name, _]) => name === component && cat === category,
+ ),
+ ),
+ ]),
+ );
+};
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index ed5acf8f87da..60dcf6148ad3 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -42,6 +42,7 @@ import SidebarMenuButtons from "./components/sidebarFooterButtons";
import { SidebarHeaderComponent } from "./components/sidebarHeader";
import SidebarSegmentedNav from "./components/sidebarSegmentedNav";
import { applyBetaFilter } from "./helpers/apply-beta-filter";
+import { applyComponentFilter } from "./helpers/apply-component-filter";
import { applyEdgeFilter } from "./helpers/apply-edge-filter";
import { applyLegacyFilter } from "./helpers/apply-legacy-filter";
import { combinedResultsFn } from "./helpers/combined-results";
@@ -145,11 +146,19 @@ interface FlowSidebarComponentProps {
export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
const data = useTypesStore((state) => state.data);
- const { getFilterEdge, setFilterEdge, filterType } = useFlowStore(
+ const {
+ getFilterEdge,
+ setFilterEdge,
+ filterType,
+ getFilterComponent,
+ setFilterComponent,
+ } = useFlowStore(
useShallow((state) => ({
getFilterEdge: state.getFilterEdge,
setFilterEdge: state.setFilterEdge,
filterType: state.filterType,
+ getFilterComponent: state.getFilterComponent,
+ setFilterComponent: state.setFilterComponent,
})),
);
@@ -299,6 +308,10 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
filteredData = applyEdgeFilter(filteredData, getFilterEdge);
}
+ if (getFilterComponent !== "") {
+ filteredData = applyComponentFilter(filteredData, getFilterComponent);
+ }
+
if (!showBeta) {
filteredData = applyBetaFilter(filteredData);
}
@@ -308,7 +321,13 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
}
return filteredData;
- }, [searchFilteredData, getFilterEdge, showBeta, showLegacy]);
+ }, [
+ searchFilteredData,
+ getFilterEdge,
+ getFilterComponent,
+ showBeta,
+ showLegacy,
+ ]);
const hasResults = useMemo(() => {
return Object.entries(dataFilter).some(
@@ -341,22 +360,34 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
}, [baseData, setSearch]);
useEffect(() => {
- if (filterType) {
+ if (filterType || getFilterComponent !== "") {
setOpen(true);
setActiveSection("search");
}
- }, [filterType, setOpen]);
+ }, [filterType, getFilterComponent, setOpen]);
useEffect(() => {
setFilterData(finalFilteredData);
- if (search !== "" || filterType || getFilterEdge.length > 0) {
+ if (
+ search !== "" ||
+ filterType ||
+ getFilterEdge.length > 0 ||
+ getFilterComponent !== ""
+ ) {
const newOpenCategories = Object.keys(finalFilteredData).filter(
(cat) => Object.keys(finalFilteredData[cat]).length > 0,
);
setOpenCategories(newOpenCategories);
}
- }, [finalFilteredData, search, filterType, getFilterEdge]);
+ }, [
+ finalFilteredData,
+ search,
+ filterType,
+ getFilterEdge,
+ setFilterComponent,
+ getFilterComponent,
+ ]);
useEffect(() => {
const options = {
@@ -405,16 +436,20 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
}, [baseData, mcpSuccess, mcpServers]);
useEffect(() => {
- if (getFilterEdge.length !== 0) {
+ if (getFilterEdge.length !== 0 || getFilterComponent !== "") {
setSearch("");
}
- }, [getFilterEdge, baseData]);
+ }, [getFilterEdge, getFilterComponent, baseData]);
useEffect(() => {
- if (search === "" && getFilterEdge.length === 0) {
+ if (
+ search === "" &&
+ getFilterEdge.length === 0 &&
+ getFilterComponent === ""
+ ) {
setOpenCategories([]);
}
- }, [search, getFilterEdge]);
+ }, [search, getFilterEdge, getFilterComponent]);
const searchComponentsSidebar = useShortcutsStore(
(state) => state.searchComponentsSidebar,
@@ -487,7 +522,8 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
const hasMcpServers = Boolean(mcpServers && mcpServers.length > 0);
- const hasSearchInput = search !== "" || filterType !== undefined;
+ const hasSearchInput =
+ search !== "" || filterType !== undefined || getFilterComponent !== "";
const showComponents =
(ENABLE_NEW_SIDEBAR &&
@@ -503,6 +539,28 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
(ENABLE_NEW_SIDEBAR && activeSection === "mcp") ||
(hasSearchInput && hasMcpComponents && ENABLE_NEW_SIDEBAR);
+ const [category, component] = getFilterComponent?.split(".") ?? ["", ""];
+
+ const filterDescription =
+ getFilterComponent !== ""
+ ? (baseData[category][component]?.display_name ?? "")
+ : (filterType?.type ?? "");
+
+ const filterName =
+ getFilterComponent !== ""
+ ? "Component"
+ : filterType
+ ? filterType.source
+ ? "Input"
+ : "Output"
+ : "";
+
+ const resetFilters = useCallback(() => {
+ setFilterEdge([]);
+ setFilterComponent("");
+ setFilterData(baseData);
+ }, [setFilterEdge, setFilterComponent, setFilterData, baseData]);
+
return (
) => void;
handleInputBlur: (event: React.FocusEvent) => void;
handleInputChange: (event: React.ChangeEvent) => void;
- filterType:
- | {
- source: string | undefined;
- sourceHandle: string | undefined;
- target: string | undefined;
- targetHandle: string | undefined;
- type: string;
- color: string;
- }
- | undefined;
- setFilterEdge: (edge: any[]) => void;
- setFilterData: Dispatch>;
- data: APIDataType;
+ filterName: string;
+ filterDescription: string;
+ resetFilters: () => void;
}
export interface UniqueInputsComponents {
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 48aa0ac0b32c..786257dde495 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -226,6 +226,9 @@ const useFlowStore = create((set, get) => ({
dismissedNodes: JSON.parse(
localStorage.getItem(`dismiss_${flow?.id}`) ?? "[]",
) as string[],
+ dismissedNodesLegacy: JSON.parse(
+ localStorage.getItem(`dismiss_legacy_${flow?.id}`) ?? "[]",
+ ) as string[],
});
unselectAllNodesEdges(nodes, newEdges);
if (flow?.id) {
@@ -567,6 +570,10 @@ const useFlowStore = create((set, get) => ({
set({ getFilterEdge: newState });
},
getFilterEdge: [],
+ setFilterComponent: (newState) => {
+ set({ getFilterComponent: newState });
+ },
+ getFilterComponent: "",
onConnect: (connection) => {
const _dark = useDarkStore.getState().dark;
// const commonMarkerProps = {
@@ -1068,6 +1075,17 @@ const useFlowStore = create((set, get) => ({
);
set({ dismissedNodes: newDismissedNodes });
},
+ dismissedNodesLegacy: [],
+ addDismissedNodesLegacy: (dismissedNodes: string[]) => {
+ const newDismissedNodes = Array.from(
+ new Set([...get().dismissedNodesLegacy, ...dismissedNodes]),
+ );
+ localStorage.setItem(
+ `dismiss_legacy_${get().currentFlow?.id}`,
+ JSON.stringify(newDismissedNodes),
+ );
+ set({ dismissedNodesLegacy: newDismissedNodes });
+ },
helperLineEnabled: false,
setHelperLineEnabled: (helperLineEnabled: boolean) => {
set({ helperLineEnabled });
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 05fa7cdf9cf5..13e3013f3722 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -43,6 +43,7 @@ export type APIClassType = {
custom_fields?: CustomFieldsType;
beta?: boolean;
legacy?: boolean;
+ replacement?: string[];
documentation: string;
error?: string;
official?: boolean;
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 990cb223d970..bf74ff6d6063 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -65,6 +65,8 @@ export type FlowStoreType = {
dismissedNodes: string[];
addDismissedNodes: (dismissedNodes: string[]) => void;
removeDismissedNodes: (dismissedNodes: string[]) => void;
+ dismissedNodesLegacy: string[];
+ addDismissedNodesLegacy: (dismissedNodes: string[]) => void;
//key x, y
positionDictionary: { [key: number]: number };
isPositionAvailable: (position: { x: number; y: number }) => boolean;
@@ -152,6 +154,8 @@ export type FlowStoreType = {
cleanFlow: () => void;
setFilterEdge: (newState) => void;
getFilterEdge: any[];
+ setFilterComponent: (newState) => void;
+ getFilterComponent: string;
onConnect: (connection: Connection) => void;
unselectAll: () => void;
playgroundPage: boolean;
diff --git a/src/frontend/tests/core/features/filterSidebar.spec.ts b/src/frontend/tests/core/features/filterSidebar.spec.ts
index 1f3cdd604b75..f20b9be34538 100644
--- a/src/frontend/tests/core/features/filterSidebar.spec.ts
+++ b/src/frontend/tests/core/features/filterSidebar.spec.ts
@@ -122,7 +122,7 @@ test(
await expect(page.getByTestId("dataAPI Request")).toBeVisible();
await expect(page.getByTestId("datastaxAstra DB")).toBeVisible();
- await expect(page.getByTestId("logicSub Flow [Deprecated]")).toBeVisible();
+ await expect(page.getByTestId("logicSub Flow")).toBeVisible();
await page.getByTestId("sidebar-options-trigger").click();
await page.getByTestId("sidebar-beta-switch").isVisible({ timeout: 5000 });
@@ -130,7 +130,7 @@ test(
await expect(page.getByTestId("sidebar-beta-switch")).toBeChecked();
await page.getByTestId("sidebar-options-trigger").click();
- await expect(page.getByTestId("logicSub Flow [Deprecated]")).toBeVisible();
+ await expect(page.getByTestId("logicSub Flow")).toBeVisible();
await expect(page.getByTestId("processingData Operations")).toBeVisible();
@@ -138,9 +138,7 @@ test(
await expect(page.getByTestId("dataAPI Request")).not.toBeVisible();
await expect(page.getByTestId("datastaxAstra DB")).not.toBeVisible();
- await expect(
- page.getByTestId("logicSub Flow [Deprecated]"),
- ).not.toBeVisible();
+ await expect(page.getByTestId("logicSub Flow")).not.toBeVisible();
await expect(page.getByTestId("processingSplit Text")).not.toBeVisible();
},