Bringing the menu options opened on search (#427)

This pull request introduces a new feature that enhances the search
functionality by displaying menu options when performing a search.
Currently, the search results only present a list of relevant items, but
with this feature, users will have quick access to additional actions
and functionalities directly from the search results.

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

@@ -5,6 +5,7 @@ import { DisclosureComponentType } from "../../../../types/components";
 export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },
   children,
+  openDisc,
 }: DisclosureComponentType) {
   return (
     <Disclosure as="div" key={title}>
@@ -27,14 +28,14 @@ export default function DisclosureComponent({
                 <div>
                   <ChevronRightIcon
                     className={`${
-                      open ? "rotate-90 transform" : ""
+                      open || openDisc ? "rotate-90 transform" : ""
                     } h-4 w-4 text-gray-800 dark:text-white`}
                   />
                 </div>
               </div>
             </Disclosure.Button>
           </div>
-          <Disclosure.Panel as="div" className="-mt-px">
+          <Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
             {children}
           </Disclosure.Panel>
         </>

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

@@ -15,6 +15,7 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
   const [dataFilter, setFilterData] = useState(data);
+  const [search, setSearch] = useState("");
 
   function onDragStart(
     event: React.DragEvent<any>,
@@ -58,6 +59,7 @@ export default function ExtraSidebar() {
           className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
           onChange={(e) => {
             handleSearchInput(e.target.value);
+            setSearch(e.target.value);
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
@@ -71,6 +73,7 @@ export default function ExtraSidebar() {
           .map((d: keyof APIObjectType, i) =>
             Object.keys(dataFilter[d]).length > 0 ? (
               <DisclosureComponent
+                openDisc={search.length == 0 ? false : true}
                 key={i}
                 button={{
                   title: nodeNames[d] ?? nodeNames.unknown,

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

@@ -56,6 +56,7 @@ export type FileComponentType = {
 
 export type DisclosureComponentType = {
   children: ReactNode;
+  openDisc: boolean;
   button: {
     title: string;
     Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;