adding github action modal

dashboard/src/main/home/app-dashboard/new-app-flow/GithubActionModal.tsx

@@ -0,0 +1,86 @@
+import Modal from "components/porter/Modal";
+import React from "react";
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import ExpandableSection from "components/porter/ExpandableSection";
+import Fieldset from "components/porter/Fieldset";
+import styled from "styled-components";
+import Button from "components/porter/Button";
+import Input from "components/porter/Input";
+import Select from "components/porter/Select";
+
+interface GithubActionModalProps {
+    closeModal: () => void;
+}
+
+const GithubActionModal: React.FC<GithubActionModalProps> = ({
+    closeModal,
+}) => {
+    return (
+        <Modal closeModal={closeModal}>
+            <Text size={16}>
+                Continuous Integration (CI) with GitHub Actions
+            </Text>
+            <Spacer height="15px" />
+            <Text color="helper">
+                In order to automatically update your services every time new code is pushed to your GitHub branch, you will need the following file in your Github repository:
+            </Text>
+            <Spacer y={1} />
+            <ExpandableSection
+                noWrapper
+                expandText="[+] Show code"
+                collapseText="[-] Hide code"
+                Header={
+                    <ModalHeader>./github/workflows/porter_deploy.yml</ModalHeader>
+                }
+                ExpandedSection={
+                    <>
+                        <Spacer height="15px" />
+                        <Fieldset background="#1b1d2688">
+                            • Amazon Elastic Kubernetes Service (EKS) = $73/mo
+                            <Spacer height="15px" />
+                            • Amazon EC2:
+                            <Spacer height="15px" />
+                            <Tab />+ System workloads: t3.medium instance (2) = $60.74/mo
+                            <Spacer height="15px" />
+                            <Tab />+ Monitoring workloads: t3.large instance (1) = $60.74/mo
+                            <Spacer height="15px" />
+                            <Tab />+ Application workloads: t3.xlarge instance (1) = $121.47/mo
+                        </Fieldset>
+                    </>
+                }
+            />
+            <Spacer y={1} />
+            <Text color="helper">
+                Porter can open a PR for you to approve and merge this file into your repository, or you can add it yourself.
+            </Text>
+            <Spacer y={1} />
+            <Select
+                options={[
+                    { label: "I authorize Porter to open a PR on my behalf", value: "I authorize Porter to open a PR on my behalf" },
+                    { label: "I will copy the file into my repository myself", value: "I will copy the file into my repository myself" },
+                ]}
+                onChange={(x: any) => console.log(x)}
+            />
+            <Button
+                onClick={closeModal}
+            >
+                Complete
+            </Button>
+        </Modal>
+    )
+}
+
+export default GithubActionModal;
+
+const Tab = styled.span`
+  margin-left: 20px;
+  height: 1px;
+`;
+
+const ModalHeader = styled.div`
+  font-weight: 600;
+  font-size: 20px;
+  font-family: monospace; ;
+
+`;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -25,6 +25,7 @@ import SourceSelector, { SourceType } from "./SourceSelector";
 import SourceSettings from "./SourceSettings"
 import Services from "./Services";
 import EnvGroupArray, { KeyValueType } from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
+import GithubActionModal from "./GithubActionModal";
 
 type Props = RouteComponentProps & {
 };
