jusrhee 4 年 前
コミット
617f7e282a

+ 2 - 3
dashboard/src/components/porter-form/types.ts

@@ -18,7 +18,7 @@ export interface GenericInputField extends GenericField {
   settings?: any;
 
   // Read in value from Helm for existing revisions
-  value?: [any]|[];
+  value?: [any] | [];
 }
 
 export interface HeadingField extends GenericField {
@@ -61,8 +61,7 @@ export interface InputField extends GenericInputField {
 export interface CheckboxField extends GenericInputField {
   type: "checkbox";
   label?: string;
-  settings?: {
-  };
+  settings?: {};
 }
 
 export interface KeyValueArrayField extends GenericInputField {

+ 2 - 3
dashboard/src/components/porter-form/utils.ts

@@ -1,6 +1,5 @@
 import { GenericInputField } from "./types";
 
-
 export const hasSetValue = (field: GenericInputField) => {
-    return field.value && field.value.length != 0 && field.value[0] != null
-}
+  return field.value && field.value.length != 0 && field.value[0] != null;
+};

+ 6 - 7
dashboard/src/main/home/Home.tsx

@@ -382,20 +382,19 @@ class Home extends Component<PropsType, StateType> {
         />
       );
     } else {
-      
       return (
         <>
           <DiscordButton href="https://discord.gg/34n7NN7FJ7" target="_blank">
             <Icon src={discordLogo} />
             Join Our Discord
           </DiscordButton>
-          {
-            this.context?.capabilities?.version === "dev" &&
-            this.state.showWelcomeForm && 
+          {this.context?.capabilities?.version === "dev" &&
+            this.state.showWelcomeForm &&
             localStorage.getItem("welcomed") != "true" && (
-              <WelcomeForm closeForm={() => this.setState({ showWelcomeForm: false })} />
-            )
-          }
+              <WelcomeForm
+                closeForm={() => this.setState({ showWelcomeForm: false })}
+              />
+            )}
         </>
       );
     }

+ 42 - 33
dashboard/src/main/home/WelcomeForm.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import styled from "styled-components";
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from "react-transition-group";
 import axios from "axios";
 
 import { Context } from "shared/Context";
@@ -11,7 +11,6 @@ type Props = {
 
 type StateType = {
   active: boolean;
-
 };
 
 const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
@@ -23,17 +22,14 @@ const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
 
   const submitForm = () => {
     axios
-      .get(
-        process.env.WELCOME_FORM_WEBHOOK,
-        {
-          params: {
+      .get(process.env.WELCOME_FORM_WEBHOOK, {
+        params: {
           email: context.user && context.user.email,
           isCompany,
           company,
           role,
-          }
-        }
-      )
+        },
+      })
       .then((res) => {
         localStorage.setItem("welcomed", "true");
         setActive(false);
@@ -41,7 +37,7 @@ const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
       .catch((err) => {
         console.log(err);
       });
-  }
+  };
 
   const renderContents = () => {
     if (isCompany) {
@@ -49,44 +45,57 @@ const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
         <FadeWrapper>
           <Title>Welcome to Porter</Title>
           <Subtitle>Just two things before getting started.</Subtitle>
-          <SubtitleAlt><Num>1</Num> What is your company name? *</SubtitleAlt>
-          <Input 
+          <SubtitleAlt>
+            <Num>1</Num> What is your company name? *
+          </SubtitleAlt>
+          <Input
             placeholder="ex: Acme"
             value={company}
             onChange={(e: any) => setCompany(e.target.value)}
           />
-          <SubtitleAlt><Num>2</Num> What is your role? *</SubtitleAlt>
-          <RadioButton 
+          <SubtitleAlt>
+            <Num>2</Num> What is your role? *
+          </SubtitleAlt>
+          <RadioButton
             onClick={() => setRole("founder")}
             selected={role === "founder"}
           >
-            <i className="material-icons-round">{role === "founder" ? "check_box" : "check_box_outline_blank"}</i> Founder
+            <i className="material-icons-round">
+              {role === "founder" ? "check_box" : "check_box_outline_blank"}
+            </i>{" "}
+            Founder
           </RadioButton>
-          <RadioButton 
+          <RadioButton
             onClick={() => setRole("developer")}
             selected={role === "developer"}
           >
-            <i className="material-icons-round">{role === "developer" ? "check_box" : "check_box_outline_blank"}</i> Developer
+            <i className="material-icons-round">
+              {role === "developer" ? "check_box" : "check_box_outline_blank"}
+            </i>{" "}
+            Developer
           </RadioButton>
-          <RadioButton 
+          <RadioButton
             onClick={() => setRole("devops")}
             selected={role === "devops"}
           >
-            <i className="material-icons-round">{role === "devops" ? "check_box" : "check_box_outline_blank"}</i> DevOps
+            <i className="material-icons-round">
+              {role === "devops" ? "check_box" : "check_box_outline_blank"}
+            </i>{" "}
+            DevOps
           </RadioButton>
 
-          <Submit 
-            isDisabled={!company || role === "unspecified"} 
+          <Submit
+            isDisabled={!company || role === "unspecified"}
             onClick={() => company && role !== "unspecified" && submitForm()}
           >
             <i className="material-icons-round">check</i> Done
           </Submit>
         </FadeWrapper>
-      )
+      );
     }
     return (
       <>
-        <Title>Welcome to Porter</Title>  
+        <Title>Welcome to Porter</Title>
         <Subtitle delay="0.7s">I am interested in using Porter as:</Subtitle>
         <Option onClick={() => setIsCompany(true)}>
           <i className="material-icons-round">people</i> A Company
@@ -96,12 +105,12 @@ const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
         </Option>
       </>
     );
-  }
+  };
 
   return (
     <CSSTransition
       in={active}
-      timeout={500} 
+      timeout={500}
       classNames="alert"
       unmountOnExit
       onEnter={() => setActive(true)}
@@ -116,7 +125,7 @@ const WelcomeForm: React.FunctionComponent<Props> = ({}) => {
       </StyledWelcomeForm>
     </CSSTransition>
   );
-}
+};
 
 export default WelcomeForm;
 
