Fixed Upload Flows not showing up when folder is empty

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -4,7 +4,9 @@ import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import CollectionCardComponent from "../../../../components/cardComponent";
 import CardsWrapComponent from "../../../../components/cardsWrapComponent";
-import IconComponent from "../../../../components/genericIconComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../../components/genericIconComponent";
 import PaginatorComponent from "../../../../components/paginatorComponent";
 import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
@@ -267,16 +269,29 @@ export default function ComponentsComponent({
 
   return (
     <>
-      {allFlows?.length > 0 && (
+      <div className="flex w-full gap-4 pb-5">
-        <HeaderComponent
+        <Button
-          handleDelete={() => handleSelectOptionsChange("delete")}
+          variant="outline"
-          handleSelectAll={handleSelectAll}
+          size="sm"
-          handleDuplicate={() => handleSelectOptionsChange("duplicate")}
+          onClick={handleImport}
-          handleExport={() => handleSelectOptionsChange("export")}
+          className="flex-shrink-0 text-sm"
-          handleImport={() => handleImport()}
+        >
-          disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
+          <ForwardedIconComponent
-        />
+            name="FileUp"
-      )}
+            className="h-5 w-5 text-primary"
+          />
+          Upload Flow
+        </Button>
+        {allFlows?.length > 0 && (
+          <HeaderComponent
+            handleDelete={() => handleSelectOptionsChange("delete")}
+            handleSelectAll={handleSelectAll}
+            handleDuplicate={() => handleSelectOptionsChange("duplicate")}
+            handleExport={() => handleSelectOptionsChange("export")}
+            disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
+          />
+        )}
+      </div>
 
       <CardsWrapComponent
         onFileDrop={handleFileDrop}

src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx

@@ -13,7 +13,7 @@ const EmptyComponent = ({}: EmptyComponentProps) => {
 
   return (
     <>
-      <div className="mt-6 flex w-full items-center justify-center text-center">
+      <div className="mt-2 flex w-full items-center justify-center text-center">
         <div className="flex-max-width h-full flex-col">
           <div className="align-center flex w-full justify-center gap-1 ">
             <span className="text-muted-foreground">

src/frontend/src/pages/MainPage/components/headerComponent/index.tsx

@@ -12,7 +12,6 @@ type HeaderComponentProps = {
   handleDelete: () => void;
   handleDuplicate: () => void;
   handleExport: () => void;
-  handleImport: () => void;
   disableFunctions: boolean;
 };
 
@@ -21,7 +20,6 @@ const HeaderComponent = ({
   handleDelete,
   handleDuplicate,
   handleExport,
-  handleImport,
   disableFunctions,
 }: HeaderComponentProps) => {
   const [shouldSelectAll, setShouldSelectAll] = useState(true);
@@ -33,20 +31,8 @@ const HeaderComponent = ({
 
   return (
     <>
-      <div className="grid grid-cols-3 pb-5">
+      <div className="grid w-full grid-cols-3">
-        <div className="flex items-center gap-4 justify-self-start">
+        <div className="flex items-center justify-self-start">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleImport}
-            className="text-sm"
-          >
-            <ForwardedIconComponent
-              name="FileUp"
-              className="h-5 w-5 text-primary"
-            />
-            Upload Flow
-          </Button>
           <Button
             variant="none"
             size="none"