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/package.json

@@ -43,6 +43,7 @@
     "@nivo/core": "^0.87.0",
     "@nivo/line": "^0.87.0",
     "@nivo/pie": "^0.87.0",
+    "@octokit/openapi-types": "^22.2.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-spring/web": "^9.3.1",
@@ -58,6 +59,7 @@
     "clsx": "^2.0.0",
     "cosmjs-types": "^0.9.0",
     "date-fns": "^2.29.3",
+    "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "geist": "^1.3.0",
     "http-proxy": "^1.18.1",

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

@@ -8,12 +8,15 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { NextSeo } from "next-seo";
 import { event } from "nextjs-google-analytics";
 
+import { CI_CD_TEMPLATE_ID } from "@src/config/remote-deploy.config";
 import { useCertificate } from "@src/context/CertificateProvider";
 import { useSettings } from "@src/context/SettingsProvider";
+import { useTemplates } from "@src/context/TemplatesProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import { extractRepositoryUrl, isImageInYaml } from "@src/services/remote-deploy/remote-deployment-controller.service";
 import { RouteStep } from "@src/types/route-steps.type";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
@@ -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 { address, isWalletLoaded } = useWallet();
   const { isSettingsInit } = useSettings();
   const [leaseRefs, setLeaseRefs] = useState<Array<any>>([]);
   const [deploymentManifest, setDeploymentManifest] = useState<string | null>(null);
