prettier

dashboard/src/components/InfoTooltip.tsx

@@ -11,7 +11,7 @@ type StateType = {
 
 export default class InfoTooltip extends Component<PropsType, StateType> {
   state = {
-    showTooltip: false
+    showTooltip: false,
   };
 
   render() {

dashboard/src/components/RadioSelector.tsx

@@ -53,7 +53,7 @@ const Indicator = styled.div<{ selected: boolean }>`
   height: 16px;
   border: 1px solid #ffffff55;
   margin: 1px 10px 0px 1px;
-  background: ${props => (props.selected ? "#ffffff22" : "#ffffff11")};
+  background: ${(props) => (props.selected ? "#ffffff22" : "#ffffff11")};
 `;
 
 const Circle = styled.div`

dashboard/src/components/ResourceTab.tsx

@@ -26,7 +26,7 @@ type StateType = {
 export default class ResourceTab extends Component<PropsType, StateType> {
   state = {
     expanded: this.props.expanded || false,
-    showTooltip: false
+    showTooltip: false,
   };
 
   renderDropdownIcon = () => {
@@ -95,7 +95,7 @@ export default class ResourceTab extends Component<PropsType, StateType> {
       handleClick,
       selected,
       status,
-      roundAllCorners
+      roundAllCorners,
     } = this.props;
     return (
       <StyledResourceTab

dashboard/src/components/SaveButton.tsx

@@ -132,14 +132,15 @@ const Button = styled.button`
   text-align: left;
   border: 0;
   border-radius: 5px;
-  background: ${props => (!props.disabled ? props.color : "#aaaabb")};
-  box-shadow: ${props => (!props.disabled ? "0 2px 5px 0 #00000030" : "none")};
-  cursor: ${props => (!props.disabled ? "pointer" : "default")};
+  background: ${(props) => (!props.disabled ? props.color : "#aaaabb")};
+  box-shadow: ${(props) =>
+    !props.disabled ? "0 2px 5px 0 #00000030" : "none"};
+  cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
   user-select: none;
   :focus {
     outline: 0;
   }
   :hover {
-    filter: ${props => (!props.disabled ? "brightness(120%)" : "")};
+    filter: ${(props) => (!props.disabled ? "brightness(120%)" : "")};
   }
 `;

dashboard/src/components/Selector.tsx

@@ -17,7 +17,7 @@ type StateType = {};
 
 export default class Selector extends Component<PropsType, StateType> {
   state = {
-    expanded: false
+    expanded: false,
   };
 
   wrapperRef: any = React.createRef();
@@ -192,7 +192,7 @@ const Dropdown = styled.div`
 
 const StyledSelector = styled.div<{ width: string }>`
   position: relative;
-  width: ${props => props.width};
+  width: ${(props) => props.width};
 `;
 
 const MainSelector = styled.div`

dashboard/src/components/TabRegion.tsx

@@ -27,7 +27,7 @@ export default class TabRegion extends Component<PropsType, StateType> {
   componentDidUpdate(prevProps: PropsType) {
     let { options, currentTab } = this.props;
     if (prevProps.options !== options) {
-      if (options.filter(x => x.value === currentTab).length === 0) {
+      if (options.filter((x) => x.value === currentTab).length === 0) {
         this.props.setCurrentTab(this.defaultTab());
       }
     }

dashboard/src/components/TooltipParent.tsx

@@ -11,7 +11,7 @@ type StateType = {
 
 export default class TooltipParent extends Component<PropsType, StateType> {
   state = {
-    showTooltip: false
+    showTooltip: false,
   };
 
   renderTooltip = (): JSX.Element | undefined => {

dashboard/src/components/forms/VeleroForm.tsx

@@ -24,7 +24,7 @@ export default class VeleroForm extends Component<PropsType, StateType> {
     includeNamespaces: [] as string[],
     includeResources: [] as string[],
     storageLocation: "",
-    volumeSnapshotLocations: [] as string[]
+    volumeSnapshotLocations: [] as string[],
   };
 
   render() {

dashboard/src/components/image-selector/ImageList.tsx

@@ -30,7 +30,7 @@ export default class ImageList extends Component<PropsType, StateType> {
   state = {
     loading: true,
     error: false,
-    images: [] as ImageType[]
+    images: [] as ImageType[],
   };
 
   // TODO: Try to unhook before unmount
@@ -42,7 +42,7 @@ export default class ImageList extends Component<PropsType, StateType> {
     if (!this.props.registry) {
       api
         .getProjectRegistries("<token>", {}, { id: currentProject.id })
-        .then(res => {
+        .then((res) => {
           let registries = res.data;
           if (registries.length === 0) {
             this.setState({ loading: false });
@@ -58,10 +58,10 @@ export default class ImageList extends Component<PropsType, StateType> {
                     {},
                     {
                       project_id: currentProject.id,
-                      registry_id: registry.id
+                      registry_id: registry.id,
                     }
                   )
-                  .then(res => {
+                  .then((res) => {
                     res.data.sort((a: any, b: any) =>
                       a.name > b.name ? 1 : -1
                     );
@@ -72,20 +72,20 @@ export default class ImageList extends Component<PropsType, StateType> {
                           kind: registry.service,
                           source: img.uri,
                           name: img.name,
-                          registryId: registry.id
+                          registryId: registry.id,
                         });
                       }
                       return {
                         kind: registry.service,
                         source: img.uri,
                         name: img.name,
-                        registryId: registry.id
+                        registryId: registry.id,
                       };
                     });
                     images.push(...newImg);
                     errors.push(0);
                   })
-                  .catch(err => errors.push(1))
+                  .catch((err) => errors.push(1))
                   .finally(() => {
                     if (i == registries.length - 1) {
                       let error =
@@ -98,11 +98,11 @@ export default class ImageList extends Component<PropsType, StateType> {
                       this.setState({
                         images,
                         loading: false,
-                        error
+                        error,
                       });
                     } else {
                       this.setState({
-                        images
+                        images,
                       });
                     }
 
@@ -112,7 +112,7 @@ export default class ImageList extends Component<PropsType, StateType> {
             );
           });
         })
-        .catch(err => {
+        .catch((err) => {
           console.log(err);
           this.setState({ loading: false, error: true });
         });
@@ -123,10 +123,10 @@ export default class ImageList extends Component<PropsType, StateType> {
           {},
           {
             project_id: currentProject.id,
-            registry_id: this.props.registry.id
+            registry_id: this.props.registry.id,
           }
         )
-        .then(res => {
+        .then((res) => {
           res.data.sort((a: any, b: any) => (a.name > b.name ? 1 : -1));
           // Loop over found image repositories
           let newImg = res.data.map((img: any) => {
@@ -135,14 +135,14 @@ export default class ImageList extends Component<PropsType, StateType> {
                 kind: this.props.registry.service,
                 source: img.uri,
                 name: img.name,
-                registryId: this.props.registry.id
+                registryId: this.props.registry.id,
               });
             }
             return {
               kind: this.props.registry.service,
               source: img.uri,
               name: img.name,
-              registryId: this.props.registry.id
+              registryId: this.props.registry.id,
             };
           });
           images.push(...newImg);
@@ -150,13 +150,13 @@ export default class ImageList extends Component<PropsType, StateType> {
           this.setState({
             images,
             loading: false,
-            error: false
+            error: false,
           });
         })
-        .catch(err =>
+        .catch((err) =>
           this.setState({
             loading: false,
-            error: true
+            error: true,
           })
         );
     }

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -33,7 +33,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     loading: true,
     error: false,
     images: [] as ImageType[],
-    clickedImage: null as ImageType | null
+    clickedImage: null as ImageType | null,
   };
 
   // componentDidMount() {

dashboard/src/components/image-selector/TagList.tsx

@@ -27,7 +27,7 @@ export default class TagList extends Component<PropsType, StateType> {
     loading: true,
     error: false,
     tags: [] as string[],
-    currentTag: this.props.selectedTag
+    currentTag: this.props.selectedTag,
   };
 
   componentDidMount() {
@@ -41,16 +41,16 @@ export default class TagList extends Component<PropsType, StateType> {
         {
           project_id: currentProject.id,
           registry_id: this.props.registryId,
-          repo_name: repoName
+          repo_name: repoName,
         }
       )
-      .then(res => {
+      .then((res) => {
         let tags = res.data.map((tag: any, i: number) => {
           return tag.tag;
         });
         this.setState({ tags, loading: false });
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         this.setState({ loading: false, error: true });
       });

dashboard/src/components/repo-selector/ActionConfEditor.tsx

@@ -31,13 +31,13 @@ type StateType = {
 const defaultActionConfig: ActionConfigType = {
   git_repo: "",
   image_repo_uri: "",
-  git_repo_id: 0
+  git_repo_id: 0,
 };
 
 export default class ActionConfEditor extends Component<PropsType, StateType> {
   state = {
     loading: true,
-    error: false
+    error: false,
   };
 
   renderExpanded = () => {

dashboard/src/components/repo-selector/ActionDetails.tsx

@@ -32,7 +32,7 @@ type StateType = {
 const dummyRegistries = [
   { id: 1, service: "ecr", url: "https://idfkasdfasdf" },
   { id: 12, service: "ecr", url: "https://dfasdfidfkasdfasdf" },
-  { id: 11, service: "gcr", url: "https://idfkasdfasdf" }
+  { id: 11, service: "gcr", url: "https://idfkasdfasdf" },
 ] as any[];
 
 export default class ActionDetails extends Component<PropsType, StateType> {
@@ -40,7 +40,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
     dockerRepo: "",
     error: false,
     registries: null as any[] | null,
-    loading: true
+    loading: true,
   };
 
   componentDidMount() {
@@ -281,7 +281,7 @@ const StatusWrapper = styled.div<{ successful?: boolean }>`
   > i {
     font-size: 18px;
     margin-right: 10px;
-    color: ${props => (props.successful ? "#4797ff" : "#fcba03")};
+    color: ${(props) => (props.successful ? "#4797ff" : "#fcba03")};
   }
 
   animation: statusFloatIn 0.5s;

dashboard/src/components/repo-selector/BranchList.tsx

@@ -24,7 +24,7 @@ export default class BranchList extends Component<PropsType, StateType> {
   state = {
     loading: true,
     error: false,
-    branches: [] as string[]
+    branches: [] as string[],
   };
 
   componentDidMount() {
@@ -41,13 +41,13 @@ export default class BranchList extends Component<PropsType, StateType> {
           git_repo_id: actionConfig.git_repo_id,
           kind: "github",
           owner: actionConfig.git_repo.split("/")[0],
-          name: actionConfig.git_repo.split("/")[1]
+          name: actionConfig.git_repo.split("/")[1],
         }
       )
-      .then(res =>
+      .then((res) =>
         this.setState({ branches: res.data, loading: false, error: false })
       )
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         this.setState({ loading: false, error: true });
       });

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -35,7 +35,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
     error: false,
     contents: [] as FileType[],
     currentDir: "",
-    dockerfiles: [] as string[]
+    dockerfiles: [] as string[],
   };
 
   componentDidMount() {
@@ -61,10 +61,10 @@ export default class ContentsList extends Component<PropsType, StateType> {
           kind: "github",
           owner: actionConfig.git_repo.split("/")[0],
           name: actionConfig.git_repo.split("/")[1],
-          branch: branch
+          branch: branch,
         }
       )
-      .then(res => {
+      .then((res) => {
         let files = [] as FileType[];
         let folders = [] as FileType[];
         res.data.map((x: FileType, i: number) => {
@@ -81,7 +81,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
 
         this.setState({ contents, loading: false, error: false });
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
 
         this.setState({ loading: false, error: true });
@@ -317,7 +317,7 @@ const Indicator = styled.div<{ selected: boolean }>`
   border: 1px solid #ffffff55;
   margin: 1px 10px 0px 1px;
   margin-right: 13px;
-  background: ${props => (props.selected ? "#ffffff22" : "#ffffff11")};
+  background: ${(props) => (props.selected ? "#ffffff22" : "#ffffff11")};
 `;
 
 const Label = styled.div`
@@ -343,7 +343,7 @@ const Row = styled.div<{ isLast: boolean }>`
   padding-left: 10px;
   display: flex;
   align-items: center;
-  border-bottom: ${props => !props.isLast && "1px solid #aaaabb"};
+  border-bottom: ${(props) => !props.isLast && "1px solid #aaaabb"};
   cursor: pointer;
   :hover {
     background: #ffffff22;

dashboard/src/components/repo-selector/NewGHAction.tsx

@@ -27,7 +27,7 @@ export default class NewGHAction extends Component<PropsType, StateType> {
     dockerRepo: "",
     trueDockerPath: this.props.dockerPath,
     loading: false,
-    error: false
+    error: false,
   };
 
   componentDidMount() {
@@ -36,7 +36,7 @@ export default class NewGHAction extends Component<PropsType, StateType> {
         trueDockerPath: this.props.dockerPath.substring(
           1,
           this.props.dockerPath.length
-        )
+        ),
       });
     }
   }

dashboard/src/components/repo-selector/RepoList.tsx

@@ -28,7 +28,7 @@ export default class RepoList extends Component<PropsType, StateType> {
     repos: [] as RepoType[],
     loading: true,
     error: false,
-    searchFilter: ""
+    searchFilter: "",
   };
 
   // TODO: Try to unhook before unmount
@@ -39,7 +39,7 @@ export default class RepoList extends Component<PropsType, StateType> {
     if (!this.props.userId && this.props.userId !== 0) {
       api
         .getGitRepos("<token>", {}, { project_id: currentProject.id })
-        .then(async res => {
+        .then(async (res) => {
           if (res.data.length == 0) {
             this.setState({ loading: false, error: false });
             return;
@@ -56,14 +56,14 @@ export default class RepoList extends Component<PropsType, StateType> {
                   {},
                   { project_id: currentProject.id, git_repo_id: gitrepo.id }
                 )
-                .then(res => {
+                .then((res) => {
                   res.data.forEach((repo: any, id: number) => {
                     repo.GHRepoID = gitrepo.id;
                   });
 
                   resolve(res.data);
                 })
-                .catch(err => {
+                .catch((err) => {
                   errors.push(err);
                   resolve([]);
                 });
@@ -102,11 +102,11 @@ export default class RepoList extends Component<PropsType, StateType> {
             this.setState({
               repos: allRepos,
               loading: false,
-              error: false
+              error: false,
             });
           }
         })
-        .catch(_ => this.setState({ loading: false, error: true }));
+        .catch((_) => this.setState({ loading: false, error: true }));
     } else {
       let grid = this.props.userId;
 
@@ -116,7 +116,7 @@ export default class RepoList extends Component<PropsType, StateType> {
           {},
           { project_id: currentProject.id, git_repo_id: grid }
         )
-        .then(res => {
+        .then((res) => {
           var repos: any = res.data;
 
           repos.forEach((repo: any, id: number) => {
@@ -135,7 +135,7 @@ export default class RepoList extends Component<PropsType, StateType> {
 
           this.setState({ repos: repos, loading: false, error: false });
         })
-        .catch(err => {
+        .catch((err) => {
           this.setState({ loading: false, error: true });
         });
     }

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

@@ -19,7 +19,7 @@ type StateType = {
 
 export default class InputRow extends Component<PropsType, StateType> {
   state = {
-    readOnly: true
+    readOnly: true,
   };
 
   handleChange = (e: ChangeEvent<HTMLInputElement>) => {

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

@@ -67,7 +67,7 @@ const CheckboxOption = styled.div<{ isLast: boolean }>`
   display: flex;
   cursor: pointer;
   align-items: center;
-  border-bottom: ${props => (props.isLast ? "" : "1px solid #ffffff22")};
+  border-bottom: ${(props) => (props.isLast ? "" : "1px solid #ffffff22")};
   font-size: 13px;
 
   :hover {

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

@@ -11,7 +11,7 @@ const StyledHeading = styled.div<{ isAtTop: boolean }>`
   color: white;
   font-weight: 500;
   font-size: 16px;
-  margin-top: ${props => (props.isAtTop ? "0" : "30px")};
+  margin-top: ${(props) => (props.isAtTop ? "0" : "30px")};
   margin-bottom: 5px;
   display: flex;
   align-items: center;

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

@@ -19,7 +19,7 @@ type StateType = {
 
 export default class InputRow extends Component<PropsType, StateType> {
   state = {
-    readOnly: true
+    readOnly: true,
   };
 
   handleChange = (e: ChangeEvent<HTMLInputElement>) => {

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

@@ -14,7 +14,7 @@ type StateType = {
 
 export default class KeyValueArray extends Component<PropsType, StateType> {
   state = {
-    values: [] as any[]
+    values: [] as any[],
   };
 
   componentDidMount() {

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

@@ -9,7 +9,7 @@ type StateType = {
 
 export default class MultiSelect extends Component<PropsType, StateType> {
   state = {
-    options: [] as { label: string; value: string }[]
+    options: [] as { label: string; value: string }[],
   };
 
   renderOptions = () => {};

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

@@ -168,7 +168,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
             <SelectRow
               key={i}
               value={this.props.metaState[key]}
-              setActiveValue={val => this.props.setMetaState({ [key]: val })}
+              setActiveValue={(val) => this.props.setMetaState({ [key]: val })}
               options={item.settings.options}
               dropdownLabel=""
               label={item.label}
@@ -179,11 +179,11 @@ export default class ValuesForm extends Component<PropsType, StateType> {
             <SelectRow
               key={i}
               value={this.props.metaState[key]}
-              setActiveValue={val => this.props.setMetaState({ [key]: val })}
+              setActiveValue={(val) => this.props.setMetaState({ [key]: val })}
               options={[
                 { value: "aws", label: "Amazon Web Services (AWS)" },
                 { value: "gcp", label: "Google Cloud Platform (GCP)" },
-                { value: "do", label: "DigitalOcean" }
+                { value: "do", label: "DigitalOcean" },
               ]}
               dropdownLabel=""
               label={item.label}

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

@@ -20,7 +20,7 @@ type StateType = any;
 const providerMap: any = {
   gke: "gcp",
   eks: "aws",
-  doks: "do"
+  doks: "do",
 };
 
 // Manages the consolidated state of all form tabs ("metastate")

dashboard/src/main/CurrentError.tsx

@@ -12,7 +12,7 @@ type StateType = {};
 
 export default class CurrentError extends Component<PropsType, StateType> {
   state = {
-    expanded: false
+    expanded: false,
   };
 
   componentDidUpdate(prevProps: PropsType) {
@@ -32,7 +32,7 @@ export default class CurrentError extends Component<PropsType, StateType> {
           <StyledCurrentError onClick={() => this.setState({ expanded: true })}>
             <ErrorText>Error: {this.props.currentError}</ErrorText>
             <CloseButton
-              onClick={e => {
+              onClick={(e) => {
                 this.context.setCurrentError(null);
                 e.stopPropagation();
               }}

dashboard/src/main/Main.tsx

@@ -29,7 +29,7 @@ export default class Main extends Component<PropsType, StateType> {
     loading: true,
     isLoggedIn: false,
     isEmailVerified: false,
-    initialized: localStorage.getItem("init") === "true"
+    initialized: localStorage.getItem("init") === "true",
   };
 
   componentDidMount() {
@@ -39,20 +39,20 @@ export default class Main extends Component<PropsType, StateType> {
     error && setCurrentError(error);
     api
       .checkAuth("", {}, {})
-      .then(res => {
+      .then((res) => {
         if (res && res?.data) {
           setUser(res?.data?.id, res?.data?.email);
           this.setState({
             isLoggedIn: true,
             isEmailVerified: res?.data?.email_verified,
             initialized: true,
-            loading: false
+            loading: false,
           });
         } else {
           this.setState({ isLoggedIn: false, loading: false });
         }
       })
-      .catch(err => this.setState({ isLoggedIn: false, loading: false }));
+      .catch((err) => this.setState({ isLoggedIn: false, loading: false }));
   }
 
   initialize = () => {
@@ -63,20 +63,20 @@ export default class Main extends Component<PropsType, StateType> {
   authenticate = () => {
     api
       .checkAuth("", {}, {})
-      .then(res => {
+      .then((res) => {
         if (res && res?.data) {
           this.context.setUser(res?.data?.id, res?.data?.email);
           this.setState({
             isLoggedIn: true,
             isEmailVerified: res?.data?.email_verified,
             initialized: true,
-            loading: false
+            loading: false,
           });
         } else {
           this.setState({ isLoggedIn: false, loading: false });
         }
       })
-      .catch(err => this.setState({ isLoggedIn: false, loading: false }));
+      .catch((err) => this.setState({ isLoggedIn: false, loading: false }));
   };
 
   handleLogOut = () => {
@@ -89,7 +89,9 @@ export default class Main extends Component<PropsType, StateType> {
         this.setState({ isLoggedIn: false, initialized: true });
         localStorage.clear();
       })
-      .catch(err => this.context.setCurrentError(err.response?.data.errors[0]));
+      .catch((err) =>
+        this.context.setCurrentError(err.response?.data.errors[0])
+      );
   };
 
   renderMain = () => {
@@ -166,7 +168,7 @@ export default class Main extends Component<PropsType, StateType> {
         />
         <Route
           path={`/:baseRoute`}
-          render={routeProps => {
+          render={(routeProps) => {
             const baseRoute = routeProps.match.params.baseRoute;
             if (
               this.state.isLoggedIn &&

dashboard/src/main/auth/Login.tsx

@@ -23,7 +23,7 @@ export default class Login extends Component<PropsType, StateType> {
     email: "",
     password: "",
     emailError: false,
-    credentialError: false
+    credentialError: false,
   };
 
   handleKeyDown = (e: any) => {
@@ -57,11 +57,11 @@ export default class Login extends Component<PropsType, StateType> {
           "",
           {
             email: email,
-            password: password
+            password: password,
           },
           {}
         )
-        .then(res => {
+        .then((res) => {
           // TODO: case and set credential error
           if (res?.data?.redirect) {
             window.location.href = res.data.redirect;
@@ -70,7 +70,7 @@ export default class Login extends Component<PropsType, StateType> {
             authenticate();
           }
         })
-        .catch(err =>
+        .catch((err) =>
           this.context.setCurrentError(err.response.data.errors[0])
         );
     }
@@ -137,7 +137,7 @@ export default class Login extends Component<PropsType, StateType> {
                   this.setState({
                     email: e.target.value,
                     emailError: false,
-                    credentialError: false
+                    credentialError: false,
                   })
                 }
                 valid={!credentialError && !emailError}
@@ -152,7 +152,7 @@ export default class Login extends Component<PropsType, StateType> {
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   this.setState({
                     password: e.target.value,
-                    credentialError: false
+                    credentialError: false,
                   })
                 }
                 valid={!credentialError}

dashboard/src/main/auth/Register.tsx

@@ -25,7 +25,7 @@ export default class Register extends Component<PropsType, StateType> {
     password: "",
     confirmPassword: "",
     emailError: false,
-    confirmPasswordError: false
+    confirmPasswordError: false,
   };
 
   handleKeyDown = (e: any) => {
@@ -66,7 +66,7 @@ export default class Register extends Component<PropsType, StateType> {
           "",
           {
             email: email,
-            password: password
+            password: password,
           },
           {}
         )
@@ -78,7 +78,7 @@ export default class Register extends Component<PropsType, StateType> {
             authenticate();
           }
         })
-        .catch(err => setCurrentError(err.response.data.errors[0]));
+        .catch((err) => setCurrentError(err.response.data.errors[0]));
     }
   };
 
@@ -112,7 +112,7 @@ export default class Register extends Component<PropsType, StateType> {
       password,
       confirmPassword,
       emailError,
-      confirmPasswordError
+      confirmPasswordError,
     } = this.state;
 
     return (
@@ -154,7 +154,7 @@ export default class Register extends Component<PropsType, StateType> {
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 this.setState({
                   password: e.target.value,
-                  confirmPasswordError: false
+                  confirmPasswordError: false,
                 })
               }
               valid={true}
@@ -167,7 +167,7 @@ export default class Register extends Component<PropsType, StateType> {
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   this.setState({
                     confirmPassword: e.target.value,
-                    confirmPasswordError: false
+                    confirmPasswordError: false,
                   })
                 }
                 valid={!confirmPasswordError}

dashboard/src/main/auth/ResetPasswordFinalize.tsx

@@ -28,7 +28,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
     passwordError: false,
     tokenError: false,
     loading: true,
-    submitted: false
+    submitted: false,
   };
 
   handleKeyDown = (e: any) => {
@@ -48,21 +48,21 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
         {
           email: emailFromParam,
           token: tokenFromParams,
-          token_id: parseInt(tokenIDFromParams)
+          token_id: parseInt(tokenIDFromParams),
         },
         {}
       )
       .then(() => {
         this.setState({ loading: false });
       })
-      .catch(err => this.setState({ loading: false, tokenError: true }));
+      .catch((err) => this.setState({ loading: false, tokenError: true }));
 
     document.addEventListener("keydown", this.handleKeyDown);
 
     this.setState({
       email: emailFromParam,
       token: tokenFromParams,
-      token_id: parseInt(tokenIDFromParams)
+      token_id: parseInt(tokenIDFromParams),
     });
   }
 
@@ -93,11 +93,11 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
           email: email,
           token: token,
           token_id: token_id,
-          new_password: password
+          new_password: password,
         },
         {}
       )
-      .then(res => {
+      .then((res) => {
         // redirect to dashboard with message after timeout
         this.setState({ submitted: true });
 
@@ -105,7 +105,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
           window.location.href = "/login";
         }, 2000);
       })
-      .catch(err => this.setState({ tokenError: true }));
+      .catch((err) => this.setState({ tokenError: true }));
   };
 
   render() {
@@ -114,7 +114,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
       passwordError,
       submitted,
       loading,
-      tokenError
+      tokenError,
     } = this.state;
 
     let inputSection = (
@@ -127,7 +127,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               this.setState({
                 password: e.target.value,
-                passwordError: false
+                passwordError: false,
               })
             }
             valid={!passwordError}

dashboard/src/main/auth/ResetPasswordInit.tsx

@@ -18,7 +18,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
   state = {
     email: "",
     emailError: false,
-    submitted: false
+    submitted: false,
   };
 
   handleKeyDown = (e: any) => {
@@ -57,14 +57,14 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
         .createPasswordReset(
           "",
           {
-            email: email
+            email: email,
           },
           {}
         )
-        .then(res => {
+        .then((res) => {
           this.setState({ submitted: true });
         })
-        .catch(err =>
+        .catch((err) =>
           this.context.setCurrentError(err.response.data.errors[0])
         );
     }
@@ -83,7 +83,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               this.setState({
                 email: e.target.value,
-                emailError: false
+                emailError: false,
               })
             }
             valid={!emailError}

dashboard/src/main/auth/VerifyEmail.tsx

@@ -16,16 +16,18 @@ type StateType = {
 
 export default class VerifyEmail extends Component<PropsType, StateType> {
   state = {
-    submitted: false
+    submitted: false,
   };
 
   handleSendEmail = (): void => {
     api
       .createEmailVerification("", {}, {})
-      .then(res => {
+      .then((res) => {
         this.setState({ submitted: true });
       })
-      .catch(err => this.context.setCurrentError(err.response.data.errors[0]));
+      .catch((err) =>
+        this.context.setCurrentError(err.response.data.errors[0])
+      );
   };
 
   render() {
@@ -297,7 +299,7 @@ const Logo = styled.img`
 `;
 
 const StatusText = styled.div<{ lessPadding?: boolean }>`
-  padding: ${props => (props.lessPadding ? "10px" : "18px")} 40px;
+  padding: ${(props) => (props.lessPadding ? "10px" : "18px")} 40px;
   font-family: "Work Sans", sans-serif;
   font-size: 14px;
   line-height: 160%;

dashboard/src/main/home/Home.tsx

@@ -50,7 +50,7 @@ class Home extends Component<PropsType, StateType> {
     forceRefreshClusters: false,
     sidebarReady: false,
     handleDO: false,
-    ghRedirect: false
+    ghRedirect: false,
   };
 
   // TODO: Refactor and prevent flash + multiple reload
@@ -64,10 +64,10 @@ class Home extends Component<PropsType, StateType> {
         "<token>",
         {},
         {
-          project_id: currentProject.id
+          project_id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         let creating = false;
 
         for (var i = 0; i < res.data.length; i++) {
@@ -87,7 +87,7 @@ class Home extends Component<PropsType, StateType> {
     let { currentProject } = this.props;
     api
       .getProjects("<token>", {}, { id: user.userId })
-      .then(res => {
+      .then((res) => {
         if (res.data) {
           if (res.data.length === 0) {
             this.props.history.push("new-project");
@@ -134,10 +134,10 @@ class Home extends Component<PropsType, StateType> {
       {
         do_integration_id: integrationId,
         docr_name: this.props.currentProject.name,
-        docr_subscription_tier: tier
+        docr_subscription_tier: tier,
       },
       {
-        project_id: this.props.currentProject.id
+        project_id: this.props.currentProject.id,
       }
     );
     return callback();
@@ -150,10 +150,10 @@ class Home extends Component<PropsType, StateType> {
       {
         do_integration_id: integrationId,
         doks_name: this.props.currentProject.name,
-        do_region: region
+        do_region: region,
       },
       {
-        project_id: this.props.currentProject.id
+        project_id: this.props.currentProject.id,
       }
     );
     return this.props.history.push("dashboard?tab=provisioner");
@@ -167,10 +167,10 @@ class Home extends Component<PropsType, StateType> {
           "<token>",
           {},
           {
-            project_id: currentProject.id
+            project_id: currentProject.id,
           }
         )
-        .then(res => {
+        .then((res) => {
           let tgtIntegration = res.data.find((integration: any) => {
             return integration.client === "do";
           });
@@ -294,8 +294,8 @@ class Home extends Component<PropsType, StateType> {
       } else if (currentView === "dashboard") {
         return (
           <DashboardWrapper>
-            <Dashboard 
-              projectId={this.context.currentProject?.id} 
+            <Dashboard
+              projectId={this.context.currentProject?.id}
               setRefreshClusters={(x: boolean) =>
                 this.setState({ forceRefreshClusters: x })
               }
@@ -335,7 +335,7 @@ class Home extends Component<PropsType, StateType> {
     let { user, setProjects } = this.context;
     api
       .getProjects("<token>", {}, { id: user.userId })
-      .then(res => {
+      .then((res) => {
         if (res.data) {
           setProjects(res.data);
           if (res.data.length > 0) {
@@ -361,7 +361,7 @@ class Home extends Component<PropsType, StateType> {
     // Loop through and delete infra of all clusters we've provisioned
     api
       .getClusters("<token>", {}, { id: currentProject.id })
-      .then(res => {
+      .then((res) => {
         // TODO: promise.map
         for (var i = 0; i < res.data.length; i++) {
           let cluster = res.data[i];
@@ -376,7 +376,7 @@ class Home extends Component<PropsType, StateType> {
                   { eks_name: cluster.name },
                   {
                     project_id: currentProject.id,
-                    infra_id: cluster.infra_id
+                    infra_id: cluster.infra_id,
                   }
                 )
                 .then(() =>
@@ -392,7 +392,7 @@ class Home extends Component<PropsType, StateType> {
                   { gke_name: cluster.name },
                   {
                     project_id: currentProject.id,
-                    infra_id: cluster.infra_id
+                    infra_id: cluster.infra_id,
                   }
                 )
                 .then(() =>
@@ -408,7 +408,7 @@ class Home extends Component<PropsType, StateType> {
                   { doks_name: cluster.name },
                   {
                     project_id: currentProject.id,
-                    infra_id: cluster.infra_id
+                    infra_id: cluster.infra_id,
                   }
                 )
                 .then(() =>

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

@@ -32,7 +32,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       ? localStorage.getItem("SortType")
       : "Newest",
     currentChart: null as ChartType | null,
-    isMetricsInstalled: false
+    isMetricsInstalled: false,
   };
 
   componentDidMount() {
@@ -40,13 +40,13 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       .getPrometheusIsInstalled(
         "<token>",
         {
-          cluster_id: this.context.currentCluster.id
+          cluster_id: this.context.currentCluster.id,
         },
         {
-          id: this.context.currentProject.id
+          id: this.context.currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ isMetricsInstalled: true });
       })
       .catch(() => {
@@ -63,7 +63,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
         sortType: localStorage.getItem("SortType")
           ? localStorage.getItem("SortType")
           : "Newest",
-        currentChart: null
+        currentChart: null,
       });
     }
   }
@@ -138,11 +138,11 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           </Button>
           <SortFilterWrapper>
             <SortSelector
-              setSortType={sortType => this.setState({ sortType })}
+              setSortType={(sortType) => this.setState({ sortType })}
               sortType={this.state.sortType}
             />
             <NamespaceSelector
-              setNamespace={namespace => this.setState({ namespace })}
+              setNamespace={(namespace) => this.setState({ namespace })}
               namespace={this.state.namespace}
             />
           </SortFilterWrapper>

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

@@ -20,7 +20,7 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
   _isMounted = false;
 
   state = {
-    namespaceOptions: [] as { label: string; value: string }[]
+    namespaceOptions: [] as { label: string; value: string }[],
   };
 
   updateOptions = () => {
@@ -30,27 +30,27 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
       .getNamespaces(
         "<token>",
         {
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         },
         { id: currentProject.id }
       )
-      .then(res => {
+      .then((res) => {
         if (this._isMounted) {
           let namespaceOptions: { label: string; value: string }[] = [
-            { label: "All", value: "" }
+            { label: "All", value: "" },
           ];
           res.data.items.forEach(
             (x: { metadata: { name: string } }, i: number) => {
               namespaceOptions.push({
                 label: x.metadata.name,
-                value: x.metadata.name
+                value: x.metadata.name,
               });
             }
           );
           this.setState({ namespaceOptions });
         }
       })
-      .catch(err => {
+      .catch((err) => {
         if (this._isMounted) {
           this.setState({ namespaceOptions: [{ label: "All", value: "" }] });
         }
@@ -80,7 +80,7 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
         </Label>
         <Selector
           activeValue={this.props.namespace}
-          setActiveValue={namespace => this.props.setNamespace(namespace)}
+          setActiveValue={(namespace) => this.props.setNamespace(namespace)}
           options={this.state.namespaceOptions}
           dropdownLabel="Namespace"
           width="150px"

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

@@ -20,8 +20,8 @@ export default class SortSelector extends Component<PropsType, StateType> {
     sortOptions: [
       { label: "Newest", value: "Newest" },
       { label: "Oldest", value: "Oldest" },
-      { label: "Alphabetical", value: "Alphabetical" }
-    ] as { label: string; value: string }[]
+      { label: "Alphabetical", value: "Alphabetical" },
+    ] as { label: string; value: string }[],
   };
 
   render() {
@@ -32,7 +32,7 @@ export default class SortSelector extends Component<PropsType, StateType> {
         </Label>
         <Selector
           activeValue={this.props.sortType}
-          setActiveValue={sortType => this.props.setSortType(sortType)}
+          setActiveValue={(sortType) => this.props.setSortType(sortType)}
           options={this.state.sortOptions}
           dropdownLabel="Sort By"
           width="150px"

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -19,7 +19,7 @@ type StateType = {
 export default class Chart extends Component<PropsType, StateType> {
   state = {
     expand: false,
-    update: [] as any[]
+    update: [] as any[],
   };
 
   renderIcon = () => {
@@ -37,7 +37,7 @@ export default class Chart extends Component<PropsType, StateType> {
     let date = ts.toLocaleDateString();
     let time = ts.toLocaleTimeString([], {
       hour: "numeric",
-      minute: "2-digit"
+      minute: "2-digit",
     });
     return `${time} on ${date}`;
   };

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -31,7 +31,7 @@ export default class ChartList extends Component<PropsType, StateType> {
     controllers: {} as Record<string, Record<string, any>>,
     loading: false,
     error: false,
-    websockets: {} as Record<string, any>
+    websockets: {} as Record<string, any>,
   };
 
   // TODO: promisify
@@ -56,12 +56,12 @@ export default class ChartList extends Component<PropsType, StateType> {
             "pending_upgrade",
             "pending_rollback",
             "superseded",
-            "failed"
-          ]
+            "failed",
+          ],
         },
         { id: currentProject.id }
       )
-      .then(res => {
+      .then((res) => {
         let charts = res.data || [];
         if (this.props.sortType == "Newest") {
           charts.sort((a: any, b: any) =>
@@ -83,7 +83,7 @@ export default class ChartList extends Component<PropsType, StateType> {
         });
         callback(charts);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setCurrentError(JSON.stringify(err));
         this.setState({ loading: false, error: true });
@@ -117,8 +117,8 @@ export default class ChartList extends Component<PropsType, StateType> {
       this.setState({
         controllers: {
           ...this.state.controllers,
-          [chartKey]: chartControllers
-        }
+          [chartKey]: chartControllers,
+        },
       });
     };
 
@@ -155,15 +155,15 @@ export default class ChartList extends Component<PropsType, StateType> {
             {
               namespace: chart.namespace,
               cluster_id: currentCluster.id,
-              storage: StorageType.Secret
+              storage: StorageType.Secret,
             },
             {
               id: currentProject.id,
               name: chart.name,
-              revision: chart.version
+              revision: chart.version,
             }
           )
-          .then(res => {
+          .then((res) => {
             // transform controller array into hash table for easy lookup during updates.
             let chartControllers = {} as Record<string, Record<string, any>>;
             res.data.forEach((c: any) => {
@@ -177,12 +177,12 @@ export default class ChartList extends Component<PropsType, StateType> {
                   {
                     chartLookupTable: {
                       ...this.state.chartLookupTable,
-                      [c.metadata.uid]: `${chart.namespace}-${chart.name}`
+                      [c.metadata.uid]: `${chart.namespace}-${chart.name}`,
                     },
                     controllers: {
                       ...this.state.controllers,
-                      [`${chart.namespace}-${chart.name}`]: chartControllers
-                    }
+                      [`${chart.namespace}-${chart.name}`]: chartControllers,
+                    },
                   },
                   () => {
                     nextController();
@@ -192,7 +192,7 @@ export default class ChartList extends Component<PropsType, StateType> {
             });
             next();
           })
-          .catch(err => {
+          .catch((err) => {
             setCurrentError(JSON.stringify(err));
             return;
           });
@@ -206,7 +206,7 @@ export default class ChartList extends Component<PropsType, StateType> {
       "deployment",
       "statefulset",
       "daemonset",
-      "replicaset"
+      "replicaset",
     ]);
   }
 

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

@@ -8,7 +8,7 @@ import {
   ResourceType,
   ChartType,
   StorageType,
-  ClusterType
+  ClusterType,
 } from "shared/types";
 import { Context } from "shared/Context";
 import api from "shared/api";
@@ -72,7 +72,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     websockets: {} as Record<string, any>,
     url: null as string | null,
     showDeleteOverlay: false,
-    deleting: false
+    deleting: false,
   };
 
   // Retrieve full chart data (includes form and values)
@@ -87,15 +87,15 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         {
           name: chart.name,
           revision: chart.version,
-          id: currentProject.id
+          id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         setCurrentChart(res.data);
         this.setState({ loading: false });
       })
@@ -116,15 +116,15 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           {
             namespace: chart.namespace,
             cluster_id: currentCluster.id,
-            storage: StorageType.Secret
+            storage: StorageType.Secret,
           },
           {
             id: currentProject.id,
             name: chart.name,
-            revision: chart.version
+            revision: chart.version,
           }
         )
-        .then(res => {
+        .then((res) => {
           res.data.forEach(async (c: any) => {
             await new Promise((nextController: (res?: any) => void) => {
               c.metadata.kind = c.kind;
@@ -132,8 +132,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
                 {
                   controllers: {
                     ...this.state.controllers,
-                    [c.metadata.uid]: c
-                  }
+                    [c.metadata.uid]: c,
+                  },
                 },
                 () => {
                   nextController();
@@ -143,7 +143,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           });
           next();
         })
-        .catch(err => setCurrentError(JSON.stringify(err)));
+        .catch((err) => setCurrentError(JSON.stringify(err)));
     });
   };
 
@@ -167,8 +167,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       this.setState({
         controllers: {
           ...this.state.controllers,
-          [object.metadata.uid]: object
-        }
+          [object.metadata.uid]: object,
+        },
       });
     };
 
@@ -201,18 +201,18 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         {
           id: currentProject.id,
           name: currentChart.name,
-          revision: currentChart.version
+          revision: currentChart.version,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({
           components: res.data.Objects,
-          podSelectors: res.data.PodSelectors
+          podSelectors: res.data.PodSelectors,
         });
       })
       .catch(console.log);
@@ -233,7 +233,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     // Weave in preexisting values and convert to yaml
     let valuesYaml = yaml.dump({
       ...(this.props.currentChart.config as Object),
-      ...values
+      ...values,
     });
 
     this.setState({ saveValuesStatus: "loading" });
@@ -244,31 +244,31 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         {
           namespace: this.props.currentChart.namespace,
           storage: StorageType.Secret,
-          values: valuesYaml
+          values: valuesYaml,
         },
         {
           id: currentProject.id,
           name: this.props.currentChart.name,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({
           saveValuesStatus: "successful",
-          forceRefreshRevisions: true
+          forceRefreshRevisions: true,
         });
 
         window.analytics.track("Chart Upgraded", {
           chart: this.props.currentChart.name,
-          values: valuesYaml
+          values: valuesYaml,
         });
       })
-      .catch(err => {
+      .catch((err) => {
         this.setState({ saveValuesStatus: "error" });
         window.analytics.track("Failed to Upgrade Chart", {
           chart: this.props.currentChart.name,
           values: valuesYaml,
-          error: err
+          error: err,
         });
       });
   };
@@ -280,7 +280,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       components,
       showRevisions,
       saveValuesStatus,
-      tabOptions
+      tabOptions,
     } = this.state;
     let { currentChart, setSidebar } = this.props;
     let chart = currentChart;
@@ -374,7 +374,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           value: "@" + tab.name,
           label: tab.label,
           sections: tab.sections,
-          context: tab.context
+          context: tab.context,
         });
       });
     }
@@ -447,7 +447,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     let date = ts.toLocaleDateString();
     let time = ts.toLocaleTimeString([], {
       hour: "numeric",
-      minute: "2-digit"
+      minute: "2-digit",
     });
     return `${time} on ${date}`;
   };
@@ -499,7 +499,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     let { currentChart } = this.props;
 
     window.analytics.track("Opened Chart", {
-      chart: currentChart.name
+      chart: currentChart.name,
     });
 
     this.getChartData(currentChart);
@@ -515,15 +515,15 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         {
           id: currentProject.id,
           name: currentChart.name,
-          revision: currentChart.version
+          revision: currentChart.version,
         }
       )
-      .then(res =>
+      .then((res) =>
         this.setState({ components: res.data.Objects }, () => {
           let ingressName = null;
           for (var i = 0; i < this.state.components.length; i++) {
@@ -536,25 +536,25 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
             .getIngress(
               "<token>",
               {
-                cluster_id: currentCluster.id
+                cluster_id: currentCluster.id,
               },
               {
                 id: currentProject.id,
                 name: ingressName,
-                namespace: `${this.props.currentChart.namespace}`
+                namespace: `${this.props.currentChart.namespace}`,
               }
             )
-            .then(res => {
+            .then((res) => {
               if (res.data?.spec?.rules && res.data?.spec?.rules[0]?.host) {
                 this.setState({
-                  url: `https://${res.data?.spec?.rules[0]?.host}`
+                  url: `https://${res.data?.spec?.rules[0]?.host}`,
                 });
                 return;
               }
 
               if (res.data?.status?.loadBalancer?.ingress) {
                 this.setState({
-                  url: `http://${res.data?.status?.loadBalancer?.ingress[0]?.hostname}`
+                  url: `http://${res.data?.status?.loadBalancer?.ingress[0]?.hostname}`,
                 });
                 return;
               }
@@ -623,10 +623,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           storage: StorageType.Secret,
           name: currentChart.name,
           id: currentProject.id,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ showDeleteOverlay: false });
         this.props.setCurrentChart(null);
       })

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

@@ -20,7 +20,7 @@ type StateType = {
 
 export default class GraphSection extends Component<PropsType, StateType> {
   state = {
-    isExpanded: false
+    isExpanded: false,
   };
 
   renderContents = () => {

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

@@ -27,7 +27,7 @@ export default class ListSection extends Component<PropsType, StateType> {
     showKindLabels: true,
     yaml: "# Select a resource to view its manifest" as string | null,
     wrapperHeight: 0,
-    selectedResource: null as { kind: string; name: string } | null
+    selectedResource: null as { kind: string; name: string } | null,
   };
 
   wrapperRef: any = React.createRef();
@@ -75,7 +75,7 @@ export default class ListSection extends Component<PropsType, StateType> {
           handleClick={() =>
             this.setState({
               yaml: rawYaml,
-              selectedResource: { kind: resource.Kind, name: resource.Name }
+              selectedResource: { kind: resource.Kind, name: resource.Name },
             })
           }
           selected={this.state.yaml === rawYaml}
@@ -99,7 +99,7 @@ export default class ListSection extends Component<PropsType, StateType> {
     return (
       <StyledListSection>
         {this.renderTabs()}
-        <FlexWrapper ref={element => (this.wrapperRef = element)}>
+        <FlexWrapper ref={(element) => (this.wrapperRef = element)}>
           <YamlWrapper>
             <YamlEditor
               value={this.state.yaml}

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

@@ -32,7 +32,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     revisions: [] as ChartType[],
     rollbackRevision: null as number | null,
     loading: false,
-    maxVersion: 0 // Track most recent version even when previewing old revisions
+    maxVersion: 0, // Track most recent version even when previewing old revisions
   };
 
   refreshHistory = () => {
@@ -44,17 +44,17 @@ export default class RevisionSection extends Component<PropsType, StateType> {
         {
           namespace: chart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         { id: currentProject.id, name: chart.name }
       )
-      .then(res => {
+      .then((res) => {
         res.data.sort((a: ChartType, b: ChartType) => {
           return -(a.version - b.version);
         });
         this.setState({
           revisions: res.data,
-          maxVersion: res.data[0].version
+          maxVersion: res.data[0].version,
         });
       })
       .catch(console.log);
@@ -83,7 +83,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     let date = ts.toLocaleDateString();
     let time = ts.toLocaleTimeString([], {
       hour: "numeric",
-      minute: "2-digit"
+      minute: "2-digit",
     });
     return `${time} on ${date}`;
   };
@@ -100,21 +100,21 @@ export default class RevisionSection extends Component<PropsType, StateType> {
         {
           namespace: this.props.chart.namespace,
           storage: StorageType.Secret,
-          revision: revisionNumber
+          revision: revisionNumber,
         },
         {
           id: currentProject.id,
           name: this.props.chart.name,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ loading: false });
         this.refreshHistory().then(() => {
           this.props.setRevision(this.state.revisions[0], true);
         });
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setCurrentError(err.response.data);
         this.setState({ loading: false });

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

@@ -7,7 +7,7 @@ import {
   ChartType,
   RepoType,
   StorageType,
-  ActionConfigType
+  ActionConfigType,
 } from "shared/types";
 import { Context } from "shared/Context";
 
@@ -47,8 +47,8 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     action: {
       git_repo: "",
       image_repo_uri: "",
-      git_repo_id: 0
-    } as ActionConfigType
+      git_repo_id: 0,
+    } as ActionConfigType,
   };
 
   // TODO: read in set image from form context instead of config
@@ -58,7 +58,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     let image = this.props.currentChart.config?.image;
     this.setState({
       selectedImageUrl: image?.repository,
-      selectedTag: image?.tag
+      selectedTag: image?.tag,
     });
 
     api
@@ -67,15 +67,15 @@ export default class SettingsSection extends Component<PropsType, StateType> {
         {
           namespace: this.props.currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         { id: currentProject.id, name: this.props.currentChart.name }
       )
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         this.setState({
           action: res.data.git_action_config,
-          webhookToken: res.data.webhook_token
+          webhookToken: res.data.webhook_token,
         });
       })
       .catch(console.log);
@@ -96,8 +96,8 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     let image = {
       image: {
         repository: img,
-        tag: parsedTag || tag
-      }
+        tag: parsedTag || tag,
+      },
     };
 
     let values = {};
@@ -109,7 +109,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     // Weave in preexisting values and convert to yaml
     let valuesYaml = yaml.dump({
       ...values,
-      ...image
+      ...image,
     });
 
     api
@@ -118,19 +118,19 @@ export default class SettingsSection extends Component<PropsType, StateType> {
         {
           namespace: this.props.currentChart.namespace,
           storage: StorageType.Secret,
-          values: valuesYaml
+          values: valuesYaml,
         },
         {
           id: currentProject.id,
           name: this.props.currentChart.name,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ saveValuesStatus: "successful" });
         this.props.refreshChart();
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         this.setState({ saveValuesStatus: "error" });
       });
@@ -213,15 +213,16 @@ const Button = styled.button`
   text-align: left;
   border: 0;
   border-radius: 5px;
-  background: ${props => (!props.disabled ? props.color : "#aaaabb")};
-  box-shadow: ${props => (!props.disabled ? "0 2px 5px 0 #00000030" : "none")};
-  cursor: ${props => (!props.disabled ? "pointer" : "default")};
+  background: ${(props) => (!props.disabled ? props.color : "#aaaabb")};
+  box-shadow: ${(props) =>
+    !props.disabled ? "0 2px 5px 0 #00000030" : "none"};
+  cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
   user-select: none;
   :focus {
     outline: 0;
   }
   :hover {
-    filter: ${props => (!props.disabled ? "brightness(120%)" : "")};
+    filter: ${(props) => (!props.disabled ? "brightness(120%)" : "")};
   }
 `;
 

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

@@ -23,7 +23,7 @@ type StateType = {
 export default class ValuesYaml extends Component<PropsType, StateType> {
   state = {
     values: "",
-    saveValuesStatus: null as string | null
+    saveValuesStatus: null as string | null,
   };
 
   updateValues() {
@@ -54,19 +54,19 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
         {
           namespace: this.props.currentChart.namespace,
           storage: StorageType.Secret,
-          values: this.state.values
+          values: this.state.values,
         },
         {
           id: currentProject.id,
           name: this.props.currentChart.name,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ saveValuesStatus: "successful" });
         this.props.refreshChart();
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         this.setState({ saveValuesStatus: "error" });
       });

dashboard/src/main/home/cluster-dashboard/expanded-chart/deploy/DeploySection.tsx

@@ -19,7 +19,7 @@ type StateType = {
 export default class StatusSection extends Component<PropsType, StateType> {
   state = {
     events: [] as any[],
-    loading: true
+    loading: true,
   };
 
   renderTabs = () => {

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/Edge.tsx

@@ -23,7 +23,7 @@ type StateType = {
 
 export default class Edge extends Component<PropsType, StateType> {
   state = {
-    showArrowHead: true
+    showArrowHead: true,
   };
 
   render() {
@@ -81,8 +81,8 @@ const StyledEdge: any = styled.div.attrs((props: any) => ({
     top: props.cy + "px",
     left: props.cx + "px",
     transform: "rotate(" + props.angle + "deg)",
-    width: props.length + "px"
-  }
+    width: props.length + "px",
+  },
 }))`
   position: absolute;
   height: ${thickness}px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -82,7 +82,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     currentEdge: null as EdgeType | null,
     openedNode: null as NodeType | null,
     suppressCloseNode: false,
-    suppressDisplay: false
+    suppressDisplay: false,
   };
 
   spaceRef: any = React.createRef();
@@ -122,7 +122,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     let width = this.spaceRef.offsetWidth;
     this.setState({
       originX: Math.round(width / 2),
-      originY: Math.round(height / 2)
+      originY: Math.round(height / 2),
     });
 
     // Suppress trackpad gestures
@@ -164,7 +164,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
             x: this.getRandomIntBetweenRange(-500, 0),
             y: this.getRandomIntBetweenRange(0, 250),
             w: 40,
-            h: 40
+            h: 40,
           };
         case "Deployment":
         case "StatefulSet":
@@ -178,7 +178,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
             x: this.getRandomIntBetweenRange(0, 500),
             y: this.getRandomIntBetweenRange(0, 250),
             w: 40,
-            h: 40
+            h: 40,
           };
         case "Service":
         case "Ingress":
@@ -191,7 +191,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
             x: this.getRandomIntBetweenRange(0, 500),
             y: this.getRandomIntBetweenRange(-250, 0),
             w: 40,
-            h: 40
+            h: 40,
           };
         default:
           return {
@@ -202,7 +202,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
             x: this.getRandomIntBetweenRange(-400, 0),
             y: this.getRandomIntBetweenRange(-250, 0),
             w: 40,
-            h: 40
+            h: 40,
           };
       }
     });
@@ -216,7 +216,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           edges.push({
             type: "ControlRel",
             source: rel.Source,
-            target: rel.Target
+            target: rel.Target,
           });
         }
       });
@@ -225,7 +225,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           edges.push({
             type: "LabelRel",
             source: rel.Source,
-            target: rel.Target
+            target: rel.Target,
           });
         }
       });
@@ -234,7 +234,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           edges.push({
             type: "SpecRel",
             source: rel.Source,
-            target: rel.Target
+            target: rel.Target,
           });
         }
       });
@@ -287,7 +287,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         panX: null,
         panY: null,
         deltaX: null,
-        deltaY: null
+        deltaY: null,
       });
     }
   };
@@ -302,7 +302,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         panX: null,
         panY: null,
         deltaX: null,
-        deltaY: null
+        deltaY: null,
       });
     }
   };
@@ -314,7 +314,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     this.setState({
       nodeClickX: cursorX,
       nodeClickY: cursorY,
-      suppressCloseNode: true
+      suppressCloseNode: true,
     });
 
     // Push to activeIds if not already present
@@ -334,7 +334,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     this.setState({
       activeIds: holding,
       preventBgDrag: true,
-      relocateAllowed: true
+      relocateAllowed: true,
     });
   };
 
@@ -362,7 +362,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       deltaY: null,
       panX: null,
       panY: null,
-      scale: 1
+      scale: 1,
     });
   };
 
@@ -372,7 +372,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       nodeClickX,
       cursorY,
       nodeClickY,
-      suppressCloseNode
+      suppressCloseNode,
     } = this.state;
     this.setState({ dragBg: false, activeIds: [] });
 
@@ -401,7 +401,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       anchorY,
       nodes,
       activeIds,
-      relocateAllowed
+      relocateAllowed,
     } = this.state;
 
     // Suppress navigation gestures
@@ -478,7 +478,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       }
       this.setState({
         originX: Math.round(width / 2) - nudge,
-        originY: Math.round(height / 2)
+        originY: Math.round(height / 2),
       });
     });
   };
@@ -496,7 +496,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       panY,
       anchorX,
       anchorY,
-      relocateAllowed
+      relocateAllowed,
     } = this.state;
 
     let minX = 0;
@@ -606,7 +606,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     return (
       <StyledGraphDisplay
         isExpanded={this.state.isExpanded}
-        ref={element => (this.spaceRef = element)}
+        ref={(element) => (this.spaceRef = element)}
         onMouseMove={this.handleMouseMove}
         onMouseDown={this.state.suppressDisplay ? null : this.handleMouseDown}
         onMouseUp={this.state.suppressDisplay ? null : this.handleMouseUp}

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/InfoPanel.tsx

@@ -23,7 +23,7 @@ type StateType = {
 
 export default class InfoPanel extends Component<PropsType, StateType> {
   state = {
-    wrapperHeight: 0
+    wrapperHeight: 0,
   };
 
   renderIcon = (kind: string) => {
@@ -70,7 +70,7 @@ export default class InfoPanel extends Component<PropsType, StateType> {
             {openedNode.kind}
             <ResourceName>{openedNode.name}</ResourceName>
           </Div>
-          <YamlWrapper ref={element => (this.wrapperRef = element)}>
+          <YamlWrapper ref={(element) => (this.wrapperRef = element)}>
             <YamlEditor
               value={yaml.dump(openedNode.RawYAML)}
               readOnly={true}

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/Node.tsx

@@ -116,8 +116,8 @@ const NodeBlock = styled.div`
 const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   style: {
     top: props.y + "px",
-    left: props.x + "px"
-  }
+    left: props.x + "px",
+  },
 }))`
   position: absolute;
   width: ${(props: NodeType) => props.w + "px"};

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/SelectRegion.tsx

@@ -50,8 +50,8 @@ const StyledSelectRegion: any = styled.div.attrs(
       top: props.y + "px",
       left: props.x + "px",
       width: props.w + "px",
-      height: props.h + "px"
-    }
+      height: props.h + "px",
+    },
   })
 )`
   position: absolute;

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/ZoomPanel.tsx

@@ -12,7 +12,7 @@ type StateType = {
 
 export default class ZoomPanel extends Component<PropsType, StateType> {
   state = {
-    wrapperHeight: 0
+    wrapperHeight: 0,
   };
 
   wrapperRef: any = React.createRef();

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/AreaChart.tsx

@@ -8,7 +8,7 @@ import {
   withTooltip,
   Tooltip,
   TooltipWithBounds,
-  defaultStyles
+  defaultStyles,
 } from "@visx/tooltip";
 
 import { GridRows, GridColumns } from "@visx/grid";
@@ -41,7 +41,7 @@ const tooltipStyles = {
   ...defaultStyles,
   background,
   border: "1px solid white",
-  color: "white"
+  color: "white",
 };
 
 // util
@@ -55,14 +55,14 @@ const formats: { [range: string]: (date: Date) => string } = {
   "1H": hourFormat,
   "6H": hourFormat,
   "1D": hourFormat,
-  "1M": dayFormat
+  "1M": dayFormat,
 };
 
 // accessors
 const getDate = (d: MetricsData) => new Date(d.date * 1000);
 const getValue = (d: MetricsData) => d.value;
 
-const bisectDate = bisector<MetricsData, Date>(d => new Date(d.date * 1000))
+const bisectDate = bisector<MetricsData, Date>((d) => new Date(d.date * 1000))
   .left;
 
 export type AreaProps = {
@@ -84,7 +84,7 @@ export default withTooltip<AreaProps, TooltipData>(
     hideTooltip,
     tooltipData,
     tooltipTop = 0,
-    tooltipLeft = 0
+    tooltipLeft = 0,
   }: AreaProps & WithTooltipProvidedProps<TooltipData>) => {
     globalData = data;
 
@@ -101,7 +101,7 @@ export default withTooltip<AreaProps, TooltipData>(
       () =>
         scaleTime({
           range: [margin.left, innerWidth + margin.left],
-          domain: extent(globalData, getDate) as [Date, Date]
+          domain: extent(globalData, getDate) as [Date, Date],
         }),
       [innerWidth, margin.left, width, height, data]
     );
@@ -110,7 +110,7 @@ export default withTooltip<AreaProps, TooltipData>(
         scaleLinear({
           range: [innerHeight + margin.top, margin.top],
           domain: [0, 1.25 * max(globalData, getValue)],
-          nice: true
+          nice: true,
         }),
       [margin.top, innerHeight, width, height, data]
     );
@@ -140,7 +140,7 @@ export default withTooltip<AreaProps, TooltipData>(
         showTooltip({
           tooltipData: d,
           tooltipLeft: x || 0,
-          tooltipTop: valueScale(getValue(d)) || 0
+          tooltipTop: valueScale(getValue(d)) || 0,
         });
       },
       [showTooltip, valueScale, dateScale, width, height, data]
@@ -188,8 +188,8 @@ export default withTooltip<AreaProps, TooltipData>(
           />
           <AreaClosed<MetricsData>
             data={data}
-            x={d => dateScale(getDate(d)) ?? 0}
-            y={d => valueScale(getValue(d)) ?? 0}
+            x={(d) => dateScale(getDate(d)) ?? 0}
+            y={(d) => valueScale(getValue(d)) ?? 0}
             height={innerHeight}
             yScale={valueScale}
             strokeWidth={1}
@@ -207,7 +207,7 @@ export default withTooltip<AreaProps, TooltipData>(
               fontSize: 11,
               textAnchor: "start",
               fillOpacity: 0.4,
-              dy: 0
+              dy: 0,
             })}
           />
           <AxisBottom
@@ -220,7 +220,7 @@ export default withTooltip<AreaProps, TooltipData>(
               fill: "white",
               fontSize: 11,
               textAnchor: "middle",
-              fillOpacity: 0.4
+              fillOpacity: 0.4,
             })}
           />
           <Bar
@@ -288,7 +288,7 @@ export default withTooltip<AreaProps, TooltipData>(
                 width: 100,
                 paddingTop: 35,
                 textAlign: "center",
-                transform: "translateX(-60px)"
+                transform: "translateX(-60px)",
               }}
             >
               {formatDate(getDate(tooltipData))}

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/MetricsSection.tsx

@@ -74,14 +74,14 @@ const resolutions: { [range: string]: string } = {
   "1H": "15s",
   "6H": "15s",
   "1D": "15s",
-  "1M": "5h"
+  "1M": "5h",
 };
 
 const secondsBeforeNow: { [range: string]: number } = {
   "1H": 60 * 60,
   "6H": 60 * 60 * 6,
   "1D": 60 * 60 * 24,
-  "1M": 60 * 60 * 24 * 30
+  "1M": 60 * 60 * 24 * 30,
 };
 
 export default class MetricsSection extends Component<PropsType, StateType> {
@@ -103,8 +103,8 @@ export default class MetricsSection extends Component<PropsType, StateType> {
     metricsOptions: [
       { value: "cpu", label: "CPU Utilization (vCPUs)" },
       { value: "memory", label: "RAM Utilization (Mi)" },
-      { value: "network", label: "Network Received Bytes (Ki)" }
-    ]
+      { value: "network", label: "Network Received Bytes (Ki)" },
+    ],
   };
 
   componentDidMount() {
@@ -117,17 +117,17 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         .getNGINXIngresses(
           "<token>",
           {
-            cluster_id: currentCluster.id
+            cluster_id: currentCluster.id,
           },
           {
-            id: currentProject.id
+            id: currentProject.id,
           }
         )
-        .then(res => {
+        .then((res) => {
           let metricsOptions = this.state.metricsOptions;
           metricsOptions.push({
             value: "nginx:errors",
-            label: "5XX Error Percentage"
+            label: "5XX Error Percentage",
           });
 
           let ingressOptions = [] as any[];
@@ -139,10 +139,10 @@ export default class MetricsSection extends Component<PropsType, StateType> {
           this.setState({
             metricsOptions,
             ingressOptions,
-            selectedIngress: ingressOptions[0].value
+            selectedIngress: ingressOptions[0].value,
           });
         })
-        .catch(err => {
+        .catch((err) => {
           setCurrentError(JSON.stringify(err));
           this.setState({ controllerOptions: [] as any[] });
         });
@@ -154,15 +154,15 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         {
           id: currentProject.id,
           name: currentChart.name,
-          revision: currentChart.version
+          revision: currentChart.version,
         }
       )
-      .then(res => {
+      .then((res) => {
         // TODO -- check at least one controller returned
         let controllerOptions = [] as any[];
         res.data.map((controller: any) => {
@@ -173,12 +173,12 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         // iterate through the controllers to get the list of pods
         this.setState({
           controllerOptions,
-          selectedController: controllerOptions[0].value
+          selectedController: controllerOptions[0].value,
         });
 
         this.getPods();
       })
-      .catch(err => {
+      .catch((err) => {
         setCurrentError(JSON.stringify(err));
         this.setState({ controllerOptions: [] as any[] });
       });
@@ -251,13 +251,13 @@ export default class MetricsSection extends Component<PropsType, StateType> {
           namespace: namespace,
           startrange: start,
           endrange: end,
-          resolution: resolutions[this.state.selectedRange]
+          resolution: resolutions[this.state.selectedRange],
         },
         {
-          id: currentProject.id
+          id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         // transform the metrics to expected form
         if (kind == "cpu") {
           let data = res.data as MetricsCPUDataResponse;
@@ -273,7 +273,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             ) => {
               return {
                 date: d.date,
-                value: parseFloat(d.cpu)
+                value: parseFloat(d.cpu),
               };
             }
           );
@@ -292,7 +292,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             ) => {
               return {
                 date: d.date,
-                value: parseFloat(d.memory) / (1024 * 1024) // put units in Mi
+                value: parseFloat(d.memory) / (1024 * 1024), // put units in Mi
               };
             }
           );
@@ -311,7 +311,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             ) => {
               return {
                 date: d.date,
-                value: parseFloat(d.bytes) / 1024 // put units in Ki
+                value: parseFloat(d.bytes) / 1024, // put units in Ki
               };
             }
           );
@@ -330,7 +330,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             ) => {
               return {
                 date: d.date,
-                value: parseFloat(d.error_pct) // put units in Ki
+                value: parseFloat(d.error_pct), // put units in Ki
               };
             }
           );
@@ -338,7 +338,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
           this.setState({ data: tData });
         }
       })
-      .catch(err => {
+      .catch((err) => {
         setCurrentError(JSON.stringify(err));
         // this.setState({ controllers: [], loading: false });
       });
@@ -368,13 +368,13 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         "<token>",
         {
           cluster_id: currentCluster.id,
-          selectors
+          selectors,
         },
         {
-          id: currentProject.id
+          id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         let pods = [{ value: "All", label: "All (Summed)" }] as any[];
         res?.data?.forEach((pod: any) => {
           let name = pod?.metadata?.name;
@@ -385,7 +385,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
 
         this.getMetrics();
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setCurrentError(JSON.stringify(err));
         return;
@@ -421,7 +421,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             onClick={() =>
               this.setState({
                 selectedMetric: option.value,
-                selectedMetricLabel: option.label
+                selectedMetricLabel: option.label,
               })
             }
             lastItem={i === this.state.metricsOptions.length - 1}
@@ -494,7 +494,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
             <MetricSelector
               onClick={() =>
                 this.setState({
-                  dropdownExpanded: !this.state.dropdownExpanded
+                  dropdownExpanded: !this.state.dropdownExpanded,
                 })
               }
             >
@@ -518,7 +518,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
                 { value: "1H", label: "1H" },
                 { value: "6H", label: "6H" },
                 { value: "1D", label: "1D" },
-                { value: "1M", label: "1M" }
+                { value: "1M", label: "1M" },
               ]}
               currentTab={this.state.selectedRange}
               setCurrentTab={(x: string) => this.setState({ selectedRange: x })}

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -29,7 +29,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     pods: [] as any[],
     raw: [] as any[],
     showTooltip: [] as boolean[],
-    podPendingDelete: null as any
+    podPendingDelete: null as any,
   };
 
   updatePods = () => {
@@ -59,19 +59,19 @@ export default class ControllerTab extends Component<PropsType, StateType> {
         "<token>",
         {
           cluster_id: currentCluster.id,
-          selectors
+          selectors,
         },
         {
-          id: currentProject.id
+          id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         let pods = res?.data?.map((pod: any) => {
           console.log(pod?.metadata?.namespace);
           return {
             namespace: pod?.metadata?.namespace,
             name: pod?.metadata?.name,
-            phase: pod?.status?.phase
+            phase: pod?.status?.phase,
           };
         });
         let showTooltip = new Array(pods.length);
@@ -90,7 +90,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
           selectPod(res.data[0]);
         }
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setCurrentError(JSON.stringify(err));
         return;
@@ -109,14 +109,14 @@ export default class ControllerTab extends Component<PropsType, StateType> {
           c.status?.availableReplicas ||
             c.status?.replicas - c.status?.unavailableReplicas ||
             0,
-          c.status?.replicas || 0
+          c.status?.replicas || 0,
         ];
       case "statefulset":
         return [c.status?.readyReplicas || 0, c.status?.replicas || 0];
       case "daemonset":
         return [
           c.status?.numberAvailable || 0,
-          c.status?.desiredNumberScheduled || 0
+          c.status?.desiredNumberScheduled || 0,
         ];
       case "job":
         console.log(c);
@@ -163,19 +163,19 @@ export default class ControllerTab extends Component<PropsType, StateType> {
       .deletePod(
         "<token>",
         {
-          cluster_id: this.context.currentCluster.id
+          cluster_id: this.context.currentCluster.id,
         },
         {
           name: pod.metadata?.name,
           namespace: pod.metadata?.namespace,
-          id: this.context.currentProject.id
+          id: this.context.currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         this.updatePods();
         this.setState({ podPendingDelete: null });
       })
-      .catch(err => {
+      .catch((err) => {
         this.context.setCurrentError(JSON.stringify(err));
         this.setState({ podPendingDelete: null });
       });

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/Logs.tsx

@@ -17,7 +17,7 @@ export default class Logs extends Component<PropsType, StateType> {
   state = {
     logs: [] as string[],
     ws: null as any,
-    scroll: true
+    scroll: true,
   };
 
   ws = null as any;
@@ -26,11 +26,11 @@ export default class Logs extends Component<PropsType, StateType> {
   scrollToBottom = (smooth: boolean) => {
     if (smooth) {
       this.parentRef.current.lastElementChild.scrollIntoView({
-        behavior: "smooth"
+        behavior: "smooth",
       });
     } else {
       this.parentRef.current.lastElementChild.scrollIntoView({
-        behavior: "auto"
+        behavior: "auto",
       });
     }
   };

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/StatusSection.tsx

@@ -30,7 +30,7 @@ export default class StatusSection extends Component<PropsType, StateType> {
     selectedPod: {} as any,
     controllers: [] as any[],
     loading: true,
-    podError: ""
+    podError: "",
   };
 
   renderLogs = () => {
@@ -45,7 +45,7 @@ export default class StatusSection extends Component<PropsType, StateType> {
 
   selectPod = (pod: any) => {
     this.setState({
-      selectedPod: pod
+      selectedPod: pod,
     });
   };
 
@@ -112,12 +112,12 @@ export default class StatusSection extends Component<PropsType, StateType> {
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,
-          storage: StorageType.Secret
+          storage: StorageType.Secret,
         },
         {
           id: currentProject.id,
           name: currentChart.name,
-          revision: currentChart.version
+          revision: currentChart.version,
         }
       )
       .then((res: any) => {
@@ -127,7 +127,7 @@ export default class StatusSection extends Component<PropsType, StateType> {
             : res.data;
         this.setState({ controllers, loading: false });
       })
-      .catch(err => {
+      .catch((err) => {
         setCurrentError(JSON.stringify(err));
         this.setState({ controllers: [], loading: false });
       });

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -23,7 +23,7 @@ class Templates extends Component<PropsType, StateType> {
   state = {
     loading: true,
     error: "",
-    clusters: [] as ClusterType[]
+    clusters: [] as ClusterType[],
   };
 
   componentDidMount() {
@@ -39,14 +39,14 @@ class Templates extends Component<PropsType, StateType> {
   updateClusterList = () => {
     api
       .getClusters("<token>", {}, { id: this.context.currentProject.id })
-      .then(res => {
+      .then((res) => {
         if (res.data) {
           this.setState({ clusters: res.data, loading: false, error: "" });
         } else {
           this.setState({ loading: false, error: "Response data missing" });
         }
       })
-      .catch(err => this.setState(err));
+      .catch((err) => this.setState(err));
   };
 
   renderIcon = () => {

dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -20,7 +20,7 @@ export default class ClusterPlaceholder extends Component<
   StateType
 > {
   state = {
-    loading: true
+    loading: true,
   };
 
   componentDidMount() {

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -21,7 +21,7 @@ type PropsType = RouteComponentProps & {
 
 const tabOptions = [
   { label: "Project Overview", value: "overview" },
-  { label: "Provisioner Status", value: "provisioner" }
+  { label: "Provisioner Status", value: "provisioner" },
 ];
 // TODO: rethink this list, should be coupled with tabOptions
 const tabOptionStrings = ["overview", "provisioner"];
@@ -32,7 +32,7 @@ type StateType = {
 
 class Dashboard extends Component<PropsType, StateType> {
   state = {
-    infras: [] as InfraType[]
+    infras: [] as InfraType[],
   };
 
   refreshInfras = () => {
@@ -42,10 +42,10 @@ class Dashboard extends Component<PropsType, StateType> {
           "<token>",
           {},
           {
-            project_id: this.props.projectId
+            project_id: this.props.projectId,
           }
         )
-        .then(res => this.setState({ infras: res.data }))
+        .then((res) => this.setState({ infras: res.data }))
         .catch(console.log);
     }
   };
@@ -72,7 +72,7 @@ class Dashboard extends Component<PropsType, StateType> {
 
   renderTabContents = () => {
     if (this.currentTab() === "provisioner") {
-      return <Provisioner setRefreshClusters={this.props.setRefreshClusters}/>;
+      return <Provisioner setRefreshClusters={this.props.setRefreshClusters} />;
     } else {
       return (
         <>

dashboard/src/main/home/integrations/IntegrationCategories.tsx

@@ -25,7 +25,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
     currentOptions: [] as any[],
     currentTitles: [] as any[],
     currentIds: [] as any[],
-    currentIntegrationData: [] as any[]
+    currentIntegrationData: [] as any[],
   };
 
   componentDidMount() {
@@ -43,7 +43,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
     this.setState({
       currentOptions: [],
       currentTitles: [],
-      currentIntegrationData: []
+      currentIntegrationData: [],
     });
     switch (categoryType) {
       case "kubernetes":
@@ -55,7 +55,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
       case "registry":
         api
           .getProjectRegistries("<token>", {}, { id: currentProject.id })
-          .then(res => {
+          .then((res) => {
             // Sort res.data into service type and sort each service's registry alphabetically
             let grouped: any = {};
             let final: any = [];
@@ -81,7 +81,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
             this.setState({
               currentOptions,
               currentTitles,
-              currentIntegrationData: final
+              currentIntegrationData: final,
             });
           })
           .catch(console.log);
@@ -89,7 +89,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
       case "repo":
         api
           .getGitRepos("<token>", {}, { project_id: currentProject.id })
-          .then(res => {
+          .then((res) => {
             let currentOptions = [] as string[];
             let currentTitles = [] as string[];
             let currentIds = [] as any[];
@@ -102,7 +102,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
               currentOptions,
               currentTitles,
               currentIds,
-              currentIntegrationData: res.data
+              currentIntegrationData: res.data,
             });
           })
           .catch(console.log);
@@ -143,7 +143,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
                   setCurrentIntegration: (x: string) =>
                     this.props.history.push(
                       `/integrations/${this.props.category}/create/${x}`
-                    )
+                    ),
                 })
               }
             >

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -29,7 +29,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
     displayExpanded: this.props.integrations.map(() => false),
     isDelete: false,
     deleteName: "",
-    deleteID: 0
+    deleteID: 0,
   };
 
   allCollapsed = () =>
@@ -43,7 +43,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
 
   collapseAll = () => {
     this.setState({
-      displayExpanded: this.props.integrations.map(() => false)
+      displayExpanded: this.props.integrations.map(() => false),
     });
   };
 
@@ -68,7 +68,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
     this.setState({
       isDelete: true,
       deleteName: this.props.titles[i],
-      deleteID: id
+      deleteID: id,
     });
   };
 
@@ -82,14 +82,14 @@ export default class IntegrationList extends Component<PropsType, StateType> {
           {},
           {
             project_id: currentProject.id,
-            registry_id: this.state.deleteID
+            registry_id: this.state.deleteID,
           }
         )
         .then(() => {
           this.setState({ isDelete: false });
           this.props.updateIntegrationList();
         })
-        .catch(err => {
+        .catch((err) => {
           this.context.setCurrentError(err);
         });
     } else if (this.props.currentCategory === "repo") {
@@ -99,14 +99,14 @@ export default class IntegrationList extends Component<PropsType, StateType> {
           {},
           {
             project_id: currentProject.id,
-            git_repo_id: this.state.deleteID
+            git_repo_id: this.state.deleteID,
           }
         )
         .then(() => {
           this.setState({ isDelete: false });
           this.props.updateIntegrationList();
         })
-        .catch(err => {
+        .catch((err) => {
           this.context.setCurrentError(err);
         });
     }

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -24,19 +24,19 @@ type StateType = {
 
 export default class IntegrationRow extends Component<PropsType, StateType> {
   state = {
-    editMode: false
+    editMode: false,
   };
 
   editButtonOnClick = (e: MouseEvent) => {
     e.stopPropagation();
     if (!this.props.expanded) {
       this.setState({
-        editMode: true
+        editMode: true,
       });
       this.props.toggleCollapse(null);
     } else {
       this.setState({
-        editMode: !this.state.editMode
+        editMode: !this.state.editMode,
       });
       if (this.state.editMode) {
         this.props.toggleCollapse(null);
@@ -95,7 +95,7 @@ export default class IntegrationRow extends Component<PropsType, StateType> {
                     git_repo: "",
                     image_repo_uri: "",
                     git_repo_id: 0,
-                    dockerfile_path: ""
+                    dockerfile_path: "",
                   } as ActionConfigType
                 }
                 setActionConfig={() => {}}

dashboard/src/main/home/integrations/Integrations.tsx

@@ -18,7 +18,7 @@ const IntegrationCategoryStrings = ["registry", "repo"]; /*"kubernetes",*/
 
 class Integrations extends Component<PropsType, StateType> {
   state = {
-    currentIntegrationData: [] as any[]
+    currentIntegrationData: [] as any[],
   };
 
   render = () => (
@@ -26,7 +26,7 @@ class Integrations extends Component<PropsType, StateType> {
       <Switch>
         <Route
           path="/integrations/:category/create/:integration"
-          render={rp => {
+          render={(rp) => {
             const { integration, category } = rp.match.params;
             if (!IntegrationCategoryStrings.includes(category)) {
               this.props.history.push("/integrations");
@@ -62,7 +62,7 @@ class Integrations extends Component<PropsType, StateType> {
         />
         <Route
           path="/integrations/:category"
-          render={rp => {
+          render={(rp) => {
             const currentCategory = rp.match.params.category;
             if (!IntegrationCategoryStrings.includes(currentCategory)) {
               this.props.history.push("/integrations");
@@ -83,7 +83,7 @@ class Integrations extends Component<PropsType, StateType> {
             <IntegrationList
               currentCategory={""}
               integrations={["kubernetes", "registry", "repo"]}
-              setCurrent={x => this.props.history.push(`/integrations/${x}`)}
+              setCurrent={(x) => this.props.history.push(`/integrations/${x}`)}
               isCategory={true}
               updateIntegrationList={() => {}}
             />

dashboard/src/main/home/integrations/create-integration/DockerHubForm.tsx

@@ -20,7 +20,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
     registryURL: "",
     dockerEmail: "",
     dockerUsername: "",
-    dockerPassword: ""
+    dockerPassword: "",
   };
 
   isDisabled = (): boolean => {
@@ -28,7 +28,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
       registryURL,
       dockerEmail,
       dockerUsername,
-      dockerPassword
+      dockerPassword,
     } = this.state;
     if (
       registryURL === "" ||

dashboard/src/main/home/integrations/create-integration/ECRForm.tsx

@@ -25,7 +25,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
     credentialsName: "",
     awsRegion: "",
     awsAccessId: "",
-    awsSecretKey: ""
+    awsSecretKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -53,16 +53,16 @@ export default class ECRForm extends Component<PropsType, StateType> {
         {
           aws_region: awsRegion,
           aws_access_key_id: awsAccessId,
-          aws_secret_access_key: awsSecretKey
+          aws_secret_access_key: awsSecretKey,
         },
         { id: currentProject.id }
       )
-      .then(res =>
+      .then((res) =>
         api.connectECRRegistry(
           "<token>",
           {
             name: credentialsName,
-            aws_integration_id: res.data.id
+            aws_integration_id: res.data.id,
           },
           { id: currentProject.id }
         )

dashboard/src/main/home/integrations/create-integration/EKSForm.tsx

@@ -25,7 +25,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
     clusterEndpoint: "",
     clusterCA: "",
     awsAccessId: "",
-    awsSecretKey: ""
+    awsSecretKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -34,7 +34,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
       clusterEndpoint,
       clusterCA,
       awsAccessId,
-      awsSecretKey
+      awsSecretKey,
     } = this.state;
     if (
       clusterName === "" ||

dashboard/src/main/home/integrations/create-integration/GCRForm.tsx

@@ -28,7 +28,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
     gcpRegion: "",
     serviceAccountKey: "",
     gcpProjectID: "",
-    url: ""
+    url: "",
   };
 
   isDisabled = (): boolean => {
@@ -36,7 +36,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
       credentialsName,
       gcpRegion,
       gcpProjectID,
-      serviceAccountKey
+      serviceAccountKey,
     } = this.state;
     if (
       credentialsName === "" ||
@@ -60,26 +60,26 @@ export default class GCRForm extends Component<PropsType, StateType> {
         {
           gcp_region: this.state.gcpRegion,
           gcp_key_data: this.state.serviceAccountKey,
-          gcp_project_id: this.state.gcpProjectID
+          gcp_project_id: this.state.gcpProjectID,
         },
         {
-          project_id: currentProject.id
+          project_id: currentProject.id,
         }
       )
-      .then(res =>
+      .then((res) =>
         api.connectGCRRegistry(
           "<token>",
           {
             name: this.state.credentialsName,
             gcp_integration_id: res.data.id,
-            url: this.state.url
+            url: this.state.url,
           },
           {
-            id: currentProject.id
+            id: currentProject.id,
           }
         )
       )
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         this.props.closeForm();
       })

dashboard/src/main/home/integrations/create-integration/GKEForm.tsx

@@ -23,7 +23,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
     clusterName: "",
     clusterEndpoint: "",
     clusterCA: "",
-    serviceAccountKey: ""
+    serviceAccountKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -31,7 +31,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
       clusterName,
       clusterEndpoint,
       clusterCA,
-      serviceAccountKey
+      serviceAccountKey,
     } = this.state;
     if (
       clusterName === "" ||

dashboard/src/main/home/integrations/edit-integration/DockerHubForm.tsx

@@ -20,7 +20,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
     registryURL: "",
     dockerEmail: "",
     dockerUsername: "",
-    dockerPassword: ""
+    dockerPassword: "",
   };
 
   isDisabled = (): boolean => {
@@ -28,7 +28,7 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
       registryURL,
       dockerEmail,
       dockerUsername,
-      dockerPassword
+      dockerPassword,
     } = this.state;
     if (
       registryURL === "" ||

dashboard/src/main/home/integrations/edit-integration/ECRForm.tsx

@@ -25,7 +25,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
     credentialsName: "",
     awsRegion: "",
     awsAccessId: "",
-    awsSecretKey: ""
+    awsSecretKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -53,16 +53,16 @@ export default class ECRForm extends Component<PropsType, StateType> {
         {
           aws_region: awsRegion,
           aws_access_key_id: awsAccessId,
-          aws_secret_access_key: awsSecretKey
+          aws_secret_access_key: awsSecretKey,
         },
         { id: currentProject.id }
       )
-      .then(res =>
+      .then((res) =>
         api.connectECRRegistry(
           "<token>",
           {
             name: credentialsName,
-            aws_integration_id: res.data.id
+            aws_integration_id: res.data.id,
           },
           { id: currentProject.id }
         )

dashboard/src/main/home/integrations/edit-integration/EKSForm.tsx

@@ -25,7 +25,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
     clusterEndpoint: "",
     clusterCA: "",
     awsAccessId: "",
-    awsSecretKey: ""
+    awsSecretKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -34,7 +34,7 @@ export default class EKSForm extends Component<PropsType, StateType> {
       clusterEndpoint,
       clusterCA,
       awsAccessId,
-      awsSecretKey
+      awsSecretKey,
     } = this.state;
     if (
       clusterName === "" ||

dashboard/src/main/home/integrations/edit-integration/GCRForm.tsx

@@ -28,7 +28,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
     gcpRegion: "",
     serviceAccountKey: "",
     gcpProjectID: "",
-    url: ""
+    url: "",
   };
 
   isDisabled = (): boolean => {
@@ -36,7 +36,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
       credentialsName,
       gcpRegion,
       gcpProjectID,
-      serviceAccountKey
+      serviceAccountKey,
     } = this.state;
     if (
       credentialsName === "" ||
@@ -60,26 +60,26 @@ export default class GCRForm extends Component<PropsType, StateType> {
         {
           gcp_region: this.state.gcpRegion,
           gcp_key_data: this.state.serviceAccountKey,
-          gcp_project_id: this.state.gcpProjectID
+          gcp_project_id: this.state.gcpProjectID,
         },
         {
-          project_id: currentProject.id
+          project_id: currentProject.id,
         }
       )
-      .then(res =>
+      .then((res) =>
         api.connectGCRRegistry(
           "<token>",
           {
             name: this.state.credentialsName,
             gcp_integration_id: res.data.id,
-            url: this.state.url
+            url: this.state.url,
           },
           {
-            id: currentProject.id
+            id: currentProject.id,
           }
         )
       )
-      .then(res => {
+      .then((res) => {
         console.log(res.data);
         this.props.closeForm();
       })

dashboard/src/main/home/integrations/edit-integration/GKEForm.tsx

@@ -23,7 +23,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
     clusterName: "",
     clusterEndpoint: "",
     clusterCA: "",
-    serviceAccountKey: ""
+    serviceAccountKey: "",
   };
 
   isDisabled = (): boolean => {
@@ -31,7 +31,7 @@ export default class GKEForm extends Component<PropsType, StateType> {
       clusterName,
       clusterEndpoint,
       clusterCA,
-      serviceAccountKey
+      serviceAccountKey,
     } = this.state;
     if (
       clusterName === "" ||

dashboard/src/main/home/launch/Launch.tsx

@@ -14,7 +14,7 @@ import { Link } from "react-router-dom";
 
 const tabOptions = [
   { label: "New Application", value: "docker" },
-  { label: "Community Add-ons", value: "community" }
+  { label: "Community Add-ons", value: "community" },
 ];
 
 type PropsType = {};
@@ -35,17 +35,17 @@ export default class Templates extends Component<PropsType, StateType> {
     addonTemplates: [] as PorterTemplate[],
     applicationTemplates: [] as PorterTemplate[],
     loading: true,
-    error: false
+    error: false,
   };
 
   componentDidMount() {
     api
       .getAddonTemplates("<token>", {}, {})
-      .then(res => {
+      .then((res) => {
         this.setState({ addonTemplates: res.data, error: false }, () => {
           this.state.addonTemplates.sort((a, b) => (a.name > b.name ? 1 : -1));
           this.setState({
-            loading: false
+            loading: false,
           });
         });
       })
@@ -55,17 +55,17 @@ export default class Templates extends Component<PropsType, StateType> {
       .getApplicationTemplates(
         "<token>",
         {
-          repo_url: process.env.APPLICATION_CHART_REPO_URL
+          repo_url: process.env.APPLICATION_CHART_REPO_URL,
         },
         {}
       )
-      .then(res => {
+      .then((res) => {
         this.setState({ applicationTemplates: res.data, error: false }, () => {
           this.state.applicationTemplates.sort((a, b) =>
             a.version > b.version ? 1 : -1
           );
           this.setState({
-            loading: false
+            loading: false,
           });
         });
       })
@@ -238,7 +238,7 @@ export default class Templates extends Component<PropsType, StateType> {
           setCurrentTab={(value: string) =>
             this.setState({
               currentTab: value,
-              currentTemplate: null
+              currentTemplate: null,
             })
           }
         />

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

@@ -33,7 +33,7 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
     loading: true,
     error: false,
     markdown: null as string | null,
-    keywords: [] as string[]
+    keywords: [] as string[],
   };
 
   componentDidMount() {
@@ -50,9 +50,9 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
     api
       .getTemplateInfo("<token>", params, {
         name: this.props.currentTemplate.name.toLowerCase().trim(),
-        version: "latest"
+        version: "latest",
       })
-      .then(res => {
+      .then((res) => {
         let { form, values, markdown, metadata } = res.data;
         let keywords = metadata.keywords;
         this.setState({
@@ -61,10 +61,10 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
           markdown,
           keywords,
           loading: false,
-          error: false
+          error: false,
         });
       })
-      .catch(err => this.setState({ loading: false, error: true }));
+      .catch((err) => this.setState({ loading: false, error: true }));
   };
 
   componentDidUpdate = (prevProps: PropsType) => {

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

@@ -11,7 +11,7 @@ import {
   ActionConfigType,
   ChoiceType,
   ClusterType,
-  StorageType
+  StorageType,
 } from "shared/types";
 import Selector from "components/Selector";
 import ImageSelector from "components/image-selector/ImageSelector";
@@ -60,7 +60,7 @@ type StateType = {
 const defaultActionConfig: ActionConfigType = {
   git_repo: "",
   image_repo_uri: "",
-  git_repo_id: 0
+  git_repo_id: 0,
 };
 
 class LaunchTemplate extends Component<PropsType, StateType> {
@@ -85,7 +85,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
     dockerfilePath: null as string | null,
     folderPath: null as string | null,
     selectedRegistry: null as any | null,
-    env: {}
+    env: {},
   };
 
   createGHAction = (chartName: string, chartNamespace: string) => {
@@ -108,16 +108,16 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           folder_path: this.state.folderPath,
           image_repo_uri: imageRepoUri,
           git_repo_id: actionConfig.git_repo_id,
-          env: this.state.env
+          env: this.state.env,
         },
         {
           project_id: currentProject.id,
           CLUSTER_ID: currentCluster.id,
           RELEASE_NAME: chartName,
-          RELEASE_NAMESPACE: chartNamespace
+          RELEASE_NAMESPACE: chartNamespace,
         }
       )
-      .then(res => console.log(res.data))
+      .then((res) => console.log(res.data))
       .catch(console.log);
   };
 
@@ -140,16 +140,16 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           storage: StorageType.Secret,
           formValues: values,
           namespace: this.state.selectedNamespace,
-          name
+          name,
         },
         {
           id: currentProject.id,
           cluster_id: currentCluster.id,
           name: this.props.currentTemplate.name.toLowerCase().trim(),
-          version: "latest"
+          version: "latest",
         }
       )
-      .then(_ => {
+      .then((_) => {
         // this.props.setCurrentView('cluster-dashboard');
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard
@@ -159,18 +159,18 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           window.analytics.track("Deployed Add-on", {
             name: this.props.currentTemplate.name,
             namespace: this.state.selectedNamespace,
-            values: values
+            values: values,
           });
         });
       })
-      .catch(err => {
+      .catch((err) => {
         this.setState({ saveValuesStatus: "error" });
         setCurrentError(err.response.data.errors[0]);
         window.analytics.track("Failed to Deploy Add-on", {
           name: this.props.currentTemplate.name,
           namespace: this.state.selectedNamespace,
           values: values,
-          error: err
+          error: err,
         });
       });
   };
@@ -235,17 +235,17 @@ class LaunchTemplate extends Component<PropsType, StateType> {
             .createSubdomain(
               "<token>",
               {
-                release_name: name
+                release_name: name,
               },
               {
                 id: currentProject.id,
-                cluster_id: currentCluster.id
+                cluster_id: currentCluster.id,
               }
             )
-            .then(res => {
+            .then((res) => {
               resolve(res.data?.external_url);
             })
-            .catch(err => {
+            .catch((err) => {
               this.setState({ saveValuesStatus: "error" });
             });
         });
@@ -266,17 +266,17 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           storage: StorageType.Secret,
           formValues: values,
           namespace: this.state.selectedNamespace,
-          name
+          name,
         },
         {
           id: currentProject.id,
           cluster_id: currentCluster.id,
           name: this.props.currentTemplate.name.toLowerCase().trim(),
           version: "latest",
-          repo_url: process.env.APPLICATION_CHART_REPO_URL
+          repo_url: process.env.APPLICATION_CHART_REPO_URL,
         }
       )
-      .then(_ => {
+      .then((_) => {
         console.log("Deployed template.");
         if (this.state.sourceType === "repo") {
           console.log("Creating GHA");
@@ -302,7 +302,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
         }
         */
       })
-      .catch(err => {
+      .catch((err) => {
         this.setState({ saveValuesStatus: "error" });
         /*
         try {
@@ -326,7 +326,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       sourceType,
       selectedImageUrl,
       dockerfilePath,
-      folderPath
+      folderPath,
     } = this.state;
 
     // Allow if name is invalid
@@ -356,7 +356,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       selectedRegistry,
       sourceType,
       dockerfilePath,
-      folderPath
+      folderPath,
     } = this.state;
 
     if (this.submitIsDisabled()) {
@@ -423,12 +423,12 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 
     this.setState({
       tabOptions,
-      currentTab: tabOptions[0] && tabOptions[0]["value"]
+      currentTab: tabOptions[0] && tabOptions[0]["value"],
     });
 
     // TODO: query with selected filter once implemented
     let { currentProject, currentCluster } = this.context;
-    api.getClusters("<token>", {}, { id: currentProject.id }).then(res => {
+    api.getClusters("<token>", {}, { id: currentProject.id }).then((res) => {
       if (res.data) {
         let clusterOptions: { label: string; value: string }[] = [];
         let clusterMap: { [clusterId: string]: ClusterType } = {};
@@ -451,11 +451,11 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       .getNamespaces(
         "<token>",
         {
-          cluster_id: id
+          cluster_id: id,
         },
         { id: currentProject.id }
       )
-      .then(res => {
+      .then((res) => {
         if (res.data) {
           let namespaceOptions = res.data.items.map(
             (x: { metadata: { name: string } }) => {
@@ -597,12 +597,12 @@ class LaunchTemplate extends Component<PropsType, StateType> {
             options={[
               {
                 value: "dockerfile",
-                label: "Yes, I am using an existing Dockerfile"
+                label: "Yes, I am using an existing Dockerfile",
               },
               {
                 value: "buildpack",
-                label: "No, I am not using an existing Dockerfile"
-              }
+                label: "No, I am not using an existing Dockerfile",
+              },
             ]}
             selected={this.state.repoType}
             setSelected={(x: string) => this.setState({ repoType: x })}
@@ -647,7 +647,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
                 actionConfig: { ...defaultActionConfig },
                 branch: "",
                 dockerfilePath: null,
-                folderPath: null
+                folderPath: null,
               });
             }}
             setSelectedRegistry={(x: any) => {
@@ -791,7 +791,7 @@ const BlockIcon = styled.img<{ bw?: boolean }>`
   padding: 2px;
   margin-top: 30px;
   margin-bottom: 15px;
-  filter: ${props => (props.bw ? "grayscale(1)" : "")};
+  filter: ${(props) => (props.bw ? "grayscale(1)" : "")};
 `;
 
 const BlockDescription = styled.div`
@@ -832,13 +832,13 @@ const Block = styled.div<{ disabled?: boolean }>`
   align-item: center;
   justify-content: space-between;
   height: 170px;
-  cursor: ${props => (props.disabled ? "" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "" : "pointer")};
   color: #ffffff;
   position: relative;
   background: #26282f;
   box-shadow: 0 3px 5px 0px #00000022;
   :hover {
-    background: ${props => (props.disabled ? "" : "#ffffff11")};
+    background: ${(props) => (props.disabled ? "" : "#ffffff11")};
   }
 
   animation: fadeIn 0.3s 0s;
@@ -893,14 +893,14 @@ const Heading = styled.div<{ isAtTop?: boolean }>`
   font-weight: 500;
   font-size: 16px;
   margin-bottom: 5px;
-  margin-top: ${props => (props.isAtTop ? "10px" : "30px")};
+  margin-top: ${(props) => (props.isAtTop ? "10px" : "30px")};
   display: flex;
   align-items: center;
 `;
 
 const Warning = styled.span<{ highlight: boolean; makeFlush?: boolean }>`
-  color: ${props => (props.highlight ? "#f5cb42" : "")};
-  margin-left: ${props => (props.makeFlush ? "" : "5px")};
+  color: ${(props) => (props.highlight ? "#f5cb42" : "")};
+  margin-left: ${(props) => (props.makeFlush ? "" : "5px")};
 `;
 
 const Required = styled.div`
@@ -935,7 +935,7 @@ const Placeholder = styled.div`
 
 const DarkMatter = styled.div<{ antiHeight?: string }>`
   width: 100%;
-  margin-top: ${props => props.antiHeight || "-15px"};
+  margin-top: ${(props) => props.antiHeight || "-15px"};
 `;
 
 const Subtitle = styled.div`
@@ -979,7 +979,7 @@ const Polymer = styled.div`
   margin-bottom: -3px;
 
   > i {
-    color: ${props => props.theme.containerIcon};
+    color: ${(props) => props.theme.containerIcon};
     font-size: 18px;
     margin-right: 10px;
   }

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

@@ -280,7 +280,7 @@ const Polymer = styled.div`
   margin-bottom: -3px;
 
   > i {
-    color: ${props => props.theme.containerIcon};
+    color: ${(props) => props.theme.containerIcon};
     font-size: 24px;
     margin-left: 12px;
     margin-right: 3px;

dashboard/src/main/home/launch/hardcodedNameDict.tsx

@@ -9,7 +9,7 @@ const hardcodedNames: { [key: string]: string } = {
   ubuntu: "Ubuntu",
   web: "Web Service",
   worker: "Worker",
-  job: "Job"
+  job: "Job",
 };
 
 export default hardcodedNames;

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

@@ -20,7 +20,7 @@ export default class ClusterInstructionsModal extends Component<
 > {
   state = {
     currentTab: "mac",
-    currentPage: 0
+    currentPage: 0,
   };
 
   renderPage = () => {

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

@@ -20,7 +20,7 @@ export default class ClusterInstructionsModal extends Component<
 > {
   state = {
     currentTab: "mac",
-    currentPage: 0
+    currentPage: 0,
   };
 
   renderPage = () => {

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

@@ -14,7 +14,7 @@ type StateType = {
 
 export default class IntegrationsModal extends Component<PropsType, StateType> {
   state = {
-    integrations: [] as any[]
+    integrations: [] as any[],
   };
 
   componentDidMount() {
@@ -22,18 +22,18 @@ export default class IntegrationsModal extends Component<PropsType, StateType> {
     if (category === "kubernetes") {
       api
         .getClusterIntegrations("<token>", {}, {})
-        .then(res => this.setState({ integrations: res.data }))
-        .catch(err => console.log(err));
+        .then((res) => this.setState({ integrations: res.data }))
+        .catch((err) => console.log(err));
     } else if (category === "registry") {
       api
         .getRegistryIntegrations("<token>", {}, {})
-        .then(res => this.setState({ integrations: res.data }))
-        .catch(err => console.log(err));
+        .then((res) => this.setState({ integrations: res.data }))
+        .catch((err) => console.log(err));
     } else {
       api
         .getRepoIntegrations("<token>", {}, {})
-        .then(res => this.setState({ integrations: res.data }))
-        .catch(err => console.log(err));
+        .then((res) => this.setState({ integrations: res.data }))
+        .catch((err) => console.log(err));
     }
   }
 

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

@@ -25,7 +25,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
   state = {
     clusterName: this.context.currentCluster.name,
     status: null as string | null,
-    showDeleteOverlay: false
+    showDeleteOverlay: false,
   };
 
   catchErr = (err: any) => {
@@ -43,10 +43,10 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
         {},
         {
           project_id: currentProject.id,
-          cluster_id: currentCluster.id
+          cluster_id: currentCluster.id,
         }
       )
-      .then(_ => {
+      .then((_) => {
         if (!currentCluster?.infra_id) {
           // TODO: make this more declarative from the Home component
           this.props.setRefreshClusters(true);
@@ -65,7 +65,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
                 { eks_name: currentCluster.name },
                 {
                   project_id: currentProject.id,
-                  infra_id: currentCluster.infra_id
+                  infra_id: currentCluster.infra_id,
                 }
               )
               .then(() => console.log("destroyed provisioned infra."))
@@ -78,7 +78,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
                 { gke_name: currentCluster.name },
                 {
                   project_id: currentProject.id,
-                  infra_id: currentCluster.infra_id
+                  infra_id: currentCluster.infra_id,
                 }
               )
               .then(() => console.log("destroyed provisioned infra."))
@@ -92,7 +92,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
                 { doks_name: currentCluster.name },
                 {
                   project_id: currentProject.id,
-                  infra_id: currentCluster.infra_id
+                  infra_id: currentCluster.infra_id,
                 }
               )
               .then(() => console.log("destroyed provisioned infra."))

dashboard/src/main/home/navbar/Feedback.tsx

@@ -18,7 +18,7 @@ export default class Feedback extends Component<PropsType, StateType> {
   state = {
     feedbackSent: false,
     showFeedbackDropdown: false,
-    feedbackText: ""
+    feedbackText: "",
   };
 
   renderReceipt = () => {
@@ -58,7 +58,7 @@ export default class Feedback extends Component<PropsType, StateType> {
             onClick={() =>
               this.setState({
                 showFeedbackDropdown: false,
-                feedbackSent: false
+                feedbackSent: false,
               })
             }
           />
@@ -70,7 +70,7 @@ export default class Feedback extends Component<PropsType, StateType> {
             <FeedbackInput
               autoFocus={true}
               value={this.state.feedbackText}
-              onChange={e => this.setState({ feedbackText: e.target.value })}
+              onChange={(e) => this.setState({ feedbackText: e.target.value })}
               placeholder="Help us improve this page."
             />
             <SendButton
@@ -92,7 +92,7 @@ export default class Feedback extends Component<PropsType, StateType> {
         <Flex
           onClick={() =>
             this.setState({
-              showFeedbackDropdown: !this.state.showFeedbackDropdown
+              showFeedbackDropdown: !this.state.showFeedbackDropdown,
             })
           }
         >

dashboard/src/main/home/navbar/Navbar.tsx

@@ -17,7 +17,7 @@ type StateType = {
 
 export default class Navbar extends Component<PropsType, StateType> {
   state = {
-    showDropdown: false
+    showDropdown: false,
   };
 
   renderSettingsDropdown = () => {
@@ -86,7 +86,7 @@ const LogOutButton = styled.button`
   border: 0;
   text-align: left;
   background: none;
-  cursor: ${props => (!props.disabled ? "pointer" : "default")};
+  cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
   user-select: none;
   :focus {
     outline: 0;

dashboard/src/main/home/new-project/NewProject.tsx

@@ -19,7 +19,7 @@ type StateType = {
 export default class NewProject extends Component<PropsType, StateType> {
   state = {
     projectName: "",
-    selectedProvider: null as string | null
+    selectedProvider: null as string | null,
   };
 
   render() {

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -28,7 +28,7 @@ export default class InviteList extends Component<PropsType, StateType> {
     invites: [] as InviteType[],
     email: "",
     invalidEmail: false,
-    isHTTPS: process.env.API_SERVER === "dashboard.getporter.dev"
+    isHTTPS: process.env.API_SERVER === "dashboard.getporter.dev",
   };
 
   componentDidMount() {
@@ -44,11 +44,11 @@ export default class InviteList extends Component<PropsType, StateType> {
         "<token>",
         {},
         {
-          id: currentProject.id
+          id: currentProject.id,
         }
       )
-      .then(res => this.setState({ invites: res.data, loading: false }))
-      .catch(err => console.log(err));
+      .then((res) => this.setState({ invites: res.data, loading: false }))
+      .catch((err) => console.log(err));
   };
 
   validateEmail = () => {
@@ -69,11 +69,11 @@ export default class InviteList extends Component<PropsType, StateType> {
         { email: this.state.email },
         { id: currentProject.id }
       )
-      .then(_ => {
+      .then((_) => {
         this.getInviteData();
         this.setState({ email: "" });
       })
-      .catch(err => console.log(err));
+      .catch((err) => console.log(err));
   };
 
   deleteInvite = (index: number) => {
@@ -84,11 +84,11 @@ export default class InviteList extends Component<PropsType, StateType> {
         {},
         {
           id: currentProject.id,
-          invId: this.state.invites[index].id
+          invId: this.state.invites[index].id,
         }
       )
       .then(this.getInviteData)
-      .catch(err => console.log(err));
+      .catch((err) => console.log(err));
   };
 
   replaceInvite = (index: number) => {
@@ -99,18 +99,18 @@ export default class InviteList extends Component<PropsType, StateType> {
         { email: this.state.invites[index].email },
         { id: currentProject.id }
       )
-      .then(_ =>
+      .then((_) =>
         api.deleteInvite(
           "<token>",
           {},
           {
             id: currentProject.id,
-            invId: this.state.invites[index].id
+            invId: this.state.invites[index].id,
           }
         )
       )
       .then(this.getInviteData)
-      .catch(err => console.log(err));
+      .catch((err) => console.log(err));
   };
 
   copyToClip = (index: number) => {
@@ -124,8 +124,8 @@ export default class InviteList extends Component<PropsType, StateType> {
         }`
       )
       .then(
-        function() {},
-        function() {
+        function () {},
+        function () {
           console.log("couldn't copy link to clipboard");
         }
       );
@@ -327,15 +327,16 @@ const InviteButton = styled.div<{ disabled: boolean }>`
   justify-content: center;
   border: 0;
   border-radius: 5px;
-  background: ${props => (!props.disabled ? "#616FEEcc" : "#aaaabb")};
-  box-shadow: ${props => (!props.disabled ? "0 2px 5px 0 #00000030" : "none")};
-  cursor: ${props => (!props.disabled ? "pointer" : "default")};
+  background: ${(props) => (!props.disabled ? "#616FEEcc" : "#aaaabb")};
+  box-shadow: ${(props) =>
+    !props.disabled ? "0 2px 5px 0 #00000030" : "none"};
+  cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
   user-select: none;
   :focus {
     outline: 0;
   }
   :hover {
-    filter: ${props => (!props.disabled ? "brightness(120%)" : "")};
+    filter: ${(props) => (!props.disabled ? "brightness(120%)" : "")};
   }
   margin-bottom: 10px;
 `;

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -17,13 +17,13 @@ type StateType = {
 
 const tabOptions = [
   { value: "manage-access", label: "Manage Access" },
-  { value: "additional-settings", label: "Additional Settings" }
+  { value: "additional-settings", label: "Additional Settings" },
 ];
 
 export default class ProjectSettings extends Component<PropsType, StateType> {
   state = {
     projectName: "",
-    currentTab: "manage-access"
+    currentTab: "manage-access",
   };
 
   componentDidMount() {
@@ -65,7 +65,7 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
           <DeleteButton
             onClick={() => {
               this.context.setCurrentModal("UpdateProjectModal", {
-                currentProject: this.context.currentProject
+                currentProject: this.context.currentProject,
               });
             }}
           >

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

@@ -34,7 +34,7 @@ type StateType = {
 
 const provisionOptions = [
   { value: "ecr", label: "Elastic Container Registry (ECR)" },
-  { value: "eks", label: "Elastic Kubernetes Service (EKS)" }
+  { value: "eks", label: "Elastic Kubernetes Service (EKS)" },
 ];
 
 const regionOptions = [
@@ -57,7 +57,7 @@ const regionOptions = [
   { value: "eu-west-3", label: "Europe (Paris) eu-west-3" },
   { value: "eu-north-1", label: "Europe (Stockholm) eu-north-1" },
   { value: "me-south-1", label: "Middle East (Bahrain) me-south-1" },
-  { value: "sa-east-1", label: "South America (São Paulo) sa-east-1" }
+  { value: "sa-east-1", label: "South America (São Paulo) sa-east-1" },
 ];
 
 // TODO: Consolidate across forms w/ HOC
@@ -68,7 +68,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
     awsSecretKey: "",
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
-    provisionConfirmed: false
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -125,7 +125,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
 
     api
       .createProject("<token>", { name: projectName }, {})
-      .then(res => {
+      .then((res) => {
         let proj = res.data;
         // Need to set project list for dropdown
         // TODO: consolidate into ProjectSection (case on exists in list on set)
@@ -134,10 +134,10 @@ class AWSFormSection extends Component<PropsType, StateType> {
             "<token>",
             {},
             {
-              id: user.userId
+              id: user.userId,
             }
           )
-          .then(res => {
+          .then((res) => {
             setProjects(res.data);
             setCurrentProject(proj, () => {
               callback && callback();
@@ -159,16 +159,16 @@ class AWSFormSection extends Component<PropsType, StateType> {
         {
           aws_region: awsRegion,
           aws_access_key_id: awsAccessId,
-          aws_secret_access_key: awsSecretKey
+          aws_secret_access_key: awsSecretKey,
         },
         { id: currentProject.id }
       )
-      .then(res =>
+      .then((res) =>
         api.provisionECR(
           "<token>",
           {
             aws_integration_id: res.data.id,
-            ecr_name: `${currentProject.name}-registry`
+            ecr_name: `${currentProject.name}-registry`,
           },
           { id: currentProject.id }
         )
@@ -189,16 +189,16 @@ class AWSFormSection extends Component<PropsType, StateType> {
           aws_region: awsRegion,
           aws_access_key_id: awsAccessId,
           aws_secret_access_key: awsSecretKey,
-          aws_cluster_id: clusterName
+          aws_cluster_id: clusterName,
         },
         { id: currentProject.id }
       )
-      .then(res =>
+      .then((res) =>
         api.provisionEKS(
           "<token>",
           {
             aws_integration_id: res.data.id,
-            eks_name: clusterName
+            eks_name: clusterName,
           },
           { id: currentProject.id }
         )
@@ -336,7 +336,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
             checked={this.state.provisionConfirmed}
             toggle={() =>
               this.setState({
-                provisionConfirmed: !this.state.provisionConfirmed
+                provisionConfirmed: !this.state.provisionConfirmed,
               })
             }
             label="I understand and wish to proceed"

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

@@ -30,13 +30,13 @@ type StateType = {
 
 const provisionOptions = [
   { value: "docr", label: "Digital Ocean Container Registry" },
-  { value: "doks", label: "Digital Ocean Kubernetes Service" }
+  { value: "doks", label: "Digital Ocean Kubernetes Service" },
 ];
 
 const tierOptions = [
   { value: "basic", label: "Basic" },
   { value: "starter", label: "Starter" },
-  { value: "professional", label: "Professional" }
+  { value: "professional", label: "Professional" },
 ];
 
 const regionOptions = [
@@ -49,7 +49,7 @@ const regionOptions = [
   { value: "sfo2", label: "San Francisco 2" },
   { value: "sfo3", label: "San Francisco 3" },
   { value: "sgp1", label: "Singapore 1" },
-  { value: "tor1", label: "Toronto 1" }
+  { value: "tor1", label: "Toronto 1" },
 ];
 
 // TODO: Consolidate across forms w/ HOC
@@ -58,7 +58,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     selectedInfras: [...provisionOptions],
     subscriptionTier: "starter",
     doRegion: "nyc1",
-    provisionConfirmed: false
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -108,7 +108,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
 
     api
       .createProject("<token>", { name: projectName }, {})
-      .then(async res => {
+      .then(async (res) => {
         let proj = res.data;
 
         // Need to set project list for dropdown
@@ -117,7 +117,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
           "<token>",
           {},
           {
-            id: user.userId
+            id: user.userId,
           }
         );
         setProjects(res_1.data);
@@ -220,7 +220,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
             checked={this.state.provisionConfirmed}
             toggle={() =>
               this.setState({
-                provisionConfirmed: !this.state.provisionConfirmed
+                provisionConfirmed: !this.state.provisionConfirmed,
               })
             }
             label="I understand and wish to proceed"

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

@@ -19,7 +19,7 @@ type StateType = {
 
 class ExistingClusterSection extends Component<PropsType, StateType> {
   state = {
-    buttonStatus: ""
+    buttonStatus: "",
   };
 
   onCreateProject = () => {
@@ -29,16 +29,16 @@ class ExistingClusterSection extends Component<PropsType, StateType> {
     this.setState({ buttonStatus: "loading" });
     api
       .createProject("<token>", { name: projectName }, {})
-      .then(res =>
+      .then((res) =>
         api.getProjects(
           "<token>",
           {},
           {
-            id: user.userId
+            id: user.userId,
           }
         )
       )
-      .then(res => {
+      .then((res) => {
         if (res.data) {
           setProjects(res.data);
           if (res.data.length > 0) {

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

@@ -34,7 +34,7 @@ type StateType = {
 
 const provisionOptions = [
   { value: "gcr", label: "Google Container Registry (GCR)" },
-  { value: "gke", label: "Google Kubernetes Engine (GKE)" }
+  { value: "gke", label: "Google Kubernetes Engine (GKE)" },
 ];
 
 const regionOptions = [
@@ -61,7 +61,7 @@ const regionOptions = [
   { value: "us-west1", label: "us-west1" },
   { value: "us-west2", label: "us-west2" },
   { value: "us-west3", label: "us-west3" },
-  { value: "us-west4", label: "us-west4" }
+  { value: "us-west4", label: "us-west4" },
 ];
 
 class GCPFormSection extends Component<PropsType, StateType> {
@@ -71,7 +71,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
     gcpKeyData: "",
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
-    provisionConfirmed: false
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -127,7 +127,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
 
     api
       .createProject("<token>", { name: projectName }, {})
-      .then(res => {
+      .then((res) => {
         let proj = res.data;
 
         // Need to set project list for dropdown
@@ -137,10 +137,10 @@ class GCPFormSection extends Component<PropsType, StateType> {
             "<token>",
             {},
             {
-              id: user.userId
+              id: user.userId,
             }
           )
-          .then(res => {
+          .then((res) => {
             setProjects(res.data);
             setCurrentProject(proj);
             callback && callback();
@@ -158,7 +158,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
       .createGCR(
         "<token>",
         {
-          gcp_integration_id: id
+          gcp_integration_id: id,
         },
         { project_id: currentProject.id }
       )
@@ -176,11 +176,11 @@ class GCPFormSection extends Component<PropsType, StateType> {
         "<token>",
         {
           gke_name: clusterName,
-          gcp_integration_id: id
+          gcp_integration_id: id,
         },
         { project_id: currentProject.id }
       )
-      .then(res => {
+      .then((res) => {
         this.props.history.push("dashboard?tab=provisioner");
       })
       .catch(this.catchError);
@@ -195,11 +195,11 @@ class GCPFormSection extends Component<PropsType, StateType> {
         {
           gcp_region: gcpRegion,
           gcp_key_data: gcpKeyData,
-          gcp_project_id: gcpProjectId
+          gcp_project_id: gcpProjectId,
         },
         { project_id: currentProject.id }
       )
-      .then(res => {
+      .then((res) => {
         if (res?.data) {
           console.log("gcp provisioned with response: ", res.data);
           let { id } = res.data;
@@ -325,7 +325,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
             checked={this.state.provisionConfirmed}
             toggle={() =>
               this.setState({
-                provisionConfirmed: !this.state.provisionConfirmed
+                provisionConfirmed: !this.state.provisionConfirmed,
               })
             }
             label="I understand and wish to proceed"

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

@@ -56,7 +56,7 @@ const StatusIcon = styled.div<{ color?: string }>`
   justify-content: center;
   width: 20px;
   font-size: 16px;
-  color: ${props => (props.color ? props.color : "#68c49c")};
+  color: ${(props) => (props.color ? props.color : "#68c49c")};
   margin-left: 10px;
 `;
 

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

@@ -40,7 +40,7 @@ class Provisioner extends Component<PropsType, StateType> {
     infras: [] as InfraType[],
     selectedInfra: null as InfraType,
     loading: true,
-    currentProject: this.context.currentProject
+    currentProject: this.context.currentProject,
   };
 
   selectInfra = (infra: InfraType) => {
@@ -67,7 +67,7 @@ class Provisioner extends Component<PropsType, StateType> {
         infra.status == "created" &&
         prevInfraStates[infra.id] != "created"
       ) {
-        this.props.setRefreshClusters(true)
+        this.props.setRefreshClusters(true);
       }
     });
   }
@@ -84,25 +84,25 @@ class Provisioner extends Component<PropsType, StateType> {
         "<token>",
         {},
         {
-          project_id: currentProject.id
+          project_id: currentProject.id,
         }
       )
-      .then(res => {
+      .then((res) => {
         let infras = res.data.sort((a: InfraType, b: InfraType) => {
           return b.id - a.id;
         });
 
-        let selectedInfra = this.state.selectedInfra
+        let selectedInfra = this.state.selectedInfra;
 
         if (!selectedInfra) {
-          selectedInfra = infras[0]
+          selectedInfra = infras[0];
         }
 
         this.setState({
           error: false,
           infras,
           loading: false,
-          selectedInfra
+          selectedInfra,
         });
       })
       .catch();
@@ -140,10 +140,14 @@ class Provisioner extends Component<PropsType, StateType> {
     return (
       <StyledProvisioner>
         You have not provisioned any resources for this project through Porter.{" "}
-        <RefreshText onClick={() => {
-          this.setState({ loading: true }); 
-          this.refresh()
-        }}>Refresh</RefreshText>
+        <RefreshText
+          onClick={() => {
+            this.setState({ loading: true });
+            this.refresh();
+          }}
+        >
+          Refresh
+        </RefreshText>
       </StyledProvisioner>
     );
   }

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

@@ -27,7 +27,7 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
     ws: null as any,
     scroll: true,
     maxStep: 0,
-    error: false
+    error: false,
   };
 
   ws = null as any;
@@ -35,7 +35,7 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
 
   scrollToBottom = () => {
     this.parentRef.current.lastElementChild.scrollIntoView({
-      behavior: "auto"
+      behavior: "auto",
     });
   };
 
@@ -139,7 +139,7 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
 
       if (err) {
         window.analytics.track("Provisioning Error", {
-          error: err
+          error: err,
         });
         let e = ansiparse(err).map((el: any) => {
           return el.text;
@@ -165,13 +165,13 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
       this.setState(
         {
           logs: [...this.state.logs, ...logs],
-          maxStep: validEvents[validEvents.length - 1]["total_resources"]
+          maxStep: validEvents[validEvents.length - 1]["total_resources"],
         },
         () => {
           setTimeout(() => {
             this.props.updateInfras();
-          }, 3000)
-          
+          }, 3000);
+
           this.scrollToBottom();
         }
       );

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

@@ -29,7 +29,7 @@ const providers = ["aws", "gcp", "do"];
 class NewProject extends Component<PropsType, StateType> {
   state = {
     selectedProvider: null as string | null,
-    infras: [] as InfraType[]
+    infras: [] as InfraType[],
   };
 
   // Handle any submission (pre-status) error
@@ -65,7 +65,7 @@ class NewProject extends Component<PropsType, StateType> {
                 <Highlight
                   onClick={() =>
                     this.setState({
-                      selectedProvider: "skipped"
+                      selectedProvider: "skipped",
                     })
                   }
                 >
@@ -227,7 +227,7 @@ const Icon = styled.img<{ bw?: boolean }>`
   height: 42px;
   margin-top: 30px;
   margin-bottom: 15px;
-  filter: ${props => (props.bw ? "grayscale(1)" : "")};
+  filter: ${(props) => (props.bw ? "grayscale(1)" : "")};
 `;
 
 const BlockDescription = styled.div`
@@ -268,13 +268,13 @@ const Block = styled.div<{ disabled?: boolean }>`
   align-item: center;
   justify-content: space-between;
   height: 170px;
-  cursor: ${props => (props.disabled ? "" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "" : "pointer")};
   color: #ffffff;
   position: relative;
   background: #26282f;
   box-shadow: 0 3px 5px 0px #00000022;
   :hover {
-    background: ${props => (props.disabled ? "" : "#ffffff11")};
+    background: ${(props) => (props.disabled ? "" : "#ffffff11")};
   }
 
   animation: fadeIn 0.3s 0s;

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -34,7 +34,7 @@ class ClusterSection extends Component<PropsType, StateType> {
     showDrawer: false,
     initializedDrawer: false,
     clusters: [] as ClusterType[],
-    prevProjectId: this.context.currentProject.id
+    prevProjectId: this.context.currentProject.id,
   };
 
   updateClusters = () => {
@@ -43,10 +43,10 @@ class ClusterSection extends Component<PropsType, StateType> {
     // TODO: query with selected filter once implemented
     api
       .getClusters("<token>", {}, { id: currentProject.id })
-      .then(res => {
+      .then((res) => {
         window.analytics.identify(user.userId, {
           currentProject,
-          clusters: res.data
+          clusters: res.data,
         });
 
         this.props.setWelcome(false);
@@ -84,7 +84,7 @@ class ClusterSection extends Component<PropsType, StateType> {
           }
         }
       })
-      .catch(err => this.props.setWelcome(true));
+      .catch((err) => this.props.setWelcome(true));
   };
 
   componentDidMount() {
@@ -131,7 +131,7 @@ class ClusterSection extends Component<PropsType, StateType> {
 
   showClusterConfigModal = () => {
     this.context.setCurrentModal("ClusterConfigModal", {
-      updateClusters: this.updateClusters
+      updateClusters: this.updateClusters,
     });
   };
 

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -17,7 +17,7 @@ type StateType = {
 
 class ProjectSection extends Component<PropsType, StateType> {
   state = {
-    expanded: false
+    expanded: false,
   };
 
   wrapperRef: any = React.createRef();

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -36,7 +36,7 @@ class Sidebar extends Component<PropsType, StateType> {
     initializedSidebar: false,
     pressingCtrl: false,
     showTooltip: false,
-    forceCloseDrawer: false
+    forceCloseDrawer: false,
   };
 
   componentDidMount() {
@@ -73,7 +73,7 @@ class Sidebar extends Component<PropsType, StateType> {
   toggleSidebar = (): void => {
     this.setState({
       showSidebar: !this.state.showSidebar,
-      forceCloseDrawer: true
+      forceCloseDrawer: true,
     });
   };
 
@@ -267,11 +267,11 @@ const NavButton = styled.div`
 
 const Img = styled.img<{ enlarge?: boolean }>`
   padding: 4px 4px;
-  height: ${props => (props.enlarge ? "27px" : "23px")};
-  width: ${props => (props.enlarge ? "27px" : "23px")};
+  height: ${(props) => (props.enlarge ? "27px" : "23px")};
+  width: ${(props) => (props.enlarge ? "27px" : "23px")};
   border-radius: 3px;
   position: absolute;
-  left: ${props => (props.enlarge ? "19px" : "20px")};
+  left: ${(props) => (props.enlarge ? "19px" : "20px")};
   top: 9px;
 `;
 

dashboard/src/shared/Context.tsx

@@ -72,9 +72,9 @@ class ContextProvider extends Component {
         currentProject: null,
         projects: [],
         user: null,
-        devOpsMode: true
+        devOpsMode: true,
       });
-    }
+    },
   };
 
   render() {

dashboard/src/shared/ansiparser.tsx

@@ -8,7 +8,7 @@ const foregroundColors = {
   "35": "magenta",
   "36": "cyan",
   "37": "white",
-  "90": "grey"
+  "90": "grey",
 } as Record<string, string>;
 
 const backgroundColors = {
@@ -19,13 +19,13 @@ const backgroundColors = {
   "44": "blue",
   "45": "magenta",
   "46": "cyan",
-  "47": "white"
+  "47": "white",
 } as Record<string, string>;
 
 const styles = {
   "1": "bold",
   "3": "italic",
-  "4": "underline"
+  "4": "underline",
 } as Record<string, string>;
 
 const eraseChar = (matchingText: any, result: any) => {