ran prettier

.github/workflows/dev.yaml

@@ -1,46 +1,46 @@
 name: Deploy to production
 on:
   push:
-    branches: 
-    - dev
+    branches:
+      - dev
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-    - name: Set up Cloud SDK
-      uses: google-github-actions/setup-gcloud@master
-      with:
-        project_id: ${{ secrets.GCP_PROJECT_ID }}
-        service_account_key: ${{ secrets.GCP_SA_KEY }}
-        export_default_credentials: true
-    - name: Install kubectl
-      run: |
-        sudo apt-get install kubectl
-    - name: Log in to gcloud CLI
-      run: gcloud auth configure-docker
-    - name: Checkout
-      uses: actions/checkout@v2.3.4
-    - name: Write Dashboard Environment Variables
-      run: |
-        cat >./dashboard/.env <<EOL
-        NODE_ENV=production
-        API_SERVER=dashboard.dev.getporter.dev
-        FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
-        DISCORD_KEY=${{secrets.DISCORD_KEY}}
-        DISCORD_CID=${{secrets.DISCORD_CID}}
-        FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
-        POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
-        POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
-        EOL
-    - name: Build
-      run: |
-        DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:dev -f ./docker/Dockerfile
-    - name: Push
-      run: |
-        docker push gcr.io/porter-dev-273614/porter:dev
-    - name: Deploy to cluster
-      run: |
-        gcloud container clusters get-credentials \
-          dev --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
-          
-        kubectl rollout restart deployment/porter
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@master
+        with:
+          project_id: ${{ secrets.GCP_PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+      - name: Install kubectl
+        run: |
+          sudo apt-get install kubectl
+      - name: Log in to gcloud CLI
+        run: gcloud auth configure-docker
+      - name: Checkout
+        uses: actions/checkout@v2.3.4
+      - name: Write Dashboard Environment Variables
+        run: |
+          cat >./dashboard/.env <<EOL
+          NODE_ENV=production
+          API_SERVER=dashboard.dev.getporter.dev
+          FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
+          DISCORD_KEY=${{secrets.DISCORD_KEY}}
+          DISCORD_CID=${{secrets.DISCORD_CID}}
+          FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
+          POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
+          POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
+          EOL
+      - name: Build
+        run: |
+          DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:dev -f ./docker/Dockerfile
+      - name: Push
+        run: |
+          docker push gcr.io/porter-dev-273614/porter:dev
+      - name: Deploy to cluster
+        run: |
+          gcloud container clusters get-credentials \
+            dev --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
+            
+          kubectl rollout restart deployment/porter

.github/workflows/production.yaml

@@ -1,46 +1,46 @@
 name: Deploy to production
 on:
   push:
-    branches: 
-    - production
+    branches:
+      - production
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-    - name: Set up Cloud SDK
-      uses: google-github-actions/setup-gcloud@master
-      with:
-        project_id: ${{ secrets.GCP_PROJECT_ID }}
-        service_account_key: ${{ secrets.GCP_SA_KEY }}
-        export_default_credentials: true
-    - name: Install kubectl
-      run: |
-        sudo apt-get install kubectl
-    - name: Log in to gcloud CLI
-      run: gcloud auth configure-docker
-    - name: Checkout
-      uses: actions/checkout@v2.3.4
-    - name: Write Dashboard Environment Variables
-      run: |
-        cat >./dashboard/.env <<EOL
-        NODE_ENV=production
-        API_SERVER=dashboard.getporter.dev
-        FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
-        DISCORD_KEY=${{secrets.DISCORD_KEY}}
-        DISCORD_CID=${{secrets.DISCORD_CID}}
-        FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
-        POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
-        POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
-        EOL
-    - name: Build
-      run: |
-        DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:latest -f ./docker/Dockerfile
-    - name: Push
-      run: |
-        docker push gcr.io/porter-dev-273614/porter:latest
-    - name: Deploy to cluster
-      run: |
-        gcloud container clusters get-credentials \
-          production-2 --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
-          
-        kubectl rollout restart deployment/porter
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@master
+        with:
+          project_id: ${{ secrets.GCP_PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+      - name: Install kubectl
+        run: |
+          sudo apt-get install kubectl
+      - name: Log in to gcloud CLI
+        run: gcloud auth configure-docker
+      - name: Checkout
+        uses: actions/checkout@v2.3.4
+      - name: Write Dashboard Environment Variables
+        run: |
+          cat >./dashboard/.env <<EOL
+          NODE_ENV=production
+          API_SERVER=dashboard.getporter.dev
+          FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
+          DISCORD_KEY=${{secrets.DISCORD_KEY}}
+          DISCORD_CID=${{secrets.DISCORD_CID}}
+          FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
+          POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
+          POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
+          EOL
+      - name: Build
+        run: |
+          DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:latest -f ./docker/Dockerfile
+      - name: Push
+        run: |
+          docker push gcr.io/porter-dev-273614/porter:latest
+      - name: Deploy to cluster
+        run: |
+          gcloud container clusters get-credentials \
+            production-2 --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
+            
+          kubectl rollout restart deployment/porter

.github/workflows/staging.yaml

@@ -1,46 +1,46 @@
 name: Build, Push to GCR.
 on:
   push:
-    branches: 
-    - staging
+    branches:
+      - staging
 jobs:
   login-build-push:
     runs-on: ubuntu-latest
     steps:
-    - name: Set up Cloud SDK
-      uses: google-github-actions/setup-gcloud@master
-      with:
-        project_id: ${{ secrets.GCP_PROJECT_ID }}
-        service_account_key: ${{ secrets.GCP_SA_KEY }}
-        export_default_credentials: true
-    - name: Install kubectl
-      run: |
-        sudo apt-get install kubectl
-    - name: Log in to gcloud CLI
-      run: gcloud auth configure-docker
-    - name: Checkout
-      uses: actions/checkout@v2.3.4
-    - name: Write Dashboard Environment Variables
-      run: |
-        cat >./dashboard/.env <<EOL
-        NODE_ENV=production
-        API_SERVER=dashboard.staging.getporter.dev
-        FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
-        DISCORD_KEY=${{secrets.DISCORD_KEY}}
-        DISCORD_CID=${{secrets.DISCORD_CID}}
-        FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
-        POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
-        POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
-        EOL
-    - name: Build
-      run: |
-        DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:staging -f ./docker/Dockerfile
-    - name: Push
-      run: |
-        docker push gcr.io/porter-dev-273614/porter:staging
-    - name: Deploy to cluster
-      run: |
-        gcloud container clusters get-credentials \
-          staging --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
-          
-        kubectl rollout restart deployment/porter
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@master
+        with:
+          project_id: ${{ secrets.GCP_PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+      - name: Install kubectl
+        run: |
+          sudo apt-get install kubectl
+      - name: Log in to gcloud CLI
+        run: gcloud auth configure-docker
+      - name: Checkout
+        uses: actions/checkout@v2.3.4
+      - name: Write Dashboard Environment Variables
+        run: |
+          cat >./dashboard/.env <<EOL
+          NODE_ENV=production
+          API_SERVER=dashboard.staging.getporter.dev
+          FULLSTORY_ORG_ID=${{secrets.FULLSTORY_ORG_ID}}
+          DISCORD_KEY=${{secrets.DISCORD_KEY}}
+          DISCORD_CID=${{secrets.DISCORD_CID}}
+          FEEDBACK_ENDPOINT=${{secrets.FEEDBACK_ENDPOINT}}
+          POSTHOG_API_KEY=${{secrets.POSTHOG_API_KEY}}
+          POSTHOG_HOST=${{secrets.POSTHOG_HOST}}
+          EOL
+      - name: Build
+        run: |
+          DOCKER_BUILDKIT=1 docker build . -t gcr.io/porter-dev-273614/porter:staging -f ./docker/Dockerfile
+      - name: Push
+        run: |
+          docker push gcr.io/porter-dev-273614/porter:staging
+      - name: Deploy to cluster
+        run: |
+          gcloud container clusters get-credentials \
+            staging --region us-central1 --project ${{ secrets.GCP_PROJECT_ID }}
+            
+          kubectl rollout restart deployment/porter

dashboard/src/components/SaveButton.tsx

@@ -86,7 +86,7 @@ const StatusWrapper = styled.div`
     font-size: 18px;
     margin-right: 10px;
     color: ${(props: { successful: boolean }) =>
-    props.successful ? "#4797ff" : "#fcba03"};
+      props.successful ? "#4797ff" : "#fcba03"};
   }
 
   animation: statusFloatIn 0.5s;

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

@@ -288,7 +288,7 @@ const ImageItem = styled.div`
   font-size: 13px;
   border-bottom: 1px solid
     ${(props: { lastItem: boolean; isSelected: boolean }) =>
-    props.lastItem ? "#00000000" : "#606166"};
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;

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

@@ -298,7 +298,7 @@ const ImageItem = styled.div`
   font-size: 13px;
   border-bottom: 1px solid
     ${(props: { lastItem: boolean; isSelected: boolean }) =>
-    props.lastItem ? "#00000000" : "#606166"};
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;

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

@@ -54,7 +54,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
         </ExpandedWrapper>
       );
     } else if (!this.props.dockerfilePath && !this.props.folderPath) {
-    /* else if (!branch) {
+      /* else if (!branch) {
       return (
         <>
           <ExpandedWrapperAlt>

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

@@ -29,9 +29,9 @@ 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: 1, service: "ecr", url: "https://idfkasdfasdf" },
+  { id: 12, service: "ecr", url: "https://dfasdfidfkasdfasdf" },
+  { id: 11, service: "gcr", url: "https://idfkasdfasdf" },
 ] as any[];
 
 export default class ActionDetails extends Component<PropsType, StateType> {
@@ -44,7 +44,11 @@ export default class ActionDetails extends Component<PropsType, StateType> {
 
   componentDidMount() {
     api
-      .getProjectRegistries("<token>", {}, { id: this.context.currentProject.id })
+      .getProjectRegistries(
+        "<token>",
+        {},
+        { id: this.context.currentProject.id }
+      )
       .then((res: any) => {
         this.setState({ registries: res.data, loading: false });
         if (res.data.length === 1) {
@@ -66,7 +70,8 @@ export default class ActionDetails extends Component<PropsType, StateType> {
 
     return registries.map((registry: any, i: number) => {
       let icon =
-        integrationList[registry.service] && integrationList[registry.service].icon;
+        integrationList[registry.service] &&
+        integrationList[registry.service].icon;
       if (!icon) {
         icon = integrationList["docker"].icon;
       }
@@ -96,7 +101,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
         </>
       );
     }
-  }
+  };
 
   render() {
     return (
@@ -140,17 +145,16 @@ export default class ActionDetails extends Component<PropsType, StateType> {
             <i className="material-icons">keyboard_backspace</i>
             Select Folder
           </BackButton>
-          { 
-            this.props.selectedRegistryId ? (
-              <StatusWrapper successful={true}>
-                <i className="material-icons">done</i> Source selected.
-              </StatusWrapper>
-            ) : (
-              <StatusWrapper>
-                <i className="material-icons">error_outline</i> A connected container registry is required
-              </StatusWrapper>
-            )
-          }
+          {this.props.selectedRegistryId ? (
+            <StatusWrapper successful={true}>
+              <i className="material-icons">done</i> Source selected.
+            </StatusWrapper>
+          ) : (
+            <StatusWrapper>
+              <i className="material-icons">error_outline</i> A connected
+              container registry is required
+            </StatusWrapper>
+          )}
         </Flex>
       </>
     );
@@ -227,7 +231,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/ContentsList.tsx

@@ -216,7 +216,9 @@ export default class ContentsList extends Component<PropsType, StateType> {
             })}
           </DockerfileList>
           <ConfirmButton
-            onClick={() => this.props.setFolderPath(this.state.currentDir || "./")}
+            onClick={() =>
+              this.props.setFolderPath(this.state.currentDir || "./")
+            }
           >
             No, I don't want to use a Dockerfile
           </ConfirmButton>

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

@@ -149,12 +149,9 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
     });
   };
 
-  
   renderExpanded = () => {
     if (this.props.readOnly) {
-      return (
-        <ExpandedWrapperAlt>{this.renderRepoList()}</ExpandedWrapperAlt>
-      );
+      return <ExpandedWrapperAlt>{this.renderRepoList()}</ExpandedWrapperAlt>;
     } else {
       return (
         <ExpandedWrapper>
@@ -185,26 +182,26 @@ const RepoName = styled.div`
   font-size: 13px;
   border-bottom: 1px solid
     ${(props: { lastItem: boolean; isSelected: boolean; readOnly: boolean }) =>
-    props.lastItem ? "#00000000" : "#606166"};
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;
   padding: 10px 0px;
   cursor: ${(props: {
-      lastItem: boolean;
-      isSelected: boolean;
-      readOnly: boolean;
-    }) => (props.readOnly ? "default" : "pointer")};
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.readOnly ? "default" : "pointer")};
   pointer-events: ${(props: {
-      lastItem: boolean;
-      isSelected: boolean;
-      readOnly: boolean;
-    }) => (props.readOnly ? "none" : "auto")};
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.readOnly ? "none" : "auto")};
   background: ${(props: {
-      lastItem: boolean;
-      isSelected: boolean;
-      readOnly: boolean;
-    }) => (props.isSelected ? "#ffffff22" : "#ffffff11")};
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.isSelected ? "#ffffff22" : "#ffffff11")};
   :hover {
     background: #ffffff22;
 

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

@@ -19,11 +19,7 @@ export default class CheckboxRow extends Component<PropsType, StateType> {
             <i className="material-icons">done</i>
           </Checkbox>
           {this.props.label}
-          { 
-            this.props.required && (
-              <Required>*</Required>
-            )
-          }
+          {this.props.required && <Required>*</Required>}
         </CheckboxWrapper>
       </StyledCheckboxRow>
     );

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

@@ -234,7 +234,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       ...values,
     });
 
