general error component (#2813)

* install github app button

* general error component

dashboard/src/components/CredentialsForm.tsx

@@ -12,7 +12,12 @@ import Heading from "components/form-components/Heading";
 import Helper from "./form-components/Helper";
 import InputRow from "./form-components/InputRow";
 import SaveButton from "./SaveButton";
+import Button from "components/porter/Button";
 import Loading from "./Loading";
+import Error from "./porter/Error";
+import Modal from "./porter/Modal";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 
 type Props = {
   goBack: () => void;
@@ -162,14 +167,13 @@ const CredentialsForm: React.FC<Props> = ({
             isRequired
           />
         </StyledForm>
-        <SaveButton
+        <Button
           disabled={awsAccessKeyID === "" || awsSecretAccessKey === ""}
           onClick={createCreds}
           status={createStatus}
-          statusPosition="right"
-          clearPosition
-          text="Continue"
-        />
+        >
+          Continue
+        </Button>
       </>
     );
   }
@@ -181,7 +185,7 @@ const CredentialsForm: React.FC<Props> = ({
           <i className="material-icons">first_page</i>
           Select cloud
         </BackButton>
-        <Spacer />
+        <HSpacer />
         <Img src={aws} />
         Set AWS credentials
         <HelperButton onClick={() => window.open("https://docs.porter.run/getting-started/provisioning-on-aws/", "_blank")}>
@@ -242,7 +246,7 @@ const CloseButton = styled.div`
   }
 `;
 
-const Spacer = styled.div`
+const HSpacer = styled.div`
   height: 1px;
   width: 17px;
 `;

dashboard/src/components/SaveButton.tsx

@@ -6,7 +6,7 @@ type Props = {
   text?: string;
   onClick: () => void;
   disabled?: boolean;
-  status?: string | null;
+  status?: React.ReactNode | null;
   color?: string;
   rounded?: boolean;
   helper?: string | null;
@@ -117,7 +117,7 @@ const StatusWrapper = styled.div<{
   align-items: center;
   font-family: "Work Sans", sans-serif;
   font-size: 13px;
-  color: #ffffff55;
+  color: #ff385d;
   ${(props) => {
     if (props.position !== "right") {
       return "margin-right: 25px;";
@@ -132,7 +132,7 @@ const StatusWrapper = styled.div<{
     font-size: 18px;
     margin-right: 10px;
     float: left;
-    color: ${(props) => (props.successful ? "#4797ff" : "#fcba03")};
+    color: ${(props) => (props.successful ? "#4797ff" : "#ff385d")};
   }
 
   animation-fill-mode: forwards;

dashboard/src/components/porter/Button.tsx

@@ -7,7 +7,7 @@ type Props = {
   children: React.ReactNode;
   onClick: () => void;
   disabled?: boolean;
-  status?: string;
+  status?: React.ReactNode;
   helperText?: string;
   loadingText?: string;
   successText?: string;
@@ -48,10 +48,7 @@ const Button: React.FC<Props> = ({
         )   
       default:
         return (
-          <StatusWrapper success={false}>
-            <i className="material-icons">error_outline</i>
-            Could not update
-          </StatusWrapper>
+          <StatusWrapper success={false}>{status}</StatusWrapper>
         );
     }
   };
@@ -102,7 +99,6 @@ const StatusWrapper = styled.div<{
   color: #ffffff55;
   margin-left: 15px;
   max-width: 500px;
-  overflow: hidden;
   text-overflow: ellipsis;
   animation: ${floatIn} 0.5s;
   animation-fill-mode: forwards;

dashboard/src/components/porter/Error.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import styled from "styled-components";
+
+import expand from "assets/expand.png";
+import Modal from "./Modal";
+
+type Props = {
+  message: string;
+  ctaText?: string;
+  ctaOnClick?: () => void;
+  errorModalContents?: React.ReactNode;
+};
+
+const Error: React.FC<Props> = ({
+  message,
+  ctaText,
+  ctaOnClick,
+  errorModalContents,
+}) => {
+  const [errorModalOpen, setErrorModalOpen] = useState(false);
+  
+  return (
+    <>
+      <StyledError>
+        <i className="material-icons">error_outline</i>
+        <Bold>Error:</Bold>
+        {message}
+        {ctaText && (
+          <Cta onClick={() => {
+            errorModalContents ? setErrorModalOpen(true) : ctaOnClick();
+          }}>
+            <Underline>{ctaText}</Underline>
+            <i className="material-icons">open_in_new</i>
+          </Cta>
+        )}
+      </StyledError>
+      {errorModalOpen && createPortal(
+        <Modal closeModal={() => setErrorModalOpen(false)}>
+          {errorModalContents}
+        </Modal>,
+        document.body
+      )}
+    </>
+  );
+};
+
+export default Error;
+
+const Underline = styled.span`
+  text-decoration: underline;
+`;
+
+const Cta = styled.span`
+  margin-left: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  
+  > i {
+    margin-left: 5px;
+    font-size: 15px;
+  }
+`;
+
+const Bold = styled.span`
+  font-weight: 600;
+  margin-right: 5px;
+`;
+
+const StyledError = styled.div`
+  line-height: 1.5;
+  color: #ff385d;
+  font-size: 13px;
+  display: flex; 
+  align-items: center;
+  > i {
+    font-size: 18px;
+    margin-top: -1px;
+    margin-right: 7px;
+    float: left;
+    font-weight: 600;
+  }
+`;