app deployment flow stub

dashboard/src/main/home/Home.tsx

@@ -37,6 +37,7 @@ import Modal from "components/porter/Modal";
 import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import Button from "components/porter/Button";
+import NewAppFlow from "./app-dashboard/NewAppFlow";
 
 // Guarded components
 const GuardedProjectSettings = fakeGuardedRoute("settings", "", [
@@ -399,6 +400,11 @@ const Home: React.FC<Props> = (props) => {
           />
 
           <Switch>
+            <Route
+              path="/apps/new"
+            >
+              <NewAppFlow />
+            </Route>
             <Route
               path="/apps"
             >

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -20,6 +20,7 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import SearchBar from "components/porter/SearchBar";
 import Toggle from "components/porter/Toggle";
+import Link from "components/porter/Link";
 
 type Props = {
 };
@@ -109,9 +110,11 @@ const AppDashboard: React.FC<Props> = ({
           setActive={setView}
         />
         <Spacer inline x={2} />
-        <Button onClick={() => {}} height="30px" width="160px">
-          <I className="material-icons">add</I> New application
-        </Button>
+        <Link to="/apps/new">
+          <Button onClick={() => {}} height="30px" width="160px">
+            <I className="material-icons">add</I> New application
+          </Button>
+        </Link>
       </Container>
       <Spacer y={1} />
       {view === "grid" ? (

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useState, useContext, useMemo } from "react";
+import styled from "styled-components";
+import _ from "lodash";
+
+import { hardcodedNames, hardcodedIcons } from "shared/hardcodedNameDict";
+import { Context } from "shared/Context";
+import api from "shared/api";
+import { pushFiltered } from "shared/routing";
+import web from "assets/web.png";
+
+import Back from "components/porter/Back";
+import DashboardHeader from "../cluster-dashboard/DashboardHeader";
+import Link from "components/porter/Link";
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import Input from "components/porter/Input";
+import VerticalSteps from "components/porter/VerticalSteps";
+import PorterFormWrapper from "components/porter-form/PorterFormWrapper";
+import Placeholder from "components/Placeholder";
+import Button from "components/porter/Button";
+import { generateSlug } from "random-word-slugs";
+import { RouteComponentProps, withRouter } from "react-router";
+import Error from "components/porter/Error";
+
+type Props = RouteComponentProps & {
+};
+
+const NewAppFlow: React.FC<Props> = ({
+  ...props
+}) => {
+  const { currentCluster, currentProject } = useContext(Context);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  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">
+              Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+            </Text>
+            <Spacer height="20px" />
+            <Input
+              placeholder="ex: academic-sophon"
+              value=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+          </>,
+          <>
+            <Text size={16}>Some settings</Text>
+            <Spacer y={0.5} />
+            <Text color="helper">
+            Configure settings for this add-on.
+            </Text>
+            <Spacer y={0.5} />
+            <Text color="helper">
+              Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+            </Text>
+            <Spacer height="20px" />
+            <Input
+              placeholder="ex: academic-sophon"
+              value=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+                        <Spacer y={0.5} />
+            <Text color="helper">
+              Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+            </Text>
+            <Spacer height="20px" />
+            <Input
+              placeholder="ex: academic-sophon"
+              value=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+                        <Spacer y={0.5} />
+            <Text color="helper">
+              Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+            </Text>
+            <Spacer height="20px" />
+            <Input
+              placeholder="ex: academic-sophon"
+              value=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+          </>,
+          <>
+            <Text size={16}>More configuration</Text>
+            <Spacer y={0.5} />
+            <Text color="helper">
+            Configure settings for this add-on.
+            </Text>
+            <Spacer y={1} />
+            SOME MORE STUFF HERE
+          </>
+        ]}
+      />
+      <Spacer height="80px" />
+    </StyledConfigureTemplate>
+  );
+};
+
+export default withRouter(NewAppFlow);
+
+const DarkMatter = styled.div`
+  width: 100%;
+  margin-top: -5px;
+`;
+
+const Icon = styled.img`
+  margin-right: 15px;
+  height: 28px;
+  animation: floatIn 0.5s;
+  animation-fill-mode: forwards;
+
+  @keyframes floatIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+`;
+
+const StyledConfigureTemplate = styled.div`
+  width: 100%;
+  height: 100%;
+`;