@@ -62,114 +63,118 @@ const NewAppFlow: React.FC<Props> = ({
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [formState, setFormState] = useState<FormState>(INITIAL_STATE);
+  const [showGHAModal, setShowGHAModal] = useState<boolean>(false);
 
   return (
-    <StyledConfigureTemplate>
-      <Back to="/apps" />
-      <DashboardHeader
-        prefix={
-          <Icon
-            src={web}
-          />
-        }
-        title="Deploy a new application"
-        capitalize={false}
-        disableLineBreak
-      />
-      <DarkMatter />
-      <VerticalSteps
-        currentStep={currentStep}
-        steps={[
-          <>
-            <Text size={16}>Application name</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Lowercase letters, numbers, and "-" only.
-            </Text>
-            <Spacer y={0.5} />
-            <Input
-              placeholder="ex: academic-sophon"
-              value={formState.applicationName}
-              width="100%"
-              setValue={(e) => {
-                setFormState({ ...formState, applicationName: e })
-                if (Validators.applicationName(e)) {
-                  setCurrentStep(Math.max(currentStep, 1));
-                }
-              }}
+    <>
+      <StyledConfigureTemplate>
+        <Back to="/apps" />
+        <DashboardHeader
+          prefix={
+            <Icon
+              src={web}
             />
-          </>,
-          <>
-            <Text size={16}>Deployment method</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Deploy from a Git repository or a Docker registry.
-              <a
-                href="https://docs.porter.run/deploying-applications/overview"
-                target="_blank"
-              >
-                &nbsp;Learn more.
-              </a>
-            </Text>
-            <Spacer y={0.5} />
-            <SourceSelector
-              selectedSourceType={formState.selectedSourceType}
-              setSourceType={(type) => {
-                setFormState({ ...formState, selectedSourceType: type })
-                if (Validators.selectedSourceType(type)) {
-                  setCurrentStep(Math.max(currentStep, 2));
-                }
-              }}
-            />
-            <SourceSettings source={formState.selectedSourceType} />
-          </>,
-          <>
-            <Text size={16}>Services</Text>
-            <Spacer y={1} />
-            <Services
-              setServices={
-                (services: any[]) => {
-                  setFormState({ ...formState, serviceList: services })
-                  if (Validators.serviceList(services)) {
-                    setCurrentStep(Math.max(currentStep, 4));
+          }
+          title="Deploy a new application"
+          capitalize={false}
+          disableLineBreak
+        />
+        <DarkMatter />
+        <VerticalSteps
+          currentStep={currentStep}
+          steps={[
+            <>
+              <Text size={16}>Application name</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Lowercase letters, numbers, and "-" only.
+              </Text>
+              <Spacer y={0.5} />
+              <Input
+                placeholder="ex: academic-sophon"
+                value={formState.applicationName}
+                width="100%"
+                setValue={(e) => {
+                  setFormState({ ...formState, applicationName: e })
+                  if (Validators.applicationName(e)) {
+                    setCurrentStep(Math.max(currentStep, 1));
                   }
                 }}
-              services={formState.serviceList}
-            />
-          </>,
-          <>
-            <Text size={16}>Environment variables</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Specify environment variables shared among all services.
-            </Text>
-            <EnvGroupArray
-              values={formState.envVariables}
-              setValues={(x: any) => setFormState({ ...formState, envVariables: x })}
-              fileUpload={true}
-            />
-          </>,
-          <>
-            <Text size={16}>Release command (optional)</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              If specified, this command will be run before every deployment.
-            </Text>
-            <Spacer y={0.5} />
-            <Input
-              placeholder="yarn ./scripts/run-migrations.js"
-              value={""}
-              width="100%"
-              setValue={(e) => { }}
-            />
-          </>
-        ]}
-      />
-      <Spacer y={1} />
-      <Button onClick={() => ({})}>
-        DEPLYOY
-      </Button>
-    </StyledConfigureTemplate>
+              />
+            </>,
+            <>
+              <Text size={16}>Deployment method</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Deploy from a Git repository or a Docker registry.
+                <a
+                  href="https://docs.porter.run/deploying-applications/overview"
+                  target="_blank"
+                >
+                  &nbsp;Learn more.
+                </a>
+              </Text>
+              <Spacer y={0.5} />
+              <SourceSelector
+                selectedSourceType={formState.selectedSourceType}
+                setSourceType={(type) => {
+                  setFormState({ ...formState, selectedSourceType: type })
+                  if (Validators.selectedSourceType(type)) {
+                    setCurrentStep(Math.max(currentStep, 2));
+                  }
+                }}
+              />
+              <SourceSettings source={formState.selectedSourceType} />
+            </>,
+            <>
+              <Text size={16}>Services</Text>
+              <Spacer y={1} />
+              <Services
+                setServices={
+                  (services: any[]) => {
+                    setFormState({ ...formState, serviceList: services })
+                    if (Validators.serviceList(services)) {
+                      setCurrentStep(Math.max(currentStep, 4));
+                    }
+                  }}
+                services={formState.serviceList}
+              />
+            </>,
+            <>
+              <Text size={16}>Environment variables</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Specify environment variables shared among all services.
+              </Text>
+              <EnvGroupArray
+                values={formState.envVariables}
+                setValues={(x: any) => setFormState({ ...formState, envVariables: x })}
+                fileUpload={true}
+              />
+            </>,
+            <>
+              <Text size={16}>Release command (optional)</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                If specified, this command will be run before every deployment.
+              </Text>
+              <Spacer y={0.5} />
+              <Input
+                placeholder="yarn ./scripts/run-migrations.js"
+                value={""}
+                width="100%"
+                setValue={(e) => { }}
+              />
+            </>
+          ]}
+        />
+        <Spacer y={1} />
+        <Button onClick={() => setShowGHAModal(true)}>
+          DEPLYOY
+        </Button>
+      </StyledConfigureTemplate>
+      {showGHAModal && <GithubActionModal closeModal={() => setShowGHAModal(false)} />}
+    </>
   );
 };
 
@@ -203,3 +208,5 @@ const StyledConfigureTemplate = styled.div`
   height: 100%;
 `;
 
+
+