fix: small issue with effect in builder (keephq#172)

keep-ui/app/builder/builder-card.tsx

@@ -1,7 +1,7 @@
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import { Card, Callout } from "@tremor/react";
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { getApiURL } from "../../utils/apiUrl";
 import Loader from "./loader";
@@ -36,10 +36,12 @@ export function BuilderCard({
     fetcher(url, accessToken)
   );
 
-  if (data && !providers) {
-    setProviders(data.providers);
-    enableButtons();
-  }
+  useEffect(() => {
+    if (data && !providers) {
+      setProviders(data.providers);
+      enableButtons();
+    }
+  }, [data, providers, enableButtons]);
 
   return (
     <Card

keep-ui/app/builder/page.client.tsx

@@ -6,6 +6,7 @@ import {
   PlusIcon,
   ArrowDownOnSquareIcon,
   BoltIcon,
+  ArrowUpOnSquareIcon,
 } from "@heroicons/react/20/solid";
 import { useSession } from "../../utils/customAuth";
 import { BuilderCard } from "./builder-card";
@@ -41,7 +42,12 @@ export default function PageClient() {
     };
     reader.readAsText(file);
   }
-  if (status === "loading") return <div><Loading/></div>;
+  if (status === "loading")
+    return (
+      <div>
+        <Loading />
+      </div>
+    );
   if (status === "unauthenticated") return <div>Unauthenticated...</div>;
 
   return (
@@ -63,6 +69,16 @@ export default function PageClient() {
           >
             New
           </Button>
+          <Button
+            color="orange"
+            size="md"
+            className="mr-2"
+            variant="secondary"
+            icon={ArrowUpOnSquareIcon}
+            disabled={true}
+          >
+            Save 👷‍♀️
+          </Button>
           <Button
             color="orange"
             size="md"

keep-ui/app/builder/page.css

@@ -19,3 +19,9 @@
 .sqd-toolbox-item-text {
   text-transform: capitalize;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}

keep-ui/package.json

@@ -17,7 +17,7 @@
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
     "@svgr/webpack": "^8.0.1",
-    "@tremor/react": "^2.7.0",
+    "@tremor/react": "^2.11.0",
     "acorn": "^8.8.2",
     "acorn-jsx": "^5.3.2",
     "add": "^2.0.6",