Add and refresh environment variables in project settings tab (#37)

* Create and use add environment variables gql client method

* Implement get environment variables method

* Display fetched environment variables

* Refactor create environment variables submit handler

* Use environment variables type from gql-client

* Add fixtures for project member

---------

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

packages/gql-client/src/client.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, DefaultOptions, InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 
-import { getUser, getOrganizations, getDeployments, getProjectMembers, searchProjects } from './queries';
-import { GetDeploymentsResponse, GetOrganizationsResponse, GetProjectMembersResponse, SearchProjectsResponse, GetUserResponse, RemoveMemberResponse } from './types';
-import { removeMember } from './mutations';
+import { getUser, getOrganizations, getDeployments, getProjectMembers, searchProjects, getEnvironmentVariables } from './queries';
+import { AddEnvironmentVariableInput, AddEnvironmentVariablesResponse, GetDeploymentsResponse, GetEnvironmentVariablesResponse, GetOrganizationsResponse, GetProjectMembersResponse, SearchProjectsResponse, GetUserResponse, RemoveMemberResponse } from './types';
+import { removeMember, addEnvironmentVariables } from './mutations';
 
 export interface GraphQLConfig {
   gqlEndpoint: string;
@@ -58,6 +58,17 @@ export class GQLClient {
     return data;
   }
 
+  async getEnvironmentVariables (projectId: string) : Promise<GetEnvironmentVariablesResponse> {
+    const { data } = await this.client.query({
+      query: getEnvironmentVariables,
+      variables: {
+        projectId
+      }
+    });
+
+    return data;
+  }
+
   async removeMember (memberId: string): Promise<RemoveMemberResponse> {
     const { data } = await this.client.mutate({
       mutation: removeMember,
@@ -90,4 +101,16 @@ export class GQLClient {
 
     return data;
   }
+
+  async addEnvironmentVariables (projectId: string, environmentVariables: AddEnvironmentVariableInput[]): Promise<AddEnvironmentVariablesResponse> {
+    const { data } = await this.client.mutate({
+      mutation: addEnvironmentVariables,
+      variables: {
+        projectId,
+        environmentVariables
+      }
+    });
+
+    return data;
+  }
 }

packages/gql-client/src/mutations.ts

@@ -5,3 +5,9 @@ mutation ($memberId: String!) {
   removeMember(memberId: $memberId)
 }
 `;
+
+export const addEnvironmentVariables = gql`
+mutation ($projectId: String!, $environmentVariables: [AddEnvironmentVariableInput!]) {
+  addEnvironmentVariables(projectId: $projectId, environmentVariables: $environmentVariables)
+}
+`;

packages/gql-client/src/queries.ts

@@ -82,6 +82,19 @@ query ($projectId: String!)  {
 }
 `;
 
+export const getEnvironmentVariables = gql`
+query ($projectId: String!)  {
+  environmentVariables(projectId: $projectId) {
+    createdAt
+    environments
+    id
+    key
+    updatedAt
+    value
+  }
+}
+`;
+
 export const getProjectMembers = gql`
 query ($projectId: String!) {
   projectMembers(projectId: $projectId) {

packages/gql-client/src/types.ts

@@ -140,6 +140,10 @@ export type GetDeploymentsResponse = {
   deployments: Deployment[]
 }
 
+export type GetEnvironmentVariablesResponse = {
+  environmentVariables: EnvironmentVariable[]
+}
+
 export type GetOrganizationsResponse = {
   organizations: Organization[]
 }
@@ -151,3 +155,13 @@ export type GetUserResponse = {
 export type SearchProjectsResponse = {
   searchProjects: Project[]
 }
+
+export type AddEnvironmentVariablesResponse = {
+  addEnvironmentVariables: boolean;
+}
+
+export type AddEnvironmentVariableInput = {
+  environments: string[];
+  key: string;
+  value: string;
+}