From e5df14875b561087c87472b76f20598d560f5093 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 7 Apr 2025 14:09:02 -0300
Subject: [PATCH] feat: put Shareable Playground under ENABLE_PUBLISH feature
 flag and removed old publish (#7482)

* Removed old toolbar

* Add enable_publish check before showing Shareable Playground

* Removed enable_publish condition on play button

* Removed enable_publish condition on playground title

* Removed unused import
---
 .../components/deploy-dropdown.tsx            | 107 +++++++++---------
 .../components/playground-button.tsx          |   3 +-
 .../core/flowToolbarComponent/index.tsx       |  67 +----------
 .../chatView/chatMessage/chat-message.tsx     |   5 +-
 src/frontend/src/modals/IOModal/new-modal.tsx |   3 +-
 5 files changed, 60 insertions(+), 125 deletions(-)

diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
index 21608d396..cdbaa5180 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
@@ -10,7 +10,7 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
 import { CustomLink } from "@/customization/components/custom-link";
-import { ENABLE_WIDGET } from "@/customization/feature-flags";
+import { ENABLE_PUBLISH, ENABLE_WIDGET } from "@/customization/feature-flags";
 import ApiModal from "@/modals/apiModal/new-api-modal";
 import EmbedModal from "@/modals/EmbedModal/embed-modal";
 import useAlertStore from "@/stores/alertStore";
@@ -130,63 +130,66 @@ export default function PublishDropdown() {
               </div>
             </DropdownMenuItem>
           )}
-          <ShadTooltipComponent
-            styleClasses="truncate"
-            side="left"
-            content={
-              hasIO
-                ? isPublished
-                  ? encodeURI(`${domain}/playground/${flowId}`)
-                  : "Activate to share a public version of this Playground"
-                : "Add a Chat Input or Chat Output to access your flow"
-            }
-          >
-            <div
-              className={cn(
-                !hasIO ? "cursor-not-allowed" : "",
-                "flex items-center",
-              )}
-              data-testid="shareable-playground"
+
+          {ENABLE_PUBLISH && (
+            <ShadTooltipComponent
+              styleClasses="truncate"
+              side="left"
+              content={
+                hasIO
+                  ? isPublished
+                    ? encodeURI(`${domain}/playground/${flowId}`)
+                    : "Activate to share a public version of this Playground"
+                  : "Add a Chat Input or Chat Output to access your flow"
+              }
             >
-              <CustomLink
+              <div
                 className={cn(
-                  "flex-1",
-                  !hasIO || !isPublished
-                    ? "pointer-events-none cursor-default"
-                    : "",
+                  !hasIO ? "cursor-not-allowed" : "",
+                  "flex items-center",
                 )}
-                to={`/playground/${flowId}`}
-                target="_blank"
+                data-testid="shareable-playground"
               >
-                <DropdownMenuItem
-                  disabled={!hasIO || !isPublished}
-                  className="deploy-dropdown-item group flex-1"
-                  onClick={() => {}}
+                <CustomLink
+                  className={cn(
+                    "flex-1",
+                    !hasIO || !isPublished
+                      ? "pointer-events-none cursor-default"
+                      : "",
+                  )}
+                  to={`/playground/${flowId}`}
+                  target="_blank"
                 >
-                  <div className="group-hover:bg-accent">
-                    <IconComponent
-                      name="Globe"
-                      className={`${groupStyle} icon-size mr-2`}
-                    />
-                    <span>Shareable Playground</span>
-                  </div>
-                </DropdownMenuItem>
-              </CustomLink>
-              <div className={`z-50 mr-2 text-foreground`}>
-                <Switch
-                  data-testid="publish-switch"
-                  className="scale-[85%]"
-                  checked={isPublished}
-                  disabled={!hasIO}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handlePublishedSwitch(isPublished);
-                  }}
-                />
+                  <DropdownMenuItem
+                    disabled={!hasIO || !isPublished}
+                    className="deploy-dropdown-item group flex-1"
+                    onClick={() => {}}
+                  >
+                    <div className="group-hover:bg-accent">
+                      <IconComponent
+                        name="Globe"
+                        className={`${groupStyle} icon-size mr-2`}
+                      />
+                      <span>Shareable Playground</span>
+                    </div>
+                  </DropdownMenuItem>
+                </CustomLink>
+                <div className={`z-50 mr-2 text-foreground`}>
+                  <Switch
+                    data-testid="publish-switch"
+                    className="scale-[85%]"
+                    checked={isPublished}
+                    disabled={!hasIO}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handlePublishedSwitch(isPublished);
+                    }}
+                  />
+                </div>
               </div>
