diff --git a/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx index 936269e45e8f..40e0519d1add 100644 --- a/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx @@ -3,7 +3,7 @@ import IconComponent from "../../../../components/genericIconComponent"; import { DisclosureComponentType } from "../../../../types/components"; export default function ParentDisclosureComponent({ - button: { title, Icon, buttons = [] }, + button: { title, Icon, buttons = [], beta }, children, defaultOpen, testId, @@ -19,7 +19,7 @@ export default function ParentDisclosureComponent({ >
{title} - {title === "Experimental" && ( + {beta && (
BETA
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx new file mode 100644 index 000000000000..eed367820e96 --- /dev/null +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx @@ -0,0 +1,68 @@ +import ShadTooltip from "@/components/shadTooltipComponent"; +import { nodeColors, nodeIconsLucide, nodeNames } from "@/utils/styleUtils"; +import { removeCountFromString } from "@/utils/utils"; +import { Fragment } from "react/jsx-runtime"; +import DisclosureComponent from "../../DisclosureComponent"; +import SidebarDraggableComponent from "../sideBarDraggableComponent"; +import sensitiveSort from "../utils/sensitive-sort"; + +export function SidebarCategoryComponent({ + index, + search, + getFilterEdge, + category, + name, + onDragStart, +}) { + return ( + + +
+ {Object.keys(category) + .sort((a, b) => + sensitiveSort(category[a].display_name, category[b].display_name), + ) + .map((SBItemName: string, index) => ( + + + onDragStart(event, { + //split type to remove type in nodes saved with same name removing it's + type: removeCountFromString(SBItemName), + node: category[SBItemName], + }) + } + color={nodeColors[name]} + itemName={SBItemName} + //convert error to boolean + error={!!category[SBItemName].error} + display_name={category[SBItemName].display_name} + official={ + category[SBItemName].official === false ? false : true + } + /> + + ))} +
+
+
+ ); +} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 4e0b3b8a11e3..bdfe872280d5 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,9 +1,8 @@ import FeatureFlags from "@/../feature-config.json"; +import { useStoreStore } from "@/stores/storeStore"; import { cloneDeep } from "lodash"; -import { LinkIcon, SparklesIcon } from "lucide-react"; -import { Fragment, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import IconComponent from "../../../../components/genericIconComponent"; -import ShadTooltip from "../../../../components/shadTooltipComponent"; import { Input } from "../../../../components/ui/input"; import { Separator } from "../../../../components/ui/separator"; import { @@ -14,23 +13,17 @@ import useAlertStore from "../../../../stores/alertStore"; import useFlowStore from "../../../../stores/flowStore"; import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType, APIObjectType } from "../../../../types/api"; -import { - nodeColors, - nodeIconsLucide, - nodeNames, -} from "../../../../utils/styleUtils"; -import { removeCountFromString } from "../../../../utils/utils"; -import DisclosureComponent from "../DisclosureComponent"; +import { nodeIconsLucide } from "../../../../utils/styleUtils"; import ParentDisclosureComponent from "../ParentDisclosureComponent"; -import SidebarDraggableComponent from "./sideBarDraggableComponent"; +import { SidebarCategoryComponent } from "./SidebarCategoryComponent"; import { sortKeys } from "./utils"; -import sensitiveSort from "./utils/sensitive-sort"; export default function ExtraSidebar(): JSX.Element { const data = useTypesStore((state) => state.data); const templates = useTypesStore((state) => state.templates); const getFilterEdge = useFlowStore((state) => state.getFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge); + const hasStore = useStoreStore((state) => state.hasStore); const setErrorData = useAlertStore((state) => state.setErrorData); const [dataFilter, setFilterData] = useState(data); @@ -42,6 +35,7 @@ export default function ExtraSidebar(): JSX.Element { //start drag event var crt = event.currentTarget.cloneNode(true); crt.style.position = "absolute"; + crt.style.width = "215px"; crt.style.top = "-500px"; crt.style.right = "-500px"; crt.classList.add("cursor-grabbing"); @@ -235,75 +229,25 @@ export default function ExtraSidebar(): JSX.Element { .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x)) .map((SBSectionName: keyof APIObjectType, index) => Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - -
- {Object.keys(dataFilter[SBSectionName]) - .sort((a, b) => - sensitiveSort( - dataFilter[SBSectionName][a].display_name, - dataFilter[SBSectionName][b].display_name, - ), - ) - .map((SBItemName: string, index) => ( - - - onDragStart(event, { - //split type to remove type in nodes saved with same name removing it's - type: removeCountFromString(SBItemName), - node: dataFilter[SBSectionName][SBItemName], - }) - } - color={nodeColors[SBSectionName]} - itemName={SBItemName} - //convert error to boolean - error={!!dataFilter[SBSectionName][SBItemName].error} - display_name={ - dataFilter[SBSectionName][SBItemName].display_name - } - official={ - dataFilter[SBSectionName][SBItemName].official === - false - ? false - : true - } - /> - - ))} -
-
+ ) : (
), - )}{" "} + )} @@ -312,105 +256,47 @@ export default function ExtraSidebar(): JSX.Element { .filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x)) .map((SBSectionName: keyof APIObjectType, index) => Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - - -
- {Object.keys(dataFilter[SBSectionName]) - .sort((a, b) => - sensitiveSort( - dataFilter[SBSectionName][a].display_name, - dataFilter[SBSectionName][b].display_name, - ), - ) - .map((SBItemName: string, index) => ( - - - onDragStart(event, { - //split type to remove type in nodes saved with same name removing it's - type: removeCountFromString(SBItemName), - node: dataFilter[SBSectionName][SBItemName], - }) - } - color={nodeColors[SBSectionName]} - itemName={SBItemName} - //convert error to boolean - error={ - !!dataFilter[SBSectionName][SBItemName].error - } - display_name={ - dataFilter[SBSectionName][SBItemName] - .display_name - } - official={ - dataFilter[SBSectionName][SBItemName] - .official === false - ? false - : true - } - /> - - ))} -
-
- {index === - Object.keys(dataFilter).length - - PRIORITY_SIDEBAR_ORDER.length + - 1 && ( - <> - -
- {/* BUG ON THIS ICON */} - - - - Discover More - -
-
-
- -
-
-
- - )} -
+ ) : (
), )} + {hasStore && ( + +
+ {/* BUG ON THIS ICON */} + + + + Discover More + +
+
+
+ +
+
+
+ )}
{FeatureFlags.ENABLE_MVPS && ( <> @@ -430,107 +316,14 @@ export default function ExtraSidebar(): JSX.Element { .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x)) .map((SBSectionName: keyof APIObjectType, index) => Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - - -
- {Object.keys(dataFilter[SBSectionName]) - .sort((a, b) => - sensitiveSort( - dataFilter[SBSectionName][a].display_name, - dataFilter[SBSectionName][b].display_name, - ), - ) - .map((SBItemName: string, index) => ( - - - onDragStart(event, { - //split type to remove type in nodes saved with same name removing it's - type: removeCountFromString(SBItemName), - node: dataFilter[SBSectionName][ - SBItemName - ], - }) - } - color={nodeColors[SBSectionName]} - itemName={SBItemName} - //convert error to boolean - error={ - !!dataFilter[SBSectionName][SBItemName] - .error - } - display_name={ - dataFilter[SBSectionName][SBItemName] - .display_name - } - official={ - dataFilter[SBSectionName][SBItemName] - .official === false - ? false - : true - } - /> - - ))} -
-
- {index === - Object.keys(dataFilter).length - - PRIORITY_SIDEBAR_ORDER.length + - 1 && ( - <> - -
- {/* BUG ON THIS ICON */} - - - - Discover More - -
-
-
- -
-
-
- - )} -
+ ) : (
), diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 5cedeb1859ed..bce079119cf5 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -258,6 +258,7 @@ export type DisclosureComponentType = { title: string; onClick: (event?: React.MouseEvent) => void; }[]; + beta?: boolean; }; testId?: string; };