feat: Create validation sets app shell (#4803)

* feat: Create view for validation sets

* feat: Create container for validation sets

package.json

@@ -32,7 +32,7 @@
     "@canonical/cookie-policy": "3.6.3",
     "@canonical/global-nav": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@canonical/react-components": "0.59.1",
+    "@canonical/react-components": "0.60.0",
     "@canonical/store-components": "0.50.1",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/sortable": "8.0.0",

static/js/validation-sets/index.tsx

@@ -0,0 +1,28 @@
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+import Root from "./routes/root";
+import ValidationSets from "./pages/ValidationSets";
+import ValidationSet from "./pages/ValidationSet";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    children: [
+      {
+        path: "/validation-sets",
+        element: <ValidationSets />,
+      },
+      {
+        path: "/validation-sets/:validationSetId",
+        element: <ValidationSet />,
+      },
+    ],
+  },
+]);
+
+const rootEl = document.getElementById("root") as HTMLElement;
+const root = createRoot(rootEl);
+
+root.render(<RouterProvider router={router} />);

static/js/validation-sets/pages/ValidationSet/ValidationSet.tsx

@@ -0,0 +1,9 @@
+function ValidationSet(): JSX.Element {
+  return (
+    <>
+      <h1>Validation set page</h1>
+    </>
+  );
+}
+
+export default ValidationSet;

static/js/validation-sets/pages/ValidationSet/index.ts

@@ -0,0 +1 @@
+export { default } from "./ValidationSet";

static/js/validation-sets/pages/ValidationSets/ValidationSets.tsx

@@ -0,0 +1,9 @@
+function ValidationSets(): JSX.Element {
+  return (
+    <>
+      <h1>Validation sets page</h1>
+    </>
+  );
+}
+
+export default ValidationSets;

static/js/validation-sets/pages/ValidationSets/index.ts

@@ -0,0 +1 @@
+export { default } from "./ValidationSets";

static/js/validation-sets/routes/root.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Outlet } from "react-router-dom";
+
+import {
+  ApplicationLayout,
+  Panel,
+  Row,
+  Col,
+} from "@canonical/react-components";
+
+function Root(): JSX.Element {
+  const [menuPinned, setMenuPinned] = useState<boolean>(false);
+  const [menuCollapsed, setMenuCollapsed] = useState<boolean>(false);
+
+  return (
+    <ApplicationLayout
+      menuPinned={menuPinned}
+      onPinMenu={setMenuPinned}
+      menuCollapsed={menuCollapsed}
+      onCollapseMenu={setMenuCollapsed}
+      logo={{
+        icon: "https://assets.ubuntu.com/v1/dae35907-Snapcraft%20tag.svg",
+        name: "https://assets.ubuntu.com/v1/6cd1a881-snapcraft_logo_white.svg",
+        nameAlt: "Snapcraft",
+        href: "/",
+      }}
+      navItems={[
+        {
+          items: [
+            {
+              label: "My snaps",
+              href: "/snaps",
+              icon: "pods",
+            },
+            {
+              label: "My validation sets",
+              href: "/validation-sets",
+              icon: "pods",
+            },
+          ],
+        },
+        {
+          style: {
+            bottom: 0,
+            position: "absolute",
+            width: "100%",
+          },
+          items: [
+            {
+              label: "My account",
+              href: "/admin/account",
+              icon: "user",
+            },
+            {
+              label: "Logout",
+              href: "/logout",
+              icon: "begin-downloading",
+            },
+          ],
+        },
+      ]}
+    >
+      <Panel>
+        <Row>
+          <Col size={12}>
+            <Outlet />
+          </Col>
+        </Row>
+      </Panel>
+    </ApplicationLayout>
+  );
+}
+
+export default Root;

templates/store/validation-sets.html

@@ -0,0 +1,7 @@
+{% set show_header = False %}
+{% extends "_base-layout.html" %}
+{% block content %}
+<div id="root">
+</div>
+<script src="{{ static_url('js/dist/validation-sets.js') }}"></script>
+{% endblock %}

webapp/store/views.py

@@ -100,6 +100,12 @@ def get_validation_set(validation_set_id):
 
         return response
 
+    @store.route("/validation-sets", defaults={"path": ""})
+    @store.route("/validation-sets/<path:path>")
+    @login_required
+    def validation_sets(path):
+        return flask.render_template("store/validation-sets.html")
+
     @store.route("/discover")
     def discover():
         return flask.redirect(flask.url_for(".homepage"))

webpack.config.entry.js

@@ -21,4 +21,5 @@ module.exports = {
   "publisher-settings": "./static/js/publisher/settings/index.tsx",
   "about-listing": "./static/js/public/about/listing.ts",
   store: "./static/js/store/index.tsx",
+  "validation-sets": "./static/js/validation-sets/index.tsx",
 };

yarn.lock

@@ -1109,10 +1109,10 @@
     react-table "7.8.0"
     react-useportal "1.0.19"
 
-"@canonical/react-components@0.59.1":
-  version "0.59.1"
-  resolved "https://registry.yarnpkg.com/@canonical/react-components/-/react-components-0.59.1.tgz#bcc4cc6ec7b309a179fca2aaffd58f03a75df4e1"
-  integrity sha512-vHd287WhZxJpojGCYW312Z/BcorO1ybQ7CEE/MRERXl7XUYZlvx9i8AortoesAxFZK/BgujQgafx/zesL/9uUQ==
+"@canonical/react-components@0.60.0":
+  version "0.60.0"
+  resolved "https://registry.yarnpkg.com/@canonical/react-components/-/react-components-0.60.0.tgz#526adf54acf4bd74244ec600c72ef50f6e3ff5ae"
+  integrity sha512-i90GBNVKFHXctRpN/dId6WmanFUdeAUSS0lS/V2JapAhaQDU6MoxyPh4DVGzsc1s6BqBFwBM6yqvlWLcQi4DEg==
   dependencies:
     "@types/jest" "29.5.12"
     "@types/node" "20.12.11"