-            </div>
-          </ShadTooltipComponent>
+            </ShadTooltipComponent>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
       <ApiModal open={openApiModal} setOpen={setOpenApiModal}>
diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx
index 13b63f784..16424b5c3 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx
@@ -1,7 +1,6 @@
 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 }) => {
@@ -9,7 +8,7 @@ const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => {
     <ForwardedIconComponent
       name="Play"
       className="h-4 w-4 transition-all"
-      strokeWidth={ENABLE_PUBLISH ? 2 : 1.5}
+      strokeWidth={2}
     />
   );
 
diff --git a/src/frontend/src/components/core/flowToolbarComponent/index.tsx b/src/frontend/src/components/core/flowToolbarComponent/index.tsx
index 5d47f5f54..4a74f5e6e 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/index.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/index.tsx
@@ -1,15 +1,8 @@
 import ShadTooltip from "@/components/common/shadTooltipComponent";
-import PlaygroundButton from "@/components/core/flowToolbarComponent/components/playground-button";
-import {
-  ENABLE_API,
-  ENABLE_LANGFLOW_STORE,
-  ENABLE_PUBLISH,
-} from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { Panel } from "@xyflow/react";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import ApiModal from "../../../modals/apiModal";
 import ShareModal from "../../../modals/shareModal";
 import useFlowStore from "../../../stores/flowStore";
 import { useShortcutsStore } from "../../../stores/shortcuts";
@@ -122,66 +115,10 @@ export default function FlowToolbar(): JSX.Element {
       <Panel className="!m-2" position="top-right">
         <div
           className={cn(
-            "hover:shadow-round-btn-shadow flex items-center justify-center gap-7 rounded-md border bg-background px-1.5 shadow transition-all",
-            ENABLE_PUBLISH ? "h-11" : "",
+            "hover:shadow-round-btn-shadow flex h-11 items-center justify-center gap-7 rounded-md border bg-background px-1.5 shadow transition-all",
           )}
         >
-          {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}
-                      >
-                        <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>
-          )}
+          <FlowToolbarOptions />
         </div>
       </Panel>
     </>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
index 1021f43e0..30a00dad6 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
@@ -2,10 +2,7 @@ import { ProfileIcon } from "@/components/core/appHeaderComponent/components/Pro
 import { ContentBlockDisplay } from "@/components/core/chatComponents/ContentBlockDisplay";
 import { useUpdateMessage } from "@/controllers/API/queries/messages";
 import { CustomProfileIcon } from "@/customization/components/custom-profile-icon";
-import {
-  ENABLE_DATASTAX_LANGFLOW,
-  ENABLE_PUBLISH,
-} from "@/customization/feature-flags";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import useFlowStore from "@/stores/flowStore";
 import { useUtilityStore } from "@/stores/utilityStore";
diff --git a/src/frontend/src/modals/IOModal/new-modal.tsx b/src/frontend/src/modals/IOModal/new-modal.tsx
index 08e72223c..462a2c470 100644
--- a/src/frontend/src/modals/IOModal/new-modal.tsx
+++ b/src/frontend/src/modals/IOModal/new-modal.tsx
@@ -75,8 +75,7 @@ export default function IOModal({
     currentFlowId,
   );
   const flowName = useFlowStore((state) => state.currentFlow?.name);
-  const PlaygroundTitle =
-    playgroundPage && ENABLE_PUBLISH && flowName ? flowName : "Playground";
+  const PlaygroundTitle = playgroundPage && flowName ? flowName : "Playground";
 
   useEffect(() => {
     setIOModalOpen(open);