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,6 +3,7 @@
 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 { NextSeo } from "next-seo";
@@ -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";
@@ -31,10 +34,16 @@ import { ManifestUpdate } from "./ManifestUpdate";
 export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) {
   const router = useRouter();
   const [activeTab, setActiveTab] = useState("LEASES");
+  const [editedManifest, setEditedManifest] = useState<string | null>(null);
+  const [deploymentVersion, setDeploymentVersion] = useState<string | null>(null);
+  const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
   const { address, isWalletLoaded } = useWallet();
   const { isSettingsInit } = useSettings();
   const [leaseRefs, setLeaseRefs] = useState<Array<any>>([]);
   const [deploymentManifest, setDeploymentManifest] = useState<string | null>(null);
+  const remoteDeploy: boolean = editedManifest && isRedeployImage(editedManifest) ? true : false;
+  const repo: string | null = remoteDeploy ? getRepoUrl(editedManifest) : null;
+
   const {
     data: deployment,
     isFetching: isLoadingDeployment,
@@ -95,6 +104,25 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isWalletLoaded, isSettingsInit]);
 
+  useEffect(() => {
+    const init = async () => {
+      const localDeploymentData = getDeploymentLocalData(deployment?.dseq || "");
+
+      if (localDeploymentData && localDeploymentData.manifest) {
+        setShowOutsideDeploymentMessage(false);
+        setEditedManifest(localDeploymentData?.manifest);
+        const yamlVersion = yaml.load(localDeploymentData?.manifest);
+        const version = await deploymentData.getManifestVersion(yamlVersion);
+
+        setDeploymentVersion(version);
+      } else {
+        setShowOutsideDeploymentMessage(true);
+      }
+    };
+
+    init();
+  }, [deployment]);
+
   useEffect(() => {
     if (leases && leases.some(l => l.state === "active")) {
       if (tabQuery) {
@@ -173,6 +201,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 +234,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 +243,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                       dseq={dseq}
                       providers={providers || []}
                       loadDeploymentDetail={loadDeploymentDetail}
+                      remoteDeploy={remoteDeploy}
                     />
                   ))}