awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 06:35:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Format entire frontend properly

Browse Source
This commit is contained in:
Daniel Hougaard
2024-03-18 16:00:03 +01:00
parent 1ede551c3e
commit 9002e6cb33
230 changed files with 2752 additions and 2941 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
+71 -76
View File
@@ -1,92 +1,87 @@
import { useState } from "react";
import { useRouter } from "next/router";
import {
useSaveIntegrationAccessToken
} from "@app/hooks/api";
import { useSaveIntegrationAccessToken } from "@app/hooks/api";
import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
export default function CloudflarePagesIntegrationPage() {
const router = useRouter();
const { mutateAsync } = useSaveIntegrationAccessToken();
const router = useRouter();
const { mutateAsync } = useSaveIntegrationAccessToken();
const [accessKey, setAccessKey] = useState("");
const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
const [accountId, setAccountId] = useState("");
const [accountIdErrorText, setAccountIdErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [accessKey, setAccessKey] = useState("");
const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
const [accountId, setAccountId] = useState("");
const [accountIdErrorText, setAccountIdErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleButtonClick = async () => {
try {
setAccessKeyErrorText("");
setAccountIdErrorText("");
if (accessKey.length === 0 || accountId.length === 0) {
if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
return;
}
const handleButtonClick = async () => {
try {
setAccessKeyErrorText("");
setAccountIdErrorText("");
if (accessKey.length === 0 || accountId.length === 0) {
if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
return;
}
setIsLoading(true);
setIsLoading(true);
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id"),
integration: "cloudflare-pages",
accessId: accountId,
accessToken: accessKey
});
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id"),
integration: "cloudflare-pages",
accessId: accountId,
accessToken: accessKey
});
setAccessKey("");
setAccountId("");
setIsLoading(false);
setAccessKey("");
setAccountId("");
setIsLoading(false);
router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
} catch (err) {
console.error(err);
}
router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
} catch (err) {
console.error(err);
}
};
return (
<div className="flex h-full w-full items-center justify-center">
<Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
<CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Cloudflare Pages Integration</CardTitle>
<FormControl
label="Cloudflare Pages API token"
errorText={accessKeyErrorText}
isError={accessKeyErrorText !== "" ?? false}
className="mx-6"
>
<Input
placeholder=""
value={accessKey}
onChange={(e) => setAccessKey(e.target.value)}
/>
</FormControl>
<FormControl
label="Cloudflare Pages Account ID"
errorText={accountIdErrorText}
isError={accountIdErrorText !== "" ?? false}
className="mx-6"
>
<Input
placeholder=""
value={accountId}
onChange={(e) => setAccountId(e.target.value)}
/>
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min"
isFullWidth={false}
isLoading={isLoading}
>
Connect to Cloudflare Pages
</Button>
</Card>
</div>
);
return (
<div className="flex h-full w-full items-center justify-center">
<Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
<CardTitle
className="px-6 text-left"
subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
>
Cloudflare Pages Integration
</CardTitle>
<FormControl
label="Cloudflare Pages API token"
errorText={accessKeyErrorText}
isError={accessKeyErrorText !== "" ?? false}
className="mx-6"
>
<Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
</FormControl>
<FormControl
label="Cloudflare Pages Account ID"
errorText={accountIdErrorText}
isError={accountIdErrorText !== "" ?? false}
className="mx-6"
>
<Input placeholder="" value={accountId} onChange={(e) => setAccountId(e.target.value)} />
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min"
isFullWidth={false}
isLoading={isLoading}
>
Connect to Cloudflare Pages
</Button>
</Card>
</div>
);
}
CloudflarePagesIntegrationPage.requireAuth = true;
CloudflarePagesIntegrationPage.requireAuth = true;
frontend/src/pages/integrations/cloudflare-workers/create.tsx
+9 -1
View File
@@ -6,7 +6,15 @@ import queryString from "query-string";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
import { Button, Card, CardTitle, FormControl, Input, Select, SelectItem } from "../../../components/v2";
import {
Button,
Card,
CardTitle,
FormControl,
Input,
Select,
SelectItem
} from "../../../components/v2";
import {
useGetIntegrationAuthApps,
useGetIntegrationAuthById
frontend/src/pages/integrations/heroku/create.tsx
+30 -39
View File
@@ -4,11 +4,11 @@ import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import {
faArrowUpRightFromSquare,
faBookOpen,
faBugs,
// faCircleInfo
import {
faArrowUpRightFromSquare,
faBookOpen,
faBugs
// faCircleInfo
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup";
@@ -34,13 +34,16 @@ import {
useGetIntegrationAuthApps,
useGetIntegrationAuthById
} from "../../../hooks/api/integrationAuth";
import {
// useCreateWsEnvironment,
useGetWorkspaceById
import {
// useCreateWsEnvironment,
useGetWorkspaceById
} from "../../../hooks/api/workspace";
const initialSyncBehaviors = [
{ label: "No Import - Overwrite all values in Heroku", value: IntegrationSyncBehavior.OVERWRITE_TARGET },
{
label: "No Import - Overwrite all values in Heroku",
value: IntegrationSyncBehavior.OVERWRITE_TARGET
},
{ label: "Import - Prefer values from Heroku", value: IntegrationSyncBehavior.PREFER_TARGET },
{ label: "Import - Prefer values from Infisical", value: IntegrationSyncBehavior.PREFER_SOURCE }
];
@@ -51,7 +54,10 @@ const schema = yup.object({
targetApp: yup.string().required("Heroku app is required"),
initialSyncBehavior: yup
.string()
.oneOf(initialSyncBehaviors.map((b) => b.value), "Invalid initial sync behavior")
.oneOf(
initialSyncBehaviors.map((b) => b.value),
"Invalid initial sync behavior"
)
.required("Initial sync behavior is required")
});
@@ -59,7 +65,7 @@ type FormData = yup.InferType<typeof schema>;
export default function HerokuCreateIntegrationPage() {
const router = useRouter();
const { control, handleSubmit, setValue, watch } = useForm<FormData>({
resolver: yupResolver(schema),
defaultValues: {
@@ -70,7 +76,6 @@ export default function HerokuCreateIntegrationPage() {
const selectedSourceEnvironment = watch("selectedSourceEnvironment");
const { mutateAsync } = useCreateIntegration();
// const { mutateAsync: mutateAsyncEnv } = useCreateWsEnvironment();
@@ -78,19 +83,20 @@ export default function HerokuCreateIntegrationPage() {
const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
integrationAuthId: (integrationAuthId as string) ?? ""
});
const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } =
useGetIntegrationAuthApps({
integrationAuthId: (integrationAuthId as string) ?? ""
});
// const { data: integrationAuthPipelineCouplings } = useGetIntegrationAuthHerokuPipelines({
// integrationAuthId: (integrationAuthId as string) ?? ""
// });
// const [uniquePipelines, setUniquePipelines] = useState<Pipeline[]>();
// const [selectedPipeline, setSelectedPipeline] = useState("");
// const [selectedPipelineApps, setSelectedPipelineApps] = useState<App[]>();
// const [integrationType, setIntegrationType] = useState("App");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
@@ -110,7 +116,7 @@ export default function HerokuCreateIntegrationPage() {
// }))
// .map((obj) => JSON.stringify(obj))
// )).map((str) => JSON.parse(str)) as { pipelineId: string; name: string }[]
// [... (new Set())]
// setUniquePipelines(uniquePipelinesConst);
// if (uniquePipelinesConst) {
@@ -181,11 +187,7 @@ export default function HerokuCreateIntegrationPage() {
// }
// };
const onFormSubmit = async ({
secretPath,
targetApp,
initialSyncBehavior,
}: FormData) => {
const onFormSubmit = async ({ secretPath, targetApp, initialSyncBehavior }: FormData) => {
try {
if (!integrationAuth?.id) return;
@@ -207,13 +209,10 @@ export default function HerokuCreateIntegrationPage() {
} catch (err) {
console.error(err);
}
}
};
return integrationAuth &&
workspace &&
selectedSourceEnvironment &&
integrationAuthApps ? (
<div className="flex flex-col h-full w-full items-center justify-center">
return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps ? (
<div className="flex h-full w-full flex-col items-center justify-center">
<Head>
<title>Set Up Heroku Integration</title>
<link rel="icon" href="/infisical.ico" />
@@ -280,11 +279,7 @@ export default function HerokuCreateIntegrationPage() {
defaultValue=""
name="secretPath"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Secrets Path"
isError={Boolean(error)}
errorText={error?.message}
>
<FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
<Input {...field} placeholder="/" />
</FormControl>
)}
@@ -294,11 +289,7 @@ export default function HerokuCreateIntegrationPage() {
name="targetApp"
render={({ field: { onChange, ...field }, fieldState: { error } }) => {
return (
<FormControl
label="Heroku App"
errorText={error?.message}
isError={Boolean(error)}
>
<FormControl label="Heroku App" errorText={error?.message} isError={Boolean(error)}>
<Select
{...field}
onValueChange={(e) => {
frontend/src/pages/integrations/railway/create.tsx
+11 -9
View File
@@ -114,7 +114,9 @@ export default function RailwayCreateIntegrationPage() {
}
};
const filteredTargetServices = targetServices ? [ { name: "", serviceId: "none" }, ...targetServices ] : [ { name: "", serviceId: "none" } ];
const filteredTargetServices = targetServices
? [{ name: "", serviceId: "none" }, ...targetServices]
: [{ name: "", serviceId: "none" }];
return workspace &&
selectedSourceEnvironment &&
@@ -201,14 +203,14 @@ export default function RailwayCreateIntegrationPage() {
className="w-full border border-mineshaft-500"
isDisabled={targetServices.length === 0}
>
{filteredTargetServices.map((targetService) => (
<SelectItem
value={targetService.serviceId as string}
key={`target-service-${targetService.serviceId as string}`}
>
{targetService.name}
</SelectItem>
))}
{filteredTargetServices.map((targetService) => (
<SelectItem
value={targetService.serviceId as string}
key={`target-service-${targetService.serviceId as string}`}
>
{targetService.name}
</SelectItem>
))}
</Select>
</FormControl>
<Button
frontend/src/pages/integrations/render/create.tsx
+8 -19
View File
@@ -45,7 +45,7 @@ type FormData = yup.InferType<typeof schema>;
export default function RenderCreateIntegrationPage() {
const router = useRouter();
const { mutateAsync } = useCreateIntegration();
const { control, handleSubmit, setValue, watch } = useForm<FormData>({
resolver: yupResolver(schema),
defaultValues: {
@@ -84,12 +84,8 @@ export default function RenderCreateIntegrationPage() {
}
}
}, [integrationAuthApps]);
const onFormSubmit = async ({
secretPath,
targetAppId,
shouldAutoRedeploy
}: FormData) => {
const onFormSubmit = async ({ secretPath, targetAppId, shouldAutoRedeploy }: FormData) => {
try {
if (!integrationAuth?.id) return;
@@ -115,13 +111,10 @@ export default function RenderCreateIntegrationPage() {
} catch (err) {
console.error(err);
}
}
};
return integrationAuth &&
workspace &&
selectedSourceEnvironment &&
integrationAuthApps ? (
<form
return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps ? (
<form
onSubmit={handleSubmit(onFormSubmit)}
className="flex h-full w-full flex-col items-center justify-center"
>
@@ -191,11 +184,7 @@ export default function RenderCreateIntegrationPage() {
defaultValue=""
name="secretPath"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Secrets Path"
isError={Boolean(error)}
errorText={error?.message}
>
<FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
<Input {...field} placeholder="/" />
</FormControl>
)}
@@ -256,7 +245,7 @@ export default function RenderCreateIntegrationPage() {
<Button
colorSchema="primary"
variant="outline_bg"
className="mb-8 ml-auto mr-6 w-min mt-4"
className="mb-8 ml-auto mr-6 mt-4 w-min"
size="sm"
type="submit"
isLoading={isLoading}