refactor: Advanced Disclosure now opens when there's a search

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -6,7 +6,7 @@ export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },
   isChild = true,
   children,
-  openDisc,
+  defaultOpen: openDisc,
 }: DisclosureComponentType): JSX.Element {
   return (
     <Disclosure as="div" defaultOpen={openDisc} key={title}>

src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx

@@ -5,11 +5,11 @@ import { DisclosureComponentType } from "../../../../types/components";
 export default function ParentDisclosureComponent({
   button: { title, Icon, buttons = [] },
   children,
-  openDisc,
+  defaultOpen,
   testId,
 }: DisclosureComponentType): JSX.Element {
   return (
-    <Disclosure as="div" defaultOpen={openDisc} key={title}>
+    <Disclosure as="div" defaultOpen={defaultOpen} key={title}>
       {({ open }) => (
         <>
           <div>
@@ -30,7 +30,7 @@ export default function ParentDisclosureComponent({
                   <IconComponent
                     name="ChevronsUpDownIcon"
                     className={`${
-                      open || openDisc ? "" : ""
+                      open || defaultOpen ? "" : ""
                     } h-4 w-4 text-foreground`}
                   />
                 </div>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -42,7 +42,7 @@ export default function ExtraSidebar(): JSX.Element {
   const [search, setSearch] = useState("");
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType },
+    data: { type: string; node?: APIClassType }
   ): void {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -68,7 +68,7 @@ export default function ExtraSidebar(): JSX.Element {
         let keys = Object.keys(data[d]).filter(
           (nd) =>
             nd.toLowerCase().includes(e.toLowerCase()) ||
-            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase()),
+            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -135,7 +135,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -172,7 +172,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -201,7 +201,7 @@ export default function ExtraSidebar(): JSX.Element {
             "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
-              : "",
+              : ""
           )}
         >
           <IconComponent
@@ -210,14 +210,14 @@ export default function ExtraSidebar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : "",
+                : ""
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [hasApiKey, validApiKey, currentFlow, hasStore]
   );
 
   const ExportMemo = useMemo(
@@ -228,7 +228,7 @@ export default function ExtraSidebar(): JSX.Element {
         </button>
       </ExportModal>
     ),
-    [],
+    []
   );
 
   const getIcon = useMemo(() => {
@@ -294,7 +294,7 @@ export default function ExtraSidebar(): JSX.Element {
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
               <>
                 <DisclosureComponent
-                  openDisc={
+                  defaultOpen={
                     getFilterEdge.length !== 0 || search.length !== 0
                       ? true
                       : false
@@ -312,8 +312,8 @@ export default function ExtraSidebar(): JSX.Element {
                       .sort((a, b) =>
                         sensitiveSort(
                           dataFilter[SBSectionName][a].display_name,
-                          dataFilter[SBSectionName][b].display_name,
+                          dataFilter[SBSectionName][b].display_name
-                        ),
+                        )
                       )
                       .map((SBItemName: string, index) => (
                         <ShadTooltip
@@ -357,11 +357,11 @@ export default function ExtraSidebar(): JSX.Element {
               </>
             ) : (
               <div key={index}></div>
-            ),
+            )
           )}{" "}
         <ParentDisclosureComponent
-          openDisc={false}
+          defaultOpen={search.length !== 0}
-          key={"Advanced"}
+          key={`${search.length !== 0}-Advanced`}
           button={{
             title: "Advanced",
             Icon: nodeIconsLucide.unknown,
@@ -376,7 +376,7 @@ export default function ExtraSidebar(): JSX.Element {
                 <>
                   <DisclosureComponent
                     isChild={false}
-                    openDisc={
+                    defaultOpen={
                       getFilterEdge.length !== 0 || search.length !== 0
                         ? true
                         : false
@@ -394,8 +394,8 @@ export default function ExtraSidebar(): JSX.Element {
                         .sort((a, b) =>
                           sensitiveSort(
                             dataFilter[SBSectionName][a].display_name,
-                            dataFilter[SBSectionName][b].display_name,
+                            dataFilter[SBSectionName][b].display_name
-                          ),
+                          )
                         )
                         .map((SBItemName: string, index) => (
                           <ShadTooltip
@@ -469,7 +469,7 @@ export default function ExtraSidebar(): JSX.Element {
                 </>
               ) : (
                 <div key={index}></div>
-              ),
+              )
             )}
         </ParentDisclosureComponent>
       </div>

src/frontend/src/types/components/index.ts

@@ -161,7 +161,7 @@ export type FileComponentType = {
 
 export type DisclosureComponentType = {
   children: ReactNode;
-  openDisc: boolean;
+  defaultOpen: boolean;
   isChild?: boolean;
   button: {
     title: string;
@@ -530,7 +530,7 @@ export type nodeToolbarPropsType = {
   updateNodeCode?: (
     newNodeClass: APIClassType,
     code: string,
-    name: string,
+    name: string
   ) => void;
   setShowState: (show: boolean | SetStateAction<boolean>) => void;
   isOutdated?: boolean;
@@ -580,7 +580,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) => void;
 };
 
@@ -672,12 +672,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: InputFieldType,
-      tweak: tweakType,
+      tweak: tweakType
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: InputFieldType,
+      template: InputFieldType
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;