Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Enable Deployment from Git Repositories to Akash Network #358

Closed
wants to merge 76 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
001311a
create 23 files and update 8 files
dharamveergit Aug 16, 2024
93053db
feat: Update Remote Deploy
dharamveergit Aug 16, 2024
774ed43
update 4 files and create 2 files
dharamveergit Aug 16, 2024
2c8636d
feat: new Repo selection
dharamveergit Aug 16, 2024
1dec0b3
feat: Bitbucket Repo Selection
dharamveergit Aug 16, 2024
ab30a3b
feat: Gitlab Repo Selection
dharamveergit Aug 16, 2024
d7ef049
fix: Gitlab repos ui fix
dharamveergit Aug 16, 2024
82e25fe
feat: update disable _pull
dharamveergit Aug 16, 2024
89f5d5c
fix : update ui
dharamveergit Aug 17, 2024
5c125d5
feat: New Frameworks
dharamveergit Aug 17, 2024
6466920
feat: vite Framework
dharamveergit Aug 17, 2024
dc35ad4
fix: open fix repos
dharamveergit Aug 17, 2024
040a626
update Repos.tsx, RemoteDeployUpdate.tsx and utils.ts
dharamveergit Aug 19, 2024
d047872
fix : more git repo fetch
dharamveergit Aug 20, 2024
4fb2650
test: temp fix
dharamveergit Aug 21, 2024
0a8a3eb
fix: relogin
dharamveergit Aug 22, 2024
cf05236
feat: remote-deploy: bug fixes
dharamveergit Aug 22, 2024
a788457
fix: redeploy advanced
dharamveergit Aug 22, 2024
6805c5a
update GihubDeploy.tsx
dharamveergit Aug 23, 2024
f681b75
update 5 files
dharamveergit Aug 23, 2024
cf15e95
update RemoteDeployUpdate.tsx and templates.ts
dharamveergit Aug 24, 2024
4ec0ee1
Merge remote-tracking branch 'upstream/main'
dharamveergit Aug 26, 2024
449c4e4
update : descriptions
dharamveergit Aug 26, 2024
29591f1
fixes: type
dharamveergit Aug 28, 2024
5e5b392
fix:repo filtering
dharamveergit Aug 28, 2024
7cd8536
remove: console.logs
dharamveergit Aug 28, 2024
21973f8
fix: repo redeploy selection
dharamveergit Aug 28, 2024
933c1a4
feat: images for git accounts
dharamveergit Aug 28, 2024
41a30c6
Merge remote-tracking branch 'upstream/main'
dharamveergit Aug 29, 2024
b9239ea
fix: filtering of repo (In Github)
dharamveergit Aug 29, 2024
0d64352
fix: ui (remote deploy)
dharamveergit Aug 30, 2024
a18e288
ui fix : rollback
dharamveergit Aug 30, 2024
1d785ef
Merge remote-tracking branch 'upstream/main'
dharamveergit Aug 30, 2024
e2d66fc
update Rollback.tsx
dharamveergit Aug 30, 2024
5547af2
fix : names( Remote Deploy)
dharamveergit Aug 31, 2024
7c623b5
update LeaseRow.tsx
dharamveergit Aug 31, 2024
5491178
fix: ui issues (Remote Deploy)
dharamveergit Aug 31, 2024
895d42c
remove : service name edit form remote deploy
dharamveergit Aug 31, 2024
cbf4dd9
update Advanced.tsx and EnvFormModal.tsx
dharamveergit Sep 3, 2024
69c0366
api: github api (next)
dharamveergit Sep 5, 2024
0bdadb4
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 6, 2024
18bdf90
next api: remote deploy - gitlab,bitbucket
dharamveergit Sep 6, 2024
874145c
ui fixes : Env and account ui (Remote Deploy)
dharamveergit Sep 7, 2024
c49d5d1
fix : env in update deployment
dharamveergit Sep 7, 2024
83ec32b
fix: Account select in smaller screens (Remote Deploy)
dharamveergit Sep 7, 2024
7e0d4f8
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 7, 2024
4c1c7a0
remove: console logs (Remote Deploy)
dharamveergit Sep 7, 2024
2cd1458
update api.ts
dharamveergit Sep 7, 2024
2841b9e
Merge pull request #6 from dharamveergit/main
dharamveergit Sep 7, 2024
376bbfa
fix: auth github
dharamveergit Sep 7, 2024
86428b0
build(deps): update package-lock.json
dharamveergit Sep 7, 2024
6104d66
update authenticate.ts
dharamveergit Sep 7, 2024
65c1d49
fix : Deploy
dharamveergit Sep 7, 2024
c86d5bc
Merge pull request #7 from dharamveergit/main
dharamveergit Sep 7, 2024
1469353
fix: remove "Environment Variables" in expanded state (Remote Deploy)
dharamveergit Sep 9, 2024
01708cd
Merge pull request #8 from dharamveergit/main
dharamveergit Sep 9, 2024
b9ed85b
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 12, 2024
29c8d5a
fix: Reordering of variables and useEffects
dharamveergit Sep 12, 2024
2da9923
fix: code clean (Remote Deploy)
dharamveergit Sep 12, 2024
a693d7a
fix: type fixes (Remote Deploy)
dharamveergit Sep 12, 2024
6f38fa9
fix: types (Remote Deploy)
dharamveergit Sep 12, 2024
299fe33
update Repos.tsx, bitbucket-api.ts and gitlab-api.ts
dharamveergit Sep 12, 2024
c026375
fix: vercel deploy fix
dharamveergit Sep 12, 2024
5647200
revert: vercel deploy
dharamveergit Sep 12, 2024
bcf6b8d
Merge pull request #9 from dharamveergit/main
dharamveergit Sep 12, 2024
5821792
fix: types and api class logic (Remote Deployment)
dharamveergit Sep 13, 2024
1a2ab6b
fix: vercel deploy
dharamveergit Sep 13, 2024
c133100
Merge pull request #10 from dharamveergit/main
dharamveergit Sep 13, 2024
999660c
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 13, 2024
beebec7
Merge pull request #11 from dharamveergit/main
dharamveergit Sep 13, 2024
dfb4367
fix: fetch deploy.yml from awesome akash
dharamveergit Sep 16, 2024
166016f
Merge pull request #12 from dharamveergit/main
dharamveergit Sep 16, 2024
83a2a06
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 20, 2024
3052eca
Merge remote-tracking branch 'upstream/main'
dharamveergit Sep 20, 2024
368b22a
build(deps): update browser-env.config.ts, env-config.schema.ts and p…
dharamveergit Sep 20, 2024
cc5beed
Merge pull request #13 from dharamveergit/main
dharamveergit Sep 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
create 23 files and update 8 files
dharamveergit committed Aug 16, 2024
commit 001311ae2b144fa761f885f6265b1ab0575873ef
213 changes: 213 additions & 0 deletions apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
import { Dispatch, useEffect, useState } from "react";
import { Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from "@akashnetwork/ui/components";
import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull } from "iconoir-react";
import { useAtom } from "jotai";

