From 001311ae2b144fa761f885f6265b1ab0575873ef Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 16 Aug 2024 18:29:52 +0530 Subject: [PATCH 01/59] create 23 files and update 8 files --- .../components/new-deployment/GihubDeploy.tsx | 213 +++++++++++++++++ .../new-deployment/ManifestEdit.tsx | 99 ++++---- .../new-deployment/NewDeploymentContainer.tsx | 22 +- .../components/new-deployment/SdlBuilder.tsx | 93 +++++--- .../new-deployment/TemplateList.tsx | 21 +- .../src/components/remote-deploy/Advanced.tsx | 85 +++++++ .../components/remote-deploy/CustomInput.tsx | 25 ++ .../src/components/remote-deploy/Details.tsx | 75 ++++++ .../components/remote-deploy/EnvFormModal.tsx | 148 ++++++++++++ .../src/components/remote-deploy/api/api.ts | 153 ++++++++++++ .../remote-deploy/api/bitbucket-api.ts | 172 ++++++++++++++ .../remote-deploy/api/gitlab-api.ts | 178 ++++++++++++++ .../remote-deploy/bitbucket/Bit.tsx | 42 ++++ .../remote-deploy/bitbucket/Branches.tsx | 61 +++++ .../remote-deploy/bitbucket/Repos.tsx | 74 ++++++ .../remote-deploy/bitbucket/Workspaces.tsx | 50 ++++ .../remote-deploy/github/Branches.tsx | 62 +++++ .../remote-deploy/github/Framework.tsx | 124 ++++++++++ .../remote-deploy/github/Github.tsx | 45 ++++ .../components/remote-deploy/github/Repos.tsx | 92 ++++++++ .../remote-deploy/gitlab/Branches.tsx | 63 +++++ .../remote-deploy/gitlab/Gitlab.tsx | 45 ++++ .../remote-deploy/gitlab/Groups.tsx | 53 +++++ .../components/remote-deploy/gitlab/Repos.tsx | 87 +++++++ .../update/RemoteDeployUpdate.tsx | 189 +++++++++++++++ .../src/components/remote-deploy/utils.ts | 46 ++++ .../sdl/SimpleServiceFormControl.tsx | 217 +++++++++--------- .../deploy-web/src/store/remoteDeployStore.ts | 19 ++ apps/deploy-web/src/utils/constants.ts | 16 +- apps/deploy-web/src/utils/templates.ts | 48 +++- apps/deploy-web/src/utils/urlUtils.ts | 5 +- 31 files changed, 2420 insertions(+), 202 deletions(-) create mode 100644 apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/Advanced.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/CustomInput.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/Details.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/api/api.ts create mode 100644 apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts create mode 100644 apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts create mode 100644 apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/github/Branches.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/github/Framework.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/github/Github.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/github/Repos.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/utils.ts create mode 100644 apps/deploy-web/src/store/remoteDeployStore.ts diff --git a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx new file mode 100644 index 000000000..9f31dd120 --- /dev/null +++ b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx @@ -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; + 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 ( + <> +
+

Configure

+
+

Source Code

+ + { + { + setSelectedTab(value); + setValue("services.0.env", []); + }} + defaultValue="git" + > +
+ + Git Provider + Public Git Repository + + + {token?.access_token && ( + + )} +
+ + {fetchingToken || fetchingProfile || fetchingTokenBit || fetchingProfileBit || fetchingTokenGitLab || fetchingProfileGitLab ? ( +
+ +

Loading...

+
+ ) : token?.access_token ? ( +
+

+ Welcome,{" "} + {token?.type === "bitbucket" ? userProfileBit?.display_name : token?.type === "gitlab" ? userProfileGitLab?.name : userProfile?.login} +

+

Let’s Configure and Deploy your new web service ({token?.type})

+
+ ) : ( +
+
+

Connect Account

+

Connect a git provider to access your repositories.

+
+
+ + + +
+
+ )} + + + appendEnv("REPO_URL", e.target.value, false, setValue, services)} + /> + appendEnv("BRANCH_NAME", e.target.value, false, setValue, services)} + /> + + + } +
+ {selectedTab === "git" && token?.access_token && ( +
+ {token?.type === "github" ? ( + <> + + + ) : token?.type === "bitbucket" ? ( + + ) : ( + + )} +
+ )} +
+
+ + + ); +}; + +export default GithubDeploy; diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx index 63ec61847..ea7cf9ce3 100644 --- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx +++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx @@ -45,15 +45,18 @@ type Props = { selectedTemplate: TemplateCreation | null; editedManifest: string | null; setEditedManifest: Dispatch>; + github?: boolean; + setGithub?: Dispatch; }; -export const ManifestEdit: React.FunctionComponent = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate }) => { +export const ManifestEdit: React.FunctionComponent = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate, github }) => { const [parsingError, setParsingError] = useState(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 = ({ editedManifest, s }, [editedManifest] ); - useWhen(hasComponent("ssh"), () => { setSelectedSdlEditMode("builder"); }); @@ -291,6 +293,12 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s setSelectedSdlEditMode(mode); }; + useEffect(() => { + if (github) { + setSelectedSdlEditMode("builder"); + } + }, [github]); + return ( <> @@ -340,44 +348,46 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s -
- {hasComponent("yml-editor") && ( -
- - -
- )} - {hasComponent("yml-uploader") && !templateId && ( - <> - - - - )} -
+ {!github && ( +
+ {hasComponent("yml-editor") && ( +
+ + +
+ )} + {hasComponent("yml-uploader") && !templateId && ( + <> + + + + )} +
+ )} {parsingError && {parsingError}} @@ -387,7 +397,14 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s )} {(hasComponent("ssh") || selectedSdlEditMode === "builder") && ( - + )} {isDepositingDeployment && ( diff --git a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx index b7a1016c9..e7f04fbc5 100644 --- a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx +++ b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx @@ -18,6 +18,7 @@ import { CustomizedSteppers } from "./Stepper"; import { TemplateList } from "./TemplateList"; export const NewDeploymentContainer: FC = () => { + const [github, setGithub] = useState(false); const { isLoading: isLoadingTemplates, templates } = useTemplates(); const [activeStep, setActiveStep] = useState(null); const [selectedTemplate, setSelectedTemplate] = useState(null); @@ -29,7 +30,6 @@ export const NewDeploymentContainer: FC = () => { const searchParams = useSearchParams(); const dseq = searchParams?.get("dseq"); const { toggleCmp } = useSdlBuilder(); - useEffect(() => { if (!templates) return; @@ -44,12 +44,26 @@ export const NewDeploymentContainer: FC = () => { // If it's a deployment from the template gallery, load from template data setSelectedTemplate(galleryTemplate as TemplateCreation); setEditedManifest(galleryTemplate.content as string); - if (galleryTemplate.config?.ssh) { toggleCmp("ssh"); } } + const code = searchParams?.get("code"); + const type = searchParams?.get("type"); + const state = searchParams?.get("state"); + + if (type === "github" || code || state === "gitlab") { + if (state === "gitlab") { + router.replace(`/new-deployment?step=${RouteStepKeys.editDeployment}&type=gitlab&code=${code}`); + } + setSelectedTemplate(hardcodedTemplates.find(t => t.title === "GitHub") as TemplateCreation); + setEditedManifest(hardcodedTemplates.find(t => t.title === "GitHub")?.content as string); + setGithub(true); + } else { + setGithub(false); + } + const queryStep = searchParams?.get("step"); const _activeStep = getStepIndexByParam(queryStep); setActiveStep(_activeStep); @@ -128,13 +142,15 @@ export const NewDeploymentContainer: FC = () => {
{activeStep !== null && }
- {activeStep === 0 && } + {activeStep === 0 && } {activeStep === 1 && ( )} {activeStep === 2 && } diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx index 16610f3aa..62e905bcd 100644 --- a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx +++ b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx @@ -17,10 +17,14 @@ import { generateSdl } from "@src/utils/sdl/sdlGenerator"; import { importSimpleSdl } from "@src/utils/sdl/sdlImport"; import { transformCustomSdlFields, TransformError } from "@src/utils/sdl/transformCustomSdlFields"; import { SimpleServiceFormControl } from "../sdl/SimpleServiceFormControl"; +import GithubDeploy from "./GihubDeploy"; interface Props { sdlString: string | null; setEditedManifest: Dispatch; + github?: boolean; + setDeploymentName: Dispatch; + deploymentName: string; } export type SdlBuilderRefType = { @@ -28,7 +32,7 @@ export type SdlBuilderRefType = { validate: () => Promise; }; -export const SdlBuilder = React.forwardRef(({ sdlString, setEditedManifest }, ref) => { +export const SdlBuilder = React.forwardRef(({ sdlString, setEditedManifest, github, setDeploymentName, deploymentName }, ref) => { const [error, setError] = useState(null); const formRef = useRef(null); const [isInit, setIsInit] = useState(false); @@ -53,7 +57,10 @@ export const SdlBuilder = React.forwardRef(({ sdlStrin }); const { services: formServices = [] } = watch(); const { data: gpuModels } = useGpuModels(); - const [serviceCollapsed, setServiceCollapsed] = useState([]); + const [serviceCollapsed, setServiceCollapsed] = useState(github ? [0] : []); + + console.log(serviceCollapsed); + const wallet = useWallet(); const managedDenom = useManagedWalletDenom(); @@ -146,42 +153,54 @@ export const SdlBuilder = React.forwardRef(({ sdlStrin ) : ( -
- - {formServices && - services.map((service, serviceIndex) => ( - - ))} - - {error && ( - - {error} - - )} - - {!hasComponent("ssh") && ( -
-
- + <> + {github && ( + + )} + + + {formServices && + services.map((service, serviceIndex) => ( + + ))} + + {error && ( + + {error} + + )} + + {!hasComponent("ssh") && !github && ( +
+
+ +
-
- )} - - + )} + + + )}
); diff --git a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx index 63e82b660..efc044814 100644 --- a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx +++ b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { Dispatch, useEffect, useState } from "react"; import { Button, buttonVariants } from "@akashnetwork/ui/components"; import { ArrowRight, Cpu, Page, Rocket, Wrench } from "iconoir-react"; import { NavArrowLeft } from "iconoir-react"; @@ -30,14 +30,19 @@ const previewTemplateIds = [ "akash-network-awesome-akash-grok", "akash-network-awesome-akash-FastChat" ]; - -export const TemplateList: React.FunctionComponent = () => { +type Props = { + setGithub: Dispatch; +}; +export const TemplateList: React.FunctionComponent = ({ setGithub }) => { const { templates } = useTemplates(); const router = useRouter(); const [previewTemplates, setPreviewTemplates] = useState([]); const [, setSdlEditMode] = useAtom(sdlStore.selectedSdlEditMode); const previousRoute = usePreviousRoute(); - + const handleGithubTemplate = async () => { + setGithub(true); + router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment, type: "github" })); + }; useEffect(() => { if (templates) { const _previewTemplates = previewTemplateIds.map(x => templates.find(y => x === y.id)).filter(x => !!x); @@ -73,11 +78,17 @@ export const TemplateList: React.FunctionComponent = () => {
- } onClick={() => router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment, templateId: helloWorldTemplate.code }))} + /> */} + } + onClick={handleGithubTemplate} /> { + const serviceIndex = 0; + const [expanded, setExpanded] = useState(false); + const currentService = services[serviceIndex]; + + return ( + { + setExpanded(value); + }} + > + + + +
+

Other Options

+ +
+ + {expanded && } + +
+ {}} + serviceIndex={serviceIndex} + envs={currentService.env || []} + // hasSecretOption={hasSecretOption} + /> +
+
+

Auto-Deploy

+

+ By default, your code is automatically deployed whenever you update it. Disable to handle deploys manually. +

+
+ +
+
+ + + + + ); +}; + +export default Advanced; diff --git a/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx b/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx new file mode 100644 index 000000000..34c4cb607 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { Input } from "@akashnetwork/ui/components"; +const CustomInput = ({ + label, + description, + placeholder, + onChange +}: { + label: string; + description: string; + placeholder: string; + onChange: (e: React.ChangeEvent) => void; +}) => { + return ( +
+
+

{label}

+

{description}

+
+ +
+ ); +}; + +export default CustomInput; diff --git a/apps/deploy-web/src/components/remote-deploy/Details.tsx b/apps/deploy-web/src/components/remote-deploy/Details.tsx new file mode 100644 index 000000000..fbe77bb01 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/Details.tsx @@ -0,0 +1,75 @@ +import { useState } from "react"; +import { Card, CardContent, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator } from "@akashnetwork/ui/components"; +import { cn } from "@akashnetwork/ui/utils"; +import { NavArrowDown } from "iconoir-react"; + +import CustomInput from "./CustomInput"; +import { appendEnv } from "./utils"; + +const Details = ({ services, setValue }) => { + const [expanded, setExpanded] = useState(false); + + return ( + { + setExpanded(value); + }} + > + + + +
+

Advanced Configurations

+ +
+ + {expanded && } + +
+ appendEnv("INSTALL_COMMAND", e.target.value, false, setValue, services)} + label="Install Command" + description="By default we use npm install, Change the version if needed" + placeholder="eg. npm install" + /> + appendEnv("BUILD_DIRECTORY", e.target.value, false, setValue, services)} + label="Build Directory" + description="The custom build directory name for your repo" + placeholder="eg. dist" + /> + appendEnv("BUILD_COMMAND", e.target.value, false, setValue, services)} + label="Build Command" + description="The custom build command for your repo" + placeholder="eg. npm run build" + /> + appendEnv("CUSTOM_SRC", e.target.value, false, setValue, services)} + label="Start Command" + description="The custom start command for your repo" + placeholder="eg. npm start" + /> + appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} + label="Node Version" + description="By default we use 21, Change the version if needed" + placeholder="eg. 21" + /> + + {/* appendEnv("COMMIT_HASH", e.target.value, false, setValue, services)} + label="Commit Hash" + description="The Commit Hash used for your private service" + + placeholder="eg. anything" + /> */} +
+ + + + + ); +}; +export default Details; diff --git a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx new file mode 100644 index 000000000..8d3c43d72 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx @@ -0,0 +1,148 @@ +"use client"; +import { ReactNode, useState } from "react"; +import { Control, Controller, useFieldArray } from "react-hook-form"; +import { Button, CustomNoDivTooltip, FormInput, Switch } from "@akashnetwork/ui/components"; +import { Bin, Eye, EyeClosed } from "iconoir-react"; +import { nanoid } from "nanoid"; + +import { EnvironmentVariableType, RentGpusFormValuesType, SdlBuilderFormValuesType } from "@src/types"; +import { cn } from "@src/utils/styleUtils"; +import { FormPaper } from "../sdl/FormPaper"; +import { hiddenEnv } from "./utils"; + +type Props = { + serviceIndex: number; + onClose: () => void; + envs: EnvironmentVariableType[]; + control: Control; + hasSecretOption?: boolean; + children?: ReactNode; +}; + +export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true }) => { + // const [envs, setEnvs] = useState(_envs); + const { + fields: envs, + remove: removeEnv, + append: appendEnv + } = useFieldArray({ + control, + name: `services.${serviceIndex}.env`, + keyName: "id" + }); + + // useEffect(() => { + // if (_envs.length === 0) { + // onAddEnv(); + // } + // }, []); + + const onAddEnv = () => { + appendEnv({ id: nanoid(), key: "", value: "", isSecret: false }); + }; + + return ( +
+

Environment Variables

+ + {envs.filter(env => !hiddenEnv.includes(env?.key?.trim())).length === 0 && ( +

No environment variables added.

+ )} + {envs.map((env, envIndex) => { + return ( +
+
+ ( +
+ field.onChange(event.target.value)} + className="w-full" + /> +
+ )} + /> + + ( +
+ +
+ )} + /> +
+ +
0, + ["justify-end"]: envIndex === 0 || !hasSecretOption + })} + > + {envIndex > 0 && ( + + )} + + {hasSecretOption && ( + ( + +

+ Secret +

+

+ This is for secret variables containing sensitive information you don't want to be saved in your template. +

+ + } + > + + + )} + /> + )} +
+
+ ); + })} + + +
+ ); +}; + +const EnvPasswordInput = ({ field, label }: { field: any; label: string }) => { + const [showPassword, setShowPassword] = useState(false); + return ( +
+ field.onChange(event.target.value)} + className="w-full pr-12" + autoComplete="new-password" + /> + + +
+ ); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts new file mode 100644 index 000000000..0569c7801 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -0,0 +1,153 @@ +import { useMutation, useQuery } from "react-query"; +import axios, { AxiosError } from "axios"; +import { useAtom } from "jotai"; +import { usePathname, useRouter } from "next/navigation"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { PROXY_API_URL_AUTH } from "../utils"; + +const Github_API_URL = "https://api.github.com"; + +export const CLIEND_ID = "Iv23liZYLYN9I2HrgeOh"; + +export const handleLogin = () => { + window.location.href = "https://github.com/apps/akash-console/installations/new"; +}; +// window.location.href = `https://github.com/login/oauth/authorize?client_id=${CLIEND_ID}&redirect_uri=${REDIRECT_URL}`; + +const axiosInstance = axios.create({ + baseURL: Github_API_URL, + headers: { + "Content-Type": "application/json", + Accept: "application/json" + } +}); + +export const useUserProfile = () => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["userProfile", token?.access_token], + queryFn: async () => { + const response = await axiosInstance.get("/user", { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "github" + }); +}; + +export const useRepos = () => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["repos", token?.access_token], + queryFn: async () => { + const response = await axiosInstance.get( + "/user/repos", + + { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + } + ); + return response.data; + }, + onError: (error: AxiosError<{ message: string }>) => { + if (error?.response?.data?.message === "Bad credentials") { + console.log("Bad credentials"); + } + }, + onSettled: data => { + if (data?.message === "Bad credentials") { + console.log("Bad credentials"); + } + }, + enabled: !!token?.access_token && token.type === "github" + }); +}; + +export const useFetchAccessToken = () => { + const [, setToken] = useAtom(remoteDeployStore.tokens); + const pathname = usePathname(); + const router = useRouter(); + return useMutation({ + mutationFn: async (code: string) => { + const response = await axios.post(`${PROXY_API_URL_AUTH}/authenticate`, { + code + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "github" + }); + router.replace(pathname.split("?")[0] + "?step=edit-deployment&type=github"); + } + }); +}; + +export const useBranches = (repo?: string, fetch?: boolean) => { + const [token] = useAtom(remoteDeployStore.tokens); + console.log(fetch); + + return useQuery({ + queryKey: ["branches", repo, token?.access_token], + queryFn: async () => { + const response = await axiosInstance.get(`/repos/${repo}/branches`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + + enabled: !!token?.access_token && token.type === "github" && !!repo + }); +}; + +//fetch all commits in a branch + +export const useCommits = (repo: string, branch: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["commits", repo, branch, token?.access_token, repo, branch], + queryFn: async () => { + const response = await axiosInstance.get(`/repos/${repo}/commits?sha=${branch}`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + + enabled: !!token?.access_token && token.type === "github" && !!repo && !!branch + }); +}; + +export const usePackageJson = (onSettled: (data: any) => void, repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["packageJson", repo], + queryFn: async () => { + const response = await axiosInstance.get(`/repos/${repo}/contents/package.json`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "github" && !!repo, + onSettled: data => { + if (data?.content === undefined) return; + const content = atob(data.content); + const parsed = JSON.parse(content); + onSettled(parsed); + } + }); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts new file mode 100644 index 000000000..a6aeb6fe0 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -0,0 +1,172 @@ +import { useMutation, useQuery } from "react-query"; +import axios from "axios"; +import { useAtom } from "jotai"; +import { usePathname, useRouter } from "next/navigation"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { PROXY_API_URL_AUTH } from "../utils"; + +const Bitbucket_API_URL = "https://api.bitbucket.org/2.0"; +const BitBucketKey = "HfxhSWx78u8juqs2Ta"; + +export const handleLoginBit = () => { + window.location.href = `https://bitbucket.org/site/oauth2/authorize?client_id=${BitBucketKey}&response_type=code`; +}; +const axiosInstance = axios.create({ + baseURL: Bitbucket_API_URL, + headers: { + "Content-Type": "application/json", + Accept: "application/json" + } +}); + +export const useFetchRefreshBitToken = () => { + const [token, setToken] = useAtom(remoteDeployStore.tokens); + + return useMutation({ + mutationFn: async () => { + const response = await axios.post(`${PROXY_API_URL_AUTH}/bitbucket/refresh`, { + refreshToken: token?.refresh_token + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "bitbucket" + }); + } + }); +}; + +export const useBitUserProfile = () => { + const [token] = useAtom(remoteDeployStore.tokens); + const { mutate } = useFetchRefreshBitToken(); + return useQuery({ + queryKey: ["userProfile", token.access_token], + queryFn: async () => { + const response = await axiosInstance.get("/user", { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket", + onError: (error: any) => { + if (error.response?.status === 401) { + mutate(); + } + } + }); +}; + +export const useBitBucketCommits = (repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["commits", repo, token.access_token, repo], + queryFn: async () => { + const response = await axiosInstance.get(`/repositories/${repo}/commits`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket" && !!repo + }); +}; + +export const useBitFetchAccessToken = () => { + const [, setToken] = useAtom(remoteDeployStore.tokens); + const pathname = usePathname(); + const router = useRouter(); + return useMutation({ + mutationFn: async (code: string) => { + const response = await axios.post(`${PROXY_API_URL_AUTH}/bitbucket/authenticate`, { + code + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "bitbucket" + }); + + router.replace(pathname.split("?")[0] + "?step=edit-deployment&type=github"); + } + }); +}; + +export const useWorkspaces = () => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["workspaces", token.access_token], + queryFn: async () => { + const response = await axiosInstance.get("/workspaces", { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket" + }); +}; + +export const useBitReposByWorkspace = (workspace: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["repos", token.access_token, workspace], + queryFn: async () => { + const response = await axiosInstance.get(`/repositories/${workspace}`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket" && !!workspace + }); +}; + +export const useBitBranches = (repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["branches", repo], + queryFn: async () => { + const response = await axiosInstance.get(`/repositories/${repo}/refs/branches`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!repo && !!token?.access_token && token.type === "bitbucket" + }); +}; + +export const useBitPackageJson = (onSettled: (data: any) => void, repo?: string, branch?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + + return useQuery({ + queryKey: ["packageJson", repo, branch], + queryFn: async () => { + const response = await axiosInstance.get(`/repositories/${repo}/src/${branch}/package.json`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket" && !!repo && !!branch, + onSettled: data => { + onSettled(data); + } + }); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts new file mode 100644 index 000000000..59d9cb760 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -0,0 +1,178 @@ +import { useMutation, useQuery } from "react-query"; +import axios from "axios"; +import { useAtom } from "jotai"; +import { usePathname, useRouter } from "next/navigation"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { PROXY_API_URL_AUTH } from "../utils"; + +// ?step=edit-deployment&type=github +const CLIEND_ID = "f8b7584c38a6aaba2315e3c377513debd589e0a06bf15cc3fd96b1dd713b19ca"; +const REDIRECT_URL = "https://akashconsole.vercel.app/new-deployment"; + +export const handleGitLabLogin = () => { + window.location.href = `https://gitlab.com/oauth/authorize?client_id=${CLIEND_ID}&redirect_uri=${REDIRECT_URL}&response_type=code&scope=read_user+read_repository+read_api+api&state=gitlab`; +}; + +const axiosInstance = axios.create({ + baseURL: "https://gitlab.com/api/v4", + headers: { + "Content-Type": "application/json", + Accept: "application/json" + } +}); + +export const useGitLabFetchAccessToken = () => { + const [, setToken] = useAtom(remoteDeployStore.tokens); + const pathname = usePathname(); + const router = useRouter(); + return useMutation({ + mutationFn: async (code: string) => { + const response = await axios.post(`${PROXY_API_URL_AUTH}/gitlab/authenticate`, { + code + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "gitlab" + }); + + router.replace(pathname.split("?")[0] + "?step=edit-deployment&type=github"); + } + }); +}; + +export const useFetchRefreshGitlabToken = () => { + const [token, setToken] = useAtom(remoteDeployStore.tokens); + + return useMutation({ + mutationFn: async () => { + const response = await axios.post(`${PROXY_API_URL_AUTH}/gitlab/refresh`, { + refreshToken: token?.refresh_token + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "gitlab" + }); + } + }); +}; + +export const useGitLabUserProfile = () => { + const [token] = useAtom(remoteDeployStore.tokens); + + const { mutate } = useFetchRefreshGitlabToken(); + + return useQuery({ + queryKey: ["gitlab-user-Profile", token?.access_token], + queryFn: async () => { + const response = await axiosInstance.get("/user", { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab", + onError: (error: any) => { + if (error.response?.status === 401) { + mutate(); + } + } + }); +}; + +export const useGitLabGroups = () => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["gitlab-repos", token?.access_token], + queryFn: async () => { + const response = await axiosInstance.get(`/groups`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab" + }); +}; + +export const useGitLabReposByGroup = (group: string | undefined) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["repos", token?.access_token, group], + queryFn: async () => { + const response = await axiosInstance.get(`/groups/${group}/projects`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab" && !!group + }); +}; + +export const useGitLabBranches = (repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["branches", repo], + queryFn: async () => { + const response = await axiosInstance.get(`/projects/${repo}/repository/branches`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab" && !!repo + }); +}; + +export const useGitLabCommits = (repo?: string, branch?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["commits", repo, branch, token?.access_token, repo, branch], + queryFn: async () => { + const response = await axiosInstance.get(`/projects/${repo}/repository/commits?ref_name=${branch}`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + + enabled: !!token?.access_token && token.type === "gitlab" && !!repo && !!branch + }); +}; + +export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + console.log(repo); + + return useQuery({ + queryKey: ["packageJson", repo], + queryFn: async () => { + const response = await axiosInstance.get(`/projects/${repo}/repository/files/package.json/raw`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab" && !!repo, + onSettled: data => { + onSettled(data); + } + }); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx new file mode 100644 index 000000000..0441e542d --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx @@ -0,0 +1,42 @@ +import React, { Dispatch, useState } from "react"; + +import { ServiceType } from "@src/types"; +import { useBitReposByWorkspace } from "../api/bitbucket-api"; +import Framework from "../github/Framework"; +import { ServiceControl } from "../utils"; +import Branches from "./Branches"; +import Repos from "./Repos"; +import WorkSpaces from "./Workspaces"; + +const Bit = ({ + loading, + setValue, + services, + control, + setDeploymentName, + deploymentName, + profile +}: { + setDeploymentName: Dispatch; + deploymentName: string; + loading: boolean; + setValue: any; + services: ServiceType[]; + control: ServiceControl; + profile: any; +}) => { + const [workSpace, setWorkSpace] = useState(""); + + const { data: repos, isLoading } = useBitReposByWorkspace(workSpace); + + return ( + <> + + + + + + ); +}; + +export default Bit; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx new file mode 100644 index 000000000..ce13f1dae --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx @@ -0,0 +1,61 @@ +import { Control, useFieldArray } from "react-hook-form"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { useBitBranches } from "../api/bitbucket-api"; +import { removeInitialUrl } from "../utils"; + +const Branches = ({ services, control }: { services: ServiceType[]; control: Control }) => { + const selected = removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value); + + const { data: branches, isLoading: branchesLoading } = useBitBranches(selected); + + const { fields, append, update } = useFieldArray({ + control, + name: "services.0.env", + keyName: "id" + }); + return ( +
+
+

Select Branch

+

Select a branch to use for deployment

+
+ + +
+ ); +}; + +export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx new file mode 100644 index 000000000..052c18521 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx @@ -0,0 +1,74 @@ +import { Dispatch, useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { Bitbucket, Lock } from "iconoir-react"; +import { useAtom } from "jotai"; +import { nanoid } from "nanoid"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +const Repos = ({ + repos, + setValue, + isLoading, + setDeploymentName, + profile +}: { + repos: any; + setValue: any; + isLoading: boolean; + setDeploymentName: Dispatch; + deploymentName: string; + profile: any; +}) => { + const [open, setOpen] = useState(false); + console.log(repos); + + const [token] = useAtom(remoteDeployStore.tokens); + return ( +
+
+

Select Repository

+

The Repository Branch used for your private service

+
+ + +
+ ); +}; + +export default Repos; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx new file mode 100644 index 000000000..0ee34108c --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx @@ -0,0 +1,50 @@ +import { Dispatch, useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { Bitbucket } from "iconoir-react"; + +import { useWorkspaces } from "../api/bitbucket-api"; +const WorkSpaces = ({ isLoading, setWorkSpaces }: { isLoading: boolean; workSpaces: string; setWorkSpaces: Dispatch }) => { + const [open, setOpen] = useState(false); + + const { data, isLoading: loadingWorkSpaces } = useWorkspaces(); + + return ( +
+
+

Select WorkSpace

+

Select a Work-Space to use for deployment

+
+ + +
+ ); +}; + +export default WorkSpaces; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx new file mode 100644 index 000000000..dba861374 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx @@ -0,0 +1,62 @@ +import { Control, useFieldArray } from "react-hook-form"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { useBranches } from "../api/api"; +import { removeInitialUrl } from "../utils"; + +const Branches = ({ services, control }: { services: ServiceType[]; control: Control }) => { + const selected = removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value); + + const { fields, append, update } = useFieldArray({ + control, + name: "services.0.env", + keyName: "id" + }); + + const { data: branches, isLoading: branchesLoading } = useBranches(selected); + + return ( +
+
+

Select Branch

+

Select a branch to use for deployment

+
+ + +
+ ); +}; + +export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx b/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx new file mode 100644 index 000000000..5f1dba834 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx @@ -0,0 +1,124 @@ +import { useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import clsx from "clsx"; +import { Globe } from "iconoir-react"; +import { useAtom } from "jotai"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { ServiceType } from "@src/types"; +import { usePackageJson } from "../api/api"; +import { useBitPackageJson } from "../api/bitbucket-api"; +import { useGitlabPackageJson } from "../api/gitlab-api"; +import { removeInitialUrl } from "../utils"; +const frameworks = [ + { + title: "React", + value: "react", + image: "https://static-00.iconduck.com/assets.00/react-icon-512x456-2ynx529a.png" + }, + { + title: "Vue", + value: "vue", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/1200px-Vue.js_Logo.svg.png" + }, + { + title: "Angular", + value: "angular", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png" + }, + { + title: "Svelte", + value: "svelte", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png" + }, + { + title: "Next.js", + value: "next", + image: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/nextjs-icon.png" + }, + + { + title: "Astro", + value: "astro", + image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" + }, + { + title: "Other", + value: "other" + } +]; +const Framework = ({ services, setValue, repos }: { services: ServiceType[]; setValue: any; repos?: any }) => { + const [data, setData] = useState(null); + const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; + const [token] = useAtom(remoteDeployStore.tokens); + const setValueHandler = (data: any) => { + setData(data); + if (data?.dependencies) { + const cpus = (Object.keys(data?.dependencies ?? {}).length / 10 / 2).toFixed(1); + console.log("c", cpus); + + setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); + } + }; + + const { isLoading } = usePackageJson(setValueHandler, removeInitialUrl(selected)); + const { isLoading: gitlabLoading } = useGitlabPackageJson( + setValueHandler, + repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id + ); + + const { isLoading: bitbucketLoading } = useBitPackageJson( + setValueHandler, + removeInitialUrl(selected), + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value + ); + + return ( +
+
+

Build Framework

+

Select your build framework

+
+ + +
+ ); +}; + +export default Framework; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx new file mode 100644 index 000000000..ad6f88d18 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -0,0 +1,45 @@ +import { Dispatch } from "react"; +import { Control } from "react-hook-form"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { useRepos } from "../api/api"; +import Branches from "./Branches"; +import Framework from "./Framework"; +import Repos from "./Repos"; + +const Github = ({ + control, + setValue, + services, + setDeploymentName, + deploymentName, + profile +}: { + setDeploymentName: Dispatch; + deploymentName: string; + control: Control; + + setValue: any; + services: ServiceType[]; + profile: any; +}) => { + const { data: repos, isLoading } = useRepos(); + + return ( + <> + + + + + ); +}; + +export default Github; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx new file mode 100644 index 000000000..f4855cd54 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -0,0 +1,92 @@ +import { Dispatch, useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { GithubCircle, Lock, Plus } from "iconoir-react"; +import { useAtom } from "jotai"; +import { nanoid } from "nanoid"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { ServiceType } from "@src/types"; +import { handleLogin } from "../api/api"; +const Repos = ({ + repos, + setValue, + isLoading, + services, + setDeploymentName, + profile +}: { + repos: any; + setValue: any; + services: ServiceType[]; + isLoading: boolean; + setDeploymentName: Dispatch; + deploymentName: string; + profile: any; +}) => { + const [open, setOpen] = useState(false); + + const [token] = useAtom(remoteDeployStore.tokens); + + return ( +
+
+

Select Repository

+

The Repository Branch used for your private service

+
+ + +
+ ); +}; + +export default Repos; diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx new file mode 100644 index 000000000..fe00742aa --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx @@ -0,0 +1,63 @@ +import { Control, useFieldArray } from "react-hook-form"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { useGitLabBranches, useGitLabReposByGroup } from "../api/gitlab-api"; + +const Branches = ({ repos, services, control }: { repos?: any; services: ServiceType[]; control: Control }) => { + const selected = + repos?.length > 0 + ? repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id + : services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value; + + const { data: branches, isLoading: branchesLoading } = useGitLabBranches(selected); + const { fields, append, update } = useFieldArray({ + control, + name: "services.0.env", + keyName: "id" + }); + + return ( +
+
+

Select Branch

+

Select a branch to use for deployment

+
+ + +
+ ); +}; + +export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx new file mode 100644 index 000000000..cfce4d120 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx @@ -0,0 +1,45 @@ +import React, { Dispatch, useState } from "react"; + +import { ServiceType } from "@src/types"; +import { useGitLabReposByGroup } from "../api/gitlab-api"; +import Framework from "../github/Framework"; +import { ServiceControl } from "../utils"; +import Branches from "./Branches"; +import Groups from "./Groups"; +import Repos from "./Repos"; + +const GitLab = ({ + loading, + setValue, + services, + control, + setDeploymentName, + deploymentName +}: { + setDeploymentName: Dispatch; + deploymentName: string; + loading: boolean; + setValue: any; + services: ServiceType[]; + control: ServiceControl; +}) => { + const [group, setGroup] = useState(""); + const { data: repos, isLoading } = useGitLabReposByGroup(group); + return ( + <> + + + + + + ); +}; + +export default GitLab; diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx new file mode 100644 index 000000000..9a87e434f --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx @@ -0,0 +1,53 @@ +import { Dispatch, useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { GitlabFull } from "iconoir-react"; +import { useAtom } from "jotai"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { useGitLabGroups } from "../api/gitlab-api"; +const Groups = ({ isLoading, group, setGroup }: { isLoading: boolean; group: string; setGroup: Dispatch }) => { + const [open, setOpen] = useState(false); + + const [token] = useAtom(remoteDeployStore.tokens); + const { data, isLoading: loadingWorkSpaces } = useGitLabGroups(); + + return ( +
+
+

Select Group

+

Select a Group to use for deployment

+
+ + +
+ ); +}; + +export default Groups; diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx new file mode 100644 index 000000000..3bc397a83 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx @@ -0,0 +1,87 @@ +import { Dispatch, useState } from "react"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { GitlabFull, Lock } from "iconoir-react"; +import { useAtom } from "jotai"; +import { nanoid } from "nanoid"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { ServiceType } from "@src/types"; +const Repos = ({ + repos, + setValue, + isLoading, + setDeploymentName, + services +}: { + services: ServiceType[]; + isLoading: boolean; + setDeploymentName: Dispatch; + deploymentName: string; + repos: any; + setValue: any; +}) => { + const [open, setOpen] = useState(false); + console.log(services); + + const [token] = useAtom(remoteDeployStore.tokens); + return ( +
+
+

Select Repository

+

The Repository Branch used for your private service

+
+ + +
+ ); +}; + +export default Repos; diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx new file mode 100644 index 000000000..1f6fbe094 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -0,0 +1,189 @@ +import React, { Dispatch, useEffect, useState } from "react"; +import { Control, useFieldArray, useForm } from "react-hook-form"; +import { Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Switch } from "@akashnetwork/ui/components"; +import { GitCommit } from "iconoir-react"; +import { useAtom } from "jotai"; +import { nanoid } from "nanoid"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { defaultService } from "@src/utils/sdl/data"; +import { generateSdl } from "@src/utils/sdl/sdlGenerator"; +import { importSimpleSdl } from "@src/utils/sdl/sdlImport"; +import { github } from "@src/utils/templates"; +import { useCommits } from "../api/api"; +import { useBitBucketCommits } from "../api/bitbucket-api"; +import { useGitLabCommits } from "../api/gitlab-api"; +import BitBranches from "../bitbucket/Branches"; +import { EnvFormModal } from "../EnvFormModal"; +import Branches from "../github/Branches"; +import GitBranches from "../gitlab/Branches"; +import { removeInitialUrl } from "../utils"; +const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: string; setEditedManifest: Dispatch> }) => { + console.log(sdlString); + const [token] = useAtom(remoteDeployStore.tokens); + const [, setIsInit] = useState(false); + const { control, watch, setValue } = useForm({ defaultValues: { services: [defaultService] } }); + const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); + useEffect(() => { + const { unsubscribe }: any = watch(data => { + const sdl = generateSdl(data.services as ServiceType[]); + setEditedManifest(sdl); + }); + try { + if (sdlString) { + const services = createAndValidateSdl(sdlString); + setValue("services", services as ServiceType[]); + } + } catch (error) { + setError("Error importing SDL"); + } + setIsInit(true); + return () => { + unsubscribe(); + }; + }, [watch, sdlString]); + const [, setError] = useState(null); + const createAndValidateSdl = (yamlStr: string) => { + try { + if (!yamlStr) return []; + const services = importSimpleSdl(yamlStr); + setError(null); + return services; + } catch (err) { + if (err.name === "YAMLException" || err.name === "CustomValidationError") { + setError(err.message); + } else if (err.name === "TemplateValidation") { + setError(err.message); + } else { + setError("Error while parsing SDL file"); + console.error(err); + } + } + }; + return github.content.includes(services?.[0]?.image) ? ( +
+ {" "} + {services[0]?.env?.length && {}} />}{" "} + {/* //type === github */}{" "} + {token.access_token && services[0]?.env?.find(e => e.key === "REPO_URL")?.value?.includes(token.type) && ( + <> + {" "} +
+ {" "} +
+ {" "} +

RollBack

A unique name for your web service.

{" "} +
{" "} + {" "} +
{" "} + {token?.type === "github" ? ( + + ) : token?.type === "gitlab" ? ( + + ) : ( + + )}{" "} + + )}{" "} +
+ ) : null; +}; +export default RemoteDeployUpdate; +const SelectCommit = ({ services, control }: { services: ServiceType[]; control: Control }) => { + const { data } = useCommits( + services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value?.replace("https://github.com/", "") ?? "", + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ?? "" + ); + const { data: labCommits } = useGitLabCommits( + services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value + ); + const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); + console.log(labCommits); + return ( + 0 + ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) + : labCommits?.length > 0 + ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) + : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })) + } + control={control} + /> + ); +}; +const Field = ({ data, control }: { data: any; control: Control }) => { + const [manual, setManual] = useState(false); + const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); + const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); + return ( +
+ {" "} + {manual ? ( + e.key === "COMMIT_HASH")?.value} + placeholder="Commit Hash" + onChange={e => { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; + if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { + update( + services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), + hash + ); + } else { + append(hash); + } + }} + /> + ) : ( + + )}{" "} + { + setManual(checked); + }} + checked={manual} + />{" "} +
+ ); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts new file mode 100644 index 000000000..d019d13f2 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -0,0 +1,46 @@ +import { Control } from "react-hook-form"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; + +export type OAuth = "github" | "gitlab" | "bitbucket"; +export const PROXY_API_URL_AUTH = "https://proxy-console-github.vercel.app"; +export const hiddenEnv = [ + "REPO_URL", + "BRANCH_NAME", + "ACCESS_TOKEN", + "BUILD_DIRECTORY", + "BUILD_COMMAND", + "NODE_VERSION", + "CUSTOM_SRC", + "COMMIT_HASH", + "GITLAB_PROJECT_ID", + "GITLAB_ACCESS_TOKEN", + "BITBUCKET_ACCESS_TOKEN", + "BITBUCKET_USER", + "DISABLE_PULL", + "GITHUB_ACCESS_TOKEN" +]; +export const REDIRECT_URL = "http://localhost:3000/new-deployment?step=edit-deployment&type=github"; +export type ServiceControl = Control; +export function appendEnv(key: string, value: string, isSecret: boolean, setValue: any, services: ServiceType[]) { + const previousEnv = services[0]?.env || []; + if (previousEnv.find(e => e.key === key)) { + previousEnv.map(e => { + if (e.key === key) { + e.value = value; + e.isSecret = isSecret; + + return e; + } + return e; + }); + } else { + previousEnv.push({ id: nanoid(), key, value, isSecret }); + } + setValue("services.0.env", previousEnv); +} + +export const removeInitialUrl = (url?: string) => { + return url?.split("/").slice(-2).join("/"); +}; diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx index 59dfc3bab..db718f080 100644 --- a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx +++ b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx @@ -66,6 +66,7 @@ type Props = { setValue: UseFormSetValue; gpuModels: GpuVendor[] | undefined; hasSecretOption?: boolean; + github?: boolean; }; export const SimpleServiceFormControl: React.FunctionComponent = ({ @@ -78,7 +79,8 @@ export const SimpleServiceFormControl: React.FunctionComponent = ({ setServiceCollapsed, setValue, gpuModels, - hasSecretOption + hasSecretOption, + github }) => { const [isEditingCommands, setIsEditingCommands] = useState(null); const [isEditingEnv, setIsEditingEnv] = useState(null); @@ -94,7 +96,6 @@ export const SimpleServiceFormControl: React.FunctionComponent = ({ const _isEditingPlacement = serviceIndex === isEditingPlacement; const { imageList, hasComponent, toggleCmp } = useSdlBuilder(); const wallet = useWallet(); - const onExpandClick = () => { setServiceCollapsed(prev => { if (expanded) { @@ -208,84 +209,86 @@ export const SimpleServiceFormControl: React.FunctionComponent = ({
-
- ( - - {imageList?.length ? ( -
- + + Docker Logo +
+ +
+ + + + {imageList.map(image => { + return ( + + {image} + + ); + })} + + + +
+ ) : ( + + Docker Image / OS + + Docker image of the container. +
+
+ Best practices: avoid using :latest image tags as Akash Providers heavily cache images. + + } + > + +
- - - - {imageList.map(image => { - return ( - - {image} - - ); - })} - - - -
- ) : ( - - Docker Image / OS - - Docker image of the container. -
-
- Best practices: avoid using :latest image tags as Akash Providers heavily cache images. - - } + } + placeholder="Example: mydockerimage:1.01" + value={field.value} + error={!!fieldState.error} + onChange={event => field.onChange((event.target.value || "").toLowerCase())} + startIconClassName="pl-2" + startIcon={Docker Logo} + endIcon={ + - - -
- } - placeholder="Example: mydockerimage:1.01" - value={field.value} - error={!!fieldState.error} - onChange={event => field.onChange((event.target.value || "").toLowerCase())} - startIconClassName="pl-2" - startIcon={Docker Logo} - endIcon={ - - - - } - data-testid="image-name-input" - /> - )} + + + } + data-testid="image-name-input" + /> + )} - - - )} - /> -
+ + + )} + /> +
+ )}
@@ -317,39 +320,43 @@ export const SimpleServiceFormControl: React.FunctionComponent = ({
-
- {(hasComponent("ssh") || hasComponent("ssh-toggle")) && ( - - {hasComponent("ssh-toggle") && ( - { - toggleCmp("ssh"); - setValue("hasSSHKey", !!checked); - }} - className="ml-4" - label="Expose SSH" - data-testid="ssh-toggle" - /> + {!github && ( + <> +
+ {(hasComponent("ssh") || hasComponent("ssh-toggle")) && ( + + {hasComponent("ssh-toggle") && ( + { + toggleCmp("ssh"); + setValue("hasSSHKey", !!checked); + }} + className="ml-4" + label="Expose SSH" + data-testid="ssh-toggle" + /> + )} + {hasComponent("ssh") && } + )} - {hasComponent("ssh") && } - - )} -
- -
+
+ +
- {hasComponent("command") && ( -
- + {hasComponent("command") && ( +
+ +
+ )}
- )} -
-
- -
+
+ +
+ + )} {hasComponent("service-count") && (
diff --git a/apps/deploy-web/src/store/remoteDeployStore.ts b/apps/deploy-web/src/store/remoteDeployStore.ts new file mode 100644 index 000000000..b0ee772b1 --- /dev/null +++ b/apps/deploy-web/src/store/remoteDeployStore.ts @@ -0,0 +1,19 @@ +import { atomWithStorage } from "jotai/utils"; + +import { OAuth } from "@src/components/remote-deploy/utils"; + +const tokens = atomWithStorage<{ + access_token: string | null; + refresh_token: string | null; + type: OAuth; +}>("remote-deploy-tokens", { + access_token: null, + refresh_token: null, + type: "github" +}); + +const remoteDeployStore = { + tokens +}; + +export default remoteDeployStore; diff --git a/apps/deploy-web/src/utils/constants.ts b/apps/deploy-web/src/utils/constants.ts index 5f113008d..0dad4c3a7 100644 --- a/apps/deploy-web/src/utils/constants.ts +++ b/apps/deploy-web/src/utils/constants.ts @@ -92,28 +92,28 @@ export const readableDenoms = { function getApiMainnetUrl() { if (ENV.API_MAINNET_BASE_URL) return ENV.API_MAINNET_BASE_URL; - if (typeof window === "undefined") return "http://localhost:3080"; + if (typeof window === "undefined") return "https://api.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) return productionMainnetApiUrl; - return "http://localhost:3080"; + return "https://api.cloudmos.io"; } function getApiTestnetUrl() { if (ENV.API_TESTNET_BASE_URL) return ENV.API_TESTNET_BASE_URL; - if (typeof window === "undefined") return "http://localhost:3080"; + if (typeof window === "undefined") return "https://api.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) return productionTestnetApiUrl; - return "http://localhost:3080"; + return "https://api.cloudmos.io"; } function getApiSandboxUrl() { if (ENV.API_SANDBOX_BASE_URL) return ENV.API_SANDBOX_BASE_URL; - if (typeof window === "undefined") return "http://localhost:3080"; + if (typeof window === "undefined") return "https://api.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) return productionSandboxApiUrl; - return "http://localhost:3080"; + return "https://api.cloudmos.io"; } function getApiUrl() { if (ENV.API_BASE_URL) return ENV.API_BASE_URL; - if (typeof window === "undefined") return "http://localhost:3080"; + if (typeof window === "undefined") return "https://api.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) { try { const _selectedNetworkId = localStorage.getItem("selectedNetworkId"); @@ -123,7 +123,7 @@ function getApiUrl() { return productionMainnetApiUrl; } } - return "http://localhost:3080"; + return "https://api.cloudmos.io"; } function getStatsAppUrl() { diff --git a/apps/deploy-web/src/utils/templates.ts b/apps/deploy-web/src/utils/templates.ts index aa2d89ccd..f663998d6 100644 --- a/apps/deploy-web/src/utils/templates.ts +++ b/apps/deploy-web/src/utils/templates.ts @@ -74,4 +74,50 @@ deployment: ` }; -export const hardcodedTemplates = [sdlBuilderTemplate, helloWorldTemplate]; +export const github = { + title: "GitHub", + name: "GitHub", + code: "github", + category: "General", + description: "Get started with a simple linux Ubuntu server!", + githubUrl: "", + valuesToChange: [], + content: `--- +version: "2.0" +services: + service-1: + image: hoomanhq/automation:0.417 + expose: + - port: 3000 + as: 80 + to: + - global: true + - port: 8080 + as: 8080 + to: + - global: true +profiles: + compute: + service-1: + resources: + cpu: + units: 2 + memory: + size: 12GB + storage: + - size: 8Gi + placement: + dcloud: + pricing: + service-1: + denom: uakt + amount: 1000 +deployment: + service-1: + dcloud: + profile: service-1 + count: 1 +` +}; + +export const hardcodedTemplates = [sdlBuilderTemplate, helloWorldTemplate, github]; diff --git a/apps/deploy-web/src/utils/urlUtils.ts b/apps/deploy-web/src/utils/urlUtils.ts index a77817be0..3f3737ae3 100644 --- a/apps/deploy-web/src/utils/urlUtils.ts +++ b/apps/deploy-web/src/utils/urlUtils.ts @@ -7,6 +7,7 @@ export type NewDeploymentParams = { redeploy?: string | number; templateId?: string; page?: "new-deployment" | "deploy-linux"; + type?: string; }; function getSelectedNetworkQueryParam() { @@ -75,9 +76,9 @@ export class UrlService { // New deployment static newDeployment = (params: NewDeploymentParams = {}) => { - const { step, dseq, redeploy, templateId } = params; + const { step, dseq, redeploy, templateId, type } = params; const page = params.page || "new-deployment"; - return `/${page}${appendSearchParams({ dseq, step, templateId, redeploy })}`; + return `/${page}${appendSearchParams({ dseq, step, templateId, redeploy, type })}`; }; } From 93053dba216e896a4ce1f48dc4dcb508dc0be1fc Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 16 Aug 2024 18:43:16 +0530 Subject: [PATCH 02/59] feat: Update Remote Deploy --- .../deployments/DeploymentDetail.tsx | 49 +- .../src/components/deployments/LeaseRow.tsx | 759 +++++++++--------- .../components/deployments/ManifestUpdate.tsx | 59 +- .../new-deployment/TemplateList.tsx | 1 - .../src/pages/deployments/[dseq]/index.tsx | 22 +- apps/deploy-web/src/utils/constants.ts | 4 +- 6 files changed, 470 insertions(+), 424 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index a86bcd08c..0f074cccc 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/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,8 +17,10 @@ import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery"; import { useProviderList } from "@src/queries/useProvidersQuery"; import { AnalyticsEvents } from "@src/utils/analytics"; import { RouteStepKeys } from "@src/utils/constants"; +import { deploymentData } from "@src/utils/deploymentData"; import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils"; import { cn } from "@src/utils/styleUtils"; +import { github } from "@src/utils/templates"; import { UrlService } from "@src/utils/urlUtils"; import Layout from "../layout/Layout"; import { Title } from "../shared/Title"; @@ -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(); @@ -131,6 +137,37 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin label: `Navigate tab ${value} in deployment detail` }); }; + const [remoteDeploy, setRemoteDeploy] = useState(false); + const [editedManifest, setEditedManifest] = useState(null); + const [deploymentVersion, setDeploymentVersion] = useState(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 && github.content.includes(editedManifest?.split("service-1:")?.[1]?.split("expose:")?.[0]?.split("image: ")?.[1])) { + setRemoteDeploy(true); + } + }, [editedManifest]); return ( @@ -174,6 +211,13 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin {activeTab === "EDIT" && deployment && leases && ( { @@ -208,6 +252,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin dseq={dseq} providers={providers || []} loadDeploymentDetail={loadDeploymentDetail} + remoteDeploy={remoteDeploy} /> ))} diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx index 5fe526d55..8af57fabc 100644 --- a/apps/deploy-web/src/components/deployments/LeaseRow.tsx +++ b/apps/deploy-web/src/components/deployments/LeaseRow.tsx @@ -41,427 +41,430 @@ type Props = { dseq: string; providers: ApiProviderList[]; loadDeploymentDetail: () => void; + remoteDeploy?: boolean; }; export type AcceptRefType = { getLeaseStatus: () => void; }; -export const LeaseRow = React.forwardRef(({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail }, ref) => { - const provider = providers?.find(p => p.owner === lease?.provider); - const { localCert } = useCertificate(); - const isLeaseActive = lease.state === "active"; - const [isServicesAvailable, setIsServicesAvailable] = useState(false); - const { favoriteProviders, updateFavoriteProviders } = useLocalNotes(); - const isFavorite = favoriteProviders.some(x => lease?.provider === x); - const { - data: leaseStatus, - error, - refetch: getLeaseStatus, - isLoading: isLoadingLeaseStatus - } = useLeaseStatus(provider?.hostUri || "", lease, { - enabled: isLeaseActive && !isServicesAvailable && !!provider?.hostUri && !!localCert, - refetchInterval: 10_000, - onSuccess: leaseStatus => { - if (leaseStatus) { - checkIfServicesAreAvailable(leaseStatus); +export const LeaseRow = React.forwardRef( + ({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail, remoteDeploy }, ref) => { + const provider = providers?.find(p => p.owner === lease?.provider); + const { localCert } = useCertificate(); + const isLeaseActive = lease.state === "active"; + const [isServicesAvailable, setIsServicesAvailable] = useState(false); + const { favoriteProviders, updateFavoriteProviders } = useLocalNotes(); + const isFavorite = favoriteProviders.some(x => lease?.provider === x); + const { + data: leaseStatus, + error, + refetch: getLeaseStatus, + isLoading: isLoadingLeaseStatus + } = useLeaseStatus(provider?.hostUri || "", lease, { + enabled: isLeaseActive && !isServicesAvailable && !!provider?.hostUri && !!localCert, + refetchInterval: 10_000, + onSuccess: leaseStatus => { + if (leaseStatus) { + checkIfServicesAreAvailable(leaseStatus); + } } + }); + const { + data: providerStatus, + isLoading: isLoadingProviderStatus, + refetch: getProviderStatus + } = useProviderStatus(provider?.hostUri || "", { + enabled: false, + retry: false + }); + const isLeaseNotFound = error && (error as string).includes && (error as string).includes("lease not found") && isLeaseActive; + const servicesNames = useMemo(() => (leaseStatus ? Object.keys(leaseStatus.services) : []), [leaseStatus]); + const [isSendingManifest, setIsSendingManifest] = useState(false); + const { data: bid } = useBidInfo(lease.owner, lease.dseq, lease.gseq, lease.oseq, lease.provider); + const { enqueueSnackbar } = useSnackbar(); + + React.useImperativeHandle(ref, () => ({ + getLeaseStatus: loadLeaseStatus + })); + + const loadLeaseStatus = useCallback(() => { + if (isLeaseActive && provider && localCert) { + getLeaseStatus(); + getProviderStatus(); + } + }, [isLeaseActive, provider, localCert, getLeaseStatus, getProviderStatus]); + + const parsedManifest = useMemo(() => yaml.load(deploymentManifest), [deploymentManifest]); + + const checkIfServicesAreAvailable = leaseStatus => { + const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : []; + const isServicesAvailable = + servicesNames.length > 0 + ? servicesNames + .map(n => leaseStatus.services[n]) + .every(service => { + return service.available > 0; + }) + : false; + setIsServicesAvailable(isServicesAvailable); + }; + + useEffect(() => { + loadLeaseStatus(); + }, [lease, provider, localCert, loadLeaseStatus]); + + function handleEditManifestClick(ev) { + ev.preventDefault(); + setActiveTab("EDIT"); } - }); - const { - data: providerStatus, - isLoading: isLoadingProviderStatus, - refetch: getProviderStatus - } = useProviderStatus(provider?.hostUri || "", { - enabled: false, - retry: false - }); - const isLeaseNotFound = error && (error as string).includes && (error as string).includes("lease not found") && isLeaseActive; - const servicesNames = useMemo(() => (leaseStatus ? Object.keys(leaseStatus.services) : []), [leaseStatus]); - const [isSendingManifest, setIsSendingManifest] = useState(false); - const { data: bid } = useBidInfo(lease.owner, lease.dseq, lease.gseq, lease.oseq, lease.provider); - const { enqueueSnackbar } = useSnackbar(); - - React.useImperativeHandle(ref, () => ({ - getLeaseStatus: loadLeaseStatus - })); - - const loadLeaseStatus = useCallback(() => { - if (isLeaseActive && provider && localCert) { - getLeaseStatus(); - getProviderStatus(); - } - }, [isLeaseActive, provider, localCert, getLeaseStatus, getProviderStatus]); - - const parsedManifest = useMemo(() => yaml.load(deploymentManifest), [deploymentManifest]); - - const checkIfServicesAreAvailable = leaseStatus => { - const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : []; - const isServicesAvailable = - servicesNames.length > 0 - ? servicesNames - .map(n => leaseStatus.services[n]) - .every(service => { - return service.available > 0; - }) - : false; - setIsServicesAvailable(isServicesAvailable); - }; - - useEffect(() => { - loadLeaseStatus(); - }, [lease, provider, localCert, loadLeaseStatus]); - - function handleEditManifestClick(ev) { - ev.preventDefault(); - setActiveTab("EDIT"); - } - async function sendManifest() { - setIsSendingManifest(true); - try { - const manifest = deploymentData.getManifest(parsedManifest, true); + async function sendManifest() { + setIsSendingManifest(true); + try { + const manifest = deploymentData.getManifest(parsedManifest, true); - await sendManifestToProvider(provider as ApiProviderList, manifest, dseq, localCert as LocalCert); + await sendManifestToProvider(provider as ApiProviderList, manifest, dseq, localCert as LocalCert); - enqueueSnackbar(, { variant: "success", autoHideDuration: 10_000 }); + enqueueSnackbar(, { variant: "success", autoHideDuration: 10_000 }); - loadDeploymentDetail(); - } catch (err) { - enqueueSnackbar(, { variant: "error", autoHideDuration: null }); + loadDeploymentDetail(); + } catch (err) { + enqueueSnackbar(, { variant: "error", autoHideDuration: null }); + } + setIsSendingManifest(false); } - setIsSendingManifest(false); - } - const onStarClick = event => { - event.preventDefault(); - event.stopPropagation(); + const onStarClick = event => { + event.preventDefault(); + event.stopPropagation(); - const newFavorites = isFavorite ? favoriteProviders.filter(x => x !== lease.provider) : favoriteProviders.concat([lease.provider]); + const newFavorites = isFavorite ? favoriteProviders.filter(x => x !== lease.provider) : favoriteProviders.concat([lease.provider]); - updateFavoriteProviders(newFavorites); - }; + updateFavoriteProviders(newFavorites); + }; - const gpuModels = bid && bid.bid.resources_offer.flatMap(x => getGpusFromAttributes(x.resources.gpu.attributes)); + const gpuModels = bid && bid.bid.resources_offer.flatMap(x => getGpusFromAttributes(x.resources.gpu.attributes)); - const sshInstructions = useMemo(() => { - return servicesNames.reduce((acc, serviceName) => { - if (!sshVmImages.has(get(parsedManifest, ["services", serviceName, "image"]))) { - return acc; - } - - const exposes = leaseStatus.forwarded_ports[serviceName]; - - return exposes.reduce((exposesAcc, expose) => { - if (expose.port !== 22) { - return exposesAcc; + const sshInstructions = useMemo(() => { + return servicesNames.reduce((acc, serviceName) => { + if (!sshVmImages.has(get(parsedManifest, ["services", serviceName, "image"]))) { + return acc; } - if (exposesAcc) { - exposesAcc += "\n"; - } + const exposes = leaseStatus.forwarded_ports[serviceName]; - return exposesAcc.concat(`ssh root@${expose.host} -p ${expose.externalPort} -i ~/.ssh/id_rsa`); - }, acc); - }, ""); - }, [parsedManifest, servicesNames, leaseStatus]); + return exposes.reduce((exposesAcc, expose) => { + if (expose.port !== 22) { + return exposesAcc; + } - return ( - - -
-
- {lease.state} - + if (exposesAcc) { + exposesAcc += "\n"; + } - GSEQ: - {lease.gseq} + return exposesAcc.concat(`ssh root@${expose.host} -p ${expose.externalPort} -i ~/.ssh/id_rsa`); + }, acc); + }, ""); + }, [parsedManifest, servicesNames, leaseStatus]); - OSEQ: - {lease.oseq} -
+ return ( + + +
+
+ {lease.state} + + + GSEQ: + {lease.gseq} - {isLeaseActive && ( -
- setActiveTab("LOGS")}> - View logs - + OSEQ: + {lease.oseq}
- )} -
- - -
-
- -
- - - -
- } - /> - {isLeaseActive && ( + {isLeaseActive && ( +
+ setActiveTab("LOGS")}> + View logs + +
+ )} +
+ + +
+
+ +
- {isLoadingProviderStatus && } - {providerStatus && ( -
- - {providerStatus.name?.length > 25 ? getSplitText(providerStatus.name, 10, 10) : providerStatus.name} - +
+ + +
+ } + /> + {isLeaseActive && ( + + {isLoadingProviderStatus && } + {providerStatus && (
- + + {providerStatus.name?.length > 25 ? getSplitText(providerStatus.name, 10, 10) : providerStatus.name} + - {provider?.isAudited && ( -
- -
- )} +
+ + + {provider?.isAudited && ( +
+ +
+ )} +
-
- )} + )} + + } + /> + )} +
+ + {isLeaseNotFound && ( + + The lease was not found on this provider. This can happen if no manifest was sent to the provider. To send one you can update your deployment in + the VIEW / EDIT MANIFEST tab. + {deploymentManifest && ( + <> +
+ OR +
+ - } - /> + )} + )} -
- - {isLeaseNotFound && ( - - The lease was not found on this provider. This can happen if no manifest was sent to the provider. To send one you can update your deployment in the{" "} - VIEW / EDIT MANIFEST tab. - {deploymentManifest && ( - <> -
- OR -
- - - )} - - )} - - {!leaseStatus && isLoadingLeaseStatus && } - - {isLeaseActive && - leaseStatus && - leaseStatus.services && - servicesNames - .map(n => leaseStatus.services[n]) - .map((service, i) => ( -
1 && i !== servicesNames.length - 1 - })} - key={`${service.name}_${i}`} - > -
- - {isLoadingLeaseStatus || !isServicesAvailable ? ( -
- -
- ) : ( -
- - Workloads can take some time to spin up. If you see an error when browsing the uri, it is recommended to refresh and wait a bit. - Check the{" "} - setActiveTab("LOGS")} className="text-white"> - logs - {" "} - for more information. - - } - > - - -
- )} - {isServicesAvailable && ( -
- -
- )} -
+ {!leaseStatus && isLoadingLeaseStatus && } + {isLeaseActive && + leaseStatus && + leaseStatus.services && + servicesNames + .map(n => leaseStatus.services[n]) + .map((service, i) => (
0 || (leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0) + className={cn("mt-2", { + ["border-b pb-2"]: servicesNames.length > 1 && i !== servicesNames.length - 1 })} + key={`${service.name}_${i}`} > -
- Available:  - 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> - {service.available} - -
-
- Ready Replicas:  - 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> - {service.ready_replicas} - +
+ + {isLoadingLeaseStatus || !isServicesAvailable ? ( +
+ +
+ ) : ( +
+ + Workloads can take some time to spin up. If you see an error when browsing the uri, it is recommended to refresh and wait a bit. + Check the{" "} + setActiveTab("LOGS")} className="text-white"> + logs + {" "} + for more information. + + } + > + + +
+ )} + + {isServicesAvailable && ( +
+ +
+ )}
-
- Total:  - 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> - {service.total} - + +
0 || (leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0) + })} + > +
+ Available:  + 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> + {service.available} + +
+
+ Ready Replicas:  + 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> + {service.ready_replicas} + +
+
+ Total:  + 0 ? "success" : "destructive"} className="h-3 px-1 text-xs leading-3"> + {service.total} + +
-
- {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && ( -
0 })}> - - {leaseStatus.forwarded_ports[service.name].map(p => ( -
- {p.host ? ( - - - {p.port}:{p.externalPort} - + {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && ( +
0 })}> + + {leaseStatus.forwarded_ports[service.name].map(p => ( +
+ {p.host ? ( + + + {p.port}:{p.externalPort} + + + + ) : ( + {`${p.port}:${p.externalPort}`} + )} +
+ ))} +
+ } + /> +
+ )} + + {service.uris?.length > 0 && ( + <> +
+ +
    + {service.uris.map(uri => { + return ( +
  • + + {uri} - ) : ( - {`${p.port}:${p.externalPort}`} - )} -
- ))} -
- } - /> -
- )} +    + + + ); + })} + +
+ + )} +
+ ))} + + {isLeaseActive && leaseStatus && leaseStatus.ips && ( +
+ +
    + {servicesNames + .flatMap(service => leaseStatus.ips[service]) + .filter(Boolean) + .map(ip => ( +
  • + + + {ip.IP}:{ip.ExternalPort} + + + +    + +
    IP: {ip.IP}
    +
    External Port: {ip.ExternalPort}
    +
    Port: {ip.Port}
    +
    Protocol: {ip.Protocol}
    + + } + > + +     + +
    • + ))} +
+
+ )} - {service.uris?.length > 0 && ( - <> -
- -
    - {service.uris.map(uri => { - return ( -
  • - - {uri} - - -    - -
    • - ); - })} -
-
- - )} -
- ))} - - {isLeaseActive && leaseStatus && leaseStatus.ips && ( -
- -
    - {servicesNames - .flatMap(service => leaseStatus.ips[service]) - .filter(Boolean) - .map(ip => ( -
  • - - - {ip.IP}:{ip.ExternalPort} - - - -    - -
    IP: {ip.IP}
    -
    External Port: {ip.ExternalPort}
    -
    Port: {ip.Port}
    -
    Protocol: {ip.Protocol}
    - - } - > - -     - -
    • - ))} -
-
- )} - - {sshInstructions && ( -
-
SSH Instructions:
-
    -
  • - Open a command terminal on your machine and copy this command into it: - -
    • -
  • - Replace ~/.ssh/id_rsa with the path to the private key (stored on your local machine) corresponding to the public key you provided earlier -
    • -
  • Run the command
    • -
-
- )} - - - ); -}); + {sshInstructions && ( +
+
SSH Instructions:
+
    +
  • + Open a command terminal on your machine and copy this command into it: + +
    • +
  • + Replace ~/.ssh/id_rsa with the path to the private key (stored on your local machine) corresponding to the public key you provided earlier +
    • +
  • Run the command
    • +
+
+ )} + + + ); + } +); diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx index ee989337b..5e04ef492 100644 --- a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx +++ b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx @@ -19,9 +19,10 @@ import { DeploymentDto, LeaseDto } from "@src/types/deployment"; import { ApiProviderList } from "@src/types/provider"; import { AnalyticsEvents } from "@src/utils/analytics"; import { deploymentData } from "@src/utils/deploymentData"; -import { getDeploymentLocalData, saveDeploymentManifest } from "@src/utils/deploymentLocalDataUtils"; +import { 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"; @@ -29,39 +30,38 @@ type Props = { deployment: DeploymentDto; leases: LeaseDto[]; closeManifestEditor: () => void; + remoteDeploy: boolean; + showOutsideDeploymentMessage: boolean; + editedManifest: string; + deploymentVersion: string | null; + setDeploymentVersion: (value: React.SetStateAction) => void; + setEditedManifest: (value: React.SetStateAction) => void; + setShowOutsideDeploymentMessage: (value: React.SetStateAction) => void; }; -export const ManifestUpdate: React.FunctionComponent = ({ deployment, leases, closeManifestEditor }) => { +export const ManifestUpdate: React.FunctionComponent = ({ + deployment, + leases, + closeManifestEditor, + remoteDeploy, + showOutsideDeploymentMessage, + editedManifest, + deploymentVersion, + setDeploymentVersion, + setEditedManifest, + setShowOutsideDeploymentMessage +}) => { const [parsingError, setParsingError] = useState(null); - const [deploymentVersion, setDeploymentVersion] = useState(null); - const [editedManifest, setEditedManifest] = useState(""); + console.log(showOutsideDeploymentMessage); + const [isSendingManifest, setIsSendingManifest] = useState(false); - const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false); + const { settings } = useSettings(); const { address, signAndBroadcastTx } = useWallet(); const { data: providers } = useProviderList(); const { localCert, isLocalCertMatching, createCertificate, isCreatingCert } = useCertificate(); const { enqueueSnackbar, closeSnackbar } = useSnackbar(); - useEffect(() => { - const init = async () => { - const localDeploymentData = getDeploymentLocalData(deployment.dseq); - - if (localDeploymentData && localDeploymentData.manifest) { - setEditedManifest(localDeploymentData?.manifest); - - const yamlVersion = yaml.load(localDeploymentData?.manifest); - const version = await deploymentData.getManifestVersion(yamlVersion); - - setDeploymentVersion(version); - } else { - setShowOutsideDeploymentMessage(true); - } - }; - - init(); - }, [deployment]); - /** * Validate the manifest periodically */ @@ -233,6 +233,7 @@ export const ManifestUpdate: React.FunctionComponent = ({ deployment, lea disabled={!!parsingError || !editedManifest || !providers || isSendingManifest || deployment.state !== "active"} onClick={() => handleUpdateClick()} size="sm" + type="button" > Update Deployment @@ -243,10 +244,12 @@ export const ManifestUpdate: React.FunctionComponent = ({ deployment, lea {parsingError && {parsingError}} - - - - + + {!remoteDeploy && ( + + + + )}
)} diff --git a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx index efc044814..1a4d52c1d 100644 --- a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx +++ b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx @@ -13,7 +13,6 @@ import sdlStore from "@src/store/sdlStore"; import { ApiTemplate } from "@src/types"; import { RouteStepKeys } from "@src/utils/constants"; import { cn } from "@src/utils/styleUtils"; -import { helloWorldTemplate } from "@src/utils/templates"; import { domainName, NewDeploymentParams, UrlService } from "@src/utils/urlUtils"; import { CustomNextSeo } from "../shared/CustomNextSeo"; import { TemplateBox } from "../templates/TemplateBox"; diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 29f44ab3a..2197904d0 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -1,19 +1,15 @@ import { DeploymentDetail } from "@src/components/deployments/DeploymentDetail"; -type Props = { - dseq: string; -}; - -const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { - return ; +const DeploymentDetailPage: React.FunctionComponent = () => { + return ; }; export default DeploymentDetailPage; -export async function getServerSideProps({ params }) { - return { - props: { - dseq: params?.dseq - } - }; -} +// export async function getServerSideProps({ params }) { +// return { +// props: { +// dseq: params?.dseq +// } +// }; +// } diff --git a/apps/deploy-web/src/utils/constants.ts b/apps/deploy-web/src/utils/constants.ts index 0dad4c3a7..675e321ab 100644 --- a/apps/deploy-web/src/utils/constants.ts +++ b/apps/deploy-web/src/utils/constants.ts @@ -138,14 +138,14 @@ function getProviderProxyHttpUrl() { if (typeof window === "undefined") return "http://localhost:3040"; if (window.location?.hostname === "deploybeta.cloudmos.io") return "https://deployproxybeta.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) return "https://providerproxy.cloudmos.io"; - return "http://localhost:3040"; + return "https://providerproxy.cloudmos.io"; } function getProviderProxyWsUrl() { if (typeof window === "undefined") return "ws://localhost:3040"; if (window.location?.hostname === "deploybeta.cloudmos.io") return "wss://deployproxybeta.cloudmos.io"; if (productionHostnames.includes(window.location?.hostname)) return "wss://providerproxy.cloudmos.io"; - return "ws://localhost:3040"; + return "wss://providerproxy.cloudmos.io"; } export let selectedNetworkId = ""; From 774ed43186c5617b50a42143d7f8077bca75236a Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 16 Aug 2024 23:46:21 +0530 Subject: [PATCH 03/59] update 4 files and create 2 files --- .../src/components/remote-deploy/Details.tsx | 2 +- .../remote-deploy/FrameworkDetection.tsx | 122 +++++++++++ .../src/components/remote-deploy/api/api.ts | 25 ++- .../remote-deploy/github/Github.tsx | 2 - .../components/remote-deploy/github/Repos.tsx | 205 +++++++++++++----- .../components/remote-deploy/remoteTypes.ts | 17 ++ 6 files changed, 314 insertions(+), 59 deletions(-) create mode 100644 apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/remoteTypes.ts diff --git a/apps/deploy-web/src/components/remote-deploy/Details.tsx b/apps/deploy-web/src/components/remote-deploy/Details.tsx index fbe77bb01..110316e37 100644 --- a/apps/deploy-web/src/components/remote-deploy/Details.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Details.tsx @@ -54,7 +54,7 @@ const Details = ({ services, setValue }) => { appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} label="Node Version" - description="By default we use 21, Change the version if needed" + description="By default we use 20, Change the version if needed" placeholder="eg. 21" /> diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx new file mode 100644 index 000000000..957dd8e6b --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -0,0 +1,122 @@ +import { useState } from "react"; + +import { ServiceType } from "@src/types"; +import { usePackageJson } from "./api/api"; +import { useBitPackageJson } from "./api/bitbucket-api"; +import { useGitlabPackageJson } from "./api/gitlab-api"; +import { removeInitialUrl } from "./utils"; +const frameworks = [ + { + title: "React", + value: "react", + image: "https://static-00.iconduck.com/assets.00/react-icon-512x456-2ynx529a.png" + }, + { + title: "Vue", + value: "vue", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/1200px-Vue.js_Logo.svg.png" + }, + { + title: "Angular", + value: "angular", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png" + }, + { + title: "Svelte", + value: "svelte", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png" + }, + { + title: "Next.js", + value: "next", + image: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/nextjs-icon.png" + }, + + { + title: "Astro", + value: "astro", + image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" + }, + { + title: "Other", + value: "other" + } +]; +const useFramework = ({ services, setValue, repos, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { + const [data, setData] = useState(null); + const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; + + const setValueHandler = (data: any) => { + setData(data); + if (data?.dependencies) { + const cpus = (Object.keys(data?.dependencies ?? {}).length / 10 / 2).toFixed(1); + console.log("c", cpus); + + setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); + } + }; + + const { isLoading } = usePackageJson(setValueHandler, removeInitialUrl(selected), subFolder); + const { isLoading: gitlabLoading } = useGitlabPackageJson( + setValueHandler, + repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id + ); + + const { isLoading: bitbucketLoading } = useBitPackageJson( + setValueHandler, + removeInitialUrl(selected), + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value + ); + + return { + currentFramework: frameworks.find(f => data?.scripts?.dev?.includes(f.value)), + isLoading: isLoading || gitlabLoading || bitbucketLoading + }; +}; + +export default useFramework; + +//
+//
+//

Build Framework

+//

Select your build framework

+//
+ +// +//
diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 0569c7801..4647c519d 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -4,6 +4,7 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; +import { IGithubDirectoryItem } from "../remoteTypes"; import { PROXY_API_URL_AUTH } from "../utils"; const Github_API_URL = "https://api.github.com"; @@ -130,12 +131,12 @@ export const useCommits = (repo: string, branch: string) => { }); }; -export const usePackageJson = (onSettled: (data: any) => void, repo?: string) => { +export const usePackageJson = (onSettled: (data: any) => void, repo?: string, subFolder?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ - queryKey: ["packageJson", repo], + queryKey: ["packageJson", repo, subFolder], queryFn: async () => { - const response = await axiosInstance.get(`/repos/${repo}/contents/package.json`, { + const response = await axiosInstance.get(`/repos/${repo}/contents/${subFolder ? `${subFolder}/` : ""}package.json`, { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -151,3 +152,21 @@ export const usePackageJson = (onSettled: (data: any) => void, repo?: string) => } }); }; +export const useSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + return useQuery({ + queryKey: ["srcFolders", repo], + queryFn: async () => { + const response = await axiosInstance.get(`/repos/${repo}/contents`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "github" && !!repo, + onSettled: data => { + onSettled(data); + } + }); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index ad6f88d18..881f790c4 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -4,7 +4,6 @@ import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { useRepos } from "../api/api"; import Branches from "./Branches"; -import Framework from "./Framework"; import Repos from "./Repos"; const Github = ({ @@ -37,7 +36,6 @@ const Github = ({ profile={profile} /> - ); }; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index f4855cd54..c55643a2e 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -1,12 +1,29 @@ -import { Dispatch, useState } from "react"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { GithubCircle, Lock, Plus } from "iconoir-react"; +import { Dispatch, useEffect, useState } from "react"; +import { + Button, + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, + Input, + Label, + RadioGroup, + RadioGroupItem, + Spinner +} from "@akashnetwork/ui/components"; +import { Folder, GithubCircle, Lock } from "iconoir-react"; import { useAtom } from "jotai"; import { nanoid } from "nanoid"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { ServiceType } from "@src/types"; -import { handleLogin } from "../api/api"; +import { useSrcFolders } from "../api/api"; +import CustomInput from "../CustomInput"; +import useFramework from "../FrameworkDetection"; +import { IGithubDirectoryItem } from "../remoteTypes"; +import { appendEnv, removeInitialUrl } from "../utils"; +// import { handleLogin } from "../api/api"; const Repos = ({ repos, setValue, @@ -23,10 +40,34 @@ const Repos = ({ deploymentName: string; profile: any; }) => { - const [open, setOpen] = useState(false); - const [token] = useAtom(remoteDeployStore.tokens); + const [search, setSearch] = useState(""); + const [filteredRepos, setFilteredRepos] = useState(repos); + const currentRepo = services?.[0]?.env?.find(e => e.key === "REPO_URL"); + const repo = repos?.find(r => r.html_url === currentRepo?.value); + const [directory, setDirectory] = useState(null); + const currentFolder = services?.[0]?.env?.find(e => e.key === "FRONTEND_FOLDER"); + const { currentFramework, isLoading: isFrameworkLoading } = useFramework({ + services, + setValue, + repos, + subFolder: currentFolder?.value + }); + + console.log(currentFramework, isFrameworkLoading, "currentFramework"); + + const { isLoading: isGettingDirectory } = useSrcFolders(data => { + console.log(data, "data"); + if (data?.length > 0) { + setDirectory(data); + } else { + setDirectory(null); + } + }, removeInitialUrl(currentRepo?.value)); + useEffect(() => { + setFilteredRepos(repos); + }, [repos]); return (
@@ -34,57 +75,115 @@ const Repos = ({

The Repository Branch used for your private service

- { + setSearch(e.target.value); + setFilteredRepos(repos.filter((repo: any) => repo.name.includes(e.target.value))); + }} + /> + +
+ {filteredRepos ?.filter((repo: any) => repo.owner?.login === profile?.login) ?.map((repo: any) => ( - -
- - {repo.name} - - {repo.private && } +
+
+
+
+ {currentFramework && currentRepo?.value === repo.html_url ? ( + {currentFramework.title} + ) : ( + + )} +

{repo.name}

+ {repo.private && } +
+
+
- + {isGettingDirectory && currentRepo?.value === repo.html_url && ( +
+

Fetching Directory

+ +
+ )} + {currentRepo?.value === repo.html_url && + !isGettingDirectory && + (directory && directory?.length > 0 ? ( +
+
+

Select Directory

+

{currentFramework?.title}

+
+ + { + appendEnv("FRONTEND_FOLDER", value, false, setValue, services); + }} + value={currentFolder?.value} + > + {directory + ?.filter(item => item.type === "dir") + .map(item => ( +
+ + +
+ ))} + +
+ ) : ( + appendEnv("FRONTEND_FOLDER", e.target.value, false, setValue, services)} + label="Frontend Folder" + description="By default we use ./, Change the version if needed" + placeholder="eg. app" + /> + ))} +
))} - {/* add more repos */} - - - + {isLoading && ( +
+ +
+ )} + {filteredRepos.length === 0 &&
No Repository Found
} +
+ +
); }; diff --git a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts new file mode 100644 index 000000000..4bc96b64e --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts @@ -0,0 +1,17 @@ +export interface IGithubDirectoryItem { + type: "file" | "dir"; + size: number; + name: string; + path: string; + content?: string; + sha: string; + url: string; + git_url: string; + html_url: string; + download_url: string; + _links: { + git: string; + html: string; + self: string; + }; +} From 2c8636dce466be235cc47f5ae59235ff528fbb28 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 00:03:13 +0530 Subject: [PATCH 04/59] feat: new Repo selection --- .../remote-deploy/FrameworkDetection.tsx | 2 +- .../remote-deploy/bitbucket/Bit.tsx | 25 ++++++++++++--- .../components/remote-deploy/github/Repos.tsx | 31 ++++++++++++++----- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index 957dd8e6b..cfe0f0b4b 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -49,7 +49,7 @@ const useFramework = ({ services, setValue, repos, subFolder }: { services: Serv const setValueHandler = (data: any) => { setData(data); if (data?.dependencies) { - const cpus = (Object.keys(data?.dependencies ?? {}).length / 10 / 2).toFixed(1); + const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); console.log("c", cpus); setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx index 0441e542d..d924cf145 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx @@ -2,10 +2,9 @@ import React, { Dispatch, useState } from "react"; import { ServiceType } from "@src/types"; import { useBitReposByWorkspace } from "../api/bitbucket-api"; -import Framework from "../github/Framework"; +import Repos from "../github/Repos"; import { ServiceControl } from "../utils"; import Branches from "./Branches"; -import Repos from "./Repos"; import WorkSpaces from "./Workspaces"; const Bit = ({ @@ -32,9 +31,27 @@ const Bit = ({ return ( <> - + ({ + name: repo.name, + id: repo.id, + default_branch: repo?.mainbranch?.name, + html_url: repo?.links?.html?.href, + userName: profile?.username, + private: repo?.is_private + })) ?? [] + } + type="bitbucket" + setValue={setValue} + setDeploymentName={setDeploymentName} + deploymentName={deploymentName} + profile={profile} + services={services} + /> - + {/* */} ); }; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index c55643a2e..646ee064c 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -30,7 +30,8 @@ const Repos = ({ isLoading, services, setDeploymentName, - profile + profile, + type = "github" }: { repos: any; setValue: any; @@ -39,6 +40,7 @@ const Repos = ({ setDeploymentName: Dispatch; deploymentName: string; profile: any; + type?: "github" | "gitlab" | "bitbucket"; }) => { const [token] = useAtom(remoteDeployStore.tokens); const [search, setSearch] = useState(""); @@ -119,11 +121,24 @@ const Repos = ({ size="sm" disabled={currentRepo?.value === repo.html_url} onClick={() => { - setValue("services.0.env", [ - { id: nanoid(), key: "REPO_URL", value: repo.html_url, isSecret: false }, - { id: nanoid(), key: "BRANCH_NAME", value: repo.default_branch, isSecret: false }, - { id: nanoid(), key: "GITHUB_ACCESS_TOKEN", value: token?.access_token, isSecret: false } - ]); + const repoUrl = { id: nanoid(), key: "REPO_URL", value: repo.html_url, isSecret: false }; + const branchName = { id: nanoid(), key: "BRANCH_NAME", value: repo.default_branch, isSecret: false }; + if (type === "github") { + setValue("services.0.env", [ + repoUrl, + branchName, + + { id: nanoid(), key: "GITHUB_ACCESS_TOKEN", value: token?.access_token, isSecret: false } + ]); + } + if (type === "bitbucket") { + setValue("services.0.env", [ + repoUrl, + branchName, + { id: nanoid(), key: "BITBUCKET_ACCESS_TOKEN", value: token?.access_token, isSecret: false }, + { id: nanoid(), key: "BITBUCKET_USER", value: repo?.username, isSecret: false } + ]); + } setDeploymentName(repo.name); }} > @@ -142,7 +157,7 @@ const Repos = ({

Select Directory

-

{currentFramework?.title}

+ {/*

{currentFramework?.title}

*/}
)} - {filteredRepos.length === 0 &&
No Repository Found
} + {filteredRepos?.length === 0 &&
No Repository Found
}
From 1dec0b3f080c87818ce7a5c47cacf720084b93c9 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 00:42:01 +0530 Subject: [PATCH 05/59] feat: Bitbucket Repo Selection --- .../remote-deploy/FrameworkDetection.tsx | 1 - .../src/components/remote-deploy/api/api.ts | 5 ++-- .../remote-deploy/api/bitbucket-api.ts | 21 ++++++++++++++++ .../remote-deploy/api/gitlab-api.ts | 1 - .../remote-deploy/bitbucket/Repos.tsx | 1 - .../remote-deploy/github/Framework.tsx | 1 - .../components/remote-deploy/github/Repos.tsx | 24 ++++++++++++------- .../components/remote-deploy/gitlab/Repos.tsx | 1 - .../components/remote-deploy/remoteTypes.ts | 2 +- .../update/RemoteDeployUpdate.tsx | 3 +-- 10 files changed, 41 insertions(+), 19 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index cfe0f0b4b..3a3cbca15 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -50,7 +50,6 @@ const useFramework = ({ services, setValue, repos, subFolder }: { services: Serv setData(data); if (data?.dependencies) { const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); - console.log("c", cpus); setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); } diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 4647c519d..0c38606ac 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -58,12 +58,12 @@ export const useRepos = () => { }, onError: (error: AxiosError<{ message: string }>) => { if (error?.response?.data?.message === "Bad credentials") { - console.log("Bad credentials"); + console.log(error); } }, onSettled: data => { if (data?.message === "Bad credentials") { - console.log("Bad credentials"); + console.log(data); } }, enabled: !!token?.access_token && token.type === "github" @@ -95,7 +95,6 @@ export const useFetchAccessToken = () => { export const useBranches = (repo?: string, fetch?: boolean) => { const [token] = useAtom(remoteDeployStore.tokens); - console.log(fetch); return useQuery({ queryKey: ["branches", repo, token?.access_token], diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index a6aeb6fe0..9969d1cd1 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -170,3 +170,24 @@ export const useBitPackageJson = (onSettled: (data: any) => void, repo?: string, } }); }; + +export const useBitSrcFolders = (onSettled: (data: any) => void, repo?: string, branch?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + console.log(repo, branch, "repo, branch"); + return useQuery({ + queryKey: ["src-folders-bit", repo, branch], + // root folder + queryFn: async () => { + const response = await axiosInstance.get(`/repositories/${repo}/src/${branch}/.`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "bitbucket" && !!repo && !!branch, + onSettled: data => { + onSettled(data?.values); + } + }); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 59d9cb760..5fd2caa8a 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -158,7 +158,6 @@ export const useGitLabCommits = (repo?: string, branch?: string) => { export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: string) => { const [token] = useAtom(remoteDeployStore.tokens); - console.log(repo); return useQuery({ queryKey: ["packageJson", repo], diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx index 052c18521..6fa4b4ad7 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx @@ -20,7 +20,6 @@ const Repos = ({ profile: any; }) => { const [open, setOpen] = useState(false); - console.log(repos); const [token] = useAtom(remoteDeployStore.tokens); return ( diff --git a/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx b/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx index 5f1dba834..2d6c3506e 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx @@ -55,7 +55,6 @@ const Framework = ({ services, setValue, repos }: { services: ServiceType[]; set setData(data); if (data?.dependencies) { const cpus = (Object.keys(data?.dependencies ?? {}).length / 10 / 2).toFixed(1); - console.log("c", cpus); setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); } diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 646ee064c..f0c08e573 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -19,6 +19,7 @@ import { nanoid } from "nanoid"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { ServiceType } from "@src/types"; import { useSrcFolders } from "../api/api"; +import { useBitSrcFolders } from "../api/bitbucket-api"; import CustomInput from "../CustomInput"; import useFramework from "../FrameworkDetection"; import { IGithubDirectoryItem } from "../remoteTypes"; @@ -49,24 +50,30 @@ const Repos = ({ const repo = repos?.find(r => r.html_url === currentRepo?.value); const [directory, setDirectory] = useState(null); const currentFolder = services?.[0]?.env?.find(e => e.key === "FRONTEND_FOLDER"); - const { currentFramework, isLoading: isFrameworkLoading } = useFramework({ + const { currentFramework } = useFramework({ services, setValue, repos, subFolder: currentFolder?.value }); - console.log(currentFramework, isFrameworkLoading, "currentFramework"); - - const { isLoading: isGettingDirectory } = useSrcFolders(data => { - console.log(data, "data"); - + const setFolders = (data: IGithubDirectoryItem[]) => { if (data?.length > 0) { setDirectory(data); } else { setDirectory(null); } - }, removeInitialUrl(currentRepo?.value)); + }; + console.log(directory); + + const { isLoading: isGettingDirectory } = useSrcFolders(setFolders, removeInitialUrl(currentRepo?.value)); + + const { isLoading: isGettingDirectoryBit } = useBitSrcFolders( + setFolders, + removeInitialUrl(currentRepo?.value), + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value + ); + useEffect(() => { setFilteredRepos(repos); }, [repos]); @@ -153,6 +160,7 @@ const Repos = ({ )} {currentRepo?.value === repo.html_url && !isGettingDirectory && + !isGettingDirectoryBit && (directory && directory?.length > 0 ? (
@@ -168,7 +176,7 @@ const Repos = ({ value={currentFolder?.value} > {directory - ?.filter(item => item.type === "dir") + ?.filter(item => item.type === "dir" || item.type === "commit_directory") .map(item => (
- {isGettingDirectory && currentRepo?.value === repo.html_url && ( + {(isGettingDirectory || isGettingDirectoryBit) && currentRepo?.value === repo.html_url && (

Fetching Directory

@@ -161,7 +175,7 @@ const Repos = ({ {currentRepo?.value === repo.html_url && !isGettingDirectory && !isGettingDirectoryBit && - (directory && directory?.length > 0 ? ( + (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory")?.length > 0 ? (

Select Directory

diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx index cfce4d120..821333cdc 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx @@ -2,11 +2,10 @@ import React, { Dispatch, useState } from "react"; import { ServiceType } from "@src/types"; import { useGitLabReposByGroup } from "../api/gitlab-api"; -import Framework from "../github/Framework"; +import Repos from "../github/Repos"; import { ServiceControl } from "../utils"; import Branches from "./Branches"; import Groups from "./Groups"; -import Repos from "./Repos"; const GitLab = ({ loading, @@ -25,19 +24,31 @@ const GitLab = ({ }) => { const [group, setGroup] = useState(""); const { data: repos, isLoading } = useGitLabReposByGroup(group); + console.log(repos); + return ( <> ({ + name: repo.name, + id: repo.id, + default_branch: repo?.default_branch, + html_url: repo?.web_url, + userName: "gitlab", + private: repo?.visibility === "private" + })) ?? [] + } setValue={setValue} setDeploymentName={setDeploymentName} deploymentName={deploymentName} + type="gitlab" + profile={{ username: "gitlab" }} /> - ); }; From d7ef049a65c16bddd95fe781b2e6d3492a5554ba Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 02:57:24 +0530 Subject: [PATCH 07/59] fix: Gitlab repos ui fix --- .../src/components/remote-deploy/Advanced.tsx | 1 + .../remote-deploy/FrameworkDetection.tsx | 5 +--- .../remote-deploy/api/gitlab-api.ts | 27 ++++++++++++++++--- .../components/remote-deploy/github/Repos.tsx | 12 ++++++--- .../components/remote-deploy/remoteTypes.ts | 2 +- 5 files changed, 35 insertions(+), 12 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index 55a4d82dd..c384372ff 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -22,6 +22,7 @@ const Advanced = ({ services, control, setValue }) => { const serviceIndex = 0; const [expanded, setExpanded] = useState(false); const currentService = services[serviceIndex]; + console.log(services); return ( e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id - ); + const { isLoading: gitlabLoading } = useGitlabPackageJson(setValueHandler, services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, subFolder); const { isLoading: bitbucketLoading } = useBitPackageJson( setValueHandler, diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 5fd2caa8a..7d598428c 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -156,13 +156,34 @@ export const useGitLabCommits = (repo?: string, branch?: string) => { }); }; -export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: string) => { +export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: string, subFolder?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ - queryKey: ["packageJson", repo], + queryKey: ["packageJson-gitlab", repo, subFolder], queryFn: async () => { - const response = await axiosInstance.get(`/projects/${repo}/repository/files/package.json/raw`, { + const response = await axiosInstance.get(`/projects/${repo}/repository/files/${subFolder ? `${subFolder}/` : ""}package.json/raw`, { + headers: { + Authorization: `Bearer ${token?.access_token}` + } + }); + return response.data; + }, + enabled: !!token?.access_token && token.type === "gitlab" && !!repo, + onSettled: data => { + onSettled(data); + } + }); +}; + +export const useGitlabSrcFolders = (onSettled: (data: any) => void, repo?: string) => { + const [token] = useAtom(remoteDeployStore.tokens); + + return useQuery({ + queryKey: ["src-folders-gitlab", repo], + + queryFn: async () => { + const response = await axiosInstance.get(`/projects/${repo}/repository/tree`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index fad08b030..b32d10fa7 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -20,6 +20,7 @@ import remoteDeployStore from "@src/store/remoteDeployStore"; import { ServiceType } from "@src/types"; import { useSrcFolders } from "../api/api"; import { useBitSrcFolders } from "../api/bitbucket-api"; +import { useGitlabSrcFolders } from "../api/gitlab-api"; import CustomInput from "../CustomInput"; import useFramework from "../FrameworkDetection"; import { IGithubDirectoryItem } from "../remoteTypes"; @@ -73,7 +74,8 @@ const Repos = ({ removeInitialUrl(currentRepo?.value), services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ); - console.log(isGettingDirectoryBit, "isGettingDirectoryBit"); + + const { isLoading: isGettingDirectoryGitlab } = useGitlabSrcFolders(setFolders, services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value); useEffect(() => { setFilteredRepos(repos); @@ -129,6 +131,7 @@ const Repos = ({ size="sm" disabled={currentRepo?.value === repo.html_url} onClick={() => { + setDirectory(null); const repoUrl = { id: nanoid(), key: "REPO_URL", value: repo.html_url, isSecret: false }; const branchName = { id: nanoid(), key: "BRANCH_NAME", value: repo.default_branch, isSecret: false }; if (type === "github") { @@ -166,7 +169,7 @@ const Repos = ({ {currentRepo?.value === repo.html_url ? "Selected" : "Select"}
- {(isGettingDirectory || isGettingDirectoryBit) && currentRepo?.value === repo.html_url && ( + {(isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab) && currentRepo?.value === repo.html_url && (

Fetching Directory

@@ -175,7 +178,8 @@ const Repos = ({ {currentRepo?.value === repo.html_url && !isGettingDirectory && !isGettingDirectoryBit && - (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory")?.length > 0 ? ( + !isGettingDirectoryGitlab && + (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? (

Select Directory

@@ -190,7 +194,7 @@ const Repos = ({ value={currentFolder?.value} > {directory - ?.filter(item => item.type === "dir" || item.type === "commit_directory") + ?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree") .map(item => (
{token?.type === "github" ? ( ) : token?.type === "gitlab" ? ( ) : ( - )}{" "} + )} - )}{" "} + )} +
+
+

Auto-Deploy

+

By default, your code is automatically deployed whenever you update it. Disable to handle deploys manually.

+
+ +
) : null; }; @@ -119,7 +139,6 @@ const Field = ({ data, control }: { data: any; control: Control - {" "} {manual ? ( e.key === "COMMIT_HASH")?.value} @@ -151,32 +170,25 @@ const Field = ({ data, control }: { data: any; control: Control - {" "} - {" "}
- {" "} - {" "} -
{" "} - {" "} + +
+ - {" "} - {" "} {data?.map((repo: any) => ( - {" "}
- {" "} {repo?.name?.split("\n")[0]}{" "}

{new Date(repo?.date).toLocaleDateString()}

{" "} -
{" "} +
- ))}{" "} - {" "} - {" "} + ))} + + - )}{" "} + )} { setManual(checked); From 89f5d5cda8230a77efebd652d4767627e7fb8799 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 19:54:15 +0530 Subject: [PATCH 09/59] fix : update ui --- .../remote-deploy/FrameworkDetection.tsx | 7 +- .../components/remote-deploy/github/Repos.tsx | 121 ++++++++++-------- .../update/RemoteDeployUpdate.tsx | 8 +- 3 files changed, 81 insertions(+), 55 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index 77161c636..dd2a49a4e 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -42,7 +42,7 @@ const frameworks = [ value: "other" } ]; -const useFramework = ({ services, setValue, repos, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { +const useFramework = ({ services, setValue, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { const [data, setData] = useState(null); const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; @@ -66,7 +66,10 @@ const useFramework = ({ services, setValue, repos, subFolder }: { services: Serv ); return { - currentFramework: frameworks.find(f => data?.scripts?.dev?.includes(f.value)), + currentFramework: frameworks.find(f => data?.scripts?.dev?.includes(f.value)) ?? { + title: "Other", + value: "other" + }, isLoading: isLoading || gitlabLoading || bitbucketLoading }; }; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index b32d10fa7..58a52929b 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -14,6 +14,7 @@ import { } from "@akashnetwork/ui/components"; import { Folder, GithubCircle, Lock } from "iconoir-react"; import { useAtom } from "jotai"; +import { Globe2 } from "lucide-react"; import { nanoid } from "nanoid"; import remoteDeployStore from "@src/store/remoteDeployStore"; @@ -65,17 +66,21 @@ const Repos = ({ setDirectory(null); } }; - console.log(directory); - const { isLoading: isGettingDirectory } = useSrcFolders(setFolders, removeInitialUrl(currentRepo?.value)); + const { isLoading: isGettingDirectory, isFetching: isGithubLoading } = useSrcFolders(setFolders, removeInitialUrl(currentRepo?.value)); - const { isLoading: isGettingDirectoryBit } = useBitSrcFolders( + const { isLoading: isGettingDirectoryBit, isFetching: isBitLoading } = useBitSrcFolders( setFolders, removeInitialUrl(currentRepo?.value), services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ); - const { isLoading: isGettingDirectoryGitlab } = useGitlabSrcFolders(setFolders, services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value); + const { isLoading: isGettingDirectoryGitlab, isFetching: isGitlabLoading } = useGitlabSrcFolders( + setFolders, + services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value + ); + const isLoadingDirectories = isGithubLoading || isGitlabLoading || isBitLoading || isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab; + console.log(repo?.owner?.login, profile?.login, "sdf"); useEffect(() => { setFilteredRepos(repos); @@ -91,7 +96,11 @@ const Repos = ({ + ) : ( + + { id: nanoid(), key: "GITHUB_ACCESS_TOKEN", value: token?.access_token, isSecret: false } + ]); + } + if (type === "bitbucket") { + setValue("services.0.env", [ + repoUrl, + branchName, + { id: nanoid(), key: "BITBUCKET_ACCESS_TOKEN", value: token?.access_token, isSecret: false }, + { id: nanoid(), key: "BITBUCKET_USER", value: repo?.username, isSecret: false } + ]); + } + if (type === "gitlab") { + setValue("services.0.env", [ + repoUrl, + branchName, + { id: nanoid(), key: "GITLAB_ACCESS_TOKEN", value: token?.access_token, isSecret: false }, + { + id: nanoid(), + key: "GITLAB_PROJECT_ID", + value: repo?.id?.toString(), + isSecret: false + } + ]); + } + setDeploymentName(repo.name); + }} + > + Select + + )}
- {(isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab) && currentRepo?.value === repo.html_url && ( + {isLoadingDirectories && currentRepo?.value === repo.html_url && (

Fetching Directory

)} {currentRepo?.value === repo.html_url && - !isGettingDirectory && - !isGettingDirectoryBit && - !isGettingDirectoryGitlab && + !isLoadingDirectories && (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? (
diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index b0c8a2ded..a0d82308b 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -1,9 +1,10 @@ import React, { Dispatch, useEffect, useState } from "react"; import { Control, useFieldArray, useForm } from "react-hook-form"; -import { Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Switch } from "@akashnetwork/ui/components"; +import { Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Snackbar, Switch } from "@akashnetwork/ui/components"; import { GitCommit } from "iconoir-react"; import { useAtom } from "jotai"; import { nanoid } from "nanoid"; +import { useSnackbar } from "notistack"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; @@ -137,6 +138,8 @@ const Field = ({ data, control }: { data: any; control: Control(false); const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); + + const { enqueueSnackbar } = useSnackbar(); return (
{manual ? ( @@ -160,6 +163,9 @@ const Field = ({ data, control }: { data: any; control: Control e.key === "COMMIT_HASH")?.value} onValueChange={(value: any) => { const hash = { id: nanoid(), key: "COMMIT_HASH", value: value, isSecret: false }; + enqueueSnackbar(, { + variant: "info" + }); if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { update( services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), From 5c125d5e67612e7cd23cc2a4cbcbb298d9d543b7 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 20:01:15 +0530 Subject: [PATCH 10/59] feat: New Frameworks --- .../components/remote-deploy/FrameworkDetection.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index dd2a49a4e..3105326d6 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -37,6 +37,17 @@ const frameworks = [ value: "astro", image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" }, + { + title: "Nuxt.js", + value: "nuxt", + image: "https://v2.nuxt.com/_nuxt/icons/icon_64x64.6dcbd4.png" + }, + + { + title: "Gridsome ", + value: "gridsome", + image: "https://gridsome.org/assets/static/favicon.b9532cc.c6d52b979318cc0b0524324281174df2.png" + }, { title: "Other", value: "other" From 6466920c4ce2db4f0332018a51f5dcdc99cf51bc Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 17 Aug 2024 20:26:05 +0530 Subject: [PATCH 11/59] feat: vite Framework --- .../remote-deploy/FrameworkDetection.tsx | 18 +++++++++++++++--- .../components/remote-deploy/api/gitlab-api.ts | 7 +++++-- .../components/remote-deploy/github/Repos.tsx | 7 +++---- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index 3105326d6..a47b1f9f0 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -48,6 +48,11 @@ const frameworks = [ value: "gridsome", image: "https://gridsome.org/assets/static/favicon.b9532cc.c6d52b979318cc0b0524324281174df2.png" }, + { + title: "Vite", + value: "vite", + image: "https://vitejs.dev/logo.svg" + }, { title: "Other", value: "other" @@ -58,16 +63,23 @@ const useFramework = ({ services, setValue, subFolder }: { services: ServiceType const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; const setValueHandler = (data: any) => { - setData(data); + console.log(data); if (data?.dependencies) { + setData(data); const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); + } else { + setData(null); } }; const { isLoading } = usePackageJson(setValueHandler, removeInitialUrl(selected), subFolder); - const { isLoading: gitlabLoading } = useGitlabPackageJson(setValueHandler, services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, subFolder); + const { isLoading: gitlabLoading, isFetching } = useGitlabPackageJson( + setValueHandler, + services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, + subFolder + ); const { isLoading: bitbucketLoading } = useBitPackageJson( setValueHandler, @@ -81,7 +93,7 @@ const useFramework = ({ services, setValue, subFolder }: { services: ServiceType title: "Other", value: "other" }, - isLoading: isLoading || gitlabLoading || bitbucketLoading + isLoading: isLoading || gitlabLoading || bitbucketLoading || isFetching }; }; diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 7d598428c..8ce186231 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -162,7 +162,7 @@ export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: stri return useQuery({ queryKey: ["packageJson-gitlab", repo, subFolder], queryFn: async () => { - const response = await axiosInstance.get(`/projects/${repo}/repository/files/${subFolder ? `${subFolder}/` : ""}package.json/raw`, { + const response = await axiosInstance.get(`/projects/${repo}/repository/files/${subFolder ? `${subFolder}%2F` : ""}package.json?ref=main`, { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -171,7 +171,10 @@ export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: stri }, enabled: !!token?.access_token && token.type === "gitlab" && !!repo, onSettled: data => { - onSettled(data); + if (data?.content === undefined) return; + const content = atob(data.content); + const parsed = JSON.parse(content); + onSettled(parsed); } }); }; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 58a52929b..12453c789 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -52,7 +52,7 @@ const Repos = ({ const repo = repos?.find(r => r.html_url === currentRepo?.value); const [directory, setDirectory] = useState(null); const currentFolder = services?.[0]?.env?.find(e => e.key === "FRONTEND_FOLDER"); - const { currentFramework } = useFramework({ + const { currentFramework, isLoading: frameworkLoading } = useFramework({ services, setValue, repos, @@ -96,7 +96,7 @@ const Repos = ({
{currentRepo?.value === repo?.html_url ? ( - ) : ( From 040a62653fe875e03c125efa01fa4b4079723447 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Mon, 19 Aug 2024 17:30:17 +0530 Subject: [PATCH 13/59] update Repos.tsx, RemoteDeployUpdate.tsx and utils.ts --- .../components/remote-deploy/github/Repos.tsx | 240 +++++++++--------- .../update/RemoteDeployUpdate.tsx | 4 + .../src/components/remote-deploy/utils.ts | 12 +- 3 files changed, 135 insertions(+), 121 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 5bebafb40..d67f50da2 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -1,4 +1,5 @@ import { Dispatch, useEffect, useState } from "react"; +import { UseFormSetValue } from "react-hook-form"; import { Button, Dialog, @@ -18,14 +19,14 @@ import { Globe2 } from "lucide-react"; import { nanoid } from "nanoid"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { ServiceType } from "@src/types"; +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { useSrcFolders } from "../api/api"; import { useBitSrcFolders } from "../api/bitbucket-api"; import { useGitlabSrcFolders } from "../api/gitlab-api"; import CustomInput from "../CustomInput"; import useFramework from "../FrameworkDetection"; import { IGithubDirectoryItem } from "../remoteTypes"; -import { appendEnv, removeInitialUrl } from "../utils"; +import { appendEnv, removeInitialUrl, RepoType } from "../utils"; // import { handleLogin } from "../api/api"; const Repos = ({ repos, @@ -33,11 +34,11 @@ const Repos = ({ isLoading, services, setDeploymentName, - profile, + type = "github" }: { - repos: any; - setValue: any; + repos: RepoType[]; + setValue: UseFormSetValue; services: ServiceType[]; isLoading: boolean; setDeploymentName: Dispatch; @@ -80,7 +81,6 @@ const Repos = ({ services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value ); const isLoadingDirectories = isGithubLoading || isGitlabLoading || isBitLoading || isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab; - console.log(repo?.owner?.login, profile?.login, "sdf"); useEffect(() => { setFilteredRepos(repos); @@ -97,6 +97,7 @@ const Repos = ({ - ) : ( -
+ {currentRepo?.value === repo?.html_url ? ( + + ) : ( + + )} +
+ {isLoadingDirectories && currentRepo?.value === repo.html_url && ( +
+

Fetching Directory

+ +
+ )} + {currentRepo?.value === repo.html_url && + (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? ( +
+
+

Select Directory

+ {/*

{currentFramework?.title}

*/} +
- { id: nanoid(), key: "GITHUB_ACCESS_TOKEN", value: token?.access_token, isSecret: false } - ]); - } - if (type === "bitbucket") { - setValue("services.0.env", [ - repoUrl, - branchName, - { id: nanoid(), key: "BITBUCKET_ACCESS_TOKEN", value: token?.access_token, isSecret: false }, - { id: nanoid(), key: "BITBUCKET_USER", value: repo?.username, isSecret: false } - ]); - } - if (type === "gitlab") { - setValue("services.0.env", [ - repoUrl, - branchName, - { id: nanoid(), key: "GITLAB_ACCESS_TOKEN", value: token?.access_token, isSecret: false }, - { - id: nanoid(), - key: "GITLAB_PROJECT_ID", - value: repo?.id?.toString(), - isSecret: false - } - ]); - } - setDeploymentName(repo.name); + { + appendEnv("FRONTEND_FOLDER", value, false, setValue, services); }} + value={currentFolder?.value} > - Select - - )} -
- {isLoadingDirectories && currentRepo?.value === repo.html_url && ( -
-

Fetching Directory

- + {directory + ?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree") + .map(item => ( +
+ + +
+ ))} +
- )} - {currentRepo?.value === repo.html_url && - (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? ( -
-
-

Select Directory

- {/*

{currentFramework?.title}

*/} -
- - { - appendEnv("FRONTEND_FOLDER", value, false, setValue, services); - }} - value={currentFolder?.value} - > - {directory - ?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree") - .map(item => ( -
- - -
- ))} - -
- ) : ( - appendEnv("FRONTEND_FOLDER", e.target.value, false, setValue, services)} - label="Frontend Folder" - description="By default we use ./, Change the version if needed" - placeholder="eg. app" - /> - ))} -
- ))} + ) : ( + appendEnv("FRONTEND_FOLDER", e.target.value, false, setValue, services)} + label="Frontend Folder" + description="By default we use ./, Change the version if needed" + placeholder="eg. app" + /> + ))} +
+ ))} {isLoading && (
diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index a0d82308b..4b5eaad03 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -43,6 +43,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin unsubscribe(); }; }, [watch, sdlString]); + const { enqueueSnackbar } = useSnackbar(); const [, setError] = useState(null); const createAndValidateSdl = (yamlStr: string) => { try { @@ -90,6 +91,9 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin e.key === "DISABLE_PULL")?.value} - onValueChange={value => { - appendEnv("DISABLE_PULL", value, false, setValue, services); +
+ + + { + const pull = value ? "yes" : "no"; + appendEnv("DISABLE_PULL", pull, false, setValue, services); }} - > - -
- -
- - - - Yes - No - - - + />
diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index d67f50da2..f00bdf6b4 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -26,7 +26,7 @@ import { useGitlabSrcFolders } from "../api/gitlab-api"; import CustomInput from "../CustomInput"; import useFramework from "../FrameworkDetection"; import { IGithubDirectoryItem } from "../remoteTypes"; -import { appendEnv, removeInitialUrl, RepoType } from "../utils"; +import { appendEnv, removeEnv, removeInitialUrl, RepoType } from "../utils"; // import { handleLogin } from "../api/api"; const Repos = ({ repos, @@ -49,6 +49,8 @@ const Repos = ({ const [token] = useAtom(remoteDeployStore.tokens); const [search, setSearch] = useState(""); const [filteredRepos, setFilteredRepos] = useState(repos); + console.log(services); + const currentRepo = services?.[0]?.env?.find(e => e.key === "REPO_URL"); const repo = repos?.find(r => r.html_url === currentRepo?.value); const [directory, setDirectory] = useState(null); @@ -81,7 +83,7 @@ const Repos = ({ services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value ); const isLoadingDirectories = isGithubLoading || isGitlabLoading || isBitLoading || isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab; - + const rootFolder = "akash-root-folder-repo-path"; useEffect(() => { setFilteredRepos(repos); }, [repos]); @@ -209,16 +211,27 @@ const Repos = ({
{ - appendEnv("FRONTEND_FOLDER", value, false, setValue, services); + if (value === rootFolder) { + removeEnv("FRONTEND_FOLDER", setValue, services); + } else { + appendEnv("FRONTEND_FOLDER", value, false, setValue, services); + } }} - value={currentFolder?.value} + value={currentFolder?.value || rootFolder} > +
+ + +
{directory ?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree") .map(item => ( -
+
env.key === "DISABLE_PULL")?.value === "yes"} id="disable-pull" defaultChecked={false} onCheckedChange={value => { From 6805c5a9a334c4ef2bbf96d8362aa74065a6617c Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 23 Aug 2024 18:29:22 +0530 Subject: [PATCH 19/59] update GihubDeploy.tsx --- .../components/new-deployment/GihubDeploy.tsx | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx index adfcca17c..de0ccfe40 100644 --- a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx +++ b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx @@ -1,6 +1,6 @@ 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 { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut } from "iconoir-react"; import { useAtom } from "jotai"; import remoteDeployStore from "@src/store/remoteDeployStore"; @@ -82,23 +82,38 @@ const GithubDeploy = ({ {token?.access_token && ( - +
+ + +
)}
From f681b754f96622d952dd9dd578e67c23d601dbd8 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 24 Aug 2024 00:50:24 +0530 Subject: [PATCH 20/59] update 5 files --- .../components/new-deployment/GihubDeploy.tsx | 13 +- .../new-deployment/ManifestEdit.tsx | 15 +- .../components/new-deployment/SdlBuilder.tsx | 334 +++++++++--------- .../src/components/remote-deploy/Advanced.tsx | 8 +- .../update/RemoteDeployUpdate.tsx | 6 +- 5 files changed, 202 insertions(+), 174 deletions(-) diff --git a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx index de0ccfe40..338854cad 100644 --- a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx +++ b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx @@ -3,6 +3,7 @@ import { Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from "@akas import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut } from "iconoir-react"; import { useAtom } from "jotai"; +import { useWhen } from "@src/hooks/useWhen"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { ServiceType } from "@src/types"; import Advanced from "../remote-deploy/Advanced"; @@ -21,13 +22,15 @@ const GithubDeploy = ({ services, control, deploymentName, - setDeploymentName + setDeploymentName, + setIsRepoDataValidated }: { setValue: any; services: ServiceType[]; control: any; setDeploymentName: Dispatch; deploymentName: string; + setIsRepoDataValidated?: Dispatch; }) => { const [token, setToken] = useAtom(remoteDeployStore.tokens); console.log(services); @@ -42,12 +45,20 @@ const GithubDeploy = ({ const { mutate: fetchAccessTokenGitLab, isLoading: fetchingTokenGitLab } = useGitLabFetchAccessToken(); const [selectedTab, setSelectedTab] = useState("git"); + console.log(services, "services"); const [open, setOpen] = useState(false); useEffect(() => { setOpen(true); }, []); + useWhen( + services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")), + () => { + setIsRepoDataValidated?.(true); + } + ); + useEffect(() => { const url = new URL(window.location.href); diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx index ea7cf9ce3..e9676b416 100644 --- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx +++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx @@ -1,7 +1,7 @@ "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"; @@ -9,6 +9,7 @@ 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 { envConfig } from "@src/config/env.config"; import { useCertificate } from "@src/context/CertificateProvider"; @@ -177,7 +178,18 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s } } + const [isRepoDataValidated, setIsRepoDataValidated] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + console.log(isRepoDataValidated); + const handleCreateDeployment = async () => { + if (github && !isRepoDataValidated) { + enqueueSnackbar(, { + variant: "error" + }); + return; + } + if (selectedSdlEditMode === "builder") { const valid = await sdlBuilderRef.current?.validate(); if (!valid) return; @@ -404,6 +416,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s setEditedManifest={setEditedManifest} setDeploymentName={setDeploymentName} deploymentName={deploymentName} + setIsRepoDataValidated={setIsRepoDataValidated} /> )} diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx index 62e905bcd..b51e5fce7 100644 --- a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx +++ b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx @@ -25,6 +25,7 @@ interface Props { github?: boolean; setDeploymentName: Dispatch; deploymentName: string; + setIsRepoDataValidated?: Dispatch; } export type SdlBuilderRefType = { @@ -32,176 +33,179 @@ export type SdlBuilderRefType = { validate: () => Promise; }; -export const SdlBuilder = React.forwardRef(({ sdlString, setEditedManifest, github, setDeploymentName, deploymentName }, ref) => { - const [error, setError] = useState(null); - const formRef = useRef(null); - const [isInit, setIsInit] = useState(false); - const { hasComponent, imageList } = useSdlBuilder(); - const form = useForm({ - defaultValues: { - services: [cloneDeep(hasComponent("ssh") ? defaultSshVMService : defaultService)], - imageList: imageList, - hasSSHKey: hasComponent("ssh") - }, - resolver: zodResolver(SdlBuilderFormValuesSchema) - }); - const { control, trigger, watch, setValue } = form; - const { - fields: services, - remove: removeService, - append: appendService - } = useFieldArray({ - control, - name: "services", - keyName: "id" - }); - const { services: formServices = [] } = watch(); - const { data: gpuModels } = useGpuModels(); - const [serviceCollapsed, setServiceCollapsed] = useState(github ? [0] : []); - - console.log(serviceCollapsed); - - const wallet = useWallet(); - const managedDenom = useManagedWalletDenom(); - - useWhen( - wallet.isManaged, - () => { - formServices.forEach((service, index) => { - const { denom } = service.placement.pricing; - - if (denom !== managedDenom) { - setValue(`services.${index}.placement.pricing.denom`, managedDenom); - } - }); - }, - [formServices, sdlString] - ); - - React.useImperativeHandle(ref, () => ({ - getSdl: getSdl, - validate: async () => { - return await trigger(); - } - })); - - useEffect(() => { - const { unsubscribe } = watch(data => { - const sdl = generateSdl(data.services as ServiceType[]); - setEditedManifest(sdl); +export const SdlBuilder = React.forwardRef( + ({ sdlString, setEditedManifest, github, setDeploymentName, deploymentName, setIsRepoDataValidated }, ref) => { + const [error, setError] = useState(null); + const formRef = useRef(null); + const [isInit, setIsInit] = useState(false); + const { hasComponent, imageList } = useSdlBuilder(); + const form = useForm({ + defaultValues: { + services: [cloneDeep(hasComponent("ssh") ? defaultSshVMService : defaultService)], + imageList: imageList, + hasSSHKey: hasComponent("ssh") + }, + resolver: zodResolver(SdlBuilderFormValuesSchema) + }); + const { control, trigger, watch, setValue } = form; + const { + fields: services, + remove: removeService, + append: appendService + } = useFieldArray({ + control, + name: "services", + keyName: "id" }); + const { services: formServices = [] } = watch(); + const { data: gpuModels } = useGpuModels(); + const [serviceCollapsed, setServiceCollapsed] = useState(github ? [0] : []); + + console.log(serviceCollapsed); + + const wallet = useWallet(); + const managedDenom = useManagedWalletDenom(); + + useWhen( + wallet.isManaged, + () => { + formServices.forEach((service, index) => { + const { denom } = service.placement.pricing; + + if (denom !== managedDenom) { + setValue(`services.${index}.placement.pricing.denom`, managedDenom); + } + }); + }, + [formServices, sdlString] + ); + + React.useImperativeHandle(ref, () => ({ + getSdl: getSdl, + validate: async () => { + return await trigger(); + } + })); + + useEffect(() => { + const { unsubscribe } = watch(data => { + const sdl = generateSdl(data.services as ServiceType[]); + setEditedManifest(sdl); + }); - try { - if (sdlString) { - const services = createAndValidateSdl(sdlString); - setValue("services", services as ServiceType[]); + try { + if (sdlString) { + const services = createAndValidateSdl(sdlString); + setValue("services", services as ServiceType[]); + } + } catch (error) { + setError("Error importing SDL"); } - } catch (error) { - setError("Error importing SDL"); - } - setIsInit(true); + setIsInit(true); - return () => { - unsubscribe(); - }; - }, [watch]); - - const getSdl = () => { - try { - return generateSdl(transformCustomSdlFields(formServices, { withSSH: hasComponent("ssh") })); - } catch (err) { - if (err instanceof TransformError) { - setError(err.message); + return () => { + unsubscribe(); + }; + }, [watch]); + + const getSdl = () => { + try { + return generateSdl(transformCustomSdlFields(formServices, { withSSH: hasComponent("ssh") })); + } catch (err) { + if (err instanceof TransformError) { + setError(err.message); + } } - } - }; - - const createAndValidateSdl = (yamlStr: string) => { - try { - if (!yamlStr) return []; - - const services = importSimpleSdl(yamlStr); - - setError(null); - - return services; - } catch (err) { - if (err.name === "YAMLException" || err.name === "CustomValidationError") { - setError(err.message); - } else if (err.name === "TemplateValidation") { - setError(err.message); - } else { - setError("Error while parsing SDL file"); - console.error(err); + }; + + const createAndValidateSdl = (yamlStr: string) => { + try { + if (!yamlStr) return []; + + const services = importSimpleSdl(yamlStr); + + setError(null); + + return services; + } catch (err) { + if (err.name === "YAMLException" || err.name === "CustomValidationError") { + setError(err.message); + } else if (err.name === "TemplateValidation") { + setError(err.message); + } else { + setError("Error while parsing SDL file"); + console.error(err); + } } - } - }; - - const onAddService = () => { - appendService({ ...defaultService, id: nanoid(), title: `service-${services.length + 1}` }); - }; - - const onRemoveService = (index: number) => { - removeService(index); - }; - - return ( -
- {!isInit ? ( -
- -
- ) : ( - <> - {github && ( - - )} -
- - {formServices && - services.map((service, serviceIndex) => ( - - ))} - - {error && ( - - {error} - - )} - - {!hasComponent("ssh") && !github && ( -
-
- + }; + + const onAddService = () => { + appendService({ ...defaultService, id: nanoid(), title: `service-${services.length + 1}` }); + }; + + const onRemoveService = (index: number) => { + removeService(index); + }; + + return ( +
+ {!isInit ? ( +
+ +
+ ) : ( + <> + {github && ( + + )} + + + {formServices && + services.map((service, serviceIndex) => ( + + ))} + + {error && ( + + {error} + + )} + + {!hasComponent("ssh") && !github && ( +
+
+ +
-
- )} - - - - )} -
- ); -}); + )} + + + + )} +
+ ); + } +); diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index 5eb6f2831..fb2b36df5 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -28,7 +28,7 @@ const Advanced = ({ services, control, setValue }) => { {expanded && } -
+
{}} @@ -38,15 +38,15 @@ const Advanced = ({ services, control, setValue }) => { />
env.key === "DISABLE_PULL")?.value === "yes"} + checked={currentService?.env?.find(env => env.key === "DISABLE_PULL")?.value !== "yes"} id="disable-pull" defaultChecked={false} onCheckedChange={value => { - const pull = value ? "yes" : "no"; + const pull = !value ? "yes" : "no"; appendEnv("DISABLE_PULL", pull, false, setValue, services); }} /> diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 44dcff2ac..ba7b3a87d 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -78,14 +78,14 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin
e.key === "DISABLE_PULL")?.value === "yes"} + checked={services[0]?.env?.find(e => e.key === "DISABLE_PULL")?.value !== "yes"} onCheckedChange={value => { - const pull = value ? "yes" : "no"; + const pull = !value ? "yes" : "no"; appendEnv("DISABLE_PULL", pull, false, setValue, services); enqueueSnackbar(, { variant: "info" From cf15e950d164893d7c83bc922a63ecfeed62af7b Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 24 Aug 2024 15:55:59 +0530 Subject: [PATCH 21/59] update RemoteDeployUpdate.tsx and templates.ts --- .../src/components/remote-deploy/update/RemoteDeployUpdate.tsx | 2 +- apps/deploy-web/src/utils/templates.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index ba7b3a87d..51396df3e 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -99,7 +99,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin <>
-

RollBack

A unique name for your web service.

+

Rollback

Rollback to a specific commit

diff --git a/apps/deploy-web/src/utils/templates.ts b/apps/deploy-web/src/utils/templates.ts index f663998d6..d2c6b666b 100644 --- a/apps/deploy-web/src/utils/templates.ts +++ b/apps/deploy-web/src/utils/templates.ts @@ -86,7 +86,7 @@ export const github = { version: "2.0" services: service-1: - image: hoomanhq/automation:0.417 + image: hoomanhq/automation:0.421 expose: - port: 3000 as: 80 From 449c4e40c8dcf5785fa10006c5b25e1e4aa1f0db Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Mon, 26 Aug 2024 16:33:01 +0530 Subject: [PATCH 22/59] update : descriptions --- .../src/components/remote-deploy/Advanced.tsx | 31 +++++++++-------- .../remote-deploy/FrameworkDetection.tsx | 2 +- .../update/RemoteDeployUpdate.tsx | 33 ++++++++++--------- 3 files changed, 37 insertions(+), 29 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index fb2b36df5..d80263b03 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -36,20 +36,25 @@ const Advanced = ({ services, control, setValue }) => { envs={currentService.env || []} // hasSecretOption={hasSecretOption} /> -
- +
+
+ - env.key === "DISABLE_PULL")?.value !== "yes"} - id="disable-pull" - defaultChecked={false} - onCheckedChange={value => { - const pull = !value ? "yes" : "no"; - appendEnv("DISABLE_PULL", pull, false, setValue, services); - }} - /> + env.key === "DISABLE_PULL")?.value !== "yes"} + id="disable-pull" + defaultChecked={false} + onCheckedChange={value => { + const pull = !value ? "yes" : "no"; + appendEnv("DISABLE_PULL", pull, false, setValue, services); + }} + /> +
+

+ By default, console automatically detects and deploys changes, disable it to handle deploys manually +

diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx index a47b1f9f0..05555ed96 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx @@ -68,7 +68,7 @@ const useFramework = ({ services, setValue, subFolder }: { services: ServiceType setData(data); const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); - setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); + setValue("services.0.profile.cpu", +cpus > 2 ? +cpus : 2); } else { setData(null); } diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 51396df3e..b16cab70d 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -76,22 +76,25 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin }; return github.content.includes(services?.[0]?.image) ? (
-
- +
+
+ - e.key === "DISABLE_PULL")?.value !== "yes"} - onCheckedChange={value => { - const pull = !value ? "yes" : "no"; - appendEnv("DISABLE_PULL", pull, false, setValue, services); - enqueueSnackbar(, { - variant: "info" - }); - }} - /> + e.key === "DISABLE_PULL")?.value !== "yes"} + onCheckedChange={value => { + const pull = !value ? "yes" : "no"; + appendEnv("DISABLE_PULL", pull, false, setValue, services); + enqueueSnackbar(, { + variant: "info" + }); + }} + /> +
+

By default, console automatically detects and deploys changes, disable it to handle deploys manually

{services[0]?.env?.length && {}} />} {/* //type === github */} From 29591f11503b32a8eb0f9083df8c6d64c76a24cf Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Wed, 28 Aug 2024 11:24:27 +0530 Subject: [PATCH 23/59] fixes: type --- .../src/components/remote-deploy/api/api.ts | 4 +- .../remote-deploy/github/Github.tsx | 2 +- .../components/remote-deploy/remoteTypes.ts | 120 ++++++++++++++++++ 3 files changed, 123 insertions(+), 3 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index ae720d823..2965f4001 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -4,7 +4,7 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { IGithubDirectoryItem } from "../remoteTypes"; +import { GithubRepository, IGithubDirectoryItem } from "../remoteTypes"; import { PROXY_API_URL_AUTH, REDIRECT_URL } from "../utils"; const Github_API_URL = "https://api.github.com"; @@ -48,7 +48,7 @@ export const useRepos = () => { return useQuery({ queryKey: ["repos", token?.access_token], queryFn: async () => { - const response = await axiosInstance.get( + const response = await axiosInstance.get( "/user/repos?per_page=150", { diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index 881f790c4..c19ece4e2 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -27,7 +27,7 @@ const Github = ({ return ( <> repo?.owner?.login === profile?.login) as any} setValue={setValue} isLoading={isLoading} services={services} diff --git a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts index 5701dcace..9eac1ceb8 100644 --- a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts +++ b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts @@ -15,3 +15,123 @@ export interface IGithubDirectoryItem { self: string; }; } + +interface Owner { + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; +} + +interface License { + key: string; + name: string; + spdx_id: string; + url: string | null; + node_id: string; +} + +interface Permissions { + admin: boolean; + maintain: boolean; + push: boolean; + triage: boolean; + pull: boolean; +} + +export interface GithubRepository { + id: number; + node_id: string; + name: string; + full_name: string; + private: boolean; + owner: Owner; + html_url: string; + description: string | null; + fork: boolean; + url: string; + forks_url: string; + keys_url: string; + collaborators_url: string; + teams_url: string; + hooks_url: string; + issue_events_url: string; + events_url: string; + assignees_url: string; + branches_url: string; + tags_url: string; + blobs_url: string; + git_tags_url: string; + git_refs_url: string; + trees_url: string; + statuses_url: string; + languages_url: string; + stargazers_url: string; + contributors_url: string; + subscribers_url: string; + subscription_url: string; + commits_url: string; + git_commits_url: string; + comments_url: string; + issue_comment_url: string; + contents_url: string; + compare_url: string; + merges_url: string; + archive_url: string; + downloads_url: string; + issues_url: string; + pulls_url: string; + milestones_url: string; + notifications_url: string; + labels_url: string; + releases_url: string; + deployments_url: string; + created_at: string; + updated_at: string; + pushed_at: string; + git_url: string; + ssh_url: string; + clone_url: string; + svn_url: string; + homepage: string | null; + size: number; + stargazers_count: number; + watchers_count: number; + language: string | null; + has_issues: boolean; + has_projects: boolean; + has_downloads: boolean; + has_wiki: boolean; + has_pages: boolean; + has_discussions: boolean; + forks_count: number; + mirror_url: string | null; + archived: boolean; + disabled: boolean; + open_issues_count: number; + license: License; + allow_forking: boolean; + is_template: boolean; + web_commit_signoff_required: boolean; + topics: string[]; + visibility: string; + forks: number; + open_issues: number; + watchers: number; + default_branch: string; + permissions: Permissions; +} From 5e5b392779677baaec3c86cda384525e771146e2 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Wed, 28 Aug 2024 23:09:28 +0530 Subject: [PATCH 24/59] fix:repo filtering --- .../src/components/remote-deploy/api/api.ts | 6 +- .../remote-deploy/github/Github.tsx | 2 +- .../components/remote-deploy/github/Repos.tsx | 305 ++++++++++-------- .../components/remote-deploy/remoteTypes.ts | 2 +- .../src/components/remote-deploy/utils.ts | 2 + 5 files changed, 178 insertions(+), 139 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 2965f4001..e04c1bf08 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -64,11 +64,7 @@ export const useRepos = () => { console.log(error); } }, - onSettled: data => { - if (data?.message === "Bad credentials") { - console.log(data); - } - }, + enabled: !!token?.access_token && token.type === "github" }); }; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index c19ece4e2..ba47771bb 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -27,7 +27,7 @@ const Github = ({ return ( <> repo?.owner?.login === profile?.login) as any} + repos={repos as any} setValue={setValue} isLoading={isLoading} services={services} diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index f00bdf6b4..7aa0ff314 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -11,6 +11,11 @@ import { Label, RadioGroup, RadioGroupItem, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, Spinner } from "@akashnetwork/ui/components"; import { Folder, GithubCircle, Lock } from "iconoir-react"; @@ -34,7 +39,7 @@ const Repos = ({ isLoading, services, setDeploymentName, - + profile, type = "github" }: { repos: RepoType[]; @@ -69,6 +74,8 @@ const Repos = ({ setDirectory(null); } }; + const [currentAccount, setCurrentAccount] = useState(""); + const [accounts, setAccounts] = useState([]); const { isLoading: isGettingDirectory, isFetching: isGithubLoading } = useSrcFolders(setFolders, removeInitialUrl(currentRepo?.value)); @@ -85,8 +92,17 @@ const Repos = ({ const isLoadingDirectories = isGithubLoading || isGitlabLoading || isBitLoading || isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab; const rootFolder = "akash-root-folder-repo-path"; useEffect(() => { + if (type === "github") { + const differentOwnersArray = repos?.map(repo => repo?.owner?.login || ""); + const uniqueOwners = Array.from(new Set(differentOwnersArray)); + setAccounts(uniqueOwners); + setCurrentAccount(uniqueOwners?.find(account => profile?.login === account) || uniqueOwners?.[0]); + } setFilteredRepos(repos); }, [repos]); + + console.log(accounts); + return (
@@ -112,151 +128,176 @@ const Repos = ({ Search Repository - { - setSearch(e.target.value); - setFilteredRepos(repos.filter(repo => repo.name.toLowerCase().includes(e.target.value.toLowerCase()))); - }} - /> +
+ {type === "github" && ( + + )} + { + setSearch(e.target.value); + setFilteredRepos(repos.filter(repo => repo.name.toLowerCase().includes(e.target.value.toLowerCase()))); + }} + /> +
- {filteredRepos?.map((repo: any) => ( -
-
-
-
- {currentFramework && !frameworkLoading && currentRepo?.value === repo.html_url ? ( - currentFramework?.image ? ( - // eslint-disable-next-line @next/next/no-img-element - {currentFramework.title} - ) : ( - - ) - ) : ( - - )} -

{repo.name}

- {repo.private && } -
-
- {currentRepo?.value === repo?.html_url ? ( - - ) : ( - - )} -
- {isLoadingDirectories && currentRepo?.value === repo.html_url && ( -
-

Fetching Directory

- -
- )} - {currentRepo?.value === repo.html_url && - (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? ( + {filteredRepos + ?.filter(repo => repo?.owner?.login === currentAccount || type !== "github") + ?.map(repo => ( +
+
-
-

Select Directory

- {/*

{currentFramework?.title}

*/} +
+ {currentFramework && !frameworkLoading && currentRepo?.value === repo.html_url ? ( + currentFramework?.image ? ( + // eslint-disable-next-line @next/next/no-img-element + {currentFramework.title} + ) : ( + + ) + ) : ( + + )} +

{repo.name}

+ {repo.private && }
+
+ {currentRepo?.value === repo?.html_url ? ( + + ) : ( + + )} +
+ {isLoadingDirectories && currentRepo?.value === repo.html_url && ( +
+

Fetching Directory

+
- ) : ( - appendEnv("FRONTEND_FOLDER", e.target.value, false, setValue, services)} - label="Frontend Folder" - description="By default we use ./, Change the version if needed" - placeholder="eg. app" - /> - ))} -
- ))} + )} + {currentRepo?.value === repo.html_url && + (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? ( +
+
+

Select Directory

+ {/*

{currentFramework?.title}

*/} +
+ + { + if (value === rootFolder) { + removeEnv("FRONTEND_FOLDER", setValue, services); + } else { + appendEnv("FRONTEND_FOLDER", value, false, setValue, services); + } + }} + value={currentFolder?.value || rootFolder} + > +
+ + +
+ {directory + ?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree") + .map(item => ( +
+ + +
+ ))} + +
+ ) : ( + appendEnv("FRONTEND_FOLDER", e.target.value, false, setValue, services)} + label="Frontend Folder" + description="By default we use ./, Change the version if needed" + placeholder="eg. app" + /> + ))} +
+ ))} {isLoading && (
)} - {filteredRepos?.length === 0 &&
No Repository Found
} + {filteredRepos?.filter(repo => repo?.owner?.login === currentAccount || type !== "github")?.length === 0 && ( +
No Repository Found
+ )}
diff --git a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts index 9eac1ceb8..54c6a90dd 100644 --- a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts +++ b/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts @@ -16,7 +16,7 @@ export interface IGithubDirectoryItem { }; } -interface Owner { +export interface Owner { login: string; id: number; node_id: string; diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index 45c62cad0..ce990576e 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -3,6 +3,7 @@ import { nanoid } from "nanoid"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { github } from "@src/utils/templates"; +import { Owner } from "./remoteTypes"; export type OAuth = "github" | "gitlab" | "bitbucket"; export const PROXY_API_URL_AUTH = "https://proxy-console-github.vercel.app"; @@ -60,6 +61,7 @@ export interface RepoType { html_url: string; userName: string; private: boolean; + owner?: Owner; } export const isRedeployImage = (yml: string) => { From 7cd8536526983aa20ed5387b71b82a51d03ccc56 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Wed, 28 Aug 2024 23:13:49 +0530 Subject: [PATCH 25/59] remove: console.logs --- apps/deploy-web/src/components/remote-deploy/Advanced.tsx | 1 - .../src/components/remote-deploy/FrameworkDetection.tsx | 1 - apps/deploy-web/src/components/remote-deploy/api/api.ts | 1 - .../src/components/remote-deploy/api/bitbucket-api.ts | 2 +- apps/deploy-web/src/components/remote-deploy/github/Repos.tsx | 3 --- apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx | 1 - 6 files changed, 1 insertion(+), 8 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index d80263b03..97e912317 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -9,7 +9,6 @@ const Advanced = ({ services, control, setValue }) => { const serviceIndex = 0; const [expanded, setExpanded] = useState(false); const currentService = services[serviceIndex]; - console.log(services); return ( e.key === "REPO_URL")?.value; const setValueHandler = (data: any) => { - console.log(data); if (data?.dependencies) { setData(data); const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index e04c1bf08..d74dc5d99 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -61,7 +61,6 @@ export const useRepos = () => { }, onError: (error: AxiosError<{ message: string }>) => { if (error?.response?.data?.message === "Bad credentials") { - console.log(error); } }, diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index c9355941a..aede37e7f 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -173,7 +173,7 @@ export const useBitPackageJson = (onSettled: (data: any) => void, repo?: string, export const useBitSrcFolders = (onSettled: (data: any) => void, repo?: string, branch?: string) => { const [token] = useAtom(remoteDeployStore.tokens); - console.log(repo, branch, "repo, branch"); + return useQuery({ queryKey: ["src-folders-bit", repo, branch], // root folder diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 7aa0ff314..f99a8249f 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -54,7 +54,6 @@ const Repos = ({ const [token] = useAtom(remoteDeployStore.tokens); const [search, setSearch] = useState(""); const [filteredRepos, setFilteredRepos] = useState(repos); - console.log(services); const currentRepo = services?.[0]?.env?.find(e => e.key === "REPO_URL"); const repo = repos?.find(r => r.html_url === currentRepo?.value); @@ -101,8 +100,6 @@ const Repos = ({ setFilteredRepos(repos); }, [repos]); - console.log(accounts); - return (
diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx index 821333cdc..1ffcfa109 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx @@ -24,7 +24,6 @@ const GitLab = ({ }) => { const [group, setGroup] = useState(""); const { data: repos, isLoading } = useGitLabReposByGroup(group); - console.log(repos); return ( <> From 21973f8d3a0866f395336732e106592f08102e3a Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Wed, 28 Aug 2024 23:46:10 +0530 Subject: [PATCH 26/59] fix: repo redeploy selection --- .../src/components/remote-deploy/api/api.ts | 3 ++- .../src/components/remote-deploy/github/Repos.tsx | 11 +++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index d74dc5d99..79a2a4715 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -61,6 +61,7 @@ export const useRepos = () => { }, onError: (error: AxiosError<{ message: string }>) => { if (error?.response?.data?.message === "Bad credentials") { + console.log(error); } }, @@ -91,7 +92,7 @@ export const useFetchAccessToken = () => { }); }; -export const useBranches = (repo?: string, fetch?: boolean) => { +export const useBranches = (repo?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index f99a8249f..0959196b8 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -32,7 +32,7 @@ import CustomInput from "../CustomInput"; import useFramework from "../FrameworkDetection"; import { IGithubDirectoryItem } from "../remoteTypes"; import { appendEnv, removeEnv, removeInitialUrl, RepoType } from "../utils"; -// import { handleLogin } from "../api/api"; + const Repos = ({ repos, setValue, @@ -95,10 +95,14 @@ const Repos = ({ const differentOwnersArray = repos?.map(repo => repo?.owner?.login || ""); const uniqueOwners = Array.from(new Set(differentOwnersArray)); setAccounts(uniqueOwners); - setCurrentAccount(uniqueOwners?.find(account => profile?.login === account) || uniqueOwners?.[0]); + setCurrentAccount( + repos?.find(repo => currentRepo?.value?.includes(repo?.html_url?.replace("https://github.com/", "")))?.owner?.login || + uniqueOwners?.find(account => profile?.login === account) || + uniqueOwners?.[0] + ); } setFilteredRepos(repos); - }, [repos]); + }, [repos, type, profile]); return (
@@ -243,7 +247,6 @@ const Repos = ({

Select Directory

- {/*

{currentFramework?.title}

*/}
Date: Thu, 29 Aug 2024 00:06:00 +0530 Subject: [PATCH 27/59] feat: images for git accounts --- apps/deploy-web/next.config.js | 2 +- .../src/components/remote-deploy/github/Repos.tsx | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/apps/deploy-web/next.config.js b/apps/deploy-web/next.config.js index 2cd3b5d10..d02dfbfb4 100644 --- a/apps/deploy-web/next.config.js +++ b/apps/deploy-web/next.config.js @@ -20,7 +20,7 @@ const moduleExports = { styledComponents: true }, images: { - domains: ["raw.githubusercontent.com"] + domains: ["raw.githubusercontent.com", "avatars.githubusercontent.com"] }, output: "standalone", typescript: { diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 0959196b8..711c2f82f 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -22,6 +22,7 @@ import { Folder, GithubCircle, Lock } from "iconoir-react"; import { useAtom } from "jotai"; import { Globe2 } from "lucide-react"; import { nanoid } from "nanoid"; +import Image from "next/image"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; @@ -139,8 +140,17 @@ const Repos = ({ {accounts?.map((account, index) => (
- {" "} - + {repos?.find(repo => repo?.owner?.login === account)?.owner?.avatar_url ? ( + repo?.owner?.login === account)?.owner?.avatar_url || ""} + alt={account} + className="h-6 w-6 rounded-full" + /> + ) : ( + + )} {account}
From b9239ea3442f6fa33139483fa562334008d6e667 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 29 Aug 2024 16:08:08 +0530 Subject: [PATCH 28/59] fix: filtering of repo (In Github) --- apps/deploy-web/src/components/remote-deploy/github/Github.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index ba47771bb..f7a1fc4bd 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -27,7 +27,7 @@ const Github = ({ return ( <> repo.owner?.login === profile?.login || repo?.owner?.type === "Organization") as any} setValue={setValue} isLoading={isLoading} services={services} From 0d6435228c0e1339abf5623f6fa27ea6a765b827 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 30 Aug 2024 22:32:31 +0530 Subject: [PATCH 29/59] fix: ui (remote deploy) --- .../deployments/DeploymentDetail.tsx | 7 +- .../src/components/deployments/LeaseRow.tsx | 7 +- .../components/new-deployment/GihubDeploy.tsx | 168 +++++++++--------- .../src/components/remote-deploy/Advanced.tsx | 28 +-- .../components/remote-deploy/CustomInput.tsx | 4 +- .../src/components/remote-deploy/Details.tsx | 61 +++---- .../src/components/remote-deploy/utils.ts | 10 ++ 7 files changed, 134 insertions(+), 151 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index 312a3a811..46ae6ad4d 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -22,7 +22,7 @@ import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils"; import { cn } from "@src/utils/styleUtils"; import { UrlService } from "@src/utils/urlUtils"; import Layout from "../layout/Layout"; -import { isRedeployImage } from "../remote-deploy/utils"; +import { getRepoUrl, isRedeployImage } from "../remote-deploy/utils"; import { Title } from "../shared/Title"; import { DeploymentDetailTopBar } from "./DeploymentDetailTopBar"; import { DeploymentLeaseShell } from "./DeploymentLeaseShell"; @@ -137,9 +137,11 @@ export function DeploymentDetail() { }); }; const [remoteDeploy, setRemoteDeploy] = useState(false); + const [repo, setRepo] = useState(null); const [editedManifest, setEditedManifest] = useState(null); const [deploymentVersion, setDeploymentVersion] = useState(null); const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false); + useEffect(() => { const init = async () => { const localDeploymentData = getDeploymentLocalData(deployment?.dseq || ""); @@ -164,6 +166,8 @@ export function DeploymentDetail() { useEffect(() => { if (editedManifest && isRedeployImage(editedManifest)) { + setRepo(getRepoUrl(editedManifest)); + setRemoteDeploy(true); } }, [editedManifest]); @@ -243,6 +247,7 @@ export function DeploymentDetail() { {leases && leases.map((lease, i) => ( void; remoteDeploy?: boolean; + repo?: string | null; }; export type AcceptRefType = { @@ -49,7 +50,7 @@ export type AcceptRefType = { }; export const LeaseRow = React.forwardRef( - ({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail, remoteDeploy }, ref) => { + ({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail, remoteDeploy, repo }, ref) => { const provider = providers?.find(p => p.owner === lease?.provider); const { localCert } = useCertificate(); const isLeaseActive = lease.state === "active"; @@ -330,7 +331,7 @@ export const LeaseRow = React.forwardRef(
- {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && ( + {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && !remoteDeploy && (
0 })}> ( return (
  • - {uri} + {remoteDeploy ? {repo?.replaceAll("https://github.com/", "")} : {uri}}{" "}    diff --git a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx index 338854cad..c673b75f4 100644 --- a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx +++ b/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx @@ -74,74 +74,65 @@ const GithubDeploy = ({ return ( <>
    -

    Configure

    -
    -

    Source Code

    - - { - { - setSelectedTab(value); - setValue("services.0.env", []); - }} - defaultValue="git" - > -
    - - Git Provider - Public Git Repository - - - {token?.access_token && ( -
    - - -
    - )} -
    - - {fetchingToken || fetchingProfile || fetchingTokenBit || fetchingProfileBit || fetchingTokenGitLab || fetchingProfileGitLab ? ( -
    - -

    Loading...

    -
    - ) : token?.access_token ? ( -
    -

    - Welcome,{" "} - {token?.type === "bitbucket" ? userProfileBit?.display_name : token?.type === "gitlab" ? userProfileGitLab?.name : userProfile?.login} -

    -

    Let’s Configure and Deploy your new web service ({token?.type})

    -
    - ) : ( +

    Import Repository

    + + { + { + setSelectedTab(value); + setValue("services.0.env", []); + }} + defaultValue="git" + > +
    + + Git Provider + Public Git Repository + + + {token?.access_token && ( +
    + + +
    + )} +
    + + {fetchingToken || fetchingProfile || fetchingTokenBit || fetchingProfileBit || fetchingTokenGitLab || fetchingProfileGitLab ? ( +
    + +

    Loading...

    +
    + ) : ( + !token?.access_token && (

    Connect Account

    @@ -188,25 +179,26 @@ const GithubDeploy = ({
    - )} -     - - appendEnv("REPO_URL", e.target.value, false, setValue, services)} - /> - appendEnv("BRANCH_NAME", e.target.value, false, setValue, services)} - /> - -     - } -
    + ) + )} + + + appendEnv("REPO_URL", e.target.value, false, setValue, services)} + /> + appendEnv("BRANCH_NAME", e.target.value, false, setValue, services)} + /> + + + } + {selectedTab === "git" && token?.access_token && (
    {token?.type === "github" ? ( @@ -244,7 +236,7 @@ const GithubDeploy = ({ )}
    - + ); }; diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index 97e912317..ab1d5f18d 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -1,11 +1,11 @@ import { useState } from "react"; -import { Card, CardContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Label, Separator } from "@akashnetwork/ui/components"; +import { Card, CardContent, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator } from "@akashnetwork/ui/components"; import { cn } from "@akashnetwork/ui/utils"; import { NavArrowDown } from "iconoir-react"; import { EnvFormModal } from "./EnvFormModal"; -import { appendEnv } from "./utils"; -const Advanced = ({ services, control, setValue }) => { + +const Advanced = ({ services, control }) => { const serviceIndex = 0; const [expanded, setExpanded] = useState(false); const currentService = services[serviceIndex]; @@ -21,7 +21,7 @@ const Advanced = ({ services, control, setValue }) => {
    -

    Other Options

    +

    Environment Variables

     @@ -35,26 +35,6 @@ const Advanced = ({ services, control, setValue }) => { envs={currentService.env || []} // hasSecretOption={hasSecretOption} /> -
    -
    - - - env.key === "DISABLE_PULL")?.value !== "yes"} - id="disable-pull" - defaultChecked={false} - onCheckedChange={value => { - const pull = !value ? "yes" : "no"; - appendEnv("DISABLE_PULL", pull, false, setValue, services); - }} - /> -
    -

    - By default, console automatically detects and deploys changes, disable it to handle deploys manually -

    -
    diff --git a/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx b/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx index 34c4cb607..47a62ebeb 100644 --- a/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx +++ b/apps/deploy-web/src/components/remote-deploy/CustomInput.tsx @@ -7,7 +7,7 @@ const CustomInput = ({ onChange }: { label: string; - description: string; + description?: string; placeholder: string; onChange: (e: React.ChangeEvent) => void; }) => { @@ -15,7 +15,7 @@ const CustomInput = ({

    {label}

    -

    {description}

    + {description &&

    {description}

    }
    diff --git a/apps/deploy-web/src/components/remote-deploy/Details.tsx b/apps/deploy-web/src/components/remote-deploy/Details.tsx index 110316e37..a24481602 100644 --- a/apps/deploy-web/src/components/remote-deploy/Details.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Details.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { Card, CardContent, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator } from "@akashnetwork/ui/components"; +import { Card, CardContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Label, Separator } from "@akashnetwork/ui/components"; import { cn } from "@akashnetwork/ui/utils"; import { NavArrowDown } from "iconoir-react"; @@ -8,7 +8,7 @@ import { appendEnv } from "./utils"; const Details = ({ services, setValue }) => { const [expanded, setExpanded] = useState(false); - + const currentService = services[0]; return ( {
    -

    Advanced Configurations

    +

    Build & Install Configurations

     {expanded && }
    +
    +
    + + + env.key === "DISABLE_PULL")?.value !== "yes"} + id="disable-pull" + defaultChecked={false} + onCheckedChange={value => { + const pull = !value ? "yes" : "no"; + appendEnv("DISABLE_PULL", pull, false, setValue, services); + }} + /> +
    +

    + By default, console automatically detects and deploys changes, disable it to handle deploys manually +

    +
    appendEnv("INSTALL_COMMAND", e.target.value, false, setValue, services)} label="Install Command" - description="By default we use npm install, Change the version if needed" - placeholder="eg. npm install" - /> - appendEnv("BUILD_DIRECTORY", e.target.value, false, setValue, services)} - label="Build Directory" - description="The custom build directory name for your repo" - placeholder="eg. dist" + placeholder="npm install" /> + appendEnv("BUILD_DIRECTORY", e.target.value, false, setValue, services)} label="Build Directory" placeholder="dist" /> appendEnv("BUILD_COMMAND", e.target.value, false, setValue, services)} label="Build Command" - description="The custom build command for your repo" - placeholder="eg. npm run build" + placeholder="npm run build" /> - appendEnv("CUSTOM_SRC", e.target.value, false, setValue, services)} - label="Start Command" - description="The custom start command for your repo" - placeholder="eg. npm start" - /> - appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} - label="Node Version" - description="By default we use 20, Change the version if needed" - placeholder="eg. 21" - /> - - {/* appendEnv("COMMIT_HASH", e.target.value, false, setValue, services)} - label="Commit Hash" - description="The Commit Hash used for your private service" - - placeholder="eg. anything" - /> */} + appendEnv("CUSTOM_SRC", e.target.value, false, setValue, services)} label="Start Command" placeholder="npm start" /> + appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} label="Node Version" placeholder="21" />
    diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index ce990576e..6ede9986f 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -67,3 +67,13 @@ export interface RepoType { export const isRedeployImage = (yml: string) => { return github.content.includes(yml?.split("service-1:")?.[1]?.split("expose:")?.[0]?.split("image: ")?.[1]); }; + +export const getRepoUrl = (yml: string) => { + const list = yml?.split("\n"); + const envIndex = list?.findIndex(item => item?.includes("env:")); + const profileIndex = list?.findIndex(item => item?.includes("profiles:")); + const env = list?.slice(envIndex + 1, profileIndex); + const repo = env?.find(item => item?.includes("REPO_URL")); + + return repo ? repo?.split("=")[1] : null; +}; From a18e2884296b90b018a01fc3d5de48123a01d4de Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 31 Aug 2024 00:27:15 +0530 Subject: [PATCH 30/59] ui fix : rollback --- .../update/RemoteDeployUpdate.tsx | 211 ++++++++--------- .../remote-deploy/update/Rollback.tsx | 220 ++++++++++++++++++ 2 files changed, 318 insertions(+), 113 deletions(-) create mode 100644 apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index b16cab70d..b8cf73a9f 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -1,21 +1,7 @@ import React, { Dispatch, useEffect, useState } from "react"; -import { Control, useFieldArray, useForm } from "react-hook-form"; -import { - Checkbox, - Input, - Label, - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectTrigger, - SelectValue, - Snackbar, - Switch -} from "@akashnetwork/ui/components"; -import { GitCommit } from "iconoir-react"; +import { useFieldArray, useForm } from "react-hook-form"; +import { Checkbox, Label, Snackbar } from "@akashnetwork/ui/components"; import { useAtom } from "jotai"; -import { nanoid } from "nanoid"; import { useSnackbar } from "notistack"; import remoteDeployStore from "@src/store/remoteDeployStore"; @@ -24,14 +10,12 @@ import { defaultService } from "@src/utils/sdl/data"; import { generateSdl } from "@src/utils/sdl/sdlGenerator"; import { importSimpleSdl } from "@src/utils/sdl/sdlImport"; import { github } from "@src/utils/templates"; -import { useCommits } from "../api/api"; -import { useBitBucketCommits } from "../api/bitbucket-api"; -import { useGitLabCommits } from "../api/gitlab-api"; import BitBranches from "../bitbucket/Branches"; import { EnvFormModal } from "../EnvFormModal"; import Branches from "../github/Branches"; import GitBranches from "../gitlab/Branches"; -import { appendEnv, removeInitialUrl } from "../utils"; +import { appendEnv } from "../utils"; +import Rollback from "./Rollback"; const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: string; setEditedManifest: Dispatch> }) => { const [token] = useAtom(remoteDeployStore.tokens); const [, setIsInit] = useState(false); @@ -104,7 +88,8 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin

    Rollback

    Rollback to a specific commit

    - + {/* */} +
    • {token?.type === "github" ? ( @@ -119,97 +104,97 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin ) : null; }; export default RemoteDeployUpdate; -const SelectCommit = ({ services, control }: { services: ServiceType[]; control: Control }) => { - const { data } = useCommits( - services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value?.replace("https://github.com/", "") ?? "", - services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ?? "" - ); - const { data: labCommits } = useGitLabCommits( - services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, - services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value - ); - const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); +// const SelectCommit = ({ services, control }: { services: ServiceType[]; control: Control }) => { +// const { data } = useCommits( +// services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value?.replace("https://github.com/", "") ?? "", +// services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ?? "" +// ); +// const { data: labCommits } = useGitLabCommits( +// services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, +// services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value +// ); +// const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); - return ( - 0 - ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) - : labCommits?.length > 0 - ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) - : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })) - } - control={control} - /> - ); -}; -const Field = ({ data, control }: { data: any; control: Control }) => { - const [manual, setManual] = useState(false); - const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); - const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); +// return ( +// 0 +// ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) +// : labCommits?.length > 0 +// ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) +// : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })) +// } +// control={control} +// /> +// ); +// }; +// const Field = ({ data, control }: { data: any; control: Control }) => { +// const [manual, setManual] = useState(false); +// const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); +// const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); - const { enqueueSnackbar } = useSnackbar(); - return ( -
    - {manual ? ( - e.key === "COMMIT_HASH")?.value} - placeholder="Commit Hash" - onChange={e => { - const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; - if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { - update( - services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), - hash - ); - } else { - append(hash); - } - }} - /> - ) : ( - - )} - { - setManual(checked); - }} - checked={manual} - />{" "} -
    - ); -}; +// const { enqueueSnackbar } = useSnackbar(); +// return ( +//
    +// {manual ? ( +// e.key === "COMMIT_HASH")?.value} +// placeholder="Commit Hash" +// onChange={e => { +// const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; +// if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { +// update( +// services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), +// hash +// ); +// } else { +// append(hash); +// } +// }} +// /> +// ) : ( +// +// )} +// { +// setManual(checked); +// }} +// checked={manual} +// />{" "} +//
    +// ); +// }; diff --git a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx new file mode 100644 index 000000000..823e3fbda --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx @@ -0,0 +1,220 @@ +import React, { useEffect, useState } from "react"; +import { Control, useFieldArray } from "react-hook-form"; +import { + Button, + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, + Input, + Label, + RadioGroup, + RadioGroupItem, + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from "@akashnetwork/ui/components"; +import { GitCommitVertical, GitGraph, Info } from "lucide-react"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { useCommits } from "../api/api"; +import { useBitBucketCommits } from "../api/bitbucket-api"; +import { useGitLabCommits } from "../api/gitlab-api"; +import { removeInitialUrl } from "../utils"; + +const Rollback = ({ services, control }: { services: ServiceType[]; control: Control }) => { + const { data } = useCommits( + services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value?.replace("https://github.com/", "") ?? "", + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ?? "" + ); + const { data: labCommits } = useGitLabCommits( + services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, + services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value + ); + const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); + + const commits = + data?.length > 0 + ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) + : labCommits?.length > 0 + ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) + : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })); + + return ; +}; +export default Rollback; + +const Field = ({ data, control }: { data: any; control: Control }) => { + const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); + const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); + const [value, setValue] = useState(""); + + const [filteredData, setFilteredData] = useState([]); + const currentHash = services[0]?.env?.find(e => e.key === "COMMIT_HASH")?.value; + useEffect(() => { + if (data) { + setFilteredData( + data?.filter((item: any) => { + return item.name.toLowerCase().includes(value.toLowerCase()); + }) + ); + } + }, [data, value]); + + return ( +
    + + + + + + + Rollbacks + + + You need to click update deployment button to apply changes + + + + + Git + Custom + + +
    +
    + { + setValue(e.target.value); + // setFilteredData(data.filter((item: any) => item.name.toLowerCase().includes(e.target.value.toLowerCase()))); + }} + /> +
    + {filteredData?.length > 0 ? ( + e.key === "COMMIT_HASH")?.value} + onValueChange={value => { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: value, isSecret: false }; + // enqueueSnackbar(, { + // variant: "info" + // }); + if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { + update( + services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), + hash + ); + } else { + append(hash); + } + }} + > + {filteredData?.map((item: any) => ( +
    + + +
    + ))} +     + ) : ( + <> + )} +
    +     + +
    + + e.key === "COMMIT_HASH")?.value} + placeholder="Commit Hash" + onChange={e => { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; + if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { + update( + services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), + hash + ); + } else { + append(hash); + } + }} + /> +
    +     +     +     +     + {/* {manual ? ( + e.key === "COMMIT_HASH")?.value} + placeholder="Commit Hash" + onChange={e => { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; + if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { + update( + services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), + hash + ); + } else { + append(hash); + } + }} + /> + ) : ( + + )} + { + setManual(checked); + }} + checked={manual} + />{" "} */} +
    + ); +}; From e2d66fc43a65250e16eec819242d7eaa4ee1c65b Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 31 Aug 2024 01:46:00 +0530 Subject: [PATCH 31/59] update Rollback.tsx --- .../deploy-web/src/components/remote-deploy/update/Rollback.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx index 823e3fbda..ae6783dd0 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx @@ -75,7 +75,7 @@ const Field = ({ data, control }: { data: any; control: Control - + Rollbacks From 5547af269dbeb8fdbb338623459d924c9a9ecdf7 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 31 Aug 2024 11:59:22 +0530 Subject: [PATCH 32/59] fix : names( Remote Deploy) --- .../components/new-deployment/SdlBuilder.tsx | 2 +- .../GithubDeploy.tsx} | 35 ++++++++++--------- 2 files changed, 19 insertions(+), 18 deletions(-) rename apps/deploy-web/src/components/{new-deployment/GihubDeploy.tsx => remote-deploy/GithubDeploy.tsx} (89%) diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx index b51e5fce7..f7da0eb53 100644 --- a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx +++ b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx @@ -16,8 +16,8 @@ import { defaultService, defaultSshVMService } from "@src/utils/sdl/data"; import { generateSdl } from "@src/utils/sdl/sdlGenerator"; import { importSimpleSdl } from "@src/utils/sdl/sdlImport"; import { transformCustomSdlFields, TransformError } from "@src/utils/sdl/transformCustomSdlFields"; +import GithubDeploy from "../remote-deploy/GithubDeploy"; import { SimpleServiceFormControl } from "../sdl/SimpleServiceFormControl"; -import GithubDeploy from "./GihubDeploy"; interface Props { sdlString: string | null; diff --git a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx similarity index 89% rename from apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx rename to apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index c673b75f4..7fd5b2231 100644 --- a/apps/deploy-web/src/components/new-deployment/GihubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -6,16 +6,16 @@ import { useAtom } from "jotai"; import { useWhen } from "@src/hooks/useWhen"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { ServiceType } from "@src/types"; -import Advanced from "../remote-deploy/Advanced"; -import { handleLogin, handleReLogin, 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"; +import { handleLogin, handleReLogin, useFetchAccessToken, useUserProfile } from "./api/api"; +import { handleLoginBit, useBitFetchAccessToken, useBitUserProfile } from "./api/bitbucket-api"; +import { handleGitLabLogin, useGitLabFetchAccessToken, useGitLabUserProfile } from "./api/gitlab-api"; +import Bit from "./bitbucket/Bit"; +import Github from "./github/Github"; +import GitLab from "./gitlab/Gitlab"; +import Advanced from "./Advanced"; +import CustomInput from "./CustomInput"; +import Details from "./Details"; +import { appendEnv } from "./utils"; const GithubDeploy = ({ setValue, @@ -73,7 +73,7 @@ const GithubDeploy = ({ return ( <> -
    +

    Import Repository

    { @@ -83,17 +83,18 @@ const GithubDeploy = ({ setValue("services.0.env", []); }} defaultValue="git" + className="mt-6" > -
    +
    Git Provider - Public Git Repository + Third-Party Git Repository {token?.access_token && (
    )}
    - + {fetchingToken || fetchingProfile || fetchingTokenBit || fetchingProfileBit || fetchingTokenGitLab || fetchingProfileGitLab ? (
    @@ -182,7 +183,7 @@ const GithubDeploy = ({ ) )} - + Date: Sat, 31 Aug 2024 13:18:48 +0530 Subject: [PATCH 33/59] update LeaseRow.tsx --- .../src/components/deployments/LeaseRow.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx index 4ba5ac234..5b63a0876 100644 --- a/apps/deploy-web/src/components/deployments/LeaseRow.tsx +++ b/apps/deploy-web/src/components/deployments/LeaseRow.tsx @@ -357,6 +357,22 @@ export const LeaseRow = React.forwardRef(
    )} + {remoteDeploy && repo && ( + <> +
    + +
      +
    • + + {repo?.replaceAll("https://github.com/", "")} + + + +
      • +
    +
    + + )} {service.uris?.length > 0 && ( <>
    @@ -366,7 +382,7 @@ export const LeaseRow = React.forwardRef( return (
  • - {remoteDeploy ? {repo?.replaceAll("https://github.com/", "")} : {uri}}{" "} + {uri}    From 5491178b1a1346a4b8bcf142c9069933c897eb19 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 31 Aug 2024 18:19:46 +0530 Subject: [PATCH 34/59] fix: ui issues (Remote Deploy) --- .../src/components/deployments/LeaseRow.tsx | 2 +- .../src/components/remote-deploy/Details.tsx | 30 +++++++++---------- .../components/remote-deploy/github/Repos.tsx | 2 +- .../update/RemoteDeployUpdate.tsx | 2 +- .../remote-deploy/update/Rollback.tsx | 6 ++-- 5 files changed, 20 insertions(+), 22 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx index 5b63a0876..073b43d45 100644 --- a/apps/deploy-web/src/components/deployments/LeaseRow.tsx +++ b/apps/deploy-web/src/components/deployments/LeaseRow.tsx @@ -364,7 +364,7 @@ export const LeaseRow = React.forwardRef(
    • - {repo?.replaceAll("https://github.com/", "")} + {repo?.replace("https://github.com/", "")?.replace("https://gitlab.com/", "")} diff --git a/apps/deploy-web/src/components/remote-deploy/Details.tsx b/apps/deploy-web/src/components/remote-deploy/Details.tsx index a24481602..886513a31 100644 --- a/apps/deploy-web/src/components/remote-deploy/Details.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Details.tsx @@ -27,6 +27,19 @@ const Details = ({ services, setValue }) => { {expanded && }
      + appendEnv("INSTALL_COMMAND", e.target.value, false, setValue, services)} + label="Install Command" + placeholder="npm install" + /> + appendEnv("BUILD_DIRECTORY", e.target.value, false, setValue, services)} label="Build Directory" placeholder="dist" /> + appendEnv("BUILD_COMMAND", e.target.value, false, setValue, services)} + label="Build Command" + placeholder="npm run build" + /> + appendEnv("CUSTOM_SRC", e.target.value, false, setValue, services)} label="Start Command" placeholder="npm start" /> + appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} label="Node Version" placeholder="21" />
      -

      - By default, console automatically detects and deploys changes, disable it to handle deploys manually -

      +

      If checked, Console will automatically re-deploy your app on any code commits

      - appendEnv("INSTALL_COMMAND", e.target.value, false, setValue, services)} - label="Install Command" - placeholder="npm install" - /> - appendEnv("BUILD_DIRECTORY", e.target.value, false, setValue, services)} label="Build Directory" placeholder="dist" /> - appendEnv("BUILD_COMMAND", e.target.value, false, setValue, services)} - label="Build Command" - placeholder="npm run build" - /> - appendEnv("CUSTOM_SRC", e.target.value, false, setValue, services)} label="Start Command" placeholder="npm start" /> - appendEnv("NODE_VERSION", e.target.value, false, setValue, services)} label="Node Version" placeholder="21" />
      diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx index 711c2f82f..0a813f9cf 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx @@ -109,7 +109,7 @@ const Repos = ({

      Select Repository

      -

      The Repository Branch used for your private service

      +

      Select a Repo to be deployed

      diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index b8cf73a9f..7042597f6 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -78,7 +78,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin }} />
      -

      By default, console automatically detects and deploys changes, disable it to handle deploys manually

      +

      If checked, Console will automatically re-deploy your app on any code commits

    • {services[0]?.env?.length && {}} />} {/* //type === github */} diff --git a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx index ae6783dd0..6ff3224d4 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx @@ -77,15 +77,15 @@ const Field = ({ data, control }: { data: any; control: Control Rollbacks - + You need to click update deployment button to apply changes - Git - Custom + Commit Name + Commit Hash
    From 895d42c593c57207ca449d951660f45aac7251fb Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 31 Aug 2024 19:25:50 +0530 Subject: [PATCH 35/59] remove : service name edit form remote deploy --- .../sdl/SimpleServiceFormControl.tsx | 69 ++++++++++--------- 1 file changed, 36 insertions(+), 33 deletions(-) diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx index db718f080..511b55d65 100644 --- a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx +++ b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx @@ -145,39 +145,42 @@ export const SimpleServiceFormControl: React.FunctionComponent = ({ /> )} -
    - ( - - Service Name - - The service name serves as a identifier for the workload to be ran on the Akash Network. -
    -
    - - View official documentation. - - - } - > - -     -
    - } - value={field.value} - className="flex-grow" - onChange={event => field.onChange((event.target.value || "").toLowerCase())} - /> - )} - /> - +
    + {github ? ( +

    Build Server Specs

    + ) : ( + ( + + Service Name + + The service name serves as a identifier for the workload to be ran on the Akash Network. +
    +
    + + View official documentation. + + + } + > + +     +
    + } + value={field.value} + className="flex-grow" + onChange={event => field.onChange((event.target.value || "").toLowerCase())} + /> + )} + /> + )}
    {!expanded && isDesktop && (
    From cbf4dd95891d7967d1d250f23917067c051ae467 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Tue, 3 Sep 2024 21:49:46 +0530 Subject: [PATCH 36/59] update Advanced.tsx and EnvFormModal.tsx --- apps/deploy-web/src/components/remote-deploy/Advanced.tsx | 1 + .../src/components/remote-deploy/EnvFormModal.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index ab1d5f18d..cdbd11d57 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -29,6 +29,7 @@ const Advanced = ({ services, control }) => {
    {}} serviceIndex={serviceIndex} diff --git a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx index 8d3c43d72..e153e72be 100644 --- a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx +++ b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx @@ -2,6 +2,7 @@ import { ReactNode, useState } from "react"; import { Control, Controller, useFieldArray } from "react-hook-form"; import { Button, CustomNoDivTooltip, FormInput, Switch } from "@akashnetwork/ui/components"; +import clsx from "clsx"; import { Bin, Eye, EyeClosed } from "iconoir-react"; import { nanoid } from "nanoid"; @@ -17,9 +18,10 @@ type Props = { control: Control; hasSecretOption?: boolean; children?: ReactNode; + subComponent?: boolean; }; -export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true }) => { +export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true, subComponent }) => { // const [envs, setEnvs] = useState(_envs); const { fields: envs, @@ -42,8 +44,8 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI }; return ( -
    -

    Environment Variables

    +
    + {!subComponent &&

    Environment Variables

    } {envs.filter(env => !hiddenEnv.includes(env?.key?.trim())).length === 0 && (

    No environment variables added.

    From 69c036613e9f3896a4754424f7d59b6d3be68ba4 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 6 Sep 2024 00:51:16 +0530 Subject: [PATCH 37/59] api: github api (next) --- .../src/components/remote-deploy/api/api.ts | 11 +++++--- .../src/components/remote-deploy/utils.ts | 2 +- .../src/pages/api/github/authenticate.ts | 28 +++++++++++++++++++ 3 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 apps/deploy-web/src/pages/api/github/authenticate.ts diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 79a2a4715..713e6f556 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -5,18 +5,19 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GithubRepository, IGithubDirectoryItem } from "../remoteTypes"; -import { PROXY_API_URL_AUTH, REDIRECT_URL } from "../utils"; +import { REDIRECT_URL } from "../utils"; const Github_API_URL = "https://api.github.com"; +//from env export const CLIEND_ID = "Iv23liZYLYN9I2HrgeOh"; export const handleLogin = () => { - window.location.href = "https://github.com/apps/akash-console/installations/new"; + window.location.href = process.env.NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL as string; }; export const handleReLogin = () => { - window.location.href = `https://github.com/login/oauth/authorize?client_id=${CLIEND_ID}&redirect_uri=${REDIRECT_URL}`; + window.location.href = `https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URL}`; }; const axiosInstance = axios.create({ @@ -75,13 +76,15 @@ export const useFetchAccessToken = () => { const router = useRouter(); return useMutation({ mutationFn: async (code: string) => { - const response = await axios.post(`${PROXY_API_URL_AUTH}/authenticate`, { + const response = await axios.post(`/api/github/authenticate`, { code }); return response.data; }, onSuccess: data => { + console.log(data); + setToken({ access_token: data.access_token, refresh_token: data.refresh_token, diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index 6ede9986f..b9c5976d7 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -24,7 +24,7 @@ export const hiddenEnv = [ "GITHUB_ACCESS_TOKEN", "FRONTEND_FOLDER" ]; -export const REDIRECT_URL = "https://akashconsole.vercel.app/new-deployment?step=edit-deployment&type=github"; +export const REDIRECT_URL = `${process.env.NEXT_PUBLIC_REDIRECT_URI}?step=edit-deployment&type=github`; export type ServiceControl = Control; export function appendEnv(key: string, value: string, isSecret: boolean, setValue: any, services: ServiceType[]) { const previousEnv = services[0]?.env || []; diff --git a/apps/deploy-web/src/pages/api/github/authenticate.ts b/apps/deploy-web/src/pages/api/github/authenticate.ts new file mode 100644 index 000000000..56dfe73b6 --- /dev/null +++ b/apps/deploy-web/src/pages/api/github/authenticate.ts @@ -0,0 +1,28 @@ +import axios from "axios"; + +const githubApi = "https://github.com"; + +export default function handler(req, res) { + const { code } = req.body; + const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; + + if (code) { + axios + .post(`${githubApi}/login/oauth/access_token`, { + client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, + client_secret: GITHUB_CLIENT_SECRET, + code, + redirect_uri: NEXT_PUBLIC_REDIRECT_URI + }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + res.status(200).json({ access_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); + } +} From 18bdf90b10cf2cbaf07ff0773fbc2a1bf49a8324 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 6 Sep 2024 17:56:34 +0530 Subject: [PATCH 38/59] next api: remote deploy - gitlab,bitbucket --- .../remote-deploy/api/bitbucket-api.ts | 54 +++++++++---------- .../remote-deploy/api/gitlab-api.ts | 11 ++-- .../src/pages/api/bitbucket/authenticate.ts | 30 +++++++++++ .../src/pages/api/bitbucket/refresh.ts | 31 +++++++++++ .../src/pages/api/gitlab/authenticate.ts | 28 ++++++++++ .../src/pages/api/gitlab/refresh.ts | 28 ++++++++++ 6 files changed, 146 insertions(+), 36 deletions(-) create mode 100644 apps/deploy-web/src/pages/api/bitbucket/authenticate.ts create mode 100644 apps/deploy-web/src/pages/api/bitbucket/refresh.ts create mode 100644 apps/deploy-web/src/pages/api/gitlab/authenticate.ts create mode 100644 apps/deploy-web/src/pages/api/gitlab/refresh.ts diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index aede37e7f..91b5709e7 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -4,13 +4,11 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { PROXY_API_URL_AUTH } from "../utils"; const Bitbucket_API_URL = "https://api.bitbucket.org/2.0"; -const BitBucketKey = "HfxhSWx78u8juqs2Ta"; export const handleLoginBit = () => { - window.location.href = `https://bitbucket.org/site/oauth2/authorize?client_id=${BitBucketKey}&response_type=code`; + window.location.href = `https://bitbucket.org/site/oauth2/authorize?client_id=${process.env.NEXT_PUBLIC_BITBUCKET_CLIENT_ID}&response_type=code`; }; const axiosInstance = axios.create({ baseURL: Bitbucket_API_URL, @@ -25,7 +23,7 @@ export const useFetchRefreshBitToken = () => { return useMutation({ mutationFn: async () => { - const response = await axios.post(`${PROXY_API_URL_AUTH}/bitbucket/refresh`, { + const response = await axios.post(`/api/bitbucket/refresh`, { refreshToken: token?.refresh_token }); @@ -41,6 +39,30 @@ export const useFetchRefreshBitToken = () => { }); }; +export const useBitFetchAccessToken = () => { + const [, setToken] = useAtom(remoteDeployStore.tokens); + const pathname = usePathname(); + const router = useRouter(); + return useMutation({ + mutationFn: async (code: string) => { + const response = await axios.post(`/api/bitbucket/authenticate`, { + code + }); + + return response.data; + }, + onSuccess: data => { + setToken({ + access_token: data.access_token, + refresh_token: data.refresh_token, + type: "bitbucket" + }); + + router.replace(pathname.split("?")[0] + "?step=edit-deployment&type=github"); + } + }); +}; + export const useBitUserProfile = () => { const [token] = useAtom(remoteDeployStore.tokens); const { mutate } = useFetchRefreshBitToken(); @@ -79,30 +101,6 @@ export const useBitBucketCommits = (repo?: string) => { }); }; -export const useBitFetchAccessToken = () => { - const [, setToken] = useAtom(remoteDeployStore.tokens); - const pathname = usePathname(); - const router = useRouter(); - return useMutation({ - mutationFn: async (code: string) => { - const response = await axios.post(`${PROXY_API_URL_AUTH}/bitbucket/authenticate`, { - code - }); - - return response.data; - }, - onSuccess: data => { - setToken({ - access_token: data.access_token, - refresh_token: data.refresh_token, - type: "bitbucket" - }); - - router.replace(pathname.split("?")[0] + "?step=edit-deployment&type=github"); - } - }); -}; - export const useWorkspaces = () => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 8ce186231..2b7afe293 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -4,14 +4,9 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { PROXY_API_URL_AUTH } from "../utils"; - -// ?step=edit-deployment&type=github -const CLIEND_ID = "f8b7584c38a6aaba2315e3c377513debd589e0a06bf15cc3fd96b1dd713b19ca"; -const REDIRECT_URL = "https://akashconsole.vercel.app/new-deployment"; export const handleGitLabLogin = () => { - window.location.href = `https://gitlab.com/oauth/authorize?client_id=${CLIEND_ID}&redirect_uri=${REDIRECT_URL}&response_type=code&scope=read_user+read_repository+read_api+api&state=gitlab`; + window.location.href = `https://gitlab.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code&scope=read_user+read_repository+read_api+api&state=gitlab`; }; const axiosInstance = axios.create({ @@ -28,7 +23,7 @@ export const useGitLabFetchAccessToken = () => { const router = useRouter(); return useMutation({ mutationFn: async (code: string) => { - const response = await axios.post(`${PROXY_API_URL_AUTH}/gitlab/authenticate`, { + const response = await axios.post(`/api/gitlab/authenticate`, { code }); @@ -51,7 +46,7 @@ export const useFetchRefreshGitlabToken = () => { return useMutation({ mutationFn: async () => { - const response = await axios.post(`${PROXY_API_URL_AUTH}/gitlab/refresh`, { + const response = await axios.post(`/api/gitlab/refresh`, { refreshToken: token?.refresh_token }); diff --git a/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts b/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts new file mode 100644 index 000000000..d505c716d --- /dev/null +++ b/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts @@ -0,0 +1,30 @@ +import axios from "axios"; + +export default function handler(req, res) { + const tokenUrl = "https://bitbucket.org/site/oauth2/access_token"; + const { code } = req.body; + const params = new URLSearchParams(); + params.append("grant_type", "authorization_code"); + params.append("code", code); + const { NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET } = process.env; + const headers = { + Authorization: `Basic ${Buffer.from(`${NEXT_PUBLIC_BITBUCKET_CLIENT_ID}:${BITBUCKET_CLIENT_SECRET}`).toString("base64")}`, + "Content-Type": "application/x-www-form-urlencoded" + }; + + if (code) { + axios + .post(tokenUrl, params.toString(), { headers }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + const refresh_token = params.get("refresh_token"); + res.status(200).json({ access_token, refresh_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); + } +} diff --git a/apps/deploy-web/src/pages/api/bitbucket/refresh.ts b/apps/deploy-web/src/pages/api/bitbucket/refresh.ts new file mode 100644 index 000000000..da5feac33 --- /dev/null +++ b/apps/deploy-web/src/pages/api/bitbucket/refresh.ts @@ -0,0 +1,31 @@ +import axios from "axios"; + +export default function handler(req, res) { + const tokenUrl = "https://bitbucket.org/site/oauth2/access_token"; + const { refreshToken } = req.body; + const params = new URLSearchParams(); + params.append("grant_type", "refresh_token"); + params.append("refresh_token", refreshToken); + + const { NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET } = process.env; + const headers = { + Authorization: `Basic ${Buffer.from(`${NEXT_PUBLIC_BITBUCKET_CLIENT_ID}:${BITBUCKET_CLIENT_SECRET}`).toString("base64")}`, + "Content-Type": "application/x-www-form-urlencoded" + }; + + if (refreshToken) { + axios + .post(tokenUrl, params.toString(), { headers }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + const refresh_token = params.get("refresh_token"); + res.status(200).json({ access_token, refresh_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); + } +} diff --git a/apps/deploy-web/src/pages/api/gitlab/authenticate.ts b/apps/deploy-web/src/pages/api/gitlab/authenticate.ts new file mode 100644 index 000000000..2fec2c546 --- /dev/null +++ b/apps/deploy-web/src/pages/api/gitlab/authenticate.ts @@ -0,0 +1,28 @@ +import axios from "axios"; + +export default function handler(req, res) { + const { code } = req.body; + const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; + + if (code) { + axios + .post(`https://gitlab.com/oauth/token`, { + client_id: NEXT_PUBLIC_GITLAB_CLIENT_ID, + client_secret: GITLAB_CLIENT_SECRET, + code, + redirect_uri: NEXT_PUBLIC_REDIRECT_URI, + grant_type: "authorization_code" + }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + const refresh_token = params.get("refresh_token"); + res.status(200).json({ access_token, refresh_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); + } +} diff --git a/apps/deploy-web/src/pages/api/gitlab/refresh.ts b/apps/deploy-web/src/pages/api/gitlab/refresh.ts new file mode 100644 index 000000000..5713aae4a --- /dev/null +++ b/apps/deploy-web/src/pages/api/gitlab/refresh.ts @@ -0,0 +1,28 @@ +import axios from "axios"; + +export default function handler(req, res) { + const { refreshToken } = req.body; + const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET } = process.env; + + if (refreshToken) { + axios + .post(`https://gitlab.com/oauth/token`, { + client_id: NEXT_PUBLIC_GITLAB_CLIENT_ID, + client_secret: GITLAB_CLIENT_SECRET, + refresh_token: refreshToken, + + grant_type: "refresh_token" + }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + const refresh_token = params.get("refresh_token"); + res.status(200).json({ access_token, refresh_token }); + }) + .catch(err => { + res.status(500).send(err); + }); + } else { + res.status(400).send("No code provided"); + } +} From 874145c33270fa5c9b0fff633715a8a67dd43521 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 14:29:46 +0530 Subject: [PATCH 39/59] ui fixes : Env and account ui (Remote Deploy) --- .../src/components/remote-deploy/Advanced.tsx | 24 +- .../components/remote-deploy/EnvFormModal.tsx | 269 ++++++++++++++---- .../src/components/remote-deploy/EnvList.tsx | 67 +++++ .../components/remote-deploy/GithubDeploy.tsx | 149 +++++++--- 4 files changed, 403 insertions(+), 106 deletions(-) create mode 100644 apps/deploy-web/src/components/remote-deploy/EnvList.tsx diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index cdbd11d57..20ff7dc34 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -3,13 +3,15 @@ import { Card, CardContent, Collapsible, CollapsibleContent, CollapsibleTrigger, import { cn } from "@akashnetwork/ui/utils"; import { NavArrowDown } from "iconoir-react"; +// import { EnvVarList } from "../sdl/EnvVarList"; import { EnvFormModal } from "./EnvFormModal"; +import { EnvVarList } from "./EnvList"; const Advanced = ({ services, control }) => { const serviceIndex = 0; const [expanded, setExpanded] = useState(false); const currentService = services[serviceIndex]; - + const [isEditingEnv, setIsEditingEnv] = useState(null); return ( { {expanded && }
    - {}} - serviceIndex={serviceIndex} - envs={currentService.env || []} - // hasSecretOption={hasSecretOption} - /> + {isEditingEnv === serviceIndex && ( + setIsEditingEnv(null)} + serviceIndex={serviceIndex} + envs={currentService.env || []} + // hasSecretOption={hasSecretOption} + /> + )} +
    + +
    diff --git a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx index e153e72be..a081a4021 100644 --- a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx +++ b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx @@ -1,9 +1,138 @@ +// "use client"; +// import { ReactNode, useState } from "react"; +// import { Control, Controller, useFieldArray } from "react-hook-form"; +// import { Button, CustomNoDivTooltip, FormInput, Switch } from "@akashnetwork/ui/components"; +// import clsx from "clsx"; +// import { Bin, Eye, EyeClosed } from "iconoir-react"; +// import { nanoid } from "nanoid"; + +// import { EnvironmentVariableType, RentGpusFormValuesType, SdlBuilderFormValuesType } from "@src/types"; +// import { cn } from "@src/utils/styleUtils"; +// import { FormPaper } from "../sdl/FormPaper"; +// import { hiddenEnv } from "./utils"; + +// type Props = { +// serviceIndex: number; +// onClose: () => void; +// envs: EnvironmentVariableType[]; +// control: Control; +// hasSecretOption?: boolean; +// children?: ReactNode; +// subComponent?: boolean; +// }; + +// export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true, subComponent }) => { +// // const [envs, setEnvs] = useState(_envs); +// const { +// fields: envs, +// remove: removeEnv, +// append: appendEnv +// } = useFieldArray({ +// control, +// name: `services.${serviceIndex}.env`, +// keyName: "id" +// }); + +// // useEffect(() => { +// // if (_envs.length === 0) { +// // onAddEnv(); +// // } +// // }, []); + +// const onAddEnv = () => { +// appendEnv({ id: nanoid(), key: "", value: "", isSecret: false }); +// }; + +// return ( +//
    +// {!subComponent &&

    Environment Variables

    } +// +// {envs.filter(env => !hiddenEnv.includes(env?.key?.trim())).length === 0 && ( +//

    No environment variables added.

    +// )} +// {envs.map((env, envIndex) => { +// return ( +//
    +//
    +// ( +//
    +// field.onChange(event.target.value)} +// className="w-full" +// /> +//
    +// )} +// /> + +// ( +//
    +// +//
    +// )} +// /> +//
    + +//
    0, +// ["justify-end"]: envIndex === 0 || !hasSecretOption +// })} +// > +// {envIndex > 0 && ( +// +// )} + +// {hasSecretOption && ( +// ( +// +//

    +// Secret +//

    +//

    +// This is for secret variables containing sensitive information you don't want to be saved in your template. +//

    +// +// } +// > +// +//     +// )} +// /> +// )} +//
    +//
    +// ); +// })} +//     +// +//
    +// ); +// }; + "use client"; -import { ReactNode, useState } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { Control, Controller, useFieldArray } from "react-hook-form"; -import { Button, CustomNoDivTooltip, FormInput, Switch } from "@akashnetwork/ui/components"; -import clsx from "clsx"; -import { Bin, Eye, EyeClosed } from "iconoir-react"; +import { Button, CustomNoDivTooltip, FormField, FormInput, Popup, Switch } from "@akashnetwork/ui/components"; +import { Bin } from "iconoir-react"; import { nanoid } from "nanoid"; import { EnvironmentVariableType, RentGpusFormValuesType, SdlBuilderFormValuesType } from "@src/types"; @@ -18,11 +147,9 @@ type Props = { control: Control; hasSecretOption?: boolean; children?: ReactNode; - subComponent?: boolean; }; -export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true, subComponent }) => { - // const [envs, setEnvs] = useState(_envs); +export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, envs: _envs, onClose, hasSecretOption = true }) => { const { fields: envs, remove: removeEnv, @@ -33,32 +160,75 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI keyName: "id" }); - // useEffect(() => { - // if (_envs.length === 0) { - // onAddEnv(); - // } - // }, []); - const onAddEnv = () => { appendEnv({ id: nanoid(), key: "", value: "", isSecret: false }); }; + const _onClose = () => { + const _envToRemove: number[] = []; + + _envs.forEach((e, i) => { + if (!e.key.trim()) { + _envToRemove.push(i); + } + }); + + removeEnv(_envToRemove); + + onClose(); + }; + + const [currentEnvs, setCurrentEnvs] = useState(); + + console.log(currentEnvs, envs); + + useEffect(() => { + const cenvs = envs?.filter(e => !hiddenEnv.includes(e?.key?.trim())); + setCurrentEnvs(cenvs); + if (cenvs.length === 0) { + onAddEnv(); + } + }, [envs]); + return ( -
    - {!subComponent &&

    Environment Variables

    } - - {envs.filter(env => !hiddenEnv.includes(env?.key?.trim())).length === 0 && ( -

    No environment variables added.

    - )} - {envs.map((env, envIndex) => { + + + {currentEnvs?.map((env, envIndex) => { + const index = envs?.findIndex(e => e.id === env.id); + console.log(index); + return ( -
    -
    - +
    + ( -
    +
    = ({ control, serviceI )} /> - ( -
    - +
    + field.onChange(event.target.value)} + className="w-full" + />
    )} /> @@ -84,12 +261,12 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI
    0, - ["justify-end"]: envIndex === 0 || !hasSecretOption + ["justify-between"]: index > 0, + ["justify-end"]: index === 0 || !hasSecretOption })} > {envIndex > 0 && ( - )} @@ -97,7 +274,7 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI {hasSecretOption && ( ( = ({ control, serviceI ); })} - -
    - ); -}; - -const EnvPasswordInput = ({ field, label }: { field: any; label: string }) => { - const [showPassword, setShowPassword] = useState(false); - return ( -
    - field.onChange(event.target.value)} - className="w-full pr-12" - autoComplete="new-password" - /> - - -
    + ); }; diff --git a/apps/deploy-web/src/components/remote-deploy/EnvList.tsx b/apps/deploy-web/src/components/remote-deploy/EnvList.tsx new file mode 100644 index 000000000..4fb98796d --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/EnvList.tsx @@ -0,0 +1,67 @@ +"use client"; +import { Dispatch, ReactNode, SetStateAction } from "react"; +import { CustomTooltip } from "@akashnetwork/ui/components"; +import { InfoCircle } from "iconoir-react"; + +import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider"; +import { ServiceType } from "@src/types"; +import { FormPaper } from "../sdl/FormPaper"; +import { hiddenEnv } from "./utils"; + +type Props = { + currentService: ServiceType; + serviceIndex?: number; + children?: ReactNode; + setIsEditingEnv: Dispatch>; +}; + +export const EnvVarList: React.FunctionComponent = ({ currentService, setIsEditingEnv, serviceIndex }) => { + const { hasComponent } = useSdlBuilder(); + const envs = currentService.env?.filter(e => !hiddenEnv.includes(e.key)); + return ( + +
    + Environment Variables + + + A list of environment variables to expose to the running container. + {hasComponent("ssh") && ( + <> +
    +
    + Note: The SSH_PUBKEY environment variable is reserved and is going to be overridden by the value provided to the relevant field. + + )} +
    +
    + + View official documentation. + + + } + > + +     + + setIsEditingEnv(serviceIndex !== undefined ? serviceIndex : true)} + > + Edit + +
    + + {(envs?.length || 0) > 0 ? ( + envs?.map((e, i) => ( +
    + {e.key}={e.value} +
    + )) + ) : ( +

    None

    + )} +     + ); +}; diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index 7fd5b2231..a645efcae 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -1,7 +1,22 @@ import { Dispatch, useEffect, useState } from "react"; -import { Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from "@akashnetwork/ui/components"; -import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut } from "iconoir-react"; +import { + Avatar, + AvatarFallback, + AvatarImage, + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + Spinner, + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from "@akashnetwork/ui/components"; +import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut, User } from "iconoir-react"; import { useAtom } from "jotai"; +import { ChevronDown } from "lucide-react"; import { useWhen } from "@src/hooks/useWhen"; import remoteDeployStore from "@src/store/remoteDeployStore"; @@ -74,7 +89,43 @@ const GithubDeploy = ({ return ( <>
    -

    Import Repository

    +
    +

    Import Repository

    + {/* {token?.access_token && ( +
    + + +
    + )} */} +
    {
    - - Git Provider - Third-Party Git Repository + + + Git Provider + + + {" "} + Third-Party Git Repository + - {token?.access_token && ( -
    - - -
    + + + + + + { + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: token?.alreadyLoggedIn?.includes(token.type) + ? token.alreadyLoggedIn + : token?.alreadyLoggedIn && token?.alreadyLoggedIn?.length > 0 + ? [...token.alreadyLoggedIn, token.type] + : [token.type] + }); + }} + className="flex cursor-pointer items-center gap-2" + > + Switch Git Provider + + + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: [] + }) + } + className="flex cursor-pointer items-center gap-2" + > + Logout + + + )}
    From c49d5d14857f1fd71bb94c9348585223d54222d1 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 14:38:50 +0530 Subject: [PATCH 40/59] fix : env in update deployment --- .../src/components/remote-deploy/EnvList.tsx | 11 +- .../update/RemoteDeployUpdate.tsx | 116 +++--------------- 2 files changed, 20 insertions(+), 107 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/EnvList.tsx b/apps/deploy-web/src/components/remote-deploy/EnvList.tsx index 4fb98796d..2e298478b 100644 --- a/apps/deploy-web/src/components/remote-deploy/EnvList.tsx +++ b/apps/deploy-web/src/components/remote-deploy/EnvList.tsx @@ -3,7 +3,6 @@ import { Dispatch, ReactNode, SetStateAction } from "react"; import { CustomTooltip } from "@akashnetwork/ui/components"; import { InfoCircle } from "iconoir-react"; -import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider"; import { ServiceType } from "@src/types"; import { FormPaper } from "../sdl/FormPaper"; import { hiddenEnv } from "./utils"; @@ -16,10 +15,9 @@ type Props = { }; export const EnvVarList: React.FunctionComponent = ({ currentService, setIsEditingEnv, serviceIndex }) => { - const { hasComponent } = useSdlBuilder(); const envs = currentService.env?.filter(e => !hiddenEnv.includes(e.key)); return ( - +
    Environment Variables @@ -27,13 +25,6 @@ export const EnvVarList: React.FunctionComponent = ({ currentService, set title={ <> A list of environment variables to expose to the running container. - {hasComponent("ssh") && ( - <> -
    -
    - Note: The SSH_PUBKEY environment variable is reserved and is going to be overridden by the value provided to the relevant field. - - )}

    diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 7042597f6..530cbf6fe 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -12,6 +12,7 @@ import { importSimpleSdl } from "@src/utils/sdl/sdlImport"; import { github } from "@src/utils/templates"; import BitBranches from "../bitbucket/Branches"; import { EnvFormModal } from "../EnvFormModal"; +import { EnvVarList } from "../EnvList"; import Branches from "../github/Branches"; import GitBranches from "../gitlab/Branches"; import { appendEnv } from "../utils"; @@ -41,6 +42,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin }, [watch, sdlString]); const { enqueueSnackbar } = useSnackbar(); const [, setError] = useState(null); + const [isEditingEnv, setIsEditingEnv] = useState(false); const createAndValidateSdl = (yamlStr: string) => { try { if (!yamlStr) return []; @@ -80,15 +82,29 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin

    If checked, Console will automatically re-deploy your app on any code commits

    - {services[0]?.env?.length && {}} />} - {/* //type === github */} + {services[0]?.env?.length && ( + <> + + {isEditingEnv && ( + { + setIsEditingEnv(false); + }} + /> + )} + + )} + {token.access_token && services[0]?.env?.find(e => e.key === "REPO_URL")?.value?.includes(token.type) && ( <>

    Rollback

    Rollback to a specific commit

    - {/* */} +
    {token?.type === "github" ? ( @@ -104,97 +120,3 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin ) : null; }; export default RemoteDeployUpdate; -// const SelectCommit = ({ services, control }: { services: ServiceType[]; control: Control }) => { -// const { data } = useCommits( -// services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value?.replace("https://github.com/", "") ?? "", -// services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ?? "" -// ); -// const { data: labCommits } = useGitLabCommits( -// services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value, -// services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value -// ); -// const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); - -// return ( -// 0 -// ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) -// : labCommits?.length > 0 -// ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) -// : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })) -// } -// control={control} -// /> -// ); -// }; -// const Field = ({ data, control }: { data: any; control: Control }) => { -// const [manual, setManual] = useState(false); -// const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); -// const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); - -// const { enqueueSnackbar } = useSnackbar(); -// return ( -//
    -// {manual ? ( -// e.key === "COMMIT_HASH")?.value} -// placeholder="Commit Hash" -// onChange={e => { -// const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; -// if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { -// update( -// services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), -// hash -// ); -// } else { -// append(hash); -// } -// }} -// /> -// ) : ( -// -// )} -// { -// setManual(checked); -// }} -// checked={manual} -// />{" "} -//
    -// ); -// }; From 83ec32b0255cefd711786cc13f78898ffdef7b74 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 14:47:56 +0530 Subject: [PATCH 41/59] fix: Account select in smaller screens (Remote Deploy) --- .../components/remote-deploy/GithubDeploy.tsx | 149 ++++++++---------- 1 file changed, 67 insertions(+), 82 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index a645efcae..6b2e9b7a3 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -7,6 +7,8 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, DropdownMenuTrigger, Spinner, Tabs, @@ -89,42 +91,14 @@ const GithubDeploy = ({ return ( <>
    -
    +

    Import Repository

    - {/* {token?.access_token && ( -
    - - + + {token?.access_token && ( +
    +
    - )} */} + )}
    { @@ -147,54 +121,9 @@ const GithubDeploy = ({ {token?.access_token && ( - - - - - - { - setToken({ - access_token: null, - refresh_token: null, - type: "github", - alreadyLoggedIn: token?.alreadyLoggedIn?.includes(token.type) - ? token.alreadyLoggedIn - : token?.alreadyLoggedIn && token?.alreadyLoggedIn?.length > 0 - ? [...token.alreadyLoggedIn, token.type] - : [token.type] - }); - }} - className="flex cursor-pointer items-center gap-2" - > - Switch Git Provider - - - setToken({ - access_token: null, - refresh_token: null, - type: "github", - alreadyLoggedIn: [] - }) - } - className="flex cursor-pointer items-center gap-2" - > - Logout - - - +
    + +
    )}
    @@ -314,3 +243,59 @@ const GithubDeploy = ({ }; export default GithubDeploy; + +const AccountDropDown = ({ userProfile, userProfileBit, userProfileGitLab }) => { + const [token, setToken] = useAtom(remoteDeployStore.tokens); + return ( + + + + + + {userProfile?.login || userProfileBit?.username || userProfileGitLab?.name} + + { + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: token?.alreadyLoggedIn?.includes(token.type) + ? token.alreadyLoggedIn + : token?.alreadyLoggedIn && token?.alreadyLoggedIn?.length > 0 + ? [...token.alreadyLoggedIn, token.type] + : [token.type] + }); + }} + className="flex cursor-pointer items-center gap-2" + > + Switch Git Provider + + + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: [] + }) + } + className="flex cursor-pointer items-center gap-2" + > + Logout + + + + ); +}; From 4c1c7a0752e3e91e94867dc9a767baa6c8716360 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 15:53:53 +0530 Subject: [PATCH 42/59] remove: console logs (Remote Deploy) --- .../src/components/remote-deploy/EnvFormModal.tsx | 13 ++++++------- .../src/components/remote-deploy/GithubDeploy.tsx | 3 --- .../src/components/remote-deploy/api/api.ts | 3 --- .../remote-deploy/update/RemoteDeployUpdate.tsx | 1 + 4 files changed, 7 insertions(+), 13 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx index a081a4021..acf259482 100644 --- a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx +++ b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx @@ -147,9 +147,10 @@ type Props = { control: Control; hasSecretOption?: boolean; children?: ReactNode; + update?: boolean; }; -export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, envs: _envs, onClose, hasSecretOption = true }) => { +export const EnvFormModal: React.FunctionComponent = ({ update, control, serviceIndex, envs: _envs, onClose, hasSecretOption = true }) => { const { fields: envs, remove: removeEnv, @@ -180,12 +181,11 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI const [currentEnvs, setCurrentEnvs] = useState(); - console.log(currentEnvs, envs); - useEffect(() => { - const cenvs = envs?.filter(e => !hiddenEnv.includes(e?.key?.trim())); - setCurrentEnvs(cenvs); - if (cenvs.length === 0) { + const CurEnvs = envs?.filter(e => !hiddenEnv.includes(e?.key?.trim())); + setCurrentEnvs(CurEnvs); + + if (CurEnvs.length === 0 && !update) { onAddEnv(); } }, [envs]); @@ -219,7 +219,6 @@ export const EnvFormModal: React.FunctionComponent = ({ control, serviceI {currentEnvs?.map((env, envIndex) => { const index = envs?.findIndex(e => e.id === env.id); - console.log(index); return (
    diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index 6b2e9b7a3..91c90f8da 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -50,19 +50,16 @@ const GithubDeploy = ({ setIsRepoDataValidated?: Dispatch; }) => { 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"); - console.log(services, "services"); const [open, setOpen] = useState(false); useEffect(() => { diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 713e6f556..f79c7e184 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -62,7 +62,6 @@ export const useRepos = () => { }, onError: (error: AxiosError<{ message: string }>) => { if (error?.response?.data?.message === "Bad credentials") { - console.log(error); } }, @@ -83,8 +82,6 @@ export const useFetchAccessToken = () => { return response.data; }, onSuccess: data => { - console.log(data); - setToken({ access_token: data.access_token, refresh_token: data.refresh_token, diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 530cbf6fe..3d1d55c04 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -87,6 +87,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin {isEditingEnv && ( Date: Sat, 7 Sep 2024 15:55:03 +0530 Subject: [PATCH 43/59] update api.ts --- apps/deploy-web/src/components/remote-deploy/api/api.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index f79c7e184..20dd3403d 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -62,6 +62,7 @@ export const useRepos = () => { }, onError: (error: AxiosError<{ message: string }>) => { if (error?.response?.data?.message === "Bad credentials") { + console.log("bad credentials"); } }, From 376bbface84e260d2313b9822ef5d0bbc31c5531 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 16:29:42 +0530 Subject: [PATCH 44/59] fix: auth github --- .../src/pages/api/github/authenticate.ts | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/apps/deploy-web/src/pages/api/github/authenticate.ts b/apps/deploy-web/src/pages/api/github/authenticate.ts index 56dfe73b6..0cce72de8 100644 --- a/apps/deploy-web/src/pages/api/github/authenticate.ts +++ b/apps/deploy-web/src/pages/api/github/authenticate.ts @@ -1,28 +1,31 @@ import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; const githubApi = "https://github.com"; -export default function handler(req, res) { - const { code } = req.body; - const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; +export default function handler(req: NextApiRequest, res: NextApiResponse) { + if (req.method === "POST") { + const { code } = req.body; + const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; - if (code) { - axios - .post(`${githubApi}/login/oauth/access_token`, { - client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, - client_secret: GITHUB_CLIENT_SECRET, - code, - redirect_uri: NEXT_PUBLIC_REDIRECT_URI - }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - res.status(200).json({ access_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); + if (code) { + axios + .post(`${githubApi}/login/oauth/access_token`, { + client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, + client_secret: GITHUB_CLIENT_SECRET, + code, + redirect_uri: NEXT_PUBLIC_REDIRECT_URI + }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + res.status(200).json({ access_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); + } } } From 86428b0c986e605cb2db5b0e6037208d8f436ad1 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 16:44:58 +0530 Subject: [PATCH 45/59] build(deps): update package-lock.json --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index d151f2d22..5e41bbe1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45056,6 +45056,7 @@ } }, "packages/env-loader": { + "name": "@akashnetwork/env-loader", "version": "1.0.0", "license": "Apache-2.0", "dependencies": { From 6104d661dc864fa46467954ed3ddab227191609b Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 16:45:27 +0530 Subject: [PATCH 46/59] update authenticate.ts --- .../src/pages/api/github/authenticate.ts | 45 +++++++++---------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/apps/deploy-web/src/pages/api/github/authenticate.ts b/apps/deploy-web/src/pages/api/github/authenticate.ts index 0cce72de8..56dfe73b6 100644 --- a/apps/deploy-web/src/pages/api/github/authenticate.ts +++ b/apps/deploy-web/src/pages/api/github/authenticate.ts @@ -1,31 +1,28 @@ import axios from "axios"; -import { NextApiRequest, NextApiResponse } from "next"; const githubApi = "https://github.com"; -export default function handler(req: NextApiRequest, res: NextApiResponse) { - if (req.method === "POST") { - const { code } = req.body; - const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; +export default function handler(req, res) { + const { code } = req.body; + const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; - if (code) { - axios - .post(`${githubApi}/login/oauth/access_token`, { - client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, - client_secret: GITHUB_CLIENT_SECRET, - code, - redirect_uri: NEXT_PUBLIC_REDIRECT_URI - }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - res.status(200).json({ access_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); - } + if (code) { + axios + .post(`${githubApi}/login/oauth/access_token`, { + client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, + client_secret: GITHUB_CLIENT_SECRET, + code, + redirect_uri: NEXT_PUBLIC_REDIRECT_URI + }) + .then(response => { + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + res.status(200).json({ access_token }); + }) + .catch(() => { + res.status(500).send("Something went wrong"); + }); + } else { + res.status(400).send("No code provided"); } } From 65c1d49a77c5350cc5ad047466672b0392f76c4d Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Sat, 7 Sep 2024 23:14:55 +0530 Subject: [PATCH 47/59] fix : Deploy --- .../src/components/remote-deploy/GithubDeploy.tsx | 12 +++++++----- .../remote-deploy/update/RemoteDeployUpdate.tsx | 6 +++--- apps/deploy-web/src/hooks/useWhenNot.ts | 12 ++++++++++++ 3 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 apps/deploy-web/src/hooks/useWhenNot.ts diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index 91c90f8da..21351b1fd 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/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 ( - diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 3d1d55c04..d06a45e3f 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/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 ? (
    @@ -82,7 +82,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin

    If checked, Console will automatically re-deploy your app on any code commits

    - {services[0]?.env?.length && ( + {services[0]?.env?.length ? ( <> {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) && ( <> diff --git a/apps/deploy-web/src/hooks/useWhenNot.ts b/apps/deploy-web/src/hooks/useWhenNot.ts new file mode 100644 index 000000000..4deeacb03 --- /dev/null +++ b/apps/deploy-web/src/hooks/useWhenNot.ts @@ -0,0 +1,12 @@ +import { useEffect } from "react"; + +export function useWhenNot(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]); +} From 1469353e378d27276e42b27cf4e65436f36c91b6 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Mon, 9 Sep 2024 17:17:23 +0530 Subject: [PATCH 48/59] fix: remove "Environment Variables" in expanded state (Remote Deploy) --- apps/deploy-web/src/components/remote-deploy/Advanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index 20ff7dc34..72b326ae0 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -23,7 +23,7 @@ const Advanced = ({ services, control }) => {
    -

    Environment Variables

    +

    {!expanded && "Environment Variables"}

     From 29c8d5aa915695afc99c11e8b11f282e45d60f80 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 14:45:56 +0530 Subject: [PATCH 49/59] fix: Reordering of variables and useEffects --- .../deployments/DeploymentDetail.tsx | 67 ++++++++----------- .../components/deployments/ManifestUpdate.tsx | 13 ++-- .../new-deployment/ManifestEdit.tsx | 20 +++--- .../update/RemoteDeployUpdate.tsx | 38 +++++------ .../src/components/remote-deploy/utils.ts | 3 +- .../src/pages/deployments/[dseq]/index.tsx | 22 +++--- 6 files changed, 77 insertions(+), 86 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index 0905cb30c..8bede4881 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -5,7 +5,7 @@ import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } f import { ArrowLeft } from "iconoir-react"; import yaml from "js-yaml"; import Link from "next/link"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { NextSeo } from "next-seo"; import { event } from "nextjs-google-analytics"; @@ -31,16 +31,19 @@ import { DeploymentSubHeader } from "./DeploymentSubHeader"; import { LeaseRow } from "./LeaseRow"; import { ManifestUpdate } from "./ManifestUpdate"; -export function DeploymentDetail() { - const dseq = (useParams()?.dseq as string) ?? ""; - console.log(dseq); - +export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) { const router = useRouter(); const [activeTab, setActiveTab] = useState("LEASES"); + const [editedManifest, setEditedManifest] = useState(null); + const [deploymentVersion, setDeploymentVersion] = useState(null); + const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false); const { address, isWalletLoaded } = useWallet(); const { isSettingsInit } = useSettings(); const [leaseRefs, setLeaseRefs] = useState>([]); const [deploymentManifest, setDeploymentManifest] = useState(null); + const remoteDeploy: boolean = editedManifest && isRedeployImage(editedManifest) ? true : false; + const repo: string | null = remoteDeploy ? getRepoUrl(editedManifest) : null; + const { data: deployment, isFetching: isLoadingDeployment, @@ -101,6 +104,25 @@ export function DeploymentDetail() { // 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) { @@ -136,41 +158,6 @@ export function DeploymentDetail() { label: `Navigate tab ${value} in deployment detail` }); }; - const [remoteDeploy, setRemoteDeploy] = useState(false); - const [repo, setRepo] = useState(null); - const [editedManifest, setEditedManifest] = useState(null); - const [deploymentVersion, setDeploymentVersion] = useState(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 ( diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx index 17a23803d..12ecbf0d2 100644 --- a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx +++ b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx @@ -52,7 +52,6 @@ export const ManifestUpdate: React.FunctionComponent = ({ setShowOutsideDeploymentMessage }) => { const [parsingError, setParsingError] = useState(null); - console.log(showOutsideDeploymentMessage); const [isSendingManifest, setIsSendingManifest] = useState(false); @@ -251,12 +250,14 @@ export const ManifestUpdate: React.FunctionComponent = ({ {parsingError && {parsingError}} - - {!remoteDeploy && ( - + + + {remoteDeploy ? ( + + ) : ( - - )} + )} +
    )} diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx index fa01827c1..995535663 100644 --- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx +++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx @@ -59,7 +59,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s const [isDepositingDeployment, setIsDepositingDeployment] = useState(false); const [isCheckingPrerequisites, setIsCheckingPrerequisites] = useState(false); const [selectedSdlEditMode, setSelectedSdlEditMode] = useAtom(sdlStore.selectedSdlEditMode); - + const [isRepoDataValidated, setIsRepoDataValidated] = useState(false); const [sdlDenom, setSdlDenom] = useState("uakt"); const { settings } = useSettings(); const { address, signAndBroadcastTx, isManaged } = useWallet(); @@ -79,6 +79,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s const wallet = useWallet(); const managedDenom = useManagedWalletDenom(); const { createDeploymentConfirm } = useManagedDeploymentConfirm(); + const { enqueueSnackbar } = useSnackbar(); useWhen(wallet.isManaged && sdlDenom === "uakt", () => { setSdlDenom(managedDenom); @@ -125,6 +126,13 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s } }; + useEffect(() => { + if (github) { + setSelectedSdlEditMode("builder"); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [github]); + useEffect(() => { if (selectedTemplate?.name) { setDeploymentName(selectedTemplate.name); @@ -181,10 +189,6 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s } } - const [isRepoDataValidated, setIsRepoDataValidated] = useState(false); - const { enqueueSnackbar } = useSnackbar(); - console.log(isRepoDataValidated); - const handleCreateDeployment = async () => { if (github && !isRepoDataValidated) { enqueueSnackbar(, { @@ -318,12 +322,6 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s setSelectedSdlEditMode(mode); }; - useEffect(() => { - if (github) { - setSelectedSdlEditMode("builder"); - } - }, [github]); - return ( <> diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index d06a45e3f..29b3f4e9c 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -17,11 +17,16 @@ import Branches from "../github/Branches"; import GitBranches from "../gitlab/Branches"; import { appendEnv } from "../utils"; import Rollback from "./Rollback"; + const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: string; setEditedManifest: Dispatch> }) => { const [token] = useAtom(remoteDeployStore.tokens); const [, setIsInit] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + const [, setError] = useState(null); + const [isEditingEnv, setIsEditingEnv] = useState(false); const { control, watch, setValue } = useForm({ defaultValues: { services: [defaultService] } }); const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); + useEffect(() => { const { unsubscribe }: any = watch(data => { const sdl = generateSdl(data.services as ServiceType[]); @@ -40,9 +45,7 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin unsubscribe(); }; }, [watch, sdlString]); - const { enqueueSnackbar } = useSnackbar(); - const [, setError] = useState(null); - const [isEditingEnv, setIsEditingEnv] = useState(false); + const createAndValidateSdl = (yamlStr: string) => { try { if (!yamlStr) return []; @@ -82,22 +85,19 @@ const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: strin

    If checked, Console will automatically re-deploy your app on any code commits

    - {services[0]?.env?.length ? ( - <> - - {isEditingEnv && ( - { - setIsEditingEnv(false); - }} - /> - )} - - ) : null} + + + {isEditingEnv && ( + { + setIsEditingEnv(false); + }} + /> + )} {token.access_token && services[0]?.env?.find(e => e.key === "REPO_URL")?.value?.includes(token.type) && ( <> diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index b9c5976d7..700282047 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -68,7 +68,8 @@ export const isRedeployImage = (yml: string) => { return github.content.includes(yml?.split("service-1:")?.[1]?.split("expose:")?.[0]?.split("image: ")?.[1]); }; -export const getRepoUrl = (yml: string) => { +export const getRepoUrl = (yml?: string | null) => { + if (!yml) return null; const list = yml?.split("\n"); const envIndex = list?.findIndex(item => item?.includes("env:")); const profileIndex = list?.findIndex(item => item?.includes("profiles:")); diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 2197904d0..29f44ab3a 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -1,15 +1,19 @@ import { DeploymentDetail } from "@src/components/deployments/DeploymentDetail"; -const DeploymentDetailPage: React.FunctionComponent = () => { - return ; +type Props = { + dseq: string; +}; + +const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { + return ; }; export default DeploymentDetailPage; -// export async function getServerSideProps({ params }) { -// return { -// props: { -// dseq: params?.dseq -// } -// }; -// } +export async function getServerSideProps({ params }) { + return { + props: { + dseq: params?.dseq + } + }; +} From 2da992326b5eaeb89623feab5c534244f9e0628f Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 20:41:18 +0530 Subject: [PATCH 50/59] fix: code clean (Remote Deploy) --- .../new-deployment/NewDeploymentContainer.tsx | 14 +- .../components/new-deployment/SdlBuilder.tsx | 3 - .../remote-deploy/AccountDropdown.tsx | 84 ++++++++ .../src/components/remote-deploy/Advanced.tsx | 13 +- .../src/components/remote-deploy/Details.tsx | 5 +- .../components/remote-deploy/EnvFormModal.tsx | 133 +----------- .../components/remote-deploy/GithubDeploy.tsx | 103 ++------- .../remote-deploy/{github => }/Repos.tsx | 56 ++--- .../remote-deploy/SelectBranches.tsx | 68 ++++++ .../src/components/remote-deploy/api/api.ts | 16 +- .../remote-deploy/api/bitbucket-api.ts | 6 +- .../remote-deploy/api/gitlab-api.ts | 6 +- .../remote-deploy/bitbucket/Bit.tsx | 13 +- .../remote-deploy/bitbucket/Branches.tsx | 51 +---- .../remote-deploy/bitbucket/Repos.tsx | 73 ------- .../remote-deploy/bitbucket/Workspaces.tsx | 1 + .../remote-deploy/github/Branches.tsx | 52 +---- .../remote-deploy/github/Framework.tsx | 123 ----------- .../remote-deploy/github/Github.tsx | 8 +- .../remote-deploy/gitlab/Branches.tsx | 53 +---- .../remote-deploy/gitlab/Gitlab.tsx | 9 +- .../remote-deploy/gitlab/Groups.tsx | 5 +- .../components/remote-deploy/gitlab/Repos.tsx | 86 -------- .../remote-deploy/update/Rollback.tsx | 204 +----------------- .../remote-deploy/update/RollbackModal.tsx | 128 +++++++++++ .../src/components/remote-deploy/utils.ts | 11 +- .../useRemoteDeployFramework.tsx} | 58 +---- apps/deploy-web/src/types/remoteCommits.ts | 164 ++++++++++++++ .../remoteTypes.ts => types/remotedeploy.ts} | 123 +++++++++++ apps/deploy-web/src/utils/urlUtils.ts | 5 +- 30 files changed, 696 insertions(+), 978 deletions(-) create mode 100644 apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx rename apps/deploy-web/src/components/remote-deploy/{github => }/Repos.tsx (95%) create mode 100644 apps/deploy-web/src/components/remote-deploy/SelectBranches.tsx delete mode 100644 apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx delete mode 100644 apps/deploy-web/src/components/remote-deploy/github/Framework.tsx delete mode 100644 apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx create mode 100644 apps/deploy-web/src/components/remote-deploy/update/RollbackModal.tsx rename apps/deploy-web/src/{components/remote-deploy/FrameworkDetection.tsx => hooks/useRemoteDeployFramework.tsx} (53%) create mode 100644 apps/deploy-web/src/types/remoteCommits.ts rename apps/deploy-web/src/{components/remote-deploy/remoteTypes.ts => types/remotedeploy.ts} (54%) diff --git a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx index 244f856f7..005dedffb 100644 --- a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx +++ b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx @@ -61,11 +61,17 @@ export const NewDeploymentContainer: FC = () => { if (type === "github" || code || state === "gitlab") { if (!redeploy) { if (state === "gitlab") { - router.replace(`/new-deployment?step=${RouteStep.editDeployment}&type=gitlab&code=${code}`); + router.replace( + UrlService.newDeployment({ + step: RouteStep.editDeployment, + type: "gitlab", + code + }) + ); } - - setSelectedTemplate(hardcodedTemplates.find(t => t.title === "GitHub") as TemplateCreation); - setEditedManifest(hardcodedTemplates.find(t => t.title === "GitHub")?.content as string); + const githubTemplate = hardcodedTemplates.find(t => t.title === "GitHub"); + setSelectedTemplate(githubTemplate as TemplateCreation); + setEditedManifest(githubTemplate?.content as string); } setGithub(true); diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx index f7da0eb53..00585b733 100644 --- a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx +++ b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx @@ -61,8 +61,6 @@ export const SdlBuilder = React.forwardRef( const { data: gpuModels } = useGpuModels(); const [serviceCollapsed, setServiceCollapsed] = useState(github ? [0] : []); - console.log(serviceCollapsed); - const wallet = useWallet(); const managedDenom = useManagedWalletDenom(); @@ -135,7 +133,6 @@ export const SdlBuilder = React.forwardRef( setError(err.message); } else { setError("Error while parsing SDL file"); - console.error(err); } } }; diff --git a/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx new file mode 100644 index 000000000..62fc0a06a --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx @@ -0,0 +1,84 @@ +import { + Avatar, + AvatarFallback, + AvatarImage, + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger +} from "@akashnetwork/ui/components"; +import { CoinsSwap, LogOut, User } from "iconoir-react"; +import { useAtom } from "jotai"; +import { ChevronDown } from "lucide-react"; + +import remoteDeployStore from "@src/store/remoteDeployStore"; +import { BitProfile, GitHubProfile, GitLabProfile } from "@src/types/remotedeploy"; + +const AccountDropDown = ({ + userProfile, + userProfileBit, + userProfileGitLab +}: { + userProfile?: GitHubProfile; + userProfileBit?: BitProfile; + userProfileGitLab?: GitLabProfile; +}) => { + const [token, setToken] = useAtom(remoteDeployStore.tokens); + return ( + + + + + + {userProfile?.login || userProfileBit?.username || userProfileGitLab?.name} + + { + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: token?.alreadyLoggedIn?.includes(token.type) + ? token.alreadyLoggedIn + : token?.alreadyLoggedIn && token?.alreadyLoggedIn?.length > 0 + ? [...token.alreadyLoggedIn, token.type] + : [token.type] + }); + }} + className="flex cursor-pointer items-center gap-2" + > + Switch Git Provider + + + setToken({ + access_token: null, + refresh_token: null, + type: "github", + alreadyLoggedIn: [] + }) + } + className="flex cursor-pointer items-center gap-2" + > + Logout + + + + ); +}; + +export default AccountDropDown; diff --git a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx index 72b326ae0..551cfd06e 100644 --- a/apps/deploy-web/src/components/remote-deploy/Advanced.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Advanced.tsx @@ -1,13 +1,14 @@ import { useState } from "react"; +import { Control } from "react-hook-form"; import { Card, CardContent, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator } from "@akashnetwork/ui/components"; import { cn } from "@akashnetwork/ui/utils"; import { NavArrowDown } from "iconoir-react"; -// import { EnvVarList } from "../sdl/EnvVarList"; +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { EnvFormModal } from "./EnvFormModal"; import { EnvVarList } from "./EnvList"; -const Advanced = ({ services, control }) => { +const Advanced = ({ services, control }: { services: ServiceType[]; control: Control }) => { const serviceIndex = 0; const [expanded, setExpanded] = useState(false); const currentService = services[serviceIndex]; @@ -31,13 +32,7 @@ const Advanced = ({ services, control }) => {
    {isEditingEnv === serviceIndex && ( - setIsEditingEnv(null)} - serviceIndex={serviceIndex} - envs={currentService.env || []} - // hasSecretOption={hasSecretOption} - /> + setIsEditingEnv(null)} serviceIndex={serviceIndex} envs={currentService.env || []} /> )}
    diff --git a/apps/deploy-web/src/components/remote-deploy/Details.tsx b/apps/deploy-web/src/components/remote-deploy/Details.tsx index 886513a31..d020cbfc1 100644 --- a/apps/deploy-web/src/components/remote-deploy/Details.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Details.tsx @@ -3,10 +3,11 @@ import { Card, CardContent, Checkbox, Collapsible, CollapsibleContent, Collapsib import { cn } from "@akashnetwork/ui/utils"; import { NavArrowDown } from "iconoir-react"; +import { ServiceType } from "@src/types"; import CustomInput from "./CustomInput"; -import { appendEnv } from "./utils"; +import { appendEnv, ServiceSetValue } from "./utils"; -const Details = ({ services, setValue }) => { +const Details = ({ services, setValue }: { services: ServiceType[]; setValue: ServiceSetValue }) => { const [expanded, setExpanded] = useState(false); const currentService = services[0]; return ( diff --git a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx index acf259482..358dab073 100644 --- a/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx +++ b/apps/deploy-web/src/components/remote-deploy/EnvFormModal.tsx @@ -1,133 +1,3 @@ -// "use client"; -// import { ReactNode, useState } from "react"; -// import { Control, Controller, useFieldArray } from "react-hook-form"; -// import { Button, CustomNoDivTooltip, FormInput, Switch } from "@akashnetwork/ui/components"; -// import clsx from "clsx"; -// import { Bin, Eye, EyeClosed } from "iconoir-react"; -// import { nanoid } from "nanoid"; - -// import { EnvironmentVariableType, RentGpusFormValuesType, SdlBuilderFormValuesType } from "@src/types"; -// import { cn } from "@src/utils/styleUtils"; -// import { FormPaper } from "../sdl/FormPaper"; -// import { hiddenEnv } from "./utils"; - -// type Props = { -// serviceIndex: number; -// onClose: () => void; -// envs: EnvironmentVariableType[]; -// control: Control; -// hasSecretOption?: boolean; -// children?: ReactNode; -// subComponent?: boolean; -// }; - -// export const EnvFormModal: React.FunctionComponent = ({ control, serviceIndex, hasSecretOption = true, subComponent }) => { -// // const [envs, setEnvs] = useState(_envs); -// const { -// fields: envs, -// remove: removeEnv, -// append: appendEnv -// } = useFieldArray({ -// control, -// name: `services.${serviceIndex}.env`, -// keyName: "id" -// }); - -// // useEffect(() => { -// // if (_envs.length === 0) { -// // onAddEnv(); -// // } -// // }, []); - -// const onAddEnv = () => { -// appendEnv({ id: nanoid(), key: "", value: "", isSecret: false }); -// }; - -// return ( -//
    -// {!subComponent &&

    Environment Variables

    } -// -// {envs.filter(env => !hiddenEnv.includes(env?.key?.trim())).length === 0 && ( -//

    No environment variables added.

    -// )} -// {envs.map((env, envIndex) => { -// return ( -//
    -//
    -// ( -//
    -// field.onChange(event.target.value)} -// className="w-full" -// /> -//
    -// )} -// /> - -// ( -//
    -// -//
    -// )} -// /> -//
    - -//
    0, -// ["justify-end"]: envIndex === 0 || !hasSecretOption -// })} -// > -// {envIndex > 0 && ( -// -// )} - -// {hasSecretOption && ( -// ( -// -//

    -// Secret -//

    -//

    -// This is for secret variables containing sensitive information you don't want to be saved in your template. -//

    -// -// } -// > -// -//     -// )} -// /> -// )} -//
    -//
    -// ); -// })} -//     -// -//
    -// ); -// }; - "use client"; import { ReactNode, useEffect, useState } from "react"; import { Control, Controller, useFieldArray } from "react-hook-form"; @@ -151,6 +21,7 @@ type Props = { }; export const EnvFormModal: React.FunctionComponent = ({ update, control, serviceIndex, envs: _envs, onClose, hasSecretOption = true }) => { + const [currentEnvs, setCurrentEnvs] = useState(); const { fields: envs, remove: removeEnv, @@ -179,8 +50,6 @@ export const EnvFormModal: React.FunctionComponent = ({ update, control, onClose(); }; - const [currentEnvs, setCurrentEnvs] = useState(); - useEffect(() => { const CurEnvs = envs?.filter(e => !hiddenEnv.includes(e?.key?.trim())); setCurrentEnvs(CurEnvs); diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index 21351b1fd..ff4d0c69e 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -1,34 +1,19 @@ import { Dispatch, useEffect, useState } from "react"; -import { - Avatar, - AvatarFallback, - AvatarImage, - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, - Spinner, - Tabs, - TabsContent, - TabsList, - TabsTrigger -} from "@akashnetwork/ui/components"; -import { Bitbucket, CoinsSwap, Github as GitIcon, GitlabFull, LogOut, User } from "iconoir-react"; +import { Control, UseFormSetValue } from "react-hook-form"; +import { Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from "@akashnetwork/ui/components"; +import { Bitbucket, Github as GitIcon, GitlabFull } from "iconoir-react"; import { useAtom } from "jotai"; -import { ChevronDown } from "lucide-react"; import { useWhenNot } from "@src/hooks/useWhenNot"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { ServiceType } from "@src/types"; +import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { handleLogin, handleReLogin, useFetchAccessToken, useUserProfile } from "./api/api"; import { handleLoginBit, useBitFetchAccessToken, useBitUserProfile } from "./api/bitbucket-api"; import { handleGitLabLogin, useGitLabFetchAccessToken, useGitLabUserProfile } from "./api/gitlab-api"; import Bit from "./bitbucket/Bit"; import Github from "./github/Github"; import GitLab from "./gitlab/Gitlab"; +import AccountDropDown from "./AccountDropdown"; import Advanced from "./Advanced"; import CustomInput from "./CustomInput"; import Details from "./Details"; @@ -42,14 +27,17 @@ const GithubDeploy = ({ setDeploymentName, setIsRepoDataValidated }: { - setValue: any; + setValue: UseFormSetValue; services: ServiceType[]; - control: any; + control: Control; setDeploymentName: Dispatch; deploymentName: string; setIsRepoDataValidated?: Dispatch; }) => { const [token, setToken] = useAtom(remoteDeployStore.tokens); + const [selectedTab, setSelectedTab] = useState("git"); + + const [open, setOpen] = useState(false); const { data: userProfile, isLoading: fetchingProfile } = useUserProfile(); const { data: userProfileBit, isLoading: fetchingProfileBit } = useBitUserProfile(); @@ -59,13 +47,6 @@ const GithubDeploy = ({ 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); - }, []); - useWhenNot( services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")), () => { @@ -75,6 +56,10 @@ const GithubDeploy = ({ () => setIsRepoDataValidated?.(false) ); + useEffect(() => { + setOpen(true); + }, []); + useEffect(() => { const url = new URL(window.location.href); @@ -115,7 +100,6 @@ const GithubDeploy = ({ Git Provider - {" "} Third-Party Git Repository @@ -146,7 +130,6 @@ const GithubDeploy = ({ handleLoginBit(); }} variant="outline" - className="" > Bitbucket @@ -157,7 +140,6 @@ const GithubDeploy = ({ handleGitLabLogin(); }} variant="outline" - className="" > GitLab @@ -172,7 +154,6 @@ const GithubDeploy = ({ } }} variant="outline" - className="" > Github @@ -242,59 +223,3 @@ const GithubDeploy = ({ }; export default GithubDeploy; - -const AccountDropDown = ({ userProfile, userProfileBit, userProfileGitLab }) => { - const [token, setToken] = useAtom(remoteDeployStore.tokens); - return ( - - - - - - {userProfile?.login || userProfileBit?.username || userProfileGitLab?.name} - - { - setToken({ - access_token: null, - refresh_token: null, - type: "github", - alreadyLoggedIn: token?.alreadyLoggedIn?.includes(token.type) - ? token.alreadyLoggedIn - : token?.alreadyLoggedIn && token?.alreadyLoggedIn?.length > 0 - ? [...token.alreadyLoggedIn, token.type] - : [token.type] - }); - }} - className="flex cursor-pointer items-center gap-2" - > - Switch Git Provider - - - setToken({ - access_token: null, - refresh_token: null, - type: "github", - alreadyLoggedIn: [] - }) - } - className="flex cursor-pointer items-center gap-2" - > - Logout - - - - ); -}; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/Repos.tsx similarity index 95% rename from apps/deploy-web/src/components/remote-deploy/github/Repos.tsx rename to apps/deploy-web/src/components/remote-deploy/Repos.tsx index 0a813f9cf..83b1776e5 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Repos.tsx @@ -24,15 +24,15 @@ import { Globe2 } from "lucide-react"; import { nanoid } from "nanoid"; import Image from "next/image"; +import useRemoteDeployFramework from "@src/hooks/useRemoteDeployFramework"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; -import { useSrcFolders } from "../api/api"; -import { useBitSrcFolders } from "../api/bitbucket-api"; -import { useGitlabSrcFolders } from "../api/gitlab-api"; -import CustomInput from "../CustomInput"; -import useFramework from "../FrameworkDetection"; -import { IGithubDirectoryItem } from "../remoteTypes"; -import { appendEnv, removeEnv, removeInitialUrl, RepoType } from "../utils"; +import { IGithubDirectoryItem } from "@src/types/remotedeploy"; +import { useSrcFolders } from "./api/api"; +import { useBitSrcFolders } from "./api/bitbucket-api"; +import { useGitlabSrcFolders } from "./api/gitlab-api"; +import CustomInput from "./CustomInput"; +import { appendEnv, removeEnv, removeInitialUrl, RepoType } from "./utils"; const Repos = ({ repos, @@ -49,48 +49,47 @@ const Repos = ({ isLoading: boolean; setDeploymentName: Dispatch; deploymentName: string; - profile: any; + profile?: { + name: string; + email: string; + avatar_url: string; + login: string; + html_url: string; + }; type?: "github" | "gitlab" | "bitbucket"; }) => { const [token] = useAtom(remoteDeployStore.tokens); const [search, setSearch] = useState(""); const [filteredRepos, setFilteredRepos] = useState(repos); - + const [currentAccount, setCurrentAccount] = useState(""); + const [directory, setDirectory] = useState(null); + const [open, setOpen] = useState(false); + const [accounts, setAccounts] = useState([]); + const rootFolder = "akash-root-folder-repo-path"; const currentRepo = services?.[0]?.env?.find(e => e.key === "REPO_URL"); const repo = repos?.find(r => r.html_url === currentRepo?.value); - const [directory, setDirectory] = useState(null); const currentFolder = services?.[0]?.env?.find(e => e.key === "FRONTEND_FOLDER"); - const { currentFramework, isLoading: frameworkLoading } = useFramework({ + const { currentFramework, isLoading: frameworkLoading } = useRemoteDeployFramework({ services, setValue, repos, subFolder: currentFolder?.value }); - const setFolders = (data: IGithubDirectoryItem[]) => { - if (data?.length > 0) { - setDirectory(data); - } else { - setDirectory(null); - } - }; - const [currentAccount, setCurrentAccount] = useState(""); - const [accounts, setAccounts] = useState([]); - const { isLoading: isGettingDirectory, isFetching: isGithubLoading } = useSrcFolders(setFolders, removeInitialUrl(currentRepo?.value)); - const { isLoading: isGettingDirectoryBit, isFetching: isBitLoading } = useBitSrcFolders( setFolders, removeInitialUrl(currentRepo?.value), services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value ); - const [open, setOpen] = useState(false); + const { isLoading: isGettingDirectoryGitlab, isFetching: isGitlabLoading } = useGitlabSrcFolders( setFolders, services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value ); + const isLoadingDirectories = isGithubLoading || isGitlabLoading || isBitLoading || isGettingDirectory || isGettingDirectoryBit || isGettingDirectoryGitlab; - const rootFolder = "akash-root-folder-repo-path"; + useEffect(() => { if (type === "github") { const differentOwnersArray = repos?.map(repo => repo?.owner?.login || ""); @@ -103,8 +102,17 @@ const Repos = ({ ); } setFilteredRepos(repos); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [repos, type, profile]); + function setFolders(data: IGithubDirectoryItem[]) { + if (data?.length > 0) { + setDirectory(data); + } else { + setDirectory(null); + } + } + return (
    diff --git a/apps/deploy-web/src/components/remote-deploy/SelectBranches.tsx b/apps/deploy-web/src/components/remote-deploy/SelectBranches.tsx new file mode 100644 index 000000000..d6899b277 --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/SelectBranches.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import { Control, useFieldArray } from "react-hook-form"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType } from "@src/types"; +const SelectBranches = ({ + control, + + loading, + branches, + selected +}: { + control: Control; + loading: boolean; + branches?: { + name: string; + }[]; + selected?: string; +}) => { + const { fields, append, update } = useFieldArray({ + control, + name: "services.0.env", + keyName: "id" + }); + return ( +
    +
    +

    Select Branch

    +

    Select a branch to use for deployment

    +
    + + +
    + ); +}; + +export default SelectBranches; diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 20dd3403d..e52d13d1d 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -4,13 +4,11 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { GithubRepository, IGithubDirectoryItem } from "../remoteTypes"; +import { GitCommit } from "@src/types/remoteCommits"; +import { GitHubProfile, GithubRepository, IGithubDirectoryItem } from "@src/types/remotedeploy"; import { REDIRECT_URL } from "../utils"; -const Github_API_URL = "https://api.github.com"; -//from env - -export const CLIEND_ID = "Iv23liZYLYN9I2HrgeOh"; +const GITHUB_API_URL = "https://api.github.com"; export const handleLogin = () => { window.location.href = process.env.NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL as string; @@ -21,7 +19,7 @@ export const handleReLogin = () => { }; const axiosInstance = axios.create({ - baseURL: Github_API_URL, + baseURL: GITHUB_API_URL, headers: { "Content-Type": "application/json", Accept: "application/json" @@ -33,7 +31,7 @@ export const useUserProfile = () => { return useQuery({ queryKey: ["userProfile", token?.access_token], queryFn: async () => { - const response = await axiosInstance.get("/user", { + const response = await axiosInstance.get("/user", { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -111,14 +109,12 @@ export const useBranches = (repo?: string) => { }); }; -//fetch all commits in a branch - export const useCommits = (repo: string, branch: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ queryKey: ["commits", repo, branch, token?.access_token, repo, branch], queryFn: async () => { - const response = await axiosInstance.get(`/repos/${repo}/commits?sha=${branch}`, { + const response = await axiosInstance.get(`/repos/${repo}/commits?sha=${branch}`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index 91b5709e7..8ef3f2185 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -4,6 +4,8 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; +import { BitBucketCommit } from "@src/types/remoteCommits"; +import { BitProfile } from "@src/types/remotedeploy"; const Bitbucket_API_URL = "https://api.bitbucket.org/2.0"; @@ -69,7 +71,7 @@ export const useBitUserProfile = () => { return useQuery({ queryKey: ["userProfile", token.access_token], queryFn: async () => { - const response = await axiosInstance.get("/user", { + const response = await axiosInstance.get("/user", { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -90,7 +92,7 @@ export const useBitBucketCommits = (repo?: string) => { return useQuery({ queryKey: ["commits", repo, token.access_token, repo], queryFn: async () => { - const response = await axiosInstance.get(`/repositories/${repo}/commits`, { + const response = await axiosInstance.get(`/repositories/${repo}/commits`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 2b7afe293..4f76aca63 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -4,6 +4,8 @@ import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; +import { GitLabCommit } from "@src/types/remoteCommits"; +import { GitLabProfile } from "@src/types/remotedeploy"; export const handleGitLabLogin = () => { window.location.href = `https://gitlab.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code&scope=read_user+read_repository+read_api+api&state=gitlab`; @@ -70,7 +72,7 @@ export const useGitLabUserProfile = () => { return useQuery({ queryKey: ["gitlab-user-Profile", token?.access_token], queryFn: async () => { - const response = await axiosInstance.get("/user", { + const response = await axiosInstance.get("/user", { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -139,7 +141,7 @@ export const useGitLabCommits = (repo?: string, branch?: string) => { return useQuery({ queryKey: ["commits", repo, branch, token?.access_token, repo, branch], queryFn: async () => { - const response = await axiosInstance.get(`/projects/${repo}/repository/commits?ref_name=${branch}`, { + const response = await axiosInstance.get(`/projects/${repo}/repository/commits?ref_name=${branch}`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx index d924cf145..1bb3b7aad 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx @@ -1,9 +1,10 @@ -import React, { Dispatch, useState } from "react"; +import { Dispatch, useState } from "react"; import { ServiceType } from "@src/types"; +import { BitProfile } from "@src/types/remotedeploy"; import { useBitReposByWorkspace } from "../api/bitbucket-api"; -import Repos from "../github/Repos"; -import { ServiceControl } from "../utils"; +import Repos from "../Repos"; +import { ServiceControl, ServiceSetValue } from "../utils"; import Branches from "./Branches"; import WorkSpaces from "./Workspaces"; @@ -19,10 +20,10 @@ const Bit = ({ setDeploymentName: Dispatch; deploymentName: string; loading: boolean; - setValue: any; + setValue: ServiceSetValue; services: ServiceType[]; control: ServiceControl; - profile: any; + profile?: BitProfile; }) => { const [workSpace, setWorkSpace] = useState(""); @@ -47,11 +48,9 @@ const Bit = ({ setValue={setValue} setDeploymentName={setDeploymentName} deploymentName={deploymentName} - profile={profile} services={services} /> - {/* */} ); }; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx index ce13f1dae..bf901a602 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Branches.tsx @@ -1,9 +1,8 @@ -import { Control, useFieldArray } from "react-hook-form"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { nanoid } from "nanoid"; +import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { useBitBranches } from "../api/bitbucket-api"; +import SelectBranches from "../SelectBranches"; import { removeInitialUrl } from "../utils"; const Branches = ({ services, control }: { services: ServiceType[]; control: Control }) => { @@ -11,51 +10,7 @@ const Branches = ({ services, control }: { services: ServiceType[]; control: Con const { data: branches, isLoading: branchesLoading } = useBitBranches(selected); - const { fields, append, update } = useFieldArray({ - control, - name: "services.0.env", - keyName: "id" - }); - return ( -
    -
    -

    Select Branch

    -

    Select a branch to use for deployment

    -
    - - -
    - ); + return ; }; export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx deleted file mode 100644 index 6fa4b4ad7..000000000 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Repos.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Dispatch, useState } from "react"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { Bitbucket, Lock } from "iconoir-react"; -import { useAtom } from "jotai"; -import { nanoid } from "nanoid"; - -import remoteDeployStore from "@src/store/remoteDeployStore"; -const Repos = ({ - repos, - setValue, - isLoading, - setDeploymentName, - profile -}: { - repos: any; - setValue: any; - isLoading: boolean; - setDeploymentName: Dispatch; - deploymentName: string; - profile: any; -}) => { - const [open, setOpen] = useState(false); - - const [token] = useAtom(remoteDeployStore.tokens); - return ( -
    -
    -

    Select Repository

    -

    The Repository Branch used for your private service

    -
    - - -
    - ); -}; - -export default Repos; diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx index 0ee34108c..3bf0d608b 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx @@ -3,6 +3,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa import { Bitbucket } from "iconoir-react"; import { useWorkspaces } from "../api/bitbucket-api"; + const WorkSpaces = ({ isLoading, setWorkSpaces }: { isLoading: boolean; workSpaces: string; setWorkSpaces: Dispatch }) => { const [open, setOpen] = useState(false); diff --git a/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx index dba861374..2f66fd2ed 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Branches.tsx @@ -1,62 +1,16 @@ -import { Control, useFieldArray } from "react-hook-form"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { nanoid } from "nanoid"; +import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { useBranches } from "../api/api"; +import SelectBranches from "../SelectBranches"; import { removeInitialUrl } from "../utils"; const Branches = ({ services, control }: { services: ServiceType[]; control: Control }) => { const selected = removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value); - const { fields, append, update } = useFieldArray({ - control, - name: "services.0.env", - keyName: "id" - }); - const { data: branches, isLoading: branchesLoading } = useBranches(selected); - return ( -
    -
    -

    Select Branch

    -

    Select a branch to use for deployment

    -
    - - -
    - ); + return ; }; export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx b/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx deleted file mode 100644 index 2d6c3506e..000000000 --- a/apps/deploy-web/src/components/remote-deploy/github/Framework.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { useState } from "react"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import clsx from "clsx"; -import { Globe } from "iconoir-react"; -import { useAtom } from "jotai"; - -import remoteDeployStore from "@src/store/remoteDeployStore"; -import { ServiceType } from "@src/types"; -import { usePackageJson } from "../api/api"; -import { useBitPackageJson } from "../api/bitbucket-api"; -import { useGitlabPackageJson } from "../api/gitlab-api"; -import { removeInitialUrl } from "../utils"; -const frameworks = [ - { - title: "React", - value: "react", - image: "https://static-00.iconduck.com/assets.00/react-icon-512x456-2ynx529a.png" - }, - { - title: "Vue", - value: "vue", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/1200px-Vue.js_Logo.svg.png" - }, - { - title: "Angular", - value: "angular", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png" - }, - { - title: "Svelte", - value: "svelte", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png" - }, - { - title: "Next.js", - value: "next", - image: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/nextjs-icon.png" - }, - - { - title: "Astro", - value: "astro", - image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" - }, - { - title: "Other", - value: "other" - } -]; -const Framework = ({ services, setValue, repos }: { services: ServiceType[]; setValue: any; repos?: any }) => { - const [data, setData] = useState(null); - const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; - const [token] = useAtom(remoteDeployStore.tokens); - const setValueHandler = (data: any) => { - setData(data); - if (data?.dependencies) { - const cpus = (Object.keys(data?.dependencies ?? {}).length / 10 / 2).toFixed(1); - - setValue("services.0.profile.cpu", +cpus > 0.5 ? +cpus : 0.5); - } - }; - - const { isLoading } = usePackageJson(setValueHandler, removeInitialUrl(selected)); - const { isLoading: gitlabLoading } = useGitlabPackageJson( - setValueHandler, - repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id - ); - - const { isLoading: bitbucketLoading } = useBitPackageJson( - setValueHandler, - removeInitialUrl(selected), - services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")?.value - ); - - return ( -
    -
    -

    Build Framework

    -

    Select your build framework

    -
    - - -
    - ); -}; - -export default Framework; diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index f7a1fc4bd..a492a64f0 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -2,9 +2,11 @@ import { Dispatch } from "react"; import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { GitHubProfile } from "@src/types/remotedeploy"; import { useRepos } from "../api/api"; +import Repos from "../Repos"; +import { ServiceSetValue } from "../utils"; import Branches from "./Branches"; -import Repos from "./Repos"; const Github = ({ control, @@ -18,9 +20,9 @@ const Github = ({ deploymentName: string; control: Control; - setValue: any; + setValue: ServiceSetValue; services: ServiceType[]; - profile: any; + profile?: GitHubProfile; }) => { const { data: repos, isLoading } = useRepos(); diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx index fe00742aa..c06558586 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx @@ -1,9 +1,8 @@ -import { Control, useFieldArray } from "react-hook-form"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { nanoid } from "nanoid"; +import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; -import { useGitLabBranches, useGitLabReposByGroup } from "../api/gitlab-api"; +import { useGitLabBranches } from "../api/gitlab-api"; +import SelectBranches from "../SelectBranches"; const Branches = ({ repos, services, control }: { repos?: any; services: ServiceType[]; control: Control }) => { const selected = @@ -12,52 +11,8 @@ const Branches = ({ repos, services, control }: { repos?: any; services: Service : services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value; const { data: branches, isLoading: branchesLoading } = useGitLabBranches(selected); - const { fields, append, update } = useFieldArray({ - control, - name: "services.0.env", - keyName: "id" - }); - return ( -
    -
    -

    Select Branch

    -

    Select a branch to use for deployment

    -
    - - -
    - ); + return ; }; export default Branches; diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx index 1ffcfa109..648143ee5 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx @@ -2,8 +2,8 @@ import React, { Dispatch, useState } from "react"; import { ServiceType } from "@src/types"; import { useGitLabReposByGroup } from "../api/gitlab-api"; -import Repos from "../github/Repos"; -import { ServiceControl } from "../utils"; +import Repos from "../Repos"; +import { ServiceControl, ServiceSetValue } from "../utils"; import Branches from "./Branches"; import Groups from "./Groups"; @@ -18,7 +18,7 @@ const GitLab = ({ setDeploymentName: Dispatch; deploymentName: string; loading: boolean; - setValue: any; + setValue: ServiceSetValue; services: ServiceType[]; control: ServiceControl; }) => { @@ -27,7 +27,7 @@ const GitLab = ({ return ( <> - + diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx index 9a87e434f..d1fb2c331 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx @@ -1,14 +1,11 @@ import { Dispatch, useState } from "react"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; import { GitlabFull } from "iconoir-react"; -import { useAtom } from "jotai"; -import remoteDeployStore from "@src/store/remoteDeployStore"; import { useGitLabGroups } from "../api/gitlab-api"; -const Groups = ({ isLoading, group, setGroup }: { isLoading: boolean; group: string; setGroup: Dispatch }) => { +const Groups = ({ isLoading, setGroup }: { isLoading: boolean; setGroup: Dispatch }) => { const [open, setOpen] = useState(false); - const [token] = useAtom(remoteDeployStore.tokens); const { data, isLoading: loadingWorkSpaces } = useGitLabGroups(); return ( diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx deleted file mode 100644 index 42b42ca17..000000000 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Repos.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Dispatch, useState } from "react"; -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Spinner } from "@akashnetwork/ui/components"; -import { GitlabFull, Lock } from "iconoir-react"; -import { useAtom } from "jotai"; -import { nanoid } from "nanoid"; - -import remoteDeployStore from "@src/store/remoteDeployStore"; -import { ServiceType } from "@src/types"; -const Repos = ({ - repos, - setValue, - isLoading, - setDeploymentName, - services -}: { - services: ServiceType[]; - isLoading: boolean; - setDeploymentName: Dispatch; - deploymentName: string; - repos: any; - setValue: any; -}) => { - const [open, setOpen] = useState(false); - - const [token] = useAtom(remoteDeployStore.tokens); - return ( -
    -
    -

    Select Repository

    -

    The Repository Branch used for your private service

    -
    - - -
    - ); -}; - -export default Repos; diff --git a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx index 6ff3224d4..29c43c62d 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/Rollback.tsx @@ -1,30 +1,11 @@ -import React, { useEffect, useState } from "react"; -import { Control, useFieldArray } from "react-hook-form"; -import { - Button, - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, - Input, - Label, - RadioGroup, - RadioGroupItem, - Tabs, - TabsContent, - TabsList, - TabsTrigger -} from "@akashnetwork/ui/components"; -import { GitCommitVertical, GitGraph, Info } from "lucide-react"; -import { nanoid } from "nanoid"; +import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { useCommits } from "../api/api"; import { useBitBucketCommits } from "../api/bitbucket-api"; import { useGitLabCommits } from "../api/gitlab-api"; import { removeInitialUrl } from "../utils"; +import RollbackModal from "./RollbackModal"; const Rollback = ({ services, control }: { services: ServiceType[]; control: Control }) => { const { data } = useCommits( @@ -38,183 +19,14 @@ const Rollback = ({ services, control }: { services: ServiceType[]; control: Con const { data: bitbucketCommits } = useBitBucketCommits(removeInitialUrl(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value ?? "")); const commits = - data?.length > 0 + data && data?.length > 0 ? data.map(commit => ({ name: commit.commit.message, value: commit.sha, date: new Date(commit.commit.author.date) })) - : labCommits?.length > 0 + : labCommits && labCommits?.length > 0 ? labCommits?.map(commit => ({ name: commit.title, value: commit.id, date: new Date(commit.authored_date) })) - : bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })); + : bitbucketCommits && bitbucketCommits?.values?.length > 0 + ? bitbucketCommits?.values?.map(commit => ({ name: commit.message, value: commit.hash, date: new Date(commit.date) })) + : null; - return ; + return ; }; export default Rollback; - -const Field = ({ data, control }: { data: any; control: Control }) => { - const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); - const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); - const [value, setValue] = useState(""); - - const [filteredData, setFilteredData] = useState([]); - const currentHash = services[0]?.env?.find(e => e.key === "COMMIT_HASH")?.value; - useEffect(() => { - if (data) { - setFilteredData( - data?.filter((item: any) => { - return item.name.toLowerCase().includes(value.toLowerCase()); - }) - ); - } - }, [data, value]); - - return ( -
    - - - - - - - Rollbacks - - - You need to click update deployment button to apply changes - - - - - Commit Name - Commit Hash - - -
    -
    - { - setValue(e.target.value); - // setFilteredData(data.filter((item: any) => item.name.toLowerCase().includes(e.target.value.toLowerCase()))); - }} - /> -
    - {filteredData?.length > 0 ? ( - e.key === "COMMIT_HASH")?.value} - onValueChange={value => { - const hash = { id: nanoid(), key: "COMMIT_HASH", value: value, isSecret: false }; - // enqueueSnackbar(, { - // variant: "info" - // }); - if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { - update( - services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), - hash - ); - } else { - append(hash); - } - }} - > - {filteredData?.map((item: any) => ( -
    - - -
    - ))} -     - ) : ( - <> - )} -
    -     - -
    - - e.key === "COMMIT_HASH")?.value} - placeholder="Commit Hash" - onChange={e => { - const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; - if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { - update( - services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), - hash - ); - } else { - append(hash); - } - }} - /> -
    -     -     -     -     - {/* {manual ? ( - e.key === "COMMIT_HASH")?.value} - placeholder="Commit Hash" - onChange={e => { - const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; - if (services[0]?.env?.find(e => e.key === "COMMIT_HASH")) { - update( - services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH"), - hash - ); - } else { - append(hash); - } - }} - /> - ) : ( - - )} - { - setManual(checked); - }} - checked={manual} - />{" "} */} -
    - ); -}; diff --git a/apps/deploy-web/src/components/remote-deploy/update/RollbackModal.tsx b/apps/deploy-web/src/components/remote-deploy/update/RollbackModal.tsx new file mode 100644 index 000000000..733b1fa5f --- /dev/null +++ b/apps/deploy-web/src/components/remote-deploy/update/RollbackModal.tsx @@ -0,0 +1,128 @@ +import React, { useEffect, useState } from "react"; +import { Control, useFieldArray } from "react-hook-form"; +import { + Button, + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, + Input, + Label, + RadioGroup, + RadioGroupItem, + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from "@akashnetwork/ui/components"; +import { GitCommitVertical, GitGraph, Info } from "lucide-react"; +import { nanoid } from "nanoid"; + +import { SdlBuilderFormValuesType } from "@src/types"; +import { RollBackType } from "@src/types/remotedeploy"; + +const RollbackModal = ({ data, control }: { data?: RollBackType[] | null; control: Control }) => { + const [filteredData, setFilteredData] = useState([]); + const [value, setValue] = useState(""); + const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" }); + const { append, update } = useFieldArray({ control, name: "services.0.env", keyName: "id" }); + const currentHash = services[0]?.env?.find(e => e.key === "COMMIT_HASH"); + useEffect(() => { + if (data) { + setFilteredData( + data?.filter(item => { + return item.name.toLowerCase().includes(value.toLowerCase()); + }) + ); + } + }, [data, value]); + + return ( +
    + + + + + + + Rollbacks + + + You need to click update deployment button to apply changes + + + + + Commit Name + Commit Hash + + +
    +
    + { + setValue(e.target.value); + }} + /> +
    + {filteredData?.length > 0 ? ( + { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: value, isSecret: false }; + + if (currentHash) { + update(services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH") as number, hash); + } else { + append(hash); + } + }} + > + {filteredData?.map(item => ( +
    + + +
    + ))} +     + ) : ( + <> + )} +
    +     + +
    + + { + const hash = { id: nanoid(), key: "COMMIT_HASH", value: e.target.value, isSecret: false }; + if (currentHash) { + update(services[0]?.env?.findIndex(e => e.key === "COMMIT_HASH") as number, hash); + } else { + append(hash); + } + }} + /> +
    +     +     +     +     +
    + ); +}; + +export default RollbackModal; diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index 700282047..66cf0f4df 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -1,10 +1,12 @@ -import { Control } from "react-hook-form"; +import { Control, UseFormSetValue } from "react-hook-form"; import { nanoid } from "nanoid"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { Owner } from "@src/types/remotedeploy"; import { github } from "@src/utils/templates"; -import { Owner } from "./remoteTypes"; +export type ServiceControl = Control; +export type ServiceSetValue = UseFormSetValue; export type OAuth = "github" | "gitlab" | "bitbucket"; export const PROXY_API_URL_AUTH = "https://proxy-console-github.vercel.app"; export const hiddenEnv = [ @@ -25,8 +27,7 @@ export const hiddenEnv = [ "FRONTEND_FOLDER" ]; export const REDIRECT_URL = `${process.env.NEXT_PUBLIC_REDIRECT_URI}?step=edit-deployment&type=github`; -export type ServiceControl = Control; -export function appendEnv(key: string, value: string, isSecret: boolean, setValue: any, services: ServiceType[]) { +export function appendEnv(key: string, value: string, isSecret: boolean, setValue: ServiceSetValue, services: ServiceType[]) { const previousEnv = services[0]?.env || []; if (previousEnv.find(e => e.key === key)) { previousEnv.map(e => { @@ -44,7 +45,7 @@ export function appendEnv(key: string, value: string, isSecret: boolean, setValu setValue("services.0.env", previousEnv); } -export function removeEnv(key: string, setValue: any, services: ServiceType[]) { +export function removeEnv(key: string, setValue: ServiceSetValue, services: ServiceType[]) { const previousEnv = services[0]?.env || []; const newEnv = previousEnv.filter(e => e.key !== key); setValue("services.0.env", newEnv); diff --git a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx b/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx similarity index 53% rename from apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx rename to apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx index 994312477..baa34dde5 100644 --- a/apps/deploy-web/src/components/remote-deploy/FrameworkDetection.tsx +++ b/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx @@ -1,10 +1,11 @@ import { useState } from "react"; +import { usePackageJson } from "@src/components/remote-deploy/api/api"; +import { useBitPackageJson } from "@src/components/remote-deploy/api/bitbucket-api"; +import { useGitlabPackageJson } from "@src/components/remote-deploy/api/gitlab-api"; +import { removeInitialUrl } from "@src/components/remote-deploy/utils"; import { ServiceType } from "@src/types"; -import { usePackageJson } from "./api/api"; -import { useBitPackageJson } from "./api/bitbucket-api"; -import { useGitlabPackageJson } from "./api/gitlab-api"; -import { removeInitialUrl } from "./utils"; + const frameworks = [ { title: "React", @@ -58,7 +59,7 @@ const frameworks = [ value: "other" } ]; -const useFramework = ({ services, setValue, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { +const useRemoteDeployFramework = ({ services, setValue, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { const [data, setData] = useState(null); const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; @@ -96,49 +97,4 @@ const useFramework = ({ services, setValue, subFolder }: { services: ServiceType }; }; -export default useFramework; - -//
    -//
    -//

    Build Framework

    -//

    Select your build framework

    -//
    - -// -//
    +export default useRemoteDeployFramework; diff --git a/apps/deploy-web/src/types/remoteCommits.ts b/apps/deploy-web/src/types/remoteCommits.ts new file mode 100644 index 000000000..04dd5245a --- /dev/null +++ b/apps/deploy-web/src/types/remoteCommits.ts @@ -0,0 +1,164 @@ +export interface GitCommit { + sha: string; + node_id: string; + commit: { + author: { + name: string; + email: string; + date: string; + }; + committer: { + name: string; + email: string; + date: string; + }; + message: string; + tree: { + sha: string; + url: string; + }; + url: string; + comment_count: number; + verification: { + verified: boolean; + reason: string; + signature: string | null; + payload: string | null; + }; + }; + url: string; + html_url: string; + comments_url: string; + author: { + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; + }; + committer: { + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; + }; + parents: { + sha: string; + url: string; + html_url: string; + }[]; +} + +export interface GitLabCommit { + id: string; + short_id: string; + created_at: string; + parent_ids: string[]; + title: string; + message: string; + author_name: string; + author_email: string; + authored_date: string; + committer_name: string; + committer_email: string; + committed_date: string; + web_url: string; +} + +export interface BitBucketCommit { + values: { + type: string; + hash: string; + date: string; + author: Author; + message: string; + summary: Summary; + links: CommitLinks; + parents: Parent[]; + rendered: RenderedMessage; + repository: Repository; + }[]; + pagelen: number; +} + +interface Author { + type: string; + raw: string; +} + +interface Summary { + type: string; + raw: string; + markup: string; + html: string; +} + +interface CommitLinks { + self: Link; + html: Link; + diff: Link; + approve: Link; + comments: Link; + statuses: Link; + patch: Link; +} + +interface Link { + href: string; +} + +interface Parent { + hash: string; + links: ParentLinks; + type: string; +} + +interface ParentLinks { + self: Link; + html: Link; +} + +interface RenderedMessage { + message: Summary; +} + +interface Repository { + type: string; + full_name: string; + links: RepositoryLinks; + name: string; + uuid: string; +} + +interface RepositoryLinks { + self: Link; + html: Link; + avatar: Link; +} diff --git a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts b/apps/deploy-web/src/types/remotedeploy.ts similarity index 54% rename from apps/deploy-web/src/components/remote-deploy/remoteTypes.ts rename to apps/deploy-web/src/types/remotedeploy.ts index 54c6a90dd..f8f9fc1f4 100644 --- a/apps/deploy-web/src/components/remote-deploy/remoteTypes.ts +++ b/apps/deploy-web/src/types/remotedeploy.ts @@ -135,3 +135,126 @@ export interface GithubRepository { default_branch: string; permissions: Permissions; } + +export interface BitProfile { + display_name: string; + links: { + self: { + href: string; + }; + avatar: { + href: string; + }; + repositories: { + href: string; + }; + snippets: { + href: string; + }; + html: { + href: string; + }; + hooks: { + href: string; + }; + }; + created_on: string; + type: string; + uuid: string; + has_2fa_enabled: null; + username: string; + is_staff: boolean; + account_id: string; + nickname: string; + account_status: string; + location: null; +} + +export interface GitLabProfile { + id: number; + username: string; + name: string; + state: string; + locked: boolean; + avatar_url: string; + web_url: string; + created_at: string; + bio: string; + location: string; + public_email: string; + skype: string; + linkedin: string; + twitter: string; + discord: string; + website_url: string; + organization: string; + job_title: string; + pronouns: string; + bot: boolean; + work_information: string; + local_time: string; + last_sign_in_at: string; + confirmed_at: string; + last_activity_on: string; + email: string; + theme_id: number; + color_scheme_id: number; + projects_limit: number; + current_sign_in_at: string; + identities: { + provider: string; + extern_uid: string; + saml_provider_id: string; + }[]; + can_create_group: boolean; + can_create_project: boolean; + two_factor_enabled: boolean; + external: boolean; + private_profile: boolean; + commit_email: string; + shared_runners_minutes_limit: string; + extra_shared_runners_minutes_limit: string; + scim_identities: any[]; +} + +export interface GitHubProfile { + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; + name: string; + company: string; + blog: string; + location: string; + email: string; + hireable: string; + bio: string; + twitter_username: string; + public_repos: number; + public_gists: number; + followers: number; + following: number; + created_at: string; + updated_at: string; +} + +export interface RollBackType { + name: string; + + value: string; + date: Date; +} diff --git a/apps/deploy-web/src/utils/urlUtils.ts b/apps/deploy-web/src/utils/urlUtils.ts index 3139bddf0..9faa8ebe3 100644 --- a/apps/deploy-web/src/utils/urlUtils.ts +++ b/apps/deploy-web/src/utils/urlUtils.ts @@ -9,6 +9,7 @@ export type NewDeploymentParams = { templateId?: string; page?: "new-deployment" | "deploy-linux"; type?: string; + code?: string | null; }; function getSelectedNetworkQueryParam() { @@ -76,9 +77,9 @@ export class UrlService { // New deployment static newDeployment = (params: NewDeploymentParams = {}) => { - const { step, dseq, redeploy, templateId, type } = params; + const { step, dseq, redeploy, templateId, type, code } = params; const page = params.page || "new-deployment"; - return `/${page}${appendSearchParams({ dseq, step, templateId, redeploy, type })}`; + return `/${page}${appendSearchParams({ dseq, step, templateId, redeploy, type, code })}`; }; } From a693d7a915eb0af4126bd7723953cd57db52e3d9 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 21:33:15 +0530 Subject: [PATCH 51/59] fix: type fixes (Remote Deploy) --- .../remote-deploy/AccountDropdown.tsx | 2 +- .../src/components/remote-deploy/Repos.tsx | 4 +- .../src/components/remote-deploy/api/api.ts | 3 +- .../remote-deploy/api/bitbucket-api.ts | 15 +- .../remote-deploy/api/gitlab-api.ts | 11 +- .../remote-deploy/bitbucket/Bit.tsx | 5 +- .../remote-deploy/bitbucket/Workspaces.tsx | 2 +- .../remote-deploy/github/Github.tsx | 13 +- .../remote-deploy/gitlab/Branches.tsx | 7 +- .../remote-deploy/gitlab/Gitlab.tsx | 4 +- .../remote-deploy/gitlab/Groups.tsx | 2 +- .../src/components/remote-deploy/utils.ts | 4 +- apps/deploy-web/src/types/remoteProfile.ts | 115 ++++++++ apps/deploy-web/src/types/remoteRepos.ts | 278 ++++++++++++++++++ apps/deploy-web/src/types/remotedeploy.ts | 128 +------- 15 files changed, 442 insertions(+), 151 deletions(-) create mode 100644 apps/deploy-web/src/types/remoteProfile.ts create mode 100644 apps/deploy-web/src/types/remoteRepos.ts diff --git a/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx index 62fc0a06a..cf1db56f7 100644 --- a/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx +++ b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx @@ -15,7 +15,7 @@ import { useAtom } from "jotai"; import { ChevronDown } from "lucide-react"; import remoteDeployStore from "@src/store/remoteDeployStore"; -import { BitProfile, GitHubProfile, GitLabProfile } from "@src/types/remotedeploy"; +import { BitProfile, GitHubProfile, GitLabProfile } from "@src/types/remoteProfile"; const AccountDropDown = ({ userProfile, diff --git a/apps/deploy-web/src/components/remote-deploy/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/Repos.tsx index 83b1776e5..76ffb04ec 100644 --- a/apps/deploy-web/src/components/remote-deploy/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Repos.tsx @@ -43,7 +43,7 @@ const Repos = ({ profile, type = "github" }: { - repos: RepoType[]; + repos?: RepoType[]; setValue: UseFormSetValue; services: ServiceType[]; isLoading: boolean; @@ -172,7 +172,7 @@ const Repos = ({ className="w-full flex-1" onChange={e => { setSearch(e.target.value); - setFilteredRepos(repos.filter(repo => repo.name.toLowerCase().includes(e.target.value.toLowerCase()))); + setFilteredRepos(repos?.filter(repo => repo.name.toLowerCase().includes(e.target.value.toLowerCase()))); }} />
    diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index e52d13d1d..fb4ac4461 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -5,7 +5,8 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GitCommit } from "@src/types/remoteCommits"; -import { GitHubProfile, GithubRepository, IGithubDirectoryItem } from "@src/types/remotedeploy"; +import { GithubRepository, IGithubDirectoryItem } from "@src/types/remotedeploy"; +import { GitHubProfile } from "@src/types/remoteProfile"; import { REDIRECT_URL } from "../utils"; const GITHUB_API_URL = "https://api.github.com"; diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index 8ef3f2185..06a8bb931 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -1,11 +1,12 @@ import { useMutation, useQuery } from "react-query"; -import axios from "axios"; +import axios, { AxiosError } from "axios"; import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { BitBucketCommit } from "@src/types/remoteCommits"; -import { BitProfile } from "@src/types/remotedeploy"; +import { BitProfile } from "@src/types/remoteProfile"; +import { BitRepository, BitWorkspace } from "@src/types/remoteRepos"; const Bitbucket_API_URL = "https://api.bitbucket.org/2.0"; @@ -79,7 +80,7 @@ export const useBitUserProfile = () => { return response.data; }, enabled: !!token?.access_token && token.type === "bitbucket", - onError: (error: any) => { + onError: (error: AxiosError) => { if (error.response?.status === 401) { mutate(); } @@ -108,7 +109,9 @@ export const useWorkspaces = () => { return useQuery({ queryKey: ["workspaces", token.access_token], queryFn: async () => { - const response = await axiosInstance.get("/workspaces", { + const response = await axiosInstance.get<{ + values: BitWorkspace[]; + }>("/workspaces", { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -124,7 +127,9 @@ export const useBitReposByWorkspace = (workspace: string) => { return useQuery({ queryKey: ["repos", token.access_token, workspace], queryFn: async () => { - const response = await axiosInstance.get(`/repositories/${workspace}`, { + const response = await axiosInstance.get<{ + values: BitRepository[]; + }>(`/repositories/${workspace}`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 4f76aca63..7253a2aed 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -1,11 +1,12 @@ import { useMutation, useQuery } from "react-query"; -import axios from "axios"; +import axios, { AxiosError } from "axios"; import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GitLabCommit } from "@src/types/remoteCommits"; -import { GitLabProfile } from "@src/types/remotedeploy"; +import { GitLabProfile } from "@src/types/remoteProfile"; +import { GitlabGroup, GitlabRepo } from "@src/types/remoteRepos"; export const handleGitLabLogin = () => { window.location.href = `https://gitlab.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code&scope=read_user+read_repository+read_api+api&state=gitlab`; @@ -80,7 +81,7 @@ export const useGitLabUserProfile = () => { return response.data; }, enabled: !!token?.access_token && token.type === "gitlab", - onError: (error: any) => { + onError: (error: AxiosError) => { if (error.response?.status === 401) { mutate(); } @@ -93,7 +94,7 @@ export const useGitLabGroups = () => { return useQuery({ queryKey: ["gitlab-repos", token?.access_token], queryFn: async () => { - const response = await axiosInstance.get(`/groups`, { + const response = await axiosInstance.get(`/groups`, { headers: { Authorization: `Bearer ${token?.access_token}` } @@ -109,7 +110,7 @@ export const useGitLabReposByGroup = (group: string | undefined) => { return useQuery({ queryKey: ["repos", token?.access_token, group], queryFn: async () => { - const response = await axiosInstance.get(`/groups/${group}/projects`, { + const response = await axiosInstance.get(`/groups/${group}/projects`, { headers: { Authorization: `Bearer ${token?.access_token}` } diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx index 1bb3b7aad..9c188df72 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Bit.tsx @@ -1,7 +1,7 @@ import { Dispatch, useState } from "react"; import { ServiceType } from "@src/types"; -import { BitProfile } from "@src/types/remotedeploy"; +import { BitProfile } from "@src/types/remoteProfile"; import { useBitReposByWorkspace } from "../api/bitbucket-api"; import Repos from "../Repos"; import { ServiceControl, ServiceSetValue } from "../utils"; @@ -35,9 +35,8 @@ const Bit = ({ ({ + repos?.values.map(repo => ({ name: repo.name, - id: repo.id, default_branch: repo?.mainbranch?.name, html_url: repo?.links?.html?.href, userName: profile?.username, diff --git a/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx index 3bf0d608b..493952deb 100644 --- a/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx +++ b/apps/deploy-web/src/components/remote-deploy/bitbucket/Workspaces.tsx @@ -33,7 +33,7 @@ const WorkSpaces = ({ isLoading, setWorkSpaces }: { isLoading: boolean; workSpac - {data?.values?.map((work: any) => ( + {data?.values?.map(work => (
    diff --git a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx index a492a64f0..be6bedb69 100644 --- a/apps/deploy-web/src/components/remote-deploy/github/Github.tsx +++ b/apps/deploy-web/src/components/remote-deploy/github/Github.tsx @@ -2,7 +2,7 @@ import { Dispatch } from "react"; import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; -import { GitHubProfile } from "@src/types/remotedeploy"; +import { GitHubProfile } from "@src/types/remoteProfile"; import { useRepos } from "../api/api"; import Repos from "../Repos"; import { ServiceSetValue } from "../utils"; @@ -29,7 +29,16 @@ const Github = ({ return ( <> repo.owner?.login === profile?.login || repo?.owner?.type === "Organization") as any} + repos={repos + ?.filter(repo => repo.owner?.login === profile?.login || repo?.owner?.type === "Organization") + ?.map(repo => ({ + name: repo.name, + default_branch: repo?.default_branch, + html_url: repo?.html_url, + private: repo?.private, + id: repo.id?.toString(), + owner: repo?.owner + }))} setValue={setValue} isLoading={isLoading} services={services} diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx index c06558586..807f1eb39 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Branches.tsx @@ -1,13 +1,14 @@ import { Control } from "react-hook-form"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; +import { GitlabRepo } from "@src/types/remoteRepos"; import { useGitLabBranches } from "../api/gitlab-api"; import SelectBranches from "../SelectBranches"; -const Branches = ({ repos, services, control }: { repos?: any; services: ServiceType[]; control: Control }) => { +const Branches = ({ repos, services, control }: { repos?: GitlabRepo[]; services: ServiceType[]; control: Control }) => { const selected = - repos?.length > 0 - ? repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id + repos && repos?.length > 0 + ? repos?.find(e => e.web_url === services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value)?.id?.toString() : services?.[0]?.env?.find(e => e.key === "GITLAB_PROJECT_ID")?.value; const { data: branches, isLoading: branchesLoading } = useGitLabBranches(selected); diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx index 648143ee5..bfb42c43e 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Gitlab.tsx @@ -32,9 +32,9 @@ const GitLab = ({ services={services} isLoading={isLoading} repos={ - repos?.map((repo: any) => ({ + repos?.map(repo => ({ name: repo.name, - id: repo.id, + id: repo.id?.toString(), default_branch: repo?.default_branch, html_url: repo?.web_url, userName: "gitlab", diff --git a/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx index d1fb2c331..5eca6c21a 100644 --- a/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx +++ b/apps/deploy-web/src/components/remote-deploy/gitlab/Groups.tsx @@ -32,7 +32,7 @@ const Groups = ({ isLoading, setGroup }: { isLoading: boolean; setGroup: Dispatc - {data?.map((work: any) => ( + {data?.map(work => (
    diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index 66cf0f4df..d1dfe2fc8 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -57,10 +57,10 @@ export const removeInitialUrl = (url?: string) => { export interface RepoType { name: string; - id: string; + id?: string; default_branch: string; html_url: string; - userName: string; + userName?: string; private: boolean; owner?: Owner; } diff --git a/apps/deploy-web/src/types/remoteProfile.ts b/apps/deploy-web/src/types/remoteProfile.ts new file mode 100644 index 000000000..6d1f01107 --- /dev/null +++ b/apps/deploy-web/src/types/remoteProfile.ts @@ -0,0 +1,115 @@ +export interface BitProfile { + display_name: string; + links: { + self: { + href: string; + }; + avatar: { + href: string; + }; + repositories: { + href: string; + }; + snippets: { + href: string; + }; + html: { + href: string; + }; + hooks: { + href: string; + }; + }; + created_on: string; + type: string; + uuid: string; + has_2fa_enabled: null; + username: string; + is_staff: boolean; + account_id: string; + nickname: string; + account_status: string; + location: null; +} + +export interface GitLabProfile { + id: number; + username: string; + name: string; + state: string; + locked: boolean; + avatar_url: string; + web_url: string; + created_at: string; + bio: string; + location: string; + public_email: string; + skype: string; + linkedin: string; + twitter: string; + discord: string; + website_url: string; + organization: string; + job_title: string; + pronouns: string; + bot: boolean; + work_information: string; + local_time: string; + last_sign_in_at: string; + confirmed_at: string; + last_activity_on: string; + email: string; + theme_id: number; + color_scheme_id: number; + projects_limit: number; + current_sign_in_at: string; + identities: { + provider: string; + extern_uid: string; + saml_provider_id: string; + }[]; + can_create_group: boolean; + can_create_project: boolean; + two_factor_enabled: boolean; + external: boolean; + private_profile: boolean; + commit_email: string; + shared_runners_minutes_limit: string; + extra_shared_runners_minutes_limit: string; + scim_identities: any[]; +} + +export interface GitHubProfile { + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; + name: string; + company: string; + blog: string; + location: string; + email: string; + hireable: string; + bio: string; + twitter_username: string; + public_repos: number; + public_gists: number; + followers: number; + following: number; + created_at: string; + updated_at: string; +} diff --git a/apps/deploy-web/src/types/remoteRepos.ts b/apps/deploy-web/src/types/remoteRepos.ts new file mode 100644 index 000000000..284d58360 --- /dev/null +++ b/apps/deploy-web/src/types/remoteRepos.ts @@ -0,0 +1,278 @@ +interface RepositoryLinks { + self: Link; + html: Link; + avatar: Link; + pullrequests: Link; + commits: Link; + forks: Link; + watchers: Link; + branches: Link; + tags: Link; + downloads: Link; + source: Link; + clone: CloneLink[]; + hooks: Link; +} + +interface Link { + href: string; +} + +interface CloneLink extends Link { + name: string; +} + +interface RepositoryOwner { + display_name: string; + links: { + self: Link; + avatar: Link; + html: Link; + }; + type: string; + uuid: string; + username: string; +} + +export interface BitWorkspace { + type: string; + uuid: string; + name: string; + slug: string; + links: { + avatar: Link; + html: Link; + self: Link; + }; +} + +interface Project { + type: string; + key: string; + uuid: string; + name: string; + links: { + self: Link; + html: Link; + avatar: Link; + }; +} + +interface MainBranch { + name: string; + type: string; +} + +interface OverrideSettings { + default_merge_strategy: boolean; + branching_model: boolean; +} + +export interface BitRepository { + type: string; + full_name: string; + links: RepositoryLinks; + name: string; + slug: string; + description: string; + scm: string; + website: string | null; + owner: RepositoryOwner; + workspace: BitWorkspace; + is_private: boolean; + project: Project; + fork_policy: string; + created_on: string; + updated_on: string; + size: number; + language: string; + uuid: string; + mainbranch: MainBranch; + override_settings: OverrideSettings; + parent: null | string; +} + +interface Namespace { + id: number; + name: string; + path: string; + kind: string; + full_path: string; + parent_id: number | null; + avatar_url: string | null; + web_url: string; +} + +interface Links { + self: string; + issues: string; + merge_requests: string; + repo_branches: string; + labels: string; + events: string; + members: string; + cluster_agents: string; +} + +interface ContainerExpirationPolicy { + cadence: string; + enabled: boolean; + keep_n: number; + older_than: string; + name_regex: string; + name_regex_keep: string | null; + next_run_at: string; +} + +export interface GitlabRepo { + id: number; + description: string; + name: string; + name_with_namespace: string; + path: string; + path_with_namespace: string; + created_at: string; + default_branch: string; + tag_list: string[]; + topics: string[]; + ssh_url_to_repo: string; + http_url_to_repo: string; + web_url: string; + readme_url: string; + forks_count: number; + avatar_url: string | null; + star_count: number; + last_activity_at: string; + namespace: Namespace; + container_registry_image_prefix: string; + _links: Links; + packages_enabled: boolean; + empty_repo: boolean; + archived: boolean; + visibility: string; + resolve_outdated_diff_discussions: boolean; + container_expiration_policy: ContainerExpirationPolicy; + repository_object_format: string; + issues_enabled: boolean; + merge_requests_enabled: boolean; + wiki_enabled: boolean; + jobs_enabled: boolean; + snippets_enabled: boolean; + container_registry_enabled: boolean; + service_desk_enabled: boolean; + service_desk_address: string; + can_create_merge_request_in: boolean; + issues_access_level: string; + repository_access_level: string; + merge_requests_access_level: string; + forking_access_level: string; + wiki_access_level: string; + builds_access_level: string; + snippets_access_level: string; + pages_access_level: string; + analytics_access_level: string; + container_registry_access_level: string; + security_and_compliance_access_level: string; + releases_access_level: string; + environments_access_level: string; + feature_flags_access_level: string; + infrastructure_access_level: string; + monitor_access_level: string; + model_experiments_access_level: string; + model_registry_access_level: string; + emails_disabled: boolean; + emails_enabled: boolean; + shared_runners_enabled: boolean; + lfs_enabled: boolean; + creator_id: number; + import_url: string; + import_type: string; + import_status: string; + open_issues_count: number; + description_html: string; + updated_at: string; + ci_default_git_depth: number; + ci_forward_deployment_enabled: boolean; + ci_forward_deployment_rollback_allowed: boolean; + ci_job_token_scope_enabled: boolean; + ci_separated_caches: boolean; + ci_allow_fork_pipelines_to_run_in_parent_project: boolean; + ci_id_token_sub_claim_components: string[]; + build_git_strategy: string; + keep_latest_artifact: boolean; + restrict_user_defined_variables: boolean; + ci_pipeline_variables_minimum_override_role: string; + runners_token: string | null; + runner_token_expiration_interval: string | null; + group_runners_enabled: boolean; + auto_cancel_pending_pipelines: string; + build_timeout: number; + auto_devops_enabled: boolean; + auto_devops_deploy_strategy: string; + ci_push_repository_for_job_token_allowed: boolean; + ci_config_path: string; + public_jobs: boolean; + shared_with_groups: string[]; + only_allow_merge_if_pipeline_succeeds: boolean; + allow_merge_on_skipped_pipeline: string | null; + request_access_enabled: boolean; + only_allow_merge_if_all_discussions_are_resolved: boolean; + remove_source_branch_after_merge: boolean; + printing_merge_request_link_enabled: boolean; + merge_method: string; + squash_option: string; + enforce_auth_checks_on_uploads: boolean; + suggestion_commit_message: string | null; + merge_commit_template: string | null; + squash_commit_template: string | null; + issue_branch_template: string | null; + warn_about_potentially_unwanted_characters: boolean; + autoclose_referenced_issues: boolean; + external_authorization_classification_label: string; + requirements_enabled: boolean; + requirements_access_level: string; + security_and_compliance_enabled: boolean; + pre_receive_secret_detection_enabled: boolean; + compliance_frameworks: string[]; +} + +interface DefaultBranchProtectionDefaults { + allowed_to_push: Array<{ access_level: number }>; + allow_force_push: boolean; + allowed_to_merge: Array<{ access_level: number }>; +} + +export interface GitlabGroup { + id: number; + web_url: string; + name: string; + path: string; + description: string; + visibility: string; + share_with_group_lock: boolean; + require_two_factor_authentication: boolean; + two_factor_grace_period: number; + project_creation_level: string; + auto_devops_enabled: boolean | null; + subgroup_creation_level: string; + emails_disabled: boolean; + emails_enabled: boolean; + mentions_disabled: boolean | null; + lfs_enabled: boolean; + math_rendering_limits_enabled: boolean; + lock_math_rendering_limits_enabled: boolean; + default_branch: string | null; + default_branch_protection: number; + default_branch_protection_defaults: DefaultBranchProtectionDefaults; + avatar_url: string | null; + request_access_enabled: boolean; + full_name: string; + full_path: string; + created_at: string; + parent_id: number | null; + organization_id: number; + shared_runners_setting: string; + ldap_cn: string | null; + ldap_access: string | null; + wiki_access_level: string; +} diff --git a/apps/deploy-web/src/types/remotedeploy.ts b/apps/deploy-web/src/types/remotedeploy.ts index f8f9fc1f4..077f7c56b 100644 --- a/apps/deploy-web/src/types/remotedeploy.ts +++ b/apps/deploy-web/src/types/remotedeploy.ts @@ -15,6 +15,11 @@ export interface IGithubDirectoryItem { self: string; }; } +export interface RollBackType { + name: string; + value: string; + date: Date; +} export interface Owner { login: string; @@ -135,126 +140,3 @@ export interface GithubRepository { default_branch: string; permissions: Permissions; } - -export interface BitProfile { - display_name: string; - links: { - self: { - href: string; - }; - avatar: { - href: string; - }; - repositories: { - href: string; - }; - snippets: { - href: string; - }; - html: { - href: string; - }; - hooks: { - href: string; - }; - }; - created_on: string; - type: string; - uuid: string; - has_2fa_enabled: null; - username: string; - is_staff: boolean; - account_id: string; - nickname: string; - account_status: string; - location: null; -} - -export interface GitLabProfile { - id: number; - username: string; - name: string; - state: string; - locked: boolean; - avatar_url: string; - web_url: string; - created_at: string; - bio: string; - location: string; - public_email: string; - skype: string; - linkedin: string; - twitter: string; - discord: string; - website_url: string; - organization: string; - job_title: string; - pronouns: string; - bot: boolean; - work_information: string; - local_time: string; - last_sign_in_at: string; - confirmed_at: string; - last_activity_on: string; - email: string; - theme_id: number; - color_scheme_id: number; - projects_limit: number; - current_sign_in_at: string; - identities: { - provider: string; - extern_uid: string; - saml_provider_id: string; - }[]; - can_create_group: boolean; - can_create_project: boolean; - two_factor_enabled: boolean; - external: boolean; - private_profile: boolean; - commit_email: string; - shared_runners_minutes_limit: string; - extra_shared_runners_minutes_limit: string; - scim_identities: any[]; -} - -export interface GitHubProfile { - login: string; - id: number; - node_id: string; - avatar_url: string; - gravatar_id: string; - url: string; - html_url: string; - followers_url: string; - following_url: string; - gists_url: string; - starred_url: string; - subscriptions_url: string; - organizations_url: string; - repos_url: string; - events_url: string; - received_events_url: string; - type: string; - site_admin: boolean; - name: string; - company: string; - blog: string; - location: string; - email: string; - hireable: string; - bio: string; - twitter_username: string; - public_repos: number; - public_gists: number; - followers: number; - following: number; - created_at: string; - updated_at: string; -} - -export interface RollBackType { - name: string; - - value: string; - date: Date; -} From 6f38fa9adc2b95120e44dc146eeea5b43287ada0 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 22:44:29 +0530 Subject: [PATCH 52/59] fix: types (Remote Deploy) --- .../src/components/remote-deploy/Repos.tsx | 1 - .../src/components/remote-deploy/api/api.ts | 4 +- .../remote-deploy/api/bitbucket-api.ts | 3 +- .../remote-deploy/api/gitlab-api.ts | 3 +- .../src/components/remote-deploy/utils.ts | 54 +++++++++++++ .../src/hooks/useRemoteDeployFramework.tsx | 75 ++++--------------- apps/deploy-web/src/types/remotedeploy.ts | 7 ++ 7 files changed, 83 insertions(+), 64 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/Repos.tsx index 76ffb04ec..7166734ff 100644 --- a/apps/deploy-web/src/components/remote-deploy/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Repos.tsx @@ -72,7 +72,6 @@ const Repos = ({ const { currentFramework, isLoading: frameworkLoading } = useRemoteDeployFramework({ services, setValue, - repos, subFolder: currentFolder?.value }); diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index fb4ac4461..677b02790 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -5,7 +5,7 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GitCommit } from "@src/types/remoteCommits"; -import { GithubRepository, IGithubDirectoryItem } from "@src/types/remotedeploy"; +import { GithubRepository, IGithubDirectoryItem, PackageJson } from "@src/types/remotedeploy"; import { GitHubProfile } from "@src/types/remoteProfile"; import { REDIRECT_URL } from "../utils"; @@ -127,7 +127,7 @@ export const useCommits = (repo: string, branch: string) => { }); }; -export const usePackageJson = (onSettled: (data: any) => void, repo?: string, subFolder?: string) => { +export const usePackageJson = (onSettled: (data: PackageJson) => void, repo?: string, subFolder?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ queryKey: ["packageJson", repo, subFolder], diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index 06a8bb931..d3a058f09 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { BitBucketCommit } from "@src/types/remoteCommits"; +import { PackageJson } from "@src/types/remotedeploy"; import { BitProfile } from "@src/types/remoteProfile"; import { BitRepository, BitWorkspace } from "@src/types/remoteRepos"; @@ -156,7 +157,7 @@ export const useBitBranches = (repo?: string) => { }); }; -export const useBitPackageJson = (onSettled: (data: any) => void, repo?: string, branch?: string, subFolder?: string) => { +export const useBitPackageJson = (onSettled: (data: PackageJson) => void, repo?: string, branch?: string, subFolder?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 7253a2aed..72e6e8a00 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GitLabCommit } from "@src/types/remoteCommits"; +import { PackageJson } from "@src/types/remotedeploy"; import { GitLabProfile } from "@src/types/remoteProfile"; import { GitlabGroup, GitlabRepo } from "@src/types/remoteRepos"; @@ -154,7 +155,7 @@ export const useGitLabCommits = (repo?: string, branch?: string) => { }); }; -export const useGitlabPackageJson = (onSettled: (data: any) => void, repo?: string, subFolder?: string) => { +export const useGitlabPackageJson = (onSettled: (data: PackageJson) => void, repo?: string, subFolder?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ diff --git a/apps/deploy-web/src/components/remote-deploy/utils.ts b/apps/deploy-web/src/components/remote-deploy/utils.ts index d1dfe2fc8..ba75105c3 100644 --- a/apps/deploy-web/src/components/remote-deploy/utils.ts +++ b/apps/deploy-web/src/components/remote-deploy/utils.ts @@ -79,3 +79,57 @@ export const getRepoUrl = (yml?: string | null) => { return repo ? repo?.split("=")[1] : null; }; + +export const supportedFrameworks = [ + { + title: "React", + value: "react", + image: "https://static-00.iconduck.com/assets.00/react-icon-512x456-2ynx529a.png" + }, + { + title: "Vue", + value: "vue", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/1200px-Vue.js_Logo.svg.png" + }, + { + title: "Angular", + value: "angular", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png" + }, + { + title: "Svelte", + value: "svelte", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png" + }, + { + title: "Next.js", + value: "next", + image: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/nextjs-icon.png" + }, + + { + title: "Astro", + value: "astro", + image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" + }, + { + title: "Nuxt.js", + value: "nuxt", + image: "https://v2.nuxt.com/_nuxt/icons/icon_64x64.6dcbd4.png" + }, + + { + title: "Gridsome ", + value: "gridsome", + image: "https://gridsome.org/assets/static/favicon.b9532cc.c6d52b979318cc0b0524324281174df2.png" + }, + { + title: "Vite", + value: "vite", + image: "https://vitejs.dev/logo.svg" + }, + { + title: "Other", + value: "other" + } +]; diff --git a/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx b/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx index baa34dde5..a932d8303 100644 --- a/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx +++ b/apps/deploy-web/src/hooks/useRemoteDeployFramework.tsx @@ -3,67 +3,24 @@ import { useState } from "react"; import { usePackageJson } from "@src/components/remote-deploy/api/api"; import { useBitPackageJson } from "@src/components/remote-deploy/api/bitbucket-api"; import { useGitlabPackageJson } from "@src/components/remote-deploy/api/gitlab-api"; -import { removeInitialUrl } from "@src/components/remote-deploy/utils"; +import { removeInitialUrl, ServiceSetValue, supportedFrameworks } from "@src/components/remote-deploy/utils"; import { ServiceType } from "@src/types"; - -const frameworks = [ - { - title: "React", - value: "react", - image: "https://static-00.iconduck.com/assets.00/react-icon-512x456-2ynx529a.png" - }, - { - title: "Vue", - value: "vue", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/1200px-Vue.js_Logo.svg.png" - }, - { - title: "Angular", - value: "angular", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png" - }, - { - title: "Svelte", - value: "svelte", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png" - }, - { - title: "Next.js", - value: "next", - image: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/nextjs-icon.png" - }, - - { - title: "Astro", - value: "astro", - image: "https://icon.icepanel.io/Technology/png-shadow-512/Astro.png" - }, - { - title: "Nuxt.js", - value: "nuxt", - image: "https://v2.nuxt.com/_nuxt/icons/icon_64x64.6dcbd4.png" - }, - - { - title: "Gridsome ", - value: "gridsome", - image: "https://gridsome.org/assets/static/favicon.b9532cc.c6d52b979318cc0b0524324281174df2.png" - }, - { - title: "Vite", - value: "vite", - image: "https://vitejs.dev/logo.svg" - }, - { - title: "Other", - value: "other" - } -]; -const useRemoteDeployFramework = ({ services, setValue, subFolder }: { services: ServiceType[]; setValue: any; repos?: any; subFolder?: string }) => { - const [data, setData] = useState(null); +import { PackageJson } from "@src/types/remotedeploy"; + +const useRemoteDeployFramework = ({ + services, + setValue, + subFolder +}: { + services: ServiceType[]; + setValue: ServiceSetValue; + + subFolder?: string; +}) => { + const [data, setData] = useState(null); const selected = services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value; - const setValueHandler = (data: any) => { + const setValueHandler = (data: PackageJson) => { if (data?.dependencies) { setData(data); const cpus = (Object.keys(data?.dependencies ?? {})?.length / 10 / 2)?.toFixed(1); @@ -89,7 +46,7 @@ const useRemoteDeployFramework = ({ services, setValue, subFolder }: { services: ); return { - currentFramework: frameworks.find(f => data?.scripts?.dev?.includes(f.value)) ?? { + currentFramework: supportedFrameworks.find(f => data?.scripts?.dev?.includes(f.value)) ?? { title: "Other", value: "other" }, diff --git a/apps/deploy-web/src/types/remotedeploy.ts b/apps/deploy-web/src/types/remotedeploy.ts index 077f7c56b..51680af17 100644 --- a/apps/deploy-web/src/types/remotedeploy.ts +++ b/apps/deploy-web/src/types/remotedeploy.ts @@ -140,3 +140,10 @@ export interface GithubRepository { default_branch: string; permissions: Permissions; } + +export interface PackageJson { + // this should any as we cannot know what dependencies are available + dependencies?: any; + devDependencies?: any; + scripts?: any; +} From 299fe33bdb4f2823a7521edba7e94471469e226e Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 22:48:04 +0530 Subject: [PATCH 53/59] update Repos.tsx, bitbucket-api.ts and gitlab-api.ts --- apps/deploy-web/src/components/remote-deploy/Repos.tsx | 2 +- .../src/components/remote-deploy/api/bitbucket-api.ts | 4 ++-- .../deploy-web/src/components/remote-deploy/api/gitlab-api.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/deploy-web/src/components/remote-deploy/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/Repos.tsx index 7166734ff..c43bba29c 100644 --- a/apps/deploy-web/src/components/remote-deploy/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Repos.tsx @@ -263,7 +263,7 @@ const Repos = ({ (directory && directory?.filter(item => item.type === "dir" || item.type === "commit_directory" || item.type === "tree")?.length > 0 ? (
    -

    Select Directory

    +

    Select Directory

    void, repo?: }); }; -export const useBitSrcFolders = (onSettled: (data: any) => void, repo?: string, branch?: string) => { +export const useBitSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string, branch?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 72e6e8a00..9661157f1 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -5,7 +5,7 @@ import { usePathname, useRouter } from "next/navigation"; import remoteDeployStore from "@src/store/remoteDeployStore"; import { GitLabCommit } from "@src/types/remoteCommits"; -import { PackageJson } from "@src/types/remotedeploy"; +import { IGithubDirectoryItem, PackageJson } from "@src/types/remotedeploy"; import { GitLabProfile } from "@src/types/remoteProfile"; import { GitlabGroup, GitlabRepo } from "@src/types/remoteRepos"; @@ -178,7 +178,7 @@ export const useGitlabPackageJson = (onSettled: (data: PackageJson) => void, rep }); }; -export const useGitlabSrcFolders = (onSettled: (data: any) => void, repo?: string) => { +export const useGitlabSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string) => { const [token] = useAtom(remoteDeployStore.tokens); return useQuery({ From c026375aa1b4fb2ff5eac4ddbbd0ea8b5e51af2c Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 22:52:06 +0530 Subject: [PATCH 54/59] fix: vercel deploy fix --- .../deployments/DeploymentDetail.tsx | 6 +++--- .../src/pages/deployments/[dseq]/index.tsx | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index 8bede4881..ba1143e3b 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -5,7 +5,7 @@ import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } f 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"; @@ -31,7 +31,8 @@ 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) ?? ""; const router = useRouter(); const [activeTab, setActiveTab] = useState("LEASES"); const [editedManifest, setEditedManifest] = useState(null); @@ -43,7 +44,6 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin const [deploymentManifest, setDeploymentManifest] = useState(null); const remoteDeploy: boolean = editedManifest && isRedeployImage(editedManifest) ? true : false; const repo: string | null = remoteDeploy ? getRepoUrl(editedManifest) : null; - const { data: deployment, isFetching: isLoadingDeployment, diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 29f44ab3a..93bb573ab 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -4,16 +4,16 @@ type Props = { dseq: string; }; -const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { - return ; +const DeploymentDetailPage: React.FunctionComponent = () => { + return ; }; export default DeploymentDetailPage; -export async function getServerSideProps({ params }) { - return { - props: { - dseq: params?.dseq - } - }; -} +// export async function getServerSideProps({ params }) { +// return { +// props: { +// dseq: params?.dseq +// } +// }; +// } From 5647200b8caee3415a2004f5cbcd238b55546f5f Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 12 Sep 2024 22:56:15 +0530 Subject: [PATCH 55/59] revert: vercel deploy --- .../deployments/DeploymentDetail.tsx | 6 +++--- .../src/pages/deployments/[dseq]/index.tsx | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index ba1143e3b..8bede4881 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -5,7 +5,7 @@ import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } f import { ArrowLeft } from "iconoir-react"; import yaml from "js-yaml"; import Link from "next/link"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { NextSeo } from "next-seo"; import { event } from "nextjs-google-analytics"; @@ -31,8 +31,7 @@ import { DeploymentSubHeader } from "./DeploymentSubHeader"; import { LeaseRow } from "./LeaseRow"; import { ManifestUpdate } from "./ManifestUpdate"; -export function DeploymentDetail() { - const dseq = (useParams()?.dseq as string) ?? ""; +export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) { const router = useRouter(); const [activeTab, setActiveTab] = useState("LEASES"); const [editedManifest, setEditedManifest] = useState(null); @@ -44,6 +43,7 @@ export function DeploymentDetail() { const [deploymentManifest, setDeploymentManifest] = useState(null); const remoteDeploy: boolean = editedManifest && isRedeployImage(editedManifest) ? true : false; const repo: string | null = remoteDeploy ? getRepoUrl(editedManifest) : null; + const { data: deployment, isFetching: isLoadingDeployment, diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 93bb573ab..29f44ab3a 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -4,16 +4,16 @@ type Props = { dseq: string; }; -const DeploymentDetailPage: React.FunctionComponent = () => { - return ; +const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { + return ; }; export default DeploymentDetailPage; -// export async function getServerSideProps({ params }) { -// return { -// props: { -// dseq: params?.dseq -// } -// }; -// } +export async function getServerSideProps({ params }) { + return { + props: { + dseq: params?.dseq + } + }; +} From 5821792f0d7d82949e3fc9b54e4c0f9247356470 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 13 Sep 2024 20:39:47 +0530 Subject: [PATCH 56/59] fix: types and api class logic (Remote Deployment) --- .../deployments/DeploymentDetail.tsx | 9 +-- .../components/deployments/ManifestUpdate.tsx | 8 +-- .../remote-deploy/AccountDropdown.tsx | 4 +- .../components/remote-deploy/GithubDeploy.tsx | 23 ++++---- .../src/components/remote-deploy/Repos.tsx | 4 +- .../src/components/remote-deploy/api/api.ts | 16 ++--- .../remote-deploy/api/bitbucket-api.ts | 20 +++---- .../remote-deploy/api/gitlab-api.ts | 20 +++---- .../update/RemoteDeployUpdate.tsx | 4 +- apps/deploy-web/src/hooks/useWhenNot.ts | 12 ---- .../src/pages/api/bitbucket/authenticate.ts | 45 ++++++-------- .../src/pages/api/bitbucket/refresh.ts | 44 ++++++-------- .../src/pages/api/github/authenticate.ts | 40 ++++++------- .../src/pages/api/gitlab/authenticate.ts | 42 ++++++------- .../src/pages/api/gitlab/refresh.ts | 40 ++++++------- .../src/pages/deployments/[dseq]/index.tsx | 24 ++++---- .../src/services/auth/bitbucket.service.ts | 59 +++++++++++++++++++ .../src/services/auth/github.service.ts | 39 ++++++++++++ .../src/services/auth/gitlab.service.ts | 55 +++++++++++++++++ .../deploy-web/src/store/remoteDeployStore.ts | 8 +-- 20 files changed, 310 insertions(+), 206 deletions(-) delete mode 100644 apps/deploy-web/src/hooks/useWhenNot.ts create mode 100644 apps/deploy-web/src/services/auth/bitbucket.service.ts create mode 100644 apps/deploy-web/src/services/auth/github.service.ts create mode 100644 apps/deploy-web/src/services/auth/gitlab.service.ts diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index 8bede4881..b9f3e6fef 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -5,7 +5,7 @@ import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } f 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"; @@ -31,8 +31,9 @@ import { DeploymentSubHeader } from "./DeploymentSubHeader"; import { LeaseRow } from "./LeaseRow"; import { ManifestUpdate } from "./ManifestUpdate"; -export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) { +export function DeploymentDetail() { const router = useRouter(); + const dseq = (useParams()?.dseq as string) ?? ""; const [activeTab, setActiveTab] = useState("LEASES"); const [editedManifest, setEditedManifest] = useState(null); const [deploymentVersion, setDeploymentVersion] = useState(null); @@ -41,7 +42,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin const { isSettingsInit } = useSettings(); const [leaseRefs, setLeaseRefs] = useState>([]); const [deploymentManifest, setDeploymentManifest] = useState(null); - const remoteDeploy: boolean = editedManifest && isRedeployImage(editedManifest) ? true : false; + const remoteDeploy: boolean = !!editedManifest && isRedeployImage(editedManifest); const repo: string | null = remoteDeploy ? getRepoUrl(editedManifest) : null; const { @@ -108,7 +109,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin const init = async () => { const localDeploymentData = getDeploymentLocalData(deployment?.dseq || ""); - if (localDeploymentData && localDeploymentData.manifest) { + if (localDeploymentData?.manifest) { setShowOutsideDeploymentMessage(false); setEditedManifest(localDeploymentData?.manifest); const yamlVersion = yaml.load(localDeploymentData?.manifest); diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx index 12ecbf0d2..49128c862 100644 --- a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx +++ b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useState } from "react"; +import { Dispatch, useEffect, useState } from "react"; import { Alert, Button, CustomTooltip, Snackbar, Spinner } from "@akashnetwork/ui/components"; import { InfoCircle, WarningCircle } from "iconoir-react"; import yaml from "js-yaml"; @@ -34,9 +34,9 @@ type Props = { showOutsideDeploymentMessage: boolean; editedManifest: string; deploymentVersion: string | null; - setDeploymentVersion: (value: React.SetStateAction) => void; - setEditedManifest: (value: React.SetStateAction) => void; - setShowOutsideDeploymentMessage: (value: React.SetStateAction) => void; + setDeploymentVersion: Dispatch>; + setEditedManifest: Dispatch>; + setShowOutsideDeploymentMessage: Dispatch>; }; export const ManifestUpdate: React.FunctionComponent = ({ diff --git a/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx index cf1db56f7..69afc5896 100644 --- a/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx +++ b/apps/deploy-web/src/components/remote-deploy/AccountDropdown.tsx @@ -14,7 +14,7 @@ import { CoinsSwap, LogOut, User } from "iconoir-react"; import { useAtom } from "jotai"; import { ChevronDown } from "lucide-react"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { BitProfile, GitHubProfile, GitLabProfile } from "@src/types/remoteProfile"; const AccountDropDown = ({ @@ -26,7 +26,7 @@ const AccountDropDown = ({ userProfileBit?: BitProfile; userProfileGitLab?: GitLabProfile; }) => { - const [token, setToken] = useAtom(remoteDeployStore.tokens); + const [token, setToken] = useAtom(tokens); return ( diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index ff4d0c69e..e0d353f4c 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -4,8 +4,8 @@ import { Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from "@akas import { Bitbucket, Github as GitIcon, GitlabFull } from "iconoir-react"; import { useAtom } from "jotai"; -import { useWhenNot } from "@src/hooks/useWhenNot"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { useWhen } from "@src/hooks/useWhen"; +import { tokens } from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { handleLogin, handleReLogin, useFetchAccessToken, useUserProfile } from "./api/api"; import { handleLoginBit, useBitFetchAccessToken, useBitUserProfile } from "./api/bitbucket-api"; @@ -34,10 +34,10 @@ const GithubDeploy = ({ deploymentName: string; setIsRepoDataValidated?: Dispatch; }) => { - const [token, setToken] = useAtom(remoteDeployStore.tokens); + const [token, setToken] = useAtom(tokens); const [selectedTab, setSelectedTab] = useState("git"); - const [open, setOpen] = useState(false); + const [hydrated, setHydrated] = useState(false); const { data: userProfile, isLoading: fetchingProfile } = useUserProfile(); const { data: userProfileBit, isLoading: fetchingProfileBit } = useBitUserProfile(); @@ -47,17 +47,18 @@ const GithubDeploy = ({ const { mutate: fetchAccessTokenBit, isLoading: fetchingTokenBit } = useBitFetchAccessToken(); const { mutate: fetchAccessTokenGitLab, isLoading: fetchingTokenGitLab } = useGitLabFetchAccessToken(); - useWhenNot( + useWhen( services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")), () => { setIsRepoDataValidated?.(true); - }, - [], - () => setIsRepoDataValidated?.(false) + } ); + useWhen(!services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")), () => { + setIsRepoDataValidated?.(false); + }); useEffect(() => { - setOpen(true); + setHydrated(true); }, []); useEffect(() => { @@ -65,12 +66,12 @@ const GithubDeploy = ({ const code = url.searchParams.get("code"); - if (code && !token?.access_token && open) { + if (code && !token?.access_token && hydrated) { if (token?.type === "github") fetchAccessToken(code); if (token?.type === "bitbucket") fetchAccessTokenBit(code); if (token?.type === "gitlab") fetchAccessTokenGitLab(code); } - }, [open]); + }, [hydrated]); return ( <> diff --git a/apps/deploy-web/src/components/remote-deploy/Repos.tsx b/apps/deploy-web/src/components/remote-deploy/Repos.tsx index c43bba29c..924e830d9 100644 --- a/apps/deploy-web/src/components/remote-deploy/Repos.tsx +++ b/apps/deploy-web/src/components/remote-deploy/Repos.tsx @@ -25,7 +25,7 @@ import { nanoid } from "nanoid"; import Image from "next/image"; import useRemoteDeployFramework from "@src/hooks/useRemoteDeployFramework"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { IGithubDirectoryItem } from "@src/types/remotedeploy"; import { useSrcFolders } from "./api/api"; @@ -58,7 +58,7 @@ const Repos = ({ }; type?: "github" | "gitlab" | "bitbucket"; }) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); const [search, setSearch] = useState(""); const [filteredRepos, setFilteredRepos] = useState(repos); const [currentAccount, setCurrentAccount] = useState(""); diff --git a/apps/deploy-web/src/components/remote-deploy/api/api.ts b/apps/deploy-web/src/components/remote-deploy/api/api.ts index 677b02790..61effa327 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/api.ts @@ -3,7 +3,7 @@ import axios, { AxiosError } from "axios"; import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { GitCommit } from "@src/types/remoteCommits"; import { GithubRepository, IGithubDirectoryItem, PackageJson } from "@src/types/remotedeploy"; import { GitHubProfile } from "@src/types/remoteProfile"; @@ -28,7 +28,7 @@ const axiosInstance = axios.create({ }); export const useUserProfile = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["userProfile", token?.access_token], queryFn: async () => { @@ -44,7 +44,7 @@ export const useUserProfile = () => { }; export const useRepos = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["repos", token?.access_token], queryFn: async () => { @@ -70,7 +70,7 @@ export const useRepos = () => { }; export const useFetchAccessToken = () => { - const [, setToken] = useAtom(remoteDeployStore.tokens); + const [, setToken] = useAtom(tokens); const pathname = usePathname(); const router = useRouter(); return useMutation({ @@ -93,7 +93,7 @@ export const useFetchAccessToken = () => { }; export const useBranches = (repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["branches", repo, token?.access_token], @@ -111,7 +111,7 @@ export const useBranches = (repo?: string) => { }; export const useCommits = (repo: string, branch: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["commits", repo, branch, token?.access_token, repo, branch], queryFn: async () => { @@ -128,7 +128,7 @@ export const useCommits = (repo: string, branch: string) => { }; export const usePackageJson = (onSettled: (data: PackageJson) => void, repo?: string, subFolder?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["packageJson", repo, subFolder], queryFn: async () => { @@ -149,7 +149,7 @@ export const usePackageJson = (onSettled: (data: PackageJson) => void, repo?: st }); }; export const useSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["srcFolders", repo], queryFn: async () => { diff --git a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts index ae00c9234..c30af32cf 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/bitbucket-api.ts @@ -3,7 +3,7 @@ import axios, { AxiosError } from "axios"; import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { BitBucketCommit } from "@src/types/remoteCommits"; import { IGithubDirectoryItem, PackageJson } from "@src/types/remotedeploy"; import { BitProfile } from "@src/types/remoteProfile"; @@ -23,7 +23,7 @@ const axiosInstance = axios.create({ }); export const useFetchRefreshBitToken = () => { - const [token, setToken] = useAtom(remoteDeployStore.tokens); + const [token, setToken] = useAtom(tokens); return useMutation({ mutationFn: async () => { @@ -44,7 +44,7 @@ export const useFetchRefreshBitToken = () => { }; export const useBitFetchAccessToken = () => { - const [, setToken] = useAtom(remoteDeployStore.tokens); + const [, setToken] = useAtom(tokens); const pathname = usePathname(); const router = useRouter(); return useMutation({ @@ -68,7 +68,7 @@ export const useBitFetchAccessToken = () => { }; export const useBitUserProfile = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); const { mutate } = useFetchRefreshBitToken(); return useQuery({ queryKey: ["userProfile", token.access_token], @@ -90,7 +90,7 @@ export const useBitUserProfile = () => { }; export const useBitBucketCommits = (repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["commits", repo, token.access_token, repo], queryFn: async () => { @@ -106,7 +106,7 @@ export const useBitBucketCommits = (repo?: string) => { }; export const useWorkspaces = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["workspaces", token.access_token], queryFn: async () => { @@ -124,7 +124,7 @@ export const useWorkspaces = () => { }; export const useBitReposByWorkspace = (workspace: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["repos", token.access_token, workspace], queryFn: async () => { @@ -142,7 +142,7 @@ export const useBitReposByWorkspace = (workspace: string) => { }; export const useBitBranches = (repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["branches", repo], queryFn: async () => { @@ -158,7 +158,7 @@ export const useBitBranches = (repo?: string) => { }; export const useBitPackageJson = (onSettled: (data: PackageJson) => void, repo?: string, branch?: string, subFolder?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["packageJson", repo, branch, subFolder], @@ -178,7 +178,7 @@ export const useBitPackageJson = (onSettled: (data: PackageJson) => void, repo?: }; export const useBitSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string, branch?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["src-folders-bit", repo, branch], diff --git a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts index 9661157f1..52025299d 100644 --- a/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts +++ b/apps/deploy-web/src/components/remote-deploy/api/gitlab-api.ts @@ -3,7 +3,7 @@ import axios, { AxiosError } from "axios"; import { useAtom } from "jotai"; import { usePathname, useRouter } from "next/navigation"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { GitLabCommit } from "@src/types/remoteCommits"; import { IGithubDirectoryItem, PackageJson } from "@src/types/remotedeploy"; import { GitLabProfile } from "@src/types/remoteProfile"; @@ -22,7 +22,7 @@ const axiosInstance = axios.create({ }); export const useGitLabFetchAccessToken = () => { - const [, setToken] = useAtom(remoteDeployStore.tokens); + const [, setToken] = useAtom(tokens); const pathname = usePathname(); const router = useRouter(); return useMutation({ @@ -46,7 +46,7 @@ export const useGitLabFetchAccessToken = () => { }; export const useFetchRefreshGitlabToken = () => { - const [token, setToken] = useAtom(remoteDeployStore.tokens); + const [token, setToken] = useAtom(tokens); return useMutation({ mutationFn: async () => { @@ -67,7 +67,7 @@ export const useFetchRefreshGitlabToken = () => { }; export const useGitLabUserProfile = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); const { mutate } = useFetchRefreshGitlabToken(); @@ -91,7 +91,7 @@ export const useGitLabUserProfile = () => { }; export const useGitLabGroups = () => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["gitlab-repos", token?.access_token], queryFn: async () => { @@ -107,7 +107,7 @@ export const useGitLabGroups = () => { }; export const useGitLabReposByGroup = (group: string | undefined) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["repos", token?.access_token, group], queryFn: async () => { @@ -123,7 +123,7 @@ export const useGitLabReposByGroup = (group: string | undefined) => { }; export const useGitLabBranches = (repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["branches", repo], queryFn: async () => { @@ -139,7 +139,7 @@ export const useGitLabBranches = (repo?: string) => { }; export const useGitLabCommits = (repo?: string, branch?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["commits", repo, branch, token?.access_token, repo, branch], queryFn: async () => { @@ -156,7 +156,7 @@ export const useGitLabCommits = (repo?: string, branch?: string) => { }; export const useGitlabPackageJson = (onSettled: (data: PackageJson) => void, repo?: string, subFolder?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["packageJson-gitlab", repo, subFolder], @@ -179,7 +179,7 @@ export const useGitlabPackageJson = (onSettled: (data: PackageJson) => void, rep }; export const useGitlabSrcFolders = (onSettled: (data: IGithubDirectoryItem[]) => void, repo?: string) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); return useQuery({ queryKey: ["src-folders-gitlab", repo], diff --git a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx index 29b3f4e9c..79d00948b 100644 --- a/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx +++ b/apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx @@ -4,7 +4,7 @@ import { Checkbox, Label, Snackbar } from "@akashnetwork/ui/components"; import { useAtom } from "jotai"; import { useSnackbar } from "notistack"; -import remoteDeployStore from "@src/store/remoteDeployStore"; +import { tokens } from "@src/store/remoteDeployStore"; import { SdlBuilderFormValuesType, ServiceType } from "@src/types"; import { defaultService } from "@src/utils/sdl/data"; import { generateSdl } from "@src/utils/sdl/sdlGenerator"; @@ -19,7 +19,7 @@ import { appendEnv } from "../utils"; import Rollback from "./Rollback"; const RemoteDeployUpdate = ({ sdlString, setEditedManifest }: { sdlString: string; setEditedManifest: Dispatch> }) => { - const [token] = useAtom(remoteDeployStore.tokens); + const [token] = useAtom(tokens); const [, setIsInit] = useState(false); const { enqueueSnackbar } = useSnackbar(); const [, setError] = useState(null); diff --git a/apps/deploy-web/src/hooks/useWhenNot.ts b/apps/deploy-web/src/hooks/useWhenNot.ts deleted file mode 100644 index 4deeacb03..000000000 --- a/apps/deploy-web/src/hooks/useWhenNot.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useEffect } from "react"; - -export function useWhenNot(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]); -} diff --git a/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts b/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts index d505c716d..6de359776 100644 --- a/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts +++ b/apps/deploy-web/src/pages/api/bitbucket/authenticate.ts @@ -1,30 +1,23 @@ -import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; -export default function handler(req, res) { - const tokenUrl = "https://bitbucket.org/site/oauth2/access_token"; - const { code } = req.body; - const params = new URLSearchParams(); - params.append("grant_type", "authorization_code"); - params.append("code", code); - const { NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET } = process.env; - const headers = { - Authorization: `Basic ${Buffer.from(`${NEXT_PUBLIC_BITBUCKET_CLIENT_ID}:${BITBUCKET_CLIENT_SECRET}`).toString("base64")}`, - "Content-Type": "application/x-www-form-urlencoded" - }; +import BitbucketAuth from "@src/services/auth/bitbucket.service"; - if (code) { - axios - .post(tokenUrl, params.toString(), { headers }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - const refresh_token = params.get("refresh_token"); - res.status(200).json({ access_token, refresh_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); +const NEXT_PUBLIC_BITBUCKET_CLIENT_ID: string = process.env.NEXT_PUBLIC_BITBUCKET_CLIENT_ID as string; +const BITBUCKET_CLIENT_SECRET: string = process.env.BITBUCKET_CLIENT_SECRET as string; + +export default async function exchangeBitBucketCodeForTokensHandler(req: NextApiRequest, res: NextApiResponse): Promise { + const { code }: { code: string } = req.body; + + if (!code) { + return res.status(400).send("No authorization code provided"); + } + + const bitbucketAuth = new BitbucketAuth(NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET); + + try { + const { access_token, refresh_token } = await bitbucketAuth.exchangeAuthorizationCodeForTokens(code); + res.status(200).json({ access_token, refresh_token }); + } catch (error) { + res.status(500).send("Something went wrong"); } } diff --git a/apps/deploy-web/src/pages/api/bitbucket/refresh.ts b/apps/deploy-web/src/pages/api/bitbucket/refresh.ts index da5feac33..3d56cb3b7 100644 --- a/apps/deploy-web/src/pages/api/bitbucket/refresh.ts +++ b/apps/deploy-web/src/pages/api/bitbucket/refresh.ts @@ -1,31 +1,23 @@ -import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; -export default function handler(req, res) { - const tokenUrl = "https://bitbucket.org/site/oauth2/access_token"; - const { refreshToken } = req.body; - const params = new URLSearchParams(); - params.append("grant_type", "refresh_token"); - params.append("refresh_token", refreshToken); +import BitbucketAuth from "@src/services/auth/bitbucket.service"; - const { NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET } = process.env; - const headers = { - Authorization: `Basic ${Buffer.from(`${NEXT_PUBLIC_BITBUCKET_CLIENT_ID}:${BITBUCKET_CLIENT_SECRET}`).toString("base64")}`, - "Content-Type": "application/x-www-form-urlencoded" - }; +const NEXT_PUBLIC_BITBUCKET_CLIENT_ID: string = process.env.NEXT_PUBLIC_BITBUCKET_CLIENT_ID as string; +const BITBUCKET_CLIENT_SECRET: string = process.env.BITBUCKET_CLIENT_SECRET as string; - if (refreshToken) { - axios - .post(tokenUrl, params.toString(), { headers }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - const refresh_token = params.get("refresh_token"); - res.status(200).json({ access_token, refresh_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); +export default async function refreshTokensHandler(req: NextApiRequest, res: NextApiResponse): Promise { + const { refreshToken }: { refreshToken: string } = req.body; + + if (!refreshToken) { + return res.status(400).send("No refresh token provided"); + } + + const bitbucketAuth = new BitbucketAuth(NEXT_PUBLIC_BITBUCKET_CLIENT_ID, BITBUCKET_CLIENT_SECRET); + + try { + const { access_token, refresh_token } = await bitbucketAuth.refreshTokensUsingRefreshToken(refreshToken); + res.status(200).json({ access_token, refresh_token }); + } catch (error) { + res.status(500).send("Something went wrong"); } } diff --git a/apps/deploy-web/src/pages/api/github/authenticate.ts b/apps/deploy-web/src/pages/api/github/authenticate.ts index 56dfe73b6..531a05442 100644 --- a/apps/deploy-web/src/pages/api/github/authenticate.ts +++ b/apps/deploy-web/src/pages/api/github/authenticate.ts @@ -1,28 +1,22 @@ -import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; -const githubApi = "https://github.com"; +import GitHubAuth from "@src/services/auth/github.service"; -export default function handler(req, res) { - const { code } = req.body; - const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; +const { NEXT_PUBLIC_GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; - if (code) { - axios - .post(`${githubApi}/login/oauth/access_token`, { - client_id: NEXT_PUBLIC_GITHUB_CLIENT_ID, - client_secret: GITHUB_CLIENT_SECRET, - code, - redirect_uri: NEXT_PUBLIC_REDIRECT_URI - }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - res.status(200).json({ access_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); +export default async function exchangeGitHubCodeForTokenHandler(req: NextApiRequest, res: NextApiResponse): Promise { + const { code }: { code: string } = req.body; + + if (!code) { + return res.status(400).send("No authorization code provided"); + } + + const gitHubAuth = new GitHubAuth(NEXT_PUBLIC_GITHUB_CLIENT_ID as string, GITHUB_CLIENT_SECRET as string, NEXT_PUBLIC_REDIRECT_URI as string); + + try { + const access_token = await gitHubAuth.exchangeAuthorizationCodeForToken(code); + res.status(200).json({ access_token }); + } catch (error) { + res.status(500).send("Something went wrong"); } } diff --git a/apps/deploy-web/src/pages/api/gitlab/authenticate.ts b/apps/deploy-web/src/pages/api/gitlab/authenticate.ts index 2fec2c546..2a291581e 100644 --- a/apps/deploy-web/src/pages/api/gitlab/authenticate.ts +++ b/apps/deploy-web/src/pages/api/gitlab/authenticate.ts @@ -1,28 +1,22 @@ -import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; -export default function handler(req, res) { - const { code } = req.body; - const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; +import GitlabAuth from "@src/services/auth/gitlab.service"; - if (code) { - axios - .post(`https://gitlab.com/oauth/token`, { - client_id: NEXT_PUBLIC_GITLAB_CLIENT_ID, - client_secret: GITLAB_CLIENT_SECRET, - code, - redirect_uri: NEXT_PUBLIC_REDIRECT_URI, - grant_type: "authorization_code" - }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - const refresh_token = params.get("refresh_token"); - res.status(200).json({ access_token, refresh_token }); - }) - .catch(() => { - res.status(500).send("Something went wrong"); - }); - } else { - res.status(400).send("No code provided"); +const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET, NEXT_PUBLIC_REDIRECT_URI } = process.env; + +export default async function exchangeGitLabCodeForTokensHandler(req: NextApiRequest, res: NextApiResponse): Promise { + const { code }: { code: string } = req.body; + + if (!code) { + return res.status(400).send("No authorization code provided"); + } + + const gitlabAuth = new GitlabAuth(NEXT_PUBLIC_GITLAB_CLIENT_ID as string, GITLAB_CLIENT_SECRET as string, NEXT_PUBLIC_REDIRECT_URI as string); + + try { + const { access_token, refresh_token } = await gitlabAuth.exchangeAuthorizationCodeForTokens(code); + res.status(200).json({ access_token, refresh_token }); + } catch (error) { + res.status(500).send("Something went wrong"); } } diff --git a/apps/deploy-web/src/pages/api/gitlab/refresh.ts b/apps/deploy-web/src/pages/api/gitlab/refresh.ts index 5713aae4a..310a88804 100644 --- a/apps/deploy-web/src/pages/api/gitlab/refresh.ts +++ b/apps/deploy-web/src/pages/api/gitlab/refresh.ts @@ -1,28 +1,22 @@ -import axios from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; -export default function handler(req, res) { - const { refreshToken } = req.body; - const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET } = process.env; +import GitlabAuth from "@src/services/auth/gitlab.service"; - if (refreshToken) { - axios - .post(`https://gitlab.com/oauth/token`, { - client_id: NEXT_PUBLIC_GITLAB_CLIENT_ID, - client_secret: GITLAB_CLIENT_SECRET, - refresh_token: refreshToken, +const { NEXT_PUBLIC_GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET } = process.env; - grant_type: "refresh_token" - }) - .then(response => { - const params = new URLSearchParams(response.data); - const access_token = params.get("access_token"); - const refresh_token = params.get("refresh_token"); - res.status(200).json({ access_token, refresh_token }); - }) - .catch(err => { - res.status(500).send(err); - }); - } else { - res.status(400).send("No code provided"); +export default async function refreshGitLabTokensHandler(req: NextApiRequest, res: NextApiResponse): Promise { + const { refreshToken }: { refreshToken: string } = req.body; + + if (!refreshToken) { + return res.status(400).send("No refresh token provided"); + } + + const gitlabAuth = new GitlabAuth(NEXT_PUBLIC_GITLAB_CLIENT_ID as string, GITLAB_CLIENT_SECRET as string); + + try { + const { access_token, refresh_token } = await gitlabAuth.refreshTokensUsingRefreshToken(refreshToken); + res.status(200).json({ access_token, refresh_token }); + } catch (error) { + res.status(500).send("Something went wrong"); } } diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 29f44ab3a..2b94d5ab9 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -1,19 +1,19 @@ import { DeploymentDetail } from "@src/components/deployments/DeploymentDetail"; -type Props = { - dseq: string; -}; +// type Props = { +// dseq: string; +// }; -const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { - return ; +const DeploymentDetailPage: React.FunctionComponent = () => { + return ; }; export default DeploymentDetailPage; -export async function getServerSideProps({ params }) { - return { - props: { - dseq: params?.dseq - } - }; -} +// export async function getServerSideProps({ params }) { +// return { +// props: { +// dseq: params?.dseq +// } +// }; +// } diff --git a/apps/deploy-web/src/services/auth/bitbucket.service.ts b/apps/deploy-web/src/services/auth/bitbucket.service.ts new file mode 100644 index 000000000..173f06324 --- /dev/null +++ b/apps/deploy-web/src/services/auth/bitbucket.service.ts @@ -0,0 +1,59 @@ +import axios, { AxiosResponse } from "axios"; +import { URLSearchParams } from "url"; + +interface Tokens { + access_token: string; + refresh_token: string; +} + +class BitbucketAuth { + private tokenUrl: string; + private clientId: string; + private clientSecret: string; + + constructor(clientId: string, clientSecret: string) { + this.tokenUrl = "https://bitbucket.org/site/oauth2/access_token"; + this.clientId = clientId; + this.clientSecret = clientSecret; + } + + async exchangeAuthorizationCodeForTokens(authorizationCode: string): Promise { + const params = new URLSearchParams(); + params.append("grant_type", "authorization_code"); + params.append("code", authorizationCode); + + const headers = { + Authorization: `Basic ${Buffer.from(`${this.clientId}:${this.clientSecret}`).toString("base64")}`, + "Content-Type": "application/x-www-form-urlencoded" + }; + + try { + const response: AxiosResponse = await axios.post(this.tokenUrl, params.toString(), { headers }); + const { access_token, refresh_token }: Tokens = response.data; + return { access_token, refresh_token }; + } catch (error) { + throw new Error("Failed to exchange authorization code for tokens"); + } + } + + async refreshTokensUsingRefreshToken(refreshToken: string): Promise { + const params = new URLSearchParams(); + params.append("grant_type", "refresh_token"); + params.append("refresh_token", refreshToken); + + const headers = { + Authorization: `Basic ${Buffer.from(`${this.clientId}:${this.clientSecret}`).toString("base64")}`, + "Content-Type": "application/x-www-form-urlencoded" + }; + + try { + const response: AxiosResponse = await axios.post(this.tokenUrl, params.toString(), { headers }); + const { access_token, refresh_token }: Tokens = response.data; + return { access_token, refresh_token }; + } catch (error) { + throw new Error("Failed to refresh tokens using refresh token"); + } + } +} + +export default BitbucketAuth; diff --git a/apps/deploy-web/src/services/auth/github.service.ts b/apps/deploy-web/src/services/auth/github.service.ts new file mode 100644 index 000000000..1d155ec05 --- /dev/null +++ b/apps/deploy-web/src/services/auth/github.service.ts @@ -0,0 +1,39 @@ +import axios, { AxiosResponse } from "axios"; + +class GitHubAuth { + private tokenUrl: string; + private clientId: string; + private clientSecret: string; + private redirectUri: string | undefined; + + constructor(clientId: string, clientSecret: string, redirectUri?: string) { + this.tokenUrl = "https://github.com/login/oauth/access_token"; + this.clientId = clientId; + this.clientSecret = clientSecret; + this.redirectUri = redirectUri; + } + + async exchangeAuthorizationCodeForToken(authorizationCode: string): Promise { + try { + const response: AxiosResponse = await axios.post(this.tokenUrl, { + client_id: this.clientId, + client_secret: this.clientSecret, + code: authorizationCode, + redirect_uri: this.redirectUri + }); + + const params = new URLSearchParams(response.data); + const access_token = params.get("access_token"); + + if (!access_token) { + throw new Error("No access token returned from GitHub"); + } + + return access_token; + } catch (error) { + throw new Error("Failed to exchange authorization code for access token"); + } + } +} + +export default GitHubAuth; diff --git a/apps/deploy-web/src/services/auth/gitlab.service.ts b/apps/deploy-web/src/services/auth/gitlab.service.ts new file mode 100644 index 000000000..66535e0ea --- /dev/null +++ b/apps/deploy-web/src/services/auth/gitlab.service.ts @@ -0,0 +1,55 @@ +import axios, { AxiosResponse } from "axios"; + +interface Tokens { + access_token: string; + refresh_token: string; +} + +class GitlabAuth { + private tokenUrl: string; + private clientId: string; + private clientSecret: string; + private redirectUri: string | undefined; + + constructor(clientId: string, clientSecret: string, redirectUri?: string) { + this.tokenUrl = "https://gitlab.com/oauth/token"; + this.clientId = clientId; + this.clientSecret = clientSecret; + this.redirectUri = redirectUri; + } + + async exchangeAuthorizationCodeForTokens(authorizationCode: string): Promise { + try { + const response: AxiosResponse = await axios.post(this.tokenUrl, { + client_id: this.clientId, + client_secret: this.clientSecret, + code: authorizationCode, + redirect_uri: this.redirectUri, + grant_type: "authorization_code" + }); + + const { access_token, refresh_token }: Tokens = response.data; + return { access_token, refresh_token }; + } catch (error) { + throw new Error("Failed to exchange authorization code for tokens"); + } + } + + async refreshTokensUsingRefreshToken(refreshToken: string): Promise { + try { + const response: AxiosResponse = await axios.post(this.tokenUrl, { + client_id: this.clientId, + client_secret: this.clientSecret, + refresh_token: refreshToken, + grant_type: "refresh_token" + }); + + const { access_token, refresh_token }: Tokens = response.data; + return { access_token, refresh_token }; + } catch (error) { + throw new Error("Failed to refresh tokens using refresh token"); + } + } +} + +export default GitlabAuth; diff --git a/apps/deploy-web/src/store/remoteDeployStore.ts b/apps/deploy-web/src/store/remoteDeployStore.ts index 8c0d56541..eaec6363e 100644 --- a/apps/deploy-web/src/store/remoteDeployStore.ts +++ b/apps/deploy-web/src/store/remoteDeployStore.ts @@ -2,7 +2,7 @@ import { atomWithStorage } from "jotai/utils"; import { OAuth } from "@src/components/remote-deploy/utils"; -const tokens = atomWithStorage<{ +export const tokens = atomWithStorage<{ access_token: string | null; refresh_token: string | null; type: OAuth; @@ -13,9 +13,3 @@ const tokens = atomWithStorage<{ type: "github", alreadyLoggedIn: [] }); - -const remoteDeployStore = { - tokens -}; - -export default remoteDeployStore; From 1a2ab6b941bee3316b9db4a495ba1dbf14a79267 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 13 Sep 2024 20:40:50 +0530 Subject: [PATCH 57/59] fix: vercel deploy --- .../deployments/DeploymentDetail.tsx | 5 ++-- .../src/pages/deployments/[dseq]/index.tsx | 24 +++++++++---------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx index b9f3e6fef..1dbb5c6e6 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx @@ -5,7 +5,7 @@ import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } f import { ArrowLeft } from "iconoir-react"; import yaml from "js-yaml"; import Link from "next/link"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { NextSeo } from "next-seo"; import { event } from "nextjs-google-analytics"; @@ -31,9 +31,8 @@ import { DeploymentSubHeader } from "./DeploymentSubHeader"; import { LeaseRow } from "./LeaseRow"; import { ManifestUpdate } from "./ManifestUpdate"; -export function DeploymentDetail() { +export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) { const router = useRouter(); - const dseq = (useParams()?.dseq as string) ?? ""; const [activeTab, setActiveTab] = useState("LEASES"); const [editedManifest, setEditedManifest] = useState(null); const [deploymentVersion, setDeploymentVersion] = useState(null); diff --git a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx index 2b94d5ab9..29f44ab3a 100644 --- a/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx +++ b/apps/deploy-web/src/pages/deployments/[dseq]/index.tsx @@ -1,19 +1,19 @@ import { DeploymentDetail } from "@src/components/deployments/DeploymentDetail"; -// type Props = { -// dseq: string; -// }; +type Props = { + dseq: string; +}; -const DeploymentDetailPage: React.FunctionComponent = () => { - return ; +const DeploymentDetailPage: React.FunctionComponent = ({ dseq }) => { + return ; }; export default DeploymentDetailPage; -// export async function getServerSideProps({ params }) { -// return { -// props: { -// dseq: params?.dseq -// } -// }; -// } +export async function getServerSideProps({ params }) { + return { + props: { + dseq: params?.dseq + } + }; +} From dfb43676f158061dff63d8e170a6a0d7828473ef Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Mon, 16 Sep 2024 22:36:43 +0530 Subject: [PATCH 58/59] fix: fetch deploy.yml from awesome akash --- .../components/new-deployment/NewDeploymentContainer.tsx | 3 --- .../src/components/new-deployment/TemplateList.tsx | 8 +++++--- .../src/components/remote-deploy/GithubDeploy.tsx | 3 +++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx index 005dedffb..8f68bad2c 100644 --- a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx +++ b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx @@ -69,9 +69,6 @@ export const NewDeploymentContainer: FC = () => { }) ); } - const githubTemplate = hardcodedTemplates.find(t => t.title === "GitHub"); - setSelectedTemplate(githubTemplate as TemplateCreation); - setEditedManifest(githubTemplate?.content as string); } setGithub(true); diff --git a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx index 8661706e5..1b35c2a28 100644 --- a/apps/deploy-web/src/components/new-deployment/TemplateList.tsx +++ b/apps/deploy-web/src/components/new-deployment/TemplateList.tsx @@ -1,8 +1,7 @@ "use client"; import React, { Dispatch, useEffect, useState } from "react"; import { Button, buttonVariants } from "@akashnetwork/ui/components"; -import { ArrowRight, Cpu, Linux, Rocket, Wrench } from "iconoir-react"; -import { NavArrowLeft } from "iconoir-react"; +import { ArrowRight, Cpu, Linux, NavArrowLeft, Rocket, Wrench } from "iconoir-react"; import { useAtom } from "jotai"; import Link from "next/link"; import { useRouter } from "next/navigation"; @@ -43,8 +42,11 @@ export const TemplateList: React.FunctionComponent = ({ setGithub }) => { const previousRoute = usePreviousRoute(); const handleGithubTemplate = async () => { setGithub(true); - router.push(UrlService.newDeployment({ step: RouteStep.editDeployment, type: "github" })); + router.push( + UrlService.newDeployment({ step: RouteStep.editDeployment, type: "github", templateId: "akash-network-awesome-akash-automatic-deployment-CICD-template" }) + ); }; + useEffect(() => { if (templates) { const _previewTemplates = previewTemplateIds.map(x => templates.find(y => x === y.id)).filter(x => !!x); diff --git a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx index e0d353f4c..f77fff750 100644 --- a/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx +++ b/apps/deploy-web/src/components/remote-deploy/GithubDeploy.tsx @@ -53,6 +53,9 @@ const GithubDeploy = ({ setIsRepoDataValidated?.(true); } ); + useWhen(services?.[0]?.env?.find(e => e.key === "REPO_URL")?.value === "https://github.com/onwidget/astrowind", () => { + setValue("services.0.env", []); + }); useWhen(!services?.[0]?.env?.find(e => e.key === "REPO_URL" && services?.[0]?.env?.find(e => e.key === "BRANCH_NAME")), () => { setIsRepoDataValidated?.(false); }); From 368b22af178c43ba3d210a56a86afe43cf5bbac6 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 20 Sep 2024 23:47:37 +0530 Subject: [PATCH 59/59] build(deps): update browser-env.config.ts, env-config.schema.ts and package-lock.json --- apps/deploy-web/src/config/browser-env.config.ts | 6 +++++- apps/deploy-web/src/config/env-config.schema.ts | 11 +++++++++-- package-lock.json | 2 +- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/apps/deploy-web/src/config/browser-env.config.ts b/apps/deploy-web/src/config/browser-env.config.ts index b3efd136e..bb621a3c4 100644 --- a/apps/deploy-web/src/config/browser-env.config.ts +++ b/apps/deploy-web/src/config/browser-env.config.ts @@ -14,5 +14,9 @@ export const browserEnvConfig = validateStaticEnvVars({ NEXT_PUBLIC_NODE_ENV: process.env.NEXT_PUBLIC_NODE_ENV, NEXT_PUBLIC_BASE_API_MAINNET_URL: process.env.NEXT_PUBLIC_BASE_API_MAINNET_URL, NEXT_PUBLIC_BASE_API_TESTNET_URL: process.env.NEXT_PUBLIC_BASE_API_TESTNET_URL, - NEXT_PUBLIC_BASE_API_SANDBOX_URL: process.env.NEXT_PUBLIC_BASE_API_SANDBOX_URL + NEXT_PUBLIC_BASE_API_SANDBOX_URL: process.env.NEXT_PUBLIC_BASE_API_SANDBOX_URL, + NEXT_PUBLIC_REDIRECT_URI: process.env.NEXT_PUBLIC_REDIRECT_URI, + NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL: process.env.NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL, + NEXT_PUBLIC_BITBUCKET_CLIENT_ID: process.env.NEXT_PUBLIC_BITBUCKET_CLIENT_ID, + NEXT_PUBLIC_GITLAB_CLIENT_ID: process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID }); diff --git a/apps/deploy-web/src/config/env-config.schema.ts b/apps/deploy-web/src/config/env-config.schema.ts index a7338a3c2..597d2f73f 100644 --- a/apps/deploy-web/src/config/env-config.schema.ts +++ b/apps/deploy-web/src/config/env-config.schema.ts @@ -18,7 +18,11 @@ export const browserEnvSchema = z.object({ NEXT_PUBLIC_BASE_API_MAINNET_URL: z.string().url(), NEXT_PUBLIC_BASE_API_TESTNET_URL: z.string().url(), NEXT_PUBLIC_BASE_API_SANDBOX_URL: z.string().url(), - NEXT_PUBLIC_GA_MEASUREMENT_ID: z.string().optional() + NEXT_PUBLIC_GA_MEASUREMENT_ID: z.string().optional(), + NEXT_PUBLIC_REDIRECT_URI: z.string().url(), + NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL: z.string().url(), + NEXT_PUBLIC_BITBUCKET_CLIENT_ID: z.string().optional(), + NEXT_PUBLIC_GITLAB_CLIENT_ID: z.string().optional() }); export const serverEnvSchema = browserEnvSchema.extend({ @@ -32,7 +36,10 @@ export const serverEnvSchema = browserEnvSchema.extend({ AUTH0_SCOPE: z.string(), BASE_API_MAINNET_URL: z.string().url(), BASE_API_TESTNET_URL: z.string().url(), - BASE_API_SANDBOX_URL: z.string().url() + BASE_API_SANDBOX_URL: z.string().url(), + GITHUB_CLIENT_SECRET: z.string(), + BITBUCKET_CLIENT_SECRET: z.string(), + GITLAB_CLIENT_SECRET: z.string() }); export type BrowserEnvConfig = z.infer; diff --git a/package-lock.json b/package-lock.json index c5e6da37a..ddf9d032d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ }, "apps/api": { "name": "console-api", - "version": "2.23.1", + "version": "2.23.2", "license": "Apache-2.0", "dependencies": { "@akashnetwork/akash-api": "^1.3.0",