feature: Enable Deployment from Git Repositories to Akash Network

apps/deploy-web/next.config.js

@@ -30,7 +30,7 @@ const moduleExports = {
     styledComponents: true
   },
   images: {
-    domains: ["raw.githubusercontent.com"]
+    domains: ["raw.githubusercontent.com", "avatars.githubusercontent.com"]
   },
   output: "standalone",
   typescript: {

apps/deploy-web/src/components/deployments/DeploymentDetail.tsx

@@ -3,8 +3,9 @@
 import { createRef, useEffect, useState } from "react";
 import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } from "@akashnetwork/ui/components";
 import { ArrowLeft } from "iconoir-react";
+import yaml from "js-yaml";
 import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { NextSeo } from "next-seo";
 import { event } from "nextjs-google-analytics";
 
@@ -16,10 +17,12 @@ import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import { RouteStep } from "@src/types/route-steps.type";
 import { AnalyticsEvents } from "@src/utils/analytics";
+import { deploymentData } from "@src/utils/deploymentData";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
 import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
+import { getRepoUrl, isRedeployImage } from "../remote-deploy/utils";
 import { Title } from "../shared/Title";
 import { DeploymentDetailTopBar } from "./DeploymentDetailTopBar";
 import { DeploymentLeaseShell } from "./DeploymentLeaseShell";
@@ -28,7 +31,10 @@ import { DeploymentSubHeader } from "./DeploymentSubHeader";
 import { LeaseRow } from "./LeaseRow";
 import { ManifestUpdate } from "./ManifestUpdate";
 
-export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) {
+export function DeploymentDetail() {
+  const dseq = (useParams()?.dseq as string) ?? "";
+  console.log(dseq);
+
   const router = useRouter();
   const [activeTab, setActiveTab] = useState("LEASES");
   const { address, isWalletLoaded } = useWallet();
@@ -130,6 +136,41 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       label: `Navigate tab ${value} in deployment detail`
     });
   };
+  const [remoteDeploy, setRemoteDeploy] = useState<boolean>(false);
+  const [repo, setRepo] = useState<string | null>(null);
+  const [editedManifest, setEditedManifest] = useState<string | null>(null);
+  const [deploymentVersion, setDeploymentVersion] = useState<string | null>(null);
+  const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
+
+  useEffect(() => {
+    const init = async () => {
+      const localDeploymentData = getDeploymentLocalData(deployment?.dseq || "");
+      console.log("localDeploymentData", !!localDeploymentData && !!localDeploymentData?.manifest);
+
+      if (localDeploymentData && localDeploymentData.manifest) {
+        setShowOutsideDeploymentMessage(false);
+        setEditedManifest(localDeploymentData?.manifest);
+        const yamlVersion = yaml.load(localDeploymentData?.manifest);
+        const version = await deploymentData.getManifestVersion(yamlVersion);
+
+        setDeploymentVersion(version);
+      } else {
+        console.log("klsj");
+
+        setShowOutsideDeploymentMessage(true);
+      }
+    };
+
+    init();
+  }, [deployment]);
+
+  useEffect(() => {
+    if (editedManifest && isRedeployImage(editedManifest)) {
+      setRepo(getRepoUrl(editedManifest));
+
+      setRemoteDeploy(true);
+    }
+  }, [editedManifest]);
 
   return (
     <Layout isLoading={isLoadingLeases || isLoadingDeployment || isLoadingProviders} isUsingSettings isUsingWallet containerClassName="pb-0">
@@ -173,6 +214,13 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
 
             {activeTab === "EDIT" && deployment && leases && (
               <ManifestUpdate
+                editedManifest={editedManifest as string}
+                deploymentVersion={deploymentVersion}
+                setEditedManifest={setEditedManifest}
+                setDeploymentVersion={setDeploymentVersion}
+                setShowOutsideDeploymentMessage={setShowOutsideDeploymentMessage}
+                showOutsideDeploymentMessage={showOutsideDeploymentMessage}
+                remoteDeploy={remoteDeploy}
                 deployment={deployment}
                 leases={leases}
                 closeManifestEditor={() => {
@@ -199,6 +247,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                 {leases &&
                   leases.map((lease, i) => (
                     <LeaseRow
+                      repo={repo}
                       key={lease.id}
                       lease={lease}
                       setActiveTab={setActiveTab}
@@ -207,6 +256,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                       dseq={dseq}
                       providers={providers || []}
                       loadDeploymentDetail={loadDeploymentDetail}
+                      remoteDeploy={remoteDeploy}
                     />
                   ))}