-    console.log("VALUES YAML", valuesYaml)
+    console.log("VALUES YAML", valuesYaml);
 
     this.setState({ saveValuesStatus: "loading" });
     this.refreshChart();

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

@@ -101,9 +101,9 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     };
 
     let values = {};
-    let rawValues = this.props.currentChart.config
+    let rawValues = this.props.currentChart.config;
     for (let key in rawValues) {
-      _.set(values, key, rawValues[key])
+      _.set(values, key, rawValues[key]);
     }
 
     // Weave in preexisting values and convert to yaml
@@ -118,7 +118,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
         {
           namespace: this.props.currentChart.namespace,
           storage: StorageType.Secret,
-          values: valuesYaml
+          values: valuesYaml,
         },
         {
           id: currentProject.id,

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

@@ -8,7 +8,6 @@ import { RouteComponentProps, withRouter } from "react-router";
 import IntegrationList from "./IntegrationList";
 import api from "shared/api";
 
-
 type PropsType = RouteComponentProps & {
   category: string;
 };
@@ -39,7 +38,6 @@ class IntegrationCategories extends Component<PropsType, StateType> {
     }
   }
 
-
   getIntegrationsForCategory = (categoryType: string) => {
     const { currentProject } = this.context;
     this.setState({
@@ -117,8 +115,7 @@ class IntegrationCategories extends Component<PropsType, StateType> {
   render = () => {
     const { category: currentCategory } = this.props;
     let icon =
-      integrationList[currentCategory] &&
-      integrationList[currentCategory].icon;
+      integrationList[currentCategory] && integrationList[currentCategory].icon;
     let label =
       integrationList[currentCategory] &&
       integrationList[currentCategory].label;
@@ -144,7 +141,9 @@ class IntegrationCategories extends Component<PropsType, StateType> {
                 this.context.setCurrentModal("IntegrationsModal", {
                   category: currentCategory,
                   setCurrentIntegration: (x: string) =>
-                    this.props.history.push(`/integrations/${this.props.category}/create/${x}`),
+                    this.props.history.push(
+                      `/integrations/${this.props.category}/create/${x}`
+                    ),
                 })
               }
             >
@@ -179,7 +178,9 @@ class IntegrationCategories extends Component<PropsType, StateType> {
             </Flex>
             <Button
               onClick={() =>
-                window.open(`/api/oauth/projects/${this.context.currentProject.id}/github`)
+                window.open(
+                  `/api/oauth/projects/${this.context.currentProject.id}/github`
+                )
               }
             >
               <GHIcon />
@@ -195,10 +196,10 @@ class IntegrationCategories extends Component<PropsType, StateType> {
             titles={this.state.currentTitles}
             itemIdentifier={this.state.currentIds}
           />
-        </div >
+        </div>
       );
     }
-  }
+  };
 }
 
 IntegrationCategories.contextType = Context;

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

@@ -24,7 +24,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
   };
 
   allCollapsed = () =>
-    this.state.displayExpanded.reduce((prev, cur) => prev && !cur, true)
+    this.state.displayExpanded.reduce((prev, cur) => prev && !cur, true);
 
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps.integrations !== this.props.integrations) {
@@ -33,7 +33,9 @@ export default class IntegrationList extends Component<PropsType, StateType> {
   }
 
   collapseAll = () => {
-    this.setState({ displayExpanded: this.props.integrations.map(() => false) });
+    this.setState({
+      displayExpanded: this.props.integrations.map(() => false),
+    });
   };
 
   expandAll = () => {
@@ -52,26 +54,22 @@ export default class IntegrationList extends Component<PropsType, StateType> {
   handleParent = (event: any, integration: string) =>
     this.props.setCurrent && this.props.setCurrent(integration);
 
-
   renderContents = () => {
-    let {
-      integrations,
-      titles,
-      setCurrent,
-      isCategory,
-    } = this.props;
+    let { integrations, titles, setCurrent, isCategory } = this.props;
     if (titles && titles.length > 0) {
       return integrations.map((integration: string, i: number) => {
         let label = titles[i];
-        return <IntegrationRow
-          category={this.props.currentCategory}
-          integration={integration}
-          expanded={this.state.displayExpanded[i]}
-          key={i}
-          itemId={this.props.itemIdentifier[i]}
-          label={label}
-          toggleCollapse={(e: MouseEvent) => this.toggleDisplay(e, i)}
-        ></IntegrationRow>;
+        return (
+          <IntegrationRow
+            category={this.props.currentCategory}
+            integration={integration}
+            expanded={this.state.displayExpanded[i]}
+            key={i}
+            itemId={this.props.itemIdentifier[i]}
+            label={label}
+            toggleCollapse={(e: MouseEvent) => this.toggleDisplay(e, i)}
+          ></IntegrationRow>
+        );
       });
     } else if (integrations && integrations.length > 0) {
       return integrations.map((integration: string, i: number) => {
@@ -83,7 +81,9 @@ export default class IntegrationList extends Component<PropsType, StateType> {
         return (
           <Integration
             key={i}
-            onClick={() => (disabled ? null : (setCurrent && setCurrent(integration)))}
+            onClick={() =>
+              disabled ? null : setCurrent && setCurrent(integration)
+            }
             disabled={disabled}
           >
             <MainRow disabled={disabled}>
@@ -102,27 +102,29 @@ export default class IntegrationList extends Component<PropsType, StateType> {
     return <Placeholder>No integrations set up yet.</Placeholder>;
   };
 
-  collapseAllButton = () => <Button
-    onClick={() => this.allCollapsed() ? this.expandAll() : this.collapseAll()}
-  >
-    {this.allCollapsed() ? (
-      <>
-        <i className="material-icons">expand_more</i> Expand All
-    </>
-    ) : (
-      <>
-        <i className="material-icons">expand_less</i> Collapse All
-    </>
-    )}
-  </Button>;
+  collapseAllButton = () => (
+    <Button
+      onClick={() =>
+        this.allCollapsed() ? this.expandAll() : this.collapseAll()
+      }
+    >
+      {this.allCollapsed() ? (
+        <>
+          <i className="material-icons">expand_more</i> Expand All
+        </>
+      ) : (
+        <>
+          <i className="material-icons">expand_less</i> Collapse All
+        </>
+      )}
+    </Button>
+  );
 
   render() {
     return (
       <StyledIntegrationList>
         {this.props.titles && this.props.titles.length > 0 && (
-          <ControlRow>
-            {this.collapseAllButton()}
-          </ControlRow>
+          <ControlRow>{this.collapseAllButton()}</ControlRow>
         )}
         {this.renderContents()}
       </StyledIntegrationList>
@@ -148,10 +150,10 @@ const MainRow = styled.div`
   border-radius: 5px;
   :hover {
     background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+      props.disabled ? "" : "#ffffff11"};
     > i {
       background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+        props.disabled ? "" : "#ffffff11"};
     }
   }
 
@@ -163,7 +165,7 @@ const MainRow = styled.div`
     margin-right: -7px;
     :hover {
       background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+        props.disabled ? "" : "#ffffff11"};
     }
   }
 `;
@@ -250,7 +252,7 @@ const Button = styled.div`
     props.disabled ? "#aaaabbee" : "#616FEEcc"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-    props.disabled ? "" : "#505edddd"};
+      props.disabled ? "" : "#505edddd"};
   }
 
   > i {

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

@@ -23,99 +23,97 @@ 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 {
+    } else {
       this.setState({
-        editMode: !this.state.editMode
+        editMode: !this.state.editMode,
       });
       if (this.state.editMode) {
         this.props.toggleCollapse(null);
       }
     }
-  }
+  };
 
   render = () => {
     const icon =
-      integrationList[this.props.integration] && integrationList[this.props.integration].icon;
+      integrationList[this.props.integration] &&
+      integrationList[this.props.integration].icon;
     const subtitle =
-      integrationList[this.props.integration] && integrationList[this.props.integration].label;
-    return <Integration disabled={false}>
-      <MainRow
-        onClick={this.props.toggleCollapse}
-        disabled={false}
-      >
-        <Flex>
-          <Icon src={icon && icon} />
-          <Description>
-            <Label>{this.props.label}</Label>
-            <Subtitle>{subtitle}</Subtitle>
-          </Description>
-        </Flex>
-        <MaterialIconTray disabled={false}>
-          {/* <i className="material-icons"
+      integrationList[this.props.integration] &&
+      integrationList[this.props.integration].label;
+    return (
+      <Integration disabled={false}>
+        <MainRow onClick={this.props.toggleCollapse} disabled={false}>
+          <Flex>
+            <Icon src={icon && icon} />
+            <Description>
+              <Label>{this.props.label}</Label>
+              <Subtitle>{subtitle}</Subtitle>
+            </Description>
+          </Flex>
+          <MaterialIconTray disabled={false}>
+            {/* <i className="material-icons"
             onClick={this.editButtonOnClick}>mode_edit</i> */}
-          <I
-            className="material-icons"
-            showList={this.props.expanded}
-            onClick={this.props.toggleCollapse}
-          >
-            expand_more
-          </I>
-        </MaterialIconTray>
-      </MainRow>
-      {this.props.expanded && !this.state.editMode && (
-        <ImageHodler adjustMargin={this.props.category !== "repo"}>
-          {this.props.category !== "repo" ? (
-            <ImageList
-              selectedImageUrl={null}
-              selectedTag={null}
-              clickedImage={null}
-              registry={this.props.itemId}
-              setSelectedImageUrl={() => { }}
-              setSelectedTag={() => { }}
-              setClickedImage={() => { }}
-            />
-          ) : (
-            <RepoList
-              actionConfig={
-                {
-                  git_repo: "",
-                  image_repo_uri: "",
-                  git_repo_id: 0,
-                  dockerfile_path: "",
-                } as ActionConfigType
-              }
-              setActionConfig={() => { }}
-              readOnly={true}
-              userId={this.props.itemId}
-            />
-          )}
-        </ImageHodler>
-      )}
-      {
-        this.props.expanded && this.state.editMode && <CreateIntegrationForm
-          integrationName={this.props.integration}
-          closeForm={() => {
-            this.setState({ editMode: false });
-          }}
-        />
-      }
-    </Integration>
-  }
-
+            <I
+              className="material-icons"
+              showList={this.props.expanded}
+              onClick={this.props.toggleCollapse}
+            >
+              expand_more
+            </I>
+          </MaterialIconTray>
+        </MainRow>
+        {this.props.expanded && !this.state.editMode && (
+          <ImageHodler adjustMargin={this.props.category !== "repo"}>
+            {this.props.category !== "repo" ? (
+              <ImageList
+                selectedImageUrl={null}
+                selectedTag={null}
+                clickedImage={null}
+                registry={this.props.itemId}
+                setSelectedImageUrl={() => {}}
+                setSelectedTag={() => {}}
+                setClickedImage={() => {}}
+              />
+            ) : (
+              <RepoList
+                actionConfig={
+                  {
+                    git_repo: "",
+                    image_repo_uri: "",
+                    git_repo_id: 0,
+                    dockerfile_path: "",
+                  } as ActionConfigType
+                }
+                setActionConfig={() => {}}
+                readOnly={true}
+                userId={this.props.itemId}
+              />
+            )}
+          </ImageHodler>
+        )}
+        {this.props.expanded && this.state.editMode && (
+          <CreateIntegrationForm
+            integrationName={this.props.integration}
+            closeForm={() => {
+              this.setState({ editMode: false });
+            }}
+          />
+        )}
+      </Integration>
+    );
+  };
 }
 
-
 const Flex = styled.div`
   display: flex;
   align-items: center;
@@ -149,10 +147,10 @@ const MainRow = styled.div`
   border-radius: 5px;
   :hover {
     background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+      props.disabled ? "" : "#ffffff11"};
     > i {
       background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+        props.disabled ? "" : "#ffffff11"};
     }
   }
 
