handle leading 0 on commit (force yaml quote)

dashboard/decs.d.ts

@@ -0,0 +1 @@
+declare module "js-yaml";

dashboard/package-lock.json

@@ -556,11 +556,6 @@
       "integrity": "sha512-BnEyOcDE4H6bkg8m84xhdbkYoAoCg8sYERmAvE4Ff50U8jTfbmOinRdJpauBn1P9XsCCQgCLuSiyz3PM4WHYOA==",
       "dev": true
     },
-    "@types/js-yaml": {
-      "version": "3.12.5",
-      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.12.5.tgz",
-      "integrity": "sha512-JCcp6J0GV66Y4ZMDAQCXot4xprYB+Zfd3meK9+INSJeVZwJmHAW30BBEEkPzXswMXuiyReUGOP3GxrADc9wPww=="
-    },
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
@@ -4788,12 +4783,18 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        }
       }
     },
     "jsesc": {

dashboard/package.json

@@ -6,7 +6,6 @@
     "@material-ui/core": "^4.11.3",
     "@types/d3-array": "^2.9.0",
     "@types/d3-time-format": "^3.0.0",
-    "@types/js-yaml": "^3.12.5",
     "@types/lodash": "^4.14.165",
     "@types/markdown-to-jsx": "^6.11.3",
     "@types/material-ui": "^0.21.8",
@@ -32,7 +31,7 @@
     "highlight.run": "^1.4.5",
     "ini": ">=1.3.6",
     "js-base64": "^3.6.0",
-    "js-yaml": "^3.14.0",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.20",
     "markdown-to-jsx": "^7.0.1",
     "qs": "^6.9.4",

dashboard/src/assets/GoogleIcon.tsx

@@ -12,45 +12,112 @@ export default class GHIcon extends Component<PropsType, StateType> {
         <title>btn_google_light_normal_ios</title>
         <desc>Created with Sketch.</desc>
         <defs>
-            <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
-                <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-                <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-                <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
-                <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
-                <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
-                <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0" in="shadowBlurOuter2" type="matrix" result="shadowMatrixOuter2"></feColorMatrix>
-                <feMerge>
-                    <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                    <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
-                    <feMergeNode in="SourceGraphic"></feMergeNode>
-                </feMerge>
-            </filter>
-            <rect id="path-2" x="0" y="0" width="40" height="40" rx="2"></rect>
+          <filter
+            x="-50%"
+            y="-50%"
+            width="200%"
+            height="200%"
+            filterUnits="objectBoundingBox"
+            id="filter-1"
+          >
+            <feOffset
+              dx="0"
+              dy="1"
+              in="SourceAlpha"
+              result="shadowOffsetOuter1"
+            ></feOffset>
+            <feGaussianBlur
+              stdDeviation="0.5"
+              in="shadowOffsetOuter1"
+              result="shadowBlurOuter1"
+            ></feGaussianBlur>
+            <feColorMatrix
+              values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
+              in="shadowBlurOuter1"
+              type="matrix"
+              result="shadowMatrixOuter1"
+            ></feColorMatrix>
+            <feOffset
+              dx="0"
+              dy="0"
+              in="SourceAlpha"
+              result="shadowOffsetOuter2"
+            ></feOffset>
+            <feGaussianBlur
+              stdDeviation="0.5"
+              in="shadowOffsetOuter2"
+              result="shadowBlurOuter2"
+            ></feGaussianBlur>
+            <feColorMatrix
+              values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
+              in="shadowBlurOuter2"
+              type="matrix"
+              result="shadowMatrixOuter2"
+            ></feColorMatrix>
+            <feMerge>
+              <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+              <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+              <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+          </filter>
+          <rect id="path-2" x="0" y="0" width="40" height="40" rx="2"></rect>
         </defs>
-        <g id="Google-Button" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="9-PATCH" transform="translate(-608.000000, -160.000000)"></g>
-            <g id="btn_google_light_normal" transform="translate(-1.000000, -1.000000)">
-                <g id="button" transform="translate(4.000000, 4.000000)" filter="url(#filter-1)">
-                    <g id="button-bg">
-                        <use fill="#FFFFFF" fill-rule="evenodd"></use>
-                        <use fill="none"></use>
-                        <use fill="none"></use>
-                        <use fill="none"></use>
-                    </g>
-                </g>
-                <g id="logo_googleg_48dp" transform="translate(15.000000, 15.000000)">
-                    <path d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z" id="Shape" fill="#4285F4"></path>
-                    <path d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z" id="Shape" fill="#34A853" ></path>
-                    <path d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z" id="Shape" fill="#FBBC05"></path>
-                    <path d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z" id="Shape" fill="#EA4335"></path>
-                    <path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape"></path>
-                </g>
-                <g id="handles_square" ></g>
+        <g
+          id="Google-Button"
+          stroke="none"
+          stroke-width="1"
+          fill="none"
+          fill-rule="evenodd"
+        >
+          <g id="9-PATCH" transform="translate(-608.000000, -160.000000)"></g>
+          <g
+            id="btn_google_light_normal"
+            transform="translate(-1.000000, -1.000000)"
+          >
+            <g
+              id="button"
+              transform="translate(4.000000, 4.000000)"
+              filter="url(#filter-1)"
+            >
+              <g id="button-bg">
+                <use fill="#FFFFFF" fill-rule="evenodd"></use>
+                <use fill="none"></use>
+                <use fill="none"></use>
+                <use fill="none"></use>
+              </g>
             </g>
+            <g
+              id="logo_googleg_48dp"
+              transform="translate(15.000000, 15.000000)"
+            >
+              <path
+                d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
+                id="Shape"
+                fill="#4285F4"
+              ></path>
+              <path
+                d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
+                id="Shape"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
+                id="Shape"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
+                id="Shape"
+                fill="#EA4335"
+              ></path>
+              <path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape"></path>
+            </g>
+            <g id="handles_square"></g>
+          </g>
         </g>
       </Svg>
     );
   }
 }
 
