Initialized components and setup routers

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -0,0 +1,20 @@
+import DynamicLink from "components/DynamicLink";
+import React from "react";
+import DashboardHeader from "../DashboardHeader";
+import StackList from "./_StackList";
+const Dashboard = () => {
+  return (
+    <>
+      <DashboardHeader
+        materialIconClass="material-icons-outlined"
+        image={"lan"}
+        title="Preview Environments"
+        description=""
+      />
+      <DynamicLink to={"/stacks/launch"}>Create stack</DynamicLink>
+      <StackList />
+    </>
+  );
+};
+
+export default Dashboard;

dashboard/src/main/home/cluster-dashboard/stacks/_StackList.tsx

@@ -0,0 +1,219 @@
+import DynamicLink from "components/DynamicLink";
+import Loading from "components/Loading";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { GetStacksResponse, Stack } from "./types";
+
+const StackList = () => {
+  const [stacks, setStacks] = useState<Stack[]>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    mockApi()
+      .then((res) => {
+        setStacks(res.data);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      {stacks.map((stack) => (
+        <Card to={`/stacks/${stack.id}`} key={stack.id}>
+          {stack.name} - Current Revision: {stack.latest_revision.id}
+        </Card>
+      ))}
+    </>
+  );
+};
+
+export default StackList;
+
+const Card = styled(DynamicLink)`
+  display: block;
+`;
+
+const mockApi = () =>
+  new Promise<{ data: GetStacksResponse }>((res) =>
+    setTimeout(() => res({ data: StacksMock }), 500)
+  );
+
+const StacksMock: GetStacksResponse = [
+  {
+    created_at: "2022-06-09T11:59:27.729463-04:00",
+    updated_at: "2022-06-09T11:59:27.729463-04:00",
+    name: "string",
+    id: "5433422f46f3ba52e49bb46dd1e12ab5",
+    latest_revision: {
+      created_at: "2022-06-09T11:59:27.731416-04:00",
+      id: 1,
+      status: "deploying",
+      stack_id: "5433422f46f3ba52e49bb46dd1e12ab5",
+      resources: [
+        {
+          created_at: "2022-06-09T11:59:27.732213-04:00",
+          updated_at: "2022-06-09T11:59:27.732213-04:00",
+          stack_id: "5433422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "string",
+          id: "4b2cae112ca29203acdef784392e7ac0",
+          stack_app_data: {
+            template_repo_url: "",
+            template_name: "string",
+            template_version: "string",
+          },
+          stack_source_config: {
+            created_at: "2022-06-09T11:59:27.732334-04:00",
+            updated_at: "2022-06-09T11:59:27.732334-04:00",
+            stack_id: "5433422f46f3ba52e49bb46dd1e12ab5",
+            stack_revision_id: 1,
+            name: "my-source-config",
+            id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+            image_repo_uri: "image-repo-uri",
+            image_tag: "tag",
+          },
+        },
+      ],
+      source_configs: [
+        {
+          created_at: "2022-06-09T11:59:27.732334-04:00",
+          updated_at: "2022-06-09T11:59:27.732334-04:00",
+          stack_id: "5433422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "my-source-config",
+          id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+          image_repo_uri: "image-repo-uri",
+          image_tag: "tag",
+        },
+      ],
+    },
+    revisions: [
+      {
+        created_at: "2022-06-09T11:59:27.731416-04:00",
+        id: 1,
+        status: "deploying",
+        stack_id: "5433422f46f3ba52e49bb46dd1e12ab5",
+      },
+    ],
+  },
+  {
+    created_at: "2022-06-09T11:59:27.729463-04:00",
+    updated_at: "2022-06-09T11:59:27.729463-04:00",
+    name: "string",
+    id: "9873422f46f3ba52e49bb46dd1e12ab5",
+    latest_revision: {
+      created_at: "2022-06-09T11:59:27.731416-04:00",
+      id: 1,
+      status: "deploying",
+      stack_id: "9873422f46f3ba52e49bb46dd1e12ab5",
+      resources: [
+        {
+          created_at: "2022-06-09T11:59:27.732213-04:00",
+          updated_at: "2022-06-09T11:59:27.732213-04:00",
+          stack_id: "9873422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "string",
+          id: "4b2cae112ca29203acdef784392e7ac0",
+          stack_app_data: {
+            template_repo_url: "",
+            template_name: "string",
+            template_version: "string",
+          },
+          stack_source_config: {
+            created_at: "2022-06-09T11:59:27.732334-04:00",
+            updated_at: "2022-06-09T11:59:27.732334-04:00",
+            stack_id: "9873422f46f3ba52e49bb46dd1e12ab5",
+            stack_revision_id: 1,
+            name: "my-source-config",
+            id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+            image_repo_uri: "image-repo-uri",
+            image_tag: "tag",
+          },
+        },
+      ],
+      source_configs: [
+        {
+          created_at: "2022-06-09T11:59:27.732334-04:00",
+          updated_at: "2022-06-09T11:59:27.732334-04:00",
+          stack_id: "9873422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "my-source-config",
+          id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+          image_repo_uri: "image-repo-uri",
+          image_tag: "tag",
+        },
+      ],
+    },
+    revisions: [
+      {
+        created_at: "2022-06-09T11:59:27.731416-04:00",
+        id: 1,
+        status: "deploying",
+        stack_id: "9873422f46f3ba52e49bb46dd1e12ab5",
+      },
+    ],
+  },
+  {
+    created_at: "2022-06-09T11:59:27.729463-04:00",
+    updated_at: "2022-06-09T11:59:27.729463-04:00",
+    name: "string",
+    id: "1753422f46f3ba52e49bb46dd1e12ab5",
+    latest_revision: {
+      created_at: "2022-06-09T11:59:27.731416-04:00",
+      id: 1,
+      status: "deploying",
+      stack_id: "1753422f46f3ba52e49bb46dd1e12ab5",
+      resources: [
+        {
+          created_at: "2022-06-09T11:59:27.732213-04:00",
+          updated_at: "2022-06-09T11:59:27.732213-04:00",
+          stack_id: "1753422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "string",
+          id: "4b2cae112ca29203acdef784392e7ac0",
+          stack_app_data: {
+            template_repo_url: "",
+            template_name: "string",
+            template_version: "string",
+          },
+          stack_source_config: {
+            created_at: "2022-06-09T11:59:27.732334-04:00",
+            updated_at: "2022-06-09T11:59:27.732334-04:00",
+            stack_id: "1753422f46f3ba52e49bb46dd1e12ab5",
+            stack_revision_id: 1,
+            name: "my-source-config",
+            id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+            image_repo_uri: "image-repo-uri",
+            image_tag: "tag",
+          },
+        },
+      ],
+      source_configs: [
+        {
+          created_at: "2022-06-09T11:59:27.732334-04:00",
+          updated_at: "2022-06-09T11:59:27.732334-04:00",
+          stack_id: "1753422f46f3ba52e49bb46dd1e12ab5",
+          stack_revision_id: 1,
+          name: "my-source-config",
+          id: "0d6aa05dcb37e5a0a4e8febd4854dac2",
+          image_repo_uri: "image-repo-uri",
+          image_tag: "tag",
+        },
+      ],
+    },
+    revisions: [
+      {
+        created_at: "2022-06-09T11:59:27.731416-04:00",
+        id: 1,
+        status: "deploying",
+        stack_id: "1753422f46f3ba52e49bb46dd1e12ab5",
+      },
+    ],
+  },
+];

dashboard/src/main/home/cluster-dashboard/stacks/launch/NewApp.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const NewApp = () => {
+  return <div>NewApp</div>;
+};
+
+export default NewApp;

dashboard/src/main/home/cluster-dashboard/stacks/launch/Overview.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Overview = () => {
+  return <div>Overview</div>;
+};
+
+export default Overview;

dashboard/src/main/home/cluster-dashboard/stacks/launch/SelectSource.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SelectSource = () => {
+  return <div>SelectSource</div>;
+};
+
+export default SelectSource;

dashboard/src/main/home/cluster-dashboard/stacks/launch/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router";
+import NewApp from "./NewApp";
+import Overview from "./Overview";
+import SelectSource from "./SelectSource";
+
+const LaunchRoutes = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${path}/source`}>
+        <SelectSource />
+      </Route>
+      <Route path={`${path}/overview`}>
+        <Overview />
+      </Route>
+      <Route path={`${path}/new-app`}>
+        <NewApp />
+      </Route>
+      <Route path={`*`}>
+        <Redirect to={`${path}/source`} />
+      </Route>
+    </Switch>
+  );
+};
+
+export default LaunchRoutes;

dashboard/src/main/home/cluster-dashboard/stacks/routes.tsx

@@ -1,7 +1,24 @@
 import React from "react";
+import { Route, Switch, useLocation, useRouteMatch } from "react-router";
+import Dashboard from "./Dashboard";
+import LaunchRoutes from "./launch";
 
 const routes = () => {
-  return <div>routes</div>;
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${path}/launch`}>
+        <LaunchRoutes />
+      </Route>
+      <Route path={`${path}/`} exact>
+        <Dashboard />
+      </Route>
+      <Route path={`*`}>
+        <div>Not found</div>
+      </Route>
+    </Switch>
+  );
 };
 
 export default routes;