cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI to take environment variables from user #6

Merged
nabarun merged 6 commits from iv-env-ui into main 2024-10-21 11:05:36 +00:00
Conversation 0 Commits 6 Files Changed 13 +446 -361
13 changed files with 446 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@ export class Database {
private dataSource: DataSource;
private projectDomain: string;
constructor ({ dbPath } : DatabaseConfig, { projectDomain } : MiscConfig) {
constructor({ dbPath }: DatabaseConfig, { projectDomain }: MiscConfig) {
this.dataSource = new DataSource({
type: 'better-sqlite3',
database: dbPath,
@ -45,7 +45,7 @@ export class Database {
this.projectDomain = projectDomain;
}
async init (): Promise<void> {
async init(): Promise<void> {
await this.dataSource.initialize();
log('database initialized');
@ -58,21 +58,21 @@ export class Database {
}
}
async getUser (options: FindOneOptions<User>): Promise<User | null> {
async getUser(options: FindOneOptions<User>): Promise<User | null> {
const userRepository = this.dataSource.getRepository(User);
const user = await userRepository.findOne(options);
return user;
}
async addUser (data: DeepPartial<User>): Promise<User> {
async addUser(data: DeepPartial<User>): Promise<User> {
const userRepository = this.dataSource.getRepository(User);
const user = await userRepository.save(data);
return user;
}
async updateUser (user: User, data: DeepPartial<User>): Promise<boolean> {
async updateUser(user: User, data: DeepPartial<User>): Promise<boolean> {
const userRepository = this.dataSource.getRepository(User);
const updateResult = await userRepository.update({ id: user.id }, data);
assert(updateResult.affected);
@ -80,7 +80,7 @@ export class Database {
return updateResult.affected > 0;
}
async getOrganizations (
async getOrganizations(
options: FindManyOptions<Organization>
): Promise<Organization[]> {
const organizationRepository = this.dataSource.getRepository(Organization);
@ -89,7 +89,7 @@ export class Database {
return organizations;
}
async getOrganization (
async getOrganization(
options: FindOneOptions<Organization>
): Promise<Organization | null> {
const organizationRepository = this.dataSource.getRepository(Organization);
@ -98,7 +98,7 @@ export class Database {
return organization;
}
async getOrganizationsByUserId (userId: string): Promise<Organization[]> {
async getOrganizationsByUserId(userId: string): Promise<Organization[]> {
const organizationRepository = this.dataSource.getRepository(Organization);
const userOrgs = await organizationRepository.find({
@ -114,21 +114,21 @@ export class Database {
return userOrgs;
}
async addUserOrganization (data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
async addUserOrganization(data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
const userOrganizationRepository = this.dataSource.getRepository(UserOrganization);
const newUserOrganization = await userOrganizationRepository.save(data);
return newUserOrganization;
}
async getProjects (options: FindManyOptions<Project>): Promise<Project[]> {
async getProjects(options: FindManyOptions<Project>): Promise<Project[]> {
const projectRepository = this.dataSource.getRepository(Project);
const projects = await projectRepository.find(options);
return projects;
}
async getProjectById (projectId: string): Promise<Project | null> {
async getProjectById(projectId: string): Promise<Project | null> {
const projectRepository = this.dataSource.getRepository(Project);
const project = await projectRepository
@ -150,7 +150,20 @@ export class Database {
return project;
}
async getProjectsInOrganization (
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
): Promise<Project[]> {
@ -181,7 +194,7 @@ export class Database {
/**
* Get deployments with specified filter
*/
async getDeployments (
async getDeployments(
options: FindManyOptions<Deployment>
): Promise<Deployment[]> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
@ -190,7 +203,7 @@ export class Database {
return deployments;
}
async getDeploymentsByProjectId (projectId: string): Promise<Deployment[]> {
async getDeploymentsByProjectId(projectId: string): Promise<Deployment[]> {
return this.getDeployments({
relations: {
project: true,
@ -208,7 +221,7 @@ export class Database {
});
}
async getDeployment (
async getDeployment(
options: FindOneOptions<Deployment>
): Promise<Deployment | null> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
@ -217,14 +230,14 @@ export class Database {
return deployment;
}
async getDomains (options: FindManyOptions<Domain>): Promise<Domain[]> {
async getDomains(options: FindManyOptions<Domain>): Promise<Domain[]> {
const domainRepository = this.dataSource.getRepository(Domain);
const domains = await domainRepository.find(options);
return domains;
}
async addDeployment (data: DeepPartial<Deployment>): Promise<Deployment> {
async addDeployment(data: DeepPartial<Deployment>): Promise<Deployment> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
const id = nanoid();
@ -238,7 +251,7 @@ export class Database {
return deployment;
}
async getProjectMembersByProjectId (
async getProjectMembersByProjectId(
projectId: string
): Promise<ProjectMember[]> {
const projectMemberRepository =
@ -259,7 +272,7 @@ export class Database {
return projectMembers;
}
async getEnvironmentVariablesByProjectId (
async getEnvironmentVariablesByProjectId(
projectId: string,
filter?: FindOptionsWhere<EnvironmentVariable>
): Promise<EnvironmentVariable[]> {
@ -278,7 +291,7 @@ export class Database {
return environmentVariables;
}
async removeProjectMemberById (projectMemberId: string): Promise<boolean> {
async removeProjectMemberById(projectMemberId: string): Promise<boolean> {
const projectMemberRepository =
this.dataSource.getRepository(ProjectMember);
@ -293,7 +306,7 @@ export class Database {
}
}
async updateProjectMemberById (
async updateProjectMemberById(
projectMemberId: string,
data: DeepPartial<ProjectMember>
): Promise<boolean> {
@ -307,7 +320,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async addProjectMember (
async addProjectMember(
data: DeepPartial<ProjectMember>
): Promise<ProjectMember> {
const projectMemberRepository =
@ -317,7 +330,7 @@ export class Database {
return newProjectMember;
}
async addEnvironmentVariables (
async addEnvironmentVariables(
data: DeepPartial<EnvironmentVariable>[]
): Promise<EnvironmentVariable[]> {
const environmentVariableRepository =
@ -328,7 +341,7 @@ export class Database {
return savedEnvironmentVariables;
}
async updateEnvironmentVariable (
async updateEnvironmentVariable(
environmentVariableId: string,
data: DeepPartial<EnvironmentVariable>
): Promise<boolean> {
@ -342,7 +355,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteEnvironmentVariable (
async deleteEnvironmentVariable(
environmentVariableId: string
): Promise<boolean> {
const environmentVariableRepository =
@ -358,7 +371,7 @@ export class Database {
}
}
async getProjectMemberById (projectMemberId: string): Promise<ProjectMember> {
async getProjectMemberById(projectMemberId: string): Promise<ProjectMember> {
const projectMemberRepository =
this.dataSource.getRepository(ProjectMember);
@ -381,7 +394,7 @@ export class Database {
return projectMemberWithProject[0];
}
async getProjectsBySearchText (
async getProjectsBySearchText(
userId: string,
searchText: string
): Promise<Project[]> {
@ -403,14 +416,14 @@ export class Database {
return projects;
}
async updateDeploymentById (
async updateDeploymentById(
deploymentId: string,
data: DeepPartial<Deployment>
): Promise<boolean> {
return this.updateDeployment({ id: deploymentId }, data);
}
async updateDeployment (
async updateDeployment(
criteria: FindOptionsWhere<Deployment>,
data: DeepPartial<Deployment>
): Promise<boolean> {
@ -420,7 +433,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async updateDeploymentsByProjectIds (
async updateDeploymentsByProjectIds(
projectIds: string[],
data: DeepPartial<Deployment>
): Promise<boolean> {
@ -436,7 +449,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteDeploymentById (deploymentId: string): Promise<boolean> {
async deleteDeploymentById(deploymentId: string): Promise<boolean> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
const deployment = await deploymentRepository.findOneOrFail({
where: {
@ -449,7 +462,7 @@ export class Database {
return Boolean(deleteResult);
}
async addProject (user: User, organizationId: string, data: DeepPartial<Project>): Promise<Project> {
async addProject(user: User, organizationId: string, data: DeepPartial<Project>): Promise<Project> {
const projectRepository = this.dataSource.getRepository(Project);
// TODO: Check if organization exists
@ -468,7 +481,7 @@ export class Database {
return projectRepository.save(newProject);
}
async updateProjectById (
async updateProjectById(
projectId: string,
data: DeepPartial<Project>
): Promise<boolean> {
@ -481,7 +494,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteProjectById (projectId: string): Promise<boolean> {
async deleteProjectById(projectId: string): Promise<boolean> {
const projectRepository = this.dataSource.getRepository(Project);
const project = await projectRepository.findOneOrFail({
where: {
@ -497,7 +510,7 @@ export class Database {
return Boolean(deleteResult);
}
async deleteDomainById (domainId: string): Promise<boolean> {
async deleteDomainById(domainId: string): Promise<boolean> {
const domainRepository = this.dataSource.getRepository(Domain);
const deleteResult = await domainRepository.softDelete({ id: domainId });
@ -509,21 +522,21 @@ export class Database {
}
}
async addDomain (data: DeepPartial<Domain>): Promise<Domain> {
async addDomain(data: DeepPartial<Domain>): Promise<Domain> {
const domainRepository = this.dataSource.getRepository(Domain);
const newDomain = await domainRepository.save(data);
return newDomain;
}
async getDomain (options: FindOneOptions<Domain>): Promise<Domain | null> {
async getDomain(options: FindOneOptions<Domain>): Promise<Domain | null> {
const domainRepository = this.dataSource.getRepository(Domain);
const domain = await domainRepository.findOne(options);
return domain;
}
async updateDomainById (
async updateDomainById(
domainId: string,
data: DeepPartial<Domain>
): Promise<boolean> {
@ -533,7 +546,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async getDomainsByProjectId (
async getDomainsByProjectId(
projectId: string,
filter?: FindOptionsWhere<Domain>
): Promise<Domain[]> {

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!

81
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,44 +290,30 @@ 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 projectsToBedeployed = projects.filter((project) =>
completedAuctionIds.includes(project.auctionId!)
);
const auctionIds = projects.map((project) => project.auctionId);
const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(auctionIds);
for (const project of projectsToBedeployed) {
const deployerLrns = await this.laconicRegistry.getAuctionWinningDeployers(project!.auctionId!);
if (completedAuctionIds) {
const projectsToBedeployed = projects.filter((project) =>
completedAuctionIds.includes(project.auctionId!)
);
if (!deployerLrns) {
log(`No winning deployer for auction ${project!.auctionId}`);
} else {
// Update project with deployer LRNs
await this.db.updateProjectById(project.id!, {
deployerLrns
});
for (const project of projectsToBedeployed) {
const deployerLrns = await this.laconicRegistry.getAuctionWinningDeployers(project!.auctionId!);
if (!deployerLrns) {
log(`No winning deployer for auction ${project!.auctionId}`);
} else {
// Update project with deployer LRNs
await this.db.updateProjectById(project.id!, {
deployerLrns
});
for (const deployer of deployerLrns) {
log(`Creating deployment for deployer LRN ${deployer}`);
await this.createDeploymentFromAuction(project, deployer);
}
for (const deployer of deployerLrns) {
log(`Creating deployment for deployer LRN ${deployer}`);
await this.createDeploymentFromAuction(project, deployer);
}
}
}
@ -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,
}

365
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,96 +46,147 @@ 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) => {
setIsLoading(true);
const createProject = async (data: FieldValues, envVariables: AddEnvironmentVariableInput[]): Promise<string> => {
setIsLoading(true);
let projectId: string | null = null;
try {
let lrn: string | undefined;
let auctionParams: AuctionParams | undefined;
try {
let lrn: string | undefined;
let auctionParams: AuctionParams | undefined;
if (data.option === 'LRN') {
lrn = data.lrn;
} else if (data.option === 'Auction') {
auctionParams = {
numProviders: Number(data.numProviders!),
maxPrice: (data.maxPrice!).toString(),
};
}
if (data.option === 'LRN') {
lrn = data.lrn;
} else if (data.option === 'Auction') {
auctionParams = {
numProviders: Number(data.numProviders!),
maxPrice: (data.maxPrice!).toString(),
};
}
if (templateId) {
// Template-based project creation
const projectData: any = {
templateOwner,
templateRepo,
owner,
name,
isPrivate,
};
if (templateId) {
const projectData: any = {
templateOwner,
templateRepo,
owner,
name,
isPrivate,
};
const { addProjectFromTemplate } = await client.addProjectFromTemplate(
orgSlug!,
projectData,
lrn,
auctionParams
);
const { addProjectFromTemplate } = await client.addProjectFromTemplate(
orgSlug!,
projectData,
lrn,
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}`
);
} else {
const { addProject } = await client.addProject(
orgSlug!,
{
name: fullName!,
prodBranch: defaultBranch!,
repository: fullName!,
template: 'webapp',
},
lrn,
auctionParams
);
projectId = addProjectFromTemplate.id;
} else {
const { addProject } = await client.addProject(
orgSlug!,
{
name: fullName!,
prodBranch: defaultBranch!,
repository: fullName!,
template: 'webapp',
},
lrn,
auctionParams,
envVariables
);
data.option === 'Auction'
? navigate(
`/${orgSlug}/projects/create/success/${addProject.id}?isAuction=true`
)
: navigate(
`/${orgSlug}/projects/create/deploy?projectId=${addProject.id}`
);
}
} catch (error) {
console.error('Error creating project:', error);
projectId = addProject.id;
}
} catch (error) {
console.error('Error creating project:', error);
toast({
id: 'error-creating-project',
title: 'Error creating project',
variant: 'error',
onDismiss: dismiss,
});
} 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: 'error-creating-project',
title: 'Error creating project',
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,
});
} finally {
setIsLoading(false);
}
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,99 +199,111 @@ 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">
<Controller
name="option"
control={control}
render={({ field: { value, onChange } }) => (
<Select
label="Configuration Options"
value={
{
value: value || 'LRN',
label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN',
} as SelectOption
}
onChange={(value) => onChange((value as SelectOption).value)}
options={[
{ value: 'LRN', label: 'Deployer LRN' },
{ value: 'Auction', label: 'Create Auction' },
]}
/>
)}
/>
</div>
{selectedOption === 'LRN' && (
<div className="flex flex-col justify-start gap-3">
<Heading as="h5" className="text-sm font-sans text-elements-low-em">
The app will be deployed by the configured deployer
</Heading>
<span className="text-sm text-elements-high-em">
Enter LRN for deployer
</span>
<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="lrn"
control={control}
name="option"
control={methods.control}
render={({ field: { value, onChange } }) => (
<Input value={value} onChange={onChange} />
<Select
label="Configuration Options"
value={
{
value: value || 'LRN',
label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN',
} as SelectOption
}
onChange={(value) => onChange((value as SelectOption).value)}
options={[
{ value: 'LRN', label: 'Deployer LRN' },
{ value: 'Auction', label: 'Create Auction' },
]}
/>
)}
/>
</div>
)}
{selectedOption === 'Auction' && (
<>
<div className="flex flex-col justify-start gap-3">
{selectedOption === 'LRN' && (
<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
The app will be deployed by the configured deployer
</Heading>
<span className="text-sm text-elements-high-em">
Number of Deployers
Enter LRN for deployer
</span>
<Controller
name="numProviders"
control={control}
name="lrn"
control={methods.control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
<Input value={value} onChange={onChange} />
)}
/>
</div>
<div className="flex flex-col justify-start gap-3">
<span className="text-sm text-elements-high-em">
Maximum Price (alnt)
</span>
<Controller
name="maxPrice"
control={control}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
/>
</div>
</>
)}
)}
<div>
<Button
{...buttonSize}
type="submit"
disabled={isLoading}
rightIcon={
isLoading ? (
<LoadingIcon className="animate-spin" />
) : (
<ArrowRightCircleFilledIcon />
)
}
>
{isLoading ? 'Deploying repo' : 'Deploy repo'}
</Button>
</div>
</div>
</form>
{selectedOption === 'Auction' && (
<>
<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>
<span className="text-sm text-elements-high-em">
Number of Deployers
</span>
<Controller
name="numProviders"
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-4 mb-6">
<span className="text-sm text-elements-high-em">
Maximum Price (alnt)
</span>
<Controller
name="maxPrice"
control={methods.control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
/>
</div>
</>
)}
<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}
type="submit"
disabled={isLoading}
rightIcon={
isLoading ? (
<LoadingIcon className="animate-spin" />
) : (
<ArrowRightCircleFilledIcon />
)
}
>
{isLoading ? 'Deploying repo' : 'Deploy repo'}
</Button>
</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({

3
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} />
)}
@ -172,7 +173,7 @@ const CreateRepo = () => {
<Controller
name="isPrivate"
control={control}
render={({}) => (
render={({ }) => (
<Checkbox label="Make this repo private" disabled={true} />
)}
/>

117
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}>
<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"
/>
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit((data) => createEnvironmentVariablesHandler(data))}>
<div className="p-4 bg-slate-100">
<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
}
}