feat: add integrations category in the sidebar (#3843)

* feat: Add skipFallback parameter to ForwardedIconComponent

This commit adds a new skipFallback parameter to the ForwardedIconComponent in the genericIconComponent module. The skipFallback parameter allows developers to skip rendering the fallback component when using Suspense. This can be useful in cases where the fallback component is not needed or should be handled differently.

* feat: Add skipFallback parameter to IconComponentProps

* feat: Add skipFallback parameter to IconComponentProps and ForwardedIconComponent

This commit adds the skipFallback parameter to the IconComponentProps and ForwardedIconComponent. This parameter allows skipping the fallback icon rendering when the specified icon is not found. The skipFallback parameter is used in the ParentDisclosureComponent to conditionally render the chevron-down or chevron-right icon based on the component's state.

The commit also updates the defaultOpen value in the ParentDisclosureComponent in the ExtraSidebarComponent. The defaultOpen value is set to true, ensuring that the "Integrations" section is always expanded when the component is rendered.

* refactor: Update ExtraSidebarComponent layout and styling

* [autofix.ci] apply automated fixes

* move file

* move file

* move file

* move file

* move file

* Update NotionLogo size

* Update size of AssemblyAI logo

* Update colors and names for AssemblyAI in styleUtils.ts

* Update BUNDLES_SIDEBAR_FOLDER_NAMES in constants.ts

* [autofix.ci] apply automated fixes

* add changes from pr #3934

* chore: add cache.db to .gitignore

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/backend/base/pyproject.toml

@@ -125,7 +125,6 @@ pytest-flakefinder = "^1.1.0"
 types-markdown = "^3.7.0.20240822"
 assemblyai = "^0.33.0"
 
-
 [tool.pytest.ini_options]
 minversion = "6.0"
 #addopts = "-ra"

src/frontend/src/components/genericIconComponent/index.tsx

@@ -17,6 +17,7 @@ export const ForwardedIconComponent = memo(
         stroke,
         strokeWidth,
         id = "",
+        skipFallback = false,
       }: IconComponentProps,
       ref,
     ) => {
@@ -56,7 +57,7 @@ export const ForwardedIconComponent = memo(
       );
 
       return (
-        <Suspense fallback={fallback}>
+        <Suspense fallback={skipFallback ? undefined : fallback}>
           <TargetIcon
             className={className}
             style={style}

src/frontend/src/constants/constants.ts

@@ -729,7 +729,12 @@ export const PRIORITY_SIDEBAR_ORDER = [
   "embeddings",
 ];
 
-export const BUNDLES_SIDEBAR_FOLDER_NAMES = ["notion", "Notion"];
+export const BUNDLES_SIDEBAR_FOLDER_NAMES = [
+  "notion",
+  "Notion",
+  "AssemblyAI",
+  "assemblyai",
+];
 
 export const AUTHORIZED_DUPLICATE_REQUESTS = [
   "/health",

src/frontend/src/icons/AssemblyAI/AssemblyAI.jsx

@@ -1,7 +1,7 @@
 const AssemblyAISVG = (props) => (
   <svg
-    width="501"
-    height="434"
+    width="1.1em"
+    height="1.1em"
     viewBox="0 0 501 434"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/frontend/src/icons/Notion/NotionLogo.jsx

@@ -1,8 +1,8 @@
 const SvgNotionLogo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
+    width="1.1em"
+    height="1.1em"
     fill="none"
     viewBox="0 0 100 100"
     {...props}

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

@@ -33,7 +33,8 @@ export default function ParentDisclosureComponent({
                 ))}
                 <div>
                   <IconComponent
-                    name="ChevronsUpDownIcon"
+                    skipFallback
+                    name={open ? "chevron-down" : "chevron-right"}
                     className={`${
                       open || defaultOpen ? "" : ""
                     } h-4 w-4 text-foreground`}

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

@@ -245,6 +245,35 @@ export default function ExtraSidebar(): JSX.Element {
               <div key={index}></div>
             ),
           )}
+        <>
+          <ParentDisclosureComponent
+            defaultOpen={true}
+            key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}
+            button={{
+              title: "Integrations",
+              Icon: nodeIconsLucide.unknown,
+            }}
+            testId="bundle-extended-disclosure"
+          >
+            {Object.keys(dataFilter)
+              .sort(sortKeys)
+              .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
+              .map((SBSectionName: keyof APIObjectType, index) =>
+                Object.keys(dataFilter[SBSectionName]).length > 0 ? (
+                  <SidebarCategoryComponent
+                    key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
+                    search={search}
+                    getFilterEdge={getFilterEdge}
+                    category={dataFilter[SBSectionName]}
+                    name={SBSectionName}
+                    onDragStart={onDragStart}
+                  />
+                ) : (
+                  <div key={index}></div>
+                ),
+              )}
+          </ParentDisclosureComponent>
+        </>
         <ParentDisclosureComponent
           defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
           key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Advanced`}
@@ -306,39 +335,6 @@ export default function ExtraSidebar(): JSX.Element {
             </a>
           )}
         </ParentDisclosureComponent>
-        {ENABLE_MVPS && (
-          <>
-            <Separator />
-
-            <ParentDisclosureComponent
-              defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
-              key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}
-              button={{
-                title: "Bundles",
-                Icon: nodeIconsLucide.unknown,
-              }}
-              testId="bundle-extended-disclosure"
-            >
-              {Object.keys(dataFilter)
-                .sort(sortKeys)
-                .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
-                .map((SBSectionName: keyof APIObjectType, index) =>
-                  Object.keys(dataFilter[SBSectionName]).length > 0 ? (
-                    <SidebarCategoryComponent
-                      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
-                      search={search}
-                      getFilterEdge={getFilterEdge}
-                      category={dataFilter[SBSectionName]}
-                      name={SBSectionName}
-                      onDragStart={onDragStart}
-                    />
-                  ) : (
-                    <div key={index}></div>
-                  ),
-                )}
-            </ParentDisclosureComponent>
-          </>
-        )}
       </div>
     </div>
   );

src/frontend/src/style/applies.css

@@ -231,7 +231,7 @@
     @apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;
   }
   .parent-disclosure-arrangement {
-    @apply flex w-full select-none items-center justify-between bg-background px-5 py-3;
+    @apply flex w-full select-none items-center justify-between bg-background pl-5 pr-3 py-3;
   }
   .components-disclosure-arrangement {
     @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;

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

@@ -369,6 +369,7 @@ export type IconComponentProps = {
   stroke?: string;
   strokeWidth?: number;
   id?: string;
+  skipFallback?: boolean;
 };
 
 export type InputProps = {

src/frontend/src/utils/styleUtils.ts

@@ -297,6 +297,8 @@ export const nodeColors: { [char: string]: string } = {
   wrappers: "#E6277A",
   notion: "#000000",
   Notion: "#000000",
+  AssemblyAI: "#213ED7",
+  assemblyai: "#213ED7",
   helpers: "#31A3CC",
   prototypes: "#E6277A",
   astra_assistants: "#272541",
@@ -325,6 +327,8 @@ export const nodeNames: { [char: string]: string } = {
   models: "Models",
   notion: "Notion",
   Notion: "Notion",
+  AssemblyAI: "AssemblyAI",
+  assemblyai: "AssemblyAI",
   model_specs: "Model Specs",
   chains: "Chains",
   agents: "Agents",
@@ -391,6 +395,7 @@ export const nodeIconsLucide: iconsType = {
   Amazon: AWSIcon,
   Anthropic: AnthropicIcon,
   ChatAnthropic: AnthropicIcon,
+  assemblyai: AssemblyAIIcon,
   AssemblyAI: AssemblyAIIcon,
   AstraDB: AstraDBIcon,
   BingSearchAPIWrapper: BingIcon,