@@ -190,11 +199,11 @@ const Submit = styled(Option)<{ isDisabled: boolean }>`
   animation: fadeIn 0.7s 0.5s;
   animation-fill-mode: forwards;
   margin-top: 35px;
-  cursor: ${props => props.isDisabled ? "not-allowed" : "pointer"};
-  background: ${props => props.isDisabled ? "#aaaabb" : "#616FEEcc"};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  background: ${(props) => (props.isDisabled ? "#aaaabb" : "#616FEEcc")};
   :hover {
-    filter: ${props => props.isDisabled ? "" : "brightness(130%)"};
-    background: ${props => props.isDisabled ? "#aaaabb" : "#616FEEcc"};
+    filter: ${(props) => (props.isDisabled ? "" : "brightness(130%)")};
+    background: ${(props) => (props.isDisabled ? "#aaaabb" : "#616FEEcc")};
   }
 
   > i {
@@ -204,12 +213,12 @@ const Submit = styled(Option)<{ isDisabled: boolean }>`
 
 const RadioButton = styled(Option)<{ selected: boolean }>`
   opacity: 0;
-  background: ${props => props.selected ? "#ffffff44" : "#ffffff22"};
+  background: ${(props) => (props.selected ? "#ffffff44" : "#ffffff22")};
   animation: fadeIn 0.5s 0.2s;
   animation-fill-mode: forwards;
 
   > div {
-    background: ${props => props.selected ? "#ffffff44" : ""}
+    background: ${(props) => (props.selected ? "#ffffff44" : "")};
   }
 `;
 
@@ -238,7 +247,7 @@ const Subtitle = styled.div<{ delay?: string }>`
   color: #aaaabb;
 
   opacity: 0;
-  animation: fadeIn 0.5s ${props => props.delay || "0.2s"};
+  animation: fadeIn 0.5s ${(props) => props.delay || "0.2s"};
   animation-fill-mode: forwards;
 `;
 

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

@@ -378,8 +378,12 @@ const ExpandedChart: React.FC<Props> = (props) => {
                   <Spinner src={loadingSrc} /> This application is currently
                   being deployed
                 </Header>
-                Navigate to the <A
-                  href={props.currentChart.git_action_config && `https://github.com/${props.currentChart.git_action_config?.git_repo}/actions`}
+                Navigate to the{" "}
+                <A
+                  href={
+                    props.currentChart.git_action_config &&
+                    `https://github.com/${props.currentChart.git_action_config?.git_repo}/actions`
+                  }
                   target={"_blank"}
                 >
                   Actions

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

@@ -438,8 +438,8 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
                 </Header>
                 Navigate to the
                 <A
-                    href={`https://github.com/${this.props.currentChart.git_action_config.git_repo}/actions`}
-                    target={"_blank"}
+                  href={`https://github.com/${this.props.currentChart.git_action_config.git_repo}/actions`}
+                  target={"_blank"}
                 >
                   Actions tab
                 </A>{" "}