chore: Apply application layout to request reserved name page

Author: steverydz

static/js/publisher/pages/RequestReservedName/RequestReservedName.tsx

@@ -0,0 +1,155 @@
+import { ReactNode, useState } from "react";
+import { useRecoilValue } from "recoil";
+import {
+  Form,
+  Button,
+  Input,
+  Textarea,
+  Row,
+  Col,
+  Notification,
+  Icon,
+} from "@canonical/react-components";
+
+import { brandStoresState } from "../../state/brandStoreState";
+
+function RequestReservedName(): ReactNode {
+  const [claimComment, setClaimComment] = useState<string>();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>();
+  const [showSuccessNotification, setShowSuccessNotification] =
+    useState<boolean>(false);
+  const [errorNotification, setErrorNotification] = useState<string>();
+  const stores = useRecoilValue(brandStoresState);
+  const params = new URLSearchParams(document.location.search);
+  const snapName = params.get("snap_name");
+  const store = params.get("store");
+
+  const selectedStore = stores.find((s) => s.name === store) || {
+    name: "Global",
+    id: "ubuntu",
+  };
+
+  return (
+    <>
+      <h1 className="p-heading--2">
+        Request reserved name <strong>{snapName}</strong>
+      </h1>
+
+      {showSuccessNotification && (
+        <Notification severity="positive">
+          Your claim has been submitted and will be reviewed
+        </Notification>
+      )}
+
+      {errorNotification && (
+        <Notification severity="caution">{errorNotification}</Notification>
+      )}
+
+      {stores.length === 0 && (
+        <>
+          <Icon name="spinner" className="u-animation--spin" />
+          &nbsp;Loading data...
+        </>
+      )}
+
+      {stores.length > 0 && (
+        <Form
+          onSubmit={async (e) => {
+            e.preventDefault();
+
+            setIsSubmitting(true);
+
+            const response = await fetch("/api/register-name-dispute", {
+              method: "POST",
+              headers: {
+                "X-CSRFToken": window.CSRF_TOKEN,
+              },
+              body: JSON.stringify({
+                "snap-name": snapName,
+                "claim-comment": claimComment,
+              }),
+            });
+
+            if (!response.ok) {
+              setIsSubmitting(false);
+              throw new Error("Unable to request reserved name");
+            }
+
+            const responseData = await response.json();
+
+            setTimeout(() => {
+              if (!responseData.success) {
+                setErrorNotification(responseData.message);
+              } else {
+                setShowSuccessNotification(true);
+              }
+
+              setIsSubmitting(false);
+            }, 1500);
+          }}
+        >
+          <Row>
+            <Col size={2}>
+              <label htmlFor="store">Store</label>
+            </Col>
+            <Col size={6}>
+              <Input
+                type="text"
+                readOnly
+                id="store"
+                value={selectedStore.name}
+              />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col size={2}>
+              <label htmlFor="snap">Snap name</label>
+            </Col>
+            <Col size={6}>
+              <Input type="text" id="snap" readOnly value={snapName || ""} />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col size={2}>
+              <label htmlFor="comment">Comment</label>
+            </Col>
+            <Col size={6}>
+              <Textarea
+                id="comment"
+                help="Why you have rights to claim this name"
+                value={claimComment}
+                onChange={(e) => {
+                  setClaimComment(e.target.value);
+                }}
+              />
+            </Col>
+          </Row>
+          <hr />
+          <div className="u-align--right">
+            <a className="p-button" href="/register-snap">
+              Register snap
+            </a>
+            <Button
+              type="submit"
+              appearance="positive"
+              disabled={!claimComment || isSubmitting}
+            >
+              {isSubmitting ? (
+                <>
+                  <Icon name="spinner" className="u-animation--spin" light />
+                  &nbsp;Requesting
+                </>
+              ) : (
+                <>Yes, I am sure</>
+              )}
+            </Button>
+          </div>
+        </Form>
+      )}
+    </>
+  );
+}
+
+export default RequestReservedName;

static/js/publisher/pages/RequestReservedName/index.ts

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

static/js/publisher/publisher.tsx

@@ -15,6 +15,7 @@ import Build from "./pages/Build";
 import Releases from "./pages/Releases";
 import AccountSnaps from "./pages/AccountSnaps";
 import RegisterNameDispute from "./pages/RegisterNameDispute";
+import RequestReservedName from "./pages/RequestReservedName";
 
 const router = createBrowserRouter([
   {
@@ -73,6 +74,10 @@ const router = createBrowserRouter([
         path: "/register-name-dispute",
         element: <RegisterNameDispute />,
       },
+      {
+        path: "/request-reserved-name",
+        element: <RequestReservedName />,
+      },
     ],
   },
 ]);

templates/publisher/request-reserved-name.html

@@ -580,20 +580,14 @@ def post_register_name_json():
 @publisher_snaps.route("/register-name-dispute")
 @login_required
 def get_register_name_dispute():
-    stores = dashboard.get_stores(flask.session)
-
     snap_name = flask.request.args.get("snap-name")
-    store_id = flask.request.args.get("store")
-    store_name = logic.get_store_name(store_id, stores)
 
     if not snap_name:
         return flask.redirect(
             flask.url_for(".get_register_name", snap_name=snap_name)
         )
     return flask.render_template(
         "store/publisher.html",
-        snap_name=snap_name,
-        store=store_name,
     )
 
 
@@ -637,7 +631,7 @@ def get_request_reserved_name():
             )
         )
     return flask.render_template(
-        "publisher/request-reserved-name.html",
+        "store/publisher.html",
         snap_name=snap_name,
         store=store_name,
     )