-const Svg = styled.svg``;
+const Svg = styled.svg``;

dashboard/src/components/SaveButton.tsx

@@ -81,12 +81,12 @@ const StatusWrapper = styled.div`
   font-size: 13px;
   color: #ffffff55;
   margin-right: 25px;
-  padding: 0 10px; 
+  padding: 0 10px;
 
-  max-width: 500px; 
+  max-width: 500px;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis; 
+  text-overflow: ellipsis;
 
   > i {
     font-size: 18px;

dashboard/src/main/CurrentError.tsx

@@ -39,8 +39,8 @@ export default class CurrentError extends Component<PropsType, StateType> {
                 e.stopPropagation();
 
                 this.setState({ expanded: false }, () => {
-                  this.context.setCurrentError(null)
-                })
+                  this.context.setCurrentError(null);
+                });
               }}
             >
               <CloseButtonImg src={close} />
@@ -53,19 +53,19 @@ export default class CurrentError extends Component<PropsType, StateType> {
         <Overlay>
           <ExpandedError>
             Porter encountered an error. Full error log:
-            <CodeBlock>
-              {this.props.currentError}
-            </CodeBlock>
+            <CodeBlock>{this.props.currentError}</CodeBlock>
             <ExpandButtonAlt onClick={() => this.setState({ expanded: false })}>
               <i className="material-icons">remove</i>
             </ExpandButtonAlt>
-            <CloseButtonAlt onClick={(e) => {
-              e.stopPropagation();
+            <CloseButtonAlt
+              onClick={(e) => {
+                e.stopPropagation();
 
-              this.setState({ expanded: false }, () => {
-                this.context.setCurrentError(null)
-              })
-            }}>
+                this.setState({ expanded: false }, () => {
+                  this.context.setCurrentError(null);
+                });
+              }}
+            >
               <CloseButtonImg src={close} />
             </CloseButtonAlt>
           </ExpandedError>
@@ -158,15 +158,15 @@ const ExpandButton = styled(CloseButton)`
   }
 
   > i {
-    font-size: 16px; 
+    font-size: 16px;
   }
-`
+`;
 
 const ExpandButtonAlt = styled(ExpandButton)`
   position: absolute;
   top: 5px;
   right: 34px;
-`
+`;
 
 const Overlay = styled.div`
   position: fixed;
@@ -189,17 +189,16 @@ const ExpandedError = styled.div`
   width: 700px;
   left: calc(50% - 350px);
   height: auto;
-  max-height: 500px; 
-  top: 50%; 
+  max-height: 500px;
+  top: 50%;
   transform: translateY(-50%);
   padding: 20px;
   overflow-y: auto;
   background: #272731;
   border: 1px solid #ffffff55;
   font-family: "Work Sans", sans-serif;
-  font-size: 13px; 
-  border-radius: 12px; 
-  
+  font-size: 13px;
+  border-radius: 12px;
 `;
 
 const CodeBlock = styled.span`
@@ -211,10 +210,10 @@ const CodeBlock = styled.span`
   user-select: text;
   max-height: 400px;
   width: 90%;
