Merge pull request #7 from dharamveergit/main

fix: update deployment for remote deploy

apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx

@@ -20,7 +20,7 @@ import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut, User } fro
 import { useAtom } from "jotai";
 import { ChevronDown } from "lucide-react";
 
-import { useWhen } from "@src/hooks/useWhen";
+import { useWhenNot } from "@src/hooks/useWhenNot";
 import remoteDeployStore from "@src/store/remoteDeployStore";
 import { ServiceType } from "@src/types";
 import { handleLogin, handleReLogin, useFetchAccessToken, useUserProfile } from "./api/api";
@@ -66,11 +66,13 @@ const GithubDeploy = ({
     setOpen(true);
   }, []);
 
-  useWhen(
+  useWhenNot(
     services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")),
     () => {
       setIsRepoDataValidated?.(true);
-    }
+    },
+    [],
+    () => setIsRepoDataValidated?.(false)
   );
 
   useEffect(() => {
@@ -246,7 +248,7 @@ const AccountDropDown = ({ userProfile, userProfileBit, userProfileGitLab }) =>
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Button variant={"text"} className="flex h-auto items-center gap-2 py-1.5">
+        <Button variant={"outline"} className="flex h-auto items-center gap-5 bg-popover py-1">
           <div className="flex items-center gap-2">
             <Avatar className="size-8">
               <AvatarImage src={userProfile?.avatar_url || userProfileBit?.avatar_url || userProfileGitLab?.avatar_url} />
@@ -256,7 +258,7 @@ const AccountDropDown = ({ userProfile, userProfileBit, userProfileGitLab }) =>
             </Avatar>
             <p className="hidden md:block">{userProfile?.login || userProfileBit?.username || userProfileGitLab?.name}</p>
           </div>
-          <ChevronDown />
+          <ChevronDown size={16} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>

apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx

@@ -60,7 +60,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin
       }
     }
   };
-  return github.content.includes(services?.[0]?.image) ? (
+  return github.content.includes(services?.[0]?.image) && services?.[0]?.env && services?.[0]?.env?.length > 0 ? (
     <div className="flex flex-col gap-6 rounded border bg-card px-4 py-6 md:px-6">
       <div className="flex flex-col gap-3 rounded border bg-card px-6 py-6 text-card-foreground">
         <div className="flex items-center justify-between gap-5">
@@ -82,7 +82,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin
         </div>
         <p className="text-sm text-muted-foreground">If checked, Console will automatically re-deploy your app on any code commits</p>
       </div>
-      {services[0]?.env?.length && (
+      {services[0]?.env?.length ? (
         <>
           <EnvVarList currentService={services[0]} setIsEditingEnv={setIsEditingEnv} />
           {isEditingEnv && (
@@ -97,7 +97,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin
             />
           )}
         </>
-      )}
+      ) : null}
 
       {token.access_token && services[0]?.env?.find(e => e.key === "REPO_URL")?.value?.includes(token.type) && (
         <>

apps/deploy-web/src/hooks/useWhenNot.ts

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+
+export function useWhenNot<T>(condition: T, run: () => void, deps: unknown[] = [], ifNot: () => void): void {
+  return useEffect(() => {
+    if (condition) {
+      run();
+    } else {
+      if (ifNot) ifNot();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [condition, ...deps]);
+}