@@ -164,7 +162,7 @@ const MainRow = styled.div`
     margin-right: -7px;
     :hover {
       background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+        props.disabled ? "" : "#ffffff11"};
     }
   }
 `;
@@ -183,7 +181,7 @@ const MaterialIconTray = styled.div`
     color: #ffffff44;
     :hover {
       background: ${(props: { disabled: boolean }) =>
-    props.disabled ? "" : "#ffffff11"};
+        props.disabled ? "" : "#ffffff11"};
     }
   }
 `;
@@ -209,7 +207,6 @@ const Subtitle = styled.div`
   padding-top: 5px;
 `;
 
-
 const I = styled.i`
   transform: ${(props: { showList: boolean }) =>
     props.showList ? "rotate(180deg)" : ""};

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

@@ -14,71 +14,83 @@ type StateType = {
   currentIntegrationData: any[];
 };
 
-const IntegrationCategoryStrings = ["registry", "repo"] /*"kubernetes",*/
+const IntegrationCategoryStrings = ["registry", "repo"]; /*"kubernetes",*/
 
 class Integrations extends Component<PropsType, StateType> {
   state = {
     currentIntegrationData: [] as any[],
   };
 
-  render = () => <StyledIntegrations><Switch>
-    <Route path="/integrations/:category/create/:integration" render={(rp) => {
-      const { integration, category } = rp.match.params;
-      if (!IntegrationCategoryStrings.includes(category)) {
-        this.props.history.push("/integrations");
-      }
-      let icon =
-        integrationList[integration] &&
-        integrationList[integration].icon;
-      return (
-        <div>
-          <TitleSectionAlt>
-            <Flex>
-              <i
-                className="material-icons"
-                onClick={() => this.props.history.push(`/integrations/${category}`)}
-              >
-                keyboard_backspace
-                </i>
-              <Icon src={icon && icon} />
-              <Title>{integrationList[integration].label}</Title>
-            </Flex>
-          </TitleSectionAlt>
-          <CreateIntegrationForm
-            integrationName={integration}
-            closeForm={() => {
-              this.props.history.push(`/integrations/${category}`)
-            }}
-          />
-          <Br />
-        </div>
-      );
-
-    }} />
-    <Route path="/integrations/:category" render={(rp) => {
-      const currentCategory = rp.match.params.category;
-      if (!IntegrationCategoryStrings.includes(currentCategory)) {
-        this.props.history.push("/integrations");
-      }
-      return <IntegrationCategories
-        category={currentCategory}
-      ></IntegrationCategories>
-    }} />
-    <Route>
-      <div>
-        <TitleSection>
-          <Title>Integrations</Title>
-        </TitleSection>
-
-        <IntegrationList
-          currentCategory={""}
-          integrations={["kubernetes", "registry", "repo"]}
-          setCurrent={(x) => this.props.history.push(`/integrations/${x}`)}
-          isCategory={true}
+  render = () => (
+    <StyledIntegrations>
+      <Switch>
+        <Route
+          path="/integrations/:category/create/:integration"
+          render={(rp) => {
+            const { integration, category } = rp.match.params;
+            if (!IntegrationCategoryStrings.includes(category)) {
+              this.props.history.push("/integrations");
+            }
+            let icon =
+              integrationList[integration] && integrationList[integration].icon;
+            return (
+              <div>
+                <TitleSectionAlt>
+                  <Flex>
+                    <i
+                      className="material-icons"
+                      onClick={() =>
+                        this.props.history.push(`/integrations/${category}`)
+                      }
+                    >
+                      keyboard_backspace
+                    </i>
+                    <Icon src={icon && icon} />
+                    <Title>{integrationList[integration].label}</Title>
+                  </Flex>
+                </TitleSectionAlt>
+                <CreateIntegrationForm
+                  integrationName={integration}
+                  closeForm={() => {
+                    this.props.history.push(`/integrations/${category}`);
+                  }}
+                />
+                <Br />
+              </div>
+            );
+          }}
         />
-      </div>
-    </Route>
-  </Switch></StyledIntegrations>;
+        <Route
+          path="/integrations/:category"
+          render={(rp) => {
+            const currentCategory = rp.match.params.category;
+            if (!IntegrationCategoryStrings.includes(currentCategory)) {
+              this.props.history.push("/integrations");
+            }
+            return (
+              <IntegrationCategories
+                category={currentCategory}
+              ></IntegrationCategories>
+            );
+          }}
+        />
+        <Route>
+          <div>
+            <TitleSection>
+              <Title>Integrations</Title>
+            </TitleSection>
+
+            <IntegrationList
+              currentCategory={""}
+              integrations={["kubernetes", "registry", "repo"]}
+              setCurrent={(x) => this.props.history.push(`/integrations/${x}`)}
+              isCategory={true}
+            />
+          </div>
+        </Route>
+      </Switch>
+    </StyledIntegrations>
+  );
 }
 
 export default withRouter(Integrations);

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

@@ -13,7 +13,10 @@ type PropsType = {
 
 type StateType = {};
 
-export default class CreateIntegrationForm extends Component<PropsType, StateType> {
+export default class CreateIntegrationForm extends Component<
+  PropsType,
+  StateType
+> {
   state = {};
 
   render = () => {
@@ -31,5 +34,5 @@ export default class CreateIntegrationForm extends Component<PropsType, StateTyp
       default:
         return null;
     }
-  }
+  };
 }

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

@@ -13,7 +13,10 @@ type PropsType = {
 
 type StateType = {};
 
-export default class CreateIntegrationForm extends Component<PropsType, StateType> {
+export default class CreateIntegrationForm extends Component<
+  PropsType,
+  StateType
+> {
   state = {};
 
   render = () => {
@@ -31,5 +34,5 @@ export default class CreateIntegrationForm extends Component<PropsType, StateTyp
       default:
         return null;
     }
-  }
+  };
 }

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

@@ -25,7 +25,6 @@ import ValuesForm from "components/values-form/ValuesForm";
 import RadioSelector from "components/RadioSelector";
 import { isAlphanumeric } from "shared/common";
 
-
 type PropsType = RouteComponentProps & {
   currentTemplate: any;
   hideLaunch: () => void;
@@ -143,7 +142,9 @@ class LaunchTemplate extends Component<PropsType, StateType> {
         // this.props.setCurrentView('cluster-dashboard');
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard
-          setTimeout(() => { this.props.history.push("cluster-dashboard")}, 1000);
+          setTimeout(() => {
+            this.props.history.push("cluster-dashboard");
+          }, 1000);
         });
         /*
         posthog.capture("Deployed template", {
@@ -245,7 +246,9 @@ class LaunchTemplate extends Component<PropsType, StateType> {
         // this.props.setCurrentView('cluster-dashboard');
         this.setState({ saveValuesStatus: "successful" }, () => {
           // redirect to dashboard with namespace
-          setTimeout(() => { this.props.history.push("cluster-dashboard")}, 1000);
+          setTimeout(() => {
+            this.props.history.push("cluster-dashboard");
+          }, 1000);
         });
         /*
         try {
@@ -316,8 +319,12 @@ class LaunchTemplate extends Component<PropsType, StateType> {
     } = this.state;
 
     if (this.submitIsDisabled()) {
-      if (sourceType === "repo" && (dockerfilePath || folderPath) && !selectedRegistryId) {
-        return "A connected container registry is required"
+      if (
+        sourceType === "repo" &&
+        (dockerfilePath || folderPath) &&
+        !selectedRegistryId
+      ) {
+        return "A connected container registry is required";
       }
       let { templateName } = this.state;
       if (templateName.length > 0 && !isAlphanumeric(templateName)) {

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

@@ -250,11 +250,16 @@ class AWSFormSection extends Component<PropsType, StateType> {
         return "Project name contains illegal characters";
       }
     }
-    if (!this.state.awsAccessId || !this.state.awsSecretKey || !this.state.provisionConfirmed || this.props.projectName === "") {
+    if (
+      !this.state.awsAccessId ||
+      !this.state.awsSecretKey ||
+      !this.state.provisionConfirmed ||
+      this.props.projectName === ""
+    ) {
       return "Required fields missing";
     }
     return this.state.buttonStatus;
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;
@@ -304,7 +309,9 @@ class AWSFormSection extends Component<PropsType, StateType> {
           />
           <Br />
           <Heading>AWS Resources</Heading>
-          <Helper>Porter will provision the following AWS resources in your own cloud.</Helper>
+          <Helper>
+            Porter will provision the following AWS resources in your own cloud.
+          </Helper>
           <CheckboxList
             options={provisionOptions}
             selected={selectedInfras}
@@ -313,20 +320,34 @@ class AWSFormSection extends Component<PropsType, StateType> {
             }}
           />
           <Helper>
-            By default, Porter creates a cluster with three t2.medium instances (2vCPUs and 4GB RAM each). AWS will bill you for any provisioned resources. Learn more about EKS pricing
-            <Highlight href="https://aws.amazon.com/eks/pricing/" target="_blank">here</Highlight>.
+            By default, Porter creates a cluster with three t2.medium instances
+            (2vCPUs and 4GB RAM each). AWS will bill you for any provisioned
+            resources. Learn more about EKS pricing
+            <Highlight
+              href="https://aws.amazon.com/eks/pricing/"
+              target="_blank"
+            >
+              here
+            </Highlight>
+            .
           </Helper>
           <CheckboxRow
             required={true}
             checked={this.state.provisionConfirmed}
-            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            toggle={() =>
+              this.setState({
+                provisionConfirmed: !this.state.provisionConfirmed,
+              })
+            }
             label="I understand and wish to proceed"
           />
         </FormSection>
         {this.props.children ? this.props.children : <Padding />}
         <SaveButton
           text="Submit"
-          disabled={this.checkFormDisabled() || this.state.buttonStatus === "loading"}
+          disabled={
+            this.checkFormDisabled() || this.state.buttonStatus === "loading"
+          }
           onClick={this.onCreateAWS}
           makeFlush={true}
           status={this.getButtonStatus()}

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

@@ -84,7 +84,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     if (!this.state.provisionConfirmed) {
       return true;
     }
-    
+
     let { selectedInfras } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
@@ -159,7 +159,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     if (!this.state.provisionConfirmed || this.props.projectName === "") {
       return "Required fields missing";
     }
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;
@@ -192,7 +192,8 @@ export default class DOFormSection extends Component<PropsType, StateType> {
           <Br />
           <Heading>DigitalOcean Resources</Heading>
           <Helper>
-            Porter will provision the following DigitalOcean resources in your own cloud.
+            Porter will provision the following DigitalOcean resources in your
+            own cloud.
           </Helper>
           <CheckboxList
             options={provisionOptions}
@@ -202,13 +203,25 @@ export default class DOFormSection extends Component<PropsType, StateType> {
             }}
           />
           <Helper>
-            By default, Porter creates a cluster with three Standard (2vCPUs / 2GB RAM) droplets. DigitalOcean will bill you for any provisioned resources. Learn more about DOKS pricing
-            <Highlight href="https://www.digitalocean.com/products/kubernetes/" target="_blank">here</Highlight>.
+            By default, Porter creates a cluster with three Standard (2vCPUs /
+            2GB RAM) droplets. DigitalOcean will bill you for any provisioned
+            resources. Learn more about DOKS pricing
+            <Highlight
+              href="https://www.digitalocean.com/products/kubernetes/"
+              target="_blank"
+            >
+              here
+            </Highlight>
+            .
           </Helper>
           <CheckboxRow
             required={true}
             checked={this.state.provisionConfirmed}
-            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            toggle={() =>
+              this.setState({
+                provisionConfirmed: !this.state.provisionConfirmed,
+              })
+            }
             label="I understand and wish to proceed"
           />
         </FormSection>

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

@@ -239,11 +239,16 @@ class GCPFormSection extends Component<PropsType, StateType> {
         return "Project name contains illegal characters";
       }
     }
-    if (!this.state.gcpProjectId || !this.state.gcpKeyData || !this.state.provisionConfirmed || this.props.projectName === "") {
+    if (
+      !this.state.gcpProjectId ||
+      !this.state.gcpKeyData ||
+      !this.state.provisionConfirmed ||
+      this.props.projectName === ""
+    ) {
       return "Required fields missing";
     }
     return this.state.buttonStatus;
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;
@@ -293,7 +298,9 @@ class GCPFormSection extends Component<PropsType, StateType> {
           />
           <Br />
           <Heading>GCP Resources</Heading>
-          <Helper>Porter will provision the following GCP resources in your own cloud.</Helper>
+          <Helper>
+            Porter will provision the following GCP resources in your own cloud.
+          </Helper>
           <CheckboxList
             options={provisionOptions}
             selected={selectedInfras}
@@ -302,20 +309,34 @@ class GCPFormSection extends Component<PropsType, StateType> {
             }}
           />
           <Helper>
-            By default, Porter creates a cluster with three e2-medium instances (2vCPUs and 4GB RAM each). Google Cloud will bill you for any provisioned resources. Learn more about GKE pricing
-            <Highlight href="https://cloud.google.com/kubernetes-engine/pricing" target="_blank">here</Highlight>.
+            By default, Porter creates a cluster with three e2-medium instances
+            (2vCPUs and 4GB RAM each). Google Cloud will bill you for any
+            provisioned resources. Learn more about GKE pricing
+            <Highlight
+              href="https://cloud.google.com/kubernetes-engine/pricing"
+              target="_blank"
+            >
+              here
+            </Highlight>
+            .
           </Helper>
           <CheckboxRow
             required={true}
             checked={this.state.provisionConfirmed}
-            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            toggle={() =>
+              this.setState({
+                provisionConfirmed: !this.state.provisionConfirmed,
+              })
+            }
             label="I understand and wish to proceed"
           />
         </FormSection>
         {this.props.children ? this.props.children : <Padding />}
         <SaveButton
           text="Submit"
-          disabled={this.checkFormDisabled() || this.state.buttonStatus === "loading"}
+          disabled={
+            this.checkFormDisabled() || this.state.buttonStatus === "loading"
+          }
           onClick={this.onCreateGCP}
           makeFlush={true}
           status={this.getButtonStatus()}

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

@@ -124,9 +124,9 @@ class Sidebar extends Component<PropsType, StateType> {
             onClick={() => {
               this.props.history.push("/integrations");
             }}
-          // onClick={() => {
-          //   setCurrentModal("IntegrationsInstructionsModal", {});
-          // }}
+            // onClick={() => {
+            //   setCurrentModal("IntegrationsInstructionsModal", {});
+            // }}
           >
             <Img src={integrations} />
             Integrations
@@ -134,14 +134,14 @@ class Sidebar extends Component<PropsType, StateType> {
           {this.context.currentProject.roles.filter((obj: any) => {
             return obj.user_id === this.context.user.userId;
           })[0].kind === "admin" && (
-              <NavButton
-                onClick={() => this.props.history.push("/project-settings")}
-                selected={this.props.currentView === "project-settings"}
-              >
-                <Img enlarge={true} src={settings} />
+            <NavButton
+              onClick={() => this.props.history.push("/project-settings")}
+              selected={this.props.currentView === "project-settings"}
+            >
+              <Img enlarge={true} src={settings} />
               Settings
-              </NavButton>
-            )}
+            </NavButton>
+          )}
 
           <br />
 
@@ -249,7 +249,7 @@ const NavButton = styled.div`
 
   :hover {
     background: ${(props: { disabled?: boolean; selected?: boolean }) =>
-    props.selected ? "" : "#ffffff08"};
+      props.selected ? "" : "#ffffff08"};
   }
 
   > i {