import remoteDeployStore from "@src/store/remoteDeployStore";
import { ServiceType } from "@src/types";
import Advanced from "../remote-deploy/Advanced";
import { handleLogin, useFetchAccessToken, useUserProfile } from "../remote-deploy/api/api";
import { handleLoginBit, useBitFetchAccessToken, useBitUserProfile } from "../remote-deploy/api/bitbucket-api";
import { handleGitLabLogin, useGitLabFetchAccessToken, useGitLabUserProfile } from "../remote-deploy/api/gitlab-api";
import Bit from "../remote-deploy/bitbucket/Bit";
import CustomInput from "../remote-deploy/CustomInput";
import Details from "../remote-deploy/Details";
import Github from "../remote-deploy/github/Github";
import GitLab from "../remote-deploy/gitlab/Gitlab";
import { appendEnv } from "../remote-deploy/utils";

const GithubDeploy = ({
setValue,
services,
control,
deploymentName,
setDeploymentName
}: {
setValue: any;
services: ServiceType[];
control: any;
setDeploymentName: Dispatch<string>;
deploymentName: string;
}) => {
const [token, setToken] = useAtom(remoteDeployStore.tokens);
console.log(services);

const { data: userProfile, isLoading: fetchingProfile } = useUserProfile();
const { data: userProfileBit, isLoading: fetchingProfileBit } = useBitUserProfile();
const { data: userProfileGitLab, isLoading: fetchingProfileGitLab } = useGitLabUserProfile();
console.log(userProfileGitLab);

const { mutate: fetchAccessToken, isLoading: fetchingToken } = useFetchAccessToken();
const { mutate: fetchAccessTokenBit, isLoading: fetchingTokenBit } = useBitFetchAccessToken();
const { mutate: fetchAccessTokenGitLab, isLoading: fetchingTokenGitLab } = useGitLabFetchAccessToken();

const [selectedTab, setSelectedTab] = useState("git");

const [open, setOpen] = useState(false);
useEffect(() => {
setOpen(true);
}, []);

useEffect(() => {
const url = new URL(window.location.href);

const code = url.searchParams.get("code");

if (code && !token?.access_token && open) {
if (token?.type === "github") fetchAccessToken(code);
if (token?.type === "bitbucket") fetchAccessTokenBit(code);
if (token?.type === "gitlab") fetchAccessTokenGitLab(code);
}
}, [open]);

return (
<>
<div className="mt-6 flex flex-col gap-5 rounded border bg-card px-4 py-6 text-card-foreground md:px-6">
<h1 className="font-semibold">Configure</h1>
<div className="flex flex-col gap-5 rounded text-card-foreground md:border md:bg-card md:px-6 md:py-6">
<h1 className="hidden font-semibold md:block">Source Code</h1>

{
<Tabs
onValueChange={value => {
setSelectedTab(value);
setValue("services.0.env", []);
}}
defaultValue="git"
>
<div className="flex items-center justify-between">
<TabsList>
<TabsTrigger value="git">Git Provider</TabsTrigger>
<TabsTrigger value="public">Public Git Repository</TabsTrigger>
</TabsList>

{token?.access_token && (
<button
className="hidden items-center gap-2 text-primary md:flex"
onClick={() => {
setToken({ access_token: null, refresh_token: null, type: "github" });
}}
>
<CoinsSwap className="text-sm" /> Switch Git Provider
</button>
)}
</div>
<TabsContent value="git" className="md:mt-2">
{fetchingToken || fetchingProfile || fetchingTokenBit || fetchingProfileBit || fetchingTokenGitLab || fetchingProfileGitLab ? (
<div className="flex flex-col items-center justify-center gap-2 rounded border px-5 py-10">
<Spinner size="large" />
<p className="text-muted-foreground">Loading...</p>
</div>
) : token?.access_token ? (
<div className="flex flex-col justify-center gap-2 rounded border px-5 py-10 md:items-center">
<h1 className="text-2xl font-semibold text-primary">
Welcome,{" "}
{token?.type === "bitbucket" ? userProfileBit?.display_name : token?.type === "gitlab" ? userProfileGitLab?.name : userProfile?.login}
</h1>
<p className="text-muted-foreground">Let’s Configure and Deploy your new web service ({token?.type})</p>
</div>
) : (
<div className="flex flex-col justify-center gap-6 rounded-sm border px-4 py-8 md:items-center">
<div className="flex flex-col items-center justify-center">
<h1 className="text-lg font-bold text-primary">Connect Account</h1>
<p className="text-center text-sm text-muted-foreground">Connect a git provider to access your repositories.</p>
</div>
<div className="flex flex-col gap-3 md:flex-row">
<Button
onClick={() => {
setToken({ access_token: null, refresh_token: null, type: "bitbucket" });

handleLoginBit();
}}
variant="outline"
className=""
>
<Bitbucket className="mr-2" />
Bitbucket
</Button>
<Button
onClick={() => {
setToken({ access_token: null, refresh_token: null, type: "gitlab" });
handleGitLabLogin();
}}
variant="outline"
className=""
>
<GitlabFull className="mr-2" />
GitLab
</Button>
<Button
onClick={() => {
setToken({ access_token: null, refresh_token: null, type: "github" });
handleLogin();
}}
variant="outline"
className=""
>
<GitIcon className="mr-2" />
Github
</Button>
</div>
</div>
)}
</TabsContent>
<TabsContent value="public" className="flex flex-col gap-6">
<CustomInput
label="Repository URL"
description="The link of the public repo to be deployed"
placeholder="eg. https://github.com/username/repo.git"
onChange={e => appendEnv("REPO_URL", e.target.value, false, setValue, services)}
/>
<CustomInput
label="Branch Name"
description="The git branch branch which is to be deployed"
placeholder="eg. main"
onChange={e => appendEnv("BRANCH_NAME", e.target.value, false, setValue, services)}
/>
</TabsContent>
</Tabs>
}
</div>
{selectedTab === "git" && token?.access_token && (
<div className="grid gap-6 md:grid-cols-2">
{token?.type === "github" ? (
<>
<Github
setValue={setValue}
services={services}
control={control}
setDeploymentName={setDeploymentName}
deploymentName={deploymentName}
profile={userProfile}
/>
</>
) : token?.type === "bitbucket" ? (
<Bit
loading={fetchingProfileBit}
setValue={setValue}
services={services}
control={control}
setDeploymentName={setDeploymentName}
deploymentName={deploymentName}
profile={userProfileBit}
/>
) : (
<GitLab
loading={fetchingProfileGitLab}
setValue={setValue}
services={services}
control={control}
setDeploymentName={setDeploymentName}
deploymentName={deploymentName}
/>
)}
</div>
)}
</div>
<Details services={services} setValue={setValue} />
<Advanced services={services} control={control} setValue={setValue} />
</>
);
};

