prettier

dashboard/src/components/Boilerplate.tsx

@@ -2,17 +2,12 @@ import React, { useState } from "react";
 
 import styled from "styled-components";
 
-type Props = {
-};
+type Props = {};
 
 export const Boilerplate: React.FC<Props> = (props) => {
   const [someState, setSomeState] = useState("");
 
-  return (
-    <StyledBoilerplate>
-    </StyledBoilerplate>
-  );
+  return <StyledBoilerplate></StyledBoilerplate>;
 };
 
-const StyledBoilerplate = styled.div`
-`;
+const StyledBoilerplate = styled.div``;

dashboard/src/components/Selector.tsx

@@ -173,13 +173,11 @@ export default class Selector extends Component<PropsType, StateType> {
           <Flex>
             {this.renderIcon()}
             <TextWrap>
-              {
-                activeValue ? (
-                  activeValue === "" ? "All" : this.getLabel(activeValue)
-                ) : (
-                  this.props.placeholder
-                )
-              }
+              {activeValue
+                ? activeValue === ""
+                  ? "All"
+                  : this.getLabel(activeValue)
+                : this.props.placeholder}
             </TextWrap>
           </Flex>
           <i className="material-icons">arrow_drop_down</i>

dashboard/src/components/form-components/SelectRow.tsx

@@ -21,15 +21,13 @@ export default class SelectRow extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledSelectRow>
-        <Wrapper> 
-        <Label>
-          {this.props.label}
-        </Label>
-        { this.props.doc ? 
-          <a href={this.props.doc} target="_blank">
+        <Wrapper>
+          <Label>{this.props.label}</Label>
+          {this.props.doc ? (
+            <a href={this.props.doc} target="_blank">
               <i className="material-icons">help_outline</i>
-          </a> : null
-        }
+            </a>
+          ) : null}
         </Wrapper>
         <SelectWrapper>
           <Selector
@@ -65,7 +63,7 @@ const Wrapper = styled.div`
       }
     }
   }
-`
+`;
 
 const Label = styled.div`
   color: #ffffff;

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

@@ -40,13 +40,11 @@ export default class Modal extends Component<PropsType, StateType> {
     return (
       <Overlay>
         <StyledModal ref={this.wrapperRef} width={width} height={height}>
-          {
-            this.props.onRequestClose && (
-              <CloseButton onClick={this.props.onRequestClose}>
-                <i className="material-icons">close</i>
-              </CloseButton>
-            )
-          }
+          {this.props.onRequestClose && (
+            <CloseButton onClick={this.props.onRequestClose}>
+              <i className="material-icons">close</i>
+            </CloseButton>
+          )}
           {this.props.title && <ModalTitle>{this.props.title}</ModalTitle>}
           {this.props.children}
         </StyledModal>

dashboard/src/main/home/onboarding/components/ProviderSelector.tsx

@@ -24,17 +24,17 @@ export const registryOptions = [
   {
     value: "aws",
     icon: integrationList["ecr"]?.icon,
-    label: "Amazon Elastic Container Registry (ECR)"
+    label: "Amazon Elastic Container Registry (ECR)",
   },
   {
     value: "gcp",
     icon: integrationList["gcr"]?.icon,
-    label: "Google Cloud Registry (GCR)"
+    label: "Google Cloud Registry (GCR)",
   },
   {
     value: "do",
     icon: integrationList["do"]?.icon,
-    label: "DigitalOcean Container Registry (DOCR)"
+    label: "DigitalOcean Container Registry (DOCR)",
   },
 ];
 
@@ -42,17 +42,17 @@ export const provisionerOptions = [
   {
     value: "aws",
     icon: integrationList["aws"]?.icon,
-    label: "Amazon Web Services (AWS)"
+    label: "Amazon Web Services (AWS)",
   },
   {
     value: "gcp",
     icon: integrationList["gcp"]?.icon,
-    label: "Google Cloud Platform (GCP)"
+    label: "Google Cloud Platform (GCP)",
   },
   {
     value: "do",
     icon: integrationList["do"]?.icon,
-    label: "DigitalOcean (DO)"
+    label: "DigitalOcean (DO)",
   },
 ];
 

dashboard/src/main/home/onboarding/components/RegistryImageList.tsx

@@ -37,29 +37,28 @@ const RegistryImageList: React.FC<{
 
   const getIcon = () => {
     if (registryType) {
-      return integrationList[registryType] && integrationList[registryType].icon;
+      return (
+        integrationList[registryType] && integrationList[registryType].icon
+      );
     } else {
       return integrationList["docker"].icon;
     }
-  }
+  };
 
   return (
     <>
       <Helper>Porter was able to successfully connect to your registry:</Helper>
       <ImageList>
-
-        {
-          imageList.length > 0 ? (
-            imageList.map((data, i) => (
-              <ImageRow isLast={i === imageList.length - 1}>
-                <img src={getIcon()} />
-                {data.uri}
-              </ImageRow>
-            ))
-          ) : (
-            <Placeholder>No container images found.</Placeholder>
-          )
-        }
+        {imageList.length > 0 ? (
+          imageList.map((data, i) => (
+            <ImageRow isLast={i === imageList.length - 1}>
+              <img src={getIcon()} />
+              {data.uri}
+            </ImageRow>
+          ))
+        ) : (
+          <Placeholder>No container images found.</Placeholder>
+        )}
       </ImageList>
       <Br />
     </>
@@ -86,7 +85,7 @@ const Br = styled.div`
 const ImageRow = styled.div<{ isLast?: boolean }>`
   width: 100%;
   height: 40px;
-  border-bottom: ${props => props.isLast ? "" : "1px solid #aaaabb"};
+  border-bottom: ${(props) => (props.isLast ? "" : "1px solid #aaaabb")};
   display: flex;
   align-items: center;
   font-size: 13px;
@@ -106,4 +105,4 @@ const ImageList = styled.div`
   overflow-y: auto;
   background: #ffffff11;
   margin: 20px 0 20px;
-`;
+`;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/ConnectRegistry.tsx

@@ -53,8 +53,11 @@ const ConnectRegistry: React.FC<{
       <TitleSection>Getting Started</TitleSection>
       <Subtitle>
         Step 2 of 3 - Connect an existing registry (Optional)
-        <a href="https://docs.porter.run/docs/linking-up-application-source#connecting-an-existing-image-registry" target="_blank">
-            <i className="material-icons">help_outline</i>
+        <a
+          href="https://docs.porter.run/docs/linking-up-application-source#connecting-an-existing-image-registry"
+          target="_blank"
+        >
+          <i className="material-icons">help_outline</i>
         </a>
       </Subtitle>
       <Helper>

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/FormFlow.tsx

@@ -46,17 +46,20 @@ const FormTitle = {
   aws: {
     label: "Amazon Elastic Container Registry (ECR)",
     icon: integrationList["ecr"].icon,
-    doc: "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#amazon-elastic-container-registry-ecr"
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#amazon-elastic-container-registry-ecr",
   },
   gcp: {
     label: "Google Container Registry (GCR)",
     icon: integrationList["gcr"].icon,
-    doc: "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#google-container-registry-gcr"
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#google-container-registry-gcr",
   },
   do: {
     label: "DigitalOcean Container Registry (DOCR)",
     icon: integrationList["do"].icon,
-    doc: "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#digitalocean-container-registry"
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#digitalocean-container-registry",
   },
 };
 
@@ -123,8 +126,8 @@ const FormFlowWrapper: React.FC<Props> = ({
           {FormTitle[provider] && FormTitle[provider].label}
         </FormHeader>
         <GuideButton href={FormTitle[provider].doc} target="_blank">
-            <i className="material-icons-outlined">help</i>
-            Guide
+          <i className="material-icons-outlined">help</i>
+          Guide
         </GuideButton>
       </Header>
       <Breadcrumb
@@ -146,7 +149,7 @@ const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-`
+`;
 
 const GuideButton = styled.a`
   display: flex;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_AWSRegistryForm.tsx

@@ -222,8 +222,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_DORegistryForm.tsx

@@ -96,7 +96,9 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
+            <Right>
+              Connected at {readableDate(connectedAccount.created_at)}
+            </Right>
           </PreviewRow>
         </>
       )}

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_GCPRegistryForm.tsx

@@ -184,8 +184,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount?.gcp_sa_email}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>

dashboard/src/main/home/onboarding/steps/ConnectSource.tsx

@@ -72,7 +72,10 @@ const ConnectSource: React.FC<{
       <TitleSection>Getting Started</TitleSection>
       <Subtitle>
         Step 1 of 3 - Connect to GitHub
-        <a href="https://docs.porter.run/docs/linking-up-application-source" target="_blank">
+        <a
+          href="https://docs.porter.run/docs/linking-up-application-source"
+          target="_blank"
+        >
           <i className="material-icons">help_outline</i>
         </a>
       </Subtitle>

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/FormFlow.tsx

@@ -41,22 +41,22 @@ const FormTitle = {
   aws: {
     label: "Amazon Web Services (AWS)",
     icon: integrationList["aws"].icon,
-    doc: "https://docs.porter.run/docs/getting-started-on-aws"
+    doc: "https://docs.porter.run/docs/getting-started-on-aws",
   },
   gcp: {
     label: "Google Cloud Platform (GCP)",
     icon: integrationList["gcp"].icon,
-    doc: "https://docs.porter.run/docs/provisioning-on-google-cloud"
+    doc: "https://docs.porter.run/docs/provisioning-on-google-cloud",
   },
   do: {
     label: "DigitalOcean (DO)",
     icon: integrationList["do"].icon,
-    doc: "https://docs.porter.run/docs/provisioning-on-digital-ocean"
+    doc: "https://docs.porter.run/docs/provisioning-on-digital-ocean",
   },
   external: {
     label: "Connect an existing cluster",
     icon: integrationList["kubernetes"],
-    doc: ""
+    doc: "",
   },
 };
 
@@ -116,10 +116,10 @@ const FormFlowWrapper: React.FC<Props> = ({
           {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
           {FormTitle[provider] && FormTitle[provider].label}
         </FormHeader>
-          <GuideButton href={FormTitle[provider].doc} target="_blank">
-              <i className="material-icons-outlined">help</i>
-              Guide
-          </GuideButton>
+        <GuideButton href={FormTitle[provider].doc} target="_blank">
+          <i className="material-icons-outlined">help</i>
+          Guide
+        </GuideButton>
       </Header>
       <Breadcrumb
         currentStep={currentStep}
@@ -139,7 +139,7 @@ const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-`
+`;
 
 const GuideButton = styled.a`
   display: flex;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_AWSProvisionerForm.tsx

@@ -240,8 +240,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_ConnectExternalCluster.tsx

@@ -20,7 +20,11 @@ const tabOptions = [{ label: "MacOS", value: "mac" }];
  * @todo Poll the available clusters until there's at least one connected
  * to the project
  */
-const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack }) => {
+const ConnectExternalCluster: React.FC<Props> = ({
+  nextStep,
+  project,
+  goBack,
+}) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [currentTab, setCurrentTab] = useState("mac");
   const [enableContinue, setEnableContinue] = useState(false);
@@ -104,7 +108,7 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
               porter connect kubeconfig
             </Code>
           </Placeholder>
-        )
+        );
       case 2:
         return (
           <Placeholder>
@@ -170,7 +174,9 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
         text="Continue"
         disabled={!enableContinue}
         onClick={() => nextStep()}
-        status={!enableContinue ? "No connected cluster detected" : "successful"}
+        status={
+          !enableContinue ? "No connected cluster detected" : "successful"
+        }
         makeFlush={true}
         clearPosition={true}
         statusPosition="right"
@@ -182,8 +188,7 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
 
 export default ConnectExternalCluster;
 
-const Wrapper = styled.div`
-`;
+const Wrapper = styled.div``;
 
 const CloseButton = styled.div`
   width: 30px;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_DOProvisionerForm.tsx

@@ -118,7 +118,9 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
+            <Right>
+              Connected at {readableDate(connectedAccount.created_at)}
+            </Right>
           </PreviewRow>
         </>
       )}

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_GCPProvisionerForm.tsx

@@ -230,8 +230,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount?.gcp_sa_email || "n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>