forked from cerc-io/snowballtools-base
Update UI to take environment variables from user (#6)
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:
parent
5c9c7575f2
commit
d486f44cfe
@ -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[]> {
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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!
|
||||
|
||||
@ -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('/');
|
||||
|
||||
@ -76,3 +76,9 @@ export interface AuctionParams {
|
||||
maxPrice: string,
|
||||
numProviders: number,
|
||||
}
|
||||
|
||||
export interface EnvironmentVariables {
|
||||
environments: string[],
|
||||
key: string,
|
||||
value: string,
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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} />
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
@ -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
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user