-  margin-left: 5%; 
-  margin-top: 20px; 
+  margin-left: 5%;
+  margin-top: 20px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 10px; 
+  padding: 10px;
   overflow-wrap: break-word;
 `;

dashboard/src/main/auth/Login.tsx

@@ -50,7 +50,7 @@ export default class Login extends Component<PropsType, StateType> {
     api
       .getCapabilities("", {}, {})
       .then((res) => {
-        this.setState({ 
+        this.setState({
           hasBasic: res.data?.basic_login,
           hasGithub: res.data?.github_login,
           hasGoogle: res.data?.google_login,
@@ -135,12 +135,12 @@ export default class Login extends Component<PropsType, StateType> {
   renderGithubSection = () => {
     if (this.state.hasGithub) {
       return (
-          <OAuthButton onClick={this.githubRedirect}>
-            <IconWrapper>
-              <Icon src={github} />
-              Log in with GitHub
-            </IconWrapper>
-          </OAuthButton>
+        <OAuthButton onClick={this.githubRedirect}>
+          <IconWrapper>
+            <Icon src={github} />
+            Log in with GitHub
+          </IconWrapper>
+        </OAuthButton>
       );
     }
   };
@@ -148,12 +148,12 @@ export default class Login extends Component<PropsType, StateType> {
   renderGoogleSection = () => {
     if (this.state.hasGoogle) {
       return (
-          <OAuthButton onClick={this.googleRedirect}>
-            <IconWrapper>
-              <StyledGoogleIcon />
-              Log in with Google
-            </IconWrapper>
-          </OAuthButton>
+        <OAuthButton onClick={this.googleRedirect}>
+          <IconWrapper>
+            <StyledGoogleIcon />
+            Log in with Google
+          </IconWrapper>
+        </OAuthButton>
       );
     }
   };
@@ -162,60 +162,69 @@ export default class Login extends Component<PropsType, StateType> {
     if (this.state.hasBasic) {
       let { email, password, credentialError, emailError } = this.state;
 
-      return <div>
-        <InputWrapper>
-              <Input
-                type="email"
-                placeholder="Email"
-                value={email}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  this.setState({
-                    email: e.target.value,
-                    emailError: false,
-                    credentialError: false,
-                  })
-                }
-                valid={!credentialError && !emailError}
-              />
-              {this.renderEmailError()}
-            </InputWrapper>
-            <InputWrapper>
-              <Input
-                type="password"
-                placeholder="Password"
-                value={password}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  this.setState({
-                    password: e.target.value,
-                    credentialError: false,
-                  })
-                }
-                valid={!credentialError}
-              />
-              {this.renderCredentialError()}
-            </InputWrapper>
-            <Button onClick={this.handleLogin}>Continue</Button>
-      </div>
+      return (
+        <div>
+          <InputWrapper>
+            <Input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                this.setState({
+                  email: e.target.value,
+                  emailError: false,
+                  credentialError: false,
+                })
+              }
+              valid={!credentialError && !emailError}
+            />
+            {this.renderEmailError()}
+          </InputWrapper>
+          <InputWrapper>
+            <Input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                this.setState({
+                  password: e.target.value,
+                  credentialError: false,
+                })
+              }
+              valid={!credentialError}
+            />
+            {this.renderCredentialError()}
+          </InputWrapper>
+          <Button onClick={this.handleLogin}>Continue</Button>
+        </div>
+      );
     }
-  }
-  
+  };
+
   renderHelper() {
     if (this.state.hasResetPassword) {
-      return <Helper>
-        <Link href="/register">Sign up</Link> |
-        <Link href="/password/reset">Forgot password?</Link>
-      </Helper>
-    } 
+      return (
+        <Helper>
+          <Link href="/register">Sign up</Link> |
+          <Link href="/password/reset">Forgot password?</Link>
+        </Helper>
+      );
+    }
 
-    return <Helper>
-      <Link href="/register">Sign up</Link>
-    </Helper>
+    return (
+      <Helper>
+        <Link href="/register">Sign up</Link>
+      </Helper>
+    );
   }
 
   render() {
     return (
       <StyledLogin>
-        <LoginPanel hasBasic={this.state.hasBasic} numOAuth={+this.state.hasGithub + +this.state.hasGoogle}>
+        <LoginPanel
+          hasBasic={this.state.hasBasic}
+          numOAuth={+this.state.hasGithub + +this.state.hasGoogle}
+        >
           <OverflowWrapper>
             <GradientBg />
           </OverflowWrapper>
@@ -224,27 +233,27 @@ export default class Login extends Component<PropsType, StateType> {
             <Prompt>Log in to Porter</Prompt>
             {this.renderGithubSection()}
             {this.renderGoogleSection()}
-            {(this.state.hasGithub || this.state.hasGoogle) && this.state.hasBasic ? 
+            {(this.state.hasGithub || this.state.hasGoogle) &&
+            this.state.hasBasic ? (
               <OrWrapper>
                 <Line />
                 <Or>or</Or>
-              </OrWrapper> :
-              null
-            }
+              </OrWrapper>
+            ) : null}
             <DarkMatter />
             {this.renderBasicSection()}
             {this.renderHelper()}
           </FormWrapper>
         </LoginPanel>
         <Footer>
-            © 2021 Porter Technologies Inc. •
-            <Link
-              href="https://docs.getporter.dev/docs/terms-of-service"
-              target="_blank"
-            >
-              Terms & Privacy
-            </Link>
-          </Footer>
+          © 2021 Porter Technologies Inc. •
+          <Link
+            href="https://docs.getporter.dev/docs/terms-of-service"
+            target="_blank"
+          >
+            Terms & Privacy
+          </Link>
+        </Footer>
       </StyledLogin>
     );
   }
@@ -303,7 +312,7 @@ const Icon = styled.img`
 const StyledGoogleIcon = styled(GoogleIcon)`
   width: 38px;
   height: 38px;
-`
+`;
 
 const OAuthButton = styled.div`
   width: 200px;
