From cb1a2f24b32568fc72f77a7143a41d430895daaf Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:42:41 -0300
Subject: [PATCH] refactor: modularized categories (#3615)

Modularized category and fixed Discover More not appearing
---
 .../ParentDisclosureComponent/index.tsx       |   4 +-
 .../SidebarCategoryComponent/index.tsx        |  68 ++++
 .../extraSidebarComponent/index.tsx           | 329 ++++--------------
 src/frontend/src/types/components/index.ts    |   1 +
 4 files changed, 132 insertions(+), 270 deletions(-)
 create mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx

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({
             >
               <div className="flex items-baseline gap-1 align-baseline">
                 <span className="parent-disclosure-title">{title}</span>
-                {title === "Experimental" && (
+                {beta && (
                   <div className="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground-soft">
                     BETA
                   </div>
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 (
+    <Fragment
+      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
+    >
+      <DisclosureComponent
+        isChild={false}
+        defaultOpen={
+          getFilterEdge.length !== 0 || search.length !== 0 ? true : false
+        }
+        button={{
+          title: nodeNames[name] ?? nodeNames.unknown,
+          Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
+        }}
+      >
+        <div className="side-bar-components-gap">
+          {Object.keys(category)
+            .sort((a, b) =>
+              sensitiveSort(category[a].display_name, category[b].display_name),
+            )
+            .map((SBItemName: string, index) => (
+              <ShadTooltip
+                content={category[SBItemName].display_name}
+                side="right"
+                key={index}
+              >
+                <SidebarDraggableComponent
+                  sectionName={name as string}
+                  apiClass={category[SBItemName]}
+                  key={index}
+                  onDragStart={(event) =>
+                    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
+                  }
+                />
+              </ShadTooltip>
+            ))}
+        </div>
+      </DisclosureComponent>
+    </Fragment>
+  );
+}
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 ? (
-              <DisclosureComponent
-                defaultOpen={
-                  getFilterEdge.length !== 0 || search.length !== 0
-                    ? true
-                    : false
-                }
-                isChild={false}
-                key={index + search + JSON.stringify(getFilterEdge)}
-                button={{
-                  title: nodeNames[SBSectionName] ?? nodeNames.unknown,
-                  Icon:
-                    nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
-                }}
-              >
-                <div className="side-bar-components-gap">
-                  {Object.keys(dataFilter[SBSectionName])
-                    .sort((a, b) =>
-                      sensitiveSort(
-                        dataFilter[SBSectionName][a].display_name,
-                        dataFilter[SBSectionName][b].display_name,
-                      ),
-                    )
-                    .map((SBItemName: string, index) => (
-                      <ShadTooltip
-                        content={
-                          dataFilter[SBSectionName][SBItemName].display_name
-                        }
-                        side="right"
-                        key={index}
-                      >
-                        <SidebarDraggableComponent
-                          sectionName={SBSectionName as string}
-                          apiClass={dataFilter[SBSectionName][SBItemName]}
-                          key={index + SBItemName}
-                          onDragStart={(event) =>
-                            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
-                          }
-                        />
-                      </ShadTooltip>
-                    ))}
-                </div>
-              </DisclosureComponent>
+              <SidebarCategoryComponent
+                index={index}
+                search={search}
+                getFilterEdge={getFilterEdge}
+                category={dataFilter[SBSectionName]}
+                name={SBSectionName}
+                onDragStart={onDragStart}
+              />
             ) : (
               <div key={index}></div>
             ),
-          )}{" "}
+          )}
         <ParentDisclosureComponent
           defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
           key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Advanced`}
           button={{
             title: "Experimental",
             Icon: nodeIconsLucide.unknown,
+            beta: true,
           }}
           testId="extended-disclosure"
         >
@@ -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 ? (
-                <Fragment
-                  key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
-                >
-                  <DisclosureComponent
-                    isChild={false}
-                    defaultOpen={
-                      getFilterEdge.length !== 0 || search.length !== 0
-                        ? true
-                        : false
-                    }
-                    button={{
-                      title: nodeNames[SBSectionName] ?? nodeNames.unknown,
-                      Icon:
-                        nodeIconsLucide[SBSectionName] ??
-                        nodeIconsLucide.unknown,
-                    }}
-                  >
-                    <div className="side-bar-components-gap">
-                      {Object.keys(dataFilter[SBSectionName])
-                        .sort((a, b) =>
-                          sensitiveSort(
-                            dataFilter[SBSectionName][a].display_name,
-                            dataFilter[SBSectionName][b].display_name,
-                          ),
-                        )
-                        .map((SBItemName: string, index) => (
-                          <ShadTooltip
-                            content={
-                              dataFilter[SBSectionName][SBItemName].display_name
-                            }
-                            side="right"
-                            key={index}
-                          >
-                            <SidebarDraggableComponent
-                              sectionName={SBSectionName as string}
-                              apiClass={dataFilter[SBSectionName][SBItemName]}
-                              key={index}
-                              onDragStart={(event) =>
-                                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
-                              }
-                            />
-                          </ShadTooltip>
-                        ))}
-                    </div>
-                  </DisclosureComponent>
-                  {index ===
-                    Object.keys(dataFilter).length -
-                      PRIORITY_SIDEBAR_ORDER.length +
-                      1 && (
-                    <>
-                      <a
-                        target={"_blank"}
-                        href="https://langflow.store"
-                        className="components-disclosure-arrangement"
-                      >
-                        <div className="flex gap-4">
-                          {/* BUG ON THIS ICON */}
-                          <SparklesIcon
-                            strokeWidth={1.5}
-                            className="w-[22px] text-primary"
-                          />
-
-                          <span className="components-disclosure-title">
-                            Discover More
-                          </span>
-                        </div>
-                        <div className="components-disclosure-div">
-                          <div>
-                            <LinkIcon className="h-4 w-4 text-foreground" />
-                          </div>
-                        </div>
-                      </a>
-                    </>
-                  )}
-                </Fragment>
+                <SidebarCategoryComponent
+                  index={index}
+                  search={search}
+                  getFilterEdge={getFilterEdge}
+                  category={dataFilter[SBSectionName]}
+                  name={SBSectionName}
+                  onDragStart={onDragStart}
+                />
               ) : (
                 <div key={index}></div>
               ),
             )}
+          {hasStore && (
+            <a
+              target={"_blank"}
+              href="https://langflow.store"
+              className="components-disclosure-arrangement"
+              draggable="false"
+            >
+              <div className="flex gap-4">
+                {/* BUG ON THIS ICON */}
+                <IconComponent
+                  name="Sparkles"
+                  strokeWidth={1.5}
+                  className="w-[22px] text-primary"
+                />
+
+                <span className="components-disclosure-title">
+                  Discover More
+                </span>
+              </div>
+              <div className="components-disclosure-div">
+                <div>
+                  <IconComponent
+                    name="Link"
+                    className="h-4 w-4 text-foreground"
+                  />
+                </div>
+              </div>
+            </a>
+          )}
         </ParentDisclosureComponent>
         {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 ? (
-                    <Fragment
-                      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
-                    >
-                      <DisclosureComponent
-                        isChild={false}
-                        defaultOpen={
-                          getFilterEdge.length !== 0 || search.length !== 0
-                            ? true
-                            : false
-                        }
-                        button={{
-                          title: nodeNames[SBSectionName] ?? nodeNames.unknown,
-                          Icon:
-                            nodeIconsLucide[SBSectionName] ??
-                            nodeIconsLucide.unknown,
-                        }}
-                      >
-                        <div className="side-bar-components-gap">
-                          {Object.keys(dataFilter[SBSectionName])
-                            .sort((a, b) =>
-                              sensitiveSort(
-                                dataFilter[SBSectionName][a].display_name,
-                                dataFilter[SBSectionName][b].display_name,
-                              ),
-                            )
-                            .map((SBItemName: string, index) => (
-                              <ShadTooltip
-                                content={
-                                  dataFilter[SBSectionName][SBItemName]
-                                    .display_name
-                                }
-                                side="right"
-                                key={index}
-                              >
-                                <SidebarDraggableComponent
-                                  sectionName={SBSectionName as string}
-                                  apiClass={
-                                    dataFilter[SBSectionName][SBItemName]
-                                  }
-                                  key={index}
-                                  onDragStart={(event) =>
-                                    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
-                                  }
-                                />
-                              </ShadTooltip>
-                            ))}
-                        </div>
-                      </DisclosureComponent>
-                      {index ===
-                        Object.keys(dataFilter).length -
-                          PRIORITY_SIDEBAR_ORDER.length +
-                          1 && (
-                        <>
-                          <a
-                            target={"_blank"}
-                            href="https://langflow.store"
-                            className="components-disclosure-arrangement"
-                          >
-                            <div className="flex gap-4">
-                              {/* BUG ON THIS ICON */}
-                              <SparklesIcon
-                                strokeWidth={1.5}
-                                className="w-[22px] text-primary"
-                              />
-
-                              <span className="components-disclosure-title">
-                                Discover More
-                              </span>
-                            </div>
-                            <div className="components-disclosure-div">
-                              <div>
-                                <LinkIcon className="h-4 w-4 text-foreground" />
-                              </div>
-                            </div>
-                          </a>
-                        </>
-                      )}
-                    </Fragment>
+                    <SidebarCategoryComponent
+                      index={index}
+                      search={search}
+                      getFilterEdge={getFilterEdge}
+                      category={dataFilter[SBSectionName]}
+                      name={SBSectionName}
+                      onDragStart={onDragStart}
+                    />
                   ) : (
                     <div key={index}></div>
                   ),
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;
 };