prettier

dashboard/src/components/values-form/KeyValueArray.tsx

@@ -51,7 +51,7 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
       values.push(entry);
     });
     return values;
-  }
+  };
 
   renderDeleteButton = (i: number) => {
     if (!this.props.disabled) {
@@ -120,8 +120,8 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
           width="665px"
           height="332px"
         >
-          <LoadEnvGroupModal 
-            namespace={this.props.namespace} 
+          <LoadEnvGroupModal
+            namespace={this.props.namespace}
             clusterId={this.props.clusterId}
             closeModal={() => this.setState({ showEnvModal: false })}
             setValues={(values: any) => {
@@ -130,9 +130,9 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
             }}
           />
         </Modal>
-      )
+      );
     }
-  }
+  };
 
   render() {
     return (
@@ -153,15 +153,15 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
                 <i className="material-icons">add</i> Add Row
               </AddRowButton>
               <Spacer />
-              {
-                this.props.namespace && (
-                  <LoadButton 
-                    onClick={() => this.setState({ showEnvModal: !this.state.showEnvModal })}
-                  >
-                    <img src={sliders} /> Load from Env Group
-                  </LoadButton>
-                )
-              }
+              {this.props.namespace && (
+                <LoadButton
+                  onClick={() =>
+                    this.setState({ showEnvModal: !this.state.showEnvModal })
+                  }
+                >
+                  <img src={sliders} /> Load from Env Group
+                </LoadButton>
+              )}
             </InputWrapper>
           )}
         </StyledInputArray>

dashboard/src/main/home/Home.tsx

@@ -294,7 +294,7 @@ class Home extends Component<PropsType, StateType> {
       if (
         currentView === "cluster-dashboard" ||
         currentView === "applications" ||
-        currentView === "jobs" || 
+        currentView === "jobs" ||
         currentView === "env-groups"
       ) {
         return this.renderDashboard();

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -96,7 +96,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     } else {
       return "Continuously running web services, workers, and add-ons.";
     }
-  }
+  };
 
   renderBody = () => {
     let { currentCluster, setSidebar, currentView } = this.props;
@@ -129,7 +129,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
         />
       </>
     );