@@ -317,7 +326,7 @@ const OAuthButton = styled.div`
   user-select: none;
   font-weight: 500;
   font-size: 13px;
-  margin: 10px 0; 
+  margin: 10px 0;
   overflow: hidden;
   :hover {
     background: #ffffffdd;
@@ -465,7 +474,7 @@ const GradientBg = styled.div`
 
 const LoginPanel = styled.div`
   width: 330px;
-  height: ${(props: { numOAuth: number, hasBasic: boolean }) =>
+  height: ${(props: { numOAuth: number; hasBasic: boolean }) =>
     280 + +props.hasBasic * 150 + props.numOAuth * 50}px;
   background: white;
   margin-top: -20px;

dashboard/src/main/auth/Register.tsx

@@ -46,7 +46,7 @@ export default class Register extends Component<PropsType, StateType> {
     api
       .getCapabilities("", {}, {})
       .then((res) => {
-        this.setState({ 
+        this.setState({
           hasGithub: res.data?.github_login,
           hasGoogle: res.data?.google_login,
           hasBasic: res.data?.basic_login,
@@ -133,12 +133,12 @@ export default class Register extends Component<PropsType, StateType> {
   renderGithubSection = () => {
     if (this.state.hasGithub) {
       return (
-          <OAuthButton onClick={this.githubRedirect}>
-            <IconWrapper>
-              <Icon src={github} />
-              Sign up with GitHub
-            </IconWrapper>
-          </OAuthButton>
+        <OAuthButton onClick={this.githubRedirect}>
+          <IconWrapper>
+            <Icon src={github} />
+            Sign up with GitHub
+          </IconWrapper>
+        </OAuthButton>
       );
     }
   };
@@ -146,12 +146,12 @@ export default class Register extends Component<PropsType, StateType> {
   renderGoogleSection = () => {
     if (this.state.hasGoogle) {
       return (
-          <OAuthButton onClick={this.googleRedirect}>
-            <IconWrapper>
-              <StyledGoogleIcon />
-              Sign up with Google
-            </IconWrapper>
-          </OAuthButton>
+        <OAuthButton onClick={this.googleRedirect}>
+          <IconWrapper>
+            <StyledGoogleIcon />
+            Sign up with Google
+          </IconWrapper>
+        </OAuthButton>
       );
     }
   };
@@ -166,54 +166,60 @@ export default class Register extends Component<PropsType, StateType> {
     } = this.state;
 
     if (this.state.hasBasic) {
-      return <div><InputWrapper>
-        <Input
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            this.setState({ email: e.target.value, emailError: false })
-          }
-          valid={!emailError}
-        />
-        {this.renderEmailError()}
-      </InputWrapper>
-      <Input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          this.setState({
-            password: e.target.value,
-            confirmPasswordError: false,
-          })
-        }
-        valid={true}
-      />
-      <InputWrapper>
-        <Input
-          type="password"
-          placeholder="Confirm Password"
-          value={confirmPassword}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            this.setState({
-              confirmPassword: e.target.value,
-              confirmPasswordError: false,
-            })
-          }
-          valid={!confirmPasswordError}
-        />
-        {this.renderConfirmPasswordError()}
-      </InputWrapper>
-      <Button onClick={this.handleRegister}>Continue</Button>
-      </div>
+      return (
+        <div>
+          <InputWrapper>
+            <Input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                this.setState({ email: e.target.value, emailError: false })
+              }
+              valid={!emailError}
+            />
+            {this.renderEmailError()}
+          </InputWrapper>
+          <Input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              this.setState({
+                password: e.target.value,
+                confirmPasswordError: false,
+              })
+            }
+            valid={true}
+          />
+          <InputWrapper>
+            <Input
+              type="password"
+              placeholder="Confirm Password"
+              value={confirmPassword}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                this.setState({
+                  confirmPassword: e.target.value,
+                  confirmPasswordError: false,
+                })
+              }
+              valid={!confirmPasswordError}
+            />
+            {this.renderConfirmPasswordError()}
+          </InputWrapper>
+          <Button onClick={this.handleRegister}>Continue</Button>
+        </div>
+      );
     }
-  }
+  };
 
   render() {
     return (
       <StyledRegister>
-        <LoginPanel hasBasic={this.state.hasBasic} numOAuth={+this.state.hasGithub + +this.state.hasGoogle}>
+        <LoginPanel
+          hasBasic={this.state.hasBasic}
+          numOAuth={+this.state.hasGithub + +this.state.hasGoogle}
+        >
           <OverflowWrapper>
             <GradientBg />
           </OverflowWrapper>
@@ -222,13 +228,13 @@ export default class Register extends Component<PropsType, StateType> {
             <Prompt>Sign up for Porter</Prompt>
             {this.renderGithubSection()}
             {this.renderGoogleSection()}
-            {(this.state.hasGithub || this.state.hasGoogle) && this.state.hasBasic ? 
+            {(this.state.hasGithub || this.state.hasGoogle) &&
+            this.state.hasBasic ? (
               <OrWrapper>
                 <Line />
                 <Or>or</Or>
-              </OrWrapper> :
-              null
-            }
+              </OrWrapper>
+            ) : null}
             <DarkMatter />
             {this.renderBasicSection()}
             <Helper>
@@ -304,7 +310,7 @@ const Icon = styled.img`
 const StyledGoogleIcon = styled(GoogleIcon)`
   width: 38px;
   height: 38px;
-`
+`;
 
 const OAuthButton = styled.div`
   width: 200px;
