prettier

dashboard/src/components/Selector.tsx

@@ -5,7 +5,7 @@ import { Context } from "shared/Context";
 type PropsType = {
   activeValue: string;
   refreshOptions?: () => void;
-  options: { value: string; label: string, icon?: any }[];
+  options: { value: string; label: string; icon?: any }[];
   addButton?: boolean;
   setActiveValue: (x: string) => void;
   width: string;
@@ -58,7 +58,7 @@ export default class Selector extends Component<PropsType, StateType> {
   renderOptionList = () => {
     let { options, activeValue } = this.props;
     return options.map(
-      (option: { value: string; label: string, icon?: any }, i: number) => {
+      (option: { value: string; label: string; icon?: any }, i: number) => {
         return (
           <Option
             key={i}
@@ -67,11 +67,11 @@ export default class Selector extends Component<PropsType, StateType> {
             onClick={() => this.handleOptionClick(option)}
             lastItem={i === options.length - 1}
           >
-            {
-              option.icon && (
-                <Icon><img src={option.icon} /></Icon>
-              )
-            }
+            {option.icon && (
+              <Icon>
+                <img src={option.icon} />
+              </Icon>
+            )}
             {option.label}
           </Option>
         );
@@ -139,14 +139,14 @@ export default class Selector extends Component<PropsType, StateType> {
     });
     return (
       <>
-        {
-          icon && (
-            <Icon><img src={icon} /></Icon>
-          )
-        }
+        {icon && (
+          <Icon>
+            <img src={icon} />
+          </Icon>
+        )}
       </>
-    )
-  }
+    );
+  };
 
   render() {
     let { activeValue } = this.props;
@@ -195,7 +195,7 @@ const Icon = styled.div`
   align-items: center;
   justify-content: center;
   overflow: visible;
-  
+
   > img {
     height: 18px;
     width: auto;
@@ -241,16 +241,16 @@ const NewOption = styled.div`
   }
 `;
 
-const Option = styled.div<{ 
-  selected: boolean; 
+const Option = styled.div<{
+  selected: boolean;
   lastItem: boolean;
   height: string;
 }>`
   width: 100%;
   border-top: 1px solid #00000000;
   border-bottom: 1px solid
-    ${props => props.lastItem ? "#ffffff00" : "#ffffff15"};
-  height: ${props => props.height || "37px"};
+    ${(props) => (props.lastItem ? "#ffffff00" : "#ffffff15")};
+  height: ${(props) => props.height || "37px"};
   font-size: 13px;
   align-items: center;
   display: flex;
@@ -261,7 +261,7 @@ const Option = styled.div<{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: ${props => props.selected ? "#ffffff11" : ""};
+  background: ${(props) => (props.selected ? "#ffffff11" : "")};
 
   :hover {
     background: #ffffff22;

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

@@ -100,7 +100,7 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
             namespace={this.state.namespace}
             sortType={this.state.sortType}
             setExpandedEnvGroup={(envGroup: any) => {
-              this.setState({ expandedEnvGroup: envGroup })
+              this.setState({ expandedEnvGroup: envGroup });
             }}
           />
         </>
@@ -112,7 +112,10 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
     if (this.state.expandedEnvGroup) {
       return (
         <ExpandedEnvGroup
-          namespace={this.state.expandedEnvGroup?.metadata?.namespace || this.state.namespace}
+          namespace={
+            this.state.expandedEnvGroup?.metadata?.namespace ||
+            this.state.namespace
+          }
           currentCluster={this.props.currentCluster}
           envGroup={this.state.expandedEnvGroup}
           closeExpanded={() => this.setState({ expandedEnvGroup: null })}

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

@@ -197,4 +197,4 @@ const Placeholder = styled.div`
 const Bold = styled.div`
   font-weight: 600;
   margin-bottom: 7px;
-`;
+`;

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

@@ -129,4 +129,4 @@ const ModalTitle = styled.div`
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
-`;
+`;

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

@@ -89,4 +89,4 @@ const Placeholder = styled.div`
 const Bold = styled.div`
   font-weight: 600;
   margin-bottom: 7px;
-`;
+`;

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

@@ -49,20 +49,20 @@ export default class IntegrationsModal extends Component<PropsType, StateType> {
 
         if (!disabled) {
           return (
-          <IntegrationOption
-            key={i}
-            disabled={disabled}
-            onClick={() => {
-              if (!disabled) {
-                setCurrentIntegration(integration.service);
-                this.context.setCurrentModal(null, null);
-              }
-            }}
-          >
-            <Icon src={icon && icon} />
-            <Label>{integrationList[integration.service].label}</Label>
-          </IntegrationOption>
-        );
+            <IntegrationOption
+              key={i}
+              disabled={disabled}
+              onClick={() => {
+                if (!disabled) {
+                  setCurrentIntegration(integration.service);
+                  this.context.setCurrentModal(null, null);
+                }
+              }}
+            >
+              <Icon src={icon && icon} />
+              <Label>{integrationList[integration.service].label}</Label>
+            </IntegrationOption>
+          );
         }
       });
     }
@@ -127,4 +127,4 @@ const Subtitle = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-`;
+`;

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

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

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

@@ -147,4 +147,4 @@ const Subtitle = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-bottom: -10px;
-`;
+`;

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

@@ -223,4 +223,4 @@ const Subtitle = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-bottom: -10px;
-`;
+`;

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

@@ -14,31 +14,31 @@ export type ProviderSelectorProps = {
 const providers: SupportedProviders[] = ["aws", "gcp", "do"];
 
 const providerOptions = [
-  { 
+  {
     value: "skip",
-    label: "Skip / I don't know what this is" 
+    label: "Skip / I don't know what this is",
   },
-  { 
+  {
     value: "aws",
     icon: integrationList["aws"].icon,
-    label: "Amazon Elastic Container Registry (ECR)" 
+    label: "Amazon Elastic Container Registry (ECR)",
   },
-  { 
+  {
     value: "gcp",
     icon: integrationList["gcp"].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)",
   },
-  { 
+  {
     value: "external",
     icon: integrationList["kubernetes"].icon,
-    label: "Link to an existing cluster"
-  }
-]
+    label: "Link to an existing cluster",
+  },
+];
 
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
   selectProvider,
@@ -52,7 +52,7 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
       <Selector
         activeValue={provider}
         options={providerOptions}
-        setActiveValue={provider => {
+        setActiveValue={(provider) => {
           setProvider(provider);
           if (provider !== "skip" && provider !== "external") {
             selectProvider(provider as SupportedProviders);

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

@@ -56,12 +56,12 @@ const ConnectRegistry: React.FC<{
           : "Link to an existing Docker registry or continue."}
       </Helper>
       <ProviderSelector
-          selectProvider={(provider) => {
-            if (provider !== "external") {
-              onSelectProvider(provider);
-            }
-          }}
-        />
+        selectProvider={(provider) => {
+          if (provider !== "external") {
+            onSelectProvider(provider);
+          }
+        }}
+      />
       {provider ? (
         <FormFlowWrapper
           provider={provider}
@@ -110,7 +110,7 @@ const FadeWrapper = styled.div<{ delay?: string }>`
 
 const SlideWrapper = styled.div<{ delay?: string }>`
   opacity: 0;
-  animation: slideIn 0.7s ${props => props.delay || "1.3s"};
+  animation: slideIn 0.7s ${(props) => props.delay || "1.3s"};
   animation-fill-mode: forwards;
 
   @keyframes slideIn {

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

@@ -233,4 +233,4 @@ export const TestRegistryConnection: React.FC<{ nextFormStep: () => void }> = ({
 const Br = styled.div`
   width: 100%;
   height: 10px;
-`;
+`;

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

@@ -98,7 +98,10 @@ const ConnectSource: React.FC<{
             <List>
               {accountData?.accounts.map((name, i) => {
                 return (
-                  <Row key={i} isLastItem={i === accountData.accounts.length - 1}>
+                  <Row
+                    key={i}
+                    isLastItem={i === accountData.accounts.length - 1}
+                  >
                     <i className="material-icons">bookmark</i>
                     {name}
                   </Row>
@@ -147,7 +150,7 @@ const FadeWrapper = styled.div<{ delay?: string }>`
 
 const SlideWrapper = styled.div<{ delay?: string }>`
   opacity: 0;
-  animation: slideIn 0.7s ${props => props.delay || "1.3s"};
+  animation: slideIn 0.7s ${(props) => props.delay || "1.3s"};
   animation-fill-mode: forwards;
 
   @keyframes slideIn {