prettier + closes #965, closes #952, closes #934, closes #924

dashboard/src/components/SaveButton.tsx

@@ -197,17 +197,17 @@ const Button = styled.button<{
   padding: 6px 20px 7px 20px;
   text-align: left;
   border: 0;
-  border-radius: ${props => props.rounded ? "100px" : "5px"};
-  background: ${props => (!props.disabled ? props.color : "#aaaabb")};
-  box-shadow: ${props =>
+  border-radius: ${(props) => (props.rounded ? "100px" : "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"};
+  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%)" : "")};
   }
 
   > i {

dashboard/src/components/TabRegion.tsx

@@ -42,23 +42,21 @@ export default class TabRegion extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledTabRegion suppressAnimation={this.props.suppressAnimation}>
-        {
-          !this.props.currentTab ? (
-            <Loading />
-          ) : (
-            <>
-              <TabSelector
-                options={this.props.options}
-                color={this.props.color}
-                currentTab={this.props.currentTab}
-                setCurrentTab={(x: string) => this.props.setCurrentTab(x)}
-                addendum={this.props.addendum}
-              />
-              <Gap />
-              <TabContents>{this.props.children}</TabContents>
-            </>
-          )
-        }
+        {!this.props.currentTab ? (
+          <Loading />
+        ) : (
+          <>
+            <TabSelector
+              options={this.props.options}
+              color={this.props.color}
+              currentTab={this.props.currentTab}
+              setCurrentTab={(x: string) => this.props.setCurrentTab(x)}
+              addendum={this.props.addendum}
+            />
+            <Gap />
+            <TabContents>{this.props.children}</TabContents>
+          </>
+        )}
       </StyledTabRegion>
     );
   }
@@ -77,7 +75,7 @@ const Gap = styled.div`
 const StyledTabRegion = styled.div<{ suppressAnimation: boolean }>`
   width: 100%;
   height: 100%;
-  animation: ${props => props.suppressAnimation ? "" : "fadeIn 0.25s 0s"};
+  animation: ${(props) => (props.suppressAnimation ? "" : "fadeIn 0.25s 0s")};
   position: relative;
   overflow-y: auto;
   overflow: visible;

dashboard/src/components/porter-form/field-components/Checkbox.tsx

