From d23382d265aed72f03fa4791b1e154d33641add7 Mon Sep 17 00:00:00 2001
From: deinakings <deinakings@gmail.com>
Date: Tue, 15 Oct 2019 15:42:56 -0700
Subject: [PATCH 1/2] refactor EnvironmentVariables to use useOvermind

---
 .../items/Server/EnvVars/{index.js => index.tsx} | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/{index.js => index.tsx} (79%)

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
similarity index 79%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
index b17942537b4..0356359fec7 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
@@ -1,12 +1,18 @@
 import React, { useEffect } from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 
 import { WorkspaceInputContainer } from '../../../elements';
 
 import { EnvEntry } from './EnvEntry';
 import { EnvModal } from './EnvModal';
 
-const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
+export const EnvironmentVariables: React.FC<{}> = props => {
+  const {
+    actions: { editor },
+    state: {
+      editor: { currentSandbox },
+    },
+  } = useOvermind();
   useEffect(() => {
     editor.fetchEnvironmentVariables();
   }, [editor]);
@@ -19,7 +25,7 @@ const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
     editor.deleteEnvironmentVariable({ name });
   };
 
-  const envVars = store.editor.currentSandbox.environmentVariables;
+  const envVars: any = currentSandbox.environmentVariables;
 
   if (!envVars) {
     return (
@@ -51,7 +57,3 @@ const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
     </div>
   );
 };
-
-export const EnvironmentVariables = inject('store', 'signals')(
-  observer(EnvironmentVariablesComponent)
-);

From 38d1756a0209d700786c7210d8687b820d41e306 Mon Sep 17 00:00:00 2001
From: Christian Alfoni <christianalfoni@gmail.com>
Date: Thu, 17 Oct 2019 13:11:45 +0200
Subject: [PATCH 2/2] Fix typing of EnvVariables

---
 packages/app/src/app/overmind/effects/api/index.ts | 14 ++++++++------
 .../Workspace/items/Server/EnvVars/index.tsx       | 13 ++++---------
 packages/common/src/types/index.ts                 |  4 +++-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/app/overmind/effects/api/index.ts b/packages/app/src/app/overmind/effects/api/index.ts
index 6725d7a99a9..b62def9ad11 100755
--- a/packages/app/src/app/overmind/effects/api/index.ts
+++ b/packages/app/src/app/overmind/effects/api/index.ts
@@ -23,15 +23,15 @@ import { client } from 'app/graphql/client';
 import { LIST_TEMPLATES } from 'app/pages/Dashboard/queries';
 
 import {
-  transformSandbox,
   transformDirectory,
   transformModule,
+  transformSandbox,
 } from '../utils/sandbox';
 import apiFactory, { Api, ApiConfig } from './apiFactory';
 import {
-  SandboxAPIResponse,
-  IModuleAPIResponse,
   IDirectoryAPIResponse,
+  IModuleAPIResponse,
+  SandboxAPIResponse,
 } from './types';
 
 let api: Api;
@@ -154,7 +154,9 @@ export default {
       },
     });
   },
-  getEnvironmentVariables(sandboxId: string): Promise<EnvironmentVariable[]> {
+  getEnvironmentVariables(
+    sandboxId: string
+  ): Promise<{ [key: string]: string }> {
     return api.get(
       `/sandboxes/${sandboxId}/env`,
       {},
@@ -164,7 +166,7 @@ export default {
   saveEnvironmentVariable(
     sandboxId: string,
     environmentVariable: EnvironmentVariable
-  ): Promise<EnvironmentVariable[]> {
+  ): Promise<{ [key: string]: string }> {
     return api.post(
       `/sandboxes/${sandboxId}/env`,
       {
@@ -178,7 +180,7 @@ export default {
   deleteEnvironmentVariable(
     sandboxId: string,
     name: string
-  ): Promise<EnvironmentVariable[]> {
+  ): Promise<{ [key: string]: string }> {
     return api.delete(
       `/sandboxes/${sandboxId}/env/${name}`,
       {},
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
index 0356359fec7..94e36776730 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx
@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
+import React, { useEffect } from 'react';
 
 import { WorkspaceInputContainer } from '../../../elements';
-
 import { EnvEntry } from './EnvEntry';
 import { EnvModal } from './EnvModal';
 
@@ -25,7 +24,7 @@ export const EnvironmentVariables: React.FC<{}> = props => {
     editor.deleteEnvironmentVariable({ name });
   };
 
-  const envVars: any = currentSandbox.environmentVariables;
+  const envVars = currentSandbox.environmentVariables;
 
   if (!envVars) {
     return (
@@ -37,17 +36,13 @@ export const EnvironmentVariables: React.FC<{}> = props => {
 
   return (
     <div>
-      {Object.keys(envVars.toJSON ? envVars.toJSON() : envVars).map(keyName => (
+      {Object.keys(envVars).map(keyName => (
         <EnvEntry
           onSubmit={createEnv}
           onDelete={deleteEnv}
           key={keyName}
           name={keyName}
-          value={
-            typeof envVars.get === 'function'
-              ? envVars.get(keyName)
-              : envVars[keyName]
-          }
+          value={envVars[keyName]}
         />
       ))}
 
diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
index 497d4637780..1f974053711 100644
--- a/packages/common/src/types/index.ts
+++ b/packages/common/src/types/index.ts
@@ -299,7 +299,9 @@ export type Sandbox = {
   git: GitInfo | null;
   tags: string[];
   isFrozen: boolean;
-  environmentVariables: EnvironmentVariable[] | null;
+  environmentVariables: {
+    [key: string]: string;
+  } | null;
   /**
    * This is the source it's assigned to, a source contains all dependencies, modules and directories
    *