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: #6
2024-10-21 11:05:35 +00:00 · 2024-10-21 11:05:35 +00:00 · d486f44cfe
commit d486f44cfe
parent 5c9c7575f2
13 changed files with 446 additions and 361 deletions
--- a/packages/backend/src/database.ts
+++ b/packages/backend/src/database.ts
@ -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[]> {
--- a/packages/backend/src/registry.ts
+++ b/packages/backend/src/registry.ts
@ -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')
--- a/packages/backend/src/resolvers.ts
+++ b/packages/backend/src/resolvers.ts
@ -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;
--- a/packages/backend/src/schema.gql
+++ b/packages/backend/src/schema.gql
@ -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!
--- a/packages/backend/src/service.ts
+++ b/packages/backend/src/service.ts
@ -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('/');
--- a/packages/backend/src/types.ts
+++ b/packages/backend/src/types.ts
@ -76,3 +76,9 @@ export interface AuctionParams {
  maxPrice: string,
  numProviders: number,
 }
+
+export interface EnvironmentVariables {
+  environments: string[],
+  key: string,
+  value: string,
+}
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@ -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>
  );
 };
--- a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
+++ b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
@ -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({
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@ -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} />
            )}
          />
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
@ -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">
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
@ -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;
--- a/packages/gql-client/src/client.ts
+++ b/packages/gql-client/src/client.ts
@ -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
      },
    });

--- a/packages/gql-client/src/mutations.ts
+++ b/packages/gql-client/src/mutations.ts
@ -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
    }
  }