@@ -318,7 +324,7 @@ const OAuthButton = styled.div`
   user-select: none;
   font-weight: 500;
   font-size: 13px;
-  margin: 10px 0; 
+  margin: 10px 0;
   overflow: hidden;
   :hover {
     background: #ffffffdd;
@@ -465,7 +471,7 @@ const GradientBg = styled.div`
 
 const LoginPanel = styled.div`
   width: 330px;
-  height: ${(props: { numOAuth: number, hasBasic: boolean }) =>
+  height: ${(props: { numOAuth: number; hasBasic: boolean }) =>
     270 + +props.hasBasic * 180 + props.numOAuth * 50}px;
   background: white;
   margin-top: -20px;

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -109,7 +109,7 @@ export default class ChartList extends Component<PropsType, StateType> {
   setupWebsocket = (kind: string) => {
     let { currentCluster, currentProject } = this.context;
     let protocol = window.location.protocol == "https:" ? "wss" : "ws";
-    
+
     let ws = new WebSocket(
       `${protocol}://${window.location.host}/api/projects/${currentProject.id}/k8s/${kind}/status?cluster_id=${currentCluster.id}`
     );

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

@@ -340,12 +340,12 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       })
       .catch((err) => {
         let parsedErr =
-          err?.response?.data?.errors && err.response.data.errors[0]
+          err?.response?.data?.errors && err.response.data.errors[0];
 
         if (parsedErr) {
           err = parsedErr;
         }
-        
+
         this.setState({
           saveValuesStatus: err,
           loading: false,

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

@@ -84,9 +84,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       .then((res) => {
         let image = res.data?.config?.image?.repository;
         let tag = res.data?.config?.image?.tag.toString();
-        console.log("image", res.data?.config?.image);
-        console.log("stringified tag is", tag);
-        let newestImage = tag ? image + ":" + tag : image
+        let newestImage = tag ? image + ":" + tag : image;
 
         if (
           (image === "porterdev/hello-porter-job" ||
@@ -106,7 +104,11 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           );
         } else {
           this.setState(
-            { currentChart: res.data, loading: false, newestImage: newestImage },
+            {
+              currentChart: res.data,
+              loading: false,
+              newestImage: newestImage,
+            },
             () => {
               this.updateTabs();
             }
@@ -116,7 +118,8 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       .catch(console.log);
   };
 
-  refreshChart = (revision : number) => this.getChartData(this.state.currentChart, revision);
+  refreshChart = (revision: number) =>
+    this.getChartData(this.state.currentChart, revision);
 
   mergeNewJob = (newJob: any) => {
     let jobs = this.state.jobs;
@@ -264,7 +267,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           let splits = imageUrl.split(":");
           imageUrl = splits[0];
           tag = splits[1].toString();
-          console.log("hsv stringified tag is", tag);
         } else if (!tag) {
           tag = "latest";
         }
@@ -286,7 +288,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       }
 
       let imageUrl = this.state.newestImage;
-      let tag = null;
+      let tag = null as string;
 
       if (imageUrl) {
         if (imageUrl.includes(":")) {
@@ -297,17 +299,18 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           tag = "latest";
         }
 
-        console.log("later stringified tag is", tag);
-
         _.set(values, "image.repository", imageUrl);
-        _.set(values, "image.tag", tag);
+        _.set(values, "image.tag", `${tag}`);
       }
 
       // Weave in preexisting values and convert to yaml
-      conf = yaml.dump({
-        ...(this.state.currentChart.config as Object),
-        ...values,
-      });
+      conf = yaml.dump(
+        {
+          ...(this.state.currentChart.config as Object),
+          ...values,
+        },
+        { forceQuotes: true }
+      );
     }
 
     api
@@ -331,7 +334,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       .catch((err) => {
         let parsedErr =
           err?.response?.data?.errors && err.response.data.errors[0];
-          
+
         if (parsedErr) {
           err = parsedErr;
         }

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

@@ -132,7 +132,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       .catch((err) => {
         let parsedErr =
           err?.response?.data?.errors && err.response.data.errors[0];
-          
+
         if (parsedErr) {
           err = parsedErr;
         }

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

@@ -69,7 +69,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
       .catch((err) => {
         let parsedErr =
           err?.response?.data?.errors && err.response.data.errors[0];
-          
+
         if (parsedErr) {
           err = parsedErr;
         }

dashboard/src/main/home/launch/Launch.tsx

@@ -203,10 +203,7 @@ export default class Templates extends Component<PropsType, StateType> {
         <TemplatesWrapper>
           <TitleSection>
             <Title>Launch</Title>
-            <a
-              href="https://docs.getporter.dev/docs/add-ons"
-              target="_blank"
-            >
+            <a href="https://docs.getporter.dev/docs/add-ons" target="_blank">
               <i className="material-icons">help_outline</i>
             </a>
           </TitleSection>

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

@@ -124,7 +124,7 @@ class LaunchFlow extends Component<PropsType, StateType> {
           saveValuesStatus: `Could not create GitHub Action: ${err}`,
         });
 
-        setCurrentError(err)
+        setCurrentError(err);
       });
   };
 
@@ -281,7 +281,7 @@ class LaunchFlow extends Component<PropsType, StateType> {
                 saveValuesStatus: `Could not create subdomain: ${err}`,
               });
 
-              setCurrentError(err)
+              setCurrentError(err);
             });
         });
 
@@ -336,7 +336,7 @@ class LaunchFlow extends Component<PropsType, StateType> {
         this.setState({
           saveValuesStatus: `Could not deploy template: ${err}`,
         });
-        setCurrentError(err)
+        setCurrentError(err);
       });
   };