Implemented routing for new app resource and template selector page

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/NewAppResource/_Settings.tsx

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

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/NewAppResource/_TemplateSelector.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import api from "shared/api";
+import { PorterTemplate } from "shared/types";
+import semver from "semver";
+import Loading from "components/Loading";
+import Placeholder from "components/Placeholder";
+import { Card } from "../../launch/components/styles";
+import DynamicLink from "components/DynamicLink";
+import { VersionSelector } from "../../launch/components/VersionSelector";
+
+const TemplateSelector = () => {
+  const [templates, setTemplates] = useState<PorterTemplate[]>([]);
+  const [selectedVersion, setSelectedVersion] = useState<{
+    [template_name: string]: string;
+  }>({});
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const getTemplates = async () => {
+    try {
+      const res = await api.getTemplates<PorterTemplate[]>(
+        "<token>",
+        {
+          repo_url: process.env.APPLICATION_CHART_REPO_URL,
+        },
+        {}
+      );
+      let sortedVersionData = res.data
+        .map((template: PorterTemplate) => {
+          let versions = template.versions.reverse();
+
+          versions = template.versions.sort(semver.rcompare);
+
+          return {
+            ...template,
+            versions,
+            currentVersion: versions[0],
+          };
+        })
+        .sort((a, b) => {
+          if (a.name < b.name) {
+            return -1;
+          }
+          if (a.name > b.name) {
+            return 1;
+          }
+          return 0;
+        });
+
+      return sortedVersionData;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  useEffect(() => {
+    let isSubscribed = true;
+    setIsLoading(true);
+    getTemplates()
+      .then((porterTemplates) => {
+        const latestVersions = porterTemplates.reduce((acc, template) => {
+          return {
+            ...acc,
+            [template.name]: template.versions[0],
+          };
+        }, {} as Record<string, string>);
+
+        if (isSubscribed) {
+          setTemplates(porterTemplates);
+          setSelectedVersion(latestVersions);
+        }
+      })
+      .catch(() => {
+        if (isSubscribed) {
+          setHasError(true);
+        }
+      })
+      .finally(() => {
+        if (isSubscribed) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      isSubscribed = false;
+    };
+  }, []);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (hasError) {
+    return (
+      <Placeholder>
+        <div>
+          <h2>Unexpected error</h2>
+          <p>
+            We had an error retrieving the available templates, please try
+            again.
+          </p>
+        </div>
+      </Placeholder>
+    );
+  }
+
+  return (
+    <>
+      <h2>Select the template</h2>
+      <Card.Grid>
+        {templates.map((template) => {
+          return (
+            <Card.Wrapper key={template.name}>
+              <Card.Title>
+                New {template.name} with version:
+                <VersionSelector
+                  value={selectedVersion[template.name]}
+                  options={template.versions}
+                  onChange={(newVersion) => {
+                    setSelectedVersion((prev) => ({
+                      ...prev,
+                      [template.name]: newVersion,
+                    }));
+                  }}
+                />
+              </Card.Title>
+              <Card.Actions>
+                <Card.ActionButton
+                  as={DynamicLink}
+                  to={`settings/${template.name}/${
+                    selectedVersion[template.name]
+                  }`}
+                >
+                  <i className="material-icons-outlined">arrow_forward</i>
+                </Card.ActionButton>
+              </Card.Actions>
+            </Card.Wrapper>
+          );
+        })}
+      </Card.Grid>
+    </>
+  );
+};
+
+export default TemplateSelector;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/NewAppResource/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router";
+import Settings from "./_Settings";
+import TemplateSelector from "./_TemplateSelector";
+
+const NewAppResourceRoutes = () => {
+  const { url } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${url}/template-selector`}>
+        <TemplateSelector />
+      </Route>
+      <Route path={`${url}/settings/:template_name/:template_version`}>
+        <Settings />
+      </Route>
+      <Route path="/">
+        <Redirect to={`${url}/template-selector`} />
+      </Route>
+      <Route path="*">
+        <Redirect to={url} />
+      </Route>
+    </Switch>
+  );
+};
+
+export default NewAppResourceRoutes;

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

@@ -1,24 +1,31 @@
-import React, { useContext } from "react";
-import { Redirect, Route, Switch, useRouteMatch } from "react-router";
-import { Context } from "shared/Context";
+import React from "react";
+import { Route, Switch, useRouteMatch } from "react-router";
+
 import ExpandedStack from "./ExpandedStack";
+import NewAppResourceRoutes from "./NewAppResource";
 import NewEnvGroup from "./NewEnvGroup";
+import ExpandedStackStoreProvider from "./Store";
 
 const ExpandedStackRoutes = () => {
   const { path } = useRouteMatch();
 
   return (
-    <Switch>
-      <Route path={`${path}/new-env-group`} exact>
-        <NewEnvGroup />
-      </Route>
-      <Route path={`${path}/`} exact>
-        <ExpandedStack />
-      </Route>
-      <Route path={`*`}>
-        <div>Not found</div>
-      </Route>
-    </Switch>
+    <ExpandedStackStoreProvider>
+      <Switch>
+        <Route path={`${path}/new-env-group`} exact>
+          <NewEnvGroup />
+        </Route>
+        <Route path={`${path}/new-app-resource`}>
+          <NewAppResourceRoutes />
+        </Route>
+        <Route path={`${path}/`} exact>
+          <ExpandedStack />
+        </Route>
+        <Route path={`*`}>
+          <div>Not found</div>
+        </Route>
+      </Switch>
+    </ExpandedStackStoreProvider>
   );
 };
 

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/styles.tsx

@@ -157,6 +157,7 @@ export const SelectorStyles = {
     width: 100%;
     max-height: 200px;
     overflow-y: auto;
+    z-index: 999;
   `,
   Option: styled.div`
     min-height: 35px;