-  }
+  };
 
   renderContents = () => {
     let { currentCluster, setSidebar, currentView } = this.props;
@@ -155,9 +155,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
         />
       );
     } else if (currentView === "env-groups") {
-      return (
-        <EnvGroupDashboard currentCluster={this.props.currentCluster} />
-      );
+      return <EnvGroupDashboard currentCluster={this.props.currentCluster} />;
     }
 
     return (
@@ -173,9 +171,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
               <i className="material-icons">info</i> Info
             </InfoLabel>
           </TopRow>
-          <Description>
-            {this.getDescription(currentView)}
-          </Description>
+          <Description>{this.getDescription(currentView)}</Description>
         </InfoSection>
 
         <LineBreak />

dashboard/src/main/home/cluster-dashboard/DashboardHeader.tsx

@@ -2,13 +2,12 @@ import React, { Component } from "react";
 import styled from "styled-components";
 
 type PropsType = {
-  image: any,
-  title: string,
-  description: string,
+  image: any;
+  title: string;
+  description: string;
 };
 
-type StateType = {
-};
+type StateType = {};
 
 export default class DashboardHeader extends Component<PropsType, StateType> {
   render() {
@@ -25,9 +24,7 @@ export default class DashboardHeader extends Component<PropsType, StateType> {
               <i className="material-icons">info</i> Info
             </InfoLabel>
           </TopRow>
-          <Description>
-            {this.props.description}
-          </Description>
+          <Description>{this.props.description}</Description>
         </InfoSection>
 
         <LineBreak />

dashboard/src/main/home/cluster-dashboard/env-groups/CreateEnvGroup.tsx

@@ -45,20 +45,26 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
   }
 
   isDisabled = () => {
-    return !isAlphanumeric(this.state.envGroupName) ||
-    this.state.envGroupName === "";
-  }
+    return (
+      !isAlphanumeric(this.state.envGroupName) || this.state.envGroupName === ""
+    );
+  };
 
   onSubmit = () => {
     this.setState({ submitStatus: "loading" });
-    api.createConfigMap("<token>", {
-      name: this.state.envGroupName,
-      namespace: this.state.selectedNamespace,
-      variables: this.state.envVariables,
-    }, { 
-      id: this.context.currentProject.id,
-      cluster_id: this.props.currentCluster.id
-    })
+    api
+      .createConfigMap(
+        "<token>",
+        {
+          name: this.state.envGroupName,
+          namespace: this.state.selectedNamespace,
+          variables: this.state.envVariables,
+        },
+        {
+          id: this.context.currentProject.id,
+          cluster_id: this.props.currentCluster.id,
+        }
+      )
       .then((res) => {
         this.setState({ submitStatus: "successful" });
         this.props.goBack();
@@ -66,7 +72,7 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
       .catch((err) => {
         this.setState({ submitStatus: "Could not create" });
       });
-  }
+  };
 
   updateNamespaces = () => {
     let { currentProject } = this.context;
@@ -99,9 +105,7 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
         <StyledCreateEnvGroup>
           <HeaderSection>
             <Button onClick={this.props.goBack}>
-              <i className="material-icons">
-                keyboard_backspace
-              </i>
+              <i className="material-icons">keyboard_backspace</i>
               Back
             </Button>
             <Title>Create an Environment Group</Title>
@@ -130,7 +134,8 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
 
           <Heading>Destination</Heading>
           <Subtitle>
-            Specify the namespace you would like to create this environment group in.
+            Specify the namespace you would like to create this environment
+            group in.
           </Subtitle>
           <DestinationSection>
             <NamespaceLabel>
@@ -151,7 +156,8 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
 
           <Heading>Environment Variables</Heading>
           <Helper>
-            Set environment variables for your secrets and environment-specific configuration.
+            Set environment variables for your secrets and environment-specific
+            configuration.
           </Helper>
           <KeyValueArray
             namespace={this.state.selectedNamespace}
@@ -316,4 +322,4 @@ const Heading = styled.div<{ isAtTop?: boolean }>`
   margin-top: ${(props) => (props.isAtTop ? "10px" : "30px")};
   display: flex;
   align-items: center;
-`;
+`;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -52,16 +52,20 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
   renderBody = () => {
     if (this.state.createEnvMode) {
       return (
-        <CreateEnvGroup 
+        <CreateEnvGroup
           goBack={() => this.setState({ createEnvMode: false })}
           currentCluster={this.props.currentCluster}
         />
-      )
+      );
     } else {
       return (
         <>
           <ControlRow>
-            <Button onClick={() => this.setState({ createEnvMode: !this.state.createEnvMode })}>
+            <Button
+              onClick={() =>
+                this.setState({ createEnvMode: !this.state.createEnvMode })
+              }
+            >
               <i className="material-icons">add</i> Create Env Group
             </Button>
             <SortFilterWrapper>
@@ -80,12 +84,14 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
             currentCluster={this.props.currentCluster}
             namespace={this.state.namespace}
             sortType={this.state.sortType}
-            setExpandedEnvGroup={(envGroup: any) => this.setState({ expandedEnvGroup: envGroup })}
+            setExpandedEnvGroup={(envGroup: any) =>
+              this.setState({ expandedEnvGroup: envGroup })
+            }
           />
         </>
-      )
+      );
     }
-  }
+  };
 
   renderContents = () => {
     if (this.state.expandedEnvGroup) {
@@ -109,12 +115,10 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
         </>
       );
     }
-  }
+  };
 
   render() {
-    return (
-      <>{this.renderContents()}</>
-    );
+    return <>{this.renderContents()}</>;
   }
 }
 
@@ -178,4 +182,4 @@ const Button = styled.div`
     margin-right: 5px;
     justify-content: center;
   }
-`;
+`;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupList.tsx

@@ -35,14 +35,19 @@ export default class EnvGroupList extends Component<PropsType, StateType> {
   };
 
   updateEnvGroups = () => {
-    api.listConfigMaps("<token>", {
-      namespace: this.props.namespace,
-      cluster_id: this.props.currentCluster.id
-    }, { 
-      id: this.context.currentProject.id 
-    })
+    api
+      .listConfigMaps(
+        "<token>",
+        {
+          namespace: this.props.namespace,
+          cluster_id: this.props.currentCluster.id,
+        },
+        {
+          id: this.context.currentProject.id,
+        }
+      )
       .then((res) => {
-        this.setState({ 
+        this.setState({
           envGroups: res?.data?.items as any,
           loading: false,
         });

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -35,7 +35,7 @@ type StateType = {
 
 const tabOptions = [
   { value: "environment", label: "Environment Variables" },
-  { value: "settings", label: "Settings" }
+  { value: "settings", label: "Settings" },
 ];
 
 export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
@@ -54,14 +54,19 @@ export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
     let namespace = envGroup.metadata.namespace;
 
     this.setState({ saveValuesStatus: "loading" });
-    api.updateConfigMap("<token>", {
-      name,
-      namespace,
-      variables: this.state.values,
-    }, { 
-      id: this.context.currentProject.id,
-      cluster_id: this.props.currentCluster.id
-    })
+    api
+      .updateConfigMap(
+        "<token>",
+        {
+          name,
+          namespace,
+          variables: this.state.values,
+        },
+        {
+          id: this.context.currentProject.id,
+          cluster_id: this.props.currentCluster.id,
+        }
+      )
       .then((res) => {
         this.setState({ saveValuesStatus: "successful" });
       })
@@ -81,7 +86,10 @@ export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
           <TabWrapper>
             <InnerWrapper>
               <Heading>Environment Variables</Heading>
-              <Helper>Set environment variables for your secrets and environment-specific configuration.</Helper>
+              <Helper>
+                Set environment variables for your secrets and
+                environment-specific configuration.
+              </Helper>
               <KeyValueArray
                 namespace={namespace}
                 values={this.state.values || {}}
@@ -101,7 +109,10 @@ export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
           <TabWrapper>
             <InnerWrapper full={true}>
               <Heading>Manage Environment Group</Heading>
-              <Helper>Permanently delete this set of environment variables. This action cannot be undone.</Helper>
+              <Helper>
+                Permanently delete this set of environment variables. This
+                action cannot be undone.
+              </Helper>
               <Button
                 color="#b91133"
                 onClick={() => this.setState({ showDeleteOverlay: true })}
@@ -130,11 +141,16 @@ export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
     let namespace = envGroup.metadata.namespace;
 
     this.setState({ deleting: true });
-    api.deleteConfigMap("<token>", {
-      name,
-      namespace,
-      cluster_id: this.props.currentCluster.id
-    }, { id: this.context.currentProject.id })
+    api
+      .deleteConfigMap(
+        "<token>",
+        {
+          name,
+          namespace,
+          cluster_id: this.props.currentCluster.id,
+        },
+        { id: this.context.currentProject.id }
+      )
       .then((res) => {
         this.props.closeExpanded();
         this.setState({ deleting: false });
@@ -242,7 +258,7 @@ const Button = styled.button`
 
 const InnerWrapper = styled.div<{ full?: boolean }>`
   width: 100%;
-  height: ${props => props.full ? "100%" : "calc(100% - 65px)"};
+  height: ${(props) => (props.full ? "100%" : "calc(100% - 65px)")};
   background: #ffffff11;
   padding: 0 35px;
   padding-bottom: 50px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -351,7 +351,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
                         metaState={metaState}
                         setMetaState={setMetaState}
                         sections={tab.sections}
-
                         // For env group loader
                         namespace={this.props.namespace}
                       />

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -414,7 +414,6 @@ class LaunchTemplate extends Component<PropsType, StateType> {
                   setMetaState={setMetaState}
                   key={tab.name}
                   sections={tab.sections}
-
                   // For env group loader
                   namespace={this.state.selectedNamespace}
                   clusterId={this.state.selectedClusterId}
@@ -744,7 +743,10 @@ class LaunchTemplate extends Component<PropsType, StateType> {
             setActiveValue={(cluster: string) => {
               this.context.setCurrentCluster(this.state.clusterMap[cluster]);
               this.updateNamespaces(this.state.clusterMap[cluster].id);
-              this.setState({ selectedCluster: cluster, selectedClusterId: this.state.clusterMap[cluster].id });
+              this.setState({
+                selectedCluster: cluster,
+                selectedClusterId: this.state.clusterMap[cluster].id,
+              });
             }}
             options={this.state.clusterOptions}
             width="250px"

dashboard/src/main/home/modals/LoadEnvGroupModal.tsx

@@ -30,23 +30,28 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
     loading: true,
     error: false,
     selectedEnvGroup: null as any,
-    buttonStatus: ""
+    buttonStatus: "",
   };
 
   onSubmit = () => {
     this.props.setValues(this.state.selectedEnvGroup.data);
     this.props.closeModal();
-  }
+  };
 
   updateEnvGroups = () => {
-    api.listConfigMaps("<token>", {
-      namespace: this.props.namespace,
-      cluster_id: this.props.clusterId || this.context.currentCluster.id
-    }, { 
-      id: this.context.currentProject.id 
-    })
+    api
+      .listConfigMaps(
+        "<token>",
+        {
+          namespace: this.props.namespace,
+          cluster_id: this.props.clusterId || this.context.currentCluster.id,
+        },
+        {
+          id: this.context.currentProject.id,
+        }
+      )
       .then((res) => {
-        this.setState({ 
+        this.setState({
           envGroups: res?.data?.items as any[],
           loading: false,
         });
@@ -63,10 +68,16 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
 
   renderEnvGroupList = () => {
     if (this.state.loading) {
-      return <LoadingWrapper><Loading /></LoadingWrapper>;
+      return (
+        <LoadingWrapper>
+          <Loading />
+        </LoadingWrapper>
+      );
     } else if (this.state.envGroups.length === 0) {
       return (
-        <Placeholder>No environment groups found in this namespace ({this.props.namespace})</Placeholder>
+        <Placeholder>
+          No environment groups found in this namespace ({this.props.namespace})
+        </Placeholder>
       );
     } else {
       return this.state.envGroups.map((envGroup: any, i: number) => {
@@ -83,7 +94,7 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
         );
       });
     }
-  }
+  };
 
   render() {
     return (
@@ -93,11 +104,12 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
         </CloseButton>
 
         <ModalTitle>Load from Environment Group</ModalTitle>
-        <Subtitle>Select an existing group of environment variables in this namespace ({this.props.namespace}).</Subtitle>
+        <Subtitle>
+          Select an existing group of environment variables in this namespace (
+          {this.props.namespace}).
+        </Subtitle>
 
-        <EnvGroupList>
-          {this.renderEnvGroupList()}
-        </EnvGroupList>
+        <EnvGroupList>{this.renderEnvGroupList()}</EnvGroupList>
 
         <SaveButton
           disabled={!this.state.selectedEnvGroup}
@@ -124,18 +136,18 @@ const LoadingWrapper = styled.div`
   height: 150px;
 `;
 
-const EnvGroupRow = styled.div<{ lastItem?: boolean, isSelected: boolean }>`
+const EnvGroupRow = styled.div<{ lastItem?: boolean; isSelected: boolean }>`
   display: flex;
   width: 100%;
   font-size: 13px;
   border-bottom: 1px solid
-    ${props => props.lastItem ? "#00000000" : "#606166"};
+    ${(props) => (props.lastItem ? "#00000000" : "#606166")};
   color: #ffffff;
   user-select: none;
   align-items: center;
   padding: 10px 0px;
   cursor: pointer;
-  background: ${props => props.isSelected ? "#ffffff11" : ""};
+  background: ${(props) => (props.isSelected ? "#ffffff11" : "")};
   :hover {
     background: #ffffff11;
   }

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -62,13 +62,13 @@ const regionOptions = [
 ];
 
 const machineTypeOptions = [
-  { value: "t2.medium", label: "t2.medium"},
-  { value: "t2.xlarge", label: "t2.xlarge"},
-  { value: "t2.2xlarge", label: "t2.2xlarge"},
-  { value: "t3.medium", label: "t3.medium"},
-  { value: "t3.xlarge", label: "t3.xlarge"},
-  { value: "t3.2xlarge", label: "t3.2xlarge"},
-]
+  { value: "t2.medium", label: "t2.medium" },
+  { value: "t2.xlarge", label: "t2.xlarge" },
+  { value: "t2.2xlarge", label: "t2.2xlarge" },
+  { value: "t3.medium", label: "t3.medium" },
+  { value: "t3.xlarge", label: "t3.xlarge" },
+  { value: "t3.2xlarge", label: "t3.2xlarge" },
+];
 
 // TODO: Consolidate across forms w/ HOC
 class AWSFormSection extends Component<PropsType, StateType> {
@@ -275,7 +275,13 @@ class AWSFormSection extends Component<PropsType, StateType> {
 
   render() {
     let { setSelectedProvisioner } = this.props;
-    let { awsRegion, awsMachineType, awsAccessId, awsSecretKey, selectedInfras } = this.state;
+    let {
+      awsRegion,
+      awsMachineType,
+      awsAccessId,
+      awsSecretKey,
+      selectedInfras,
+    } = this.state;
 
     return (
       <StyledAWSFormSection>

dashboard/src/shared/api.tsx

@@ -737,7 +737,7 @@ const createConfigMap = baseApi<
     namespace: string;
     variables: Record<string, string>;
   },
-  { id: number, cluster_id: number }
+  { id: number; cluster_id: number }
 >("POST", (pathParams) => {
   let { id, cluster_id } = pathParams;
   return `/api/projects/${id}/k8s/configmap/create?cluster_id=${cluster_id}`;
@@ -749,7 +749,7 @@ const updateConfigMap = baseApi<
     namespace: string;
     variables: Record<string, string>;
   },
-  { id: number, cluster_id: number }
+  { id: number; cluster_id: number }
 >("POST", (pathParams) => {
   let { id, cluster_id } = pathParams;
   return `/api/projects/${id}/k8s/configmap/update?cluster_id=${cluster_id}`;
@@ -757,8 +757,8 @@ const updateConfigMap = baseApi<
 
 const deleteConfigMap = baseApi<
   {
-    name: string,
-    namespace: string,
+    name: string;
+    namespace: string;
     cluster_id: number;
   },
   { id: number }