+  const { getTemplateById } = useTemplates();
+  const remoteDeployTemplate = getTemplateById(CI_CD_TEMPLATE_ID);
+  const isRemoteDeploy: boolean = !!editedManifest && !!isImageInYaml(editedManifest, remoteDeployTemplate?.deploy);
+  const repo: string | null = isRemoteDeploy ? extractRepositoryUrl(editedManifest) : null;
+
   const {
     data: deployment,
     isFetching: isLoadingDeployment,
@@ -45,7 +54,6 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       if (_deploymentDetail) {
         getLeases();
         getProviders();
-
         const deploymentData = getDeploymentLocalData(dseq);
         setDeploymentManifest(deploymentData?.manifest || "");
       }
@@ -84,6 +92,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
   const { isLocalCertMatching, localCert, isCreatingCert, createCertificate } = useCertificate();
   const { data: providers, isFetching: isLoadingProviders, refetch: getProviders } = useProviderList();
   const isActive = deployment?.state === "active" && leases?.some(x => x.state === "active");
+
   const searchParams = useSearchParams();
   const tabQuery = searchParams?.get("tab");
   const logsModeQuery = searchParams?.get("logsMode");
@@ -189,6 +198,9 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
 
             {activeTab === "EDIT" && deployment && leases && (
               <ManifestUpdate
+                editedManifest={editedManifest as string}
+                onManifestChange={setEditedManifest}
+                isRemoteDeploy={isRemoteDeploy}
                 deployment={deployment}
                 leases={leases}
                 closeManifestEditor={() => {
@@ -215,6 +227,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                 {leases &&
                   leases.map((lease, i) => (
                     <LeaseRow
+                      repo={repo}
                       key={lease.id}
                       index={i}
                       lease={lease}
@@ -224,6 +237,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                       dseq={dseq}
                       providers={providers || []}
                       loadDeploymentDetail={loadDeploymentDetail}
+                      isRemoteDeploy={isRemoteDeploy}
                     />
                   ))}
 

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

@@ -42,14 +42,16 @@ type Props = {
   dseq: string;
   providers: ApiProviderList[];
   loadDeploymentDetail: () => void;
+  isRemoteDeploy?: boolean;
+  repo?: string | null;
 };
 
 export type AcceptRefType = {
   getLeaseStatus: () => void;
 };
 
 export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
-  ({ index, lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail }, ref) => {
+  ({ index, lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail, isRemoteDeploy, repo }, ref) => {
     const provider = providers?.find(p => p.owner === lease?.provider);
     const { localCert } = useCertificate();
     const isLeaseActive = lease.state === "active";
@@ -356,6 +358,18 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
                     </div>
                   )}
 
+                  {isRemoteDeploy && repo && (
+                    <div className="mt-2">
+                      <LabelValueOld label="Deployed Repo:" />
+                      <ul className="mt-2 space-y-2">
+                        <li className="flex items-center">
+                          <Link href={repo} target="_blank" className="inline-flex items-center space-x-2 truncate text-sm">
+                            <span>{repo?.replace("https://github.com/", "")?.replace("https://gitlab.com/", "")}</span> <OpenInWindow className="text-xs" />
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                  )}
                   {service.uris?.length > 0 && (
                     <>
                       <div className="mt-2">

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

@@ -22,21 +22,31 @@ import { deploymentData } from "@src/utils/deploymentData";
 import { getDeploymentLocalData, saveDeploymentManifest } from "@src/utils/deploymentLocalDataUtils";
 import { sendManifestToProvider } from "@src/utils/deploymentUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
+import RemoteDeployUpdate from "../remote-deploy/update/RemoteDeployUpdate";
 import { ManifestErrorSnackbar } from "../shared/ManifestErrorSnackbar";
 import { Title } from "../shared/Title";
 
 type Props = {
   deployment: DeploymentDto;
   leases: LeaseDto[];
   closeManifestEditor: () => void;
+  isRemoteDeploy: boolean;
+  editedManifest: string;
+  onManifestChange: (value: string) => void;
 };
 
-export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, leases, closeManifestEditor }) => {
+export const ManifestUpdate: React.FunctionComponent<Props> = ({
+  deployment,
+  leases,
+  closeManifestEditor,
+  isRemoteDeploy,
+  editedManifest,
+  onManifestChange
+}) => {
   const [parsingError, setParsingError] = useState<string | null>(null);
   const [deploymentVersion, setDeploymentVersion] = useState<string | null>(null);
-  const [editedManifest, setEditedManifest] = useState("");
-  const [isSendingManifest, setIsSendingManifest] = useState(false);
   const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
+  const [isSendingManifest, setIsSendingManifest] = useState(false);
   const { settings } = useSettings();
   const { address, signAndBroadcastTx, isManaged: isManagedWallet } = useWallet();
   const { data: providers } = useProviderList();
@@ -48,7 +58,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
       const localDeploymentData = getDeploymentLocalData(deployment.dseq);
 
       if (localDeploymentData?.manifest) {
-        setEditedManifest(localDeploymentData.manifest);
+        onManifestChange(localDeploymentData.manifest);
 
         try {
           const yamlVersion = yaml.load(localDeploymentData.manifest);
@@ -99,7 +109,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
   }, [editedManifest, deployment.dseq, settings.apiEndpoint, address]);
 
   function handleTextChange(value) {
-    setEditedManifest(value);
+    onManifestChange(value);
 
     if (deploymentVersion) {
       setDeploymentVersion(null);
@@ -244,6 +254,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                     disabled={!!parsingError || !editedManifest || !providers || isSendingManifest || deployment.state !== "active"}
                     onClick={() => handleUpdateClick()}
                     size="sm"
+                    type="button"
                   >
                     Update Deployment
                   </Button>
@@ -255,8 +266,12 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
 
             <LinearLoadingSkeleton isLoading={isSendingManifest} />
 
-            <ViewPanel stickToBottom style={{ overflow: "hidden" }}>
-              <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />
+            <ViewPanel stickToBottom style={{ overflow: isRemoteDeploy ? "unset" : "hidden" }}>
+              {isRemoteDeploy ? (
+                <RemoteDeployUpdate sdlString={editedManifest} onManifestChange={onManifestChange} />
+              ) : (
+                <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />
+              )}
             </ViewPanel>
           </div>
         </>

apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx

@@ -1,14 +1,15 @@
 "use client";
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
-import { Alert, Button, CustomTooltip, Input, Spinner } from "@akashnetwork/ui/components";
+import { Alert, Button, CustomTooltip, Input, Snackbar, Spinner } from "@akashnetwork/ui/components";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { useTheme as useMuiTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { ArrowRight, InfoCircle } from "iconoir-react";
 import { useAtom } from "jotai";
 import { useRouter, useSearchParams } from "next/navigation";
 import { event } from "nextjs-google-analytics";
+import { useSnackbar } from "notistack";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useCertificate } from "@src/context/CertificateProvider";
@@ -47,15 +48,23 @@ type Props = {
   selectedTemplate: TemplateCreation | null;
   editedManifest: string | null;
   setEditedManifest: Dispatch<SetStateAction<string>>;
+  isGitProviderTemplate?: boolean;
 };
 
-export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate }) => {
+export const ManifestEdit: React.FunctionComponent<Props> = ({
+  editedManifest,
+  setEditedManifest,
+  onTemplateSelected,
+  selectedTemplate,
+  isGitProviderTemplate
+}) => {
   const [parsingError, setParsingError] = useState<string | null>(null);
   const [deploymentName, setDeploymentName] = useState("");
   const [isCreatingDeployment, setIsCreatingDeployment] = useState(false);
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
   const [isCheckingPrerequisites, setIsCheckingPrerequisites] = useState(false);
   const [selectedSdlEditMode, setSelectedSdlEditMode] = useAtom(sdlStore.selectedSdlEditMode);
+  const [isRepoInputValid, setIsRepoInputValid] = useState(false);
   const [sdlDenom, setSdlDenom] = useState("uakt");
   const { settings } = useSettings();
   const { address, signAndBroadcastTx, isManaged } = useWallet();
@@ -75,6 +84,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   const wallet = useWallet();
   const managedDenom = useManagedWalletDenom();
   const { createDeploymentConfirm } = useManagedDeploymentConfirm();
+  const { enqueueSnackbar } = useSnackbar();
 
   useWhen(
     wallet.isManaged && sdlDenom === "uakt" && editedManifest,
@@ -84,11 +94,14 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
     },
     [editedManifest, wallet.isManaged, sdlDenom]
   );
-
   useWhen(hasComponent("ssh"), () => {
     setSelectedSdlEditMode("builder");
   });
 
+  useWhen(isGitProviderTemplate, () => {
+    setSelectedSdlEditMode("builder");
+  }, [isGitProviderTemplate]);
+
   const propagateUploadedSdl = (event: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = event.target.files ?? [];
     const hasFileSelected = selectedFiles.length > 0;
@@ -176,6 +189,13 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   }
 
   const handleCreateDeployment = async () => {
+    if (isGitProviderTemplate && !isRepoInputValid) {
+      enqueueSnackbar(<Snackbar title={"Please Fill All Required Fields"} subTitle="You need fill repo url and branch to deploy" iconVariant="error" />, {
+        variant: "error"
+      });
+      return;
+    }
+
     if (selectedSdlEditMode === "builder") {
       const valid = await sdlBuilderRef.current?.validate();
       if (!valid) return;
@@ -350,44 +370,46 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
         </div>
       </div>
 
-      <div className="mb-2 flex gap-2">
-        {hasComponent("yml-editor") && (
-          <div className="flex items-center">
-            <Button
-              variant={selectedSdlEditMode === "builder" ? "default" : "outline"}
-              onClick={() => changeMode("builder")}
-              size="sm"
-              className={cn("flex-grow sm:flex-grow-0", { "rounded-e-none": hasComponent("yml-editor") })}
-              disabled={!!parsingError && selectedSdlEditMode === "yaml"}
-            >
-              Builder
-            </Button>
-            <Button
-              variant={selectedSdlEditMode === "yaml" ? "default" : "outline"}
-              color={selectedSdlEditMode === "yaml" ? "secondary" : "primary"}
-              onClick={() => changeMode("yaml")}
-              size="sm"
-              className="flex-grow rounded-s-none sm:flex-grow-0"
-            >
-              YAML
-            </Button>
-          </div>
-        )}
-        {hasComponent("yml-uploader") && !templateId && (
-          <>
-            <input type="file" ref={fileUploadRef} onChange={propagateUploadedSdl} style={{ display: "none" }} accept=".yml,.yaml,.txt" />
-            <Button
-              variant="outline"
-              color="secondary"
-              onClick={() => triggerFileInput()}
-              size="sm"
-              className="flex-grow hover:bg-primary hover:text-white sm:flex-grow-0"
-            >
-              Upload SDL
-            </Button>
-          </>
-        )}
-      </div>
+      {!isGitProviderTemplate && (
+        <div className="mb-2 flex gap-2">
+          {hasComponent("yml-editor") && (
+            <div className="flex items-center">
+              <Button
+                variant={selectedSdlEditMode === "builder" ? "default" : "outline"}
+                onClick={() => changeMode("builder")}
+                size="sm"
+                className={cn("flex-grow sm:flex-grow-0", { "rounded-e-none": hasComponent("yml-editor") })}
+                disabled={!!parsingError && selectedSdlEditMode === "yaml"}
+              >
+                Builder
+              </Button>
+              <Button
+                variant={selectedSdlEditMode === "yaml" ? "default" : "outline"}
+                color={selectedSdlEditMode === "yaml" ? "secondary" : "primary"}
+                onClick={() => changeMode("yaml")}
+                size="sm"
+                className="flex-grow rounded-s-none sm:flex-grow-0"
+              >
+                YAML
+              </Button>
+            </div>
+          )}
+          {hasComponent("yml-uploader") && !templateId && (
+            <>
+              <input type="file" ref={fileUploadRef} onChange={propagateUploadedSdl} style={{ display: "none" }} accept=".yml,.yaml,.txt" />
+              <Button
+                variant="outline"
+                color="secondary"
+                onClick={() => triggerFileInput()}
+                size="sm"
+                className="flex-grow hover:bg-primary hover:text-white sm:flex-grow-0"
+              >
+                Upload SDL
+              </Button>
+            </>
+          )}
+        </div>
+      )}
 
       {parsingError && <Alert variant="warning">{parsingError}</Alert>}
 
@@ -397,7 +419,15 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
         </ViewPanel>
       )}
       {(hasComponent("ssh") || selectedSdlEditMode === "builder") && (
-        <SdlBuilder sdlString={editedManifest} ref={sdlBuilderRef} setEditedManifest={setEditedManifest} />
+        <SdlBuilder
+          sdlString={editedManifest}
+          ref={sdlBuilderRef}
+          isGitProviderTemplate={isGitProviderTemplate}
+          setEditedManifest={setEditedManifest}
+          setDeploymentName={setDeploymentName}
+          deploymentName={deploymentName}
+          setIsRepoInputValid={setIsRepoInputValid}
+        />
       )}
 
       {isDepositingDeployment && (