export default GithubDeploy;
99 changes: 58 additions & 41 deletions apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
Original file line number Diff line number Diff line change
@@ -45,15 +45,18 @@ type Props = {
selectedTemplate: TemplateCreation | null;
editedManifest: string | null;
setEditedManifest: Dispatch<SetStateAction<string>>;
github?: boolean;
setGithub?: Dispatch<boolean>;
};

export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate }) => {
export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate, github }) => {
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 [sdlDenom, setSdlDenom] = useState("uakt");
const { settings } = useSettings();
const { address, signAndBroadcastTx, isManaged } = useWallet();
@@ -84,7 +87,6 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
},
[editedManifest]
);

useWhen(hasComponent("ssh"), () => {
setSelectedSdlEditMode("builder");
});
@@ -291,6 +293,12 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
setSelectedSdlEditMode(mode);
};

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useEffect at the top

if (github) {
setSelectedSdlEditMode("builder");
}
}, [github]);

return (
<>
<CustomNextSeo title="Create Deployment - Manifest Edit" url={`${domainName}${UrlService.newDeployment({ step: RouteStepKeys.editDeployment })}`} />
@@ -340,44 +348,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>
{!github && (
<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>}

@@ -387,7 +397,14 @@ 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}
github={github}
setEditedManifest={setEditedManifest}
setDeploymentName={setDeploymentName}
deploymentName={deploymentName}
/>
)}

{isDepositingDeployment && (
Loading