mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-15 14:27:23 +00:00
refactor(ui): changed frontend to normal i18n without SSR
This commit is contained in:
akhilmhdh
@@ -1,75 +1,64 @@
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
FormControl,
|
||||
Input,
|
||||
} from '../../../components/v2';
|
||||
import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
|
||||
import { Button, Card, CardTitle, FormControl, Input } from '../../../components/v2';
|
||||
import saveIntegrationAccessToken from '../../api/integrations/saveIntegrationAccessToken';
|
||||
|
||||
export default function AWSParameterStoreAuthorizeIntegrationPage() {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [accessKey, setAccessKey] = useState('');
|
||||
const [accessKeyErrorText, setAccessKeyErrorText] = useState('');
|
||||
const [accessSecretKey, setAccessSecretKey] = useState('');
|
||||
const [accessSecretKeyErrorText, setAccessSecretKeyErrorText] = useState('');
|
||||
|
||||
const handleButtonClick = async () => {
|
||||
try {
|
||||
setAccessKeyErrorText('');
|
||||
setAccessSecretKeyErrorText('');
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
if (accessKey.length === 0) {
|
||||
setAccessKeyErrorText('Access key cannot be blank');
|
||||
return;
|
||||
}
|
||||
const [accessKey, setAccessKey] = useState('');
|
||||
const [accessKeyErrorText, setAccessKeyErrorText] = useState('');
|
||||
const [accessSecretKey, setAccessSecretKey] = useState('');
|
||||
const [accessSecretKeyErrorText, setAccessSecretKeyErrorText] = useState('');
|
||||
|
||||
if (accessSecretKey.length === 0) {
|
||||
setAccessSecretKeyErrorText('Secret access key cannot be blank');
|
||||
return;
|
||||
}
|
||||
const handleButtonClick = async () => {
|
||||
try {
|
||||
setAccessKeyErrorText('');
|
||||
setAccessSecretKeyErrorText('');
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const integrationAuth = await saveIntegrationAccessToken({
|
||||
workspaceId: localStorage.getItem('projectData.id'),
|
||||
integration: 'aws-parameter-store',
|
||||
accessId: accessKey,
|
||||
accessToken: accessSecretKey
|
||||
});
|
||||
|
||||
setAccessKey('');
|
||||
setAccessSecretKey('');
|
||||
setIsLoading(false);
|
||||
|
||||
router.push(
|
||||
`/integrations/aws-parameter-store/create?integrationAuthId=${integrationAuth._id}`
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
if (accessKey.length === 0) {
|
||||
setAccessKeyErrorText('Access key cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (accessSecretKey.length === 0) {
|
||||
setAccessSecretKeyErrorText('Secret access key cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const integrationAuth = await saveIntegrationAccessToken({
|
||||
workspaceId: localStorage.getItem('projectData.id'),
|
||||
integration: 'aws-parameter-store',
|
||||
accessId: accessKey,
|
||||
accessToken: accessSecretKey
|
||||
});
|
||||
|
||||
setAccessKey('');
|
||||
setAccessSecretKey('');
|
||||
setIsLoading(false);
|
||||
|
||||
router.push(
|
||||
`/integrations/aws-parameter-store/create?integrationAuthId=${integrationAuth._id}`
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex justify-center items-center">
|
||||
<Card className="max-w-md p-8 rounded-md">
|
||||
<CardTitle className='text-center mb-4'>AWS Parameter Store Integration</CardTitle>
|
||||
<FormControl
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Card className="max-w-md rounded-md p-8">
|
||||
<CardTitle className="mb-4 text-center">AWS Parameter Store Integration</CardTitle>
|
||||
<FormControl
|
||||
label="Access Key ID"
|
||||
errorText={accessKeyErrorText}
|
||||
isError={accessKeyErrorText !== '' ?? false}
|
||||
>
|
||||
<Input
|
||||
placeholder=''
|
||||
value={accessKey}
|
||||
onChange={(e) => setAccessKey(e.target.value)}
|
||||
/>
|
||||
<Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Secret Access Key"
|
||||
@@ -77,24 +66,22 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
|
||||
isError={accessSecretKeyErrorText !== '' ?? false}
|
||||
>
|
||||
<Input
|
||||
placeholder=''
|
||||
placeholder=""
|
||||
value={accessSecretKey}
|
||||
onChange={(e) => setAccessSecretKey(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button
|
||||
onClick={handleButtonClick}
|
||||
color="mineshaft"
|
||||
className='mt-4'
|
||||
isLoading={isLoading}
|
||||
<Button
|
||||
onClick={handleButtonClick}
|
||||
color="mineshaft"
|
||||
className="mt-4"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Connect to AWS Parameter Store
|
||||
Connect to AWS Parameter Store
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
AWSParameterStoreAuthorizeIntegrationPage.requireAuth = true;
|
||||
|
||||
export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
|
||||
@@ -2,148 +2,142 @@ import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import queryString from 'query-string';
|
||||
|
||||
import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
FormControl,
|
||||
Input,
|
||||
Select,
|
||||
SelectItem
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
FormControl,
|
||||
Input,
|
||||
Select,
|
||||
SelectItem
|
||||
} from '../../../components/v2';
|
||||
import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
|
||||
import { useGetWorkspaceById } from '../../../hooks/api/workspace';
|
||||
import createIntegration from "../../api/integrations/createIntegration";
|
||||
import createIntegration from '../../api/integrations/createIntegration';
|
||||
|
||||
const awsRegions = [
|
||||
{ name: 'US East (Ohio)', slug: 'us-east-2' },
|
||||
{ name: 'US East (N. Virginia)', slug: 'us-east-1' },
|
||||
{ name: 'US West (N. California)', slug: 'us-west-1' },
|
||||
{ name: 'US West (Oregon)', slug: 'us-west-2' },
|
||||
{ name: 'Africa (Cape Town)', slug: 'af-south-1' },
|
||||
{ name: 'Asia Pacific (Hong Kong)', slug: 'ap-east-1' },
|
||||
{ name: 'Asia Pacific (Hyderabad)', slug: 'ap-south-2' },
|
||||
{ name: 'Asia Pacific (Jakarta)', slug: 'ap-southeast-3' },
|
||||
{ name: 'Asia Pacific (Melbourne)', slug: 'ap-southeast-4' },
|
||||
{ name: 'Asia Pacific (Mumbai)', slug: 'ap-south-1' },
|
||||
{ name: 'Asia Pacific (Osaka)', slug: 'ap-northeast-3' },
|
||||
{ name: 'Asia Pacific (Seoul)', slug: 'ap-northeast-2' },
|
||||
{ name: 'Asia Pacific (Singapore)', slug: 'ap-southeast-1' },
|
||||
{ name: 'Asia Pacific (Sydney)', slug: 'ap-southeast-2' },
|
||||
{ name: 'Asia Pacific (Tokyo)', slug: 'ap-northeast-1' },
|
||||
{ name: 'Canada (Central)', slug: 'ca-central-1' },
|
||||
{ name: 'Europe (Frankfurt)', slug: 'eu-central-1' },
|
||||
{ name: 'Europe (Ireland)', slug: 'eu-west-1' },
|
||||
{ name: 'Europe (London)', slug: 'eu-west-2' },
|
||||
{ name: 'Europe (Milan)', slug: 'eu-south-1' },
|
||||
{ name: 'Europe (Paris)', slug: 'eu-west-3' },
|
||||
{ name: 'Europe (Spain)', slug: 'eu-south-2' },
|
||||
{ name: 'Europe (Stockholm)', slug: 'eu-north-1' },
|
||||
{ name: 'Europe (Zurich)', slug: 'eu-central-2' },
|
||||
{ name: 'Middle East (Bahrain)', slug: 'me-south-1' },
|
||||
{ name: 'Middle East (UAE)', slug: 'me-central-1' },
|
||||
{ name: 'South America (Sao Paulo)', slug: 'sa-east-1' },
|
||||
{ name: 'AWS GovCloud (US-East)', slug: 'us-gov-east-1' },
|
||||
{ name: 'AWS GovCloud (US-West)', slug: 'us-gov-west-1' },
|
||||
]
|
||||
{ name: 'US East (Ohio)', slug: 'us-east-2' },
|
||||
{ name: 'US East (N. Virginia)', slug: 'us-east-1' },
|
||||
{ name: 'US West (N. California)', slug: 'us-west-1' },
|
||||
{ name: 'US West (Oregon)', slug: 'us-west-2' },
|
||||
{ name: 'Africa (Cape Town)', slug: 'af-south-1' },
|
||||
{ name: 'Asia Pacific (Hong Kong)', slug: 'ap-east-1' },
|
||||
{ name: 'Asia Pacific (Hyderabad)', slug: 'ap-south-2' },
|
||||
{ name: 'Asia Pacific (Jakarta)', slug: 'ap-southeast-3' },
|
||||
{ name: 'Asia Pacific (Melbourne)', slug: 'ap-southeast-4' },
|
||||
{ name: 'Asia Pacific (Mumbai)', slug: 'ap-south-1' },
|
||||
{ name: 'Asia Pacific (Osaka)', slug: 'ap-northeast-3' },
|
||||
{ name: 'Asia Pacific (Seoul)', slug: 'ap-northeast-2' },
|
||||
{ name: 'Asia Pacific (Singapore)', slug: 'ap-southeast-1' },
|
||||
{ name: 'Asia Pacific (Sydney)', slug: 'ap-southeast-2' },
|
||||
{ name: 'Asia Pacific (Tokyo)', slug: 'ap-northeast-1' },
|
||||
{ name: 'Canada (Central)', slug: 'ca-central-1' },
|
||||
{ name: 'Europe (Frankfurt)', slug: 'eu-central-1' },
|
||||
{ name: 'Europe (Ireland)', slug: 'eu-west-1' },
|
||||
{ name: 'Europe (London)', slug: 'eu-west-2' },
|
||||
{ name: 'Europe (Milan)', slug: 'eu-south-1' },
|
||||
{ name: 'Europe (Paris)', slug: 'eu-west-3' },
|
||||
{ name: 'Europe (Spain)', slug: 'eu-south-2' },
|
||||
{ name: 'Europe (Stockholm)', slug: 'eu-north-1' },
|
||||
{ name: 'Europe (Zurich)', slug: 'eu-central-2' },
|
||||
{ name: 'Middle East (Bahrain)', slug: 'me-south-1' },
|
||||
{ name: 'Middle East (UAE)', slug: 'me-central-1' },
|
||||
{ name: 'South America (Sao Paulo)', slug: 'sa-east-1' },
|
||||
{ name: 'AWS GovCloud (US-East)', slug: 'us-gov-east-1' },
|
||||
{ name: 'AWS GovCloud (US-West)', slug: 'us-gov-west-1' }
|
||||
];
|
||||
|
||||
export default function AWSParameterStoreCreateIntegrationPage() {
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
|
||||
|
||||
const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
|
||||
const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
|
||||
|
||||
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
|
||||
const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
|
||||
const [path, setPath] = useState('');
|
||||
const [pathErrorText, setPathErrorText] = useState('');
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace) {
|
||||
setSelectedSourceEnvironment(workspace.environments[0].slug);
|
||||
setSelectedAWSRegion(awsRegions[0].slug);
|
||||
}
|
||||
}, [workspace]);
|
||||
|
||||
const isValidAWSParameterStorePath = (secretPath: string) => {
|
||||
const pattern = /^\/([\w-]+\/)*[\w-]+\/$/;
|
||||
return pattern.test(secretPath) && secretPath.length <= 2048;
|
||||
const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
|
||||
|
||||
const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
|
||||
const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');
|
||||
|
||||
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
|
||||
const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
|
||||
const [path, setPath] = useState('');
|
||||
const [pathErrorText, setPathErrorText] = useState('');
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace) {
|
||||
setSelectedSourceEnvironment(workspace.environments[0].slug);
|
||||
setSelectedAWSRegion(awsRegions[0].slug);
|
||||
}
|
||||
|
||||
const handleButtonClick = async () => {
|
||||
try {
|
||||
|
||||
if (path !== '') {
|
||||
// case: path is not empty
|
||||
if (!isValidAWSParameterStorePath(path)) {
|
||||
// case: path is not valid for aws parameter store
|
||||
setPathErrorText('Path must be a valid path for SSM like /project/env/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [workspace]);
|
||||
|
||||
if (!integrationAuth?._id) return;
|
||||
const isValidAWSParameterStorePath = (secretPath: string) => {
|
||||
const pattern = /^\/([\w-]+\/)*[\w-]+\/$/;
|
||||
return pattern.test(secretPath) && secretPath.length <= 2048;
|
||||
};
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
await createIntegration({
|
||||
integrationAuthId: integrationAuth?._id,
|
||||
isActive: true,
|
||||
app: null,
|
||||
appId: null,
|
||||
sourceEnvironment: selectedSourceEnvironment,
|
||||
targetEnvironment: null,
|
||||
targetEnvironmentId: null,
|
||||
targetService: null,
|
||||
targetServiceId: null,
|
||||
owner: null,
|
||||
path,
|
||||
region: selectedAWSRegion
|
||||
});
|
||||
|
||||
setIsLoading(false);
|
||||
setPathErrorText('');
|
||||
|
||||
router.push(
|
||||
`/integrations/${localStorage.getItem('projectData.id')}`
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const handleButtonClick = async () => {
|
||||
try {
|
||||
if (path !== '') {
|
||||
// case: path is not empty
|
||||
if (!isValidAWSParameterStorePath(path)) {
|
||||
// case: path is not valid for aws parameter store
|
||||
setPathErrorText('Path must be a valid path for SSM like /project/env/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!integrationAuth?._id) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
await createIntegration({
|
||||
integrationAuthId: integrationAuth?._id,
|
||||
isActive: true,
|
||||
app: null,
|
||||
appId: null,
|
||||
sourceEnvironment: selectedSourceEnvironment,
|
||||
targetEnvironment: null,
|
||||
targetEnvironmentId: null,
|
||||
targetService: null,
|
||||
targetServiceId: null,
|
||||
owner: null,
|
||||
path,
|
||||
region: selectedAWSRegion
|
||||
});
|
||||
|
||||
setIsLoading(false);
|
||||
setPathErrorText('');
|
||||
|
||||
router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
return (integrationAuth && workspace && selectedSourceEnvironment) ? (
|
||||
<div className="h-full w-full flex justify-center items-center">
|
||||
<Card className="max-w-md p-8 rounded-md">
|
||||
<CardTitle className='text-center'>AWS Parameter Store Integration</CardTitle>
|
||||
<FormControl
|
||||
label="Project Environment"
|
||||
className='mt-4'
|
||||
>
|
||||
};
|
||||
|
||||
return integrationAuth && workspace && selectedSourceEnvironment ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Card className="max-w-md rounded-md p-8">
|
||||
<CardTitle className="text-center">AWS Parameter Store Integration</CardTitle>
|
||||
<FormControl label="Project Environment" className="mt-4">
|
||||
<Select
|
||||
value={selectedSourceEnvironment}
|
||||
onValueChange={(val) => setSelectedSourceEnvironment(val)}
|
||||
className='w-full border border-mineshaft-500'
|
||||
className="w-full border border-mineshaft-500"
|
||||
>
|
||||
{workspace?.environments.map((sourceEnvironment) => (
|
||||
<SelectItem value={sourceEnvironment.slug} key={`flyio-environment-${sourceEnvironment.slug}`}>
|
||||
<SelectItem
|
||||
value={sourceEnvironment.slug}
|
||||
key={`flyio-environment-${sourceEnvironment.slug}`}
|
||||
>
|
||||
{sourceEnvironment.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="AWS Region"
|
||||
>
|
||||
<FormControl label="AWS Region">
|
||||
<Select
|
||||
value={selectedAWSRegion}
|
||||
onValueChange={(val) => setSelectedAWSRegion(val)}
|
||||
className='w-full border border-mineshaft-500'
|
||||
className="w-full border border-mineshaft-500"
|
||||
>
|
||||
{awsRegions.map((awsRegion) => (
|
||||
<SelectItem value={awsRegion.slug} key={`flyio-environment-${awsRegion.slug}`}>
|
||||
@@ -152,30 +146,28 @@ export default function AWSParameterStoreCreateIntegrationPage() {
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Path"
|
||||
errorText={pathErrorText}
|
||||
isError={pathErrorText !== '' ?? false}
|
||||
>
|
||||
<FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== '' ?? false}>
|
||||
<Input
|
||||
placeholder={`/${workspace.name.toLowerCase().replace(/ /g, "-")}/${selectedSourceEnvironment}/`}
|
||||
placeholder={`/${workspace.name
|
||||
.toLowerCase()
|
||||
.replace(/ /g, '-')}/${selectedSourceEnvironment}/`}
|
||||
value={path}
|
||||
onChange={(e) => setPath(e.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button
|
||||
onClick={handleButtonClick}
|
||||
color="mineshaft"
|
||||
className='mt-4'
|
||||
isLoading={isLoading}
|
||||
<Button
|
||||
onClick={handleButtonClick}
|
||||
color="mineshaft"
|
||||
className="mt-4"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Create Integration
|
||||
Create Integration
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
) : <div />
|
||||
) : (
|
||||
<div />
|
||||
);
|
||||
}
|
||||
|
||||
AWSParameterStoreCreateIntegrationPage.requireAuth = true;
|
||||
|
||||
export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
|
||||
Reference in New Issue
Block a user