Add mutations for edit and delete environment variables (#54)

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/backend/src/database.ts

@@ -201,6 +201,28 @@ export class Database {
     return savedEnvironmentVariables.length > 0;
   }
 
+  async updateEnvironmentVariable (environmentVariableId: string, update: DeepPartial<EnvironmentVariable>): Promise<boolean> {
+    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
+    const updateResult = await environmentVariableRepository.update({ id: Number(environmentVariableId) }, update);
+
+    if (updateResult.affected) {
+      return updateResult.affected > 0;
+    } else {
+      return false;
+    }
+  }
+
+  async deleteEnvironmentVariable (environmentVariableId: string): Promise<boolean> {
+    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
+    const deleteResult = await environmentVariableRepository.delete({ id: Number(environmentVariableId) });
+
+    if (deleteResult.affected) {
+      return deleteResult.affected > 0;
+    } else {
+      return false;
+    }
+  }
+
   async getProjectMemberByMemberId (memberId: string): Promise<ProjectMember> {
     const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
 

packages/backend/src/resolvers.ts

@@ -139,6 +139,27 @@ export const createResolvers = async (db: Database, app: OAuthApp): Promise<any>
         }
       },
 
+      updateEnvironmentVariable: async (_: any, { environmentVariableId, environmentVariable }: { environmentVariableId: string, environmentVariable : {
+        key: string
+        value: string
+      }}) => {
+        try {
+          return db.updateEnvironmentVariable(environmentVariableId, environmentVariable);
+        } catch (err) {
+          log(err);
+          return false;
+        }
+      },
+
+      removeEnvironmentVariable: async (_: any, { environmentVariableId }: { environmentVariableId: string}) => {
+        try {
+          return db.deleteEnvironmentVariable(environmentVariableId);
+        } catch (err) {
+          log(err);
+          return false;
+        }
+      },
+
       updateDeploymentToProd: async (_: any, { deploymentId }: { deploymentId: string }) => {
         try {
           return db.updateDeploymentById(deploymentId, {

packages/backend/src/schema.gql

@@ -133,6 +133,8 @@ type AuthResult {
 type Mutation {
   removeMember(memberId: String!): Boolean!
   addEnvironmentVariables(projectId: String!, environmentVariables: [AddEnvironmentVariableInput!]): Boolean!
+  removeEnvironmentVariable(environmentVariableId: String!): Boolean!
+  updateEnvironmentVariable(environmentVariableId: String!, environmentVariable: UpdateEnvironmentVariableInput!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
   updateProject(projectId: String!, projectDetails: UpdateProjectInput): Boolean!
   redeployToProd(deploymentId: String!): Boolean!
@@ -163,3 +165,8 @@ input UpdateDomainInput {
   isRedirected: Boolean
   branch: String
 }
+
+input UpdateEnvironmentVariableInput {
+  key: String
+  value: String
+}

packages/frontend/src/components/projects/project/OverviewTabPanel.tsx

@@ -12,7 +12,7 @@ interface OverviewProps {
 }
 
 // TODO: Check if any live domain is set for production branch
-const IS_DOMAIN_SETUP = true;
+const IS_DOMAIN_SETUP = false;
 
 const OverviewTabPanel = ({ project }: OverviewProps) => {
   return (

packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx

@@ -70,7 +70,7 @@ export const EnvironmentVariablesTabPanel = () => {
     }
   }, [isSubmitSuccessful, reset, id]);
 
-  const getEnvironmentVariable = useCallback(
+  const getEnvironmentVariables = useCallback(
     (environment: Environment) => {
       return environmentVariables.filter(
         (item) => item.environment === environment,
@@ -226,17 +226,17 @@ export const EnvironmentVariablesTabPanel = () => {
       <div className="p-2">
         <DisplayEnvironmentVariables
           environment={Environment.Production}
-          variables={getEnvironmentVariable(Environment.Production)}
+          variables={getEnvironmentVariables(Environment.Production)}
         />
         <HorizontalLine />
         <DisplayEnvironmentVariables
           environment={Environment.Preview}
-          variables={getEnvironmentVariable(Environment.Preview)}
+          variables={getEnvironmentVariables(Environment.Preview)}
         />
         <HorizontalLine />
         <DisplayEnvironmentVariables
           environment={Environment.Development}
-          variables={getEnvironmentVariable(Environment.Development)}
+          variables={getEnvironmentVariables(Environment.Development)}
         />
       </div>
     </>

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -51,7 +51,6 @@ const ProjectSearch = () => {
           ...project,
           // TODO: populate empty fields
           icon: '',
-          title: project.name,
           organization: orgName,
           deployments: updatedDeployments,
           url: '',

packages/gql-client/src/client.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, DefaultOptions, InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 
 import { getUser, getOrganizations, getDeployments, getProjectMembers, searchProjects, getEnvironmentVariables, getProject, getDomains, getProjectsInOrganization } from './queries';
-import { AddEnvironmentVariableInput, AddEnvironmentVariablesResponse, GetDeploymentsResponse, GetEnvironmentVariablesResponse, GetOrganizationsResponse, GetProjectMembersResponse, SearchProjectsResponse, GetUserResponse, RemoveMemberResponse, UpdateDeploymentToProdResponse, GetProjectResponse, UpdateProjectResponse, UpdateProjectInput, RedeployToProdResponse, DeleteProjectResponse, GetProjectsInOrganizationResponse, RollbackDeploymentResponse, AddDomainInput, AddDomainResponse, GetDomainsResponse, UpdateDomainInput, UpdateDomainResponse, AuthenticateGithubResponse } from './types';
+import { AddEnvironmentVariableInput, AddEnvironmentVariablesResponse, GetDeploymentsResponse, GetEnvironmentVariablesResponse, GetOrganizationsResponse, GetProjectMembersResponse, SearchProjectsResponse, GetUserResponse, RemoveMemberResponse, UpdateDeploymentToProdResponse, GetProjectResponse, UpdateProjectResponse, UpdateProjectInput, RedeployToProdResponse, DeleteProjectResponse, GetProjectsInOrganizationResponse, RollbackDeploymentResponse, AddDomainInput, AddDomainResponse, GetDomainsResponse, UpdateDomainInput, UpdateDomainResponse, AuthenticateGithubResponse, UpdateEnvironmentVariableResponse, UpdateEnvironmentVariableInput, RemoveEnvironmentVariableResponse } from './types';
-import { removeMember, addEnvironmentVariables, updateDeploymentToProd, updateProjectMutation, redeployToProd, deleteProject, addDomain, rollbackDeployment, updateDomainMutation, authenticateGithub } from './mutations';
+import { removeMember, addEnvironmentVariables, updateDeploymentToProd, updateProjectMutation, redeployToProd, deleteProject, addDomain, rollbackDeployment, updateDomainMutation, authenticateGithub, updateEnvironmentVariable, removeEnvironmentVariable } from './mutations';
 
 export interface GraphQLConfig {
   gqlEndpoint: string;
@@ -136,6 +136,29 @@ export class GQLClient {
     return data;
   }
 
+  async updateEnvironmentVariable (environmentVariableId: string, environmentVariable: UpdateEnvironmentVariableInput): Promise<UpdateEnvironmentVariableResponse> {
+    const { data } = await this.client.mutate({
+      mutation: updateEnvironmentVariable,
+      variables: {
+        environmentVariableId,
+        environmentVariable
+      }
+    });
+
+    return data;
+  }
+
+  async removeEnvironmentVariable (environmentVariableId: string): Promise<RemoveEnvironmentVariableResponse> {
+    const { data } = await this.client.mutate({
+      mutation: removeEnvironmentVariable,
+      variables: {
+        environmentVariableId
+      }
+    });
+
+    return data;
+  }
+
   async updateDeploymentToProd (deploymentId: string): Promise<UpdateDeploymentToProdResponse> {
     const { data } = await this.client.mutate({
       mutation: updateDeploymentToProd,

packages/gql-client/src/mutations.ts

@@ -12,6 +12,18 @@ mutation ($projectId: String!, $environmentVariables: [AddEnvironmentVariableInp
 }
 `;
 
+export const updateEnvironmentVariable = gql`
+mutation ($environmentVariableId: String!, $environmentVariable: UpdateEnvironmentVariableInput!) {
+  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, environmentVariable: $environmentVariable)
+}
+`;
+
+export const removeEnvironmentVariable = gql`
+mutation ($environmentVariableId: String!) {
+  removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
+}
+`;
+
 export const updateDeploymentToProd = gql`
 mutation ($deploymentId: String!) {
   updateDeploymentToProd(deploymentId: $deploymentId)

packages/gql-client/src/types.ts

@@ -180,6 +180,19 @@ export type AddEnvironmentVariableInput = {
   value: string;
 }
 
+export type UpdateEnvironmentVariableInput = {
+  key: string;
+  value: string;
+}
+
+export type UpdateEnvironmentVariableResponse = {
+  updateEnvironmentVariable: boolean;
+}
+
+export type RemoveEnvironmentVariableResponse = {
+  removeEnvironmentVariable: boolean;
+}
+
 export type UpdateDeploymentToProdResponse = {
   updateDeploymentToProd: boolean;
 }