fix: console reported issues (#3660)

* Added key to sidebar buttons

* Added key directrly to sidebar category

* Removed key definition on sidebar category

* Fix error of nested buttons on secretKeyModal

* Fix nested buttons on output modal

* Fix clip-path warning on components

* Fix components cannot be given refs on nodeOutputField

* Removed unused console.log

* Added key on profile pictures map

* Fixed hideOverlay being called when the table is destroyed

* Fixed valueFormatter error on Apply To Fields field on GlobalVariables page

* Updated headers on config page to ensure consistent design

src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx

@@ -5,14 +5,10 @@ import { useUpdateNodeInternals } from "reactflow";
 import { default as IconComponent } from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
-import { Case } from "../../../../shared/components/caseComponent";
 import useFlowStore from "../../../../stores/flowStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
-import {
-  NodeOutputFieldComponentType,
-  ParameterComponentType,
-} from "../../../../types/components";
+import { NodeOutputFieldComponentType } from "../../../../types/components";
 import {
   getGroupOutputNodeId,
   scapedJSONStringfy,
@@ -20,7 +16,6 @@ import {
 import {
   classNames,
   cn,
-  isThereModal,
   logHasMessage,
   logTypeIsError,
   logTypeIsUnknown,
@@ -194,36 +189,38 @@ export default function NodeOutputField({
                   : "Please build the component first"
               }
             >
-              <OutputModal
-                disabled={!displayOutputPreview || unknownOutput}
-                nodeId={flowPoolId}
-                outputName={internalOutputName}
-              >
-                <Button
-                  unstyled
+              <div>
+                <OutputModal
                   disabled={!displayOutputPreview || unknownOutput}
-                  data-testid={`output-inspection-${title.toLowerCase()}`}
+                  nodeId={flowPoolId}
+                  outputName={internalOutputName}
                 >
-                  {errorOutput ? (
-                    <IconComponent
-                      className={classNames(
-                        "h-5 w-5 rounded-md text-status-red",
-                      )}
-                      name={"X"}
-                    />
-                  ) : (
-                    <IconComponent
-                      className={classNames(
-                        "h-5 w-5 rounded-md",
-                        displayOutputPreview && !unknownOutput
-                          ? "hover:text-medium-indigo"
-                          : "cursor-not-allowed text-muted-foreground",
-                      )}
-                      name={"ScanEye"}
-                    />
-                  )}
-                </Button>
-              </OutputModal>
+                  <Button
+                    unstyled
+                    disabled={!displayOutputPreview || unknownOutput}
+                    data-testid={`output-inspection-${title.toLowerCase()}`}
+                  >
+                    {errorOutput ? (
+                      <IconComponent
+                        className={classNames(
+                          "h-5 w-5 rounded-md text-status-red",
+                        )}
+                        name={"X"}
+                      />
+                    ) : (
+                      <IconComponent
+                        className={classNames(
+                          "h-5 w-5 rounded-md",
+                          displayOutputPreview && !unknownOutput
+                            ? "hover:text-medium-indigo"
+                            : "cursor-not-allowed text-muted-foreground",
+                        )}
+                        name={"ScanEye"}
+                      />
+                    )}
+                  </Button>
+                </OutputModal>
+              </div>
             </ShadTooltip>
           </div>
         </div>

src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx

@@ -1,6 +1,5 @@
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useState } from "react";
-import { Button } from "../../../../components/ui/button";
 import BaseModal from "../../../../modals/baseModal";
 import SwitchOutputView from "./components/switchOutputView";
 
@@ -38,7 +37,7 @@ export default function OutputModal({
         />
       </BaseModal.Content>
       <BaseModal.Footer close></BaseModal.Footer>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
     </BaseModal>
   );
 }

src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx

@@ -17,8 +17,8 @@ const SideBarButtonsComponent = ({
 }: SideBarButtonsComponentProps) => {
   return (
     <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
-      {items.map((item) => (
-        <CustomLink to={item.href!}>
+      {items.map((item, index) => (
+        <CustomLink key={index} to={item.href!}>
           <div
             key={item.title}
             data-testid={`sidebar-nav-${item.title}`}

src/frontend/src/components/tableComponent/index.tsx

@@ -122,7 +122,9 @@ const TableComponent = forwardRef<
         }
       }, 50);
       setTimeout(() => {
-        realRef?.current?.api?.hideOverlay();
+        if (!realRef?.current?.api?.isDestroyed) {
+          realRef?.current?.api?.hideOverlay();
+        }
       }, 1000);
       if (props.onGridReady) props.onGridReady(params);
     };

src/frontend/src/icons/AstraDB/AstraDB.jsx

@@ -7,7 +7,7 @@ const AstraSVG = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clip-path="url(#clip0_702_1449)">
+    <g clipPath="url(#clip0_702_1449)">
       {/* <rect width="96" height="96" rx="6" fill="white"/> */}
       <path
         d="M38.0469 33H12V62.1892H38.0469L44.5902 57.1406V38.0485L38.0469 33ZM17.0478 38.0485H39.5424V57.1459H17.0478V38.0485Z"

src/frontend/src/icons/Unstructured/Unstructured.jsx

@@ -5,7 +5,7 @@ const SvgGoogleGenerativeAI = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clip-path="url(#clip0_6067_405)">
+    <g clipPath="url(#clip0_6067_405)">
       <rect width="24" height="24" fill="#0ADDF8" />
       <path
         d="M14.2453 4.39688C13.9172 4.57031 13.7672 4.83281 13.7953 5.19375C13.8281 5.61563 14.0625 5.83125 14.6953 6.02344C15.2156 6.18281 15.3516 6.35156 15.1406 6.5625C14.9578 6.74531 14.5312 6.67031 14.2922 6.41719L14.1609 6.27656L13.9219 6.40781C13.7953 6.47813 13.6875 6.55313 13.6875 6.56719C13.6875 6.58125 13.7484 6.67969 13.8234 6.78281C14.0297 7.06875 14.3672 7.21875 14.7984 7.21875C15.4781 7.21875 15.8578 6.90469 15.8578 6.34688C15.8578 5.88281 15.6234 5.65313 14.9391 5.44688C14.4516 5.30156 14.3297 5.18906 14.4516 4.99688C14.4937 4.93594 14.5828 4.875 14.6484 4.85625C14.7984 4.81875 15.0937 4.89375 15.2437 5.01094L15.3562 5.10469L15.5766 4.95469C15.6937 4.87031 15.7969 4.78125 15.7969 4.75313C15.7969 4.72969 15.7406 4.65 15.6703 4.57969C15.3141 4.24219 14.6953 4.1625 14.2453 4.39688Z"

src/frontend/src/modals/secretKeyModal/index.tsx

@@ -76,7 +76,7 @@ export default function SecretKeyModal({
       open={open}
       setOpen={setOpen}
     >
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={
           renderKey ? (

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

@@ -1,13 +1,11 @@
 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,
@@ -15,54 +13,50 @@ export function SidebarCategoryComponent({
   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,
+      }}
     >
-      <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>
+      <div className="side-bar-components-gap">
+        {Object.keys(category)
+          .sort((a, b) =>
+            sensitiveSort(category[a].display_name, category[b].display_name),
+          )
+          .map((SBItemName: string, idx) => (
+            <ShadTooltip
+              content={category[SBItemName].display_name}
+              side="right"
+              key={idx}
+            >
+              <SidebarDraggableComponent
+                sectionName={name as string}
+                apiClass={category[SBItemName]}
+                key={idx}
+                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>
   );
 }

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

@@ -233,7 +233,7 @@ export default function ExtraSidebar(): JSX.Element {
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
               <SidebarCategoryComponent
-                index={index}
+                key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                 search={search}
                 getFilterEdge={getFilterEdge}
                 category={dataFilter[SBSectionName]}
@@ -264,7 +264,7 @@ export default function ExtraSidebar(): JSX.Element {
             .map((SBSectionName: keyof APIObjectType, index) =>
               Object.keys(dataFilter[SBSectionName]).length > 0 ? (
                 <SidebarCategoryComponent
-                  index={index}
+                  key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                   search={search}
                   getFilterEdge={getFilterEdge}
                   category={dataFilter[SBSectionName]}
@@ -324,7 +324,7 @@ export default function ExtraSidebar(): JSX.Element {
                 .map((SBSectionName: keyof APIObjectType, index) =>
                   Object.keys(dataFilter[SBSectionName]).length > 0 ? (
                     <SidebarCategoryComponent
-                      index={index}
+                      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
                       search={search}
                       getFilterEdge={getFilterEdge}
                       category={dataFilter[SBSectionName]}

src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx

@@ -30,7 +30,6 @@ const TabsSearchComponent = ({
         newLocation = location.replace(/.*\/(?:flows|components)/, "/all");
         break;
     }
-    console.log(newLocation);
     navigate(newLocation);
   };
 

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx

@@ -15,7 +15,7 @@ const ApiKeyHeaderComponent = ({
 }: ApiKeyHeaderComponentProps) => {
   return (
     <>
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Langflow API

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -37,8 +37,8 @@ export default function ProfilePictureChooserComponent({
       {loading || !imagesLoaded ? (
         <Loading />
       ) : (
-        Object.keys(profilePictures!).map((folder, idx) => (
-          <div className="flex flex-col gap-2">
+        Object.keys(profilePictures!).map((folder, index) => (
+          <div className="flex flex-col gap-2" key={index}>
             <div className="edit-flow-arrangement">
               <span className="font-normal">{folder}</span>
             </div>
@@ -46,6 +46,7 @@ export default function ProfilePictureChooserComponent({
               <div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-muted px-1 custom-scroll">
                 {profilePictures![folder].map((path, idx) => (
                   <Button
+                    key={idx}
                     ref={value === folder + "/" + path ? ref : undefined}
                     unstyled
                     onClick={() => onChange(folder + "/" + path)}

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -62,6 +62,9 @@ export default function GlobalVariablesPage() {
     {
       headerName: "Apply To Fields",
       field: "default_fields",
+      valueFormatter: (params) => {
+        return params.value.join(", ");
+      },
       flex: 1,
       editable: false,
       resizable: false,
@@ -92,7 +95,7 @@ export default function GlobalVariablesPage() {
 
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Global Variables

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

@@ -57,7 +57,7 @@ export default function ShortcutsPage() {
 
   return (
     <div className="flex h-full w-full flex-col gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <div className="flex w-full items-start justify-between gap-6">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Shortcuts
@@ -71,7 +71,7 @@ export default function ShortcutsPage() {
           </p>
         </div>
         <div>
-          <div className="align-end mb-4 flex w-full justify-end">
+          <div className="align-end flex w-full justify-end">
             <div className="justify center flex items-center">
               {open && (
                 <EditShortcutButton