change deploy button

yext · Sep 25, 2023 · 191447e · 191447e
1 parent 02da8c2
commit 191447e
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/packages/studio/src/components/DeployButton.tsx b/packages/studio/src/components/DeployButton.tsx
@@ -1,20 +1,24 @@
 import useStudioStore from "../store/useStudioStore";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useMemo } from "react";
 import gitData from "virtual_yext-studio-git-data";
 import useHasChanges from "../hooks/useHasChanges";
 import { Tooltip } from "react-tooltip";
 
-const canPush = gitData.canPush.status;
+const canPush = gitData.canPush.status
 const tooltipAnchorID = "YextStudio-deployButton";
 
 /**
  * Renders a button for saving, committing, and pushing changes.
  */
 export default function DeployButton() {
-  const deploy = useStudioStore((store) => store.actions.deploy);
+
+  const [deploy] = useStudioStore((store) => [
+    store.actions.deploy,
+    // store.studioGitData.canPush.status
+  ]);
   const [deployInProgress, setDeployInProgress] = useState(false);
   const hasChanges = useHasChanges();
-
+  // const isDisabled = useMemo(() => deployInProgress || (!hasChanges && !canPush), [canPush, deployInProgress, hasChanges]);
   const handleClick = useCallback(() => {
     setDeployInProgress(true);
     void deploy();
@@ -42,20 +46,23 @@ export default function DeployButton() {
   const isDisabled = deployInProgress || (!hasChanges && !canPush);
 
   return (
-    <button
-      className="ml-4 py-1 px-3 text-white rounded-md disabled:bg-gray-400 bg-blue-600 hover:bg-blue-500"
-      onClick={handleClick}
-      disabled={isDisabled}
-      aria-label="Deploy Changes to Repository"
-    >
-      <span id={tooltipAnchorID}>Deploy</span>
-      {isDisabled && gitData.canPush.reason && (
-        <Tooltip
-          className="z-20"
-          anchorId={tooltipAnchorID}
-          content={gitData.canPush.reason}
-        />
-      )}
-    </button>
+    <div className="flex flex-col">
+      <button
+        className="ml-4 py-1 px-3 text-white rounded-md disabled:bg-gray-400 bg-blue-600 hover:bg-blue-500"
+        onClick={handleClick}
+        disabled={isDisabled}
+        aria-label="Deploy Changes to Repository"
+      >
+        <span id={tooltipAnchorID}>Deploy</span>
+          <Tooltip
+            className="z-20"
+            anchorId={tooltipAnchorID}
+            content={gitData.canPush.reason}
+          />
+      </button>
+      <span>GitData: {JSON.stringify(gitData)}</span>
+      <span>HasChanges: {String(hasChanges)}</span>
+      <span>Deploy in progress: {String(deployInProgress)}</span>
+    </div>
   );
 }