feat: app Header Update (#4189)

* feat: add new customization components

- Added CustomOrgSelector component
- Added CustomProfileIcon component
- Added CustomProductSelector component
- Added CustomHeaderMenuItemsTitle component
- Added CustomFeedbackDialog component

This commit adds new customization components to the codebase.

* [autofix.ci] apply automated fixes

* refactor: update AppHeader component styling

* refactor: update AppHeader component styling

* refactor: update HeaderMenu component styling

---------

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

src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx

@@ -0,0 +1,134 @@
+import { useLogout } from "@/controllers/API/queries/auth";
+import { CustomFeedbackDialog } from "@/customization/components/custom-feedback-dialog";
+import { CustomHeaderMenuItemsTitle } from "@/customization/components/custom-header-menu-items-title";
+import { CustomProfileIcon } from "@/customization/components/custom-profile-icon";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
+import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import useAuthStore from "@/stores/authStore";
+import { useDarkStore } from "@/stores/darkStore";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import GithubStarComponent from "../GithubStarButton";
+import {
+  HeaderMenu,
+  HeaderMenuItemButton,
+  HeaderMenuItemLink,
+  HeaderMenuItems,
+  HeaderMenuItemsSection,
+  HeaderMenuToggle,
+} from "../HeaderMenu";
+import { ProfileIcon } from "../ProfileIcon";
+import ThemeButtons from "../ThemeButtons";
+
+export const AccountMenu = () => {
+  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
+  const { customParam: id } = useParams();
+  const version = useDarkStore((state) => state.version);
+  const navigate = useCustomNavigate();
+  const { mutate: mutationLogout } = useLogout();
+
+  const { isAdmin, autoLogin } = useAuthStore((state) => ({
+    isAdmin: state.isAdmin,
+    autoLogin: state.autoLogin,
+  }));
+
+  const handleLogout = () => {
+    mutationLogout();
+  };
+
+  return (
+    <>
+      <HeaderMenu>
+        <HeaderMenuToggle>
+          <div
+            className="h-7 w-7 rounded-full focus-visible:outline-0"
+            data-testid="user-profile-settings"
+          >
+            {ENABLE_DATASTAX_LANGFLOW ? <CustomProfileIcon /> : <ProfileIcon />}
+          </div>
+        </HeaderMenuToggle>
+        <HeaderMenuItems position="right">
+          {ENABLE_DATASTAX_LANGFLOW && <CustomHeaderMenuItemsTitle />}
+          <HeaderMenuItemsSection>
+            <div className="flex h-[46px] w-full items-center justify-between pl-2">
+              <div className="text-sm text-zinc-500">Version {version}</div>
+              <ThemeButtons />
+            </div>
+            {ENABLE_DATASTAX_LANGFLOW ? (
+              <HeaderMenuItemLink newPage href={`/settings/org/${id}/overview`}>
+                Account Settings
+              </HeaderMenuItemLink>
+            ) : (
+              <HeaderMenuItemButton
+                onClick={() => {
+                  navigate("/settings");
+                }}
+              >
+                Settings
+              </HeaderMenuItemButton>
+            )}
+            {!ENABLE_DATASTAX_LANGFLOW && (
+              <>
+                {isAdmin && !autoLogin && (
+                  <HeaderMenuItemButton onClick={() => navigate("/admin")}>
+                    Admin Page
+                  </HeaderMenuItemButton>
+                )}
+              </>
+            )}
+            {ENABLE_DATASTAX_LANGFLOW ? (
+              <HeaderMenuItemButton onClick={() => setIsFeedbackOpen(true)}>
+                Feedback
+              </HeaderMenuItemButton>
+            ) : (
+              <HeaderMenuItemLink newPage href="https://docs.langflow.org">
+                Docs
+              </HeaderMenuItemLink>
+            )}
+          </HeaderMenuItemsSection>
+          <HeaderMenuItemsSection>
+            {ENABLE_DATASTAX_LANGFLOW ? (
+              <HeaderMenuItemLink
+                newPage
+                href="https://github.com/langflow-ai/langflow"
+              >
+                <div className="-my-2 mr-2 flex w-full items-center justify-between">
+                  <div className="text-sm">Star the repo</div>
+                  <GithubStarComponent />
+                </div>
+              </HeaderMenuItemLink>
+            ) : (
+              <HeaderMenuItemLink
+                newPage
+                href="https://github.com/langflow-ai/langflow/discussions"
+              >
+                Share Feedback on Github
+              </HeaderMenuItemLink>
+            )}
+            <HeaderMenuItemLink newPage href="https://twitter.com/langflow_ai">
+              Follow {ENABLE_DATASTAX_LANGFLOW ? "Langflow" : "us"} on X
+            </HeaderMenuItemLink>
+            <HeaderMenuItemLink newPage href="https://discord.gg/EqksyE2EX9">
+              Join our Discord
+            </HeaderMenuItemLink>
+          </HeaderMenuItemsSection>
+          <HeaderMenuItemsSection>
+            {ENABLE_DATASTAX_LANGFLOW ? (
+              <HeaderMenuItemLink href="/session/logout">
+                Logout
+              </HeaderMenuItemLink>
+            ) : (
+              <HeaderMenuItemButton onClick={handleLogout}>
+                Logout
+              </HeaderMenuItemButton>
+            )}
+          </HeaderMenuItemsSection>
+        </HeaderMenuItems>
+      </HeaderMenu>
+      <CustomFeedbackDialog
+        isOpen={isFeedbackOpen}
+        setIsOpen={setIsFeedbackOpen}
+      />
+    </>
+  );
+};

src/frontend/src/components/headerComponent/components/menuBar/index.tsx → src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx

@@ -1,33 +1,35 @@
-import { useState } from "react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "../../../ui/dropdown-menu";
+import { useMemo, useState } from "react";
 
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { customStringify } from "@/utils/reactflowUtils";
 import { useHotkeys } from "react-hotkeys-hook";
-import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
-import { SAVED_HOVER } from "../../../../constants/constants";
-import ExportModal from "../../../../modals/exportModal";
-import FlowLogsModal from "../../../../modals/flowLogsModal";
-import FlowSettingsModal from "../../../../modals/flowSettingsModal";
-import ToolbarSelectItem from "../../../../pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem";
-import useAlertStore from "../../../../stores/alertStore";
-import useFlowStore from "../../../../stores/flowStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { useShortcutsStore } from "../../../../stores/shortcuts";
-import { useTypesStore } from "../../../../stores/typesStore";
-import { cn } from "../../../../utils/utils";
-import IconComponent from "../../../genericIconComponent";
-import ShadTooltip from "../../../shadTooltipComponent";
-import { Button } from "../../../ui/button";
+
+import IconComponent from "@/components/genericIconComponent";
+import ShadTooltip from "@/components/shadTooltipComponent";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { UPLOAD_ERROR_ALERT } from "@/constants/alerts_constants";
+import { SAVED_HOVER } from "@/constants/constants";
+import { useGetFoldersQuery } from "@/controllers/API/queries/folders/use-get-folders";
+import ExportModal from "@/modals/exportModal";
+import FlowLogsModal from "@/modals/flowLogsModal";
+import FlowSettingsModal from "@/modals/flowSettingsModal";
+import ToolbarSelectItem from "@/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem";
+import useAlertStore from "@/stores/alertStore";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import useFlowStore from "@/stores/flowStore";
+import { useShortcutsStore } from "@/stores/shortcuts";
+import { useTypesStore } from "@/stores/typesStore";
+import { cn } from "@/utils/utils";
 
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
@@ -51,6 +53,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const onFlowPage = useFlowStore((state) => state.onFlowPage);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
   const stopBuilding = useFlowStore((state) => state.stopBuilding);
+  const { data: folders } = useGetFoldersQuery();
+
+  const currentFolder = useMemo(
+    () => folders?.find((f) => f.id === currentFlow?.folder_id),
+    [folders, currentFlow?.folder_id],
+  );
 
   const changesNotSaved =
     customStringify(currentFlow) !== customStringify(currentSavedFlow);
@@ -102,23 +110,37 @@ export const MenuBar = ({}: {}): JSX.Element => {
   return currentFlow && onFlowPage ? (
     <div className="flex items-center">
       <div className="header-menu-bar">
+        {currentFolder?.name && (
+          <>
+            <div
+              className="cursor-pointer whitespace-nowrap font-normal text-zinc-500 dark:text-zinc-400"
+              onClick={() => {
+                navigate("/");
+              }}
+            >
+              {currentFolder?.name}
+            </div>
+            <div className="px-2 font-normal text-zinc-500">/</div>
+          </>
+        )}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
-              asChild
-              variant="primary"
-              size="sm"
-              data-testid="flow-configuration-button"
-            >
-              <div className="header-menu-bar-display">
-                <div className="header-menu-flow-name" data-testid="flow_name">
+            <div className="header-menu-bar-display-2">
+              <div
+                className="header-menu-flow-name-2 flex"
+                data-testid="flow-configuration-button"
+              >
+                <div
+                  className="whitespace-nowrap font-semibold text-black dark:text-[white]"
+                  data-testid="flow_name"
+                >
                   {currentFlow.name}
                 </div>
-                <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
-            </Button>
+              <IconComponent name="ChevronDown" className="w-4 text-zinc-500" />
+            </div>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-44">
+          <DropdownMenuContent className="w-44 bg-white dark:bg-black">
             <DropdownMenuLabel>Options</DropdownMenuLabel>
             <DropdownMenuItem
               onClick={() => {
@@ -290,19 +312,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
           styleClasses="cursor-default"
         >
           <div className="ml-2 flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
-            <div className="flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
-              {(saveLoading || !changesNotSaved || isBuilding) && (
-                <IconComponent
-                  name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
-                  className={cn(
-                    "h-4 w-4",
-                    isBuilding || saveLoading
-                      ? "animate-spin"
-                      : "animate-wiggle",
-                  )}
-                />
-              )}
-
+            <div className="flex cursor-default items-center gap-2 text-sm text-zinc-500 transition-all">
               <div>{printByBuildStatus()}</div>
             </div>
             <button

src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx

@@ -0,0 +1,18 @@
+import { useDarkStore } from "@/stores/darkStore";
+import { FaGithub } from "react-icons/fa";
+
+export const GithubStarComponent = () => {
+  const stars = useDarkStore((state) => state.stars);
+
+  return (
+    <div className="header-github-link gap-1 bg-zinc-100 dark:bg-zinc-900 dark:hover:bg-zinc-900">
+      <FaGithub className="h-4 w-4 text-black dark:text-[white]" />
+      <div className="hidden text-black dark:text-[white] lg:block">Star</div>
+      <div className="header-github-display text-black dark:text-[white]">
+        {stars.toLocaleString() ?? 0}
+      </div>
+    </div>
+  );
+};
+
+export default GithubStarComponent;