deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

Update UI to take environment variables from user (#6)

Browse Source 
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Take environment variables from the user in the `Configure` deployment step

Co-authored-by: Isha Venikar <ishavenikar@Ishas-MacBook-Air.local>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#6
This commit is contained in:
nabarun 2024-10-21 11:05:35 +00:00
parent 5c9c7575f2
commit d486f44cfe
13 changed files with 446 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/backend/src/database.ts
View File

@ -150,6 +150,19 @@ export class Database {
return project;
}
async allProjectsWithoutDeployments(): Promise<Project[]> {
const projectRepository = this.dataSource.getRepository(Project);
const projects = await projectRepository
.createQueryBuilder('project')
.leftJoinAndSelect('project.deployments', 'deployment', 'deployment.deletedAt IS NULL') // Join only non-soft-deleted deployments
.where('deployment.id IS NULL') // Get projects where no deployments are present
.andWhere('project.auctionId IS NOT NULL') // Ensure auctionId is not null
.getMany();
return projects;
}
async getProjectsInOrganization(
userId: string,
organizationSlug: string

10
packages/backend/src/registry.ts
View File

@ -416,14 +416,8 @@ export class Registry {
};
}
async getCompletedAuctionIds(auctionIds: (string | null | undefined)[]): Promise<string[] | null> {
const validAuctionIds = auctionIds.filter((id): id is string => id !== null && id !== undefined);
if (!validAuctionIds.length) {
return null;
}
const auctions = await this.registry.getAuctionsByIds(validAuctionIds);
async getCompletedAuctionIds(auctionIds: string[]): Promise<string[]> {
const auctions = await this.registry.getAuctionsByIds(auctionIds);
const completedAuctions = auctions
.filter((auction: { id: string, status: string }) => auction.status === 'completed')

36
packages/backend/src/resolvers.ts
View File

@ -6,7 +6,7 @@ import { Permission } from './entity/ProjectMember';
import { Domain } from './entity/Domain';
import { Project } from './entity/Project';
import { EnvironmentVariable } from './entity/EnvironmentVariable';
import { AddProjectFromTemplateInput, AuctionParams } from './types';
import { AddProjectFromTemplateInput, AuctionParams, EnvironmentVariables } from './types';
const log = debug('snowball:resolver');
@ -211,8 +211,15 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams
}: { organizationSlug: string; data: AddProjectFromTemplateInput; lrn: string; auctionParams: AuctionParams },
auctionParams,
environmentVariables
}: {
organizationSlug: string;
data: AddProjectFromTemplateInput;
lrn: string;
auctionParams: AuctionParams,
environmentVariables: EnvironmentVariables[];
},
context: any,
) => {
try {
@ -221,7 +228,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams
auctionParams,
environmentVariables
);
} catch (err) {
log(err);
@ -235,12 +243,26 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams
}: { organizationSlug: string; data: DeepPartial<Project>; lrn: string; auctionParams: AuctionParams },
auctionParams,
environmentVariables
}: {
organizationSlug: string;
data: DeepPartial<Project>;
lrn: string;
auctionParams: AuctionParams,
environmentVariables: EnvironmentVariables[];
},
context: any,
) => {
try {
return await service.addProject(context.user, organizationSlug, data, lrn, auctionParams);
return await service.addProject(
context.user,
organizationSlug,
data,
lrn,
auctionParams,
environmentVariables
);
} catch (err) {
log(err);
throw err;

2
packages/backend/src/schema.gql
View File

@ -271,12 +271,14 @@ type Mutation {
data: AddProjectFromTemplateInput
lrn: String
auctionParams: AuctionParams
environmentVariables: [AddEnvironmentVariableInput!]
): Project!
addProject(
organizationSlug: String!
data: AddProjectInput!
lrn: String
auctionParams: AuctionParams
environmentVariables: [AddEnvironmentVariableInput!]
): Project!
updateProject(projectId: String!, data: UpdateProjectInput): Boolean!
redeployToProd(deploymentId: String!): Boolean!

51
packages/backend/src/service.ts
View File

@ -20,6 +20,7 @@ import {
AppDeploymentRecord,
AppDeploymentRemovalRecord,
AuctionParams,
EnvironmentVariables,
GitPushEventPayload,
} from './types';
import { Role } from './entity/UserOrganization';
@ -167,7 +168,7 @@ export class Service {
async updateDeploymentsWithRecordData(
records: AppDeploymentRecord[],
): Promise<void> {
// get and update deployments to be updated using request id
// Fetch the deployments to be updated using deployment requestId
const deployments = await this.db.getDeployments({
where: records.map((record) => ({
applicationDeploymentRequestId: record.attributes.request,
@ -220,10 +221,10 @@ export class Service {
await Promise.all(deploymentUpdatePromises);
// if iscurrent is true for this deployment then update the old ones
// Get deployments that are in production environment
const prodDeployments = Object.values(recordToDeploymentsMap).filter(deployment => deployment.isCurrent);
// Get deployment IDs of deployments that are in production environment
// Set the isCurrent state to false for the old deployments
for (const deployment of prodDeployments) {
const projectDeployments = await this.db.getDeploymentsByProjectId(deployment.projectId);
const oldDeployments = projectDeployments
@ -236,15 +237,6 @@ export class Service {
}
}
// Get old deployments for ApplicationDeploymentRecords
// flter out deps with is current false
// loop over these deps
// get the project
// get all the deployemnts in that proj with the same deployer lrn (query filter not above updated dep)
// set is current to false
await Promise.all(deploymentUpdatePromises);
}
@ -298,25 +290,12 @@ export class Service {
* Calls the createDeploymentFromAuction method for deployments with completed auctions
*/
async checkAuctionStatus(): Promise<void> {
const allProjects = await this.db.getProjects({
where: {
auctionId: Not(IsNull()),
},
relations: ['deployments'],
withDeleted: true,
});
const projects = await this.db.allProjectsWithoutDeployments();
// Should only check on the first deployment
const projects = allProjects.filter(project => {
if (project.deletedAt !== null) return false;
const validAuctionIds = projects.map((project) => project.auctionId!)
.filter((id): id is string => Boolean(id));
const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(validAuctionIds);
return project.deployments.length === 0;
});
const auctionIds = projects.map((project) => project.auctionId);
const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(auctionIds);
if (completedAuctionIds) {
const projectsToBedeployed = projects.filter((project) =>
completedAuctionIds.includes(project.auctionId!)
);
@ -338,7 +317,6 @@ export class Service {
}
}
}
}
this.auctionStatusCheckTimeout = setTimeout(() => {
this.checkAuctionStatus();
@ -785,7 +763,8 @@ export class Service {
organizationSlug: string,
data: AddProjectFromTemplateInput,
lrn?: string,
auctionParams?: AuctionParams
auctionParams?: AuctionParams,
environmentVariables?: EnvironmentVariables[],
): Promise<Project | undefined> {
try {
const octokit = await this.getOctokit(user.id);
@ -816,7 +795,7 @@ export class Service {
repository: gitRepo.data.full_name,
// TODO: Set selected template
template: 'webapp',
}, lrn, auctionParams);
}, lrn, auctionParams, environmentVariables);
if (!project || !project.id) {
throw new Error('Failed to create project from template');
@ -834,7 +813,8 @@ export class Service {
organizationSlug: string,
data: DeepPartial<Project>,
lrn?: string,
auctionParams?: AuctionParams
auctionParams?: AuctionParams,
environmentVariables?: EnvironmentVariables[],
): Promise<Project | undefined> {
const organization = await this.db.getOrganization({
where: {
@ -846,7 +826,10 @@ export class Service {
}
const project = await this.db.addProject(user, organization.id, data);
log(`Project created ${project.id}`);
if (environmentVariables) {
await this.addEnvironmentVariables(project.id, environmentVariables);
}
const octokit = await this.getOctokit(user.id);
const [owner, repo] = project.repository.split('/');

6
packages/backend/src/types.ts
View File

@ -76,3 +76,9 @@ export interface AuctionParams {
maxPrice: string,
numProviders: number,
}
export interface EnvironmentVariables {
environments: string[],
key: string,
value: string,
}

147
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -1,8 +1,9 @@
import { useCallback, useState } from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { useForm, Controller } from 'react-hook-form';
import { FormProvider, FieldValues } from 'react-hook-form';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useMediaQuery } from 'usehooks-ts';
import { AuctionParams } from 'gql-client';
import { AddEnvironmentVariableInput, AuctionParams } from 'gql-client';
import {
ArrowRightCircleFilledIcon,
@ -14,15 +15,20 @@ import { Select, SelectOption } from 'components/shared/Select';
import { Input } from 'components/shared/Input';
import { useToast } from 'components/shared/Toast';
import { useGQLClient } from '../../../context/GQLClientContext';
import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
import { EnvironmentVariablesFormValues } from 'types/types';
type ConfigureFormValues = {
type ConfigureDeploymentFormValues = {
option: string;
lrn?: string;
numProviders?: number;
maxPrice?: string;
};
type ConfigureFormValues = ConfigureDeploymentFormValues & EnvironmentVariablesFormValues;
const Configure = () => {
const [isLoading, setIsLoading] = useState(false);
const [searchParams] = useSearchParams();
const templateId = searchParams.get('templateId');
const queryParams = new URLSearchParams(location.search);
@ -40,19 +46,18 @@ const Configure = () => {
const { toast, dismiss } = useToast();
const client = useGQLClient();
const [isLoading, setIsLoading] = useState(false);
const { handleSubmit, control, watch } = useForm<ConfigureFormValues>({
const methods = useForm<ConfigureFormValues>({
defaultValues: { option: 'LRN' },
});
const selectedOption = watch('option');
const selectedOption = methods.watch('option');
const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isTabletView ? { size: 'lg' as const } : {};
const onSubmit: SubmitHandler<ConfigureFormValues> = useCallback(
async (data) => {
const createProject = async (data: FieldValues, envVariables: AddEnvironmentVariableInput[]): Promise<string> => {
setIsLoading(true);
let projectId: string | null = null;
try {
let lrn: string | undefined;
@ -68,7 +73,6 @@ const Configure = () => {
}
if (templateId) {
// Template-based project creation
const projectData: any = {
templateOwner,
templateRepo,
@ -81,16 +85,11 @@ const Configure = () => {
orgSlug!,
projectData,
lrn,
auctionParams
auctionParams,
envVariables
);
data.option === 'Auction'
? navigate(
`/${orgSlug}/projects/create/success/${addProjectFromTemplate.id}?isAuction=true`,
)
: navigate(
`/${orgSlug}/projects/create/template/deploy?projectId=${addProjectFromTemplate.id}&templateId=${templateId}`
);
projectId = addProjectFromTemplate.id;
} else {
const { addProject } = await client.addProject(
orgSlug!,
@ -101,16 +100,11 @@ const Configure = () => {
template: 'webapp',
},
lrn,
auctionParams
auctionParams,
envVariables
);
data.option === 'Auction'
? navigate(
`/${orgSlug}/projects/create/success/${addProject.id}?isAuction=true`
)
: navigate(
`/${orgSlug}/projects/create/deploy?projectId=${addProject.id}`
);
projectId = addProject.id;
}
} catch (error) {
console.error('Error creating project:', error);
@ -123,13 +117,76 @@ const Configure = () => {
} finally {
setIsLoading(false);
}
if (projectId) {
return projectId;
} else {
throw new Error('Project creation failed');
}
};
const handleFormSubmit = useCallback(
async (createFormData: FieldValues) => {
const environmentVariables = createFormData.variables.map((variable: any) => {
return {
key: variable.key,
value: variable.value,
environments: Object.entries(createFormData.environment)
.filter(([, value]) => value === true)
.map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)),
};
});
const projectId = await createProject(createFormData, environmentVariables);
const { environmentVariables: isEnvironmentVariablesAdded } =
await client.getEnvironmentVariables(projectId);
if (isEnvironmentVariablesAdded.length > 0) {
toast({
id:
createFormData.variables.length > 1
? 'env_variable_added'
: 'env_variables_added',
title:
createFormData.variables.length > 1
? `${createFormData.variables.length} variables added`
: `Variable added`,
variant: 'success',
onDismiss: dismiss,
});
} else {
toast({
id: 'env_variables_not_added',
title: 'Environment variables not added',
variant: 'error',
onDismiss: dismiss,
});
}
if (templateId) {
createFormData.option === 'Auction'
? navigate(
`/${orgSlug}/projects/create/success/${projectId}?isAuction=true`,
)
: navigate(
`/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`
);
} else {
createFormData.option === 'Auction'
? navigate(
`/${orgSlug}/projects/create/success/${projectId}?isAuction=true`
)
: navigate(
`/${orgSlug}/projects/create/deploy?projectId=${projectId}`
);
}
},
[client, isPrivate, templateId, navigate, dismiss, toast]
[client, createProject, dismiss, toast]
);
return (
<div className="space-y-7">
<div className="flex justify-between">
<div className="space-y-7 px-4 py-6">
<div className="flex justify-between mb-6">
<div className="space-y-1.5">
<Heading as="h4" className="md:text-lg font-medium">
Configure deployment
@ -142,12 +199,13 @@ const Configure = () => {
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-4 lg:gap-7 w-full">
<div className="flex flex-col justify-start gap-3">
<div className="flex flex-col gap-6 lg:gap-8 w-full">
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(handleFormSubmit)}>
<div className="flex flex-col justify-start gap-4 mb-6">
<Controller
name="option"
control={control}
control={methods.control}
render={({ field: { value, onChange } }) => (
<Select
label="Configuration Options"
@ -168,7 +226,7 @@ const Configure = () => {
</div>
{selectedOption === 'LRN' && (
<div className="flex flex-col justify-start gap-3">
<div className="flex flex-col justify-start gap-4 mb-6">
<Heading as="h5" className="text-sm font-sans text-elements-low-em">
The app will be deployed by the configured deployer
</Heading>
@ -177,7 +235,8 @@ const Configure = () => {
</span>
<Controller
name="lrn"
control={control}
control={methods.control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input value={value} onChange={onChange} />
)}
@ -187,7 +246,7 @@ const Configure = () => {
{selectedOption === 'Auction' && (
<>
<div className="flex flex-col justify-start gap-3">
<div className="flex flex-col justify-start gap-4 mb-6">
<Heading as="h5" className="text-sm font-sans text-elements-low-em">
Set the number of deployers and maximum price for each deployment
</Heading>
@ -196,19 +255,21 @@ const Configure = () => {
</span>
<Controller
name="numProviders"
control={control}
control={methods.control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
/>
</div>
<div className="flex flex-col justify-start gap-3">
<div className="flex flex-col justify-start gap-4 mb-6">
<span className="text-sm text-elements-high-em">
Maximum Price (alnt)
</span>
<Controller
name="maxPrice"
control={control}
control={methods.control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
@ -217,6 +278,13 @@ const Configure = () => {
</>
)}
<Heading as="h4" className="md:text-lg font-medium mb-3">
Environment Variables
</Heading>
<div className="p-4 bg-slate-100 rounded-lg mb-6">
<EnvironmentVariablesForm />
</div>
<div>
<Button
{...buttonSize}
@ -233,8 +301,9 @@ const Configure = () => {
{isLoading ? 'Deploying repo' : 'Deploy repo'}
</Button>
</div>
</div>
</form>
</FormProvider>
</div>
</div>
);
};

4
packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
View File

@ -64,9 +64,9 @@ export const RepositoryList = () => {
// Check if selected account is an organization
if (selectedAccount.value === gitUser.login) {
query = query + ` user:${selectedAccount}`;
query = query + ` user:${selectedAccount.value}`;
} else {
query = query + ` org:${selectedAccount}`;
query = query + ` org:${selectedAccount.value}`;
}
const result = await octokit.rest.search.repos({

1
packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
View File

@ -163,6 +163,7 @@ const CreateRepo = () => {
<Controller
name="repoName"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input value={value} onChange={onChange} />
)}

115
packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
View File

@ -1,22 +1,20 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useCallback, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Collapse, Checkbox } from '@snowballtools/material-tailwind-react-fork';
import { Collapse } from '@snowballtools/material-tailwind-react-fork';
import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
import { useGQLClient } from 'context/GQLClientContext';
import { EnvironmentVariablesFormValues } from '../../../../../types';
import HorizontalLine from 'components/HorizontalLine';
import { Heading } from 'components/shared/Heading';
import { Button } from 'components/shared/Button';
// import { Checkbox } from 'components/shared/Checkbox';
import { PlusIcon } from 'components/shared/CustomIcon';
import { InlineNotification } from 'components/shared/InlineNotification';
import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
import { useToast } from 'components/shared/Toast';
import { Environment, EnvironmentVariable } from 'gql-client';
import EnvironmentVariablesForm from './EnvironmentVariablesForm';
import { FieldValues, FormProvider, useForm } from 'react-hook-form';
import { Button } from 'components/shared';
export const EnvironmentVariablesTabPanel = () => {
const { id } = useParams();
@ -27,13 +25,9 @@ export const EnvironmentVariablesTabPanel = () => {
EnvironmentVariable[]
>([]);
const {
handleSubmit,
register,
control,
reset,
formState: { isSubmitSuccessful, errors },
} = useForm<EnvironmentVariablesFormValues>({
const [createNewVariable, setCreateNewVariable] = useState(false);
const methods = useForm<EnvironmentVariablesFormValues>({
defaultValues: {
variables: [{ key: '', value: '' }],
environment: {
@ -43,21 +37,6 @@ export const EnvironmentVariablesTabPanel = () => {
},
},
});
const [createNewVariable, setCreateNewVariable] = useState(false);
const { fields, append, remove } = useFieldArray({
name: 'variables',
control,
rules: {
required: 'Add at least 1 environment variables',
},
});
useEffect(() => {
if (isSubmitSuccessful) {
reset();
}
}, [isSubmitSuccessful, reset, id]);
const getEnvironmentVariables = useCallback(
(environment: Environment) => {
@ -68,21 +47,6 @@ export const EnvironmentVariablesTabPanel = () => {
[environmentVariables, id],
);
const isFieldEmpty = useMemo(() => {
if (errors.variables) {
return fields.some((_, index) => {
if (
errors.variables![index]?.value?.type === 'required' ||
errors.variables![index]?.key?.type === 'required'
) {
return true;
}
});
}
return false;
}, [fields, errors.variables, id]);
const fetchEnvironmentVariables = useCallback(
async (id: string | undefined) => {
if (id) {
@ -99,8 +63,8 @@ export const EnvironmentVariablesTabPanel = () => {
}, [id]);
const createEnvironmentVariablesHandler = useCallback(
async (createFormData: EnvironmentVariablesFormValues) => {
const environmentVariables = createFormData.variables.map((variable) => {
async (createFormData: FieldValues) => {
const environmentVariables = createFormData.variables.map((variable: any) => {
return {
key: variable.key,
value: variable.value,
@ -114,7 +78,7 @@ export const EnvironmentVariablesTabPanel = () => {
await client.addEnvironmentVariables(id!, environmentVariables);
if (isEnvironmentVariablesAdded) {
reset();
methods.reset();
setCreateNewVariable((cur) => !cur);
fetchEnvironmentVariables(id);
@ -159,59 +123,10 @@ export const EnvironmentVariablesTabPanel = () => {
</div>
</Heading>
<Collapse open={createNewVariable}>
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit((data) => createEnvironmentVariablesHandler(data))}>
<div className="p-4 bg-slate-100">
<form onSubmit={handleSubmit(createEnvironmentVariablesHandler)}>
{fields.map((field, index) => {
return (
<AddEnvironmentVariableRow
key={field.id}
index={index}
register={register}
onDelete={() => remove(index)}
isDeleteDisabled={fields.length === 1}
/>
);
})}
<div className="flex gap-1 p-2">
<Button
size="md"
onClick={() =>
append({
key: '',
value: '',
})
}
>
+ Add variable
</Button>
{/* TODO: Implement import environment varible functionality */}
<Button size="md" disabled>
Import .env
</Button>
</div>
{isFieldEmpty && (
<InlineNotification
title="Please ensure no fields are empty before saving."
variant="danger"
size="md"
/>
)}
<div className="flex gap-2 p-2">
<Checkbox
label="Production"
{...register(`environment.production`)}
color="blue"
/>
<Checkbox
label="Preview"
{...register(`environment.preview`)}
color="blue"
/>
<Checkbox
label="Development"
{...register(`environment.development`)}
color="blue"
/>
<EnvironmentVariablesForm />
</div>
<div className="p-2">
<Button size="md" type="submit">
@ -219,7 +134,7 @@ export const EnvironmentVariablesTabPanel = () => {
</Button>
</div>
</form>
</div>
</FormProvider>
</Collapse>
</div>
<div className="p-2">

76
packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx Normal file
View File

@ -0,0 +1,76 @@
import { useEffect, useMemo } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
// TODO: Use custom checkbox component
import { Checkbox } from '@snowballtools/material-tailwind-react-fork';
import { Button } from 'components/shared/Button';
import { InlineNotification } from 'components/shared/InlineNotification';
import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
import { EnvironmentVariablesFormValues } from 'types/types';
const EnvironmentVariablesForm = () => {
const {
register,
control,
reset,
formState: { isSubmitSuccessful, errors },
} = useFormContext<EnvironmentVariablesFormValues>();
const { fields, append, remove } = useFieldArray({
name: 'variables',
control,
});
useEffect(() => {
if (isSubmitSuccessful) {
reset();
}
}, [isSubmitSuccessful, reset]);
const isFieldEmpty = useMemo(() => {
if (errors.variables) {
return fields.some((_, index) => {
if (
errors.variables![index]?.value?.type === 'required' ||
errors.variables![index]?.key?.type === 'required'
) {
return true;
}
});
}
return false;
}, [fields, errors.variables]);
return (
<>
{fields.map((field, index) => (
<AddEnvironmentVariableRow
key={field.id}
index={index}
register={register}
onDelete={() => remove(index)}
isDeleteDisabled={fields.length === 0}
/>
))}
<div className="flex gap-1 p-2">
<Button size="md" onClick={() => append({ key: '', value: '' })}>
+ Add variable
</Button>
</div>
{isFieldEmpty && (
<InlineNotification
title="Please ensure no fields are empty before saving."
variant="danger"
/>
)}
<div className="flex gap-2 p-2">
<Checkbox label="Production" {...register('environment.production')} />
<Checkbox label="Preview" {...register('environment.preview')} />
<Checkbox label="Development" {...register('environment.development')} />
</div>
</>
);
};
export default EnvironmentVariablesForm;

8
packages/gql-client/src/client.ts
View File

@ -233,6 +233,7 @@ export class GQLClient {
data: types.AddProjectFromTemplateInput,
lrn?: string,
auctionParams?: types.AuctionParams,
environmentVariables?: types.AddEnvironmentVariableInput[]
): Promise<types.AddProjectFromTemplateResponse> {
const result = await this.client.mutate({
mutation: mutations.addProjectFromTemplate,
@ -240,7 +241,8 @@ export class GQLClient {
organizationSlug,
data,
lrn,
auctionParams
auctionParams,
environmentVariables
},
});
@ -252,6 +254,7 @@ export class GQLClient {
data: types.AddProjectInput,
lrn?: string,
auctionParams?: types.AuctionParams,
environmentVariables?: types.AddEnvironmentVariableInput[]
): Promise<types.AddProjectResponse> {
const result = await this.client.mutate({
mutation: mutations.addProject,
@ -259,7 +262,8 @@ export class GQLClient {
organizationSlug,
data,
lrn,
auctionParams
auctionParams,
environmentVariables
},
});

8
packages/gql-client/src/mutations.ts
View File

@ -49,16 +49,16 @@ export const updateDeploymentToProd = gql`
`;
export const addProjectFromTemplate = gql`
mutation ($organizationSlug: String!, $data: AddProjectFromTemplateInput, $lrn: String, $auctionParams: AuctionParams) {
addProjectFromTemplate(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionParams: $auctionParams) {
mutation ($organizationSlug: String!, $data: AddProjectFromTemplateInput, $lrn: String, $auctionParams: AuctionParams, $environmentVariables: [AddEnvironmentVariableInput!]) {
addProjectFromTemplate(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionParams: $auctionParams, environmentVariables: $environmentVariables) {
id
}
}
`;
export const addProject = gql`
mutation ($organizationSlug: String!, $data: AddProjectInput!, $lrn: String, $auctionParams: AuctionParams) {
addProject(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionParams: $auctionParams) {
mutation ($organizationSlug: String!, $data: AddProjectInput!, $lrn: String, $auctionParams: AuctionParams, $environmentVariables: [AddEnvironmentVariableInput!]) {
addProject(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionParams: $auctionParams, environmentVariables: $environmentVariables) {
id
}
}