@@ -63,6 +63,6 @@ export const getFinalVariablesForCheckbox: GetFinalVariablesFunction = (
     return { [props.variable]: false };
   } else if (vars[props.variable] === true) {
     return { [props.variable]: true };
-  } 
+  }
   return { [props.variable]: !!props.settings?.default };
 };

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -22,9 +22,12 @@ const KeyValueArray: React.FC<Props> = (props) => {
     props.id,
     {
       initState: {
-        values: (props.value && props.value[0]) ? Object.entries(props.value[0]).map(([k, v]) => {
-          return { key: k, value: v };
-        }) as any[] : [],
+        values:
+          props.value && props.value[0]
+            ? (Object.entries(props.value[0]).map(([k, v]) => {
+                return { key: k, value: v };
+              }) as any[])
+            : [],
         showEnvModal: false,
         showEditorModal: false,
       },

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/ExpandedNodeView.tsx

@@ -190,4 +190,4 @@ const StyledExpandedNodeView = styled.div`
       opacity: 1;
     }
   }
-`;
+`;

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

@@ -179,7 +179,8 @@ const ExpandedChart: React.FC<Props> = (props) => {
         setControllers((oldControllers) => {
           switch (event.event_type) {
             case "DELETE":
-              typeof oldControllers !== "undefined" && delete oldControllers[object.metadata.uid];
+              typeof oldControllers !== "undefined" &&
+                delete oldControllers[object.metadata.uid];
             case "UPDATE":
               if (
                 oldControllers &&
@@ -707,8 +708,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
           status={chartStatus}
           shouldUpdate={
             currentChart.latest_version &&
-            currentChart.latest_version !==
-              currentChart.chart.metadata.version
+            currentChart.latest_version !== currentChart.chart.metadata.version
           }
           latestVersion={currentChart.latest_version}
           upgradeVersion={handleUpgradeVersion}

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

@@ -600,33 +600,29 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
           </HeaderWrapper>
 
           <BodyWrapper>
-            {
-              (
-                this.state.leftTabOptions?.length > 0 ||
-                this.state.formData.tabs?.length > 0 ||
-                this.state.rightTabOptions?.length > 0
-              ) && (
-                <PorterFormWrapper
-                  formData={this.state.formData}
-                  valuesToOverride={{
-                    namespace: chart.namespace,
-                    clusterId: this.props.currentCluster.id,
-                  }}
-                  renderTabContents={this.renderTabContents}
-                  isReadOnly={
-                    this.state.imageIsPlaceholder ||
-                    !this.props.isAuthorized("job", "", ["get", "update"])
-                  }
-                  onSubmit={(formValues) =>
-                    this.handleSaveValues(formValues, false)
-                  }
-                  leftTabOptions={this.state.leftTabOptions}
-                  rightTabOptions={this.state.rightTabOptions}
-                  saveValuesStatus={this.state.saveValuesStatus}
-                  saveButtonText="Save Config"
-                />
-              )
-            }
+            {(this.state.leftTabOptions?.length > 0 ||
+              this.state.formData.tabs?.length > 0 ||
+              this.state.rightTabOptions?.length > 0) && (
+              <PorterFormWrapper
+                formData={this.state.formData}
+                valuesToOverride={{
+                  namespace: chart.namespace,
+                  clusterId: this.props.currentCluster.id,
+                }}
+                renderTabContents={this.renderTabContents}
+                isReadOnly={
+                  this.state.imageIsPlaceholder ||
+                  !this.props.isAuthorized("job", "", ["get", "update"])
+                }
+                onSubmit={(formValues) =>
+                  this.handleSaveValues(formValues, false)
+                }
+                leftTabOptions={this.state.leftTabOptions}
+                rightTabOptions={this.state.rightTabOptions}
+                saveValuesStatus={this.state.saveValuesStatus}
+                saveButtonText="Save Config"
+              />
+            )}
           </BodyWrapper>
         </StyledExpandedChart>
       </>

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

@@ -199,4 +199,4 @@ const Button = styled.div`
     margin-right: 10px;
     justify-content: center;
   }
-`;
+`;

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

@@ -37,7 +37,7 @@ const Integrations: React.FC<PropsType> = (props) => {
                   }
                   icon={icon}
                 >
-                    {integrationList[integration].label}
+                  {integrationList[integration].label}
                 </TitleSection>
                 <CreateIntegrationForm
                   integrationName={integration}

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

@@ -48,50 +48,48 @@ const SlackIntegrationList: React.FC<Props> = (props) => {
         onNo={() => setIsDelete(false)}
       />
       <StyledIntegrationList>
-        {
-          props.slackData?.length > 0 ? (
-            props.slackData.map((inst, idx) => {
-              if (deleted.current.has(idx)) return null;
-              return (
-                <Integration
-                  onClick={() => {}}
-                  disabled={false}
-                  key={`${inst.team_id}-${inst.channel}`}
-                >
-                  <MainRow disabled={false}>
-                    <Flex>
-                      <Icon src={inst.team_icon_url && inst.team_icon_url} />
-                      <Label>
-                        {inst.team_name || inst.team_id} - {inst.channel}
-                      </Label>
-                    </Flex>
-                    <MaterialIconTray disabled={false}>
-                      <i
-                        className="material-icons"
-                        onClick={() => {
-                          setDeleteIndex(idx);
-                          setIsDelete(true);
-                        }}
-                      >
-                        delete
-                      </i>
-                      <i
-                        className="material-icons"
-                        onClick={() => {
-                          window.open(inst.configuration_url, "_blank");
-                        }}
-                      >
-                        launch
-                      </i>
-                    </MaterialIconTray>
-                  </MainRow>
-                </Integration>
-              );
-            })
-          ) : (
-            <Placeholder>No Slack integrations set up yet.</Placeholder>
-          )
-        }
+        {props.slackData?.length > 0 ? (
+          props.slackData.map((inst, idx) => {
+            if (deleted.current.has(idx)) return null;
+            return (
+              <Integration
+                onClick={() => {}}
+                disabled={false}
+                key={`${inst.team_id}-${inst.channel}`}
+              >
+                <MainRow disabled={false}>
+                  <Flex>
+                    <Icon src={inst.team_icon_url && inst.team_icon_url} />
+                    <Label>
+                      {inst.team_name || inst.team_id} - {inst.channel}
+                    </Label>
+                  </Flex>
+                  <MaterialIconTray disabled={false}>
+                    <i
+                      className="material-icons"
+                      onClick={() => {
+                        setDeleteIndex(idx);
+                        setIsDelete(true);
+                      }}
+                    >
+                      delete
+                    </i>
+                    <i
+                      className="material-icons"
+                      onClick={() => {
+                        window.open(inst.configuration_url, "_blank");
+                      }}
+                    >
+                      launch
+                    </i>
+                  </MaterialIconTray>
+                </MainRow>
+              </Integration>
+            );
+          })
+        ) : (
+          <Placeholder>No Slack integrations set up yet.</Placeholder>
+        )}
       </StyledIntegrationList>
     </>
   );

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -158,7 +158,7 @@ class SettingsPage extends Component<PropsType, StateType> {
               !this.props.isAuthorized("namespace", "", ["get", "create"])
             }
             onSubmit={(val) => {
-              onSubmit(val)
+              onSubmit(val);
             }}
           />
         </FadeWrapper>