feature: update flowToolbar under feature flag

src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx

@@ -0,0 +1,92 @@
+import IconComponent from "@/components/common/genericIconComponent";
+import ShadTooltipComponent from "@/components/common/shadTooltipComponent";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import useFlowStore from "@/stores/flowStore";
+
+export default function DeployDropdown() {
+  const domain = window.location.origin;
+  const flowName = useFlowsManagerStore((state) => state.currentFlow?.name);
+  const hasIO = useFlowStore((state) => state.hasIO);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="default" className="font-medium">
+          Deploy
+          <IconComponent name="ChevronDown" className="icon-size font-medium" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        sideOffset={10}
+        alignOffset={-10}
+        align="end"
+        className="min-w-[300px] max-w-[400px]"
+      >
+        <ShadTooltipComponent
+          styleClasses="truncate"
+          side="left"
+          content={
+            hasIO
+              ? `${domain}/${flowName}`
+              : "Add a Chat Input or Chat Output to deploy the playground"
+          }
+        >
+          <DropdownMenuItem className="deploy-dropdown-item text-nowrap">
+            <div
+              className={`group ${!hasIO ? "!important cursor-not-allowed text-muted-foreground" : ""}`}
+            >
+              <IconComponent name="Globe" className="icon-size mr-2" />
+              <a
+                className={`max-w-[80%] truncate ${!hasIO ? "cursor-not-allowed" : ""}`}
+                href={`${domain}/${flowName}`}
+                target="_blank"
+                rel="noreferrer"
+                onClick={(event) => {
+                  if (!hasIO) {
+                    event.preventDefault();
+                  }
+                }}
+              >
+                {domain.replace(/^https?:\/\//, "")}/{flowName}
+              </a>
+              <div className="ml-auto w-[5%]">
+                <IconComponent
+                  name="ExternalLink"
+                  className="icon-size ml-auto opacity-0 group-hover:opacity-100"
+                />
+              </div>
+            </div>
+          </DropdownMenuItem>
+        </ShadTooltipComponent>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div>
+            <IconComponent name="Code2" className="icon-size mr-2" />
+            <span>API access</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div>
+            <IconComponent name="Columns2" className="icon-size mr-2" />
+            <span>Embed into site</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div className="group">
+            <IconComponent name="FileCode2" className="icon-size mr-2" />
+            <span>Langflow SDK</span>
+            <IconComponent
+              name="ExternalLink"
+              className="icon-size ml-auto hidden group-hover:block"
+            />
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx

@@ -0,0 +1,23 @@
+import useFlowStore from "@/stores/flowStore";
+import { useState } from "react";
+import DeployDropdown from "./deploy-dropdown";
+import PlaygroundButton from "./playground-button";
+
+export default function FlowToolbarOptions() {
+  const [open, setOpen] = useState<boolean>(false);
+  const hasIO = useFlowStore((state) => state.hasIO);
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
+        <PlaygroundButton
+          hasIO={hasIO}
+          open={open}
+          setOpen={setOpen}
+          canvasOpen
+        />
+      </div>
+      <DeployDropdown />
+    </div>
+  );
+}

src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx

@@ -1,13 +1,21 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { PLAYGROUND_BUTTON_NAME } from "@/constants/constants";
+import { ENABLE_PUBLISH } from "@/customization/feature-flags";
 import IOModal from "@/modals/IOModal/new-modal";
 
 const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => {
   const PlayIcon = () => (
-    <ForwardedIconComponent name="Play" className="h-4 w-4 transition-all" />
+    <ForwardedIconComponent
+      name="Play"
+      className="h-4 w-4 transition-all"
+      strokeWidth={ENABLE_PUBLISH ? 2 : 1.5}
+    />
   );
 
-  const ButtonLabel = () => <span className="hidden md:block">Playground</span>;
+  const ButtonLabel = () => (
+    <span className="hidden md:block">{PLAYGROUND_BUTTON_NAME}</span>
+  );
 
   const ActiveButton = () => (
     <div

src/frontend/src/components/core/flowToolbarComponent/index.tsx

@@ -3,6 +3,7 @@ import PlaygroundButton from "@/components/core/flowToolbarComponent/components/
 import {
   ENABLE_API,
   ENABLE_LANGFLOW_STORE,
+  ENABLE_PUBLISH,
 } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { Panel } from "@xyflow/react";
@@ -15,6 +16,7 @@ import { useShortcutsStore } from "../../../stores/shortcuts";
 import { useStoreStore } from "../../../stores/storeStore";
 import { classNames, isThereModal } from "../../../utils/utils";
 import ForwardedIconComponent from "../../common/genericIconComponent";
+import FlowToolbarOptions from "./components/flow-toolbar-options";
 
 export default function FlowToolbar(): JSX.Element {
   const preventDefault = true;
@@ -123,58 +125,62 @@ export default function FlowToolbar(): JSX.Element {
             "hover:shadow-round-btn-shadow flex items-center justify-center gap-7 rounded-md border bg-background p-1.5 shadow transition-all"
           }
         >
-          <div className="flex gap-1.5">
-            <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
-              <PlaygroundButton
-                hasIO={hasIO}
-                open={open}
-                setOpen={setOpen}
-                canvasOpen
-              />
-            </div>
-            {ENABLE_API && (
-              <>
-                <div
-                  className="flex cursor-pointer items-center gap-2"
-                  data-testid="api_button_modal"
-                  id="api_button_modal"
-                >
-                  {currentFlow && currentFlow.data && (
-                    <ApiModal
-                      flow={currentFlow}
-                      open={openCodeModal}
-                      setOpen={setOpenCodeModal}
-                    >
-                      <div
-                        className={classNames(
-                          "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
-                        )}
+          {ENABLE_PUBLISH ? (
+            <FlowToolbarOptions />
+          ) : (
+            <div className="flex gap-1.5">
+              <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
+                <PlaygroundButton
+                  hasIO={hasIO}
+                  open={open}
+                  setOpen={setOpen}
+                  canvasOpen
+                />
+              </div>
+              {ENABLE_API && (
+                <>
+                  <div
+                    className="flex cursor-pointer items-center gap-2"
+                    data-testid="api_button_modal"
+                    id="api_button_modal"
+                  >
+                    {currentFlow && currentFlow.data && (
+                      <ApiModal
+                        flow={currentFlow}
+                        open={openCodeModal}
+                        setOpen={setOpenCodeModal}
                       >
-                        <ForwardedIconComponent
-                          name="Code2"
-                          className={"h-4 w-4"}
-                        />
-                        <span className="hidden md:block">API</span>
-                      </div>
-                    </ApiModal>
-                  )}
-                </div>
-              </>
-            )}
-            {ENABLE_LANGFLOW_STORE && (
-              <div className="flex items-center gap-2">
-                <div
-                  className={`side-bar-button ${
-                    !hasApiKey || !validApiKey || !hasStore
-                      ? "cursor-not-allowed"
-                      : "cursor-pointer"
-                  }`}
-                >
-                  {ModalMemo}
+                        <div
+                          className={classNames(
+                            "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
+                          )}
+                        >
+                          <ForwardedIconComponent
+                            name="Code2"
+                            className={"h-4 w-4"}
+                          />
+                          <span className="hidden md:block">API</span>
+                        </div>
+                      </ApiModal>
+                    )}
+                  </div>
+                </>
+              )}
+              {ENABLE_LANGFLOW_STORE && (
+                <div className="flex items-center gap-2">
+                  <div
+                    className={`side-bar-button ${
+                      !hasApiKey || !validApiKey || !hasStore
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer"
+                    }`}
+                  >
+                    {ModalMemo}
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
+              )}
+            </div>
+          )}
         </div>
       </Panel>
     </>

src/frontend/src/constants/constants.ts

@@ -1,5 +1,6 @@
 // src/constants/constants.ts
 
+import { ENABLE_PUBLISH } from "@/customization/feature-flags";
 import custom from "../customization/config-constants";
 import { languageMap } from "../types/components";
 
@@ -1005,3 +1006,5 @@ export const ICON_STROKE_WIDTH = 1.5;
 export const DEFAULT_PLACEHOLDER = "Type something...";
 
 export const DEFAULT_TOOLSET_PLACEHOLDER = "Used as a tool";
+
+export const PLAYGROUND_BUTTON_NAME = ENABLE_PUBLISH ? "Test" : "Playground";

src/frontend/src/customization/feature-flags.ts

@@ -10,3 +10,4 @@ export const ENABLE_INTEGRATIONS = false;
 export const ENABLE_NEW_LOGO = true;
 export const ENABLE_DATASTAX_LANGFLOW = false;
 export const ENABLE_HOMEPAGE = true;
+export const ENABLE_PUBLISH = true;

src/frontend/src/style/applies.css

@@ -1294,6 +1294,14 @@
   align-items: center;
 }
 
+.deploy-dropdown-item {
+  @apply px-2.5 py-2 hover:bg-background cursor-pointer font-normal text-[14px] !important;
+}
+
+.deploy-dropdown-item > :first-child {
+  @apply flex items-center hover:bg-accent w-full px-2 py-1.5 rounded-md !important;
+}
+
 :root {
   --color-bg1: rgb(255, 255, 255);
   --color1: 255, 50, 118;

src/frontend/src/utils/styleUtils.ts

@@ -59,6 +59,7 @@ import {
   Code2,
   CodeXml,
   Cog,
+  Columns2,
   Combine,
   Command,
   Compass,
@@ -80,6 +81,7 @@ import {
   EyeOff,
   File,
   FileClock,
+  FileCode2,
   FileDown,
   FileQuestion,
   FileSearch,
@@ -953,6 +955,8 @@ export const nodeIconsLucide: iconsType = {
   ThumbDownIconCustom,
   ThumbUpIconCustom,
   Serper: SerperIcon,
+  FileCode2,
+  Columns2,
   ScrapeGraphAI: ScrapeGraph,
   ScrapeGraph: ScrapeGraph,
   ScrapeGraphSmartScraperApi: ScrapeGraph,