Added sidebar separations

src/frontend/src/constants/constants.ts

@@ -739,3 +739,4 @@ export const PRIORITY_SIDEBAR_ORDER = [
   "helpers",
   "experimental",
 ];
+

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

@@ -5,6 +5,7 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
+import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
@@ -264,6 +265,20 @@ export default function ExtraSidebar(): JSX.Element {
           .sort(sortKeys)
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
+              <>
+                {index === 0 && (
+                  <div className="pt-0.5">
+                    <Separator />
+                    <div className="p-2 px-4 font-semibold" key={index}>
+                      Native
+                    </div>
+                  </div>
+                )}
+                {index === PRIORITY_SIDEBAR_ORDER.length - 1 && (
+                  <div className="p-2 px-4 font-semibold" key={index}>
+                    Legacy
+                  </div>
+                )}
                 <DisclosureComponent
                   openDisc={
                     getFilterEdge.length !== 0 || search.length !== 0
@@ -307,7 +322,9 @@ export default function ExtraSidebar(): JSX.Element {
                             color={nodeColors[SBSectionName]}
                             itemName={SBItemName}
                             //convert error to boolean
-                          error={!!dataFilter[SBSectionName][SBItemName].error}
+                            error={
+                              !!dataFilter[SBSectionName][SBItemName].error
+                            }
                             display_name={
                               dataFilter[SBSectionName][SBItemName].display_name
                             }
@@ -322,6 +339,7 @@ export default function ExtraSidebar(): JSX.Element {
                       ))}
                   </div>
                 </DisclosureComponent>
+              </>
             ) : (
               <div key={index}></div>
             )