From b7148d0426ca2ea68e448ff0aacfd2424b2049ae Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Mon, 9 Sep 2024 12:22:11 +0100
Subject: [PATCH 01/24] feat: Move publicise into publisher app (#4844)

---
 static/js/global.d.ts                         |   6 +
 .../components/PrimaryNav/PrimaryNav.tsx      |   4 +-
 .../components/SectionNav/SectionNav.tsx      |  48 +++++
 .../components/SectionNav/SectionNavTest.tsx  |  60 +++++++
 .../components/SectionNav/index.ts            |   1 +
 static/js/publisher-pages/index.tsx           |  14 ++
 .../pages/Publicise/Publicise.tsx             |  89 ++++++++++
 .../pages/Publicise/PubliciseBadges.tsx       | 139 +++++++++++++++
 .../pages/Publicise/PubliciseButtons.tsx      | 168 ++++++++++++++++++
 .../pages/Publicise/PubliciseCards.tsx        | 154 ++++++++++++++++
 .../Publicise/__tests__/Publicise.test.tsx    |  73 ++++++++
 .../publisher-pages/pages/Publicise/index.ts  |   1 +
 static/sass/_snapcraft-publicise.scss         |  26 ---
 static/sass/styles.scss                       |   2 -
 .../_publisher_publicise_layout.html          |  55 ------
 .../publisher/publicise/embedded_cards.html   |  97 ----------
 .../publisher/publicise/github_badges.html    |  98 ----------
 templates/store/publisher.html                |   8 +
 tests/publisher/snaps/tests_publicise.py      |  14 +-
 .../publisher/snaps/tests_publicise_badges.py |  13 +-
 .../publisher/snaps/tests_publicise_cards.py  |  16 +-
 webapp/publisher/snaps/publicise_views.py     |  45 +----
 22 files changed, 773 insertions(+), 358 deletions(-)
 create mode 100644 static/js/publisher-pages/components/SectionNav/SectionNav.tsx
 create mode 100644 static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
 create mode 100644 static/js/publisher-pages/components/SectionNav/index.ts
 create mode 100644 static/js/publisher-pages/pages/Publicise/Publicise.tsx
 create mode 100644 static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
 create mode 100644 static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
 create mode 100644 static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
 create mode 100644 static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
 create mode 100644 static/js/publisher-pages/pages/Publicise/index.ts
 delete mode 100644 static/sass/_snapcraft-publicise.scss
 delete mode 100644 templates/publisher/publicise/_publisher_publicise_layout.html
 delete mode 100644 templates/publisher/publicise/embedded_cards.html
 delete mode 100644 templates/publisher/publicise/github_badges.html

diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 0a494042c2..3143111a0d 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -16,4 +16,10 @@ declare interface Window {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Vimeo: any;
   DNS_VERIFICATION_TOKEN: string;
+  SNAP_PUBLICISE_DATA: {
+    hasScreenshot: boolean;
+    isReleased: boolean;
+    private: boolean;
+    trending: boolean;
+  };
 }
diff --git a/static/js/publisher-pages/components/PrimaryNav/PrimaryNav.tsx b/static/js/publisher-pages/components/PrimaryNav/PrimaryNav.tsx
index 913491ee50..6ef3ee7242 100644
--- a/static/js/publisher-pages/components/PrimaryNav/PrimaryNav.tsx
+++ b/static/js/publisher-pages/components/PrimaryNav/PrimaryNav.tsx
@@ -1,3 +1,4 @@
+import { useLocation } from "react-router-dom";
 import {
   SideNavigation,
   SideNavigationText,
@@ -12,6 +13,7 @@ function PrimaryNav({
   collapseNavigation: boolean;
   setCollapseNavigation: (value: boolean) => void;
 }): JSX.Element {
+  const location = useLocation();
   const { data: publisherData } = usePublisher();
 
   return (
@@ -46,7 +48,7 @@ function PrimaryNav({
                 label: "My validation sets",
                 href: "/validation-sets",
                 icon: "topic",
-                "aria-current": "page",
+                "aria-current": location.pathname.includes("/validation-sets"),
               },
             ],
           },
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
new file mode 100644
index 0000000000..fbd8ecfd45
--- /dev/null
+++ b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
@@ -0,0 +1,48 @@
+import { Tabs } from "@canonical/react-components";
+
+type Props = {
+  activeTab: string;
+  snapName: string | undefined;
+};
+
+function SectionNav({ activeTab, snapName }: Props) {
+  return (
+    <Tabs
+      links={[
+        {
+          label: "Listing",
+          active: activeTab === "listing" || !activeTab,
+          href: `/${snapName}/listing`,
+          "data-tour": "listing-intro",
+        },
+        {
+          label: "Builds",
+          active: activeTab === "builds",
+          href: `/${snapName}/builds`,
+        },
+        {
+          label: "Releases",
+          active: activeTab === "releases",
+          href: `/${snapName}/releases`,
+        },
+        {
+          label: "Metrics",
+          active: activeTab === "metrics",
+          href: `/${snapName}/metrics`,
+        },
+        {
+          label: "Publicise",
+          active: activeTab === "publicise",
+          href: `/${snapName}/publicise`,
+        },
+        {
+          label: "Settings",
+          active: activeTab === "settings",
+          href: `/${snapName}/settings`,
+        },
+      ]}
+    />
+  );
+}
+
+export default SectionNav;
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx b/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
new file mode 100644
index 0000000000..11193c6ebe
--- /dev/null
+++ b/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import SectionNav from "./SectionNav";
+
+const snapName = "test-snap-name";
+
+const props = {
+  snapName: "test-snap-name",
+  activeTab: "listing",
+};
+
+test("the page displays the correct name for the snap", () => {
+  render(<SectionNav {...props} />);
+  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+    "test-snap-name"
+  );
+});
+
+test("the 'Listing' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Listing" }).getAttribute("href")
+  ).toBe(`/${snapName}/listing`);
+});
+
+test("the 'Builds' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Builds" }).getAttribute("href")
+  ).toBe(`/${snapName}/builds`);
+});
+
+test("the 'Releases' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Releases" }).getAttribute("href")
+  ).toBe(`/${snapName}/releases`);
+});
+
+test("the 'Metrics' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Metrics" }).getAttribute("href")
+  ).toBe(`/${snapName}/metrics`);
+});
+
+test("the 'Publicise' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Publicise" }).getAttribute("href")
+  ).toBe(`/${snapName}/publicise`);
+});
+
+test("the 'Settings' tab has the correct path", () => {
+  render(<SectionNav {...props} />);
+  expect(
+    screen.getByRole("link", { name: "Settings" }).getAttribute("href")
+  ).toBe(`/${snapName}/settings`);
+});
diff --git a/static/js/publisher-pages/components/SectionNav/index.ts b/static/js/publisher-pages/components/SectionNav/index.ts
new file mode 100644
index 0000000000..8d0d108263
--- /dev/null
+++ b/static/js/publisher-pages/components/SectionNav/index.ts
@@ -0,0 +1 @@
+export { default } from "./SectionNav";
diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index f741b1fe5d..1e83e32045 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -3,6 +3,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 import Root from "./routes/root";
+import Publicise from "./pages/Publicise";
 import ValidationSets from "./pages/ValidationSets";
 import ValidationSet from "./pages/ValidationSet";
 
@@ -11,6 +12,19 @@ const router = createBrowserRouter([
     path: "/",
     element: <Root />,
     children: [
+      {
+        path: "/:snapId/publicise",
+        element: <Publicise />,
+      },
+      {
+        path: "/:snapId/publicise/badges",
+        element: <Publicise view="badges" />,
+      },
+      {
+        path: "/:snapId/publicise/cards",
+        element: <Publicise view="cards" />,
+      },
+
       {
         path: "/validation-sets",
         element: <ValidationSets />,
diff --git a/static/js/publisher-pages/pages/Publicise/Publicise.tsx b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
new file mode 100644
index 0000000000..770f4222c0
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
@@ -0,0 +1,89 @@
+import { useParams, NavLink, Link } from "react-router-dom";
+import {
+  Row,
+  Col,
+  SideNavigation,
+  Notification,
+} from "@canonical/react-components";
+
+import SectionNav from "../../components/SectionNav";
+import PubliciseButtons from "./PubliciseButtons";
+import PubliciseBadges from "./PubliciseBadges";
+import PubliciseCards from "./PubliciseCards";
+
+type Props = {
+  view?: undefined | "badges" | "cards";
+};
+
+function Publicise({ view }: Props): JSX.Element {
+  const { snapId } = useParams();
+
+  const disableView = () => {
+    if (window.SNAP_PUBLICISE_DATA.private) {
+      return true;
+    }
+
+    if (!window.SNAP_PUBLICISE_DATA.isReleased) {
+      return true;
+    }
+
+    return false;
+  };
+
+  return (
+    <>
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        Publicise
+      </h1>
+
+      <SectionNav snapName={snapId} activeTab="publicise" />
+
+      {disableView() && (
+        <Notification severity="information">
+          When your snap is public and has a release, you'll be able to share it
+          using Store buttons, badges and embeddable cards. Make your snap
+          public in its <a href={`/${snapId}/settings`}>settings page</a>.
+        </Notification>
+      )}
+
+      <Row className={window.SNAP_PUBLICISE_DATA.private ? "u-disabled" : ""}>
+        <Col size={3}>
+          <SideNavigation
+            items={[
+              {
+                items: [
+                  {
+                    "aria-current": !view,
+                    label: "Snap Store buttons",
+                    to: `/${snapId}/publicise`,
+                    component: NavLink,
+                  },
+                  {
+                    "aria-current": view === "badges",
+                    label: "GitHub badges",
+                    to: `/${snapId}/publicise/badges`,
+                    component: NavLink,
+                  },
+                  {
+                    "aria-current": view === "cards",
+                    label: "Embeddable cards",
+                    to: `/${snapId}/publicise/cards`,
+                    component: NavLink,
+                  },
+                ],
+              },
+            ]}
+          />
+        </Col>
+        <Col size={9}>
+          {!view && <PubliciseButtons />}
+          {view === "badges" && <PubliciseBadges />}
+          {view === "cards" && <PubliciseCards />}
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default Publicise;
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
new file mode 100644
index 0000000000..7794dba5e8
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
@@ -0,0 +1,139 @@
+import { useState, SyntheticEvent } from "react";
+import { useParams } from "react-router-dom";
+import {
+  Row,
+  Col,
+  CheckboxInput,
+  Notification,
+} from "@canonical/react-components";
+
+function PubliciseBadges(): JSX.Element {
+  const { snapId } = useParams();
+  const [showStableChannelBadge, setShowStableChannelBadge] =
+    useState<boolean>(true);
+  const [showTrendingStatusBadge, setShowTrendingStatusBadge] =
+    useState<boolean>(false);
+
+  const showPreview: boolean =
+    showStableChannelBadge || showTrendingStatusBadge;
+
+  const htmlSnippetStable = `<a href="https://snapcraft.io/${snapId}">
+  <img alt="${snapId}" src="https://snapcraft.io/${snapId}/badge.svg" />
+</a>`;
+
+  const htmlSnippetTrending = `<a href="https://snapcraft.io/${snapId}">
+  <img alt="${snapId}" src="https://snapcraft.io/${snapId}/trending.svg?name=0" />
+</a>`;
+
+  const markdownSnippetStable = `[![${snapId}](https://snapcraft.io/${snapId}/badge.svg)](https://snapcraft.io/${snapId})`;
+
+  const markdownSnippetTrending = `[![${snapId}](https://snapcraft.io/${snapId}/trending.svg?name=0)](https://snapcraft.io/${snapId})`;
+
+  return (
+    <>
+      <Row>
+        <Col size={2}>
+          <label>Display:</label>
+        </Col>
+        <Col size={10}>
+          <CheckboxInput
+            label="Stable channel from default track"
+            checked={showStableChannelBadge}
+            onChange={(
+              e: SyntheticEvent<HTMLInputElement> & { target: HTMLInputElement }
+            ) => {
+              setShowStableChannelBadge(e.target.checked);
+            }}
+          />
+          <CheckboxInput
+            label="Trending status"
+            labelClassName="u-no-margin--bottom"
+            checked={showTrendingStatusBadge}
+            onChange={(
+              e: SyntheticEvent<HTMLInputElement> & { target: HTMLInputElement }
+            ) => {
+              setShowTrendingStatusBadge(e.target.checked);
+            }}
+          />
+          <p style={{ paddingLeft: "2rem" }}>
+            <small className="u-text-muted">
+              Badge will only display when your snap is flagged as trending
+            </small>
+          </p>
+          {!showStableChannelBadge && !showTrendingStatusBadge && (
+            <p>
+              <em>
+                Please select at least one badge to display from the list above
+              </em>
+            </p>
+          )}
+        </Col>
+      </Row>
+      {showPreview && (
+        <>
+          <Row>
+            <Col size={2}>
+              <label>Preview:</label>
+            </Col>
+            <Col size={10}>
+              <p>
+                {showStableChannelBadge && (
+                  <a href={`/${snapId}`}>
+                    <img src={`/${snapId}/badge.svg`} alt={snapId} />
+                  </a>
+                )}{" "}
+                {showTrendingStatusBadge && (
+                  <a href={`/${snapId}`}>
+                    <img
+                      src={`/${snapId}/trending.svg?name=0&preview=1`}
+                      alt={snapId}
+                    />
+                  </a>
+                )}
+              </p>
+
+              {!window?.SNAP_PUBLICISE_DATA?.trending &&
+                showTrendingStatusBadge && (
+                  <Notification severity="information" title="Trending badge">
+                    Your snap is not currently flagged as trending. Only when
+                    your snap becomes trending will the trending badge appear on
+                    external sites.
+                  </Notification>
+                )}
+            </Col>
+          </Row>
+          <Row>
+            <Col size={2}>
+              <label>HTML:</label>
+            </Col>
+            <Col size={10}>
+              <div className="p-code-snippet">
+                <pre className="p-code-snippet__block">
+                  {showStableChannelBadge && htmlSnippetStable}
+                  <br />
+                  {showTrendingStatusBadge && htmlSnippetTrending}
+                </pre>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col size={2}>
+              <label>Markdown:</label>
+            </Col>
+            <Col size={10}>
+              <div className="p-code-snippet">
+                <pre className="p-code-snippet__block is-wrapped">
+                  {showStableChannelBadge && markdownSnippetStable}
+                  <br />
+                  {showTrendingStatusBadge && markdownSnippetTrending}
+                </pre>
+              </div>
+            </Col>
+          </Row>
+        </>
+      )}
+    </>
+  );
+}
+
+export default PubliciseBadges;
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
new file mode 100644
index 0000000000..8a9c205c9e
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { Row, Col, Select } from "@canonical/react-components";
+
+const LANGUAGES = {
+  ar: { title: "العربية", text: "احصل عليه من Snap Store" },
+  bg: { title: "български", text: "Инсталирайте го от Snap Store" },
+  bn: { title: "বাংলা", text: "থেকে ইনস্টল করুন" },
+  de: { title: "Deutsch", text: "Installieren vom Snap Store" },
+  en: { title: "English", text: "Get it from the Snap Store" },
+  es: { title: "Español", text: "Instalar desde Snap Store" },
+  fr: { title: "Français", text: "Installer à partir du Snap Store" },
+  it: { title: "Italiano", text: "Scarica dallo Snap Store" },
+  jp: { title: "日本語", text: "Snap Store から入手ください" },
+  pl: { title: "Polski", text: "Pobierz w Snap Store" },
+  pt: { title: "Português", text: "Disponível na Snap Store" },
+  ro: { title: "Română", text: "Instalează din Snap Store" },
+  ru: { title: "русский язык", text: "Загрузите из Snap Store" },
+  tw: { title: "中文（台灣）", text: "安裝軟體敬請移駕 Snap Store" },
+};
+
+function PubliciseButtons(): JSX.Element {
+  const { snapId } = useParams();
+  const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
+
+  const htmlSnippetBlack = `<a href="https://snapcraft.io/${snapId}">
+  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg" />
+</a>
+`;
+
+  const htmlSnippetWhite = `<a href="https://snapcraft.io/${snapId}">
+  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg" />
+</a>
+`;
+
+  const markdownSnippetBlack = `[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg)](https://snapcraft.io/${snapId})
+`;
+
+  const markdownSnippetWhite = `[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg)](https://snapcraft.io/${snapId})
+`;
+
+  return (
+    <>
+      <Row>
+        <Col size={2}>
+          <label>Language:</label>
+        </Col>
+        <Col size={10}>
+          <Select
+            defaultValue={selectedLanguage}
+            options={Object.entries(LANGUAGES).map((lang) => {
+              return {
+                label: lang[1].title,
+                value: lang[0],
+              };
+            })}
+            onChange={(e) => {
+              setSelectedLanguage(e.target.value);
+            }}
+            style={{ maxWidth: "180px" }}
+          />
+          <p>
+            You can help translate these buttons{" "}
+            <a href="https://github.com/snapcore/snap-store-badges">
+              in this repository
+            </a>
+            .
+          </p>
+        </Col>
+      </Row>
+      <hr />
+      <Row>
+        <Col size={10}>
+          <p>
+            <img
+              src={`https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg`}
+              alt="Get it from the Snap Store"
+              width="182"
+              height="56"
+            />
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>HTML:</label>
+        </Col>
+        <Col size={10}>
+          <div className="p-code-snippet">
+            <pre className="p-code-snippet__block">{htmlSnippetBlack}</pre>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>Markdown:</label>
+        </Col>
+        <Col size={10}>
+          <div className="p-code-snippet">
+            <pre className="p-code-snippet__block is-wrapped">
+              {markdownSnippetBlack}
+            </pre>
+          </div>
+        </Col>
+      </Row>
+      <hr />
+      <Row>
+        <Col size={10}>
+          <p>
+            <img
+              src={`https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg`}
+              alt="Get it from the Snap Store"
+              width="182"
+              height="56"
+            />
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>HTML:</label>
+        </Col>
+        <Col size={10}>
+          <div className="p-code-snippet">
+            <pre className="p-code-snippet__block">{htmlSnippetWhite}</pre>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>Markdown:</label>
+        </Col>
+        <Col size={10}>
+          <div className="p-code-snippet">
+            <pre className="p-code-snippet__block is-wrapped">
+              {markdownSnippetWhite}
+            </pre>
+          </div>
+        </Col>
+      </Row>
+      <hr />
+      <Row>
+        <Col size={2}>
+          <label>Download all:</label>
+        </Col>
+        <Col size={10}>
+          <a
+            className="p-button"
+            href="https://github.com/snapcore/snap-store-badges/archive/v1.4.2.zip"
+          >
+            zip
+          </a>
+          <a
+            className="p-button"
+            href="https://github.com/snapcore/snap-store-badges/archive/v1.4.2.tar.gz"
+          >
+            tar.gz
+          </a>
+          <a href="https://raw.githubusercontent.com/snapcore/snap-store-badges/master/LICENSE.md">
+            View image licence
+          </a>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default PubliciseButtons;
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
new file mode 100644
index 0000000000..a5c86407ab
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
@@ -0,0 +1,154 @@
+import { useState, SyntheticEvent } from "react";
+import { useParams } from "react-router-dom";
+import {
+  Row,
+  Col,
+  RadioInput,
+  CheckboxInput,
+} from "@canonical/react-components";
+
+function PubliciseCards(): JSX.Element {
+  const { snapId } = useParams();
+  const [buttonType, setButtonType] = useState<"black" | "white" | "hidden">(
+    "black"
+  );
+  const [showAllChannels, setShowAllChannels] = useState<boolean>(true);
+  const [showSummary, setShowSummary] = useState<boolean>(true);
+  const [showScreenshot, setShowScreenshot] = useState<boolean>(true);
+
+  const iframeQueryParameters: { [key: string]: string } = {};
+
+  if (buttonType !== "hidden") {
+    iframeQueryParameters["button"] = buttonType;
+  }
+
+  if (showAllChannels) {
+    iframeQueryParameters["channels"] = "true";
+  }
+
+  if (showSummary) {
+    iframeQueryParameters["summary"] = "true";
+  }
+
+  if (showScreenshot) {
+    iframeQueryParameters["screenshot"] = "true";
+  }
+
+  const iframeQueryString = new URLSearchParams(
+    iframeQueryParameters
+  ).toString();
+
+  const htmlSnippet = `<iframe src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}"width="100%" height="990px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
+
+  return (
+    <>
+      <Row>
+        <Col size={2}>
+          <label>Snap Store button:</label>
+        </Col>
+        <Col size={10}>
+          <p>
+            <RadioInput
+              name="button-type"
+              label="Dark"
+              checked={buttonType === "black"}
+              onChange={() => {
+                setButtonType("black");
+              }}
+            />
+            <RadioInput
+              name="button-type"
+              label="Light"
+              checked={buttonType === "white"}
+              onChange={() => {
+                setButtonType("white");
+              }}
+            />
+            <RadioInput
+              name="button-type"
+              label="Hide button"
+              checked={buttonType === "hidden"}
+              onChange={() => {
+                setButtonType("hidden");
+              }}
+            />
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>Options:</label>
+        </Col>
+        <Col size={10}>
+          <p>
+            <CheckboxInput
+              label="Show all channels"
+              checked={showAllChannels}
+              onChange={(
+                e: SyntheticEvent<HTMLInputElement> & {
+                  target: HTMLInputElement;
+                }
+              ) => {
+                setShowAllChannels(e.target.checked);
+              }}
+            />
+            <CheckboxInput
+              label="Show summary"
+              checked={showSummary}
+              onChange={(
+                e: SyntheticEvent<HTMLInputElement> & {
+                  target: HTMLInputElement;
+                }
+              ) => {
+                setShowSummary(e.target.checked);
+              }}
+            />
+            <CheckboxInput
+              label="Show screenshot"
+              checked={showScreenshot}
+              onChange={(
+                e: SyntheticEvent<HTMLInputElement> & {
+                  target: HTMLInputElement;
+                }
+              ) => {
+                setShowScreenshot(e.target.checked);
+              }}
+            />
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>Preview:</label>
+        </Col>
+        <Col size={8}>
+          <p>
+            <iframe
+              src={`/${snapId}/embedded?${iframeQueryString}`}
+              width="100%"
+              style={{
+                border: "1px solid rgb(204, 204, 204)",
+                borderRadius: "2px",
+                height: "990px",
+              }}
+            ></iframe>
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2}>
+          <label>HTML:</label>
+        </Col>
+        <Col size={10}>
+          <div className="p-code-snippet">
+            <pre className="p-code-snippet__block is-wrapped">
+              {htmlSnippet}
+            </pre>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default PubliciseCards;
diff --git a/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
new file mode 100644
index 0000000000..0e738db01b
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
@@ -0,0 +1,73 @@
+import { BrowserRouter } from "react-router-dom";
+import { screen, render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import Publicise from "../Publicise";
+
+const renderComponent = (view?: "badges" | "cards" | undefined) => {
+  return render(
+    <BrowserRouter>
+      <Publicise view={view} />
+    </BrowserRouter>
+  );
+};
+
+window.SNAP_PUBLICISE_DATA = {
+  hasScreenshot: true,
+  isReleased: true,
+  private: false,
+  trending: false,
+};
+
+beforeEach(() => {
+  window.SNAP_PUBLICISE_DATA.private = false;
+});
+
+describe("Publicise", () => {
+  test("notification if private", () => {
+    window.SNAP_PUBLICISE_DATA.private = true;
+    renderComponent();
+    expect(screen.getByText(/Make your snap public/)).toBeInTheDocument();
+  });
+
+  test("disabled if private", () => {
+    window.SNAP_PUBLICISE_DATA.private = true;
+    renderComponent();
+    expect(document.querySelector(".u-disabled")).toBeInTheDocument();
+  });
+
+  test("renders section navigation", () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole("link", { name: "Snap Store buttons" })
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("link", { name: "GitHub badges" })
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("link", { name: "Embeddable cards" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders buttons by default", () => {
+    renderComponent();
+    expect(
+      screen.getByText(/You can help translate these buttons/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders badges if passed argument", () => {
+    renderComponent("badges");
+    expect(
+      screen.getByText(/Stable channel from default track/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders cards if passed argument", () => {
+    renderComponent("cards");
+    expect(screen.getByText(/Snap Store button:/)).toBeInTheDocument();
+  });
+});
diff --git a/static/js/publisher-pages/pages/Publicise/index.ts b/static/js/publisher-pages/pages/Publicise/index.ts
new file mode 100644
index 0000000000..ee8d8d256e
--- /dev/null
+++ b/static/js/publisher-pages/pages/Publicise/index.ts
@@ -0,0 +1 @@
+export { default } from "./Publicise";
diff --git a/static/sass/_snapcraft-publicise.scss b/static/sass/_snapcraft-publicise.scss
deleted file mode 100644
index 599cd79301..0000000000
--- a/static/sass/_snapcraft-publicise.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@mixin snapcraft-publicise {
-  .snapcraft-publicise__images {
-    img + img {
-      margin-left: 1.5rem;
-    }
-  }
-
-  .snapcraft-publicise__download {
-    margin-top: 1.6rem;
-  }
-
-  .p-list__item {
-    padding-left: $sph--large;
-
-    &.is-selected {
-      @include vf-highlight-bar($color-mid-light, left);
-
-      font-weight: 400;
-
-      // make sure to override link visited color
-      a {
-        color: $color-dark;
-      }
-    }
-  }
-}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 72804e5e94..71ac988599 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -116,8 +116,6 @@ $color-social-icon-foreground: $color-light;
 @include snapcraft-p-multiselect;
 @import "patterns_first-snap-flow";
 @include snapcraft-p-first-snap-flow;
-@import "snapcraft-publicise";
-@include snapcraft-publicise;
 @import "snapcraft-publisher";
 @include snapcraft-publisher;
 @import "patterns_modal";
diff --git a/templates/publisher/publicise/_publisher_publicise_layout.html b/templates/publisher/publicise/_publisher_publicise_layout.html
deleted file mode 100644
index 91653ed60e..0000000000
--- a/templates/publisher/publicise/_publisher_publicise_layout.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Publicise {% if display_title %}{{ display_title }}{% else %}{{ snap_title }}{% endif %}
-{% endblock %}
-
-{% block content %}
-<div id="main-content">
-  {% set selected_tab='publicise' %}
-  {% include "publisher/_header.html" %}
-
-  {% if private or is_released == False %}
-    <section class="p-strip--light is-shallow">
-      <div class="row">
-        <div class="col-6">
-          <h2 class="p-heading--4">Share and promote your snap</h2>
-        </div>
-        <div class="col-6">
-          <p>When your snap is public and has a release, you'll be able to share it using Store buttons, badges and embeddable cards.</p>
-          <p>Make your snap public in <a href="/{{ snap_name }}/settings">its settings page</a>.</p>
-        </div>
-      </div>
-    </section>
-  {% endif %}
-
-  <div class="p-strip is-shallow {% if private or is_released == False %}u-disabled{% endif %}">
-    <div class="row">
-      <div class="col-3">
-        <div class="p-navigation--sidebar">
-
-          <div class="sidebar__content">
-            <ul class="p-list">
-              <li class="p-list__item {% if publicise_page == 'buttons' %}is-selected{% endif %}">
-                <a href="/{{ snap_name }}/publicise/">Snap Store buttons</a>
-              </li>
-              <li class="p-list__item {% if publicise_page == 'badges' %}is-selected{% endif %}">
-                <a href="/{{ snap_name }}/publicise/badges">GitHub badges</a>
-              </li>
-              <li class="p-list__item {% if publicise_page == 'cards' %}is-selected{% endif %}">
-                <a href="/{{ snap_name }}/publicise/cards">Embeddable cards</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="col-9">
-        {% block publicise_content %}
-        {% endblock %}
-      </div>
-
-    </div>
-  </div>
-</div>
-{% endblock %}
diff --git a/templates/publisher/publicise/embedded_cards.html b/templates/publisher/publicise/embedded_cards.html
deleted file mode 100644
index eaa534f495..0000000000
--- a/templates/publisher/publicise/embedded_cards.html
+++ /dev/null
@@ -1,97 +0,0 @@
-{% set publicise_page="cards" %}
-{% extends "publisher/publicise/_publisher_publicise_layout.html" %}
-
-{% block publicise_content %}
-  <div class="row">
-    <h4>Promote your snap using embeddable responsive card</h4>
-  </div>
-  <div class="p-strip is-shallow u-no-padding--top">
-    <div class="row">
-      <div class="col-2">
-        <label>
-          Snap Store button:
-        </label>
-      </div>
-      <div class="col-7">
-        <div>
-          <input type="radio" name="store-button" id="store-button-dark" checked="checked" value="black">
-          <label for="store-button-dark">Dark</label>
-        </div>
-        <div>
-          <input type="radio" name="store-button" id="store-button-light" value="white">
-          <label for="store-button-light">Light</label>
-        </div>
-        <div>
-          <input type="radio" name="store-button" id="store-button-hide" value="">
-          <label for="store-button-hide">Hide button</label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="p-strip is-shallow u-no-padding--top">
-    <div class="row">
-      <div class="col-2">
-        Options:
-      </div>
-      <div class="col-7" id="js-options">
-        <div>
-          <input type="checkbox" name="show-channels" id="option-show-channels" checked>
-          <label for="option-show-channels">Show all channels</label>
-        </div>
-        <div>
-          <input type="checkbox" name="show-summary" id="option-show-summary" checked>
-          <label for="option-show-summary">Show summary</label>
-        </div>
-        <div>
-          <input type="checkbox" name="show-screenshot" id="option-show-screenshot" {% if not has_screenshot %}disabled{% else %}checked{% endif %}>
-          <label for="option-show-screenshot">Show screenshot</label>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-2">
-      <label>Preview:</label>
-    </div>
-    <div class="col-7">
-      <iframe id="embedded-card-frame"
-        class="snapcraft-publicise__embedded-frame"
-        src="/{{snap_name}}/embedded?button=black&channels=true&summary=true&screenshot=true"
-        width="100%" height="320px"
-        frameborder="0" style="border: 1px solid #CCC; border-radius: 2px;">
-      </iframe>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-2">
-      <label>HTML:</label>
-    </div>
-    <div class="col-7">
-      <div class="p-code-snippet">
-        <pre class="p-code-snippet__block is-wrapped"><code id="snippet-card-html">&lt;iframe src="https://snapcraft.io/{{ snap_name }}/embedded?button=black&channels=true&summary=true&screenshot=true" frameborder="0" width="100%" height="320px" style="border: 1px solid #CCC; border-radius: 2px;"&gt;&lt;/iframe&gt;</code></pre>
-      </div>
-    </div>
-  </div>
-{% endblock %}
-
-{% block scripts_includes %}
-<script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  window.addEventListener("DOMContentLoaded", function() {
-    Raven.context(function () {
-      snapcraft.publisher.publicise.initEmbeddedCardPicker({
-        snapName: "{{ snap_name }}",
-        previewFrame: document.getElementById('embedded-card-frame'),
-        codeElement: document.getElementById('snippet-card-html'),
-        buttonRadios: document.querySelectorAll("input[name=store-button]"),
-        optionButtons: document.querySelectorAll("#js-options input[type=checkbox]")
-      });
-    });
-  });
-</script>
-{% endblock %}
diff --git a/templates/publisher/publicise/github_badges.html b/templates/publisher/publicise/github_badges.html
deleted file mode 100644
index 0d29ecdd43..0000000000
--- a/templates/publisher/publicise/github_badges.html
+++ /dev/null
@@ -1,98 +0,0 @@
-{% set publicise_page="badges" %}
-{% extends "publisher/publicise/_publisher_publicise_layout.html" %}
-
-{% block publicise_content %}
-  <div class="row">
-    <h4>Promote your snap using embeddable GitHub badge</h4>
-  </div>
-
-  <div class="row">
-    <div class="col-2">
-      Display:
-    </div>
-    <div class="col-7" id="js-options">
-      <div>
-        <input type="checkbox" name="show-channel" id="option-show-channel" checked>
-        <label for="option-show-channel">
-          Stable channel from default track
-        </label>
-      </div>
-      <div>
-        <input type="checkbox" name="show-trending" id="option-show-trending" {% if trending %}checked{% endif %}>
-        <label for="option-show-trending">
-          Trending status
-          <span class="p-form-help-text">Badge will only display when your snap is flagged as trending</span>
-        </label>
-      </div>
-      <p class="u-hide" id="options-unchecked-warning"><em>Please select at least one badge to display from the list above</em></p>
-    </div>
-  </div>
-
-  <div id="badge-code-wrapper">
-    <div class="row">
-      <div class="col-2">
-        Preview:
-      </div>
-      <div class="col-7">
-        <p class="snapcraft-publicise__images" id="snippet-badge-preview">
-          <a href="https://snapcraft.io/{{ snap_name }}">
-            <img alt="{{ snap_title }}" src="/{{ snap_name }}/badge.svg" />
-          </a>
-        </p>
-
-        <div class="p-notification--information u-hide" id="notification-trending">
-          <div class="p-notification__content">
-            <h5 class="p-notification__title">Trending badge</h5>
-            <p class="p-notification__message">Your snap is not currently flagged as trending. Only when your snap becomes trending will the trending badge appear on external sites.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-2">
-        <label>HTML:</label>
-      </div>
-      <div class="col-7">
-        <div class="p-code-snippet">
-          <pre class="p-code-snippet__block"><code id="snippet-badge-html">&lt;a href="https://snapcraft.io/{{ snap_name }}"&gt;&lt;img alt="{{ snap_title }}" src="https://snapcraft.io/{{ snap_name }}/badge.svg" /&gt;&lt;/a&gt;</code></pre>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-2">
-        <label>Markdown:</label>
-      </div>
-      <div class="col-7">
-        <div class="p-code-snippet">
-          <pre class="p-code-snippet__block is-wrapped"><code id="snippet-badge-markdown">[![{{ snap_title }}](https://snapcraft.io/{{ snap_name }}/badge.svg)](https://snapcraft.io/{{ snap_name }})</code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}
-
-{% block scripts_includes %}
-  <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  window.addEventListener("DOMContentLoaded", function() {
-    Raven.context(function () {
-      snapcraft.publisher.publicise.initGitHubBadgePicker({
-        snapName: "{{ snap_name }}",
-        isTrending: {{ trending|tojson }},
-        previewElement: document.getElementById("snippet-badge-preview"),
-        htmlElement: document.getElementById("snippet-badge-html"),
-        markdownElement: document.getElementById("snippet-badge-markdown"),
-        optionButtons: document.querySelectorAll("#js-options input[type=checkbox]"),
-        notificationElement: document.getElementById("notification-trending"),
-        badgeCodeElement: document.getElementById("badge-code-wrapper"),
-        optionsUncheckedElement: document.getElementById("options-unchecked-warning")
-      });
-    });
-  });
-</script>
-{% endblock %}
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
index de4a3386a5..68c4fd4e28 100644
--- a/templates/store/publisher.html
+++ b/templates/store/publisher.html
@@ -3,5 +3,13 @@
 {% block content %}
 <div id="root">
 </div>
+<script>
+  window.SNAP_PUBLICISE_DATA = {
+    hasScreenshot: {% if has_screenshot %}{{ has_screenshot | tojson }}{% else %}false{% endif %},
+    isReleased: {% if is_released %}{{ is_released | tojson }}{% else %}false{% endif %},
+    private: {% if private %}{{ private | tojson }}{% else %}false{% endif %},
+    trending: {% if trending %}{{ trending | tojson }}{% else %}false{% endif %},
+  }
+</script>
 <script src="{{ static_url('js/dist/publisher-pages.js') }}"></script>
 {% endblock %}
diff --git a/tests/publisher/snaps/tests_publicise.py b/tests/publisher/snaps/tests_publicise.py
index ab51692332..dd1d22d7ef 100644
--- a/tests/publisher/snaps/tests_publicise.py
+++ b/tests/publisher/snaps/tests_publicise.py
@@ -43,13 +43,9 @@ def test_publicise_logged_in(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": False,
             "snap_name": snap_name,
             "channel_maps_list": [],
-            "keywords": [],
-            "publisher": {"display-name": "test"},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -59,10 +55,8 @@ def test_publicise_logged_in(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/publicise/store_buttons.html")
+        self.assert_template_used("store/publisher.html")
 
-        self.assert_context("snap_id", "id")
-        self.assert_context("snap_title", "test snap")
         self.assert_context("snap_name", snap_name)
 
     @responses.activate
@@ -70,13 +64,9 @@ def test_publicise_private_snap(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": True,
             "snap_name": snap_name,
             "channel_maps_list": [],
-            "keywords": [],
-            "publisher": {"display-name": "test"},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -86,6 +76,6 @@ def test_publicise_private_snap(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/publicise/store_buttons.html")
+        self.assert_template_used("store/publisher.html")
 
         self.assert_context("private", True)
diff --git a/tests/publisher/snaps/tests_publicise_badges.py b/tests/publisher/snaps/tests_publicise_badges.py
index 0aed3811e1..864a439cc3 100644
--- a/tests/publisher/snaps/tests_publicise_badges.py
+++ b/tests/publisher/snaps/tests_publicise_badges.py
@@ -76,13 +76,8 @@ def test_publicise_logged_in(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": False,
             "snap_name": snap_name,
-            "keywords": [],
-            "media": [],
-            "publisher": {"display-name": "test"},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -98,10 +93,8 @@ def test_publicise_logged_in(self):
         self.check_call_by_api_url(responses.calls)
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/publicise/github_badges.html")
+        self.assert_template_used("store/publisher.html")
 
-        self.assert_context("snap_id", "id")
-        self.assert_context("snap_title", "test snap")
         self.assert_context("snap_name", snap_name)
 
     @responses.activate
@@ -109,12 +102,8 @@ def test_publicise_private_snap(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": True,
             "snap_name": snap_name,
-            "keywords": [],
-            "media": [],
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
diff --git a/tests/publisher/snaps/tests_publicise_cards.py b/tests/publisher/snaps/tests_publicise_cards.py
index 9b716fbc0f..a39f7377d3 100644
--- a/tests/publisher/snaps/tests_publicise_cards.py
+++ b/tests/publisher/snaps/tests_publicise_cards.py
@@ -43,13 +43,9 @@ def test_publicise_logged_in(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": False,
             "snap_name": snap_name,
-            "keywords": [],
             "media": [],
-            "publisher": {"display-name": "test"},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -59,10 +55,8 @@ def test_publicise_logged_in(self):
         self.check_call_by_api_url(responses.calls)
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/publicise/embedded_cards.html")
+        self.assert_template_used("store/publisher.html")
 
-        self.assert_context("snap_id", "id")
-        self.assert_context("snap_title", "test snap")
         self.assert_context("snap_name", snap_name)
         self.assert_context("has_screenshot", False)
 
@@ -71,13 +65,9 @@ def test_publicise_snap_with_screenshot(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
-            "title": "test snap",
             "private": False,
             "snap_name": snap_name,
-            "keywords": [],
             "media": [{"url": "this is a url", "type": "screenshot"}],
-            "publisher": {"display-name": "test"},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -87,7 +77,7 @@ def test_publicise_snap_with_screenshot(self):
         self.check_call_by_api_url(responses.calls)
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/publicise/embedded_cards.html")
+        self.assert_template_used("store/publisher.html")
 
         self.assert_context("has_screenshot", True)
 
@@ -96,11 +86,9 @@ def test_publicise_private_snap(self):
         snap_name = "test-snap"
 
         payload = {
-            "snap_id": "id",
             "title": "test snap",
             "private": True,
             "snap_name": snap_name,
-            "keywords": [],
             "media": [],
         }
 
diff --git a/webapp/publisher/snaps/publicise_views.py b/webapp/publisher/snaps/publicise_views.py
index e6c9b3efb8..65c30a4364 100644
--- a/webapp/publisher/snaps/publicise_views.py
+++ b/webapp/publisher/snaps/publicise_views.py
@@ -20,40 +20,13 @@ def get_publicise(snap_name):
 
     is_released = len(snap_details["channel_maps_list"]) > 0
 
-    available_languages = {
-        "ar": {"title": "العربية", "text": "احصل عليه من Snap Store"},
-        "bg": {"title": "български", "text": "Инсталирайте го от Snap Store"},
-        "bn": {"title": "বাংলা", "text": "থেকে ইনস্টল করুন"},
-        "de": {"title": "Deutsch", "text": "Installieren vom Snap Store"},
-        "en": {"title": "English", "text": "Get it from the Snap Store"},
-        "es": {"title": "Español", "text": "Instalar desde Snap Store"},
-        "fr": {
-            "title": "Français",
-            "text": "Installer à partir du Snap Store",
-        },
-        "it": {"title": "Italiano", "text": "Scarica dallo Snap Store"},
-        "jp": {"title": "日本語", "text": "Snap Store から入手ください"},
-        "pl": {"title": "Polski", "text": "Pobierz w Snap Store"},
-        "pt": {"title": "Português", "text": "Disponível na Snap Store"},
-        "ro": {"title": "Română", "text": "Instalează din Snap Store"},
-        "ru": {"title": "русский язык", "text": "Загрузите из Snap Store"},
-        "tw": {"title": "中文（台灣）", "text": "安裝軟體敬請移駕 Snap Store"},
-    }
-
     context = {
         "private": snap_details["private"],
         "snap_name": snap_details["snap_name"],
-        "snap_title": snap_details["title"],
-        "publisher_name": snap_details["publisher"]["display-name"],
-        "snap_id": snap_details["snap_id"],
-        "is_release": is_released,
-        "available": available_languages,
-        "download_version": "v1.4.2",
+        "is_released": is_released,
     }
 
-    return flask.render_template(
-        "publisher/publicise/store_buttons.html", **context
-    )
+    return flask.render_template("store/publisher.html", **context)
 
 
 @login_required
@@ -67,15 +40,10 @@ def get_publicise_badges(snap_name):
 
     context = {
         "snap_name": snap_details["snap_name"],
-        "snap_title": snap_details["title"],
-        "publisher_name": snap_details["publisher"]["display-name"],
-        "snap_id": snap_details["snap_id"],
         "trending": snap_public_details["snap"]["trending"],
     }
 
-    return flask.render_template(
-        "publisher/publicise/github_badges.html", **context
-    )
+    return flask.render_template("store/publisher.html", **context)
 
 
 @login_required
@@ -91,11 +59,6 @@ def get_publicise_cards(snap_name):
     context = {
         "has_screenshot": has_screenshot,
         "snap_name": snap_details["snap_name"],
-        "snap_title": snap_details["title"],
-        "publisher_name": snap_details["publisher"]["display-name"],
-        "snap_id": snap_details["snap_id"],
     }
 
-    return flask.render_template(
-        "publisher/publicise/embedded_cards.html", **context
-    )
+    return flask.render_template("store/publisher.html", **context)

From 8cacd7e789b00ea78e1b60b06ba9c21a9f9b1cdd Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Tue, 10 Sep 2024 11:14:56 +0100
Subject: [PATCH 02/24] feat: Move settings into publisher app (#4847)

---
 static/js/global.d.ts                         |  22 +++
 .../SaveAndPreview/SaveAndPreview.test.tsx    |  67 ++++++++
 .../SaveAndPreview/SaveAndPreview.tsx         |  98 ++++++++++++
 .../components/SaveAndPreview/index.ts        |   1 +
 .../SaveStateNotifications.tsx                |  52 +++++++
 .../__tests__/SaveStateNotifications.test.tsx |  99 ++++++++++++
 .../SaveStateNotifications/index.ts           |   1 +
 .../SearchAutocomplete/SearchAutocomplete.tsx | 144 ++++++++++++++++++
 .../components/SearchAutocomplete/index.ts    |   1 +
 .../components/SectionNav/SectionNav.tsx      |   8 +-
 .../UpdateMetadataModal.tsx                   |  53 +++++++
 .../__tests__/UpdateMetadataModal.test.tsx    |  40 +++++
 .../components/UpdateMetadataModal/index.ts   |   1 +
 static/js/publisher-pages/index.tsx           |   6 +-
 .../pages/Settings/Settings.tsx}              |  34 +++--
 .../pages/Settings}/UnregisterSnapModal.tsx   |   0
 .../__tests__/UnregisterSnapModal.test.tsx    | 108 +++++++++++++
 .../publisher-pages/pages/Settings/index.ts   |   1 +
 static/js/publisher-pages/types/index.d.ts    |  21 +++
 .../utils/getChanges.ts                       |   0
 .../utils/getFormData.ts                      |   2 +-
 .../utils/getSettingsData.ts                  |   2 +-
 .../utils/index.ts                            |   0
 .../settings/components/App/index.ts          |   1 -
 static/js/publisher/settings/index.tsx        |  14 --
 static/js/publisher/settings/types/index.d.ts |  12 --
 templates/publisher/settings.html             |  31 ----
 templates/store/publisher.html                |  18 +++
 tests/publisher/snaps/tests_post_settings.py  |   6 +-
 tests/publisher/snaps/tests_settings.py       |   2 +-
 webapp/publisher/snaps/settings_views.py      |   4 +-
 webpack.config.entry.js                       |   1 -
 32 files changed, 763 insertions(+), 87 deletions(-)
 create mode 100644 static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
 create mode 100644 static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
 create mode 100644 static/js/publisher-pages/components/SaveAndPreview/index.ts
 create mode 100644 static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
 create mode 100644 static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
 create mode 100644 static/js/publisher-pages/components/SaveStateNotifications/index.ts
 create mode 100644 static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
 create mode 100644 static/js/publisher-pages/components/SearchAutocomplete/index.ts
 create mode 100644 static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
 create mode 100644 static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
 create mode 100644 static/js/publisher-pages/components/UpdateMetadataModal/index.ts
 rename static/js/{publisher/settings/components/App/App.tsx => publisher-pages/pages/Settings/Settings.tsx} (95%)
 rename static/js/{publisher/settings/components => publisher-pages/pages/Settings}/UnregisterSnapModal.tsx (100%)
 create mode 100644 static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
 create mode 100644 static/js/publisher-pages/pages/Settings/index.ts
 rename static/js/{publisher/settings => publisher-pages}/utils/getChanges.ts (100%)
 rename static/js/{publisher/settings => publisher-pages}/utils/getFormData.ts (96%)
 rename static/js/{publisher/settings => publisher-pages}/utils/getSettingsData.ts (94%)
 rename static/js/{publisher/settings => publisher-pages}/utils/index.ts (100%)
 delete mode 100644 static/js/publisher/settings/components/App/index.ts
 delete mode 100644 static/js/publisher/settings/index.tsx
 delete mode 100644 static/js/publisher/settings/types/index.d.ts
 delete mode 100644 templates/publisher/settings.html

diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 3143111a0d..251ac12813 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -16,10 +16,32 @@ declare interface Window {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Vimeo: any;
   DNS_VERIFICATION_TOKEN: string;
+  SENTRY_DSN: string;
+  CSRF_TOKEN: string;
   SNAP_PUBLICISE_DATA: {
     hasScreenshot: boolean;
     isReleased: boolean;
     private: boolean;
     trending: boolean;
   };
+  SNAP_SETTINGS_DATA: {
+    blacklist_countries: string[];
+    blacklist_country_keys: string;
+    countries: Array<{ key: string; name: string }>;
+    country_keys_status: string | null;
+    private: boolean;
+    publisher_name: string;
+    snap_id: string;
+    snap_name: string;
+    snap_title: string;
+    status: string;
+    store: string;
+    territory_distribution_status: string;
+    unlisted: boolean;
+    update_metadata_on_release: boolean;
+    visibility: string;
+    visibility_locked: boolean;
+    whitelist_countries: string[];
+    whitelist_country_keys: string;
+  };
 }
diff --git a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
new file mode 100644
index 0000000000..7e091f5b89
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import SaveAndPreview from "./SaveAndPreview";
+
+const reset = jest.fn();
+
+const renderComponent = (
+  isDirty: boolean,
+  isSaving: boolean,
+  isValid: boolean
+) => {
+  return render(
+    <SaveAndPreview
+      snapName="test-snap-name"
+      isDirty={isDirty}
+      reset={reset}
+      isSaving={isSaving}
+      isValid={isValid}
+    />
+  );
+};
+
+test("the 'Revert' button is disabled by default", () => {
+  renderComponent(false, false, true);
+  expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute("aria-disabled","true");
+});
+
+test("the 'Revert' button is enabled is data is dirty", () => {
+  renderComponent(true, false, true);
+  expect(screen.getByRole("button", { name: "Revert" })).not.toBeDisabled();
+});
+
+test("the 'Save' button is disabled by default", () => {
+  renderComponent(false, false, true);
+  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+});
+
+test("the 'Save' button is enabled is data is dirty", () => {
+  renderComponent(true, false, true);
+  expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
+});
+
+test("the 'Save' button shows loading state if saving", () => {
+  renderComponent(true, true, true);
+  expect(screen.getByRole("button", { name: "Saving" })).toBeInTheDocument();
+});
+
+test("the 'Save' button is disabled when saving", () => {
+  renderComponent(true, true, true);
+  expect(screen.getByRole("button", { name: "Saving" })).toHaveAttribute("aria-disabled","true");
+});
+
+test("the 'Save' button is disabled if the form is invalid", () => {
+  renderComponent(false, false, false);
+  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+});
+
+test("revert button resets the form", async () => {
+  const user = userEvent.setup();
+  renderComponent(true, false, true);
+  await user.click(screen.getByRole("button", { name: "Revert" }));
+  await waitFor(() => {
+    expect(reset).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
new file mode 100644
index 0000000000..a6b71a5685
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useRef } from "react";
+import { Row, Col, Button } from "@canonical/react-components";
+
+import debounce from "../../../libs/debounce";
+
+type Props = {
+  snapName: string;
+  isDirty: boolean;
+  reset: Function;
+  isSaving: boolean;
+  isValid: boolean;
+  showPreview?: boolean;
+};
+
+function SaveAndPreview({
+  snapName,
+  isDirty,
+  reset,
+  isSaving,
+  showPreview,
+}: Props) {
+  const stickyBar = useRef<HTMLDivElement>(null);
+  const handleScroll = () => {
+    stickyBar?.current?.classList.toggle(
+      "sticky-shadow",
+      stickyBar?.current?.getBoundingClientRect()?.top === 0
+    );
+  };
+
+  useEffect(() => {
+    document.addEventListener("scroll", debounce(handleScroll, 10, false));
+  }, []);
+
+  return (
+    <>
+      <div className="snapcraft-p-sticky js-sticky-bar" ref={stickyBar}>
+        <Row>
+          <Col size={7}>
+            <p className="u-no-margin--bottom">
+              Updates to this information will appear immediately on the{" "}
+              <a href={`/${snapName}`}>snap listing page</a>.
+            </p>
+          </Col>
+          <Col size={5}>
+            <div className="u-align--right">
+              {showPreview && (
+                <Button
+                  type="submit"
+                  className="p-button--base p-tooltip--btm-center"
+                  aria-describedby="preview-tooltip"
+                  form="preview-form"
+                >
+                  Preview
+                  <span
+                    className="p-tooltip__message"
+                    role="tooltip"
+                    id="preview-tooltip"
+                  >
+                    Previews will only work in the same browser, locally
+                  </span>
+                </Button>
+              )}
+              <Button
+                appearance="default"
+                disabled={!isDirty}
+                type="reset"
+                onClick={() => {
+                  reset();
+                }}
+              >
+                Revert
+              </Button>
+              <Button
+                appearance="positive"
+                disabled={!isDirty || isSaving}
+                type="submit"
+                style={{ minWidth: "68px" }}
+              >
+                {isSaving ? (
+                  <i className="p-icon--spinner is-light u-animation--spin">
+                    Saving
+                  </i>
+                ) : (
+                  "Save"
+                )}
+              </Button>
+            </div>
+          </Col>
+        </Row>
+      </div>
+      <div className="u-fixed-width">
+        <hr className="u-no-margin--bottom" />
+      </div>
+    </>
+  );
+}
+
+export default SaveAndPreview;
diff --git a/static/js/publisher-pages/components/SaveAndPreview/index.ts b/static/js/publisher-pages/components/SaveAndPreview/index.ts
new file mode 100644
index 0000000000..49f6ef4f1e
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveAndPreview/index.ts
@@ -0,0 +1 @@
+export { default } from "./SaveAndPreview";
diff --git a/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx b/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
new file mode 100644
index 0000000000..ad7e351067
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
@@ -0,0 +1,52 @@
+import { Notification } from "@canonical/react-components";
+
+type Props = {
+  hasSaved: boolean;
+  setHasSaved: Function;
+  savedError: boolean | Array<{ message: string }>;
+  setSavedError: Function;
+};
+
+function SaveStateNotifications({
+  hasSaved,
+  setHasSaved,
+  savedError,
+  setSavedError,
+}: Props) {
+  return (
+    <>
+      {hasSaved && (
+        <div className="u-fixed-width">
+          <Notification
+            severity="positive"
+            title="Changes applied successfully."
+            onDismiss={() => {
+              setHasSaved(false);
+            }}
+          />
+        </div>
+      )}
+
+      {savedError && (
+        <div className="u-fixed-width">
+          <Notification
+            severity="negative"
+            title="Error"
+            onDismiss={() => {
+              setHasSaved(false);
+              setSavedError(false);
+            }}
+          >
+            Changes have not been saved.
+            <br />
+            {savedError === true
+              ? "Something went wrong."
+              : savedError.map((error) => `${error.message}`).join("\n")}
+          </Notification>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default SaveStateNotifications;
diff --git a/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx b/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
new file mode 100644
index 0000000000..a0f1ff20fb
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
@@ -0,0 +1,99 @@
+import { screen, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import SaveStateNotifications from "../SaveStateNotifications";
+
+type Options = {
+  hasSaved?: boolean;
+  setHasSaved?: Function;
+  savedError?: boolean | Array<{ message: string }>;
+  setSavedError?: Function;
+};
+
+const renderComponent = (options: Options) => {
+  return render(
+    <SaveStateNotifications
+      hasSaved={options.hasSaved || false}
+      setHasSaved={options.setHasSaved || jest.fn()}
+      savedError={options.savedError || false}
+      setSavedError={options.setSavedError || jest.fn()}
+    />
+  );
+};
+
+describe("SaveStateNotifications", () => {
+  test("shows success notification if saved", () => {
+    renderComponent({ hasSaved: true });
+    expect(
+      screen.getByRole("heading", { name: "Changes applied successfully." })
+    ).toBeInTheDocument();
+  });
+
+  test("doesn't show success notification if not saved", () => {
+    renderComponent({ hasSaved: false });
+    expect(
+      screen.queryByRole("heading", { name: "Changes applied successfully." })
+    ).not.toBeInTheDocument();
+  });
+
+  test("success notifcation can be closed", async () => {
+    const user = userEvent.setup();
+    const setHasSaved = jest.fn();
+    renderComponent({ hasSaved: true, setHasSaved });
+    await user.click(
+      screen.getByRole("button", { name: "Close notification" })
+    );
+    expect(setHasSaved).toHaveBeenCalled();
+  });
+
+  test("shows error notification if saved", () => {
+    renderComponent({ savedError: true });
+    expect(
+      screen.getByText(/Changes have not been saved./)
+    ).toBeInTheDocument();
+  });
+
+  test("doesn't show error notification if not saved", () => {
+    renderComponent({ savedError: false });
+    expect(
+      screen.queryByText(/Changes have not been saved./)
+    ).not.toBeInTheDocument();
+  });
+
+  test("shows generic error if message is boolean", () => {
+    renderComponent({ savedError: true });
+    expect(screen.getByText(/Something went wrong./)).toBeInTheDocument();
+  });
+
+  test("shows custom error if message is an array", () => {
+    renderComponent({
+      savedError: [
+        { message: "Saving error" },
+        { message: "Field is required" },
+      ],
+    });
+    expect(screen.getByText(/Saving error/)).toBeInTheDocument();
+    expect(screen.getByText(/Field is required/)).toBeInTheDocument();
+  });
+
+  test("error notifcation can be closed", async () => {
+    const user = userEvent.setup();
+    const setHasSaved = jest.fn();
+    renderComponent({ savedError: true, setHasSaved });
+    await user.click(
+      screen.getByRole("button", { name: "Close notification" })
+    );
+    expect(setHasSaved).toHaveBeenCalled();
+  });
+
+  test("error notifcation can be cleared", async () => {
+    const user = userEvent.setup();
+    const setSavedError = jest.fn();
+    renderComponent({ savedError: true, setSavedError });
+    await user.click(
+      screen.getByRole("button", { name: "Close notification" })
+    );
+    expect(setSavedError).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher-pages/components/SaveStateNotifications/index.ts b/static/js/publisher-pages/components/SaveStateNotifications/index.ts
new file mode 100644
index 0000000000..bc2dca163f
--- /dev/null
+++ b/static/js/publisher-pages/components/SaveStateNotifications/index.ts
@@ -0,0 +1 @@
+export { default } from "./SaveStateNotifications";
diff --git a/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
new file mode 100644
index 0000000000..69e492e6b3
--- /dev/null
+++ b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -0,0 +1,144 @@
+import { useState, useEffect } from "react";
+import Downshift from "downshift";
+import { useWatch } from "react-hook-form";
+
+type DataItem = {
+  key: string;
+  name: string;
+};
+
+type Props = {
+  data: Array<DataItem>;
+  field: string;
+  currentValues: Array<string>;
+  register: Function;
+  setValue: Function;
+  getValues: Function;
+  control: any;
+  disabled?: boolean;
+};
+
+function SearchAutocomplete({
+  data,
+  field,
+  currentValues,
+  register,
+  setValue,
+  getValues,
+  control,
+  disabled,
+}: Props) {
+  const [selections, setSelections] = useState(() => {
+    return data.filter((value) => currentValues.includes(value.key));
+  });
+
+  const getNewSelectionKeys = (newSelections: Array<DataItem>) => {
+    return newSelections
+      .map((selection: DataItem) => selection.key)
+      .sort()
+      .join(" ");
+  };
+
+  const shouldDirty = (newSelectionsKeys: string) => {
+    return newSelectionsKeys !== getValues(field);
+  };
+
+  const selectionKeyValues = useWatch({
+    control,
+    name: field,
+  });
+
+  useEffect(() => {
+    setSelections(() => {
+      return data.filter((value) => selectionKeyValues.includes(value.key));
+    });
+  }, [selectionKeyValues]);
+
+  return (
+    <Downshift
+      onChange={(selection) => {
+        const newSelections = selections.concat([selection]);
+        const newSelectionsKeys = getNewSelectionKeys(newSelections);
+
+        setSelections(newSelections);
+        setValue(field, newSelectionsKeys, {
+          shouldDirty: shouldDirty(newSelectionsKeys),
+        });
+      }}
+      itemToString={() => ""}
+    >
+      {({
+        getInputProps,
+        getItemProps,
+        getMenuProps,
+        isOpen,
+        inputValue,
+        highlightedIndex,
+      }) => (
+        <div className="p-multiselect">
+          {selections.map((suggestion: DataItem) => (
+            <span key={suggestion.key} className="p-multiselect__item">
+              {suggestion.name}
+              <i
+                className="p-icon--close p-multiselect__item-remove"
+                onClick={() => {
+                  const newSelections = selections.filter(
+                    (item: DataItem) => item.key !== suggestion.key
+                  );
+
+                  const newSelectionsKeys = getNewSelectionKeys(newSelections);
+
+                  setSelections(newSelections);
+                  setValue(field, newSelectionsKeys, {
+                    shouldDirty: shouldDirty(newSelectionsKeys),
+                  });
+                }}
+              >
+                Remove suggestion
+              </i>
+            </span>
+          ))}
+
+          <input type="hidden" {...register(field)} />
+
+          <input
+            type="text"
+            className="p-multiselect__input"
+            disabled={disabled}
+            {...getInputProps()}
+          />
+
+          {isOpen && (
+            <ul className="p-multiselect__options" {...getMenuProps()}>
+              {data
+                .filter(
+                  (item) =>
+                    !inputValue ||
+                    item.key.toLowerCase().includes(inputValue) ||
+                    item.name.toLowerCase().includes(inputValue)
+                )
+                .map((item, index) => (
+                  <li
+                    className="p-multiselect__option"
+                    {...getItemProps({
+                      key: item.key,
+                      index,
+                      item,
+                      style: {
+                        backgroundColor:
+                          highlightedIndex === index ? "#f7f7f7" : "#fff",
+                      },
+                    })}
+                  >
+                    {item.name}
+                  </li>
+                ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </Downshift>
+  );
+}
+
+export default SearchAutocomplete;
diff --git a/static/js/publisher-pages/components/SearchAutocomplete/index.ts b/static/js/publisher-pages/components/SearchAutocomplete/index.ts
new file mode 100644
index 0000000000..365f03ff4b
--- /dev/null
+++ b/static/js/publisher-pages/components/SearchAutocomplete/index.ts
@@ -0,0 +1 @@
+export { default } from "./SearchAutocomplete";
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
index fbd8ecfd45..9100043a12 100644
--- a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
+++ b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import { Tabs } from "@canonical/react-components";
 
 type Props = {
@@ -13,7 +14,6 @@ function SectionNav({ activeTab, snapName }: Props) {
           label: "Listing",
           active: activeTab === "listing" || !activeTab,
           href: `/${snapName}/listing`,
-          "data-tour": "listing-intro",
         },
         {
           label: "Builds",
@@ -33,12 +33,14 @@ function SectionNav({ activeTab, snapName }: Props) {
         {
           label: "Publicise",
           active: activeTab === "publicise",
-          href: `/${snapName}/publicise`,
+          to: `/${snapName}/publicise`,
+          component: Link,
         },
         {
           label: "Settings",
           active: activeTab === "settings",
-          href: `/${snapName}/settings`,
+          to: `/${snapName}/settings`,
+          component: Link,
         },
       ]}
     />
diff --git a/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx b/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
new file mode 100644
index 0000000000..1f64e1b142
--- /dev/null
+++ b/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
@@ -0,0 +1,53 @@
+import { Modal, Button } from "@canonical/react-components";
+
+type Props = {
+  setShowMetadataWarningModal: Function;
+  submitForm: Function;
+  formData: any;
+};
+
+function UpdateMetadataModal({
+  setShowMetadataWarningModal,
+  submitForm,
+  formData,
+}: Props) {
+  return (
+    <Modal
+      close={() => {
+        setShowMetadataWarningModal(false);
+      }}
+      title="Warning"
+      buttonRow={
+        <>
+          <Button
+            type="button"
+            className="u-no-margin--bottom"
+            onClick={() => {
+              setShowMetadataWarningModal(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            className="u-no-margin--bottom u-no-margin--right"
+            appearance="positive"
+            onClick={() => {
+              submitForm(formData);
+              setShowMetadataWarningModal(false);
+            }}
+          >
+            Save changes
+          </Button>
+        </>
+      }
+    >
+      <p>
+        Making these changes means that the snap will no longer use the data
+        from snapcraft.yaml.
+      </p>
+    </Modal>
+  );
+}
+
+export default UpdateMetadataModal;
diff --git a/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx b/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
new file mode 100644
index 0000000000..707e9ff5c9
--- /dev/null
+++ b/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
@@ -0,0 +1,40 @@
+import { screen, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import UpdateMetadataModal from "../UpdateMetadataModal";
+
+const setShowMetadataWarningModal = jest.fn();
+const submitForm = jest.fn();
+const formData = {};
+
+const renderComponent = () => {
+  return render(
+    <UpdateMetadataModal
+      setShowMetadataWarningModal={setShowMetadataWarningModal}
+      submitForm={submitForm}
+      formData={formData}
+    />
+  );
+};
+
+describe("UpdateMetadataModal", () => {
+  test("cancel button closes modal", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() => {
+      expect(setShowMetadataWarningModal).toHaveBeenCalledWith(false);
+    });
+  });
+
+  test("save button submits form and closes modal", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+    await waitFor(() => {
+      expect(setShowMetadataWarningModal).toHaveBeenCalledWith(false);
+      expect(submitForm).toHaveBeenCalledWith(formData);
+    });
+  });
+});
diff --git a/static/js/publisher-pages/components/UpdateMetadataModal/index.ts b/static/js/publisher-pages/components/UpdateMetadataModal/index.ts
new file mode 100644
index 0000000000..1685ee13ec
--- /dev/null
+++ b/static/js/publisher-pages/components/UpdateMetadataModal/index.ts
@@ -0,0 +1 @@
+export { default } from "./UpdateMetadataModal";
diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index 1e83e32045..c8b1990899 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 
 import Root from "./routes/root";
 import Publicise from "./pages/Publicise";
+import Settings from "./pages/Settings";
 import ValidationSets from "./pages/ValidationSets";
 import ValidationSet from "./pages/ValidationSet";
 
@@ -24,7 +25,10 @@ const router = createBrowserRouter([
         path: "/:snapId/publicise/cards",
         element: <Publicise view="cards" />,
       },
-
+      {
+        path: "/:snapId/settings",
+        element: <Settings />,
+      },
       {
         path: "/validation-sets",
         element: <ValidationSets />,
diff --git a/static/js/publisher/settings/components/App/App.tsx b/static/js/publisher-pages/pages/Settings/Settings.tsx
similarity index 95%
rename from static/js/publisher/settings/components/App/App.tsx
rename to static/js/publisher-pages/pages/Settings/Settings.tsx
index 53c03788e1..fb75796822 100644
--- a/static/js/publisher/settings/components/App/App.tsx
+++ b/static/js/publisher-pages/pages/Settings/Settings.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useForm, useWatch } from "react-hook-form";
+import { useParams } from "react-router-dom";
 import {
   Button,
   Form,
@@ -10,18 +11,19 @@ import {
   Tooltip,
 } from "@canonical/react-components";
 
-import PageHeader from "../../../shared/PageHeader";
-import SaveAndPreview from "../../../shared/SaveAndPreview";
-import SearchAutocomplete from "../../../shared/SearchAutocomplete";
-import UpdateMetadataModal from "../../../shared/UpdateMetadataModal";
-import SaveStateNotifications from "../../../shared/SaveStateNotifications";
-import { UnregisterSnapModal } from "../UnregisterSnapModal";
+import SectionNav from "../../components/SectionNav";
+import SaveAndPreview from "../../components/SaveAndPreview";
+import SearchAutocomplete from "../../components/SearchAutocomplete";
+import UpdateMetadataModal from "../../components/UpdateMetadataModal";
+import SaveStateNotifications from "../../components/SaveStateNotifications";
+import { UnregisterSnapModal } from "./UnregisterSnapModal";
 
 import { getSettingsData, getFormData } from "../../utils";
 
-function App() {
-  const settingsData = getSettingsData(window?.settingsData);
-  const countries = window?.countries;
+function Settings() {
+  const { snapId } = useParams();
+  const settingsData = getSettingsData(window.SNAP_SETTINGS_DATA);
+  const countries = window.SNAP_SETTINGS_DATA.countries;
 
   const [isSaving, setIsSaving] = useState(false);
   const [hasSaved, setHasSaved] = useState(false);
@@ -156,12 +158,12 @@ function App() {
 
   return (
     <>
-      <PageHeader
-        snapName={settingsData?.snap_name}
-        snapTitle={settingsData?.snap_title}
-        publisherName={settingsData?.publisher_name}
-        activeTab="settings"
-      />
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        Settings
+      </h1>
+
+      <SectionNav snapName={snapId} activeTab="settings" />
 
       {settingsData?.visibility_locked && (
         <div className="u-fixed-width">
@@ -514,4 +516,4 @@ function App() {
   );
 }
 
-export default App;
+export default Settings;
diff --git a/static/js/publisher/settings/components/UnregisterSnapModal.tsx b/static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx
similarity index 100%
rename from static/js/publisher/settings/components/UnregisterSnapModal.tsx
rename to static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx
diff --git a/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx b/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
new file mode 100644
index 0000000000..d2ce535ef6
--- /dev/null
+++ b/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { UnregisterSnapModal } from "../UnregisterSnapModal";
+
+// Mock the global fetch function
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+  })
+) as jest.Mock;
+
+const mockSetUnregisterModalOpen = jest.fn();
+const mockSetUnregisterError = jest.fn();
+const mockSetUnregisterErrorMessage = jest.fn();
+
+const defaultProps = {
+  snapName: "test-snap",
+  setUnregisterModalOpen: mockSetUnregisterModalOpen,
+  setUnregisterError: mockSetUnregisterError,
+  setUnregisterErrorMessage: mockSetUnregisterErrorMessage,
+};
+
+describe("UnregisterSnapModal", () => {
+  beforeEach(() => {
+    (global.fetch as jest.Mock).mockClear();
+    mockSetUnregisterModalOpen.mockClear();
+    mockSetUnregisterError.mockClear();
+    mockSetUnregisterErrorMessage.mockClear();
+  });
+
+  test("renders the modal with the correct snap name", () => {
+    render(<UnregisterSnapModal {...defaultProps} />);
+    expect(screen.getByText('Unregister "test-snap"')).toBeInTheDocument();
+  });
+
+  test("closes the modal when Cancel button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<UnregisterSnapModal {...defaultProps} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(mockSetUnregisterModalOpen).toHaveBeenCalledWith(false);
+  });
+
+  test("disables the Unregister button and shows spinner when clicked", async () => {
+    const user = userEvent.setup();
+    render(<UnregisterSnapModal {...defaultProps} />);
+    const unregisterButton = screen.getByText("Unregister");
+    await user.click(unregisterButton);
+    expect(unregisterButton).toHaveAttribute("aria-disabled", "true");
+    expect(screen.getByText("Unregistering...")).toBeInTheDocument();
+  });
+
+  test("calls fetch with correct parameters and redirects on success", async () => {
+    const user = userEvent.setup();
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+    });
+    render(<UnregisterSnapModal {...defaultProps} />);
+    await user.click(screen.getByText("Unregister"));
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/packages/test-snap",
+        expect.objectContaining({
+          method: "DELETE",
+          headers: {
+            "X-CSRFToken": window["CSRF_TOKEN"],
+          },
+        })
+      );
+      expect(window.location.href).toBe("/snaps");
+    });
+  });
+
+  test("handles errors correctly", async () => {
+    const user = userEvent.setup();
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: false,
+        json: () => Promise.resolve({ error: "Some error occurred" }),
+      })
+    );
+    render(<UnregisterSnapModal {...defaultProps} />);
+    await user.click(screen.getByText("Unregister"));
+    await waitFor(() => {
+      expect(mockSetUnregisterModalOpen).toHaveBeenCalledWith(false);
+      expect(mockSetUnregisterError).toHaveBeenCalledWith(true);
+      expect(mockSetUnregisterErrorMessage).toHaveBeenCalledWith(
+        "Some error occurred"
+      );
+    });
+  });
+
+  test("logs error to console if fetch throws", async () => {
+    const user = userEvent.setup();
+    console.error = jest.fn();
+    (global.fetch as jest.Mock).mockImplementationOnce(() =>
+      Promise.reject("Fetch error")
+    );
+    render(<UnregisterSnapModal {...defaultProps} />);
+    await user.click(screen.getByText("Unregister"));
+    await waitFor(() => {
+      expect(console.error).toHaveBeenCalledWith("Fetch error");
+    });
+  });
+});
diff --git a/static/js/publisher-pages/pages/Settings/index.ts b/static/js/publisher-pages/pages/Settings/index.ts
new file mode 100644
index 0000000000..41d6622394
--- /dev/null
+++ b/static/js/publisher-pages/pages/Settings/index.ts
@@ -0,0 +1 @@
+export { default } from "./Settings";
diff --git a/static/js/publisher-pages/types/index.d.ts b/static/js/publisher-pages/types/index.d.ts
index c9bb6c5038..922a6c6927 100644
--- a/static/js/publisher-pages/types/index.d.ts
+++ b/static/js/publisher-pages/types/index.d.ts
@@ -12,3 +12,24 @@ export type ValidationSet = {
   snaps: Snap[];
   timestamp: string;
 };
+
+export type SettingsData = {
+  blacklist_countries: string[];
+  blacklist_country_keys: string;
+  countries: Array<{ key: string; name: string }>;
+  country_keys_status: string | null;
+  private: boolean;
+  publisher_name: string;
+  snap_id: string;
+  snap_name: string;
+  snap_title: string;
+  status: string;
+  store: string;
+  territory_distribution_status: string;
+  unlisted: boolean;
+  update_metadata_on_release: boolean;
+  visibility: string;
+  visibility_locked: boolean;
+  whitelist_countries: string[];
+  whitelist_country_keys: string;
+};
diff --git a/static/js/publisher/settings/utils/getChanges.ts b/static/js/publisher-pages/utils/getChanges.ts
similarity index 100%
rename from static/js/publisher/settings/utils/getChanges.ts
rename to static/js/publisher-pages/utils/getChanges.ts
diff --git a/static/js/publisher/settings/utils/getFormData.ts b/static/js/publisher-pages/utils/getFormData.ts
similarity index 96%
rename from static/js/publisher/settings/utils/getFormData.ts
rename to static/js/publisher-pages/utils/getFormData.ts
index 43955597d8..06c5762d2e 100644
--- a/static/js/publisher/settings/utils/getFormData.ts
+++ b/static/js/publisher-pages/utils/getFormData.ts
@@ -1,6 +1,6 @@
 import getChanges from "./getChanges";
 
-import type { SettingsData } from "../types/SettingsData";
+import type { SettingsData } from "../types";
 
 function getFormData(
   settingsData: SettingsData,
diff --git a/static/js/publisher/settings/utils/getSettingsData.ts b/static/js/publisher-pages/utils/getSettingsData.ts
similarity index 94%
rename from static/js/publisher/settings/utils/getSettingsData.ts
rename to static/js/publisher-pages/utils/getSettingsData.ts
index 3bbe7ed1cc..d1c7f29b84 100644
--- a/static/js/publisher/settings/utils/getSettingsData.ts
+++ b/static/js/publisher-pages/utils/getSettingsData.ts
@@ -1,4 +1,4 @@
-import type { SettingsData } from "../types/SettingsData";
+import type { SettingsData } from "../types";
 
 function getCountryKeysStatus(settingsData: SettingsData) {
   if (settingsData?.blacklist_country_keys) {
diff --git a/static/js/publisher/settings/utils/index.ts b/static/js/publisher-pages/utils/index.ts
similarity index 100%
rename from static/js/publisher/settings/utils/index.ts
rename to static/js/publisher-pages/utils/index.ts
diff --git a/static/js/publisher/settings/components/App/index.ts b/static/js/publisher/settings/components/App/index.ts
deleted file mode 100644
index 8ce017e646..0000000000
--- a/static/js/publisher/settings/components/App/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./App";
diff --git a/static/js/publisher/settings/index.tsx b/static/js/publisher/settings/index.tsx
deleted file mode 100644
index f74d8125c0..0000000000
--- a/static/js/publisher/settings/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createRoot } from "react-dom/client";
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
-import App from "./components/App";
-
-Sentry.init({
-  dsn: window.SENTRY_DSN,
-  integrations: [new Integrations.BrowserTracing()],
-  tracesSampleRate: 1.0,
-});
-
-const container = document.getElementById("main-content");
-const root = createRoot(container as HTMLElement);
-root.render(<App />);
diff --git a/static/js/publisher/settings/types/index.d.ts b/static/js/publisher/settings/types/index.d.ts
deleted file mode 100644
index f62ece5ae4..0000000000
--- a/static/js/publisher/settings/types/index.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Empty export to mark this file as a module.
-// This is required to augment global scope.
-export {};
-
-declare global {
-  interface Window {
-    SENTRY_DSN: string;
-    CSRF_TOKEN: string;
-    settingsData: any;
-    countries: Array<{ key: string; name: string }>;
-  }
-}
diff --git a/templates/publisher/settings.html b/templates/publisher/settings.html
deleted file mode 100644
index edeff1d917..0000000000
--- a/templates/publisher/settings.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Settings for {% if display_title %}{{ display_title }}{% else %}{{ snap_title }}{% endif %}
-{% endblock %}
-
-{% block content %}
-<main id="main-content"></main>
-<script>
-  window.SENTRY_DSN = "{{ SENTRY_DSN }}";
-  window.CSRF_TOKEN = "{{ csrf_token() }}";
-  window.countries = {{ countries|tojson }};
-  window.settingsData = {
-    publisher_name: "{{ publisher_name }}",
-    snap_title: "{{ snap_title }}",
-    snap_name: "{{ snap_name }}",
-    snap_id: "{{ snap_id }}",
-    store: "{{ store }}",
-    status: "{{ status }}",
-    update_metadata_on_release: {{ update_metadata_on_release|tojson }},
-    private: {{ private|tojson }},
-    unlisted: {{ unlisted|tojson }},
-    whitelist_countries: {{ whitelist_country_codes|tojson }},
-    blacklist_countries: {{ blacklist_country_codes|tojson }},
-    visibility_locked: {{ visibility_locked|default(false)|tojson }},
-  };
-</script>
-<script src="{{ static_url('js/dist/publisher-settings.js') }}"></script>
-{% endblock %}
-
-
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
index 68c4fd4e28..95b7c4c29a 100644
--- a/templates/store/publisher.html
+++ b/templates/store/publisher.html
@@ -4,12 +4,30 @@
 <div id="root">
 </div>
 <script>
+  window.CSRF_TOKEN = "{{ csrf_token() }}";
+  
   window.SNAP_PUBLICISE_DATA = {
     hasScreenshot: {% if has_screenshot %}{{ has_screenshot | tojson }}{% else %}false{% endif %},
     isReleased: {% if is_released %}{{ is_released | tojson }}{% else %}false{% endif %},
     private: {% if private %}{{ private | tojson }}{% else %}false{% endif %},
     trending: {% if trending %}{{ trending | tojson }}{% else %}false{% endif %},
   }
+
+  window.SNAP_SETTINGS_DATA = {
+    countries: {% if countries %}{{ countries|tojson }}{% else %}[]{% endif %},
+    publisher_name: "{% if publisher_name %}{{ publisher_name }}{% endif %}",
+    snap_title: "{% if snap_title %}{{ snap_title }}{% endif %}",
+    snap_name: "{% if snap_name %}{{ snap_name }}{% endif %}",
+    snap_id: "{% if snap_id %}{{ snap_id }}{% endif %}",
+    store: "{% if store %}{{ store }}{% endif %}",
+    status: "{% if status %}{{ status }}{% endif %}",
+    update_metadata_on_release: {% if update_metadata_on_release %}{{ update_metadata_on_release|tojson }}{% else %}false{% endif %},
+    private: {% if private %}{{ private|tojson }}{% else %}false{% endif %},
+    unlisted: {% if unlisted %}{{ unlisted|tojson }}{% else %}false{% endif %},
+    whitelist_countries: {% if whitelist_country_codes %}{{ whitelist_country_codes|tojson }}{% else %}[]{% endif %},
+    blacklist_countries: {% if blacklist_country_codes %}{{ blacklist_country_codes|tojson }}{% else %}[]{% endif %},
+    visibility_locked: {% if visibility_locked %}{{ visibility_locked|tojson }}{% else %}false{% endif %},
+  }
 </script>
 <script src="{{ static_url('js/dist/publisher-pages.js') }}"></script>
 {% endblock %}
diff --git a/tests/publisher/snaps/tests_post_settings.py b/tests/publisher/snaps/tests_post_settings.py
index a81cf379e6..3725ee1aa4 100644
--- a/tests/publisher/snaps/tests_post_settings.py
+++ b/tests/publisher/snaps/tests_post_settings.py
@@ -153,7 +153,7 @@ def test_return_error_update_one_field(self):
         )
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/settings.html")
+        self.assert_template_used("store/publisher.html")
 
         self.assert_context("snap_id", self.snap_id)
         self.assert_context("snap_title", "test snap")
@@ -232,7 +232,7 @@ def test_return_error_udpate_all_field(self):
         )
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/settings.html")
+        self.assert_template_used("store/publisher.html")
 
         # Not updatable fields
         self.assert_context("snap_id", self.snap_id)
@@ -321,6 +321,6 @@ def test_return_error_invalid_field(self):
         )
 
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/settings.html")
+        self.assert_template_used("store/publisher.html")
 
         self.assert_context("field_errors", {"description": "error message"})
diff --git a/tests/publisher/snaps/tests_settings.py b/tests/publisher/snaps/tests_settings.py
index ddac96441b..7149e4826f 100644
--- a/tests/publisher/snaps/tests_settings.py
+++ b/tests/publisher/snaps/tests_settings.py
@@ -88,7 +88,7 @@ def test_account_logged_in(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/settings.html")
+        self.assert_template_used("store/publisher.html")
 
         self.assert_context("snap_id", "id")
         self.assert_context("snap_title", "test snap")
diff --git a/webapp/publisher/snaps/settings_views.py b/webapp/publisher/snaps/settings_views.py
index 7b1bba629a..59cd8d999c 100644
--- a/webapp/publisher/snaps/settings_views.py
+++ b/webapp/publisher/snaps/settings_views.py
@@ -77,7 +77,7 @@ def get_settings(snap_name, return_json=False):
     if return_json:
         return flask.jsonify(context)
 
-    return flask.render_template("publisher/settings.html", **context)
+    return flask.render_template("store/publisher.html", **context)
 
 
 @login_required
@@ -187,6 +187,6 @@ def post_settings(snap_name, return_json=False):
             if return_json:
                 return flask.jsonify(context)
 
-            return flask.render_template("publisher/settings.html", **context)
+            return flask.render_template("store/publisher.html", **context)
 
     return flask.redirect(flask.url_for(".get_settings", snap_name=snap_name))
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
index d2a0e3722c..50179b267f 100644
--- a/webpack.config.entry.js
+++ b/webpack.config.entry.js
@@ -18,7 +18,6 @@ module.exports = {
   "publisher-details": "./static/js/public/publisher-details.ts",
   "brand-store": "./static/js/brand-store/brand-store.tsx",
   "publisher-listing": "./static/js/publisher/listing/index.tsx",
-  "publisher-settings": "./static/js/publisher/settings/index.tsx",
   "about-listing": "./static/js/public/about/listing.ts",
   store: "./static/js/store/index.tsx",
   "publisher-pages": "./static/js/publisher-pages/index.tsx",

From fbb281a484dccfcb29c58283e74d95a5d721f84c Mon Sep 17 00:00:00 2001
From: ilayda-cp <ilayda.cavusoglupars@canonical.com>
Date: Fri, 20 Sep 2024 12:59:35 +0300
Subject: [PATCH 03/24] Wd 14634 metrics page (#4851)

* feat: migrate metrics page to react
---
 .../__tests__/useActiveDeviceMetrics.test.ts  |  17 +
 .../hooks/__tests__/useCountryMetrics.test.ts |  11 +
 .../__tests__/useMetricsAnnotation.test.ts    |  11 +
 .../hooks/useActiveDeviceMetrics.ts           |  40 ++
 .../hooks/useCountryMetrics.ts                |  27 +
 .../hooks/useMetricsAnnotation.ts             |  22 +
 static/js/publisher-pages/index.tsx           |   5 +
 .../pages/Metrics/ActiveDeviceAnnotation.tsx  |  53 ++
 .../Metrics/ActiveDeviceMetricFilter.tsx      |  72 ++
 .../pages/Metrics/ActiveDeviceMetrics.tsx     | 118 +++
 .../publisher-pages/pages/Metrics/Metrics.tsx |  58 ++
 .../pages/Metrics/TerritoryMetrics.tsx        |  84 +++
 .../__tests__/ActiveDeviceAnnotation.test.tsx | 110 +++
 .../__tests__/ActiveDeviceMetrics.test.tsx    | 225 ++++++
 .../__tests__/TerritoryMetrics.test.tsx       | 118 +++
 .../js/publisher-pages/pages/Metrics/index.ts |   1 +
 .../graphs/activeDevicesGraph/index.ts        |   5 -
 static/js/publisher/metrics/metrics.ts        |  41 +-
 templates/publisher/metrics.html              | 127 +---
 tests/publisher/snaps/tests_get_metrics.py    | 672 +++++++-----------
 webapp/metrics/helper.py                      |  24 +-
 webapp/publisher/snaps/metrics_views.py       | 135 ++--
 webapp/publisher/snaps/views.py               |  15 +
 webpack.config.entry.js                       |   1 +
 24 files changed, 1377 insertions(+), 615 deletions(-)
 create mode 100644 static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
 create mode 100644 static/js/publisher-pages/hooks/__tests__/useCountryMetrics.test.ts
 create mode 100644 static/js/publisher-pages/hooks/__tests__/useMetricsAnnotation.test.ts
 create mode 100644 static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
 create mode 100644 static/js/publisher-pages/hooks/useCountryMetrics.ts
 create mode 100644 static/js/publisher-pages/hooks/useMetricsAnnotation.ts
 create mode 100644 static/js/publisher-pages/pages/Metrics/ActiveDeviceAnnotation.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/ActiveDeviceMetricFilter.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/Metrics.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
 create mode 100644 static/js/publisher-pages/pages/Metrics/index.ts

diff --git a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
new file mode 100644
index 0000000000..0f4a6587ae
--- /dev/null
+++ b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
@@ -0,0 +1,17 @@
+import * as ReactQuery from "react-query";
+import { renderHook } from "@testing-library/react";
+import useActiveDeviceMetrics from "../useActiveDeviceMetrics";
+
+describe("useActiveDeviceMetrics", () => {
+  test("Calls useQuery", () => {
+    jest.spyOn(ReactQuery, "useQuery").mockImplementation(jest.fn());
+    renderHook(() =>
+      useActiveDeviceMetrics({
+        period: "30d",
+        snapId: "test-id",
+        type: "version",
+      })
+    );
+    expect(ReactQuery.useQuery).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher-pages/hooks/__tests__/useCountryMetrics.test.ts b/static/js/publisher-pages/hooks/__tests__/useCountryMetrics.test.ts
new file mode 100644
index 0000000000..f120d43381
--- /dev/null
+++ b/static/js/publisher-pages/hooks/__tests__/useCountryMetrics.test.ts
@@ -0,0 +1,11 @@
+import * as ReactQuery from "react-query";
+import { renderHook } from "@testing-library/react";
+import useCountryMetrics from "../useCountryMetrics";
+
+describe("useCountryMetrics", () => {
+  test("Calls useQuery", () => {
+    jest.spyOn(ReactQuery, "useQuery").mockImplementation(jest.fn());
+    renderHook(() => useCountryMetrics("test-id"));
+    expect(ReactQuery.useQuery).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher-pages/hooks/__tests__/useMetricsAnnotation.test.ts b/static/js/publisher-pages/hooks/__tests__/useMetricsAnnotation.test.ts
new file mode 100644
index 0000000000..d2c48ba108
--- /dev/null
+++ b/static/js/publisher-pages/hooks/__tests__/useMetricsAnnotation.test.ts
@@ -0,0 +1,11 @@
+import * as ReactQuery from "react-query";
+import { renderHook } from "@testing-library/react";
+import useMetricsAnnotation from "../useMetricsAnnotation";
+
+describe("useMetricsAnnotation", () => {
+  test("Calls useQuery", () => {
+    jest.spyOn(ReactQuery, "useQuery").mockImplementation(jest.fn());
+    renderHook(() => useMetricsAnnotation("test-id"));
+    expect(ReactQuery.useQuery).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
new file mode 100644
index 0000000000..3bac68434e
--- /dev/null
+++ b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
@@ -0,0 +1,40 @@
+import { useQuery } from "react-query";
+
+function useActiveDeviceMetrics({
+  snapId,
+  period,
+  type,
+}: {
+  snapId: string | undefined;
+  period: string;
+  type: string;
+}) {
+  return useQuery({
+    queryKey: ["activeDeviceMetrics", snapId, period, type],
+    queryFn: async () => {
+      const response = await fetch(
+        `/${snapId}/metrics/active-devices?period=${period}&active-devices=${type}`
+      );
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          return {
+            latest_active_devices: 0,
+            active_devices: {
+              series: [],
+              buckets: [],
+            },
+          };
+        } else {
+          throw new Error("Unable to fetch active device metrics");
+        }
+      }
+
+      return await response.json();
+    },
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export default useActiveDeviceMetrics;
diff --git a/static/js/publisher-pages/hooks/useCountryMetrics.ts b/static/js/publisher-pages/hooks/useCountryMetrics.ts
new file mode 100644
index 0000000000..2449d08863
--- /dev/null
+++ b/static/js/publisher-pages/hooks/useCountryMetrics.ts
@@ -0,0 +1,27 @@
+import { useQuery } from "react-query";
+
+function useCountryMetrics(snapId: string | undefined) {
+  return useQuery({
+    queryKey: ["countryMetrics", snapId],
+    queryFn: async () => {
+      const response = await fetch(`/${snapId}/metrics/country-metric`);
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          return {
+            territories_total: 0,
+            active_devices: {},
+          };
+        } else {
+          throw new Error("Unable to fetch country metrics");
+        }
+      }
+
+      return await response.json();
+    },
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export default useCountryMetrics;
diff --git a/static/js/publisher-pages/hooks/useMetricsAnnotation.ts b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
new file mode 100644
index 0000000000..3e82ff575d
--- /dev/null
+++ b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
@@ -0,0 +1,22 @@
+import { useQuery } from "react-query";
+
+function useMetricsAnnotation(snapId?: string) {
+  return useQuery({
+    queryKey: ["annotationMetrics", snapId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/${snapId}/metrics/active-device-annotation`
+      );
+
+      if (!response.ok) {
+        throw new Error("Unable to fetch active device annotations");
+      }
+
+      const data = await response.json();
+
+      return data;
+    },
+  });
+}
+
+export default useMetricsAnnotation;
diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index c8b1990899..a38925af53 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -7,6 +7,7 @@ import Publicise from "./pages/Publicise";
 import Settings from "./pages/Settings";
 import ValidationSets from "./pages/ValidationSets";
 import ValidationSet from "./pages/ValidationSet";
+import Metrics from "./pages/Metrics";
 
 const router = createBrowserRouter([
   {
@@ -37,6 +38,10 @@ const router = createBrowserRouter([
         path: "/validation-sets/:validationSetId",
         element: <ValidationSet />,
       },
+      {
+        path: "/:snapId/metrics",
+        element: <Metrics />,
+      },
     ],
   },
 ]);
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceAnnotation.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceAnnotation.tsx
new file mode 100644
index 0000000000..f21169df87
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceAnnotation.tsx
@@ -0,0 +1,53 @@
+import { Row, Col } from "@canonical/react-components";
+import useMetricsAnnotation from "../../hooks/useMetricsAnnotation";
+
+interface IActiveDeviceAnnotation {
+  buckets: string[];
+  name: string;
+  series: Array<{
+    date: string;
+    display_date: string;
+    display_name: string;
+    name: string;
+    values: number[];
+  }>;
+}
+
+function ActiveDeviceAnnotation({ snapId }: { snapId?: string }): JSX.Element {
+  const { data: annotation }: { data: IActiveDeviceAnnotation | undefined } =
+    useMetricsAnnotation(snapId);
+
+  return (
+    <Row data-js="annotations-hover">
+      {annotation
+        ? annotation.series.map((category) => (
+            <Col size={4} key={category.name}>
+              <p
+                data-js="annotation-hover"
+                data-id={`category-${category.name}`}
+              >
+                {category.name == "featured" ? (
+                  <>
+                    ⭐{" "}
+                    <small>
+                      <b>Featured</b> snap since <b>{category.display_date}</b>
+                    </small>
+                  </>
+                ) : (
+                  <>
+                    🗂{" "}
+                    <small>
+                      Added to <b>{category.display_name}</b> in{" "}
+                      <b>{category.display_date}</b>
+                    </small>
+                  </>
+                )}
+              </p>
+            </Col>
+          ))
+        : null}
+    </Row>
+  );
+}
+
+export default ActiveDeviceAnnotation;
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetricFilter.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetricFilter.tsx
new file mode 100644
index 0000000000..54c6a89c42
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetricFilter.tsx
@@ -0,0 +1,72 @@
+import { Col, Select } from "@canonical/react-components";
+
+interface IActiveDeviceMetricFilterProps {
+  isEmpty: boolean;
+  period: string;
+  type: string;
+  onChange: (field: string, value: string) => void;
+}
+
+export const ActiveDeviceMetricFilter = ({
+  isEmpty,
+  onChange,
+  period,
+  type,
+}: IActiveDeviceMetricFilterProps) => {
+  return (
+    <>
+      <Col size={3} key="periodFilter">
+        <Select
+          className="p-form__control"
+          disabled={isEmpty}
+          value={period}
+          onChange={(event) => onChange("period", event.target.value)}
+          options={[
+            {
+              label: "Past 7 days",
+              value: "7d",
+            },
+            {
+              label: "Past 30 days",
+              value: "30d",
+            },
+            {
+              label: "Past 3 months",
+              value: "3m",
+            },
+            {
+              label: "Past 6 months",
+              value: "6m",
+            },
+            {
+              label: "Past year",
+              value: "1y",
+            },
+            {
+              label: "Past 2 years",
+              value: "2y",
+            },
+            {
+              label: "Past 5 years",
+              value: "5y",
+            },
+          ]}
+        />
+      </Col>
+      <Col size={3} key="typeFilter">
+        <Select
+          className="p-form__control"
+          disabled={isEmpty}
+          value={type}
+          onChange={(event) => onChange("active-devices", event.target.value)}
+          options={[
+            { label: "By version", value: "version" },
+            { label: "By OS", value: "os" },
+            { label: "By channel", value: "channel" },
+            { label: "By architecture", value: "architecture" },
+          ]}
+        />
+      </Col>
+    </>
+  );
+};
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
new file mode 100644
index 0000000000..9067f18c13
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
@@ -0,0 +1,118 @@
+import { useParams, useSearchParams } from "react-router-dom";
+import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
+
+import { useEffect, useState } from "react";
+import { renderActiveDevicesMetrics } from "../../../publisher/metrics/metrics";
+import { select } from "d3-selection";
+import ActiveDeviceAnnotation from "./ActiveDeviceAnnotation";
+import { ActiveDeviceMetricFilter } from "./ActiveDeviceMetricFilter";
+import useActiveDeviceMetrics from "../../hooks/useActiveDeviceMetrics";
+
+function ActiveDeviceMetrics({
+  isEmpty,
+  onDataLoad,
+}: {
+  isEmpty: boolean;
+  onDataLoad: (dataLength: number | undefined) => void;
+}): JSX.Element {
+  const { snapId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [latestActiveDevices, setLatestActiveDevices] = useState<string | null>(
+    null
+  );
+
+  const period = searchParams.get("period") ?? "30d";
+  const type = searchParams.get("active-devices") ?? "version";
+  const selector = "#activeDevices";
+
+  const { status, data, isFetching } = useActiveDeviceMetrics({
+    snapId,
+    period,
+    type,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const activeDevices = data.latest_active_devices;
+      activeDevices &&
+        setLatestActiveDevices(
+          String(activeDevices).replace(/(.)(?=(\d{3})+$)/g, "$1,")
+        );
+
+      data.active_devices &&
+        renderActiveDevicesMetrics({
+          selector,
+          metrics: data.active_devices,
+          type,
+        });
+      onDataLoad(data.active_devices?.buckets?.length);
+    }
+  }, [data]);
+
+  const onChange = (key: string, value: string) => {
+    // clear the chart
+    const svg = select(`${selector} svg`);
+    svg.selectAll("*").remove();
+
+    setSearchParams((searchParams) => {
+      searchParams.set(key, value);
+      return searchParams;
+    });
+  };
+
+  return (
+    <section className={`p-strip is-shallow ${isEmpty ? "is-empty" : ""}`}>
+      <Row>
+        <Col size={12} key="activeServices">
+          <h4 className="u-float-left">Weekly active devices</h4>
+          <div className="p-heading--4 u-float-right u-no-margin--top">
+            <strong>{latestActiveDevices}</strong>
+          </div>
+        </Col>
+        <Col size={12} key="spearator">
+          <hr />
+        </Col>
+        {isFetching ? (
+          <Spinner />
+        ) : (
+          <>
+            <ActiveDeviceMetricFilter
+              isEmpty={isEmpty}
+              onChange={onChange}
+              period={period}
+              type={type}
+            />
+            {isEmpty && <div>No data found.</div>}
+            {status === "error" && (
+              <CodeSnippet
+                blocks={[
+                  {
+                    code: <div>An error occurred. Please try again.</div>,
+                    wrapLines: true,
+                  },
+                ]}
+              />
+            )}
+          </>
+        )}
+
+        <Col size={12} key="info">
+          <div>
+            <div
+              id="activeDevices"
+              className="snapcraft-metrics__graph snapcraft-metrics__active-devices"
+            >
+              <div id="area-holder">
+                <svg width="100%" height="320"></svg>
+              </div>
+            </div>
+
+            <ActiveDeviceAnnotation snapId={snapId} />
+          </div>
+        </Col>
+      </Row>
+    </section>
+  );
+}
+
+export default ActiveDeviceMetrics;
diff --git a/static/js/publisher-pages/pages/Metrics/Metrics.tsx b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
new file mode 100644
index 0000000000..c4ba0a9db6
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
@@ -0,0 +1,58 @@
+import { useParams, useSearchParams } from "react-router-dom";
+import { Row, Col } from "@canonical/react-components";
+
+import SectionNav from "../../components/SectionNav";
+import ActiveDeviceMetrics from "./ActiveDeviceMetrics";
+import { TerritoryMetrics } from "./TerritoryMetrics";
+import { useState } from "react";
+
+const EmptyData = () => {
+  return (
+    <section className="p-strip--light is-shallow">
+      <Row>
+        <Col size={6}>
+          <h2 className="p-heading--4" style={{ marginLeft: "1.5rem" }}>
+            Measure your snap's performance
+          </h2>
+        </Col>
+        <Col size={6}>
+          <p>
+            You'll be able to see active devices and territories when people
+            start using your snap.
+          </p>
+        </Col>
+      </Row>
+    </section>
+  );
+};
+
+function Metrics(): JSX.Element {
+  const { snapId } = useParams();
+
+  const [isActiveDeviceMetricEmpty, setIsActiveDeviceMetricEmpty] = useState<
+    boolean | null
+  >(null);
+  const [isCountryMetricEmpty, setIsCountryMetricEmpty] = useState<
+    boolean | null
+  >(null);
+  const isEmpty =
+    Boolean(isActiveDeviceMetricEmpty) && Boolean(isCountryMetricEmpty);
+
+  return (
+    <>
+      <SectionNav snapName={snapId} activeTab="metrics" />
+      {isEmpty && <EmptyData />}
+
+      <ActiveDeviceMetrics
+        isEmpty={isEmpty}
+        onDataLoad={(dataLength) => setIsActiveDeviceMetricEmpty(!dataLength)}
+      />
+      <TerritoryMetrics
+        isEmpty={isEmpty}
+        onDataLoad={(dataLength) => setIsCountryMetricEmpty(!dataLength)}
+      />
+    </>
+  );
+}
+
+export default Metrics;
diff --git a/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
new file mode 100644
index 0000000000..2f5b1562d0
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
@@ -0,0 +1,84 @@
+import { useParams, useSearchParams } from "react-router-dom";
+import {
+  Row,
+  Col,
+  Select,
+  Spinner,
+  CodeSnippet,
+} from "@canonical/react-components";
+
+import { useEffect } from "react";
+import { renderTerritoriesMetrics } from "../../../publisher/metrics/metrics";
+import useCountryMetrics from "../../hooks/useCountryMetrics";
+
+export const TerritoryMetrics = ({
+  isEmpty,
+  onDataLoad,
+}: {
+  isEmpty: boolean;
+  onDataLoad: (dataLength: number | undefined) => void;
+}): JSX.Element => {
+  const { snapId } = useParams();
+  const {
+    status,
+    data: countryInfo,
+    isFetching,
+  }: {
+    status: string;
+    data:
+      | {
+          active_devices: any;
+          territories_total: number;
+        }
+      | undefined;
+    isFetching: boolean;
+  } = useCountryMetrics(snapId);
+
+  useEffect(() => {
+    if (countryInfo) {
+      countryInfo.active_devices &&
+        renderTerritoriesMetrics({
+          selector: "#territories",
+          metrics: countryInfo.active_devices,
+        });
+      onDataLoad(countryInfo.active_devices?.length);
+    }
+  }, [countryInfo]);
+
+  return (
+    <section className={`p-strip is-shallow ${isEmpty ? "is-empty" : ""}`}>
+      <Row>
+        <Col size={12} key="activeServices">
+          <h1 className="u-float-left p-heading--4">Territories</h1>
+          <div className="p-heading--4 u-float-right u-no-margin--top">
+            <strong>{countryInfo?.territories_total}</strong>
+          </div>
+        </Col>
+        <Col size={12} key="territoriesSeparator">
+          <hr />
+        </Col>
+        {isFetching ? (
+          <Spinner />
+        ) : (
+          <>
+            {isEmpty && <div>No data found.</div>}
+            {status === "error" && (
+              <CodeSnippet
+                blocks={[
+                  {
+                    code: <div>An error occurred. Please try again.</div>,
+                    wrapLines: true,
+                  },
+                ]}
+              />
+            )}
+          </>
+        )}
+
+        <Col size={12} key="territories">
+          <div id="territories" className="snapcraft-territories"></div>
+        </Col>
+      </Row>
+    </section>
+  );
+};
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
new file mode 100644
index 0000000000..e1d5960ff7
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
@@ -0,0 +1,110 @@
+import { BrowserRouter } from "react-router-dom";
+import { render, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+
+import ActiveDeviceAnnotation from "../ActiveDeviceAnnotation";
+
+const queryClient = new QueryClient();
+
+const renderComponent = () => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <ActiveDeviceAnnotation snapId="test" />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+};
+
+const mockMetricsAnnotation = {
+  buckets: ["2019-02-08", "2024-07-01", "2019-01-24"],
+  name: "annotations",
+  series: [
+    {
+      date: "2019-01-24",
+      display_date: "January 2019",
+      display_name: "Server and cloud",
+      name: "server-and-cloud",
+      values: [0, 0, 1],
+    },
+    {
+      date: "2019-02-08",
+      display_date: "February 2019",
+      display_name: "Development",
+      name: "development",
+      values: [1, 0, 0],
+    },
+    {
+      date: "2024-07-01",
+      display_date: "July 2024",
+      display_name: "Featured",
+      name: "featured",
+      values: [0, 1, 0],
+    },
+  ],
+};
+
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+describe("ActiveDeviceAnnotation", () => {
+  test("renders the information correctly", async () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      status: "success",
+      data: mockMetricsAnnotation,
+    });
+
+    const { container } = renderComponent();
+
+    await waitFor(() => {
+      const serverAndCloudElement = container.querySelector(
+        '[data-id="category-server-and-cloud"]'
+      );
+      expect(serverAndCloudElement).toBeInTheDocument();
+      expect(serverAndCloudElement).toHaveTextContent(
+        "Added to Server and cloud in January 2019"
+      );
+
+      const categoryDevelopmentElement = container.querySelector(
+        '[data-id="category-development"]'
+      );
+      expect(categoryDevelopmentElement).toBeInTheDocument();
+      expect(categoryDevelopmentElement).toHaveTextContent(
+        "Added to Development in February 2019"
+      );
+
+      const categoryFeaturedElement = container.querySelector(
+        '[data-id="category-featured"]'
+      );
+      expect(categoryFeaturedElement).toBeInTheDocument();
+      expect(categoryFeaturedElement).toHaveTextContent(
+        "Featured snap since July 2024"
+      );
+    });
+  });
+
+  test("renders empty annotations if the data is returned empty", async () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      status: "success",
+      data: {
+        buckets: [],
+        name: "annotations",
+        series: [],
+      },
+    });
+
+    const { container } = renderComponent();
+
+    await waitFor(() => {
+      const serverAndCloudElement = container.querySelector(
+        '[data-id="category-server-and-cloud"]'
+      );
+      expect(serverAndCloudElement).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
new file mode 100644
index 0000000000..c000b7984e
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
@@ -0,0 +1,225 @@
+import { BrowserRouter, useSearchParams } from "react-router-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+import * as MetricsRenderMethods from "../../../../publisher/metrics/metrics";
+
+import ActiveDeviceMetrics from "../ActiveDeviceMetrics";
+
+const queryClient = new QueryClient();
+
+const renderComponent = (isEmpty: boolean) => {
+  const mock = jest.spyOn(MetricsRenderMethods, "renderActiveDevicesMetrics");
+  mock.mockImplementation(jest.fn());
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <ActiveDeviceMetrics isEmpty={isEmpty} onDataLoad={jest.fn()} />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+};
+
+const mockActiveDeviceMetrics = {
+  active_devices: {
+    buckets: [
+      "2024-08-19",
+      "2024-08-20",
+      "2024-08-21",
+      "2024-08-22",
+      "2024-08-23",
+      "2024-08-24",
+      "2024-08-25",
+      "2024-08-26",
+      "2024-08-27",
+      "2024-08-28",
+      "2024-08-29",
+      "2024-08-30",
+      "2024-08-31",
+      "2024-09-01",
+      "2024-09-02",
+      "2024-09-03",
+      "2024-09-04",
+      "2024-09-05",
+      "2024-09-06",
+      "2024-09-07",
+      "2024-09-08",
+      "2024-09-09",
+      "2024-09-10",
+      "2024-09-11",
+      "2024-09-12",
+      "2024-09-13",
+      "2024-09-14",
+      "2024-09-15",
+      "2024-09-16",
+      "2024-09-17",
+      "2024-09-18",
+    ],
+    name: "weekly_installed_base_by_version",
+    series: [
+      {
+        name: "1.0",
+        values: [
+          9, 9, 8, 8, 9, 8, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5,
+          5, 6, 6, 5, 5, 5, 5, 5,
+        ],
+      },
+    ],
+  },
+  latest_active_devices: 5,
+};
+
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useSearchParams: jest.fn(),
+}));
+
+describe("ActiveDeviceMetrics", () => {
+  beforeEach(() => {
+    // @ts-ignore
+    useSearchParams.mockReturnValue([new URLSearchParams()]);
+  });
+
+  test("renders the information correctly", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation((params) => {
+      if (params) {
+        if (params.queryKey[0] === "activeDeviceMetrics") {
+          return {
+            status: "success",
+            data: mockActiveDeviceMetrics,
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              buckets: [],
+              name: "annotations",
+              series: [],
+            },
+          };
+        }
+      }
+      return {
+        status: "success",
+        data: {},
+      };
+    });
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(screen.getByText("Weekly active devices")).toBeInTheDocument();
+      expect(screen.getByText("5")).toBeInTheDocument();
+      expect(screen.getByText("Past 30 days")).toBeInTheDocument();
+      expect(screen.getByText("By version")).toBeInTheDocument();
+    });
+  });
+
+  test("renders the error state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation((params) => {
+      if (params) {
+        if (params.queryKey[0] === "activeDeviceMetrics") {
+          return {
+            status: "error",
+            data: undefined,
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              buckets: [],
+              name: "annotations",
+              series: [],
+            },
+          };
+        }
+      }
+      return {
+        status: "success",
+        data: {},
+      };
+    });
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("An error occurred. Please try again.")
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("renders the loading state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation((params) => {
+      if (params) {
+        if (params.queryKey[0] === "activeDeviceMetrics") {
+          return {
+            isFetching: true,
+            data: undefined,
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              buckets: [],
+              name: "annotations",
+              series: [],
+            },
+          };
+        }
+      }
+      return {
+        status: "success",
+        data: {},
+      };
+    });
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(screen.getByText("Loading")).toBeInTheDocument();
+    });
+  });
+
+  test("renders the empty state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation((params) => {
+      if (params) {
+        if (params.queryKey[0] === "activeDeviceMetrics") {
+          return {
+            status: "success",
+            data: undefined,
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              buckets: [],
+              name: "annotations",
+              series: [],
+            },
+          };
+        }
+      }
+      return {
+        status: "success",
+        data: {},
+      };
+    });
+
+    renderComponent(true);
+
+    await waitFor(() => {
+      expect(screen.getByText("No data found.")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
new file mode 100644
index 0000000000..466f4231ed
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
@@ -0,0 +1,118 @@
+import { BrowserRouter, useSearchParams } from "react-router-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+import * as MetricsRenderMethods from "../../../../publisher/metrics/metrics";
+
+import { TerritoryMetrics } from "../TerritoryMetrics";
+
+const queryClient = new QueryClient();
+
+const renderComponent = (isEmpty: boolean) => {
+  const mock = jest.spyOn(MetricsRenderMethods, "renderTerritoriesMetrics");
+  mock.mockImplementation(jest.fn());
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <TerritoryMetrics isEmpty={isEmpty} onDataLoad={jest.fn()} />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+};
+
+const mockTerritoryMetrics = {
+  active_devices: {
+    "528": {
+      code: "NL",
+      color_rgb: [8, 48, 107],
+      name: "Netherlands",
+      number_of_users: 1,
+      percentage_of_users: 1,
+    },
+    "826": {
+      code: "GB",
+      color_rgb: [8, 48, 107],
+      name: "United Kingdom",
+      number_of_users: 4,
+      percentage_of_users: 4,
+    },
+  },
+  territories_total: 5,
+};
+
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useSearchParams: jest.fn(),
+}));
+
+describe("ActiveDeviceMetrics", () => {
+  beforeEach(() => {
+    // @ts-ignore
+    useSearchParams.mockReturnValue([new URLSearchParams()]);
+  });
+
+  test("renders the information correctly", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation(() => ({
+      status: "success",
+      data: mockTerritoryMetrics,
+    }));
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(screen.getByText("Territories")).toBeInTheDocument();
+      expect(screen.getByText("5")).toBeInTheDocument();
+    });
+  });
+
+  test("renders the error state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation(() => ({
+      status: "error",
+      data: undefined,
+    }));
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("An error occurred. Please try again.")
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("renders the loading state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation(() => ({
+      isFetching: true,
+      data: undefined,
+    }));
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(screen.getByText("Loading")).toBeInTheDocument();
+    });
+  });
+
+  test("renders the empty state", async () => {
+    // @ts-ignore
+    useQuery.mockImplementation(() => ({
+      status: "success",
+      data: undefined,
+    }));
+
+    renderComponent(true);
+
+    await waitFor(() => {
+      expect(screen.getByText("No data found.")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/static/js/publisher-pages/pages/Metrics/index.ts b/static/js/publisher-pages/pages/Metrics/index.ts
new file mode 100644
index 0000000000..36f909fdc2
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/index.ts
@@ -0,0 +1 @@
+export { default } from "./Metrics";
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts b/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
index 0d7702b84b..bb122a7bfb 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
+++ b/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
@@ -57,7 +57,6 @@ class ActiveDevicesGraph {
     this.g = undefined;
 
     this.transformedData = undefined;
-    this.annotationsData = undefined;
     this.data = undefined;
     this.keys = undefined;
     this.maxYValue = undefined;
@@ -138,10 +137,6 @@ class ActiveDevicesGraph {
 
     prepareScales.call(this);
 
-    if (this.options.annotations) {
-      prepareAnnotationsData.call(this);
-    }
-
     prepareAxis.call(this);
 
     return this;
diff --git a/static/js/publisher/metrics/metrics.ts b/static/js/publisher/metrics/metrics.ts
index 63fbc4b894..ed8b559aa9 100644
--- a/static/js/publisher/metrics/metrics.ts
+++ b/static/js/publisher/metrics/metrics.ts
@@ -7,33 +7,13 @@ type Series = {
   values: Array<number>;
 };
 
-type Metrics = {
-  activeDevices: {
-    annotations: {
-      buckets: Array<string>;
-      name: string;
-      series: Array<Series>;
-    };
-    metrics: {
-      buckets: Array<string>;
-      series: Array<Series>;
-    };
-    selector: string;
-    type: string;
-  };
-  defaultTrack: string;
-  territories: {
-    metrics: {
-      [key: string]: {
-        code: string;
-        color_rgb: string;
-        name: string;
-        number_of_users: number;
-        percentage_of_users: number;
-      };
-    };
-    selector: string;
+type ActiveDeviceMetric = {
+  metrics: {
+    buckets: Array<string>;
+    series: Array<Series>;
   };
+  selector: string;
+  type: string;
 };
 
 function renderMetrics(metrics: Metrics) {
@@ -42,7 +22,7 @@ function renderMetrics(metrics: Metrics) {
     buckets: Array<string>;
   } = {
     series: [],
-    buckets: metrics.activeDevices.metrics.buckets,
+    buckets: metrics.metrics.buckets,
   };
 
   metrics.activeDevices.metrics.series.forEach((series) => {
@@ -96,9 +76,10 @@ function renderMetrics(metrics: Metrics) {
       }
     });
   }
+}
 
-  // Territories
-  territoriesMetrics(metrics.territories.selector, metrics.territories.metrics);
+function renderTerritoriesMetrics(metrics: TerritoriesMetric) {
+  territoriesMetrics(metrics.selector, metrics.metrics);
 }
 
 /**
@@ -266,4 +247,4 @@ function renderPublisherMetrics(options: {
   getChunk(chunkedSnaps);
 }
 
-export { renderMetrics, renderPublisherMetrics };
+export { renderPublisherMetrics, renderTerritoriesMetrics };
diff --git a/templates/publisher/metrics.html b/templates/publisher/metrics.html
index d9d4bd37ec..355ac97773 100644
--- a/templates/publisher/metrics.html
+++ b/templates/publisher/metrics.html
@@ -1,123 +1,8 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Publisher metrics for {{ snap_title }}
-{% endblock %}
-
+{% set show_header = False %}
+{% extends "_base-layout.html" %}
 {% block content %}
-  <div id="main-content" class="u-no-margin--top">
-    {% set selected_tab='metrics' %}
-    {% include "publisher/_header.html" %}
-
-    {% if nodata %}
-      <section class="p-strip--light is-shallow">
-        <div class="row">
-          <div class="col-6">
-            <h2 class="p-heading--4">Measure your snap's performance</h2>
-          </div>
-          <div class="col-6">
-            <p>You'll be able to see active devices and territories when people start using your snap.</p>
-          </div>
-        </div>
-      </section>
-    {% endif %}
-    <section class="p-strip is-shallow{% if nodata %} is-empty{% endif %}">
-      <div class="row">
-        <div class="col-12">
-          <h4 class="u-float-left">Weekly active devices</h4>
-          <div class="p-heading--4 u-float-right u-no-margin--top">
-            <strong>{{ format_number(latest_active_devices) }}</strong>
-          </div>
-        </div>
-        <div class="col-12">
-          <hr />
-        </div>
-        <div class="col-3">
-          <select class="p-form__control metrics-period"
-                  {% if nodata %}disabled="disabled"{% endif %}>
-            <option value="7d"{% if metric_period == '7d' %} selected="selected"{% endif %}>Past 7 days</option>
-            <option value="30d"{% if metric_period == '30d' %} selected="selected"{% endif %}>Past 30 days</option>
-            <option value="3m"{% if metric_period == '3m' %} selected="selected"{% endif %}>Past 3 months</option>
-            <option value="6m"{% if metric_period == '6m' %} selected="selected"{% endif %}>Past 6 months</option>
-            <option value="1y"{% if metric_period == '1y' %} selected="selected"{% endif %}>Past year</option>
-            <option value="2y"{% if metric_period == '2y' %} selected="selected"{% endif %}>Past 2 years</option>
-            <option value="5y"{% if metric_period == '5y' %} selected="selected"{% endif %}>Past 5 years</option>
-          </select>
-        </div>
-        <div class="col-3">
-          <select class="p-form__control active-devices"
-                  {% if nodata %}disabled="disabled"{% endif %}>
-            <option value="version"{% if active_device_metric == 'version' %} selected="selected"{% endif %}>By version</option>
-            <option value="os"{% if active_device_metric == 'os' %} selected="selected"{% endif %}>By OS</option>
-            <option value="channel"{% if active_device_metric == 'channel' %} selected="selected"{% endif %}>By channel</option>
-            <option value="architecture"{% if active_device_metric == 'architecture' %} selected="selected"{% endif %}>By architecture</option>
-          </select>
-        </div>
-        <div class="col-12">
-          <div id="activeDevices" class="snapcraft-metrics__graph snapcraft-metrics__active-devices">
-            <div id="area-holder">
-              <svg width="100%" height="320"></svg>
-            </div>
-            <div class="row" data-js="annotations-hover">
-              {% for category in active_devices_annotations.series %}
-                <div class="col-4">
-                  <p data-js="annotation-hover" data-id="category-{{ category.name }}">
-                    {% if category.name == "featured" %}
-                    ⭐ <small><b>Featured</b> snap since
-                    {% else %}
-                    🗂 <small>Added to <b>{{ category.display_name }}</b> in {% endif %}<b>{{ category.display_date }}</b>
-                    </small>
-                </div>
-              {% endfor %}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="p-strip is-shallow{% if nodata %} is-empty{% endif %}">
-      <div class="row">
-        <div class="col-12">
-          <h1 class="u-float-left p-heading--4">Territories</h1>
-          <div class="p-heading--4 u-float-right u-no-margin--top">
-            <strong>{{ territories_total }}</strong>
-          </div>
-        </div>
-        <div class="col-12">
-          <hr />
-        </div>
-        <div class="col-12">
-          <div id="territories" class="snapcraft-territories">
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-{% endblock %}
-
-{% block scripts_includes %}
-  <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
+<div id="root">
+</div>
 
-{% block scripts %}
-  <script>
-    window.addEventListener("DOMContentLoaded", function() {
-      Raven.context(function () {
-        snapcraft.publisher.selector('.metrics-period', 'period');
-        snapcraft.publisher.selector('.active-devices', 'active-devices');
-        snapcraft.publisher.metrics.renderMetrics({
-          defaultTrack: {{ default_track|tojson }},
-          activeDevices: {
-            selector: '#activeDevices',
-            metrics: {{ active_devices|tojson }},
-            annotations: {{ active_devices_annotations|tojson }},
-            type: '{{ active_device_metric }}'
-          },
-          territories: {
-            selector: '#territories',
-            metrics: {{ territories|tojson }}
-          }
-        });
-      });
-    });
-  </script>
-{% endblock %}
+<script src="{{ static_url('js/dist/metrics.js') }}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/tests/publisher/snaps/tests_get_metrics.py b/tests/publisher/snaps/tests_get_metrics.py
index f04ac65012..9831502a54 100644
--- a/tests/publisher/snaps/tests_get_metrics.py
+++ b/tests/publisher/snaps/tests_get_metrics.py
@@ -1,5 +1,8 @@
 import random
 from datetime import datetime
+from flask_testing import TestCase
+from webapp.app import create_app
+from unittest.mock import patch
 
 import responses
 from tests.publisher.endpoint_testing import BaseTestCases
@@ -13,14 +16,15 @@ def setUp(self):
         super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
 
 
-class GetMetricsGetInfoPage(BaseTestCases.EndpointLoggedInErrorHandling):
+class GetActiveDeviceAnnotationGetInfo(
+    BaseTestCases.EndpointLoggedInErrorHandling
+):
     def setUp(self):
         snap_name = "test-snap"
 
         api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
         api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/metrics".format(snap_name)
-
+        endpoint_url = "/{}/metrics/active-device-annotation".format(snap_name)
         super().setUp(
             snap_name=snap_name,
             endpoint_url=endpoint_url,
@@ -30,500 +34,370 @@ def setUp(self):
         )
 
 
-class GetMetricsPostMetrics(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        self.snap_id = "complexId"
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        self.info_url = info_url.format(snap_name)
-
-        payload = {
-            "snap_id": "id",
-            "title": "Test Snap",
-            "private": False,
-            "categories": {
-                "items": [{"name": "test", "since": "2018-01-01T00:00:00"}]
-            },
-            "publisher": {"display-name": "test"},
-        }
-
-        responses.add(responses.GET, self.info_url, json=payload, status=200)
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/metrics"
-        endpoint_url = "/{}/metrics".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            api_url=api_url,
-            method_endpoint="GET",
-            method_api="POST",
-        )
-
-    @responses.activate
-    def test_no_data(self):
-        payload = {
-            "metrics": [
-                {
-                    "status": "NO DATA",
-                    "series": [],
-                    "buckets": [],
-                    "metric_name": "weekly_installed_base_by_version",
-                },
-                {
-                    "status": "NO DATA",
-                    "series": [],
-                    "buckets": [],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
-            ]
-        }
-
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
+class GetActiveDeviceMetrics(TestCase):
+    render_templates = False
 
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
+    snap_name = "test-snap"
+    endpoint_url = "/test-snap/metrics/active-devices"
 
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "30d")
-        self.assert_context("active_device_metric", "version")
-        self.assert_context("nodata", True)
+    def create_app(self):
+        app = create_app(testing=True)
+        app.secret_key = "secret_key"
+        app.config["WTF_CSRF_METHODS"] = []
+        return app
 
     @responses.activate
-    def test_data_version_1_year(self):
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapStore.get_item_details"
+    )
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_publisher_metrics"
+    )
+    def test_get_active_devices_weekly_installed_by_version(
+        self,
+        mock_get_publisher_metrics,
+        mock_get_item_details,
+        mock_is_authenticated,
+    ):
+        mock_is_authenticated.return_value = True
+
+        mock_get_item_details.return_value = {"snap-id": "id"}
         random_values = random.sample(range(1, 30), 29)
         dates = [
             datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 30)
         ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
+
+        mock_get_publisher_metrics.return_value = {
             "metrics": [
                 {
-                    "status": "OK",
-                    "series": [{"values": random_values, "name": "0.1"}],
                     "buckets": dates,
                     "metric_name": "weekly_installed_base_by_version",
-                },
-                {
+                    "series": [{"name": "1.0", "values": random_values}],
+                    "snap_id": "test-id",
                     "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
+                }
             ]
         }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
 
-        response = self.client.get(self.endpoint_url + "?period=1y")
+        response = self.client.get(self.endpoint_url)
+        self.assertEqual(response.status_code, 200)
+        response_json = response.json
 
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
+        self.assertIn("active_devices", response_json)
+        self.assertIn("latest_active_devices", response_json)
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            response_json["latest_active_devices"], random_values[28]
         )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
+
+        active_devices = response_json["active_devices"]
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            active_devices["name"], "weekly_installed_base_by_version"
         )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "1y")
-        self.assert_context("active_device_metric", "version")
-        self.assert_context("nodata", False)
+        self.assertEqual(active_devices["series"][0]["name"], "1.0")
+        self.assertEqual(active_devices["series"][0]["values"], random_values)
 
     @responses.activate
-    def test_data_version_1_month(self):
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapStore.get_item_details"
+    )
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_publisher_metrics"
+    )
+    def test_get_active_devices_weekly_installed_by_channel(
+        self,
+        mock_get_publisher_metrics,
+        mock_get_item_details,
+        mock_is_authenticated,
+    ):
+        mock_is_authenticated.return_value = True
+        mock_get_item_details.return_value = {"snap-id": "id"}
         random_values = random.sample(range(1, 30), 29)
         dates = [
             datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 30)
         ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
+        mock_get_publisher_metrics.return_value = {
             "metrics": [
                 {
-                    "status": "OK",
-                    "series": [{"values": random_values, "name": "0.1"}],
                     "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_version",
-                },
-                {
+                    "metric_name": "weekly_installed_base_by_channel",
+                    "series": [{"name": "1.0", "values": random_values}],
+                    "snap_id": "test-id",
                     "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
+                }
             ]
         }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
 
-        response = self.client.get(self.endpoint_url + "?period=30d")
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+        response = self.client.get(
+            self.endpoint_url + "?active-devices=channel"
         )
-
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "30d")
-        self.assert_context("active_device_metric", "version")
-        self.assert_context("nodata", False)
-
-    @responses.activate
-    def test_data_version_weekly(self):
-        random_values = random.sample(range(1, 30), 6)
-        dates = [
-            datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 7)
-        ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
-            "metrics": [
-                {
-                    "status": "OK",
-                    "series": [{"values": random_values, "name": "0.1"}],
-                    "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_version",
-                },
-                {
-                    "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
-            ]
-        }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url + "?period=7d")
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
+        response_json = response.json
+        self.assertIn("active_devices", response_json)
+        self.assertIn("latest_active_devices", response_json)
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            response_json["latest_active_devices"], random_values[28]
         )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "7d")
-        self.assert_context("active_device_metric", "version")
-        self.assert_context("nodata", False)
-
-    @responses.activate
-    def test_data_version_3_month(self):
-        random_values = random.sample(range(1, 100), 59)
-        dates = []
-        for month in range(4, 7):
-            dates = dates + [
-                datetime(2018, month, day).strftime("%Y-%m-%d")
-                for day in range(1, 30)
-            ]
-
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
-            "metrics": [
-                {
-                    "status": "OK",
-                    "series": [{"values": random_values, "name": "0.1"}],
-                    "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_version",
-                },
-                {
-                    "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
-            ]
-        }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
 
-        response = self.client.get(self.endpoint_url + "?period=3m")
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
+        active_devices = response_json["active_devices"]
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            active_devices["name"], "weekly_installed_base_by_channel"
         )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "3m")
-        self.assert_context("active_device_metric", "version")
-        self.assert_context("nodata", False)
+        self.assertEqual(active_devices["series"][0]["name"], "latest/1.0")
+        self.assertEqual(active_devices["series"][0]["values"], random_values)
 
     @responses.activate
-    def test_data_os_7_days(self):
-        random_values = random.sample(range(1, 100), 59)
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapStore.get_item_details"
+    )
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_publisher_metrics"
+    )
+    def test_get_active_devices_weekly_installed_by_os(
+        self,
+        mock_get_publisher_metrics,
+        mock_get_item_details,
+        mock_is_authenticated,
+    ):
+        mock_is_authenticated.return_value = True
+        mock_get_item_details.return_value = {"snap-id": "id"}
+        random_values = random.sample(range(1, 30), 29)
         dates = [
-            datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 7)
-        ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
+            datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 30)
         ]
-        payload = {
+        mock_get_publisher_metrics.return_value = {
             "metrics": [
                 {
-                    "status": "OK",
+                    "buckets": dates,
+                    "metric_name": "weekly_installed_base_by_operating_system",
                     "series": [
                         {"values": random_values, "name": "ubuntu/0.1"}
                     ],
-                    "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_operating_system",
-                },
-                {
+                    "snap_id": "test-id",
                     "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
+                }
             ]
         }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
 
-        response = self.client.get(
-            self.endpoint_url + "?period=7d&active-devices=os"
-        )
+        response = self.client.get(self.endpoint_url + "?active-devices=os")
+        self.assertEqual(response.status_code, 200)
+        response_json = response.json
+        self.assertIn("active_devices", response_json)
+        self.assertIn("latest_active_devices", response_json)
 
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
+        active_devices = response_json["active_devices"]
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            active_devices["name"], "weekly_installed_base_by_operating_system"
         )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "7d")
-        self.assert_context("active_device_metric", "os")
-        self.assert_context("nodata", False)
+        self.assertEqual(active_devices["series"][0]["name"], "Ubuntu 0.1")
+        self.assertEqual(active_devices["series"][0]["values"], random_values)
 
     @responses.activate
-    def test_data_os_1_year(self):
-        random_values = random.sample(range(1, 100), 59)
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapStore.get_item_details"
+    )
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_publisher_metrics"
+    )
+    def test_get_active_devices_in_3_months_period(
+        self,
+        mock_get_publisher_metrics,
+        mock_get_item_details,
+        mock_is_authenticated,
+    ):
+        mock_is_authenticated.return_value = True
+        mock_get_item_details.return_value = {"snap-id": "id"}
+        random_values = random.sample(range(1, 30), 29)
         dates = [
             datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 30)
         ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
+        mock_get_publisher_metrics.return_value = {
             "metrics": [
                 {
-                    "status": "OK",
-                    "series": [
-                        {"values": random_values, "name": "ubuntu/0.1"}
-                    ],
                     "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_operating_system",
-                },
-                {
+                    "metric_name": "weekly_installed_base_by_architecture",
+                    "series": [{"values": random_values, "name": "0.1"}],
+                    "snap_id": "test-id",
                     "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
-                },
+                }
             ]
         }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
 
         response = self.client.get(
-            self.endpoint_url + "?period=1y&active-devices=os"
+            self.endpoint_url + "?active-devices=architecture&period=3m"
         )
+        self.assertEqual(response.status_code, 200)
+        response_json = response.json
 
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
+        self.assertIn("active_devices", response_json)
+        self.assertIn("latest_active_devices", response_json)
+
+        active_devices = response_json["active_devices"]
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            active_devices["name"], "weekly_installed_base_by_architecture"
         )
+        self.assertEqual(active_devices["series"][0]["name"], "0.1")
+        self.assertEqual(active_devices["series"][0]["values"], random_values)
 
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "1y")
-        self.assert_context("active_device_metric", "os")
-        self.assert_context("nodata", False)
 
-    @responses.activate
-    def test_data_os_1_month(self):
-        random_values = random.sample(range(1, 100), 59)
-        dates = [
-            datetime(2018, 3, day).strftime("%Y-%m-%d") for day in range(1, 30)
-        ]
-        countries = [
-            {"values": [2], "name": "FR"},
-            {"values": [3], "name": "GB"},
-        ]
-        payload = {
-            "metrics": [
+class GetMetricAnnotation(TestCase):
+    render_templates = False
+
+    snap_name = "test-snap"
+    snap_payload = {
+        "snap_name": snap_name,
+        "snap_id": "snap-id",
+        "categories": {
+            "locked": False,
+            "items": [
                 {
-                    "status": "OK",
-                    "series": [
-                        {"values": random_values, "name": "ubuntu/0.1"}
-                    ],
-                    "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_operating_system",
+                    "featured": False,
+                    "name": "development",
+                    "since": "2019-02-08T17:02:33.318798",
                 },
                 {
-                    "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
-                    "metric_name": "weekly_installed_base_by_country",
+                    "featured": True,
+                    "name": "featured",
+                    "since": "2024-07-01T19:45:19.386538",
                 },
-            ]
-        }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
+                {
+                    "featured": True,
+                    "name": "server-and-cloud",
+                    "since": "2019-01-24T10:26:40.642290",
+                },
+            ],
+        },
+    }
+    endpoint_url = "/test-snap/metrics/active-device-annotation"
 
-        response = self.client.get(
-            self.endpoint_url + "?period=30d&active-devices=os"
-        )
+    def create_app(self):
+        app = create_app(testing=True)
+        app.secret_key = "secret_key"
+        app.config["WTF_CSRF_METHODS"] = []
+        return app
+
+    @responses.activate
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_snap_info"
+    )
+    def test_get_active_devices_weekly_installed_by_version(
+        self, mock_get_snap_info, mock_is_authenticated
+    ):
+        mock_is_authenticated.return_value = True
+
+        mock_get_snap_info.return_value = self.snap_payload
+
+        response = self.client.get(self.endpoint_url)
+        self.assertEqual(response.status_code, 200)
+        response_json = response.json
 
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            response_json["buckets"],
+            ["2019-02-08", "2024-07-01", "2019-01-24"],
         )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
+        self.assertEqual(response_json["name"], "annotations")
         self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
+            response_json["series"],
+            [
+                {
+                    "date": "2019-01-24",
+                    "display_date": "January 2019",
+                    "display_name": "Server and cloud",
+                    "name": "server-and-cloud",
+                    "values": [0, 0, 1],
+                },
+                {
+                    "date": "2019-02-08",
+                    "display_date": "February 2019",
+                    "display_name": "Development",
+                    "name": "development",
+                    "values": [1, 0, 0],
+                },
+                {
+                    "date": "2024-07-01",
+                    "display_date": "July 2024",
+                    "display_name": "Featured",
+                    "name": "featured",
+                    "values": [0, 1, 0],
+                },
+            ],
         )
 
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "30d")
-        self.assert_context("active_device_metric", "os")
-        self.assert_context("nodata", False)
+
+class GetCountryMetric(TestCase):
+    render_templates = False
+
+    snap_name = "test-snap"
+    endpoint_url = "/test-snap/metrics/country-metric"
+
+    def create_app(self):
+        app = create_app(testing=True)
+        app.secret_key = "secret_key"
+        app.config["WTF_CSRF_METHODS"] = []
+        return app
 
     @responses.activate
-    def test_data_os_3_month(self):
-        random_values = random.sample(range(1, 100), 59)
-        dates = []
-        for month in range(4, 7):
-            dates = dates + [
-                datetime(2018, month, day).strftime("%Y-%m-%d")
-                for day in range(1, 30)
-            ]
+    @patch("webapp.publisher.snaps.views.authentication.is_authenticated")
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapStore.get_item_details"
+    )
+    @patch(
+        "canonicalwebteam.store_api.stores."
+        "snapstore.SnapPublisher.get_publisher_metrics"
+    )
+    def test_get_active_devices_weekly_installed_by_version(
+        self,
+        mock_get_publisher_metrics,
+        mock_get_item_details,
+        mock_is_authenticated,
+    ):
+
+        mock_is_authenticated.return_value = True
 
         countries = [
             {"values": [2], "name": "FR"},
             {"values": [3], "name": "GB"},
         ]
-        payload = {
+        mock_get_item_details.return_value = {"snap-id": "id"}
+        mock_get_publisher_metrics.return_value = {
             "metrics": [
                 {
-                    "status": "OK",
-                    "series": [
-                        {"values": random_values, "name": "ubuntu/0.1"}
-                    ],
-                    "buckets": dates,
-                    "metric_name": "weekly_installed_base_by_operating_system",
-                },
-                {
-                    "status": "OK",
-                    "series": countries,
-                    "buckets": ["2018-03-18"],
+                    "buckets": ["2024-09-17"],
                     "metric_name": "weekly_installed_base_by_country",
-                },
+                    "series": countries,
+                    "snap_id": "id",
+                    "status": "OK",
+                }
             ]
         }
-        responses.add(responses.POST, self.api_url, json=payload, status=200)
-
-        response = self.client.get(
-            self.endpoint_url + "?period=3m&active-devices=os"
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
 
+        response = self.client.get(self.endpoint_url)
         self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/metrics.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("snap_title", "Test Snap")
-        self.assert_context("metric_period", "3m")
-        self.assert_context("active_device_metric", "os")
-        self.assert_context("nodata", False)
+        response_json = response.json
+        active_devices = response_json["active_devices"]
+
+        for info in active_devices:
+            country_info = active_devices[info]
+            if country_info["code"] == "FR":
+                self.assertEqual(country_info["number_of_users"], 2)
+                self.assertEqual(country_info["color_rgb"], [66, 146, 198])
+            elif country_info["code"] == "GB":
+                self.assertEqual(country_info["number_of_users"], 3)
+                self.assertEqual(country_info["color_rgb"], [8, 48, 107])
+            else:
+                self.assertEqual(country_info["number_of_users"], 0)
+                self.assertEqual(country_info["color_rgb"], [218, 218, 218])
diff --git a/webapp/metrics/helper.py b/webapp/metrics/helper.py
index 5cc302865e..6732c34138 100644
--- a/webapp/metrics/helper.py
+++ b/webapp/metrics/helper.py
@@ -30,7 +30,7 @@ def get_last_metrics_processed_date():
     return last_metrics_processed.date() - days_to_skip
 
 
-def build_metrics_json(
+def build_metric_query_installed_base(
     snap_id, installed_base, metric_period=30, metric_bucket="d"
 ):
     """Build the json that will be requested to the API
@@ -40,8 +40,7 @@ def build_metrics_json(
     :param metric_period The metric period requested, by default 30
     :param metric_bucket The metric bucket, by default 'd'
 
-    :returns A dictionary with the filters for the metrics API, by default
-    returns also the 'weekly_installed_base_by_country'.
+    :returns A dictionary with the filters for the metrics API.
     """
     end = get_last_metrics_processed_date()
 
@@ -63,6 +62,25 @@ def build_metrics_json(
                 start=start,
                 end=end,
             ),
+        ]
+    }
+
+
+def build_metric_query_country(snap_id):
+    """Build the json that will be requested to the API
+
+    :param snap_id The snap id
+    :param installed_base_metric The base metric requested
+    :param metric_period The metric period requested, by default 30
+    :param metric_bucket The metric bucket, by default 'd'
+
+    :returns A dictionary with the filters for the metrics API, by default
+    returns also the 'weekly_installed_base_by_country'.
+    """
+    end = get_last_metrics_processed_date()
+
+    return {
+        "filters": [
             get_filter(
                 metric_name="weekly_installed_base_by_country",
                 snap_id=snap_id,
diff --git a/webapp/publisher/snaps/metrics_views.py b/webapp/publisher/snaps/metrics_views.py
index 77eb56ca74..29ec00021b 100644
--- a/webapp/publisher/snaps/metrics_views.py
+++ b/webapp/publisher/snaps/metrics_views.py
@@ -5,7 +5,10 @@
 import flask
 import webapp.metrics.helper as metrics_helper
 import webapp.metrics.metrics as metrics
-from canonicalwebteam.store_api.stores.snapstore import SnapPublisher
+from canonicalwebteam.store_api.stores.snapstore import (
+    SnapPublisher,
+    SnapStore,
+)
 
 # Local
 from webapp.helpers import api_publisher_session
@@ -13,6 +16,7 @@
 from webapp.publisher.snaps import logic
 
 publisher_api = SnapPublisher(api_publisher_session)
+store_api = SnapStore(api_publisher_session)
 
 
 @login_required
@@ -51,14 +55,23 @@ def get_measure_snap(snap_name):
 def publisher_snap_metrics(snap_name):
     """
     A view to display the snap metrics page for specific snaps.
-
-    This queries the snapcraft API (api.snapcraft.io) and passes
-    some of the data through to the publisher/metrics.html template,
-    with appropriate sanitation.
     """
-    details = publisher_api.get_snap_info(snap_name, flask.session)
-    default_track = details.get("default_track", "latest")
+    context = {
+        # Data direct from details API
+        "snap_name": snap_name,
+        # pass snap id from here?
+        "is_linux": "Linux" in flask.request.headers["User-Agent"],
+    }
+
+    return flask.render_template("publisher/metrics.html", **context)
+
 
+@login_required
+def get_active_devices(snap_name):
+    snap_details = store_api.get_item_details(
+        snap_name, api_version=2, fields=["snap-id"]
+    )
+    snap_id = snap_details["snap-id"]
     metric_requested = logic.extract_metrics_period(
         flask.request.args.get("period", default="30d", type=str)
     )
@@ -68,8 +81,8 @@ def publisher_snap_metrics(snap_name):
     )
 
     installed_base = logic.get_installed_based_metric(installed_base_metric)
-    metrics_query_json = metrics_helper.build_metrics_json(
-        snap_id=details["snap_id"],
+    metrics_query_json = metrics_helper.build_metric_query_installed_base(
+        snap_id=snap_id,
         installed_base=installed_base,
         metric_period=metric_requested["int"],
         metric_bucket=metric_requested["bucket"],
@@ -79,24 +92,11 @@ def publisher_snap_metrics(snap_name):
         flask.session, json=metrics_query_json
     )
 
-    latest_day_period = logic.extract_metrics_period("1d")
-    latest_installed_base = logic.get_installed_based_metric("version")
-    latest_day_query_json = metrics_helper.build_metrics_json(
-        snap_id=details["snap_id"],
-        installed_base=latest_installed_base,
-        metric_period=latest_day_period["int"],
-        metric_bucket=latest_day_period["bucket"],
-    )
-    latest_day_response = publisher_api.get_publisher_metrics(
-        flask.session, json=latest_day_query_json
-    )
-
     active_metrics = metrics_helper.find_metric(
         metrics_response["metrics"], installed_base
     )
 
     series = active_metrics["series"]
-
     if active_metrics["metric_name"] == "weekly_installed_base_by_channel":
         for s in series:
             if "/" not in s["name"]:
@@ -115,8 +115,19 @@ def publisher_snap_metrics(snap_name):
         status=active_metrics["status"],
     )
 
+    # get latest active devices
+    latest_day_period = logic.extract_metrics_period("1d")
+    latest_installed_base = logic.get_installed_based_metric("version")
+    latest_day_query_json = metrics_helper.build_metric_query_installed_base(
+        snap_id=snap_id,
+        installed_base=latest_installed_base,
+        metric_period=latest_day_period["int"],
+        metric_bucket=latest_day_period["bucket"],
+    )
+    latest_day_response = publisher_api.get_publisher_metrics(
+        flask.session, json=latest_day_query_json
+    )
     latest_active = 0
-
     if active_devices:
         latest_active = active_devices.get_number_latest_active_devices()
 
@@ -135,23 +146,17 @@ def publisher_snap_metrics(snap_name):
                 latest_active_devices.get_number_latest_active_devices()
             )
 
-    country_metric = metrics_helper.find_metric(
-        metrics_response["metrics"], "weekly_installed_base_by_country"
-    )
-    country_devices = metrics.CountryDevices(
-        name=country_metric["metric_name"],
-        series=country_metric["series"],
-        buckets=country_metric["buckets"],
-        status=country_metric["status"],
-        private=True,
+    return flask.jsonify(
+        {
+            "active_devices": dict(active_devices),
+            "latest_active_devices": latest_active,
+        }
     )
 
-    territories_total = 0
-    if country_devices:
-        territories_total = country_devices.get_number_territories()
-
-    nodata = not any([country_devices, active_devices])
 
+@login_required
+def get_metric_annotaion(snap_name):
+    details = publisher_api.get_snap_info(snap_name, flask.session)
     annotations = {"name": "annotations", "series": [], "buckets": []}
 
     for category in details["categories"]["items"]:
@@ -178,25 +183,41 @@ def publisher_snap_metrics(snap_name):
     annotations["series"] = sorted(
         annotations["series"], key=lambda k: k["date"]
     )
+    return flask.jsonify(annotations)
 
-    context = {
-        # Data direct from details API
-        "snap_name": snap_name,
-        "snap_title": details["title"],
-        "publisher_name": details["publisher"]["display-name"],
-        "metric_period": metric_requested["period"],
-        "active_device_metric": installed_base_metric,
-        "default_track": default_track,
-        "private": details["private"],
-        # Metrics data
-        "nodata": nodata,
-        "latest_active_devices": latest_active,
-        "active_devices": dict(active_devices),
-        "territories_total": territories_total,
-        "territories": country_devices.country_data,
-        "active_devices_annotations": annotations,
-        # Context info
-        "is_linux": "Linux" in flask.request.headers["User-Agent"],
-    }
 
-    return flask.render_template("publisher/metrics.html", **context)
+@login_required
+def get_country_metric(snap_name):
+    snap_details = store_api.get_item_details(
+        snap_name, api_version=2, fields=["snap-id"]
+    )
+    snap_id = snap_details["snap-id"]
+    metrics_query_json = metrics_helper.build_metric_query_country(
+        snap_id=snap_id,
+    )
+
+    metrics_response = publisher_api.get_publisher_metrics(
+        flask.session, json=metrics_query_json
+    )
+
+    country_metric = metrics_helper.find_metric(
+        metrics_response["metrics"], "weekly_installed_base_by_country"
+    )
+    country_devices = metrics.CountryDevices(
+        name=country_metric["metric_name"],
+        series=country_metric["series"],
+        buckets=country_metric["buckets"],
+        status=country_metric["status"],
+        private=True,
+    )
+
+    territories_total = 0
+    if country_devices:
+        territories_total = country_devices.get_number_territories()
+
+    return flask.jsonify(
+        {
+            "active_devices": country_devices.country_data,
+            "territories_total": territories_total,
+        }
+    )
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 07d57c1a0e..82b6bc1121 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -211,6 +211,21 @@
     view_func=metrics_views.publisher_snap_metrics,
 )
 
+publisher_snaps.add_url_rule(
+    "/<snap_name>/metrics/active-devices",
+    view_func=metrics_views.get_active_devices,
+)
+
+publisher_snaps.add_url_rule(
+    "/<snap_name>/metrics/active-device-annotation",
+    view_func=metrics_views.get_metric_annotaion,
+)
+
+publisher_snaps.add_url_rule(
+    "/<snap_name>/metrics/country-metric",
+    view_func=metrics_views.get_country_metric,
+)
+
 # Publice views
 publisher_snaps.add_url_rule(
     "/<snap_name>/publicise",
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
index 50179b267f..0bdcf04789 100644
--- a/webpack.config.entry.js
+++ b/webpack.config.entry.js
@@ -21,4 +21,5 @@ module.exports = {
   "about-listing": "./static/js/public/about/listing.ts",
   store: "./static/js/store/index.tsx",
   "publisher-pages": "./static/js/publisher-pages/index.tsx",
+  metrics: "./static/js/publisher-pages/index.tsx",
 };

From a69af94d4933c4764418173ca0b38185a241959a Mon Sep 17 00:00:00 2001
From: ilayda-cp <ilayda.cavusoglupars@canonical.com>
Date: Thu, 3 Oct 2024 13:30:39 +0300
Subject: [PATCH 04/24] Wd 15262 improve performance of metric page (#4863)

* feat: added downsampling and pagination
---
 jest.config.js                                |   3 +
 .../__tests__/useActiveDeviceMetrics.test.ts  |  17 --
 .../__tests__/useActiveDeviceMetrics.test.tsx | 167 ++++++++++++++++++
 .../hooks/useActiveDeviceMetrics.ts           | 128 ++++++++++++--
 .../hooks/useLatestActiveDevicesMetric.ts     |  26 +++
 .../hooks/useMetricsAnnotation.ts             |   2 +
 .../pages/Metrics/ActiveDeviceMetrics.tsx     |  18 +-
 .../__tests__/ActiveDeviceMetrics.test.tsx    |  26 ++-
 webapp/metrics/helper.py                      | 141 +++++++++++++--
 webapp/publisher/snaps/metrics_views.py       | 117 +++++++++---
 webapp/publisher/snaps/views.py               |   5 +
 11 files changed, 566 insertions(+), 84 deletions(-)
 delete mode 100644 static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
 create mode 100644 static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
 create mode 100644 static/js/publisher-pages/hooks/useLatestActiveDevicesMetric.ts

diff --git a/jest.config.js b/jest.config.js
index 01a13a0121..bfd1c4eeef 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,4 +12,7 @@ module.exports = {
   moduleNameMapper: {
     "\\.(scss|sass|css)$": "identity-obj-proxy",
   },
+  globals: {
+    fetch: global.fetch,
+  },
 };
diff --git a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
deleted file mode 100644
index 0f4a6587ae..0000000000
--- a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as ReactQuery from "react-query";
-import { renderHook } from "@testing-library/react";
-import useActiveDeviceMetrics from "../useActiveDeviceMetrics";
-
-describe("useActiveDeviceMetrics", () => {
-  test("Calls useQuery", () => {
-    jest.spyOn(ReactQuery, "useQuery").mockImplementation(jest.fn());
-    renderHook(() =>
-      useActiveDeviceMetrics({
-        period: "30d",
-        snapId: "test-id",
-        type: "version",
-      })
-    );
-    expect(ReactQuery.useQuery).toHaveBeenCalled();
-  });
-});
diff --git a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
new file mode 100644
index 0000000000..2285f4ecad
--- /dev/null
+++ b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
@@ -0,0 +1,167 @@
+import * as ReactQuery from "react-query";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import useActiveDeviceMetrics from "../useActiveDeviceMetrics";
+
+describe("useActiveDeviceMetrics", () => {
+  test("Calls useQuery", () => {
+    const spy = jest.spyOn(ReactQuery, "useQuery").mockReturnValue({
+      data: [],
+      status: "success",
+      isFetcing: false,
+    } as any);
+
+    renderHook(() =>
+      useActiveDeviceMetrics({
+        period: "30d",
+        snapId: "test-id",
+        type: "version",
+      })
+    );
+    expect(ReactQuery.useQuery).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  const createWrapper = () => {
+    const queryClient = new QueryClient();
+    return ({ children }: any) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+
+  test("if the page size is set to less than 3 months, do not paginate ", async () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            active_devices: {
+              buckets: [
+                "2024-09-26",
+                "2024-09-27",
+                "2024-09-28",
+                "2024-09-29",
+                "2024-09-30",
+              ],
+              name: "weekly_installed_base_by_version",
+              series: [
+                {
+                  name: "1.0",
+                  values: [5, 5, 0, 4, 4],
+                },
+              ],
+            },
+            latest_active_devices: 4,
+            total_page_num: 1,
+          }),
+        ok: true,
+      })
+    ) as jest.Mock;
+
+    const { result } = renderHook(
+      () =>
+        useActiveDeviceMetrics({
+          period: "30d",
+          snapId: "test-id",
+          type: "version",
+        }),
+      {
+        wrapper: createWrapper(),
+      }
+    );
+
+    await waitFor(() => expect(result.current.status).toBe("success"));
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(result.current.data).toMatchObject({
+      activeDevices: {
+        buckets: [
+          "2024-09-26",
+          "2024-09-27",
+          "2024-09-28",
+          "2024-09-29",
+          "2024-09-30",
+        ],
+        series: [{ name: "1.0", values: [5, 5, 0, 4, 4] }],
+      },
+    });
+    (global.fetch as jest.Mock).mockRestore();
+  });
+
+  test("if the page size is greater than 3 months, request data over multiple requests", async () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            active_devices: {
+              buckets: [
+                "2024-09-26",
+                "2024-09-27",
+                "2024-09-28",
+                "2024-09-29",
+                "2024-09-30",
+              ],
+              name: "weekly_installed_base_by_version",
+              series: [
+                {
+                  name: "1.0",
+                  values: [5, 5, 0, 4, 4],
+                },
+              ],
+            },
+            latest_active_devices: 4,
+            total_page_num: 1,
+          }),
+        ok: true,
+      })
+    ) as jest.Mock;
+
+    const { result } = renderHook(
+      () =>
+        useActiveDeviceMetrics({
+          period: "2y",
+          snapId: "test-id",
+          type: "version",
+        }),
+      {
+        wrapper: createWrapper(),
+      }
+    );
+
+    await waitFor(() => expect(result.current.status).toBe("success"));
+
+    expect(global.fetch).toHaveBeenCalledTimes(8);
+    (global.fetch as jest.Mock).mockRestore();
+  });
+
+  test("if the request 404, empty data should be returned", async () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(undefined),
+        ok: false,
+        status: 404,
+      })
+    ) as jest.Mock;
+
+    const { result } = renderHook(
+      () =>
+        useActiveDeviceMetrics({
+          period: "30d",
+          snapId: "test-id",
+          type: "version",
+        }),
+      {
+        wrapper: createWrapper(),
+      }
+    );
+    await waitFor(() => expect(result.current.status).toBe("success"));
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(result.current.data).toMatchObject({
+      activeDevices: {
+        buckets: [],
+        series: [],
+      },
+    });
+    (global.fetch as jest.Mock).mockRestore();
+  });
+});
diff --git a/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
index 3bac68434e..eea8ceba41 100644
--- a/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
+++ b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
@@ -9,32 +9,122 @@ function useActiveDeviceMetrics({
   period: string;
   type: string;
 }) {
-  return useQuery({
+  const { status, data, isFetching } = useQuery({
     queryKey: ["activeDeviceMetrics", snapId, period, type],
     queryFn: async () => {
-      const response = await fetch(
-        `/${snapId}/metrics/active-devices?period=${period}&active-devices=${type}`
+      return await fetchData();
+    },
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+
+  const parsePeriod = (period: string) => {
+    const [_, periodLength, periodTime] = period.trim().split(/(\d+)/);
+    return { periodLength: +periodLength, periodTime };
+  };
+
+  const fetchData = async () => {
+    const { periodTime, periodLength } = parsePeriod(period);
+    const pagePeriodLengthInMonths = 3;
+
+    let totalPage = 1;
+    if (
+      periodTime === "d" ||
+      (periodTime === "m" && periodLength <= pagePeriodLengthInMonths)
+    ) {
+      totalPage = 1;
+    } else {
+      totalPage =
+        periodTime === "y"
+          ? Math.floor((periodLength * 12) / pagePeriodLengthInMonths)
+          : Math.floor(periodLength / pagePeriodLengthInMonths);
+    }
+
+    const responses = [];
+    for (let i = 1; i <= totalPage; i++) {
+      responses.push(
+        fetch(
+          `/${snapId}/metrics/active-devices?active-devices=${type}&period=${period}&page=${i}&page-length=${pagePeriodLengthInMonths}`
+        )
       );
+    }
+
+    const results = await Promise.all(responses);
+
+    return await formatData(results);
+  };
+
+  const handleResponse = async (response: Response) => {
+    if (!response.ok) {
+      if (response.status === 404) {
+        return {
+          active_devices: {
+            buckets: [],
+            series: [],
+          },
+        };
+      } else {
+        throw new Error("Unable to fetch latest active device information");
+      }
+    }
+
+    const data = await response.json();
+    return data;
+  };
+
+  const formatData = async (results: Response[]) => {
+    const buckets = [];
+    const series = new Map();
 
-      if (!response.ok) {
-        if (response.status === 404) {
-          return {
-            latest_active_devices: 0,
-            active_devices: {
-              series: [],
-              buckets: [],
-            },
-          };
-        } else {
-          throw new Error("Unable to fetch active device metrics");
+    let seriesThatAreAddedBefore = 0;
+
+    for (const result of results.reverse()) {
+      const data = await handleResponse(result);
+
+      const activeDeviceBuckets = data.active_devices.buckets;
+
+      buckets.push(...activeDeviceBuckets);
+      // fill the array with 0's if the batch doesnt have that previous series
+      for (const seriesKey of series.keys()) {
+        const seriesExistInBatch = data.active_devices.series.find(
+          (activeDeviceSeries: { name: string }) =>
+            activeDeviceSeries.name === seriesKey
+        );
+        if (!seriesExistInBatch) {
+          series.set(seriesKey, [
+            ...series.get(seriesKey),
+            ...new Array(activeDeviceBuckets.length).fill(0),
+          ]);
         }
       }
 
-      return await response.json();
-    },
-    retry: 0,
-    refetchOnWindowFocus: false,
-  });
+      // fill the array with 0's if new series introduced in the batch
+      for (const activeDeviceSeries of data.active_devices.series) {
+        const key = activeDeviceSeries.name;
+        const prevData = series.has(key)
+          ? series.get(key)
+          : new Array(seriesThatAreAddedBefore).fill(0);
+
+        series.set(key, [...prevData, ...activeDeviceSeries.values]);
+      }
+
+      seriesThatAreAddedBefore += activeDeviceBuckets.length;
+    }
+
+    const resultArray = Array.from(series.entries()).map(([key, value]) => ({
+      name: key,
+      values: value,
+    }));
+
+    return {
+      activeDevices: {
+        buckets,
+        series: resultArray,
+      },
+    };
+  };
+
+  return { status, data, isFetching };
 }
 
 export default useActiveDeviceMetrics;
diff --git a/static/js/publisher-pages/hooks/useLatestActiveDevicesMetric.ts b/static/js/publisher-pages/hooks/useLatestActiveDevicesMetric.ts
new file mode 100644
index 0000000000..d97d6dddd1
--- /dev/null
+++ b/static/js/publisher-pages/hooks/useLatestActiveDevicesMetric.ts
@@ -0,0 +1,26 @@
+import { useQuery } from "react-query";
+
+function useLatestActiveDevicesMetric(snapId?: string) {
+  return useQuery({
+    queryKey: ["latestActiveDevicesMetric", snapId],
+    queryFn: async () => {
+      const response = await fetch(`/${snapId}/metrics/active-latest-devices`);
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          return null;
+        } else {
+          throw new Error("Unable to fetch latest active device information");
+        }
+      }
+
+      const data = await response.json();
+      const activeDevices = data.latest_active_devices;
+      return String(activeDevices).replace(/(.)(?=(\d{3})+$)/g, "$1,");
+    },
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export default useLatestActiveDevicesMetric;
diff --git a/static/js/publisher-pages/hooks/useMetricsAnnotation.ts b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
index 3e82ff575d..d28850e836 100644
--- a/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
+++ b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
@@ -16,6 +16,8 @@ function useMetricsAnnotation(snapId?: string) {
 
       return data;
     },
+    retry: 0,
+    refetchOnWindowFocus: false,
   });
 }
 
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
index 9067f18c13..13a17d7cc0 100644
--- a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
@@ -7,6 +7,7 @@ import { select } from "d3-selection";
 import ActiveDeviceAnnotation from "./ActiveDeviceAnnotation";
 import { ActiveDeviceMetricFilter } from "./ActiveDeviceMetricFilter";
 import useActiveDeviceMetrics from "../../hooks/useActiveDeviceMetrics";
+import useLatestActiveDevicesMetric from "../../hooks/useLatestActiveDevicesMetric";
 
 function ActiveDeviceMetrics({
   isEmpty,
@@ -17,12 +18,11 @@ function ActiveDeviceMetrics({
 }): JSX.Element {
   const { snapId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [latestActiveDevices, setLatestActiveDevices] = useState<string | null>(
-    null
-  );
+  const { data: latestActiveDevices } = useLatestActiveDevicesMetric(snapId);
 
   const period = searchParams.get("period") ?? "30d";
   const type = searchParams.get("active-devices") ?? "version";
+
   const selector = "#activeDevices";
 
   const { status, data, isFetching } = useActiveDeviceMetrics({
@@ -33,19 +33,13 @@ function ActiveDeviceMetrics({
 
   useEffect(() => {
     if (data) {
-      const activeDevices = data.latest_active_devices;
-      activeDevices &&
-        setLatestActiveDevices(
-          String(activeDevices).replace(/(.)(?=(\d{3})+$)/g, "$1,")
-        );
-
-      data.active_devices &&
+      data.activeDevices &&
         renderActiveDevicesMetrics({
           selector,
-          metrics: data.active_devices,
+          metrics: data.activeDevices,
           type,
         });
-      onDataLoad(data.active_devices?.buckets?.length);
+      onDataLoad(data.activeDevices?.buckets?.length);
     }
   }, [data]);
 
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
index c000b7984e..1543a8c562 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
@@ -95,14 +95,15 @@ describe("ActiveDeviceMetrics", () => {
             status: "success",
             data: mockActiveDeviceMetrics,
           };
+        } else if (params.queryKey[0] === "latestActiveDevicesMetric") {
+          return {
+            status: "success",
+            data: 5,
+          };
         } else {
           return {
             status: "success",
-            data: {
-              buckets: [],
-              name: "annotations",
-              series: [],
-            },
+            data: undefined,
           };
         }
       }
@@ -131,6 +132,11 @@ describe("ActiveDeviceMetrics", () => {
             status: "error",
             data: undefined,
           };
+        } else if (params.queryKey[0] === "latestActiveDevicesMetric") {
+          return {
+            status: "success",
+            data: 5,
+          };
         } else {
           return {
             status: "success",
@@ -166,6 +172,11 @@ describe("ActiveDeviceMetrics", () => {
             isFetching: true,
             data: undefined,
           };
+        } else if (params.queryKey[0] === "latestActiveDevicesMetric") {
+          return {
+            status: "success",
+            data: 5,
+          };
         } else {
           return {
             status: "success",
@@ -199,6 +210,11 @@ describe("ActiveDeviceMetrics", () => {
             status: "success",
             data: undefined,
           };
+        } else if (params.queryKey[0] === "latestActiveDevicesMetric") {
+          return {
+            status: "success",
+            data: 0,
+          };
         } else {
           return {
             status: "success",
diff --git a/webapp/metrics/helper.py b/webapp/metrics/helper.py
index 6732c34138..bc65384b3c 100644
--- a/webapp/metrics/helper.py
+++ b/webapp/metrics/helper.py
@@ -1,5 +1,6 @@
 import datetime
 from dateutil import relativedelta
+import math
 
 
 def get_filter(metric_name, snap_id, start, end):
@@ -30,6 +31,21 @@ def get_last_metrics_processed_date():
     return last_metrics_processed.date() - days_to_skip
 
 
+def get_dates_for_metric(metric_period=30, metric_bucket="d"):
+    end = get_last_metrics_processed_date()
+
+    if metric_bucket == "d":
+        start = end + relativedelta.relativedelta(days=-metric_period)
+    elif metric_bucket == "m":
+        start = end + relativedelta.relativedelta(months=-metric_period)
+    elif metric_bucket == "y":
+        # Go back an extra day to ensure the granularity increases
+        start = end + relativedelta.relativedelta(
+            years=-metric_period, days=-1
+        )
+    return {"end": end, "start": start}
+
+
 def build_metric_query_installed_base(
     snap_id, installed_base, metric_period=30, metric_bucket="d"
 ):
@@ -42,18 +58,21 @@ def build_metric_query_installed_base(
 
     :returns A dictionary with the filters for the metrics API.
     """
-    end = get_last_metrics_processed_date()
 
-    if metric_bucket == "d":
-        start = end + relativedelta.relativedelta(days=-metric_period)
-    elif metric_bucket == "m":
-        start = end + relativedelta.relativedelta(months=-metric_period)
-    elif metric_bucket == "y":
-        # Go back an extra day to ensure the granularity increases
-        start = end + relativedelta.relativedelta(
-            years=-metric_period, days=-1
-        )
+    dates = get_dates_for_metric(metric_period, metric_bucket)
+    return {
+        "filters": [
+            get_filter(
+                metric_name=installed_base,
+                snap_id=snap_id,
+                start=dates["start"],
+                end=dates["end"],
+            ),
+        ]
+    }
+
 
+def build_active_device_metric_query(snap_id, installed_base, end, start):
     return {
         "filters": [
             get_filter(
@@ -155,3 +174,105 @@ def transform_metrics(metrics, metrics_response, snaps):
             metrics["buckets"] = metric["buckets"]
 
     return metrics
+
+
+def lttb_select_indices(values, target_size):
+    """
+    Selects indices using the LTTB algorithm for downsampling,
+    treating None as 0.
+    """
+    n = len(values)
+    if n <= target_size:
+        return list(range(n))
+
+    # Initialize bucket size
+    bucket_size = (n - 2) / (target_size - 2)
+    indices = []
+
+    current_bucket_start = 0
+    for i in range(1, target_size - 1):
+        next_bucket_start = min(math.ceil((i + 1) * bucket_size), n - 1)
+
+        max_area = 0
+        max_area_idx = current_bucket_start
+
+        point1 = (
+            current_bucket_start,
+            (
+                values[current_bucket_start]
+                if values[current_bucket_start] is not None
+                else 0
+            ),
+        )
+        point2 = (
+            next_bucket_start,
+            (
+                values[next_bucket_start]
+                if values[next_bucket_start] is not None
+                else 0
+            ),
+        )
+
+        for j in range(current_bucket_start + 1, next_bucket_start):
+            val_j = values[j] if values[j] is not None else 0
+
+            # Area of triangle formed by point1, point2, and the current point
+            area = abs(
+                (point1[0] - point2[0]) * (val_j - point1[1])
+                - (point1[0] - j) * (point2[1] - point1[1])
+            )
+            if area > max_area:
+                max_area = area
+                max_area_idx = j
+
+        indices.append(max_area_idx)
+        current_bucket_start = next_bucket_start
+
+    indices.append(n - 1)
+    return indices
+
+
+def normalize_series(series, bucket_count):
+    """
+    Ensure all value arrays in the series have the same size
+    by padding with 0s.
+    """
+    for item in series:
+        values = item["values"]
+        # If the series has no values, fill it with 0s
+        if not values:
+            item["values"] = [0] * bucket_count
+        # Extend the values with 0 if they are shorter than the bucket count
+        elif len(values) < bucket_count:
+            item["values"].extend([0] * (bucket_count - len(values)))
+
+
+def downsample_series(buckets, series, target_size):
+    """Downsample each series in the data, treating None as 0."""
+    downsampled_buckets = []
+    downsampled_series = []
+
+    # Handle case where series is empty
+    if not series:
+        return buckets[:target_size], []
+
+    bucket_count = len(buckets)
+    # Normalize series first to make sure all series have the same length
+    normalize_series(series, bucket_count)
+
+    # Downsample each series independently
+    for item in series:
+        name = item["name"]
+        values = item["values"]
+
+        selected_indices = lttb_select_indices(values, target_size)
+
+        # Collect the buckets and values based on the selected indices
+        downsampled_buckets = [buckets[i] for i in selected_indices]
+        downsampled_values = [
+            values[i] if values[i] is not None else 0 for i in selected_indices
+        ]
+
+        downsampled_series.append({"name": name, "values": downsampled_values})
+
+    return downsampled_buckets, downsampled_series
diff --git a/webapp/publisher/snaps/metrics_views.py b/webapp/publisher/snaps/metrics_views.py
index 29ec00021b..0588846f6d 100644
--- a/webapp/publisher/snaps/metrics_views.py
+++ b/webapp/publisher/snaps/metrics_views.py
@@ -1,5 +1,7 @@
 # Standard library
 from json import loads
+from dateutil import relativedelta
+import math
 
 # Packages
 import flask
@@ -15,9 +17,13 @@
 from webapp.decorators import login_required
 from webapp.publisher.snaps import logic
 
+
 publisher_api = SnapPublisher(api_publisher_session)
 store_api = SnapStore(api_publisher_session)
 
+downsample_data_limit = 500
+downsample_target_size = 10
+
 
 @login_required
 def get_account_snaps_metrics():
@@ -68,53 +74,124 @@ def publisher_snap_metrics(snap_name):
 
 @login_required
 def get_active_devices(snap_name):
+
     snap_details = store_api.get_item_details(
         snap_name, api_version=2, fields=["snap-id"]
     )
+
     snap_id = snap_details["snap-id"]
-    metric_requested = logic.extract_metrics_period(
-        flask.request.args.get("period", default="30d", type=str)
-    )
 
     installed_base_metric = logic.verify_base_metrics(
         flask.request.args.get("active-devices", default="version", type=str)
     )
 
+    period = flask.request.args.get("period", default="30d", type=str)
+    active_device_period = logic.extract_metrics_period(period)
+
+    page = flask.request.args.get("page", default=1, type=int)
+
+    metric_requested_length = active_device_period["int"]
+    metric_requested_bucket = active_device_period["bucket"]
+
+    page_time_length = flask.request.args.get(
+        "page-length", default=3, type=int
+    )
+    total_page_num = 1
+    if metric_requested_bucket == "d" or (
+        metric_requested_bucket == "m"
+        and page_time_length >= metric_requested_length
+    ):
+        dates = metrics_helper.get_dates_for_metric(
+            metric_requested_length, metric_requested_bucket
+        )
+        start = dates["start"]
+        end = dates["end"]
+    else:
+        page_period_length = (
+            (metric_requested_length * 12)
+            if metric_requested_bucket == "y"
+            else metric_requested_length
+        )
+        total_page_num = math.floor(page_period_length / page_time_length)
+
+        end = metrics_helper.get_last_metrics_processed_date() + (
+            relativedelta.relativedelta(
+                months=-(page_time_length * (page - 1))
+            )
+        )
+        start = end + (relativedelta.relativedelta(months=-(page_time_length)))
+
+        # Decrease the date by a day to make sure
+        # there is no overlapping dates across the pages.
+        if page != 1:
+            end = end + relativedelta.relativedelta(days=-1)
+
     installed_base = logic.get_installed_based_metric(installed_base_metric)
-    metrics_query_json = metrics_helper.build_metric_query_installed_base(
-        snap_id=snap_id,
-        installed_base=installed_base,
-        metric_period=metric_requested["int"],
-        metric_bucket=metric_requested["bucket"],
+
+    new_metrics_query = metrics_helper.build_active_device_metric_query(
+        snap_id=snap_id, installed_base=installed_base, end=end, start=start
     )
 
     metrics_response = publisher_api.get_publisher_metrics(
-        flask.session, json=metrics_query_json
+        flask.session, json=new_metrics_query
     )
 
     active_metrics = metrics_helper.find_metric(
         metrics_response["metrics"], installed_base
     )
 
-    series = active_metrics["series"]
-    if active_metrics["metric_name"] == "weekly_installed_base_by_channel":
+    metrics_data = active_metrics
+    buckets = metrics_data["buckets"]
+    series = metrics_data["series"]
+    metric_name = metrics_data["metric_name"]
+    # Add constants to a variable
+    if len(series) > downsample_data_limit:
+        downsampled_buckets, downsampled_series = (
+            metrics_helper.downsample_series(
+                buckets, series, downsample_target_size
+            )
+        )
+    else:
+        downsampled_buckets = buckets
+        downsampled_series = series
+
+    series = downsampled_series
+    if metric_name == "weekly_installed_base_by_channel":
         for s in series:
             if "/" not in s["name"]:
                 s["name"] = f"latest/{s['name']}"
 
     if installed_base_metric == "os":
-        capitalized_series = active_metrics["series"]
-        for item in capitalized_series:
+        for item in series:
             item["name"] = metrics._capitalize_os_name(item["name"])
-        series = capitalized_series
 
     active_devices = metrics.ActiveDevices(
-        name=active_metrics["metric_name"],
+        name=metric_name,
         series=series,
-        buckets=active_metrics["buckets"],
-        status=active_metrics["status"],
+        buckets=downsampled_buckets,
+        status=metrics_data["status"],
+    )
+
+    latest_active = 0
+    if active_devices:
+        latest_active = active_devices.get_number_latest_active_devices()
+
+    return flask.jsonify(
+        {
+            "active_devices": dict(active_devices),
+            "latest_active_devices": latest_active,
+            "total_page_num": total_page_num,
+        }
     )
 
+
+@login_required
+def get_latest_active_devices(snap_name):
+    snap_details = store_api.get_item_details(
+        snap_name, api_version=2, fields=["snap-id"]
+    )
+
+    snap_id = snap_details["snap-id"]
     # get latest active devices
     latest_day_period = logic.extract_metrics_period("1d")
     latest_installed_base = logic.get_installed_based_metric("version")
@@ -124,12 +201,12 @@ def get_active_devices(snap_name):
         metric_period=latest_day_period["int"],
         metric_bucket=latest_day_period["bucket"],
     )
+
     latest_day_response = publisher_api.get_publisher_metrics(
         flask.session, json=latest_day_query_json
     )
+
     latest_active = 0
-    if active_devices:
-        latest_active = active_devices.get_number_latest_active_devices()
 
     if latest_day_response:
         latest_active_metrics = metrics_helper.find_metric(
@@ -145,10 +222,8 @@ def get_active_devices(snap_name):
             latest_active = (
                 latest_active_devices.get_number_latest_active_devices()
             )
-
     return flask.jsonify(
         {
-            "active_devices": dict(active_devices),
             "latest_active_devices": latest_active,
         }
     )
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 82b6bc1121..40b978a9ac 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -216,6 +216,11 @@
     view_func=metrics_views.get_active_devices,
 )
 
+publisher_snaps.add_url_rule(
+    "/<snap_name>/metrics/active-latest-devices",
+    view_func=metrics_views.get_latest_active_devices,
+)
+
 publisher_snaps.add_url_rule(
     "/<snap_name>/metrics/active-device-annotation",
     view_func=metrics_views.get_metric_annotaion,

From f8dbf3f2e3c92d5daf497cac513b9e70e2aa3e84 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 3 Oct 2024 16:17:20 +0100
Subject: [PATCH 05/24] chore: Move listing page into publisher app (#4865)

---
 static/js/global.d.ts                         |  3 +
 .../SaveAndPreview/SaveAndPreview.tsx         | 16 ++--
 .../components/SectionNav/SectionNav.tsx      |  7 +-
 .../__tests__/useMutateListingData.test.ts    |  4 +-
 .../hooks/__tests__/useVerified.test.ts       |  0
 static/js/publisher-pages/hooks/index.ts      |  9 +-
 .../hooks/useMutateListingData.ts             | 13 +--
 .../hooks/useVerified.ts                      |  0
 static/js/publisher-pages/index.tsx           |  5 ++
 .../AdditionalInformation.tsx                 |  4 +-
 .../AdditionalInformation/LicenseInputs.tsx   |  0
 .../AdditionalInformation/LicenseSearch.tsx   |  0
 .../Listing}/AdditionalInformation/index.ts   |  0
 .../ContactInformation/ContactFields.tsx      |  0
 .../ContactInformation/ContactInformation.tsx |  4 +-
 .../ContactInformation/PrimaryDomainInput.tsx | 12 +--
 .../__tests__/PrimaryDomainInput.test.tsx     | 43 ++++++---
 .../Listing}/ContactInformation/index.ts      |  0
 .../pages/Listing/Listing.tsx}                | 25 +++---
 .../Listing}/ListingDetails/ImageUpload.tsx   | 10 +--
 .../ListingDetails/ListingDetails.tsx         |  4 +-
 .../Listing}/ListingDetails/Screenshot.tsx    |  0
 .../ListingDetails/ScreenshotList.tsx         |  0
 .../Listing}/ListingDetails/Screenshots.tsx   |  2 +-
 .../pages/Listing}/ListingDetails/index.ts    |  0
 .../Listing}/ListingForm/ListingForm.tsx      | 35 ++++----
 .../pages/Listing}/ListingForm/index.ts       |  0
 .../Listing}/PreviewForm/PreviewForm.tsx      |  0
 .../pages/Listing}/PreviewForm/index.ts       |  0
 .../publisher-pages/pages/Listing/index.tsx   | 20 +++++
 .../pages/Publicise/Publicise.tsx             | 90 ++++++++++---------
 .../pages/Settings/Settings.tsx               |  4 +-
 static/js/publisher-pages/routes/root.tsx     |  2 +-
 static/js/publisher-pages/test-utils/index.ts |  3 +
 .../test-utils/mockListingData.ts}            |  2 +-
 static/js/publisher-pages/types/index.d.ts    | 37 ++++++++
 .../utils/__tests__/addDateToFilename.test.ts |  0
 .../__tests__/formatImageChanges.test.ts      |  0
 .../__tests__/getDefaultListingData.test.ts}  |  6 +-
 .../shouldShowUpdateMetadataWarning.test.ts   |  0
 .../__tests__/validateImageDimensions.test.ts |  0
 .../utils/addDateToFilename.ts                |  0
 .../utils/formatImageChanges.ts               |  0
 .../utils/getDefaultListingData.ts}           |  6 +-
 .../utils/getListingChanges.ts}               |  6 +-
 .../{getChanges.ts => getSettingsChanges.ts}  |  4 +-
 ...{getFormData.ts => getSettingsFormData.ts} |  8 +-
 static/js/publisher-pages/utils/index.ts      | 22 ++++-
 .../utils/shouldShowUpdateMetadataWarning.ts  |  0
 .../utils/validateImageDimensions.ts          |  0
 .../publisher/listing/components/App/index.ts |  1 -
 static/js/publisher/listing/hooks/index.ts    |  4 -
 .../js/publisher/listing/test-utils/index.ts  |  3 -
 static/js/publisher/listing/types/index.d.ts  | 45 ----------
 static/js/publisher/listing/utils/index.ts    | 15 ----
 static/js/publisher/tour.tsx                  |  6 +-
 static/js/publisher/tour/helpers.ts           |  4 +-
 static/js/publisher/tour/tour.tsx             |  4 +-
 static/js/publisher/tour/tourBar.tsx          | 16 ++--
 static/js/publisher/tour/tourOverlay.tsx      |  4 +-
 static/js/publisher/tour/tourStepCard.tsx     |  4 +-
 static/sass/_snapcraft_tour.scss              |  2 +-
 static/sass/styles.scss                       |  4 +
 templates/publisher/listing.html              | 14 ---
 templates/store/publisher.html                |  4 +
 webapp/publisher/snaps/listing_views.py       |  2 +-
 webpack.config.entry.js                       |  1 -
 67 files changed, 294 insertions(+), 245 deletions(-)
 rename static/js/{publisher/listing => publisher-pages}/hooks/__tests__/useMutateListingData.test.ts (89%)
 rename static/js/{publisher/listing => publisher-pages}/hooks/__tests__/useVerified.test.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/hooks/useMutateListingData.ts (86%)
 rename static/js/{publisher/listing => publisher-pages}/hooks/useVerified.ts (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/AdditionalInformation/AdditionalInformation.tsx (97%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/AdditionalInformation/LicenseInputs.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/AdditionalInformation/LicenseSearch.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/AdditionalInformation/index.ts (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ContactInformation/ContactFields.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ContactInformation/ContactInformation.tsx (95%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ContactInformation/PrimaryDomainInput.tsx (97%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ContactInformation/__tests__/PrimaryDomainInput.test.tsx (87%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ContactInformation/index.ts (100%)
 rename static/js/{publisher/listing/components/App/App.tsx => publisher-pages/pages/Listing/Listing.tsx} (61%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/ImageUpload.tsx (96%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/ListingDetails.tsx (99%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/Screenshot.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/ScreenshotList.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/Screenshots.tsx (98%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingDetails/index.ts (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingForm/ListingForm.tsx (86%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/ListingForm/index.ts (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/PreviewForm/PreviewForm.tsx (100%)
 rename static/js/{publisher/listing/components => publisher-pages/pages/Listing}/PreviewForm/index.ts (100%)
 create mode 100644 static/js/publisher-pages/pages/Listing/index.tsx
 create mode 100644 static/js/publisher-pages/test-utils/index.ts
 rename static/js/{publisher/listing/test-utils/mockData.ts => publisher-pages/test-utils/mockListingData.ts} (97%)
 rename static/js/{publisher/listing => publisher-pages}/utils/__tests__/addDateToFilename.test.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/utils/__tests__/formatImageChanges.test.ts (100%)
 rename static/js/{publisher/listing/utils/__tests__/getDefaultData.test.ts => publisher-pages/utils/__tests__/getDefaultListingData.test.ts} (89%)
 rename static/js/{publisher/listing => publisher-pages}/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/utils/__tests__/validateImageDimensions.test.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/utils/addDateToFilename.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/utils/formatImageChanges.ts (100%)
 rename static/js/{publisher/listing/utils/getDefaultData.ts => publisher-pages/utils/getDefaultListingData.ts} (92%)
 rename static/js/{publisher/listing/utils/getChanges.ts => publisher-pages/utils/getListingChanges.ts} (96%)
 rename static/js/publisher-pages/utils/{getChanges.ts => getSettingsChanges.ts} (92%)
 rename static/js/publisher-pages/utils/{getFormData.ts => getSettingsFormData.ts} (90%)
 rename static/js/{publisher/listing => publisher-pages}/utils/shouldShowUpdateMetadataWarning.ts (100%)
 rename static/js/{publisher/listing => publisher-pages}/utils/validateImageDimensions.ts (100%)
 delete mode 100644 static/js/publisher/listing/components/App/index.ts
 delete mode 100644 static/js/publisher/listing/hooks/index.ts
 delete mode 100644 static/js/publisher/listing/test-utils/index.ts
 delete mode 100644 static/js/publisher/listing/types/index.d.ts
 delete mode 100644 static/js/publisher/listing/utils/index.ts
 delete mode 100644 templates/publisher/listing.html

diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 251ac12813..3ce309e21e 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -44,4 +44,7 @@ declare interface Window {
     whitelist_countries: string[];
     whitelist_country_keys: string;
   };
+  SNAP_LISTING_DATA: {
+    DNS_VERIFICATION_TOKEN: string;
+  };
 }
diff --git a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
index a6b71a5685..eb2eb093ed 100644
--- a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
+++ b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { Row, Col, Button } from "@canonical/react-components";
 
 import debounce from "../../../libs/debounce";
@@ -20,6 +20,8 @@ function SaveAndPreview({
   showPreview,
 }: Props) {
   const stickyBar = useRef<HTMLDivElement>(null);
+  const mainPanel = document.querySelector(".l-main") as HTMLElement;
+
   const handleScroll = () => {
     stickyBar?.current?.classList.toggle(
       "sticky-shadow",
@@ -27,13 +29,17 @@ function SaveAndPreview({
     );
   };
 
-  useEffect(() => {
-    document.addEventListener("scroll", debounce(handleScroll, 10, false));
-  }, []);
+  if (mainPanel) {
+    mainPanel.addEventListener("scroll", debounce(handleScroll, 10, false));
+  }
 
   return (
     <>
-      <div className="snapcraft-p-sticky js-sticky-bar" ref={stickyBar}>
+      <div
+        className="snapcraft-p-sticky js-sticky-bar"
+        ref={stickyBar}
+        style={{ margin: "0 -1.5rem", padding: "0 1.5rem" }}
+      >
         <Row>
           <Col size={7}>
             <p className="u-no-margin--bottom">
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
index 9100043a12..7fd2bacaa4 100644
--- a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
+++ b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
@@ -9,11 +9,13 @@ type Props = {
 function SectionNav({ activeTab, snapName }: Props) {
   return (
     <Tabs
+      listClassName="u-no-margin--bottom"
       links={[
         {
           label: "Listing",
           active: activeTab === "listing" || !activeTab,
-          href: `/${snapName}/listing`,
+          to: `/${snapName}/listing`,
+          component: Link,
         },
         {
           label: "Builds",
@@ -28,7 +30,8 @@ function SectionNav({ activeTab, snapName }: Props) {
         {
           label: "Metrics",
           active: activeTab === "metrics",
-          href: `/${snapName}/metrics`,
+          to: `/${snapName}/metrics`,
+          component: Link,
         },
         {
           label: "Publicise",
diff --git a/static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts b/static/js/publisher-pages/hooks/__tests__/useMutateListingData.test.ts
similarity index 89%
rename from static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts
rename to static/js/publisher-pages/hooks/__tests__/useMutateListingData.test.ts
index 78459ea221..64ce5d7017 100644
--- a/static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts
+++ b/static/js/publisher-pages/hooks/__tests__/useMutateListingData.test.ts
@@ -3,14 +3,14 @@ import { renderHook } from "@testing-library/react";
 
 import useMutateListingData from "../useMutateListingData";
 
-import { mockData } from "../../test-utils";
+import { mockListingData } from "../../test-utils";
 
 describe("useMutateListingData", () => {
   test("Calls useMutatation", () => {
     jest.spyOn(ReactQuery, "useMutation").mockImplementation(jest.fn());
     renderHook(() =>
       useMutateListingData({
-        data: mockData,
+        data: mockListingData,
         dirtyFields: {},
         getDefaultData: jest.fn(),
         refetch: jest.fn(),
diff --git a/static/js/publisher/listing/hooks/__tests__/useVerified.test.ts b/static/js/publisher-pages/hooks/__tests__/useVerified.test.ts
similarity index 100%
rename from static/js/publisher/listing/hooks/__tests__/useVerified.test.ts
rename to static/js/publisher-pages/hooks/__tests__/useVerified.test.ts
diff --git a/static/js/publisher-pages/hooks/index.ts b/static/js/publisher-pages/hooks/index.ts
index 2867be8665..6bac724388 100644
--- a/static/js/publisher-pages/hooks/index.ts
+++ b/static/js/publisher-pages/hooks/index.ts
@@ -1,4 +1,11 @@
 import useValidationSets from "./useValidationSets";
 import useValidationSet from "./useValidationSet";
+import useMutateListingData from "./useMutateListingData";
+import useVerified from "./useVerified";
 
-export { useValidationSets, useValidationSet };
+export {
+  useValidationSets,
+  useValidationSet,
+  useMutateListingData,
+  useVerified,
+};
diff --git a/static/js/publisher/listing/hooks/useMutateListingData.ts b/static/js/publisher-pages/hooks/useMutateListingData.ts
similarity index 86%
rename from static/js/publisher/listing/hooks/useMutateListingData.ts
rename to static/js/publisher-pages/hooks/useMutateListingData.ts
index 767f01c453..3d9f22f72d 100644
--- a/static/js/publisher/listing/hooks/useMutateListingData.ts
+++ b/static/js/publisher-pages/hooks/useMutateListingData.ts
@@ -1,11 +1,11 @@
 import { useMutation } from "react-query";
 
-import { addDateToFilename, getChanges } from "../utils";
+import { addDateToFilename, getListingChanges } from "../utils";
 
-import type { Data } from "../types";
+import type { ListingData } from "../types";
 
 type Options = {
-  data: Data;
+  data: ListingData;
   dirtyFields: any;
   getDefaultData: Function;
   refetch: Function;
@@ -31,7 +31,7 @@ function useMutateListingData({
     mutationFn: async (values: any) => {
       const formData = new FormData();
 
-      const changes = getChanges(dirtyFields, values, data);
+      const changes = getListingChanges(dirtyFields, values, data);
 
       formData.set("csrf_token", window.CSRF_TOKEN);
       formData.set("snap_id", data.snap_id);
@@ -77,9 +77,12 @@ function useMutateListingData({
       }
     },
     onSuccess: async () => {
-      setShowSuccessNotification(true);
       const response = await refetch();
+      setShowSuccessNotification(true);
       reset(getDefaultData(response.data));
+
+      const mainPanel = document.querySelector(".l-main") as HTMLElement;
+      mainPanel.scrollTo({ top: 0, left: 0, behavior: "smooth" });
     },
   });
 }
diff --git a/static/js/publisher/listing/hooks/useVerified.ts b/static/js/publisher-pages/hooks/useVerified.ts
similarity index 100%
rename from static/js/publisher/listing/hooks/useVerified.ts
rename to static/js/publisher-pages/hooks/useVerified.ts
diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index a38925af53..d7fa3d91ad 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -8,6 +8,7 @@ import Settings from "./pages/Settings";
 import ValidationSets from "./pages/ValidationSets";
 import ValidationSet from "./pages/ValidationSet";
 import Metrics from "./pages/Metrics";
+import Listing from "./pages/Listing";
 
 const router = createBrowserRouter([
   {
@@ -42,6 +43,10 @@ const router = createBrowserRouter([
         path: "/:snapId/metrics",
         element: <Metrics />,
       },
+      {
+        path: "/:snapId/listing",
+        element: <Listing />,
+      },
     ],
   },
 ]);
diff --git a/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/AdditionalInformation.tsx
similarity index 97%
rename from static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx
rename to static/js/publisher-pages/pages/Listing/AdditionalInformation/AdditionalInformation.tsx
index 40a3ae3f01..a8a708a276 100644
--- a/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx
+++ b/static/js/publisher-pages/pages/Listing/AdditionalInformation/AdditionalInformation.tsx
@@ -9,10 +9,10 @@ import { Row, Col } from "@canonical/react-components";
 
 import LicenseInputs from "./LicenseInputs";
 
-import type { Data } from "../../types";
+import type { ListingData } from "../../../types";
 
 type Props = {
-  data: Data;
+  data: ListingData;
   register: UseFormRegister<FieldValues>;
   getValues: UseFormGetValues<FieldValues>;
   setValue: UseFormSetValue<FieldValues>;
diff --git a/static/js/publisher/listing/components/AdditionalInformation/LicenseInputs.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx
similarity index 100%
rename from static/js/publisher/listing/components/AdditionalInformation/LicenseInputs.tsx
rename to static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx
diff --git a/static/js/publisher/listing/components/AdditionalInformation/LicenseSearch.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
similarity index 100%
rename from static/js/publisher/listing/components/AdditionalInformation/LicenseSearch.tsx
rename to static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
diff --git a/static/js/publisher/listing/components/AdditionalInformation/index.ts b/static/js/publisher-pages/pages/Listing/AdditionalInformation/index.ts
similarity index 100%
rename from static/js/publisher/listing/components/AdditionalInformation/index.ts
rename to static/js/publisher-pages/pages/Listing/AdditionalInformation/index.ts
diff --git a/static/js/publisher/listing/components/ContactInformation/ContactFields.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/ContactFields.tsx
similarity index 100%
rename from static/js/publisher/listing/components/ContactInformation/ContactFields.tsx
rename to static/js/publisher-pages/pages/Listing/ContactInformation/ContactFields.tsx
diff --git a/static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/ContactInformation.tsx
similarity index 95%
rename from static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx
rename to static/js/publisher-pages/pages/Listing/ContactInformation/ContactInformation.tsx
index 99e040663d..0da4c0bc5f 100644
--- a/static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/ContactInformation.tsx
@@ -9,10 +9,10 @@ import {
 import PrimaryDomainInput from "./PrimaryDomainInput";
 import ContactFields from "./ContactFields";
 
-import type { Data } from "../../types";
+import type { ListingData } from "../../../types";
 
 type Props = {
-  data: Data;
+  data: ListingData;
   register: UseFormRegister<FieldValues>;
   control: Control<FieldValues>;
   getFieldState: UseFormGetFieldState<FieldValues>;
diff --git a/static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
similarity index 97%
rename from static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx
rename to static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
index 025c67d9c1..69e36dc70a 100644
--- a/static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
@@ -9,12 +9,12 @@ import {
 import { nanoid } from "nanoid";
 import { Row, Col, Modal } from "@canonical/react-components";
 
-import { useVerified } from "../../hooks";
+import { useVerified } from "../../../hooks";
 
-import type { Data } from "../../types";
+import type { ListingData } from "../../../types";
 
 type Props = {
-  data: Data;
+  data: ListingData;
   register: UseFormRegister<FieldValues>;
   getFieldState: UseFormGetFieldState<FieldValues>;
   getValues: UseFormGetValues<FieldValues>;
@@ -26,14 +26,14 @@ function PrimaryDomainInput({
   getFieldState,
   getValues,
 }: Props) {
-  const { snapName } = useParams();
+  const { snapId } = useParams();
   const id = nanoid();
   const fieldState = getFieldState("primary_website");
   const [showVerifyModal, setShowVerifyModal] = useState(false);
-  const { isLoading, status, data: verifiedData } = useVerified(snapName);
+  const { isLoading, status, data: verifiedData } = useVerified(snapId);
   const domain = getValues("primary_website");
   const defaultDomain = data.primary_website;
-  const verificationToken = `SNAPCRAFT_IO_VERIFICATION=${window.DNS_VERIFICATION_TOKEN}`;
+  const verificationToken = `SNAPCRAFT_IO_VERIFICATION=${window.SNAP_LISTING_DATA.DNS_VERIFICATION_TOKEN}`;
 
   const noPathDomains = [
     "github.com",
diff --git a/static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
similarity index 87%
rename from static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
rename to static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
index 51d360fc9a..730e822c37 100644
--- a/static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
@@ -7,11 +7,13 @@ import "@testing-library/jest-dom";
 
 import PrimaryDomainInput from "../PrimaryDomainInput";
 
-import { mockData } from "../../../test-utils";
+import { mockListingData } from "../../../../test-utils";
 
-import type { Data } from "../../../types";
+import type { ListingData } from "../../../../types";
 
-window.DNS_VERIFICATION_TOKEN = "abc123";
+window.SNAP_LISTING_DATA = {
+  DNS_VERIFICATION_TOKEN: "abc123",
+};
 
 jest.mock("react-query", () => ({
   ...jest.requireActual("react-query"),
@@ -38,7 +40,10 @@ const mockUseFormReturnValue = {
   getValues: jest.fn().mockReturnValue("https://example.com"),
 };
 
-const renderComponent = (data: Data, defaultValues: { [key: string]: any }) => {
+const renderComponent = (
+  data: ListingData,
+  defaultValues: { [key: string]: any },
+) => {
   const Component = () => {
     const { register, getFieldState, getValues } = useForm({
       defaultValues,
@@ -71,7 +76,9 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     expect(screen.getByText("Verified ownership")).toBeInTheDocument();
   });
 
@@ -92,7 +99,9 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     const input = screen.getByRole("textbox", { name: "Primary website:" });
     await user.type(input, "https://example.comabc");
     expect(input).toHaveValue("https://example.comabc");
@@ -120,7 +129,9 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     const input = screen.getByRole("textbox", { name: "Primary website:" });
     await user.clear(input);
     await user.type(input, "/path");
@@ -141,7 +152,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
     const user = userEvent.setup();
     renderComponent(
-      { ...mockData, primary_website: "https://launchpad.net" },
+      { ...mockListingData, primary_website: "https://launchpad.net" },
       { primary_website: "https://launchpad.net" },
     );
     await user.type(
@@ -166,7 +177,9 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     await user.click(
       screen.getByRole("button", { name: "Verified ownership" }),
     );
@@ -187,7 +200,9 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     expect(screen.queryByText("Verified ownership")).not.toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Verify ownership" }),
@@ -209,7 +224,9 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     await user.click(screen.getByRole("button", { name: "Verify ownership" }));
     expect(
       screen.getByRole("heading", { level: 2, name: "Verify ownership" }),
@@ -234,7 +251,9 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent(mockData, { primary_website: "https://example.com" });
+    renderComponent(mockListingData, {
+      primary_website: "https://example.com",
+    });
     expect(
       screen.getByRole("button", { name: "Verify ownership" }),
     ).toBeDisabled();
diff --git a/static/js/publisher/listing/components/ContactInformation/index.ts b/static/js/publisher-pages/pages/Listing/ContactInformation/index.ts
similarity index 100%
rename from static/js/publisher/listing/components/ContactInformation/index.ts
rename to static/js/publisher-pages/pages/Listing/ContactInformation/index.ts
diff --git a/static/js/publisher/listing/components/App/App.tsx b/static/js/publisher-pages/pages/Listing/Listing.tsx
similarity index 61%
rename from static/js/publisher/listing/components/App/App.tsx
rename to static/js/publisher-pages/pages/Listing/Listing.tsx
index d41960378b..219d51b204 100644
--- a/static/js/publisher/listing/components/App/App.tsx
+++ b/static/js/publisher-pages/pages/Listing/Listing.tsx
@@ -2,15 +2,15 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "react-query";
 import { Strip } from "@canonical/react-components";
 
-import PageHeader from "../../../shared/PageHeader";
-import ListingForm from "../ListingForm";
+import SectionNav from "../../components/SectionNav";
+import ListingForm from "./ListingForm";
 
-function App(): JSX.Element {
-  const { snapName } = useParams();
+function Listing(): JSX.Element {
+  const { snapId } = useParams();
   const { data, isLoading, refetch } = useQuery({
     queryKey: ["listing"],
     queryFn: async () => {
-      const response = await fetch(`/api/${snapName}/listing`);
+      const response = await fetch(`/api/${snapId}/listing`);
 
       if (!response.ok) {
         throw new Error("There was a problem fetching listing data");
@@ -28,17 +28,18 @@ function App(): JSX.Element {
 
   return (
     <>
-      <PageHeader
-        snapName={snapName}
-        snapTitle={snapName}
-        activeTab="listing"
-      />
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        Listing
+      </h1>
+
+      <SectionNav snapName={snapId} activeTab="listing" />
 
       {isLoading && (
         <Strip shallow>
           <p>
             <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
-            {snapName} listing data
+            {snapId} listing data
           </p>
         </Strip>
       )}
@@ -48,4 +49,4 @@ function App(): JSX.Element {
   );
 }
 
-export default App;
+export default Listing;
diff --git a/static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
similarity index 96%
rename from static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx
rename to static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
index def3c8ce85..a33010bfa8 100644
--- a/static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
@@ -9,7 +9,7 @@ import {
   Icon,
 } from "@canonical/react-components";
 
-import { validateImageDimensions } from "../../utils";
+import { validateImageDimensions } from "../../../utils";
 
 type Props = {
   imageUrl: string | null;
@@ -236,12 +236,8 @@ function ImageUpload({
                 className="p-button--base snap-remove-icon"
                 onClick={() => {
                   setImageIsValid(true);
-                  setValue(imageUrlFieldKey, "", {
-                    shouldDirty: window?.listingData?.banner_urls[0] !== null,
-                  });
-                  setValue(imageFieldKey, new File([], ""), {
-                    shouldDirty: window?.listingData?.banner_urls[0] !== null,
-                  });
+                  setValue(imageUrlFieldKey, "");
+                  setValue(imageFieldKey, new File([], ""));
                   setPreviewImageUrl("");
                 }}
               >
diff --git a/static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
similarity index 99%
rename from static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx
rename to static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
index 3835ab4626..9a39e99bed 100644
--- a/static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
@@ -11,10 +11,10 @@ import { Row, Col, Button, Icon } from "@canonical/react-components";
 import ImageUpload from "./ImageUpload";
 import Screenshots from "./Screenshots";
 
-import type { Data } from "../../types";
+import type { ListingData } from "../../../types";
 
 type Props = {
-  data: Data;
+  data: ListingData;
   register: UseFormRegister<FieldValues>;
   getValues: UseFormGetValues<FieldValues>;
   setValue: UseFormSetValue<FieldValues>;
diff --git a/static/js/publisher/listing/components/ListingDetails/Screenshot.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx
similarity index 100%
rename from static/js/publisher/listing/components/ListingDetails/Screenshot.tsx
rename to static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx
diff --git a/static/js/publisher/listing/components/ListingDetails/ScreenshotList.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx
similarity index 100%
rename from static/js/publisher/listing/components/ListingDetails/ScreenshotList.tsx
rename to static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx
diff --git a/static/js/publisher/listing/components/ListingDetails/Screenshots.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
similarity index 98%
rename from static/js/publisher/listing/components/ListingDetails/Screenshots.tsx
rename to static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
index 83104d5109..8db14214a7 100644
--- a/static/js/publisher/listing/components/ListingDetails/Screenshots.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
@@ -3,7 +3,7 @@ import { useFieldArray } from "react-hook-form";
 import { nanoid } from "nanoid";
 import { Row, Col, Notification } from "@canonical/react-components";
 
-import { validateImageDimensions } from "../../utils";
+import { validateImageDimensions } from "../../../utils";
 
 import ScreenshotList from "./ScreenshotList";
 
diff --git a/static/js/publisher/listing/components/ListingDetails/index.ts b/static/js/publisher-pages/pages/Listing/ListingDetails/index.ts
similarity index 100%
rename from static/js/publisher/listing/components/ListingDetails/index.ts
rename to static/js/publisher-pages/pages/Listing/ListingDetails/index.ts
diff --git a/static/js/publisher/listing/components/ListingForm/ListingForm.tsx b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
similarity index 86%
rename from static/js/publisher/listing/components/ListingForm/ListingForm.tsx
rename to static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
index 8117761831..90e3051d3c 100644
--- a/static/js/publisher/listing/components/ListingForm/ListingForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
@@ -3,27 +3,30 @@ import { useParams } from "react-router-dom";
 import { useForm, useFormState, FieldValues } from "react-hook-form";
 import { Strip, Notification } from "@canonical/react-components";
 
-import SaveAndPreview from "../../../shared/SaveAndPreview";
+import SaveAndPreview from "../../../components/SaveAndPreview";
 import ListingDetails from "../ListingDetails";
 import ContactInformation from "../ContactInformation";
 import AdditionalInformation from "../AdditionalInformation";
 import PreviewForm from "../PreviewForm";
-import UpdateMetadataModal from "../../../shared/UpdateMetadataModal";
+import UpdateMetadataModal from "../../../components/UpdateMetadataModal";
 
-import { shouldShowUpdateMetadataWarning, getDefaultData } from "../../utils";
-import { initListingTour } from "../../../tour";
+import {
+  shouldShowUpdateMetadataWarning,
+  getDefaultListingData,
+} from "../../../utils";
+import { initListingTour } from "../../../../publisher/tour";
 
-import { useMutateListingData } from "../../hooks";
+import { useMutateListingData } from "../../../hooks";
 
-import type { Data } from "../../types";
+import type { ListingData } from "../../../types";
 
 type Props = {
-  data: Data;
+  data: ListingData;
   refetch: Function;
 };
 
 function ListingForm({ data, refetch }: Props): JSX.Element {
-  const { snapName } = useParams();
+  const { snapId } = useParams();
 
   const {
     register,
@@ -36,7 +39,7 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
     handleSubmit,
     watch,
   } = useForm<FieldValues>({
-    defaultValues: getDefaultData(data),
+    defaultValues: getDefaultListingData(data),
   });
 
   const { dirtyFields } = useFormState({ control });
@@ -57,13 +60,13 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
   const { mutate, isLoading } = useMutateListingData({
     data,
     dirtyFields,
-    getDefaultData,
+    getDefaultData: getDefaultListingData,
     refetch,
     reset,
     setShowSuccessNotification,
     setUpdateMetadataOnRelease,
     shouldShowUpdateMetadataWarning,
-    snapName,
+    snapName: snapId,
   });
 
   useEffect(() => {
@@ -71,13 +74,13 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
       "tour-container",
     ) as HTMLElement;
 
-    if (snapName) {
+    if (snapId) {
       initListingTour({
-        snapName,
+        snapName: snapId,
         container: tourContainer,
         formFields: {
           title: data.title,
-          snap_name: snapName,
+          snap_name: snapId,
           categories: [],
           video_urls: [],
           images: [],
@@ -107,7 +110,7 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
         })}
       >
         <SaveAndPreview
-          snapName={snapName}
+          snapName={snapId || ""}
           isDirty={formState.isDirty}
           reset={reset}
           isSaving={isLoading}
@@ -195,7 +198,7 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
           />
         </Strip>
       </form>
-      {snapName && <PreviewForm snapName={snapName} getValues={getValues} />}
+      {snapId && <PreviewForm snapName={snapId} getValues={getValues} />}
       <div id="tour-container" />
     </>
   );
diff --git a/static/js/publisher/listing/components/ListingForm/index.ts b/static/js/publisher-pages/pages/Listing/ListingForm/index.ts
similarity index 100%
rename from static/js/publisher/listing/components/ListingForm/index.ts
rename to static/js/publisher-pages/pages/Listing/ListingForm/index.ts
diff --git a/static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx b/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
similarity index 100%
rename from static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx
rename to static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
diff --git a/static/js/publisher/listing/components/PreviewForm/index.ts b/static/js/publisher-pages/pages/Listing/PreviewForm/index.ts
similarity index 100%
rename from static/js/publisher/listing/components/PreviewForm/index.ts
rename to static/js/publisher-pages/pages/Listing/PreviewForm/index.ts
diff --git a/static/js/publisher-pages/pages/Listing/index.tsx b/static/js/publisher-pages/pages/Listing/index.tsx
new file mode 100644
index 0000000000..f7078049ef
--- /dev/null
+++ b/static/js/publisher-pages/pages/Listing/index.tsx
@@ -0,0 +1,20 @@
+// import { createRoot } from "react-dom/client";
+// import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+// import { QueryClient, QueryClientProvider } from "react-query";
+// import App from "./components/App";
+
+// const queryClient = new QueryClient();
+
+// const container = document.getElementById("main-content");
+// const root = createRoot(container as HTMLElement);
+// root.render(
+//   <Router>
+//     <QueryClientProvider client={queryClient}>
+//       <Routes>
+//         <Route path="/:snapName/listing" element={<App />} />
+//       </Routes>
+//     </QueryClientProvider>
+//   </Router>
+// );
+
+export { default } from "./Listing";
diff --git a/static/js/publisher-pages/pages/Publicise/Publicise.tsx b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
index 770f4222c0..71c693dc6a 100644
--- a/static/js/publisher-pages/pages/Publicise/Publicise.tsx
+++ b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
@@ -1,8 +1,9 @@
-import { useParams, NavLink, Link } from "react-router-dom";
+import { useParams, NavLink } from "react-router-dom";
 import {
   Row,
   Col,
   SideNavigation,
+  Strip,
   Notification,
 } from "@canonical/react-components";
 
@@ -39,49 +40,50 @@ function Publicise({ view }: Props): JSX.Element {
 
       <SectionNav snapName={snapId} activeTab="publicise" />
 
-      {disableView() && (
-        <Notification severity="information">
-          When your snap is public and has a release, you'll be able to share it
-          using Store buttons, badges and embeddable cards. Make your snap
-          public in its <a href={`/${snapId}/settings`}>settings page</a>.
-        </Notification>
-      )}
-
-      <Row className={window.SNAP_PUBLICISE_DATA.private ? "u-disabled" : ""}>
-        <Col size={3}>
-          <SideNavigation
-            items={[
-              {
-                items: [
-                  {
-                    "aria-current": !view,
-                    label: "Snap Store buttons",
-                    to: `/${snapId}/publicise`,
-                    component: NavLink,
-                  },
-                  {
-                    "aria-current": view === "badges",
-                    label: "GitHub badges",
-                    to: `/${snapId}/publicise/badges`,
-                    component: NavLink,
-                  },
-                  {
-                    "aria-current": view === "cards",
-                    label: "Embeddable cards",
-                    to: `/${snapId}/publicise/cards`,
-                    component: NavLink,
-                  },
-                ],
-              },
-            ]}
-          />
-        </Col>
-        <Col size={9}>
-          {!view && <PubliciseButtons />}
-          {view === "badges" && <PubliciseBadges />}
-          {view === "cards" && <PubliciseCards />}
-        </Col>
-      </Row>
+      <Strip shallow>
+        {disableView() && (
+          <Notification severity="information">
+            When your snap is public and has a release, you'll be able to share
+            it using Store buttons, badges and embeddable cards. Make your snap
+            public in its <a href={`/${snapId}/settings`}>settings page</a>.
+          </Notification>
+        )}
+        <Row className={window.SNAP_PUBLICISE_DATA.private ? "u-disabled" : ""}>
+          <Col size={3}>
+            <SideNavigation
+              items={[
+                {
+                  items: [
+                    {
+                      "aria-current": !view,
+                      label: "Snap Store buttons",
+                      to: `/${snapId}/publicise`,
+                      component: NavLink,
+                    },
+                    {
+                      "aria-current": view === "badges",
+                      label: "GitHub badges",
+                      to: `/${snapId}/publicise/badges`,
+                      component: NavLink,
+                    },
+                    {
+                      "aria-current": view === "cards",
+                      label: "Embeddable cards",
+                      to: `/${snapId}/publicise/cards`,
+                      component: NavLink,
+                    },
+                  ],
+                },
+              ]}
+            />
+          </Col>
+          <Col size={9}>
+            {!view && <PubliciseButtons />}
+            {view === "badges" && <PubliciseBadges />}
+            {view === "cards" && <PubliciseCards />}
+          </Col>
+        </Row>
+      </Strip>
     </>
   );
 }
diff --git a/static/js/publisher-pages/pages/Settings/Settings.tsx b/static/js/publisher-pages/pages/Settings/Settings.tsx
index fb75796822..07f2907545 100644
--- a/static/js/publisher-pages/pages/Settings/Settings.tsx
+++ b/static/js/publisher-pages/pages/Settings/Settings.tsx
@@ -18,7 +18,7 @@ import UpdateMetadataModal from "../../components/UpdateMetadataModal";
 import SaveStateNotifications from "../../components/SaveStateNotifications";
 import { UnregisterSnapModal } from "./UnregisterSnapModal";
 
-import { getSettingsData, getFormData } from "../../utils";
+import { getSettingsData, getSettingsFormData } from "../../utils";
 
 function Settings() {
   const { snapId } = useParams();
@@ -92,7 +92,7 @@ function Settings() {
 
     const response = await fetch(`/${data.snap_name}/settings.json`, {
       method: "POST",
-      body: getFormData(settingsData, dirtyFields, data),
+      body: getSettingsFormData(settingsData, dirtyFields, data),
     });
 
     if (response.status !== 200) {
diff --git a/static/js/publisher-pages/routes/root.tsx b/static/js/publisher-pages/routes/root.tsx
index 77e878463f..6fe58ce9b5 100644
--- a/static/js/publisher-pages/routes/root.tsx
+++ b/static/js/publisher-pages/routes/root.tsx
@@ -25,7 +25,7 @@ function Root(): JSX.Element {
         />
       }
     >
-      <div id="main-content">
+      <div id="main-content" className="publisher-app">
         <Panel>
           <Row>
             <Col size={12}>
diff --git a/static/js/publisher-pages/test-utils/index.ts b/static/js/publisher-pages/test-utils/index.ts
new file mode 100644
index 0000000000..dc097f6463
--- /dev/null
+++ b/static/js/publisher-pages/test-utils/index.ts
@@ -0,0 +1,3 @@
+import { mockListingData } from "./mockListingData";
+
+export { mockListingData };
diff --git a/static/js/publisher/listing/test-utils/mockData.ts b/static/js/publisher-pages/test-utils/mockListingData.ts
similarity index 97%
rename from static/js/publisher/listing/test-utils/mockData.ts
rename to static/js/publisher-pages/test-utils/mockListingData.ts
index 75ad1d48b5..467bcd7ff9 100644
--- a/static/js/publisher/listing/test-utils/mockData.ts
+++ b/static/js/publisher-pages/test-utils/mockListingData.ts
@@ -1,4 +1,4 @@
-export const mockData = {
+export const mockListingData = {
   banner_urls: ["https://example.com/screenshot"],
   categories: [
     { name: "Test category 1", slug: "test-category-1" },
diff --git a/static/js/publisher-pages/types/index.d.ts b/static/js/publisher-pages/types/index.d.ts
index 922a6c6927..aa2e270670 100644
--- a/static/js/publisher-pages/types/index.d.ts
+++ b/static/js/publisher-pages/types/index.d.ts
@@ -33,3 +33,40 @@ export type SettingsData = {
   whitelist_countries: string[];
   whitelist_country_keys: string;
 };
+
+export type TourStep = {
+  id: string;
+  position?: string;
+  elements?: HTMLElement[];
+  title: string;
+  content: string;
+};
+
+export type ListingData = {
+  snap_id: string;
+  title: string;
+  video_urls: string;
+  summary: string;
+  description: string;
+  categories: { name: string; slug: string }[];
+  primary_category: string;
+  secondary_category: string;
+  websites: { url: string }[];
+  contacts: { url: string }[];
+  donations: { url: string }[];
+  source_code: { url: string }[];
+  issues: { url: string }[];
+  primary_website: string;
+  public_metrics_enabled: boolean;
+  public_metrics_blacklist: string[];
+  public_metrics_territories: boolean;
+  public_metrics_distros: boolean;
+  license: string;
+  license_type: string;
+  licenses: { key: string; name: string }[];
+  icon_url: string;
+  screenshot_urls: string[];
+  banner_urls: string[];
+  update_metadata_on_release: boolean;
+  tour_steps: Step[];
+};
diff --git a/static/js/publisher/listing/utils/__tests__/addDateToFilename.test.ts b/static/js/publisher-pages/utils/__tests__/addDateToFilename.test.ts
similarity index 100%
rename from static/js/publisher/listing/utils/__tests__/addDateToFilename.test.ts
rename to static/js/publisher-pages/utils/__tests__/addDateToFilename.test.ts
diff --git a/static/js/publisher/listing/utils/__tests__/formatImageChanges.test.ts b/static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts
similarity index 100%
rename from static/js/publisher/listing/utils/__tests__/formatImageChanges.test.ts
rename to static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts
diff --git a/static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts b/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
similarity index 89%
rename from static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts
rename to static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
index 964cd7222e..058788c9ef 100644
--- a/static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts
+++ b/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
@@ -1,10 +1,10 @@
-import getDefaultData from "../getDefaultData";
+import getDefaultListingData from "../getDefaultListingData";
 
-import { mockData } from "../../test-utils";
+import { mockListingData } from "../../test-utils";
 
 describe("getDefaultData", () => {
   test("returns default data", () => {
-    const defaultData = getDefaultData(mockData);
+    const defaultData = getDefaultListingData(mockListingData);
 
     expect(defaultData.contacts).toBeDefined();
     expect(defaultData.description).toBeDefined();
diff --git a/static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts b/static/js/publisher-pages/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
similarity index 100%
rename from static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
rename to static/js/publisher-pages/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
diff --git a/static/js/publisher/listing/utils/__tests__/validateImageDimensions.test.ts b/static/js/publisher-pages/utils/__tests__/validateImageDimensions.test.ts
similarity index 100%
rename from static/js/publisher/listing/utils/__tests__/validateImageDimensions.test.ts
rename to static/js/publisher-pages/utils/__tests__/validateImageDimensions.test.ts
diff --git a/static/js/publisher/listing/utils/addDateToFilename.ts b/static/js/publisher-pages/utils/addDateToFilename.ts
similarity index 100%
rename from static/js/publisher/listing/utils/addDateToFilename.ts
rename to static/js/publisher-pages/utils/addDateToFilename.ts
diff --git a/static/js/publisher/listing/utils/formatImageChanges.ts b/static/js/publisher-pages/utils/formatImageChanges.ts
similarity index 100%
rename from static/js/publisher/listing/utils/formatImageChanges.ts
rename to static/js/publisher-pages/utils/formatImageChanges.ts
diff --git a/static/js/publisher/listing/utils/getDefaultData.ts b/static/js/publisher-pages/utils/getDefaultListingData.ts
similarity index 92%
rename from static/js/publisher/listing/utils/getDefaultData.ts
rename to static/js/publisher-pages/utils/getDefaultListingData.ts
index c1bc79e3ac..5afe6aca79 100644
--- a/static/js/publisher/listing/utils/getDefaultData.ts
+++ b/static/js/publisher-pages/utils/getDefaultListingData.ts
@@ -1,4 +1,4 @@
-import type { Data } from "../types";
+import type { ListingData } from "../types";
 
 function getPublicMetricsTerritoriesValue(
   publicMetricsBlacklist: string[],
@@ -36,7 +36,9 @@ function getPublicMetricsDistrosValue(
   return false;
 }
 
-export default function getDefaultData(data: Data): { [key: string]: any } {
+export default function getDefaultListingData(data: ListingData): {
+  [key: string]: any;
+} {
   return {
     contacts: data.contacts,
     description: data.description,
diff --git a/static/js/publisher/listing/utils/getChanges.ts b/static/js/publisher-pages/utils/getListingChanges.ts
similarity index 96%
rename from static/js/publisher/listing/utils/getChanges.ts
rename to static/js/publisher-pages/utils/getListingChanges.ts
index f623c7aba2..34aad3744e 100644
--- a/static/js/publisher/listing/utils/getChanges.ts
+++ b/static/js/publisher-pages/utils/getListingChanges.ts
@@ -1,11 +1,11 @@
 import formatImageChanges from "./formatImageChanges";
 
-import type { Data } from "../types";
+import type { ListingData } from "../types";
 
-export default function getChanges(
+export default function getListingChanges(
   dirtyFields: any,
   fieldValues: any,
-  data: Data,
+  data: ListingData,
 ): { [key: string]: any } {
   const changes: { [key: string]: any } = {};
 
diff --git a/static/js/publisher-pages/utils/getChanges.ts b/static/js/publisher-pages/utils/getSettingsChanges.ts
similarity index 92%
rename from static/js/publisher-pages/utils/getChanges.ts
rename to static/js/publisher-pages/utils/getSettingsChanges.ts
index 8625ce7e37..26fd5ad7b4 100644
--- a/static/js/publisher-pages/utils/getChanges.ts
+++ b/static/js/publisher-pages/utils/getSettingsChanges.ts
@@ -1,4 +1,4 @@
-function getChanges(dirtyFields: { [key: string]: any }, data: any) {
+function getSettingsChanges(dirtyFields: { [key: string]: any }, data: any) {
   const changes: { [key: string]: any } = {};
 
   if (dirtyFields?.visibility) {
@@ -58,4 +58,4 @@ function getChanges(dirtyFields: { [key: string]: any }, data: any) {
   return changes;
 }
 
-export default getChanges;
+export default getSettingsChanges;
diff --git a/static/js/publisher-pages/utils/getFormData.ts b/static/js/publisher-pages/utils/getSettingsFormData.ts
similarity index 90%
rename from static/js/publisher-pages/utils/getFormData.ts
rename to static/js/publisher-pages/utils/getSettingsFormData.ts
index 06c5762d2e..93a264d006 100644
--- a/static/js/publisher-pages/utils/getFormData.ts
+++ b/static/js/publisher-pages/utils/getSettingsFormData.ts
@@ -1,13 +1,13 @@
-import getChanges from "./getChanges";
+import getSettingsChanges from "./getSettingsChanges";
 
 import type { SettingsData } from "../types";
 
-function getFormData(
+function getSettingsFormData(
   settingsData: SettingsData,
   dirtyFields: { [key: string]: any },
   data: any,
 ) {
-  const changes = getChanges(dirtyFields, data);
+  const changes = getSettingsChanges(dirtyFields, data);
   const formData = new FormData();
 
   formData.set("csrf_token", window.CSRF_TOKEN);
@@ -51,4 +51,4 @@ function getFormData(
   return formData;
 }
 
-export default getFormData;
+export default getSettingsFormData;
diff --git a/static/js/publisher-pages/utils/index.ts b/static/js/publisher-pages/utils/index.ts
index 0deb89bf75..6831b29c2a 100644
--- a/static/js/publisher-pages/utils/index.ts
+++ b/static/js/publisher-pages/utils/index.ts
@@ -1,5 +1,21 @@
 import getSettingsData from "./getSettingsData";
-import getChanges from "./getChanges";
-import getFormData from "./getFormData";
+import getSettingsChanges from "./getSettingsChanges";
+import getSettingsFormData from "./getSettingsFormData";
+import getListingChanges from "./getListingChanges";
+import formatImageChanges from "./formatImageChanges";
+import getDefaultListingData from "./getDefaultListingData";
+import shouldShowUpdateMetadataWarning from "./shouldShowUpdateMetadataWarning";
+import validateImageDimensions from "./validateImageDimensions";
+import addDateToFilename from "./addDateToFilename";
 
-export { getSettingsData, getChanges, getFormData };
+export {
+  getSettingsData,
+  getSettingsChanges,
+  getSettingsFormData,
+  getListingChanges,
+  formatImageChanges,
+  getDefaultListingData,
+  shouldShowUpdateMetadataWarning,
+  validateImageDimensions,
+  addDateToFilename,
+};
diff --git a/static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts b/static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts
similarity index 100%
rename from static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts
rename to static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts
diff --git a/static/js/publisher/listing/utils/validateImageDimensions.ts b/static/js/publisher-pages/utils/validateImageDimensions.ts
similarity index 100%
rename from static/js/publisher/listing/utils/validateImageDimensions.ts
rename to static/js/publisher-pages/utils/validateImageDimensions.ts
diff --git a/static/js/publisher/listing/components/App/index.ts b/static/js/publisher/listing/components/App/index.ts
deleted file mode 100644
index 8ce017e646..0000000000
--- a/static/js/publisher/listing/components/App/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./App";
diff --git a/static/js/publisher/listing/hooks/index.ts b/static/js/publisher/listing/hooks/index.ts
deleted file mode 100644
index bd59f1cd25..0000000000
--- a/static/js/publisher/listing/hooks/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useVerified from "./useVerified";
-import useMutateListingData from "./useMutateListingData";
-
-export { useVerified, useMutateListingData };
diff --git a/static/js/publisher/listing/test-utils/index.ts b/static/js/publisher/listing/test-utils/index.ts
deleted file mode 100644
index 5da2429913..0000000000
--- a/static/js/publisher/listing/test-utils/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { mockData } from "./mockData";
-
-export { mockData };
diff --git a/static/js/publisher/listing/types/index.d.ts b/static/js/publisher/listing/types/index.d.ts
deleted file mode 100644
index 37cd8c4e13..0000000000
--- a/static/js/publisher/listing/types/index.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-declare global {
-  interface Window {
-    SENTRY_DSN: string;
-    CSRF_TOKEN: string;
-    listingData: any;
-    tourSteps: any;
-  }
-}
-
-export type Step = {
-  id: string;
-  position?: string;
-  elements?: HTMLElement[];
-  title: string;
-  content: string;
-};
-
-export type Data = {
-  snap_id: string;
-  title: string;
-  video_urls: string;
-  summary: string;
-  description: string;
-  categories: { name: string; slug: string }[];
-  primary_category: string;
-  secondary_category: string;
-  websites: { url: string }[];
-  contacts: { url: string }[];
-  donations: { url: string }[];
-  source_code: { url: string }[];
-  issues: { url: string }[];
-  primary_website: string;
-  public_metrics_enabled: boolean;
-  public_metrics_blacklist: string[];
-  public_metrics_territories: boolean;
-  public_metrics_distros: boolean;
-  license: string;
-  license_type: string;
-  licenses: { key: string; name: string }[];
-  icon_url: string;
-  screenshot_urls: string[];
-  banner_urls: string[];
-  update_metadata_on_release: boolean;
-  tour_steps: Step[];
-};
diff --git a/static/js/publisher/listing/utils/index.ts b/static/js/publisher/listing/utils/index.ts
deleted file mode 100644
index d7a5f6555d..0000000000
--- a/static/js/publisher/listing/utils/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import validateImageDimensions from "./validateImageDimensions";
-import shouldShowUpdateMetadataWarning from "./shouldShowUpdateMetadataWarning";
-import addDateToFilename from "./addDateToFilename";
-import formatImageChanges from "./formatImageChanges";
-import getChanges from "./getChanges";
-import getDefaultData from "./getDefaultData";
-
-export {
-  validateImageDimensions,
-  shouldShowUpdateMetadataWarning,
-  addDateToFilename,
-  formatImageChanges,
-  getChanges,
-  getDefaultData,
-};
diff --git a/static/js/publisher/tour.tsx b/static/js/publisher/tour.tsx
index 0b2b5bab35..3af2d4ade6 100644
--- a/static/js/publisher/tour.tsx
+++ b/static/js/publisher/tour.tsx
@@ -4,7 +4,7 @@ import Tour from "./tour/tour";
 
 import { toggleShadowWhenSticky } from "./market/stickyListingBar";
 
-import type { Step } from "./listing/types";
+import type { TourStep } from "../publisher-pages/types";
 
 // returns true if % of truthy values in the array is above the threshold
 function isCompleted(fields: unknown[], threshold = 0.5): boolean {
@@ -21,7 +21,7 @@ export function initTour({
   startTour,
 }: {
   container: HTMLElement;
-  steps: Step[];
+  steps: TourStep[];
   onTourStarted: () => void;
   onTourClosed: () => void;
   startTour: boolean;
@@ -52,7 +52,7 @@ export function initListingTour({
 }: {
   snapName: string;
   container: HTMLElement;
-  steps: Step[];
+  steps: TourStep[];
   formFields: {
     title: string;
     snap_name: string;
diff --git a/static/js/publisher/tour/helpers.ts b/static/js/publisher/tour/helpers.ts
index 79be18f406..ce4bc6da7a 100644
--- a/static/js/publisher/tour/helpers.ts
+++ b/static/js/publisher/tour/helpers.ts
@@ -1,6 +1,6 @@
 import { MASK_OFFSET } from "./constants";
 
-import type { Step } from "../listing/types";
+import type { TourStep } from "../../publisher-pages/types";
 
 // check if element is part of the DOM and is visible
 export const isVisibleInDocument = (el: HTMLElement): boolean =>
@@ -8,7 +8,7 @@ export const isVisibleInDocument = (el: HTMLElement): boolean =>
 
 // find DOM elements for each step, ignore steps with no elements
 // set default position to "bottom-left"
-export function prepareSteps(steps: Step[]): Array<{
+export function prepareSteps(steps: TourStep[]): Array<{
   id: string;
   position: string;
   elements: HTMLElement[];
diff --git a/static/js/publisher/tour/tour.tsx b/static/js/publisher/tour/tour.tsx
index 6978f02aa7..bf7d8fc4b6 100644
--- a/static/js/publisher/tour/tour.tsx
+++ b/static/js/publisher/tour/tour.tsx
@@ -5,10 +5,10 @@ import TourBar from "./tourBar";
 
 import { tourStartedAutomatically } from "./metricsEvents";
 
-import type { Step } from "../listing/types";
+import type { TourStep } from "../../publisher-pages/types";
 
 type Props = {
-  steps: Step[];
+  steps: TourStep[];
   startTour: boolean;
   onTourStarted: () => void;
   onTourClosed: () => void;
diff --git a/static/js/publisher/tour/tourBar.tsx b/static/js/publisher/tour/tourBar.tsx
index d0b30bca1e..a76cdcf3b7 100644
--- a/static/js/publisher/tour/tourBar.tsx
+++ b/static/js/publisher/tour/tourBar.tsx
@@ -8,15 +8,13 @@ export default function TourBar({ showTour }: { showTour: () => void }) {
 
   return (
     <div className="p-tour-bar">
-      <div className="u-fixed-width u-clearfix">
-        <button
-          className="p-tour-bar__button"
-          data-tour="tour-end"
-          onClick={onButtonClick}
-        >
-          <i className="p-icon--question">Tour</i>
-        </button>
-      </div>
+      <button
+        className="p-tour-bar__button"
+        data-tour="tour-end"
+        onClick={onButtonClick}
+      >
+        <i className="p-icon--question">Tour</i>
+      </button>
     </div>
   );
 }
diff --git a/static/js/publisher/tour/tourOverlay.tsx b/static/js/publisher/tour/tourOverlay.tsx
index 64d918ba23..6fb5673c86 100644
--- a/static/js/publisher/tour/tourOverlay.tsx
+++ b/static/js/publisher/tour/tourOverlay.tsx
@@ -14,14 +14,14 @@ import {
 
 import { animateScrollTo } from "../../public/scroll-to";
 
-import type { Step } from "../listing/types";
+import type { TourStep } from "../../publisher-pages/types";
 
 export default function TourOverlay({
   steps,
   hideTour,
   currentStepIndex = 0,
 }: {
-  steps: Step[];
+  steps: TourStep[];
   hideTour: () => void;
   currentStepIndex?: number;
 }) {
diff --git a/static/js/publisher/tour/tourStepCard.tsx b/static/js/publisher/tour/tourStepCard.tsx
index 2b4865bac2..7c8cb9c188 100644
--- a/static/js/publisher/tour/tourStepCard.tsx
+++ b/static/js/publisher/tour/tourStepCard.tsx
@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
 
-import type { Step } from "../listing/types";
+import type { TourStep } from "../../publisher-pages/types";
 
 type Props = {
-  steps: Step[];
+  steps: TourStep[];
   currentStepIndex: number;
   mask: {
     top: number;
diff --git a/static/sass/_snapcraft_tour.scss b/static/sass/_snapcraft_tour.scss
index 8b3b88dd43..417c2fabb8 100644
--- a/static/sass/_snapcraft_tour.scss
+++ b/static/sass/_snapcraft_tour.scss
@@ -13,7 +13,7 @@
   .p-tour-bar {
     bottom: 0;
     left: 0;
-    padding: $spv--medium;
+    padding: $spv--medium $spv--x-large;
     pointer-events: none;
     position: fixed;
     right: 0;
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 71ac988599..5ede466624 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -568,3 +568,7 @@ dl {
     flex-grow: 1;
   }
 }
+
+.publisher-app > .p-panel > .p-panel__content {
+  overflow: visible;
+}
diff --git a/templates/publisher/listing.html b/templates/publisher/listing.html
deleted file mode 100644
index 27a6e41595..0000000000
--- a/templates/publisher/listing.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Listing details for {{ snap_name }}
-{% endblock %}
-
-{% block content %}
-<main id="main-content"></main>
-<script>
-  window.DNS_VERIFICATION_TOKEN = "{{ dns_verification_token }}"
-  window.CSRF_TOKEN = "{{ csrf_token() }}";
-</script>
-<script src="{{ static_url('js/dist/publisher-listing.js') }}"></script>
-{% endblock %}
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
index 95b7c4c29a..40d63e6288 100644
--- a/templates/store/publisher.html
+++ b/templates/store/publisher.html
@@ -28,6 +28,10 @@
     blacklist_countries: {% if blacklist_country_codes %}{{ blacklist_country_codes|tojson }}{% else %}[]{% endif %},
     visibility_locked: {% if visibility_locked %}{{ visibility_locked|tojson }}{% else %}false{% endif %},
   }
+
+  window.SNAP_LISTING_DATA = {
+    DNS_VERIFICATION_TOKEN: "{{ dns_verification_token }}",
+  };
 </script>
 <script src="{{ static_url('js/dist/publisher-pages.js') }}"></script>
 {% endblock %}
diff --git a/webapp/publisher/snaps/listing_views.py b/webapp/publisher/snaps/listing_views.py
index 38dde97413..1ce3a6bb83 100644
--- a/webapp/publisher/snaps/listing_views.py
+++ b/webapp/publisher/snaps/listing_views.py
@@ -166,7 +166,7 @@ def get_listing_snap(snap_name):
             snap_details["snap_name"], snap_details["links"]["website"][0]
         )
     return flask.render_template(
-        "publisher/listing.html",
+        "store/publisher.html",
         snap_name=snap_name,
         dns_verification_token=token,
     )
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
index 0bdcf04789..edf1d75f05 100644
--- a/webpack.config.entry.js
+++ b/webpack.config.entry.js
@@ -17,7 +17,6 @@ module.exports = {
   "distro-install": "./static/js/public/distro-install.ts",
   "publisher-details": "./static/js/public/publisher-details.ts",
   "brand-store": "./static/js/brand-store/brand-store.tsx",
-  "publisher-listing": "./static/js/publisher/listing/index.tsx",
   "about-listing": "./static/js/public/about/listing.ts",
   store: "./static/js/store/index.tsx",
   "publisher-pages": "./static/js/publisher-pages/index.tsx",

From 2d1670a453de99d8e4ac66e8ed3399ddbcd41876 Mon Sep 17 00:00:00 2001
From: ilayda-cp <ilayda.cavusoglupars@canonical.com>
Date: Tue, 8 Oct 2024 13:47:12 +0300
Subject: [PATCH 06/24] feat: add breadcrumb nav to the metrics page (#4871)

---
 static/js/publisher-pages/pages/Metrics/Metrics.tsx | 7 ++++++-
 static/sass/_snapcraft_metrics.scss                 | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/js/publisher-pages/pages/Metrics/Metrics.tsx b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
index c4ba0a9db6..cad0eae341 100644
--- a/static/js/publisher-pages/pages/Metrics/Metrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 
 const EmptyData = () => {
   return (
-    <section className="p-strip--light is-shallow">
+    <section className="p-strip--light is-shallow snapcraft-metrics__info">
       <Row>
         <Col size={6}>
           <h2 className="p-heading--4" style={{ marginLeft: "1.5rem" }}>
@@ -40,6 +40,11 @@ function Metrics(): JSX.Element {
 
   return (
     <>
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        Metrics
+      </h1>
+
       <SectionNav snapName={snapId} activeTab="metrics" />
       {isEmpty && <EmptyData />}
 
diff --git a/static/sass/_snapcraft_metrics.scss b/static/sass/_snapcraft_metrics.scss
index 6474636245..d5c7aa022f 100644
--- a/static/sass/_snapcraft_metrics.scss
+++ b/static/sass/_snapcraft_metrics.scss
@@ -61,4 +61,8 @@
       vertical-align: middle;
     }
   }
+
+  .snapcraft-metrics__info {
+    margin-top: 1.5rem;
+  }
 }

From 175a239b291bc9b6d2492330992fa0bf61ecbec6 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Tue, 8 Oct 2024 13:32:09 +0100
Subject: [PATCH 07/24] feat: Create endpoints to get repo data and builds data
 (#4873)

---
 webapp/publisher/snaps/build_views.py | 127 +++++++++-----------------
 webapp/publisher/snaps/views.py       |   8 +-
 2 files changed, 47 insertions(+), 88 deletions(-)

diff --git a/webapp/publisher/snaps/build_views.py b/webapp/publisher/snaps/build_views.py
index a66ae04327..d59018320e 100644
--- a/webapp/publisher/snaps/build_views.py
+++ b/webapp/publisher/snaps/build_views.py
@@ -14,7 +14,7 @@
 from webapp.decorators import login_required
 from webapp.extensions import csrf
 from webapp.publisher.snaps.builds import map_build_and_upload_states
-from werkzeug.exceptions import Unauthorized, Forbidden
+from werkzeug.exceptions import Unauthorized
 
 GITHUB_SNAPCRAFT_USER_TOKEN = os.getenv("GITHUB_SNAPCRAFT_USER_TOKEN")
 GITHUB_WEBHOOK_HOST_URL = os.getenv("GITHUB_WEBHOOK_HOST_URL")
@@ -66,7 +66,10 @@ def get_builds(lp_snap, selection):
 
 
 @login_required
-def get_snap_builds(snap_name):
+def get_snap_repo(snap_name):
+    res = {"message": "", "success": True}
+    data = {"github_orgs": [], "github_repository": None, "github_user": None}
+
     details = publisher_api.get_snap_info(snap_name, flask.session)
 
     # API call to make users without needed permissions refresh the session
@@ -75,16 +78,6 @@ def get_snap_builds(snap_name):
         session=flask.session, snap_name=snap_name, channels=["edge"]
     )
 
-    context = {
-        "publisher_name": details["publisher"]["display-name"],
-        "snap_id": details["snap_id"],
-        "snap_name": details["snap_name"],
-        "snap_title": details["title"],
-        "snap_builds_enabled": False,
-        "snap_builds": [],
-        "total_builds": 0,
-    }
-
     # Get built snap in launchpad with this store name
     lp_snap = launchpad.get_snap_by_store_name(details["snap_name"])
 
@@ -98,67 +91,52 @@ def get_snap_builds(snap_name):
         )
 
         # Git repository without GitHub hostname
-        context["github_repository"] = lp_snap["git_repository_url"][19:]
-        github_owner, github_repo = context["github_repository"].split("/")
-        gh_snap_base = None
+        data["github_repository"] = lp_snap["git_repository_url"][19:]
+        github_owner, github_repo = data["github_repository"].split("/")
 
-        try:
-            context["github_repository_exists"] = github.check_if_repo_exists(
-                github_owner, github_repo
-            )
-            context["yaml_file_exists"] = github.get_snapcraft_yaml_location(
-                github_owner, github_repo
-            )
+        if not github.check_if_repo_exists(github_owner, github_repo):
+            data["success"] = False
+            data["message"] = "This app has been revoked"
 
-            if context["yaml_file_exists"]:
-                try:
-                    yaml_data = github.get_snapcraft_yaml_data(
-                        github_owner,
-                        github_repo,
-                        location=context["yaml_file_exists"],
-                    )
-                    gh_snap_base = yaml_data.get(
-                        "build-base", yaml_data.get("base", None)
-                    )
-                except InvalidYAML:
-                    # If we can't parse the yaml we don't
-                    # want to cause an error
-                    pass
-
-        except Unauthorized:
-            context["github_app_revoked"] = True
-
-        builds = get_builds(lp_snap, slice(0, BUILDS_PER_PAGE))
-        context.update(builds)
-
-        # Notify about i386 arch
-        if gh_snap_base and (
-            not gh_snap_base.startswith("core")
-            or (
-                gh_snap_base.startswith("core")
-                and gh_snap_base.replace("core", "")
-                and int(gh_snap_base.replace("core", "")) >= 20
-            )
-        ):
-            # Check if this publisher was building for i386 recently
-            for build in builds["snap_builds"]:
-                if build["arch_tag"] == "i386":
-                    context["dropped_i386"] = True
-                    break
+        if github.get_user():
+            data["github_user"] = github.get_user()
+            data["github_orgs"] = github.get_orgs()
 
-        context["snap_builds_enabled"] = bool(context["snap_builds"])
     else:
+        data["github_repository"] = None
         github = GitHub(flask.session.get("github_auth_secret"))
 
-        try:
-            context["github_user"] = github.get_user()
-        except (Unauthorized, Forbidden):
-            context["github_user"] = None
+        if github.get_user():
+            data["github_user"] = github.get_user()
+            data["github_orgs"] = github.get_orgs()
+        else:
+            data["success"] = False
+            data["message"] = "Unauthorized"
 
-        if context["github_user"]:
-            context["github_orgs"] = github.get_orgs()
+    res["data"] = data
 
-    return flask.render_template("publisher/builds.html", **context)
+    return flask.jsonify(res)
+
+
+@login_required
+def get_snap_builds(snap_name):
+    res = {"message": "", "success": True}
+    data = {"snap_builds": [], "total_builds": 0}
+
+    details = publisher_api.get_snap_info(snap_name, flask.session)
+    start = flask.request.args.get("start", 0, type=int)
+    size = flask.request.args.get("size", 15, type=int)
+    build_slice = slice(start, size)
+
+    # Get built snap in launchpad with this store name
+    lp_snap = launchpad.get_snap_by_store_name(details["snap_name"])
+
+    if lp_snap:
+        data.update(get_builds(lp_snap, build_slice))
+
+    res["data"] = data
+
+    return flask.jsonify(res)
 
 
 @login_required
@@ -247,25 +225,6 @@ def validate_repo(github_token, snap_name, gh_owner, gh_repo):
     return result
 
 
-@login_required
-def get_snap_builds_json(snap_name):
-    details = publisher_api.get_snap_info(snap_name, flask.session)
-
-    context = {"snap_builds": []}
-
-    start = flask.request.args.get("start", 0, type=int)
-    size = flask.request.args.get("size", 15, type=int)
-    build_slice = slice(start, size)
-
-    # Get built snap in launchpad with this store name
-    lp_snap = launchpad.get_snap_by_store_name(details["snap_name"])
-
-    if lp_snap:
-        context.update(get_builds(lp_snap, build_slice))
-
-    return flask.jsonify(context)
-
-
 @login_required
 def get_validate_repo(snap_name):
     details = publisher_api.get_snap_info(snap_name, flask.session)
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 40b978a9ac..8cf1ea2280 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -83,13 +83,13 @@
 
 # Build views
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds",
-    view_func=build_views.get_snap_builds,
+    "/api/<snap_name>/repo",
+    view_func=build_views.get_snap_repo,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds.json",
-    view_func=build_views.get_snap_builds_json,
+    "/api/<snap_name>/builds",
+    view_func=build_views.get_snap_builds,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(

From 46f36b5511f147d9a92d8588bda62d8f5f526a8c Mon Sep 17 00:00:00 2001
From: ilayda-cp <ilayda.cavusoglupars@canonical.com>
Date: Mon, 21 Oct 2024 11:00:15 +0300
Subject: [PATCH 08/24]  feat: update badge sources (#4892)

---
 .../pages/Publicise/PubliciseButtons.tsx          | 15 +++++++++------
 templates/store/snap-embedded-card.html           |  5 ++---
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
index 8a9c205c9e..1f0a0aad67 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
@@ -23,20 +23,23 @@ function PubliciseButtons(): JSX.Element {
   const { snapId } = useParams();
   const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
 
+  const darkBadgeSource = `https://snapcraft.io/${selectedLanguage}/dark/install.svg`;
+  const lightBadgeSource = `https://snapcraft.io/${selectedLanguage}/light/install.svg`;
+
   const htmlSnippetBlack = `<a href="https://snapcraft.io/${snapId}">
-  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg" />
+  <img alt="Get it from the Snap Store" src=${darkBadgeSource} />
 </a>
 `;
 
   const htmlSnippetWhite = `<a href="https://snapcraft.io/${snapId}">
-  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg" />
+  <img alt="Get it from the Snap Store" src=${lightBadgeSource} />
 </a>
 `;
 
-  const markdownSnippetBlack = `[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg)](https://snapcraft.io/${snapId})
+  const markdownSnippetBlack = `[![Get it from the Snap Store](${darkBadgeSource})](https://snapcraft.io/${snapId})
 `;
 
-  const markdownSnippetWhite = `[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg)](https://snapcraft.io/${snapId})
+  const markdownSnippetWhite = `[![Get it from the Snap Store](${lightBadgeSource})](https://snapcraft.io/${snapId})
 `;
 
   return (
@@ -73,7 +76,7 @@ function PubliciseButtons(): JSX.Element {
         <Col size={10}>
           <p>
             <img
-              src={`https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-black.svg`}
+              src={darkBadgeSource}
               alt="Get it from the Snap Store"
               width="182"
               height="56"
@@ -108,7 +111,7 @@ function PubliciseButtons(): JSX.Element {
         <Col size={10}>
           <p>
             <img
-              src={`https://snapcraft.io/static/images/badges/${selectedLanguage}/snap-store-white.svg`}
+              src={lightBadgeSource}
               alt="Get it from the Snap Store"
               width="182"
               height="56"
diff --git a/templates/store/snap-embedded-card.html b/templates/store/snap-embedded-card.html
index 30e3509e62..912a58187b 100644
--- a/templates/store/snap-embedded-card.html
+++ b/templates/store/snap-embedded-card.html
@@ -56,9 +56,8 @@ <h1 class="p-heading--2 p-snap-heading__name" data-live="title">{{ snap_title }}
         <h4 class="p-embedded-description__summary">{{ summary }}</h4>
       {% endif %}
       {% if button %}
-      <div class="p-embedded-description__badge">
-        <img alt="Get it from the Snap Store" src="https://snapcraft.io/en/{% if button == 'white' %}light{% else %}dark{% endif %}/install.svg" />
-      </div>
+      <img alt="Get it from the Snap Store"
+        src="https://snapcraft.io/en/{% if button == 'white' %}light{% else %}dark{% endif %}/install.svg" />
       {% endif %}
     </div>
   </div>

From 4453b7c95cc6c1f396f0f019b25fc883b6867e49 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 24 Oct 2024 09:07:57 +0100
Subject: [PATCH 09/24] feat: Add builds section to publisher pages (#4890)

Simplify step 1

Simplify step 2

Simplify step 3

Simplify step 4

Simplify step 5
---
 .../components/SectionNav/SectionNav.tsx      |   3 +-
 static/js/publisher-pages/index.tsx           |  28 +-
 .../js/publisher-pages/pages/Build/Build.tsx  | 146 ++++++
 .../js/publisher-pages/pages/Build/index.ts   |   1 +
 .../publisher-pages/pages/Builds/Builds.tsx   |  80 +++
 .../pages/Builds/DisconnectRepoActions.tsx    |  65 +++
 .../pages/Builds/LoggedOut.tsx                |  85 ++++
 .../pages/Builds/RepoConnected.tsx            | 279 ++++++++++
 .../pages/Builds/RepoNotConnected.tsx         |  81 +++
 .../pages/Builds/RepoSelector.tsx             | 266 ++++++++++
 .../js/publisher-pages/pages/Builds/index.ts  |   1 +
 static/js/publisher-pages/state/atoms.ts      |  18 +
 static/js/publisher-pages/types/index.d.ts    |  10 +
 .../builds/components/buildsTable.js          | 145 ------
 .../builds/components/datalistSelect.js       |  49 --
 .../builds/components/datalistSelect.test.js  |  53 --
 .../builds/components/repoConnect.js          | 475 ------------------
 .../builds/components/repoConnect.test.js     |  38 --
 .../js/publisher/builds/components/select.js  |  29 --
 .../builds/components/select.test.js          |  33 --
 .../builds/components/triggerBuild.js         |  54 --
 .../builds/components/triggerBuild.test.js    |  29 --
 static/js/publisher/builds/helpers.test.js    |  50 --
 static/js/publisher/builds/index.js           | 314 ------------
 static/js/publisher/publisher.ts              |   8 -
 static/sass/_snapcraft_market.scss            |   3 +-
 templates/publisher/build.html                |  85 ----
 templates/publisher/builds.html               | 284 -----------
 webapp/publisher/snaps/build_views.py         |  14 +-
 webapp/publisher/snaps/views.py               |  30 +-
 30 files changed, 1094 insertions(+), 1662 deletions(-)
 create mode 100644 static/js/publisher-pages/pages/Build/Build.tsx
 create mode 100644 static/js/publisher-pages/pages/Build/index.ts
 create mode 100644 static/js/publisher-pages/pages/Builds/Builds.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/LoggedOut.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/RepoConnected.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/RepoSelector.tsx
 create mode 100644 static/js/publisher-pages/pages/Builds/index.ts
 create mode 100644 static/js/publisher-pages/state/atoms.ts
 delete mode 100644 static/js/publisher/builds/components/buildsTable.js
 delete mode 100644 static/js/publisher/builds/components/datalistSelect.js
 delete mode 100644 static/js/publisher/builds/components/datalistSelect.test.js
 delete mode 100644 static/js/publisher/builds/components/repoConnect.js
 delete mode 100644 static/js/publisher/builds/components/repoConnect.test.js
 delete mode 100644 static/js/publisher/builds/components/select.js
 delete mode 100644 static/js/publisher/builds/components/select.test.js
 delete mode 100644 static/js/publisher/builds/components/triggerBuild.js
 delete mode 100644 static/js/publisher/builds/components/triggerBuild.test.js
 delete mode 100644 static/js/publisher/builds/helpers.test.js
 delete mode 100644 static/js/publisher/builds/index.js
 delete mode 100644 templates/publisher/build.html
 delete mode 100644 templates/publisher/builds.html

diff --git a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
index 7fd2bacaa4..da7acf4e42 100644
--- a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
+++ b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
@@ -20,7 +20,8 @@ function SectionNav({ activeTab, snapName }: Props) {
         {
           label: "Builds",
           active: activeTab === "builds",
-          href: `/${snapName}/builds`,
+          to: `/${snapName}/builds`,
+          component: Link,
         },
         {
           label: "Releases",
diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index d7fa3d91ad..c29502a763 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { RecoilRoot } from "recoil";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 import Root from "./routes/root";
@@ -9,6 +10,8 @@ import ValidationSets from "./pages/ValidationSets";
 import ValidationSet from "./pages/ValidationSet";
 import Metrics from "./pages/Metrics";
 import Listing from "./pages/Listing";
+import Builds from "./pages/Builds";
+import Build from "./pages/Build";
 
 const router = createBrowserRouter([
   {
@@ -47,6 +50,14 @@ const router = createBrowserRouter([
         path: "/:snapId/listing",
         element: <Listing />,
       },
+      {
+        path: "/:snapId/builds",
+        element: <Builds />,
+      },
+      {
+        path: "/:snapId/builds/:buildId",
+        element: <Build />,
+      },
     ],
   },
 ]);
@@ -54,10 +65,19 @@ const router = createBrowserRouter([
 const rootEl = document.getElementById("root") as HTMLElement;
 const root = createRoot(rootEl);
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
 
 root.render(
-  <QueryClientProvider client={queryClient}>
-    <RouterProvider router={router} />
-  </QueryClientProvider>,
+  <RecoilRoot>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </RecoilRoot>,
 );
diff --git a/static/js/publisher-pages/pages/Build/Build.tsx b/static/js/publisher-pages/pages/Build/Build.tsx
new file mode 100644
index 0000000000..d28763fa23
--- /dev/null
+++ b/static/js/publisher-pages/pages/Build/Build.tsx
@@ -0,0 +1,146 @@
+import { useParams, Link } from "react-router-dom";
+import { useQuery } from "react-query";
+import { Strip, Row, Col, MainTable } from "@canonical/react-components";
+import { formatDistanceToNow, formatDuration } from "date-fns";
+
+import SectionNav from "../../components/SectionNav";
+
+function Build(): JSX.Element {
+  const { buildId, snapId } = useParams();
+  const { data, isFetched } = useQuery({
+    queryKey: ["build"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/builds/${buildId}`);
+
+      if (!response.ok) {
+        throw new Error("There was a problem trying to fetch build data");
+      }
+
+      const responseData = await response.json();
+
+      if (!responseData.success) {
+        throw new Error("There was a problem trying to fetch build data");
+      }
+
+      return responseData.data;
+    },
+  });
+
+  const formatDurationString = (duration?: string): string => {
+    if (!duration) {
+      return "-";
+    }
+
+    const durationParts = duration.split(":");
+
+    return formatDuration({
+      hours: parseInt(durationParts[0]),
+      minutes: parseInt(durationParts[1]),
+      seconds: Math.floor(parseInt(durationParts[2])),
+    });
+  };
+
+  const formatStatus = (status: string): JSX.Element => {
+    switch (status) {
+      case "never_built":
+        return <>Never built</>;
+      case "building_soon":
+        return <>Building soon</>;
+      case "wont_release":
+        return <>Won't release</>;
+      case "released":
+        return <>Released</>;
+      case "release_failed":
+        return <>Release failed</>;
+      case "releasing_soon":
+        return <>Releasing soon</>;
+      case "in_progress":
+        return (
+          <>
+            <i className="p-icon--spinner u-animation--spin" />
+            In progress
+          </>
+        );
+      case "failed_to_build":
+        return <>Failed to build</>;
+      case "cancelled":
+        return <>Cancelled</>;
+      case "unknown":
+        return <>Unknown</>;
+      case "ERROR":
+        return <>Error</>;
+      case "SUCCESS":
+        return <>Success</>;
+      case "IDLE":
+        return <>Idle</>;
+      default:
+        return <>{status}</>;
+    }
+  };
+
+  return (
+    <>
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /{" "}
+        <Link to={`/${snapId}/builds`}>Builds</Link> / Build #{buildId}
+      </h1>
+      <SectionNav activeTab="builds" snapName={snapId} />
+      <Strip shallow>
+        {isFetched && data && (
+          <MainTable
+            headers={[
+              { content: "id" },
+              { content: "Architecture" },
+              { content: "Build duration" },
+              { content: "Result" },
+              { content: "Build finished", className: "u-align-text--right" },
+            ]}
+            rows={[
+              {
+                columns: [
+                  { content: buildId },
+                  { content: data.snap_build.arch_tag },
+                  { content: data.snap_build.duration },
+                  { content: data.snap_build.status },
+                  {
+                    content: formatDistanceToNow(data.snap_build.datebuilt, {
+                      addSuffix: true,
+                    }),
+                    className: "u-align--right",
+                  },
+                ],
+              },
+            ]}
+          />
+        )}
+        <Row>
+          <Col size={6}>
+            <h2 className="p-heading--4">Build log</h2>
+          </Col>
+          <Col size={6} className="u-align-text--right">
+            <a className="p-button--base" href="#footer">
+              Scroll to bottom
+            </a>
+            {isFetched && data && (
+              <a
+                target="_blank"
+                href={data.snap_build.logs}
+                className="p-button"
+              >
+                View raw
+              </a>
+            )}
+          </Col>
+        </Row>
+        {isFetched && data && (
+          <>
+            <pre>{data.raw_logs}</pre>
+          </>
+        )}
+      </Strip>
+      <div id="footer"></div>
+    </>
+  );
+}
+
+export default Build;
diff --git a/static/js/publisher-pages/pages/Build/index.ts b/static/js/publisher-pages/pages/Build/index.ts
new file mode 100644
index 0000000000..8d02daadd7
--- /dev/null
+++ b/static/js/publisher-pages/pages/Build/index.ts
@@ -0,0 +1 @@
+export { default } from "./Build";
diff --git a/static/js/publisher-pages/pages/Builds/Builds.tsx b/static/js/publisher-pages/pages/Builds/Builds.tsx
new file mode 100644
index 0000000000..54a7c1127e
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/Builds.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useQuery } from "react-query";
+import { useRecoilState } from "recoil";
+import { Strip } from "@canonical/react-components";
+
+import SectionNav from "../../components/SectionNav";
+import LoggedOut from "./LoggedOut";
+import RepoNotConnected from "./RepoNotConnected";
+import RepoConnected from "./RepoConnected";
+
+import {
+  buildLoggedInState,
+  buildRepoConnectedState,
+  githubDataState,
+} from "../../state/atoms";
+
+function Builds(): JSX.Element {
+  const { snapId } = useParams();
+  const [githubData, setGithubData] = useRecoilState(githubDataState);
+  const [loggedIn, setLoggedIn] = useRecoilState(buildLoggedInState);
+  const [repoConnected, setRepoConnected] = useRecoilState(
+    buildRepoConnectedState,
+  );
+  const [autoTriggerBuild, setAutoTriggerBuild] = useState<boolean>(false);
+  const { isLoading } = useQuery({
+    queryKey: ["githubData"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/repo`);
+
+      if (!response.ok) {
+        setGithubData(null);
+      }
+
+      const responseData = await response.json();
+
+      const githubData = responseData.data;
+
+      setLoggedIn(githubData.github_user !== null);
+      setRepoConnected(githubData.github_repository !== null);
+      setGithubData(responseData.data);
+
+      return responseData.data;
+    },
+    retry: 0,
+  });
+
+  return (
+    <>
+      <h1 className="p-heading--4">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        Builds
+      </h1>
+
+      <SectionNav snapName={snapId} activeTab="builds" />
+
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
+            {snapId} builds data
+          </p>
+        </Strip>
+      )}
+
+      {!isLoading && !loggedIn && <LoggedOut />}
+      {!isLoading && loggedIn && !repoConnected && (
+        <RepoNotConnected setAutoTriggerBuild={setAutoTriggerBuild} />
+      )}
+      {githubData && loggedIn && repoConnected && (
+        <RepoConnected
+          autoTriggerBuild={autoTriggerBuild}
+          setAutoTriggerBuild={setAutoTriggerBuild}
+        />
+      )}
+    </>
+  );
+}
+
+export default Builds;
diff --git a/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx b/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
new file mode 100644
index 0000000000..9d53ecafe9
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useSetRecoilState } from "recoil";
+import { Button } from "@canonical/react-components";
+
+import { buildRepoConnectedState } from "../../state/atoms";
+
+import type { GithubData } from "../../types";
+
+type Props = {
+  setDisconnectModalOpen: Function;
+  githubData: GithubData | null;
+};
+
+function DisconnectRepoActions({
+  setDisconnectModalOpen,
+  githubData,
+}: Props): JSX.Element {
+  const { snapId } = useParams();
+  const setRepoConnected = useSetRecoilState(buildRepoConnectedState);
+  const [disconnecting, setDisconnecting] = useState<boolean>(false);
+
+  const handleRepoDisconnect = async () => {
+    setDisconnecting(true);
+    const formData = new FormData();
+    formData.set("csrf_token", window.CSRF_TOKEN);
+    const response = await fetch(`/api/${snapId}/builds/disconnect`, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (!response.ok) {
+      if (githubData !== null) {
+        setRepoConnected(false);
+      }
+    }
+
+    setRepoConnected(false);
+    setDisconnectModalOpen(false);
+    setDisconnecting(false);
+  };
+
+  return (
+    <>
+      <Button
+        className="u-no-margin--bottom"
+        onClick={() => {
+          setDisconnectModalOpen(false);
+        }}
+      >
+        Cancel
+      </Button>
+      <Button
+        appearance="positive"
+        className="u-no-margin--bottom u-no-margin--right"
+        disabled={disconnecting}
+        onClick={handleRepoDisconnect}
+      >
+        Confirm
+      </Button>
+    </>
+  );
+}
+
+export default DisconnectRepoActions;
diff --git a/static/js/publisher-pages/pages/Builds/LoggedOut.tsx b/static/js/publisher-pages/pages/Builds/LoggedOut.tsx
new file mode 100644
index 0000000000..ca91208d6a
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/LoggedOut.tsx
@@ -0,0 +1,85 @@
+import { useParams } from "react-router-dom";
+import { Strip, Row, Col } from "@canonical/react-components";
+
+function BuildsDefault() {
+  const { snapId } = useParams();
+
+  return (
+    <>
+      <div className="snapcraft-p-sticky js-sticky-bar">
+        <div className="row">
+          <ul className="p-inline-list u-no-margin--bottom">
+            <li className="p-inline-list__item u-no-margin--right">
+              Login to your GitHub account to start building.
+            </li>
+            <li className="p-inline-list__item">
+              <a
+                href={`/github/auth?back=/${snapId}/builds`}
+                className="p-button--positive u-no-margin--bottom u-float-right"
+              >
+                <span>Log in </span>
+                <i className="p-icon--github-white"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="u-fixed-width">
+        <hr className="u-no-margin--bottom" />
+      </div>
+      <Strip>
+        <div className="u-fixed-width u-align--center u-hide--small u-hide--medium">
+          <img
+            src="https://assets.ubuntu.com/v1/ed6d1c5b-build.snapcraft.hero.svg"
+            alt=""
+            width="100%"
+          />
+        </div>
+        <Row>
+          <Col size={4} className="u-align-text--center">
+            <img
+              src="https://assets.ubuntu.com/v1/82de77b0-build.snapcraft.hero-01.svg"
+              alt=""
+              width="343"
+              height="288"
+              className="u-hide u-show--small"
+            />
+            <p>
+              Start by creating a repo and pushing your code to GitHub. Make
+              sure that your repo includes a snapcraft.yaml file.
+            </p>
+          </Col>
+          <Col size={4} className="u-align-text--center">
+            <img
+              src="https://assets.ubuntu.com/v1/275ddbf9-build.snapcraft.hero-02.svg"
+              alt=""
+              width="343"
+              height="288"
+              className="u-hide u-show--small"
+            />
+            <p>
+              Register a name on Snapcraft and attach it to your repo to start
+              building. Your snap will be built automatically for all the
+              distros.
+            </p>
+          </Col>
+          <Col size={4} className="u-align-text--center">
+            <img
+              src="https://assets.ubuntu.com/v1/e708bab9-build.snapcraft.hero-03.svg"
+              alt=""
+              width="343"
+              height="288"
+              className="u-hide u-show--small"
+            />
+            <p>
+              Release your snap to your users. From here on, all the updates you
+              do to your code will trigger automatic builds.
+            </p>
+          </Col>
+        </Row>
+      </Strip>
+    </>
+  );
+}
+
+export default BuildsDefault;
diff --git a/static/js/publisher-pages/pages/Builds/RepoConnected.tsx b/static/js/publisher-pages/pages/Builds/RepoConnected.tsx
new file mode 100644
index 0000000000..0e6511f451
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/RepoConnected.tsx
@@ -0,0 +1,279 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "react-query";
+import { useRecoilValue } from "recoil";
+import { useParams, Link } from "react-router-dom";
+import { formatDistanceToNow, formatDuration } from "date-fns";
+import {
+  Strip,
+  Button,
+  Modal,
+  Row,
+  Col,
+  MainTable,
+} from "@canonical/react-components";
+
+import DisconnectRepoActions from "./DisconnectRepoActions";
+
+import { githubDataState } from "../../state/atoms";
+
+function RepoConnected({
+  autoTriggerBuild,
+  setAutoTriggerBuild,
+}: {
+  autoTriggerBuild: boolean;
+  setAutoTriggerBuild: Function;
+}): JSX.Element {
+  const { snapId } = useParams();
+  const githubData = useRecoilValue(githubDataState);
+  const [disconnectModalOpen, setDisconnectModalOpen] =
+    useState<boolean>(false);
+  const [triggeringBuild, setTriggeringBuild] = useState<boolean>(false);
+  const { isLoading, isFetched, data, refetch } = useQuery({
+    queryKey: ["repo"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/builds`);
+      const data = await response.json();
+      return data.data;
+    },
+    onSettled: () => {
+      setTriggeringBuild(false);
+    },
+  });
+
+  const formatDurationString = (duration?: string): string => {
+    if (!duration) {
+      return "-";
+    }
+
+    const durationParts = duration.split(":");
+
+    return formatDuration({
+      hours: parseInt(durationParts[0]),
+      minutes: parseInt(durationParts[1]),
+      seconds: Math.floor(parseInt(durationParts[2])),
+    });
+  };
+
+  const formatStatus = (status: string): JSX.Element => {
+    switch (status) {
+      case "never_built":
+        return <>Never built</>;
+      case "building_soon":
+        return <>Building soon</>;
+      case "wont_release":
+        return <>Won't release</>;
+      case "released":
+        return <>Released</>;
+      case "release_failed":
+        return <>Release failed</>;
+      case "releasing_soon":
+        return <>Releasing soon</>;
+      case "in_progress":
+        return (
+          <>
+            <i className="p-icon--spinner u-animation--spin" />
+            In progress
+          </>
+        );
+      case "failed_to_build":
+        return <>Failed to build</>;
+      case "cancelled":
+        return <>Cancelled</>;
+      case "unknown":
+        return <>Unknown</>;
+      case "ERROR":
+        return <>Error</>;
+      case "SUCCESS":
+        return <>Success</>;
+      case "IDLE":
+        return <>Idle</>;
+      default:
+        return <>{status}</>;
+    }
+  };
+
+  async function trigger() {
+    const response = await fetch(`/api/${snapId}/builds/trigger-build`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": window.CSRF_TOKEN,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Unable to trigger new build");
+    }
+
+    refetch();
+    setAutoTriggerBuild(false);
+  }
+
+  if (autoTriggerBuild) {
+    trigger();
+  }
+
+  useEffect(() => {
+    setInterval(() => {
+      refetch();
+    }, 30000);
+  }, []);
+
+  return (
+    <>
+      <Strip shallow className="u-no-padding--top u-no-padding--bottom">
+        <div className="snapcraft-p-sticky js-sticky-bar">
+          <div className="u-fixed-width">
+            {githubData !== null && (
+              <p>
+                Your snap is linked to:{" "}
+                <a href={`https://github.com/${githubData.github_repository}`}>
+                  {githubData.github_repository}
+                </a>{" "}
+                |{" "}
+                <Button
+                  appearance="link"
+                  onClick={() => {
+                    setDisconnectModalOpen(true);
+                  }}
+                >
+                  Disconnect repo
+                </Button>
+              </p>
+            )}
+          </div>
+        </div>
+      </Strip>
+      <Row>
+        <Col size={6}>
+          <h2 className="p-heading--4">Latest builds</h2>
+        </Col>
+        <Col size={6} className="u-align--right">
+          <Button
+            disabled={triggeringBuild}
+            onClick={async () => {
+              setTriggeringBuild(true);
+              const response = await fetch(
+                `/api/${snapId}/builds/trigger-build`,
+                {
+                  method: "POST",
+                  headers: {
+                    "Content-Type": "application/json",
+                    "X-CSRFToken": window.CSRF_TOKEN,
+                  },
+                },
+              );
+
+              if (!response.ok) {
+                throw new Error("Unable to trigger new build");
+              }
+
+              refetch();
+            }}
+          >
+            {triggeringBuild ? (
+              <>
+                <i className="p-icon--spinner u-animation--spin"></i>
+                &nbsp;Requesting
+              </>
+            ) : (
+              "Trigger new build"
+            )}
+          </Button>
+        </Col>
+      </Row>
+      {isLoading && <>Waiting for builds...</>}
+      {isFetched && data && (
+        <>
+          <MainTable
+            sortable
+            headers={[
+              { content: "ID", sortKey: "id" },
+              { content: "Architecture", sortKey: "arch" },
+              { content: "Build duration", sortKey: "duration" },
+              {
+                content: "Result",
+                sortKey: "result",
+                className: "p-table__cell--icon-placeholder",
+              },
+              {
+                content: "Build finished",
+                sortKey: "status",
+                className: "u-align--right",
+              },
+            ]}
+            rows={data.snap_builds.map(
+              (build: {
+                id: string;
+                arch_tag: string;
+                duration: string;
+                status: string;
+                datebuilt: string;
+              }) => {
+                return {
+                  columns: [
+                    {
+                      content: (
+                        <Link to={`/${snapId}/builds/${build.id}`}>
+                          {build.id}
+                        </Link>
+                      ),
+                    },
+                    { content: build.arch_tag },
+                    { content: formatDurationString(build.duration) },
+                    {
+                      content: formatStatus(build.status),
+                      className: "p-table__cell--icon-placeholder",
+                    },
+                    {
+                      content: build.datebuilt
+                        ? formatDistanceToNow(build.datebuilt, {
+                            addSuffix: true,
+                          })
+                        : "-",
+                      className: "u-align--right",
+                    },
+                  ],
+                };
+              },
+            )}
+          />
+        </>
+      )}
+      {disconnectModalOpen && (
+        <Modal
+          close={() => {
+            setDisconnectModalOpen(false);
+          }}
+          title="Disconnecting your repository"
+          buttonRow={
+            <DisconnectRepoActions
+              setDisconnectModalOpen={setDisconnectModalOpen}
+              githubData={githubData}
+            />
+          }
+        >
+          <p>
+            By disconnecting this repository from your snap, the following will
+            occur:
+          </p>
+          <ul>
+            <li>
+              Previous builds for this snap will disappear from the Builds page
+            </li>
+            <li>
+              You will be able to continue to release your previous revisions on
+              the Releases tab
+            </li>
+          </ul>
+          <p>
+            Do you wish to{" "}
+            <strong>continue disconnecting your repository?</strong>
+          </p>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default RepoConnected;
diff --git a/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx b/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
new file mode 100644
index 0000000000..fd04590593
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
@@ -0,0 +1,81 @@
+import { useRecoilValue } from "recoil";
+import { Strip } from "@canonical/react-components";
+
+import RepoSelector from "./RepoSelector";
+
+import { githubDataState } from "../../state/atoms";
+
+import type { GithubData } from "../../types/";
+
+function RepoNotConnected({
+  setAutoTriggerBuild,
+}: {
+  setAutoTriggerBuild: Function;
+}): JSX.Element {
+  const githubData = useRecoilValue<GithubData | null>(githubDataState);
+
+  return (
+    <>
+      {githubData !== null && githubData.github_user && (
+        <div className="snapcraft-p-sticky js-sticky-bar">
+          <div className="u-fixed-width">
+            <ul className="p-inline-list u-no-margin--bottom">
+              <li className="p-inline-list__item u-no-margin--right">
+                Your GitHub account is connected.
+              </li>
+              <li className="p-inline-list__item">
+                <a
+                  href={`https://github.com/${githubData.github_user.login}`}
+                  className="p-link--soft u-float-right"
+                >
+                  <img
+                    src={githubData.github_user.avatarUrl}
+                    alt={`@${githubData.github_user.login}`}
+                    className="p-build__avatar"
+                  />{" "}
+                  {githubData.github_user.name}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      )}
+      <div className="u-fixed-width">
+        <hr className="u-no-margin--bottom" />
+      </div>
+      {githubData !== null && (
+        <RepoSelector
+          githubData={githubData}
+          setAutoTriggerBuild={setAutoTriggerBuild}
+        />
+      )}
+      <div className="u-fixed-width">
+        <hr className="u-no-margin--bottom" />
+      </div>
+      <Strip shallow>
+        <div className="u-fixed-width">
+          <h4>If you can't find a repository …</h4>
+          <p>
+            Want to <strong>use a private repo</strong>? We're working hard on
+            making these buildable.
+          </p>
+          <p>
+            <strong>Don't have admin permission</strong>? Ask a repo admin to
+            add it instead, and it will show up in your repo list too.
+          </p>
+          <p>
+            <strong>Missing an organization</strong>?
+          </p>
+          <a
+            className="p-button"
+            href="https://github.com/settings/applications"
+          >
+            Review organization access
+          </a>
+        </div>
+      </Strip>
+    </>
+  );
+}
+
+export default RepoNotConnected;
diff --git a/static/js/publisher-pages/pages/Builds/RepoSelector.tsx b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
new file mode 100644
index 0000000000..767a914814
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
@@ -0,0 +1,266 @@
+import { ChangeEvent, ChangeEventHandler, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useSetRecoilState } from "recoil";
+import { Strip, Row, Col, Select, Button } from "@canonical/react-components";
+
+import { buildRepoConnectedState } from "../../state/atoms";
+
+import type { GithubData } from "../../types/";
+
+type Repo = { name: string; nameWithOwner: string };
+
+type Props = {
+  githubData: GithubData;
+  setAutoTriggerBuild: Function;
+};
+
+function RepoSelector({ githubData, setAutoTriggerBuild }: Props) {
+  const rawLogsUrl =
+    "https://github.com/canonical/juju-dashboard-1/new/master?filename=snap%2Fsnapcraft.yaml&value=%0A%20%20%23%20After%20registering%20a%20name%20on%20build.snapcraft.io%2C%20commit%20an%20uncommented%20line%3A%0A%20%20%23%20name%3A%20steve-test-snap%0A%20%20version%3A%20%270.1%27%20%23%20just%20for%20humans%2C%20typically%20%271.2%2Bgit%27%20or%20%271.3.2%27%0A%20%20summary%3A%20Single-line%20elevator%20pitch%20for%20your%20amazing%20snap%20%23%2079%20char%20long%20summary%0A%20%20description%3A%20%7C%0A%20%20%20%20This%20is%20my-snap%27s%20description.%20You%20have%20a%20paragraph%20or%20two%20to%20tell%20the%0A%20%20%20%20most%20important%20story%20about%20your%20snap.%20Keep%20it%20under%20100%20words%20though%2C%0A%20%20%20%20we%20live%20in%20tweetspace%20and%20your%20description%20wants%20to%20look%20good%20in%20the%20snap%0A%20%20%20%20store.%0A%0A%20%20grade%3A%20devel%20%23%20must%20be%20%27stable%27%20to%20release%20into%20candidate%2Fstable%20channels%0A%20%20confinement%3A%20devmode%20%23%20use%20%27strict%27%20once%20you%20have%20the%20right%20plugs%20and%20slots%0A%0A%20%20parts%3A%0A%20%20%20%20my-part%3A%0A%20%20%20%20%20%20%23%20See%20%27snapcraft%20plugins%27%0A%20%20%20%20%20%20plugin%3A%20nil%0A%20%20";
+  const { snapId } = useParams();
+  const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
+  const [selectedRepo, setSelectedRepo] = useState<Repo | undefined>();
+  const [building, setBuilding] = useState<boolean>(false);
+  const setRepoConnected = useSetRecoilState(buildRepoConnectedState);
+  const [validating, setValidating] = useState<boolean>(false);
+  const [validationMessage, setValidationMessage] = useState<string>("");
+  const [repos, setRepos] = useState<Repo[]>([]);
+  const [reposLoading, setReposLoading] = useState<boolean>(false);
+  const [validRepo, setValidRepo] = useState<boolean | null>(null);
+  const [validationError, setValidationError] = useState<boolean>(false);
+  const validateRepo = async (repo: Repo | undefined) => {
+    if (!repo) {
+      return;
+    }
+
+    setValidating(true);
+
+    const response = await fetch(
+      `/api/${snapId}/builds/validate-repo?repo=${repo.nameWithOwner}`,
+    );
+
+    if (!response.ok) {
+      setValidationError(true);
+      throw new Error("Not a valid repo");
+    }
+
+    const responseData = await response.json();
+
+    if (responseData.success) {
+      setValidRepo(true);
+      setValidationMessage("");
+      setValidationError(false);
+    } else {
+      setValidationMessage(responseData.error.message);
+      setValidationError(true);
+      setValidRepo(null);
+    }
+
+    setValidating(false);
+  };
+
+  const getRepos = async (org?: string) => {
+    setReposLoading(true);
+
+    let apiUrl = "/publisher/github/get-repos";
+
+    if (org) {
+      apiUrl += `?org=${org}`;
+    }
+
+    const response = await fetch(apiUrl);
+
+    if (!response.ok) {
+      throw Error("Unable to fetch repos");
+    }
+
+    const responseData = await response.json();
+
+    setReposLoading(false);
+
+    setRepos(responseData);
+  };
+
+  const getOrgs = (): { label: string; value: string }[] => {
+    if (githubData) {
+      return githubData.github_orgs.map((org) => {
+        return {
+          label: org.name,
+          value: org.name,
+        };
+      });
+    }
+
+    return [];
+  };
+
+  const getValidationStatusClassName = (): string => {
+    if (validRepo) {
+      return "is-success";
+    }
+
+    if (validationError) {
+      return "is-error";
+    }
+
+    return "";
+  };
+
+  const handleOrganizationChange = (e: ChangeEvent) => {
+    const target = e.target as HTMLInputElement;
+
+    if (target.value) {
+      setReposLoading(true);
+
+      const org = target.value;
+
+      if (org === githubData.github_user.login) {
+        getRepos();
+      } else {
+        getRepos(org);
+      }
+
+      setSelectedOrg(org);
+    } else {
+      setSelectedOrg(null);
+    }
+  };
+
+  const handleRepoChange = (e: ChangeEvent) => {
+    const target = e.target as HTMLInputElement;
+    const searchTerm = target.value;
+
+    if (!searchTerm) {
+      setValidationError(false);
+      setValidRepo(false);
+    }
+
+    const selectedRepo = repos.find((repo: Repo) => repo.name === searchTerm);
+
+    setSelectedRepo(selectedRepo);
+
+    if (selectedRepo) {
+      validateRepo(selectedRepo);
+    }
+  };
+
+  const connectRepo = async () => {
+    setBuilding(true);
+    const formData = new FormData();
+    formData.set("csrf_token", window.CSRF_TOKEN);
+    if (selectedRepo) {
+      formData.set("github_repository", selectedRepo.nameWithOwner);
+    }
+
+    const response = await fetch(`/api/${snapId}/builds`, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (response) {
+      setAutoTriggerBuild(true);
+    }
+
+    setRepoConnected(true);
+  };
+
+  return (
+    <Strip shallow>
+      <p>
+        Your repo needs a snapcraft.yaml file, so that Snapcraft can make it
+        buildable, installable, and runnable.
+      </p>
+      <label className="p-form__label">Select a repository:</label>
+      <Row>
+        <Col size={4}>
+          <Select
+            defaultValue=""
+            options={[
+              { label: "Select organization", value: "" },
+              {
+                label: githubData.github_user.name,
+                value: githubData?.github_user.login,
+              },
+              ...getOrgs(),
+            ]}
+            onChange={handleOrganizationChange}
+          />
+        </Col>
+        <Col
+          size={6}
+          className={`p-form-validation ${getValidationStatusClassName()}`}
+          style={{ position: "relative" }}
+        >
+          <input
+            type="text"
+            list="repo-list"
+            placeholder="Search your repos"
+            disabled={selectedOrg === null || validating}
+            className="p-form-validation__input"
+            onChange={handleRepoChange}
+          />
+          {reposLoading ||
+            (validating && (
+              <span className="p-icon-container">
+                <i className="p-icon--spinner u-animation--spin" />
+              </span>
+            ))}
+          <datalist id="repo-list">
+            {repos.map((repo: Repo) => (
+              <option value={repo.name} key={repo.name} />
+            ))}
+          </datalist>
+        </Col>
+        <Col size={2}>
+          {validRepo === true && (
+            <Button
+              appearance="positive"
+              disabled={building}
+              onClick={() => {
+                connectRepo();
+              }}
+            >
+              Start building
+            </Button>
+          )}
+          {validationError && (
+            <Button
+              className="p-tooltip--btm-center"
+              aria-describedby="recheck-tooltip"
+              onClick={() => {
+                validateRepo(selectedRepo);
+              }}
+            >
+              <i className="p-icon--restart"></i>
+              <span
+                className="p-tooltip__message"
+                role="tooltip"
+                id="recheck-tooltip"
+              >
+                Re-check
+              </span>
+            </Button>
+          )}
+        </Col>
+      </Row>
+      {validationError && (
+        <div className="u-fixed-width">
+          <p>{validationMessage}</p>
+          <p>
+            <a href="/docs/creating-a-snap">Learn the basics</a>, or{" "}
+            <a href={rawLogsUrl}>get started with a template</a>.
+          </p>
+          <p>
+            Don't have snapcraft?{" "}
+            <a href="/docs/snapcraft-overview">
+              Install it on your own PC for testing
+            </a>
+            .
+          </p>
+        </div>
+      )}
+    </Strip>
+  );
+}
+
+export default RepoSelector;
diff --git a/static/js/publisher-pages/pages/Builds/index.ts b/static/js/publisher-pages/pages/Builds/index.ts
new file mode 100644
index 0000000000..ef7b783bd9
--- /dev/null
+++ b/static/js/publisher-pages/pages/Builds/index.ts
@@ -0,0 +1 @@
+export { default } from "./Builds";
diff --git a/static/js/publisher-pages/state/atoms.ts b/static/js/publisher-pages/state/atoms.ts
new file mode 100644
index 0000000000..1c5d6f6d24
--- /dev/null
+++ b/static/js/publisher-pages/state/atoms.ts
@@ -0,0 +1,18 @@
+import { atom } from "recoil";
+
+import type { GithubData } from "../types";
+
+export const buildLoggedInState = atom({
+  key: "buildLoggedInstate",
+  default: false,
+});
+
+export const buildRepoConnectedState = atom({
+  key: "buildRepoConnectedState",
+  default: false,
+});
+
+export const githubDataState = atom<GithubData | null>({
+  key: "githubDataState",
+  default: null,
+});
diff --git a/static/js/publisher-pages/types/index.d.ts b/static/js/publisher-pages/types/index.d.ts
index aa2e270670..0e0bc8828d 100644
--- a/static/js/publisher-pages/types/index.d.ts
+++ b/static/js/publisher-pages/types/index.d.ts
@@ -70,3 +70,13 @@ export type ListingData = {
   update_metadata_on_release: boolean;
   tour_steps: Step[];
 };
+
+export type GithubData = {
+  github_orgs: { name: string }[];
+  github_repository: string | null;
+  github_user: {
+    avatarUrl: string;
+    login: string;
+    name: string;
+  };
+};
diff --git a/static/js/publisher/builds/components/buildsTable.js b/static/js/publisher/builds/components/buildsTable.js
deleted file mode 100644
index 5dfcd7ccd4..0000000000
--- a/static/js/publisher/builds/components/buildsTable.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-import { formatDistance, parseISO } from "date-fns";
-
-import ModularTable from "@canonical/react-components/dist/components/ModularTable";
-import SummaryButton from "@canonical/react-components/dist/components/SummaryButton";
-
-import { UserFacingStatus, createDuration } from "../helpers";
-
-const StatusCell = ({ build, queueTime }) => {
-  const status = UserFacingStatus[build.status];
-
-  const title =
-    build.queue_time && queueTime[build.arch_tag]
-      ? `Queue time: up to ${queueTime[build.arch_tag]}`
-      : null;
-
-  return (
-    <Fragment>
-      <span className="u-hide u-show--small">{status.shortStatusMessage}</span>
-      <span className="u-hide--small u-hide--medium" title={title}>
-        {status.statusMessage}
-      </span>
-    </Fragment>
-  );
-};
-
-StatusCell.propTypes = {
-  build: PropTypes.shape({
-    status: PropTypes.string.isRequired,
-    queue_time: PropTypes.string,
-    arch_tag: PropTypes.string.isRequired,
-  }),
-  queueTime: PropTypes.object,
-};
-
-const BuildsTable = ({
-  builds,
-  singleBuild,
-  snapName,
-  queueTime,
-  totalBuilds,
-  isLoading,
-  showMoreHandler,
-}) => {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: "ID",
-        accessor: "id",
-        Cell: ({ value }) =>
-          value ? (
-            singleBuild ? (
-              `#${value}`
-            ) : (
-              <a href={`/${snapName}/builds/${value}`}>#{value}</a>
-            )
-          ) : (
-            ""
-          ),
-      },
-      { Header: "Architecture", accessor: "arch_tag" },
-      {
-        Header: "Build Duration",
-        accessor: "duration",
-        className: "u-hide--small",
-        Cell: ({ value }) => createDuration(value),
-      },
-      {
-        Header: "Result",
-        className: "p-table__cell--icon-placeholder u-truncate",
-        accessor: (build) =>
-          build.status === "in_progress" && build.duration
-            ? "releasing_soon"
-            : build.status,
-        // this function is technically an inline React component,
-        // but we don't want to define a name and props for it
-        // eslint-disable-next-line react/display-name, react/prop-types
-        Cell: ({ row }) => (
-          // get the raw build object from the row data
-          // eslint-disable-next-line react/prop-types
-          <StatusCell queueTime={queueTime} build={row.original} />
-        ),
-        getCellIcon: ({ row }) => {
-          const status = UserFacingStatus[row.original.status];
-          return status.icon ? status.icon : false;
-        },
-      },
-      {
-        Header: "Build Finished",
-        accessor: "datebuilt",
-        className: "u-align-text--right",
-        Cell: ({ value }) =>
-          value
-            ? formatDistance(parseISO(value), new Date(), {
-                addSuffix: true,
-              })
-            : "",
-      },
-    ],
-    // updates to builds and queueTime affect columns, so they should be recalculated when they change
-    [builds, queueTime],
-  );
-
-  const data = React.useMemo(() => builds, [builds]);
-
-  const remainingBuilds = totalBuilds - builds.length;
-  const showMoreCount = remainingBuilds > 15 ? 15 : remainingBuilds;
-
-  const footer =
-    remainingBuilds > 0 ? (
-      <div className="u-align--right">
-        <SummaryButton
-          summary={`Showing ${builds.length} out of ${totalBuilds} builds.`}
-          label={`Show ${showMoreCount} more`}
-          isLoading={isLoading}
-          onClick={showMoreHandler}
-        />
-      </div>
-    ) : null;
-
-  return (
-    <React.Fragment>
-      <ModularTable
-        columns={columns}
-        data={data}
-        emptyMsg="Waiting for builds..."
-        footer={footer}
-      />
-    </React.Fragment>
-  );
-};
-
-BuildsTable.propTypes = {
-  builds: PropTypes.array,
-  snapName: PropTypes.string,
-  singleBuild: PropTypes.bool,
-  queueTime: PropTypes.object,
-  totalBuilds: PropTypes.number,
-  isLoading: PropTypes.bool,
-  showMoreHandler: PropTypes.func,
-  value: PropTypes.string,
-};
-
-export default BuildsTable;
diff --git a/static/js/publisher/builds/components/datalistSelect.js b/static/js/publisher/builds/components/datalistSelect.js
deleted file mode 100644
index e28a4b7482..0000000000
--- a/static/js/publisher/builds/components/datalistSelect.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-
-const DatalistSelect = ({
-  placeholder,
-  options,
-  updateSelection,
-  disabled,
-  selectedOption,
-  listId,
-  isLoading,
-}) => (
-  <Fragment>
-    <input
-      type="text"
-      list={listId}
-      onChange={(e) => updateSelection(e.target.value)}
-      placeholder={placeholder}
-      disabled={disabled}
-      value={selectedOption}
-      className="p-form-validation__input"
-    />
-    {isLoading ? (
-      <span className="p-icon-container">
-        <i className="p-icon--spinner u-animation--spin" />
-      </span>
-    ) : (
-      ""
-    )}
-    <datalist id={listId}>
-      {options.map((item, i) => (
-        <option value={item.value} key={i} />
-      ))}
-    </datalist>
-  </Fragment>
-);
-
-DatalistSelect.propTypes = {
-  options: PropTypes.array.isRequired,
-  selectedOption: PropTypes.string,
-  updateSelection: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  listId: PropTypes.string,
-  className: PropTypes.string,
-};
-
-export default DatalistSelect;
diff --git a/static/js/publisher/builds/components/datalistSelect.test.js b/static/js/publisher/builds/components/datalistSelect.test.js
deleted file mode 100644
index 03c61acc0e..0000000000
--- a/static/js/publisher/builds/components/datalistSelect.test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import DatalistSelect from "./datalistSelect";
-
-describe("DatalistSelect", () => {
-  const essentialProps = {
-    listId: "repo-list",
-    options: [{ value: "test-repo-1" }, { value: "test-repo-2" }],
-    updateSelection: jest.fn(),
-    selectedOption: "test-org-2",
-  };
-
-  it("should render all the essential components", () => {
-    const { container } = render(<DatalistSelect {...essentialProps} />);
-
-    expect(container.querySelector("input")).toBeDefined();
-    expect(container.querySelector("datalist")).toBeDefined();
-  });
-
-  it("should render input with 'test-org-2' value ", () => {
-    const { container } = render(<DatalistSelect {...essentialProps} />);
-    const inputEl = container.querySelector("input");
-
-    expect(inputEl.value).toEqual("test-org-2");
-  });
-
-  it("should render 2 datalist options", () => {
-    const { container } = render(<DatalistSelect {...essentialProps} />);
-    const datalistEl = container.querySelector("datalist");
-
-    expect(datalistEl.childNodes.length).toEqual(2);
-  });
-
-  it("should call the callback function on change", () => {
-    const { container } = render(<DatalistSelect {...essentialProps} />);
-    const inputEl = container.querySelector("input");
-
-    fireEvent.change(inputEl, { target: { value: "test-repo-1" } });
-    expect(essentialProps.updateSelection).toHaveBeenCalledTimes(1);
-  });
-
-  it("should render the loading icon when loading", () => {
-    const { container } = render(
-      <DatalistSelect {...essentialProps} isLoading={true} />,
-    );
-    const iconClassList =
-      container.querySelector(".p-icon-container").firstChild.classList;
-
-    expect(iconClassList.contains("p-icon--spinner")).toBeTruthy();
-    expect(iconClassList.contains("u-animation--spin")).toBeTruthy();
-  });
-});
diff --git a/static/js/publisher/builds/components/repoConnect.js b/static/js/publisher/builds/components/repoConnect.js
deleted file mode 100644
index 1087a56d03..0000000000
--- a/static/js/publisher/builds/components/repoConnect.js
+++ /dev/null
@@ -1,475 +0,0 @@
-import React, { Fragment } from "react";
-import { createRoot } from "react-dom/client";
-import PropTypes from "prop-types";
-
-import Button from "@canonical/react-components/dist/components/Button";
-import DatalistSelect from "./datalistSelect";
-import Select from "./select";
-
-const LOADING = "LOADING";
-const ERROR = "ERROR";
-const SNAP_NAME_DOES_NOT_MATCH = "SNAP_NAME_DOES_NOT_MATCH";
-const MISSING_YAML_FILE = "MISSING_YAML_FILE";
-const SUCCESS = "SUCCESS";
-const NO_REPOS = "NO_REPOS";
-
-class RepoConnect extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedRepo: "",
-      repoList: [],
-      selectedOrganization: "",
-      organizations: this.props.organizations,
-      user: this.props.user,
-      isRepoListDisabled: true,
-      yamlSnap: null,
-      status: null,
-      snapName: this.props.snapName,
-      yamlFilePath: null,
-      error: null,
-    };
-
-    this.handleRepoSelect = this.handleRepoSelect.bind(this);
-    this.handleOrganizationSelect = this.handleOrganizationSelect.bind(this);
-    this.fetchRepoList = this.fetchRepoList.bind(this);
-    this.handleRefreshButtonClick = this.handleRefreshButtonClick.bind(this);
-  }
-
-  sortByValue(a, b) {
-    return a.value.localeCompare(b.value);
-  }
-
-  /**
-   * Create a string from orgname/repo or username/orgname/repo
-   *
-   * @param {string} selectedOrganization
-   * @param {string} selectedRepo
-   *
-   * @returns {string}
-   */
-  static orgRepoString(selectedOrganization, selectedRepo) {
-    if (!selectedRepo) {
-      return selectedOrganization;
-    }
-    if (selectedRepo.indexOf("/") !== -1) {
-      return selectedRepo;
-    }
-
-    return `${selectedOrganization}/${selectedRepo}`;
-  }
-
-  /**
-   * Handle repository select event
-   *
-   * @param repository
-   */
-  handleRepoSelect(selectedRepo) {
-    this.setState(
-      {
-        selectedRepo: selectedRepo,
-        status: null,
-        error: null,
-      },
-      () => this.checkRepo(selectedRepo),
-    );
-  }
-
-  /**
-   * Handle organization select event
-   *
-   * @param organization
-   */
-  handleOrganizationSelect(selectedOrganization) {
-    this.setState(
-      { selectedOrganization: selectedOrganization, selectedRepo: "" },
-      () => this.fetchRepoList(),
-    );
-  }
-
-  /**
-   * Fetch repo list of the selected organization
-   *
-   */
-  fetchRepoList() {
-    const { selectedOrganization, user } = this.state;
-    let url = "";
-
-    if (selectedOrganization === user.login) {
-      url = "/publisher/github/get-repos";
-    } else {
-      url = `/publisher/github/get-repos?org=${selectedOrganization}`;
-    }
-    this.setState({
-      isRepoListDisabled: true,
-      status: LOADING,
-    });
-    fetch(url)
-      .then((res) => res.json())
-      .then((result) => {
-        let newRepoList = result
-          .map((el) => {
-            // a user may have access to a repo in an org
-            // but they're not part of that org
-            // they may also have their own fork
-            // so we need to differentiate, this just shows
-            // the upstream org name in the repo list
-            if (el.nameWithOwner) {
-              if (el.nameWithOwner.indexOf(`${user.login}/`) === 0) {
-                return {
-                  value: el.nameWithOwner.replace(`${user.login}/`, ""),
-                };
-              } else {
-                return { value: el.nameWithOwner };
-              }
-            } else {
-              return { value: el.name };
-            }
-          })
-          .sort(this.sortByValue);
-        this.setState({
-          repoList: newRepoList,
-          isRepoListDisabled: false,
-          status: null,
-        });
-      })
-      .catch(() => {
-        this.setState({
-          isRepoListDisabled: false,
-          status: ERROR,
-          error: { type: NO_REPOS },
-        });
-      });
-  }
-
-  /**
-   * Check if repository is suitable for build
-   *
-   * @param selectedRepo
-   */
-  checkRepo(selectedRepo) {
-    const { snapName, repoList, selectedOrganization } = this.state;
-    if (selectedRepo && repoList.some((el) => el.value === selectedRepo)) {
-      const orgRepo = RepoConnect.orgRepoString(
-        selectedOrganization,
-        selectedRepo,
-      );
-      const url = `/${snapName}/builds/validate-repo?repo=${orgRepo}`;
-
-      this.setState({
-        isRepoListDisabled: true,
-        status: LOADING,
-      });
-
-      fetch(url)
-        .then((res) => res.json())
-        .then((result) => {
-          if (result.success) {
-            this.setState({
-              isRepoListDisabled: false,
-              status: SUCCESS,
-            });
-          } else {
-            this.setState({
-              isRepoListDisabled: false,
-              error: result.error,
-              status: ERROR,
-              yamlSnap: result.error.gh_snap_name
-                ? result.error.gh_snap_name
-                : null,
-              yamlFilePath: result.error.yaml_location
-                ? result.error.yaml_location
-                : null,
-            });
-          }
-        })
-        .catch(() => {
-          this.setState({
-            isRepoListDisabled: false,
-            status: ERROR,
-          });
-        });
-    }
-  }
-
-  // Handle Refresh button click
-  handleRefreshButtonClick(e) {
-    e.preventDefault();
-    this.checkRepo(this.state.selectedRepo);
-  }
-
-  renderNameError() {
-    const {
-      yamlSnap,
-      snapName,
-      selectedOrganization,
-      selectedRepo,
-      yamlFilePath,
-    } = this.state;
-
-    const orgRepo = RepoConnect.orgRepoString(
-      selectedOrganization,
-      selectedRepo,
-    );
-
-    return (
-      <div className="u-fixed-width">
-        <p>
-          <strong>Name mismatch: </strong>
-          {`the snapcraft.yaml uses the snap name "${yamlSnap}", but you've registered the name "${snapName}". `}
-          <a href={`https://github.com/${orgRepo}/edit/master/${yamlFilePath}`}>
-            Update your snapcraft.yaml to continue.
-          </a>
-        </p>
-      </div>
-    );
-  }
-
-  renderMissingYamlError() {
-    return (
-      <div className="u-fixed-width">
-        <p>
-          <strong>Missing snapcraft.yaml: </strong>
-          this repo needs a snapcraft.yaml file, so that Snapcraft can make it
-          buildable, installable and runnable.
-        </p>
-        <p>
-          <a href="https://snapcraft.io/docs/creating-a-snap">
-            Learn the basics
-          </a>
-          , or <a href={this.getTemplateUrl()}>get started with a template.</a>
-        </p>
-        <p>
-          Don’t have snapcraft?{" "}
-          <a href="https://snapcraft.io/docs/snapcraft-overview">
-            Install it on your own PC for testing.
-          </a>
-        </p>
-      </div>
-    );
-  }
-
-  renderNoReposError() {
-    const { selectedOrganization } = this.state;
-    return (
-      <div className="u-fixed-width">
-        <p>
-          <strong>Can’t list repos: </strong>
-          We were not able to find or access any repos in {selectedOrganization}
-          . If you are an admin of the organization please check the{" "}
-          <a
-            href={`https://github.com/orgs/${selectedOrganization}/policies/applications/1231227`}
-            className="p-link-external"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            application access policy
-          </a>{" "}
-          for Snapcraft .
-        </p>
-      </div>
-    );
-  }
-
-  renderError() {
-    const { snapName, error } = this.state;
-
-    if (error.message) {
-      return (
-        <div className="u-fixed-width">
-          <p>
-            <strong>Error: </strong>
-            {error.message}
-          </p>
-        </div>
-      );
-    } else {
-      return (
-        <div className="u-fixed-width">
-          <p>
-            <strong>Error: </strong>
-            We were not able to check if your repository can be linked to{" "}
-            {snapName}. Please check your internet connection and{" "}
-            <a onClick={this.handleRefreshButtonClick}>try again</a>.
-          </p>
-        </div>
-      );
-    }
-  }
-
-  renderErrorMessage() {
-    const { error } = this.state;
-    if (!error) {
-      return this.renderError();
-    }
-    switch (error.type) {
-      case SNAP_NAME_DOES_NOT_MATCH:
-        return this.renderNameError();
-      case MISSING_YAML_FILE:
-        return this.renderMissingYamlError();
-      case NO_REPOS:
-        return this.renderNoReposError();
-      default:
-        return this.renderError();
-    }
-  }
-
-  getTemplateUrl() {
-    const { selectedOrganization, selectedRepo, snapName } = this.state;
-    const orgRepo = RepoConnect.orgRepoString(
-      selectedOrganization,
-      selectedRepo,
-    );
-    return `https://github.com/${orgRepo}/new/master?filename=snap%2Fsnapcraft.yaml&value=%0A%20%20%23%20After%20registering%20a%20name%20on%20build.snapcraft.io%2C%20commit%20an%20uncommented%20line%3A%0A%20%20%23%20name%3A%20${snapName}%0A%20%20version%3A%20%270.1%27%20%23%20just%20for%20humans%2C%20typically%20%271.2%2Bgit%27%20or%20%271.3.2%27%0A%20%20summary%3A%20Single-line%20elevator%20pitch%20for%20your%20amazing%20snap%20%23%2079%20char%20long%20summary%0A%20%20description%3A%20%7C%0A%20%20%20%20This%20is%20my-snap%27s%20description.%20You%20have%20a%20paragraph%20or%20two%20to%20tell%20the%0A%20%20%20%20most%20important%20story%20about%20your%20snap.%20Keep%20it%20under%20100%20words%20though%2C%0A%20%20%20%20we%20live%20in%20tweetspace%20and%20your%20description%20wants%20to%20look%20good%20in%20the%20snap%0A%20%20%20%20store.%0A%0A%20%20grade%3A%20devel%20%23%20must%20be%20%27stable%27%20to%20release%20into%20candidate%2Fstable%20channels%0A%20%20confinement%3A%20devmode%20%23%20use%20%27strict%27%20once%20you%20have%20the%20right%20plugs%20and%20slots%0A%0A%20%20parts%3A%0A%20%20%20%20my-part%3A%0A%20%20%20%20%20%20%23%20See%20%27snapcraft%20plugins%27%0A%20%20%20%20%20%20plugin%3A%20nil%0A%20%20`;
-  }
-
-  renderButton() {
-    const { status } = this.state;
-    if (status === ERROR) {
-      return (
-        <button
-          className="p-tooltip--btm-center"
-          aria-describedby="recheck-tooltip"
-          onClick={this.handleRefreshButtonClick}
-        >
-          <i className="p-icon--restart" />
-          <span
-            className="p-tooltip__message"
-            role="tooltip"
-            id="recheck-tooltip"
-          >
-            Re-check
-          </span>
-        </button>
-      );
-    } else if (status === SUCCESS) {
-      return <Button appearance="positive">Start building</Button>;
-    }
-  }
-
-  renderIcon() {
-    const { status } = this.state;
-    let icon;
-    switch (status) {
-      default:
-        icon = "";
-        break;
-      case ERROR:
-        icon = " is-error";
-        break;
-      case SUCCESS:
-        icon = " is-success";
-        break;
-    }
-    return icon;
-  }
-
-  componentDidMount() {
-    // Pre-select user's own "organization" if the user is not part of any organizations - array length 2
-    // [ { value: "Select organization", disabled: true }, { value: user.login }, { value: organization1 }, { value: organization2 }, ... ]
-    if (this.state.organizations.length === 2) {
-      this.setState({ selectedOrganization: this.state.user.login }, () => {
-        this.fetchRepoList();
-      });
-    }
-  }
-
-  render() {
-    const {
-      organizations,
-      selectedOrganization,
-      selectedRepo,
-      isRepoListDisabled,
-      repoList,
-      status,
-    } = this.state;
-
-    const orgRepo = RepoConnect.orgRepoString(
-      selectedOrganization,
-      selectedRepo,
-    );
-
-    return (
-      <Fragment>
-        <div className="row">
-          <div className="col-4">
-            <input
-              type="hidden"
-              name="github_repository"
-              value={`${orgRepo}`}
-            />
-            <Select
-              options={organizations}
-              selectedOption={selectedOrganization}
-              updateSelection={this.handleOrganizationSelect}
-            />
-          </div>
-          <div
-            className={`col-6 p-form-validation${this.renderIcon()}`}
-            style={{ position: "relative" }}
-          >
-            <DatalistSelect
-              options={repoList}
-              selectedOption={selectedRepo}
-              disabled={isRepoListDisabled}
-              placeholder="Search your repos"
-              updateSelection={this.handleRepoSelect}
-              listId="repo-list"
-              isLoading={status === "LOADING" ? true : false}
-            />
-          </div>
-          <div className="col-2">{this.renderButton()}</div>
-        </div>
-        {status === ERROR && this.renderErrorMessage()}
-      </Fragment>
-    );
-  }
-}
-
-RepoConnect.propTypes = {
-  organizations: PropTypes.array,
-  user: PropTypes.object,
-  snapName: PropTypes.string,
-};
-
-/**
- * Initialize the component if used outside of a react app
- *
- * Selector should be in the following format:
- * <div data-js="repo-connect">
- * </div>
- *
- * @param {HTMLElement} selector
- * @param {{name: string, login: string,  key: string}[]} organizations
- * @param {login: string, name: string, avatarUrl: string} user
- * @param {string} snapName
- */
-function init(selector, organizations, user, snapName) {
-  const container = document.querySelector(selector);
-
-  // Add user login to the organization list
-  let _organizations = organizations.map((item) => {
-    return { value: item.login };
-  });
-
-  _organizations = [
-    { value: "Select organization", disabled: true },
-    { value: user.login },
-    ..._organizations,
-  ];
-
-  if (container) {
-    // do the react
-    const root = createRoot(container);
-    root.render(
-      <RepoConnect
-        organizations={_organizations}
-        user={user}
-        snapName={snapName}
-      />,
-    );
-  }
-}
-
-export { RepoConnect as default, init as initRepoConnect };
diff --git a/static/js/publisher/builds/components/repoConnect.test.js b/static/js/publisher/builds/components/repoConnect.test.js
deleted file mode 100644
index f202244e3d..0000000000
--- a/static/js/publisher/builds/components/repoConnect.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import RepoConnect from "./repoConnect";
-
-const essentialProps = {
-  user: {
-    login: "test-login",
-    name: "Test Name",
-    avatarUrl: "https://assets.ubuntu.com/v1/0a529437-karlos.jpeg",
-  },
-  organizations: [
-    { disabled: true, value: "Select organization" },
-    { value: "test-org-1" },
-    { value: "test-org-2" },
-    { value: "test-org-3" },
-  ],
-  snapName: "test-snap",
-};
-
-describe("RepoConnect", () => {
-  it("should render all critical elements", () => {
-    const { container, queryByPlaceholderText } = render(
-      <RepoConnect {...essentialProps} />,
-    );
-
-    expect(container.querySelectorAll("input").length).toEqual(2);
-    expect(container.querySelector("select")).toBeTruthy();
-    expect(queryByPlaceholderText("Search your repos")).toBeTruthy();
-  });
-
-  it("should render all organizations", () => {
-    const { queryByText } = render(<RepoConnect {...essentialProps} />);
-
-    essentialProps.organizations.forEach((el) => {
-      expect(queryByText(el.value)).toBeTruthy();
-    });
-  });
-});
diff --git a/static/js/publisher/builds/components/select.js b/static/js/publisher/builds/components/select.js
deleted file mode 100644
index 7bde54d5ed..0000000000
--- a/static/js/publisher/builds/components/select.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Select = ({ options, updateSelection, disabled, selectedOption }) => (
-  <select
-    onChange={(e) => updateSelection(e.target.value)}
-    disabled={disabled}
-    value={selectedOption}
-  >
-    {options.map((item, i) => (
-      <option
-        disabled={item.disabled}
-        value={i === 0 ? "" : item.value}
-        key={i}
-      >
-        {item.value}
-      </option>
-    ))}
-  </select>
-);
-
-Select.propTypes = {
-  options: PropTypes.array.isRequired,
-  selectedOption: PropTypes.string,
-  updateSelection: PropTypes.func,
-  disabled: PropTypes.bool,
-};
-
-export default Select;
diff --git a/static/js/publisher/builds/components/select.test.js b/static/js/publisher/builds/components/select.test.js
deleted file mode 100644
index cc8557b654..0000000000
--- a/static/js/publisher/builds/components/select.test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import Select from "./select";
-
-describe("Select", () => {
-  const essentialProps = {
-    options: [{ value: "test-1" }, { value: "test-2" }],
-    updateSelection: jest.fn(),
-    selectedOption: "test-1",
-  };
-
-  it("should render all the essential components", () => {
-    const { container } = render(<Select {...essentialProps} />);
-
-    expect(container.querySelector("select")).toBeDefined();
-  });
-
-  it("should render 2 select options", () => {
-    const { container } = render(<Select {...essentialProps} />);
-    const selectEl = container.querySelector("select");
-
-    expect(selectEl.childNodes.length).toEqual(2);
-  });
-
-  it("should call the callback function on change", () => {
-    const { container } = render(<Select {...essentialProps} />);
-    const selectEl = container.querySelector("select");
-
-    fireEvent.change(selectEl, { target: { value: "test-2" } });
-    expect(essentialProps.updateSelection).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/static/js/publisher/builds/components/triggerBuild.js b/static/js/publisher/builds/components/triggerBuild.js
deleted file mode 100644
index c193cdc109..0000000000
--- a/static/js/publisher/builds/components/triggerBuild.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-
-import Notification from "@canonical/react-components/dist/components/Notification";
-
-class TriggerBuild extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  renderError(errorMessage) {
-    return (
-      <div className="u-fixed-width">
-        <Notification type="negative" title="Error:">
-          {errorMessage
-            ? errorMessage
-            : "There was an error triggering a new build. Please try again."}
-        </Notification>
-      </div>
-    );
-  }
-
-  render() {
-    const { hasError, errorMessage, isLoading, onClick } = this.props;
-
-    return (
-      <Fragment>
-        <div className="u-fixed-width u-clearfix">
-          <h4 className="u-float-left">Latest builds</h4>
-          {isLoading ? (
-            <button className="p-button u-float-right has-icon" disabled>
-              <i className="p-icon--spinner u-animation--spin" />
-              <span>Requesting</span>
-            </button>
-          ) : (
-            <button className="p-button u-float-right" onClick={onClick}>
-              Trigger new build
-            </button>
-          )}
-        </div>
-        {hasError && this.renderError(errorMessage)}
-      </Fragment>
-    );
-  }
-}
-
-TriggerBuild.propTypes = {
-  hasError: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  isLoading: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-export { TriggerBuild as default };
diff --git a/static/js/publisher/builds/components/triggerBuild.test.js b/static/js/publisher/builds/components/triggerBuild.test.js
deleted file mode 100644
index 49d26bc77f..0000000000
--- a/static/js/publisher/builds/components/triggerBuild.test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import TriggerBuild from "./triggerBuild";
-
-describe("TriggerBuild", () => {
-  it("renders the trigger new build button and the button triggers a build on click", () => {
-    const triggerBuildHandler = jest.fn();
-    const { container } = render(
-      <TriggerBuild onClick={triggerBuildHandler} />,
-    );
-    const btn = container.querySelector("button");
-    expect(btn.innerHTML).toEqual("Trigger new build");
-    fireEvent.click(btn);
-    expect(triggerBuildHandler.mock.calls.length).toEqual(1);
-  });
-
-  it("renders with an error", () => {
-    const { container } = render(<TriggerBuild hasError={true} />);
-    expect(container.querySelector(".p-notification__title").innerHTML).toEqual(
-      "Error:",
-    );
-  });
-
-  it("renders the requesting button with an icon", () => {
-    const { container } = render(<TriggerBuild isLoading={true} />);
-    expect(container.querySelector("span").innerHTML).toEqual("Requesting");
-    expect(container.querySelector("i")).toBeTruthy();
-  });
-});
diff --git a/static/js/publisher/builds/helpers.test.js b/static/js/publisher/builds/helpers.test.js
deleted file mode 100644
index e13f31e56b..0000000000
--- a/static/js/publisher/builds/helpers.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { createDuration, createStatus } from "./helpers";
-
-describe("createDuration", () => {
-  it("should return empty string if no duration argument", () => {
-    expect(createDuration()).toEqual("");
-  });
-
-  it("should return the number of hours", () => {
-    const duration = "3:59:20";
-    expect(createDuration(duration)).toEqual("3 hours");
-  });
-
-  it("should return the number of minutes", () => {
-    const duration = "00:59:20";
-    expect(createDuration(duration)).toEqual("59 minutes");
-  });
-
-  it("should return the number of seconds", () => {
-    const duration = "00:00:20";
-    expect(createDuration(duration)).toEqual("20 seconds");
-  });
-});
-
-describe("createStatus", () => {
-  it("should return a valid status object with icon classes", () => {
-    const statusObject = {
-      badge: "releasing_soon",
-      icon: "spinner u-animation--spin",
-      priority: 3,
-      shortStatusMessage: "Releasing",
-      statusMessage: "Built, releasing soon",
-    };
-    expect(
-      createStatus("Built, releasing soon", "Releasing", 3, "releasing_soon"),
-    ).toEqual(statusObject);
-  });
-
-  it("should return a valid status object with no icon", () => {
-    const statusObject = {
-      badge: "cancelled",
-      icon: undefined,
-      priority: 8,
-      shortStatusMessage: "Cancelled",
-      statusMessage: "Cancelled",
-    };
-    expect(createStatus("Cancelled", "Cancelled", 8, "cancelled")).toEqual(
-      statusObject,
-    );
-  });
-});
diff --git a/static/js/publisher/builds/index.js b/static/js/publisher/builds/index.js
deleted file mode 100644
index be9fd6716b..0000000000
--- a/static/js/publisher/builds/index.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-import { createRoot } from "react-dom/client";
-
-import BuildsTable from "./components/buildsTable";
-
-import { TriggerBuildStatus, BuildRequestStatus } from "./helpers";
-
-import TriggerBuild from "./components/triggerBuild";
-
-class Builds extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.fetchTimer = null;
-
-    this.state = {
-      triggerBuildLoading: false,
-      triggerBuildStatus: TriggerBuildStatus.IDLE,
-      triggerBuildErrorMessage: "",
-      isLoading: false,
-      fetchSize: 15,
-      fetchStart: 0,
-      builds: props.builds,
-      queueTime:
-        props.builds.length > 0 ? this.getInitialQueueTime(props.builds) : {},
-      shouldUpdateQueueTime: true,
-    };
-
-    this.showMoreHandler = this.showMoreHandler.bind(this);
-    this.triggerBuildHandler = this.triggerBuildHandler.bind(this);
-
-    const { builds, updateFreq } = props;
-    if (!builds) {
-      this.fetchBuilds();
-    } else {
-      if (updateFreq) {
-        this.fetchTimer = setTimeout(() => this.fetchBuilds(true), updateFreq);
-      }
-    }
-  }
-
-  getInitialQueueTime(builds) {
-    let newQueueTime = {};
-
-    builds.forEach((build) => {
-      if (build.status === "building_soon" && build.queue_time) {
-        newQueueTime[build.arch_tag] = build.queue_time;
-      }
-    });
-
-    return newQueueTime;
-  }
-
-  updateQueueTime() {
-    const { queueTime, builds } = this.state;
-    let newQueueTime = {};
-
-    builds.forEach((build) => {
-      const isBuildingSoon =
-        build.status === "building_soon" && build.queue_time;
-      if (isBuildingSoon) {
-        newQueueTime[build.arch_tag] = queueTime[build.arch_tag]
-          ? queueTime[build.arch_tag]
-          : build.queue_time;
-      }
-    });
-
-    this.setState({
-      queueTime: newQueueTime,
-      shouldUpdateQueueTime: newQueueTime ? true : false,
-    });
-  }
-
-  fetchBuilds(fromStart) {
-    const {
-      fetchSize,
-      fetchStart,
-      builds,
-      triggerBuildStatus,
-      triggerBuildLoading,
-      shouldUpdateQueueTime,
-    } = this.state;
-    const { snapName } = this.props;
-    const { SUCCESS, IDLE } = TriggerBuildStatus;
-
-    let url = `/${snapName}/builds.json`;
-    let params = [];
-
-    if (fetchStart && !fromStart) {
-      params.push(`start=${fetchStart}`);
-    }
-
-    if (fetchSize) {
-      params.push(`size=${fetchSize}`);
-    }
-
-    if (params.length > 0) {
-      url += `?${params.join("&")}`;
-    }
-
-    fetch(url)
-      .then((res) => res.json())
-      .then((result) => {
-        this.setState(
-          {
-            triggerBuildLoading:
-              triggerBuildStatus === SUCCESS ? !SUCCESS : triggerBuildLoading,
-            triggerBuildStatus:
-              triggerBuildStatus === SUCCESS ? IDLE : triggerBuildStatus,
-            isLoading: false,
-            builds: fromStart
-              ? result.snap_builds
-              : builds.slice().concat(result.snap_builds),
-          },
-          () => {
-            if (shouldUpdateQueueTime) {
-              this.updateQueueTime();
-            }
-            this.triggerFetchBuilds();
-          },
-        );
-      })
-      .catch(() => {
-        this.setState({
-          isLoading: false,
-        });
-        this.triggerFetchBuilds();
-      });
-  }
-
-  triggerFetchBuilds() {
-    const { updateFreq } = this.props;
-
-    if (this.fetchTimer) {
-      clearTimeout(this.fetchTimer);
-    }
-    if (updateFreq) {
-      this.fetchTimer = setTimeout(() => this.fetchBuilds(true), updateFreq);
-    }
-  }
-
-  triggerFetchBuildRequest(build_id) {
-    const { snapName } = this.props;
-    const { ERROR, SUCCESS } = TriggerBuildStatus;
-    const { PENDING, COMPLETED, FAILED } = BuildRequestStatus;
-    const url = `/${snapName}/builds/check-build-request/`;
-
-    fetch(`${url}/${build_id}`, {
-      method: "GET",
-    })
-      .then((res) => res.json())
-      .then((result) => {
-        if (result.success) {
-          if (result.status === PENDING) {
-            setTimeout(
-              () => this.triggerFetchBuildRequest(build_id),
-              this.props.updateFreq,
-            );
-          } else if (result.status === COMPLETED) {
-            this.setState({
-              triggerBuildStatus: SUCCESS,
-              triggerBuildLoading: false,
-            });
-          } else if (result.status === FAILED) {
-            this.setState({
-              triggerBuildLoading: false,
-              triggerBuildStatus: ERROR,
-              triggerBuildErrorMessage: result.error.message
-                ? result.error.message
-                : "Build request failed",
-            });
-          }
-        } else {
-          this.setState({
-            triggerBuildStatus: ERROR,
-            triggerBuildErrorMessage: result.error.message
-              ? result.error.message
-              : "",
-          });
-        }
-      })
-      .catch((error) => {
-        this.setState({
-          triggerBuildStatus: ERROR,
-          triggerBuildErrorMessage: error.message ? error.message : "",
-        });
-      });
-  }
-
-  triggerBuildHandler() {
-    const { csrf_token, snapName } = this.props;
-    const { ERROR, SUCCESS } = TriggerBuildStatus;
-    const url = `/${snapName}/builds/trigger-build`;
-
-    this.setState({ triggerBuildLoading: true });
-
-    fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRFToken": csrf_token,
-      },
-    })
-      .then((res) => res.json())
-      .then((result) => {
-        if (result.success) {
-          if (result.build_id) {
-            this.triggerFetchBuildRequest(result.build_id);
-          } else {
-            this.setState({ triggerBuildStatus: SUCCESS });
-          }
-        } else {
-          this.setState({
-            triggerBuildStatus: ERROR,
-            triggerBuildErrorMessage: result.error.message
-              ? result.error.message
-              : "",
-          });
-        }
-      })
-      .catch((error) => {
-        this.setState({
-          triggerBuildStatus: ERROR,
-          triggerBuildErrorMessage: error.message ? error.message : "",
-        });
-      });
-  }
-
-  showMoreHandler(e) {
-    const { fetchStart, fetchSize } = this.state;
-    e.preventDefault();
-    this.setState(
-      {
-        fetchStart: fetchStart + 15,
-        fetchSize: fetchSize + 15,
-        isLoading: true,
-      },
-      () => {
-        this.fetchBuilds();
-      },
-    );
-  }
-
-  render() {
-    const {
-      builds,
-      isLoading,
-      triggerBuildStatus,
-      triggerBuildErrorMessage,
-      triggerBuildLoading,
-      queueTime,
-    } = this.state;
-    const { totalBuilds, singleBuild, snapName } = this.props;
-    const { ERROR } = TriggerBuildStatus;
-
-    return (
-      <Fragment>
-        {!singleBuild && (
-          <TriggerBuild
-            hasError={triggerBuildStatus === ERROR ? true : false}
-            errorMessage={triggerBuildErrorMessage}
-            isLoading={triggerBuildLoading}
-            onClick={this.triggerBuildHandler}
-          />
-        )}
-        <BuildsTable
-          builds={builds}
-          singleBuild={singleBuild}
-          snapName={snapName}
-          queueTime={queueTime}
-          totalBuilds={totalBuilds}
-          isLoading={isLoading}
-          showMoreHandler={this.showMoreHandler}
-        />
-      </Fragment>
-    );
-  }
-}
-
-Builds.propTypes = {
-  csrf_token: PropTypes.string,
-  snapName: PropTypes.string,
-  builds: PropTypes.array,
-  totalBuilds: PropTypes.number,
-  updateFreq: PropTypes.number,
-  singleBuild: PropTypes.bool,
-};
-
-Builds.defaultProps = {
-  singleBuild: false,
-};
-
-export function initBuilds(
-  id,
-  snapName,
-  csrf_token,
-  builds,
-  totalBuilds,
-  singleBuild,
-) {
-  const container = document.querySelector(id);
-  const root = createRoot(container);
-  root.render(
-    <Builds
-      snapName={snapName}
-      csrf_token={csrf_token}
-      builds={builds}
-      totalBuilds={totalBuilds}
-      updateFreq={singleBuild ? null : 30000}
-      singleBuild={singleBuild}
-    />,
-  );
-}
diff --git a/static/js/publisher/publisher.ts b/static/js/publisher/publisher.ts
index 2035db15a9..e7db1557f2 100644
--- a/static/js/publisher/publisher.ts
+++ b/static/js/publisher/publisher.ts
@@ -1,7 +1,6 @@
 import * as metrics from "./metrics/metrics";
 import { selector } from "./metrics/filters";
 import * as market from "./form";
-import { initRepoConnect } from "./builds/components/repoConnect";
 import * as publicise from "./publicise";
 import { initCategories } from "./market/categories";
 import markdownToggle from "./market/markdown";
@@ -9,13 +8,9 @@ import stickyListingBar from "./market/stickyListingBar";
 import { preview } from "./preview";
 import submitEnabler from "./submitEnabler";
 import * as tour from "./tour";
-import { initBuilds } from "./builds";
-import { initRepoDisconnect } from "./builds/repoDisconnect";
-import buildStatus from "./build-status";
 
 export {
   initCategories,
-  initRepoConnect,
   markdownToggle,
   metrics,
   market,
@@ -25,7 +20,4 @@ export {
   preview,
   submitEnabler,
   tour,
-  initBuilds,
-  initRepoDisconnect,
-  buildStatus,
 };
diff --git a/static/sass/_snapcraft_market.scss b/static/sass/_snapcraft_market.scss
index 6ed7fe93bf..86af429622 100644
--- a/static/sass/_snapcraft_market.scss
+++ b/static/sass/_snapcraft_market.scss
@@ -108,7 +108,8 @@
       position: static;
     }
 
-    & .row {
+    & .row,
+    & .u-fixed-width {
       padding-bottom: $sp-medium;
       padding-top: $sp-medium;
     }
diff --git a/templates/publisher/build.html b/templates/publisher/build.html
deleted file mode 100644
index b45ccfa8b7..0000000000
--- a/templates/publisher/build.html
+++ /dev/null
@@ -1,85 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Builds for
-{% if snap_title %}{{ snap_title }}{% else %}{{ snap_name }}{% endif %}
-{% endblock %}
-
-{% block content %}
-<div id="main-content" class="u-no-margin--top">
-  {% set selected_tab='builds' %}
-  {% set suppress_nav=True%}
-  {% set suppress_title=True%}
-  {% set snap_link="builds" %}
-  {% include "publisher/_header.html" %}
-
-  <section class="p-strip is-shallow u-no-padding--top" id="top">
-    <div class="row">
-      <h1 class="p-heading--3">Build #{{snap_build.id}}</h1>
-      <div id="builds-wrapper" class="col-12">
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Architecture</th>
-              <th class="u-hide--small">Duration</th>
-              <th class="has-icon">Result</th>
-              <th></th>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Loading...</td>
-              <td></td>
-              <td class="u-hide--small"></td>
-              <td class="has-icon"></td>
-              <td></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    {{ snap_build.raw }}
-    {% if raw_logs %}
-    <div class="row">
-      <div class="col-6">
-        <h4>Build Log</h4>
-      </div>
-      <div class="col-6 u-align-text--right">
-        <a href="#footer">Scroll to bottom</a>&nbsp;
-        <a href="{{snap_build.logs}}" class="p-button" target="_blank">View raw</a>
-      </div>
-    </div>
-    <div class="row">
-      <div class="p-code-snippet">
-        <pre class="p-code-snippet__block"><code>{{raw_logs}}</code></pre>
-      </div>
-    </div>
-    {% endif %}
-  </section>
-</div>
-
-{% endblock %}
-
-{% block scripts_includes %}
-<script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
-{% block scripts %}
-
-<script>
-  window.addEventListener("DOMContentLoaded", function () {
-    Raven.context(function () {
-      {% if snap_build %}
-        snapcraft.publisher.initBuilds('#builds-wrapper',
-          {{ snap_name | tojson }},
-          null,
-          [{{ snap_build | tojson }}],
-          1,
-          true
-      );
-      {% endif %}
-    });
-  });
-</script>
-{% endblock %}
diff --git a/templates/publisher/builds.html b/templates/publisher/builds.html
deleted file mode 100644
index 3b23373ad8..0000000000
--- a/templates/publisher/builds.html
+++ /dev/null
@@ -1,284 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Builds for
-{% if snap_title %}{{ snap_title }}{% else %}{{ snap_name }}{% endif %}
-{% endblock %}
-
-{% block content %}
-<div id="main-content" class="u-no-margin--top">
-  {% set selected_tab='builds' %}
-  {% include "publisher/_header.html" %}
-
-  <form class="p-form p-form--stacked" method="POST"
-    enctype='multipart/form-data'
-    action="/{{ snap_name }}/builds"
-    data-js="js-form">
-    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-    {% if github_repository %}
-    <div class="snapcraft-p-sticky js-sticky-bar">
-      <div class="row">
-        <p class="u-no-margin--bottom">
-          Your snap is linked to:<br class="u-hide--medium u-hide--large">
-          <a href="https://github.com/{{ github_repository }}"
-            >
-            {{ github_repository }}
-          </a><span style="color: #cdcdcd;">&nbsp;&VerticalLine;&nbsp;</span>
-          <a href="/{{ snap_name }}/builds" aria-controls="repo-disconnect-modal">Disconnect repo</a>
-        </p>
-      </div>
-      {% if dropped_i386 %}
-      <div class="row">
-        <div class="p-notification--information">
-          <div class="p-notification__content">
-            <p class="p-notification__message">We have detected that your snap base is core20 or newer. This is not compatible with the i386 architecture, therefore that architecture will no longer be built.<br><a href="https://snapcraft.io/docs/migrating-bases#heading--arch">Learn more</a></p>
-          </div>
-        </div>
-      </div>
-      {% endif %}
-    </div>
-    {% else %}
-    <div class="snapcraft-p-sticky js-sticky-bar">
-      <div class="row">
-        <ul class="p-inline-list u-no-margin--bottom">
-          <li class="p-inline-list__item u-no-margin--right">
-            {% if not github_user %}
-            Login to your GitHub account to start building.
-            {% else %}
-            Your GitHub account is connected.
-            {% endif %}
-          </li>
-          <li class="p-inline-list__item">
-            {% if github_user %}
-            <a href="https://github.com/{{ github_user['login'] }}"
-              class="p-link--soft u-float-right">
-              <img src="{{ github_user['avatarUrl'] }}"
-                alt="@{{ github_user['login'] }}" class="p-build__avatar">
-              {{ github_user["login"] }}
-            </a>
-            {% else %}
-            <a href="/github/auth?back=/{{ snap_name }}/builds"
-              class="p-button--positive u-no-margin--bottom u-float-right">
-              <span>Log in </span><i class="p-icon--github-white"></i>
-            </a>
-            {% endif %}
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="u-fixed-width">
-      <hr class="u-no-margin--bottom" />
-    </div>
-    {% endif %}
-
-    {% if github_repository %}
-      {% if github_app_revoked or not github_repository_exists or not yaml_file_exists %}
-      <section class="p-strip is-shallow">
-        <div class="u-fixed-width">
-          <div class="p-notification--negative">
-            <div class="p-notification__content">
-              <p class="p-notification__message">
-                {% if github_app_revoked %}
-                Access was revoked to your GitHub account. Please check your GitHub OAuth apps or <a href="/github/auth?back=/{{ snap_name }}/builds">click here</a>.
-                {% elif not github_repository_exists %}
-                Your snap is linked to <a href="https://github.com/{{ github_repository }}" >{{ github_repository }}</a>, but this repository doesn&rsquo;t exist. <a href="/{{ snap_name }}/builds" aria-controls="repo-disconnect-modal">Disconnect repo</a>.
-                {% elif not yaml_file_exists %}
-                This repository doesn&rsquo;t contain snapcraft.yaml. More on <a href="https://snapcraft.io/docs/creating-snapcraft-yaml">how to create it</a>.
-                {% endif %}
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-      {% endif %}
-    {% endif %}
-
-
-    {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-    <section class="p-strip is-shallow">
-      <div class="u-fixed-width">
-        {% for category, message in messages %}
-        <div class="p-notification--{{ category }}">
-          <div class="p-notification__content">
-            <p class="p-notification__message">{{ message }}</p>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-    </section>
-    {% endif %}
-    {% endwith %}
-
-
-    {% if not github_repository %}
-    <section class="p-strip is-shallow">
-      {% if not github_user %}
-      <div class="u-fixed-width u-align--center u-hide--small">
-        <img
-          src="https://assets.ubuntu.com/v1/ed6d1c5b-build.snapcraft.hero.svg"
-          alt="" width="100%">
-      </div>
-      <div class="row">
-        <div class="col-4 u-align-text--center">
-          <img
-            src="https://assets.ubuntu.com/v1/82de77b0-build.snapcraft.hero-01.svg"
-            alt="" width="343" height="288" class="u-hide u-show--small">
-          <p>
-            Start by creating a repo and pushing your code to GitHub. Make
-            sure that your repo includes a snapcraft.yaml file.
-          </p>
-        </div>
-        <div class="col-4 u-align-text--center">
-          <img
-            src="https://assets.ubuntu.com/v1/275ddbf9-build.snapcraft.hero-02.svg"
-            alt="" width="343" height="288" class="u-hide u-show--small">
-          <p>
-            Register a name on Snapcraft and attach it to your repo to start
-            building. Your snap will be built automatically for all the
-            distros.
-          </p>
-        </div>
-        <div class="col-4 u-align-text--center">
-          <img
-            src="https://assets.ubuntu.com/v1/e708bab9-build.snapcraft.hero-03.svg"
-            alt="" width="343" height="288" class="u-hide u-show--small">
-          <p>
-            Release your snap to your users. From here on, all the updates you
-            do to your code will trigger automatic builds.
-          </p>
-        </div>
-      </div>
-      {% else %}
-      <div class="u-fixed-width">
-        <p>Your repo needs a snapcraft.yaml file, so that Snapcraft can make it
-          buildable,
-          installable, and runnable.</p>
-        <label class="p-form__label">Select a
-          repository:</label>
-      </div>
-      <noscript>
-        <div class="row">
-          <div class="col-10 p-form--inline">
-            <label>https://github.com/</label>
-            <input type="text" name="github_repository"
-              placeholder="e.g. organization_name/repo_name">
-          </div>
-          <div class="col-2">
-            <button type="submit" class="p-button--positive">Start
-              building</button>
-          </div>
-        </div>
-      </noscript>
-      <div data-js="repo-connect"></div>
-      {% endif %}
-    </section>
-    {% endif %}
-
-    {% if not github_repository and github_user %}
-    <div class="p-strip is-shallow u-no-padding--top">
-      <div class="u-fixed-width">
-        <hr />
-      </div>
-    </div>
-    <section class="p-strip is-shallow u-no-padding--top">
-      <div class="u-fixed-width">
-        <h4>If you can't find a repository &hellip;</h4>
-        <p>Want to <strong>use a private repo</strong>? We're working hard on
-          making
-          these buildable.</p>
-      </div>
-      <div class="u-fixed-width">
-        <p><strong>Don't have admin permission</strong>? Ask a repo admin to
-          add it instead, and it will show up in your repo list too.
-          {{github_repositories}}</p>
-        <p><strong>Missing an organization</strong>?
-          {% if github_orgs|length == 0%}
-            Snapcraft doesn't have access to any organizations.
-          {% else %}
-            Snapcraft has access to
-            {{ github_orgs|length }} organizations you're a member of
-            {% if github_orgs|length == 1 %}
-              <i>{{ github_orgs[0].name }}</i>)
-            {% else %}
-              {% for github_org in github_orgs %}
-                {% if loop.index < github_orgs|length-1 %}
-                  <i>{{ github_org.name }}</i>,
-                {% elif loop.index < github_orgs|length %}
-                  <i>{{ github_org.name }}</i>
-                {% else %}
-                  and <i>{{ github_org.name }}</i>.
-                {% endif %}
-              {% endfor %}
-            {% endif %}
-          {% endif %}
-        </p>
-        <a href="https://github.com/settings/applications"
-          class="p-button">Review organization access</a>
-      </div>
-    </section>
-    {% endif %}
-  </form>
-
-  {% if github_repository %}
-  <section class="p-strip is-shallow">
-    <div class="u-fixed-width u-clearfix">
-      {% include "publisher/_repo-disconnect-modal.html" %}
-    </div>
-    <div class="u-fixed-width">
-      <div id="builds-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Architecture</th>
-              <th class="u-hide--small">Duration</th>
-              <th class="has-icon">Result</th>
-              <th></th>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Waiting for builds...</td>
-              <td></td>
-              <td class="u-hide--small"></td>
-              <td class="has-icon"></td>
-              <td></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </section>
-  {% endif %}
-</div>
-
-{% endblock %}
-
-{% block scripts_includes %}
-<script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  window.addEventListener("DOMContentLoaded", function () {
-    Raven.context(function () {
-      snapcraft.publisher.stickyListingBar();
-
-      {% if github_repository %}
-      snapcraft.publisher.initBuilds('#builds-wrapper',
-        {{ snap_name | tojson }},
-        {{ csrf_token() | tojson }},
-        {{ snap_builds | tojson }},
-        {{ total_builds | tojson }}
-      );
-      snapcraft.publisher.initRepoDisconnect();
-      {% endif %}
-
-      {% if github_user %}
-        snapcraft.publisher.initRepoConnect('[data-js="repo-connect"]', {{ github_orgs | tojson }}, {{ github_user | tojson }}, {{ snap_name | tojson }});
-      {% endif %}
-    });
-  });
-</script>
-{% endblock %}
diff --git a/webapp/publisher/snaps/build_views.py b/webapp/publisher/snaps/build_views.py
index d59018320e..a2693a96cd 100644
--- a/webapp/publisher/snaps/build_views.py
+++ b/webapp/publisher/snaps/build_views.py
@@ -118,6 +118,18 @@ def get_snap_repo(snap_name):
     return flask.jsonify(res)
 
 
+@login_required
+def get_snap_builds_page(snap_name):
+    return flask.render_template("store/publisher.html", snap_name=snap_name)
+
+
+@login_required
+def get_snap_build_page(snap_name, build_id):
+    return flask.render_template(
+        "store/publisher.html", snap_name=snap_name, build_id=build_id
+    )
+
+
 @login_required
 def get_snap_builds(snap_name):
     res = {"message": "", "success": True}
@@ -173,7 +185,7 @@ def get_snap_build(snap_name, build_id):
                 details["snap_name"], build_id
             )
 
-    return flask.render_template("publisher/build.html", **context)
+    return flask.jsonify({"data": context, "success": True})
 
 
 def validate_repo(github_token, snap_name, gh_owner, gh_repo):
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 8cf1ea2280..f0234ecdab 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -82,6 +82,18 @@
 )
 
 # Build views
+publisher_snaps.add_url_rule(
+    "/<snap_name>/builds",
+    view_func=build_views.get_snap_builds_page,
+    methods=["GET"],
+),
+
+publisher_snaps.add_url_rule(
+    "/<snap_name>/builds/<build_id>",
+    view_func=build_views.get_snap_build_page,
+    methods=["GET"],
+),
+
 publisher_snaps.add_url_rule(
     "/api/<snap_name>/repo",
     view_func=build_views.get_snap_repo,
@@ -93,48 +105,48 @@
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds",
+    "/api/<snap_name>/builds",
     view_func=build_views.post_snap_builds,
     methods=["POST"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/<build_id>",
+    "/api/<snap_name>/builds/<build_id>",
     view_func=build_views.get_snap_build,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/validate-repo",
+    "/api/<snap_name>/builds/validate-repo",
     view_func=build_views.get_validate_repo,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/trigger-build",
+    "/api/<snap_name>/builds/trigger-build",
     view_func=build_views.post_build,
     methods=["POST"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/check-build-request/<build_id>",
+    "/api/<snap_name>/builds/check-build-request/<build_id>",
     view_func=build_views.check_build_request,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/webhook/notify",
+    "/api/<snap_name>/webhook/notify",
     view_func=build_views.post_github_webhook,
     methods=["POST"],
 )
 # This route is to support previous webhooks from build.snapcraft.io
 publisher_snaps.add_url_rule(
-    "/<github_owner>/<github_repo>/webhook/notify",
+    "/api/<github_owner>/<github_repo>/webhook/notify",
     view_func=build_views.post_github_webhook,
     methods=["POST"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/update-webhook",
+    "/api/<snap_name>/builds/update-webhook",
     view_func=build_views.get_update_gh_webhooks,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/builds/disconnect/",
+    "/api/<snap_name>/builds/disconnect/",
     view_func=build_views.post_disconnect_repo,
     methods=["POST"],
 )

From a7f35e741da515a0ddb5379603dea2a2a3f3e7c0 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Mon, 18 Nov 2024 13:09:52 +0000
Subject: [PATCH 10/24] feat: Move releases section into the publisher app
 (#4902)

---
 static/js/publisher-pages/index.tsx           |   5 +
 .../pages/Releases/Release.tsx                |  64 ++
 .../pages/Releases/Releases.tsx               |  66 ++
 .../pages/Releases}/actions/architectures.js  |   0
 .../Releases}/actions/architectures.test.js   |   0
 .../actions/availableRevisionsSelect.js       |   0
 .../actions/availableRevisionsSelect.test.js  |   0
 .../pages/Releases}/actions/branches.js       |   0
 .../pages/Releases}/actions/branches.test.js  |   0
 .../pages/Releases}/actions/channelMap.js     |   0
 .../Releases}/actions/channelMap.test.js      |   0
 .../pages/Releases}/actions/currentTrack.js   |   0
 .../Releases}/actions/currentTrack.test.js    |   0
 .../pages/Releases}/actions/defaultTrack.js   |   0
 .../Releases}/actions/defaultTrack.test.js    |   0
 .../Releases}/actions/gaEventTracking.js      |   2 +-
 .../Releases}/actions/gaEventTracking.test.js |   0
 .../Releases}/actions/globalNotification.js   |   0
 .../actions/globalNotification.test.js        |   0
 .../pages/Releases}/actions/history.js        |   0
 .../pages/Releases}/actions/history.test.js   |   0
 .../pages/Releases}/actions/index.js          |   0
 .../pages/Releases}/actions/modal.js          |   0
 .../pages/Releases}/actions/modal.test.js     |   0
 .../pages/Releases}/actions/pendingCloses.js  |   0
 .../Releases}/actions/pendingCloses.test.js   |   0
 .../Releases}/actions/pendingReleases.js      |   0
 .../Releases}/actions/pendingReleases.test.js |   0
 .../pages/Releases}/actions/releases.test.js  |   0
 .../pages/Releases}/actions/releases.ts       |   0
 .../pages/Releases}/actions/revisions.js      |   0
 .../pages/Releases}/actions/revisions.test.js |   0
 .../pages/Releases}/api/releases.js           |   0
 .../ProgressiveReleaseProgressChart.tsx       |   0
 .../Releases}/components/TrackInfo.test.tsx   |   0
 .../pages/Releases}/components/TrackInfo.tsx  |   0
 .../pages/Releases}/components/channelMenu.js |   0
 .../Releases}/components/contextualMenu.js    |   0
 .../components/defaultTrackModifier.js        |   0
 .../pages/Releases}/components/dnd.tsx        |   0
 .../components/globalNotification.js          |   0
 .../pages/Releases}/components/historyIcon.js |   0
 .../Releases}/components/historyPanel.js      |   0
 .../pages/Releases}/components/modal.js       |   0
 .../Releases}/components/notification.js      |   0
 .../Releases}/components/progressiveBar.js    |   0
 .../components/progressiveConfirm.js          |   0
 .../Releases}/components/releasesConfirm.tsx  |   2 +-
 .../components/releasesConfirmActions.js      |   0
 .../cancelProgressiveRow.js                   |   0
 .../closeChannelsRow.js                       |   0
 .../releasesConfirmDetails/globalRow.js       |   0
 .../releasesConfirmDetails/index.js           |   0
 .../releasesConfirmDetails/progressiveRow.js  |   0
 .../progressiveRowGroup.js                    |   0
 .../releasesConfirmDetails/releaseRow.js      |   0
 .../releasesConfirmDetails/types.js           |   0
 .../Releases/components/releasesHeading.js    | 593 +++++++++++++++++
 .../components/releasesTable/cellViews.js     |   0
 .../releasesTable/channelHeading.tsx          |   2 +-
 .../components/releasesTable/channelRow.js    |   0
 .../components/releasesTable/droppableRow.tsx |   0
 .../components/releasesTable/index.js         |   0
 .../components/releasesTable/releaseCell.js   |   0
 .../releasesTable/releaseMenuItem.js          |   0
 .../components/releasesTable/revisionCell.js  |   0
 .../components/releasesTable/revisionsRow.js  |   0
 .../components/releasesTable/row.tsx          |   0
 .../Releases}/components/revisionLabel.js     |   0
 .../Releases}/components/revisionsList.js     |   0
 .../Releases}/components/revisionsListRow.js  |   6 +-
 .../pages/Releases}/constants.js              |   0
 .../pages/Releases}/helpers.test.js           |   0
 .../pages/Releases}/helpers.ts                |   2 +-
 .../publisher-pages/pages/Releases/index.ts   |   1 +
 .../pages/Releases}/reducers/architectures.js |   0
 .../Releases}/reducers/architectures.test.js  |   0
 .../reducers/availableRevisionsSelect.js      |   0
 .../reducers/availableRevisionsSelect.test.js |   0
 .../pages/Releases}/reducers/branches.js      |   0
 .../pages/Releases}/reducers/branches.test.js |   0
 .../pages/Releases}/reducers/channelMap.js    |   0
 .../Releases}/reducers/channelMap.test.js     |   0
 .../pages/Releases}/reducers/currentTrack.js  |   0
 .../Releases}/reducers/currentTrack.test.js   |   0
 .../pages/Releases}/reducers/defaultTrack.js  |   0
 .../Releases}/reducers/defaultTrack.test.js   |   0
 .../Releases}/reducers/globalNotification.js  |   0
 .../reducers/globalNotification.test.js       |   0
 .../pages/Releases}/reducers/history.js       |   0
 .../pages/Releases}/reducers/history.test.js  |   0
 .../pages/Releases}/reducers/index.js         |   0
 .../pages/Releases}/reducers/modal.js         |   0
 .../pages/Releases}/reducers/modal.test.js    |   0
 .../pages/Releases}/reducers/options.js       |   0
 .../pages/Releases}/reducers/pendingCloses.js |   0
 .../Releases}/reducers/pendingCloses.test.js  |   0
 .../reducers/pendingReleases.test.js          |   0
 .../Releases}/reducers/pendingReleases.ts     |   0
 .../pages/Releases}/reducers/releases.js      |   0
 .../pages/Releases}/reducers/releases.test.js |   0
 .../pages/Releases}/reducers/revisions.js     |   0
 .../Releases}/reducers/revisions.test.js      |   0
 .../pages/Releases}/releasesController.js     |   0
 .../pages/Releases}/releasesState.js          |   0
 .../pages/Releases}/selectors/index.ts        |   2 +-
 .../Releases}/selectors/selectors.test.js     |   0
 .../publisher-pages/types/releaseTypes.d.ts   |  92 +++
 .../release/components/releasesHeading.js     | 595 ------------------
 templates/publisher/release-history.html      |  57 --
 tests/publisher/snaps/tests_revision.py       |  87 ---
 webapp/publisher/snaps/release_views.py       |  15 +-
 webapp/publisher/snaps/views.py               |   7 +-
 webpack.config.entry.js                       |   1 -
 webpack.config.rules.js                       |   4 -
 115 files changed, 847 insertions(+), 756 deletions(-)
 create mode 100644 static/js/publisher-pages/pages/Releases/Release.tsx
 create mode 100644 static/js/publisher-pages/pages/Releases/Releases.tsx
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/architectures.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/architectures.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/availableRevisionsSelect.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/availableRevisionsSelect.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/branches.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/branches.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/channelMap.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/channelMap.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/currentTrack.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/currentTrack.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/defaultTrack.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/defaultTrack.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/gaEventTracking.js (92%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/gaEventTracking.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/globalNotification.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/globalNotification.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/history.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/history.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/index.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/modal.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/modal.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/pendingCloses.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/pendingCloses.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/pendingReleases.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/pendingReleases.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/releases.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/releases.ts (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/revisions.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/actions/revisions.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/api/releases.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/ProgressiveReleaseProgressChart.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/TrackInfo.test.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/TrackInfo.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/channelMenu.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/contextualMenu.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/defaultTrackModifier.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/dnd.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/globalNotification.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/historyIcon.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/historyPanel.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/modal.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/notification.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/progressiveBar.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/progressiveConfirm.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirm.tsx (99%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmActions.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/cancelProgressiveRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/closeChannelsRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/globalRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/index.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/progressiveRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/progressiveRowGroup.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/releaseRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesConfirmDetails/types.js (100%)
 create mode 100644 static/js/publisher-pages/pages/Releases/components/releasesHeading.js
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/cellViews.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/channelHeading.tsx (99%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/channelRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/droppableRow.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/index.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/releaseCell.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/releaseMenuItem.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/revisionCell.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/revisionsRow.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/releasesTable/row.tsx (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/revisionLabel.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/revisionsList.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/components/revisionsListRow.js (98%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/constants.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/helpers.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/helpers.ts (98%)
 create mode 100644 static/js/publisher-pages/pages/Releases/index.ts
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/architectures.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/architectures.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/availableRevisionsSelect.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/availableRevisionsSelect.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/branches.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/branches.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/channelMap.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/channelMap.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/currentTrack.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/currentTrack.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/defaultTrack.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/defaultTrack.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/globalNotification.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/globalNotification.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/history.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/history.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/index.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/modal.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/modal.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/options.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/pendingCloses.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/pendingCloses.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/pendingReleases.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/pendingReleases.ts (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/releases.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/releases.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/revisions.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/reducers/revisions.test.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/releasesController.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/releasesState.js (100%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/selectors/index.ts (99%)
 rename static/js/{publisher/release => publisher-pages/pages/Releases}/selectors/selectors.test.js (100%)
 create mode 100644 static/js/publisher-pages/types/releaseTypes.d.ts
 delete mode 100644 static/js/publisher/release/components/releasesHeading.js
 delete mode 100644 templates/publisher/release-history.html
 delete mode 100644 tests/publisher/snaps/tests_revision.py

diff --git a/static/js/publisher-pages/index.tsx b/static/js/publisher-pages/index.tsx
index c29502a763..18e9e2e5d8 100644
--- a/static/js/publisher-pages/index.tsx
+++ b/static/js/publisher-pages/index.tsx
@@ -12,6 +12,7 @@ import Metrics from "./pages/Metrics";
 import Listing from "./pages/Listing";
 import Builds from "./pages/Builds";
 import Build from "./pages/Build";
+import Releases from "./pages/Releases";
 
 const router = createBrowserRouter([
   {
@@ -58,6 +59,10 @@ const router = createBrowserRouter([
         path: "/:snapId/builds/:buildId",
         element: <Build />,
       },
+      {
+        path: "/:snapId/releases",
+        element: <Releases />,
+      },
     ],
   },
 ]);
diff --git a/static/js/publisher-pages/pages/Releases/Release.tsx b/static/js/publisher-pages/pages/Releases/Release.tsx
new file mode 100644
index 0000000000..9d7a61b3d8
--- /dev/null
+++ b/static/js/publisher-pages/pages/Releases/Release.tsx
@@ -0,0 +1,64 @@
+import { createStore, applyMiddleware, compose } from "redux";
+import thunk from "redux-thunk";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Provider } from "react-redux";
+import { DndProvider } from "react-dnd";
+import ReleasesController from "./releasesController";
+import releases from "./reducers";
+import {
+  ReleasesData,
+  ChannelMap,
+  Track,
+  Options,
+} from "../../types/releaseTypes";
+
+// setup redux store with thunk middleware and devtools extension:
+// https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+type Props = {
+  snapName: string;
+  releasesData: ReleasesData;
+  channelMap: ChannelMap[];
+  tracks: Track[];
+  options: Options;
+};
+
+function Release({
+  snapName,
+  releasesData,
+  channelMap,
+  tracks,
+  options,
+}: Props): JSX.Element {
+  const store = createStore(
+    releases,
+    {
+      currentTrack: options.defaultTrack || "latest",
+      defaultTrack: options.defaultTrack,
+      options: {
+        ...options,
+        // @ts-ignore
+        snapName,
+        tracks,
+      },
+    },
+    composeEnhancers(applyMiddleware(thunk)),
+  );
+
+  return (
+    <Provider store={store}>
+      <DndProvider backend={HTML5Backend}>
+        <ReleasesController
+          snapName={snapName}
+          releasesData={releasesData}
+          channelMap={channelMap}
+          // @ts-ignore
+          options={options}
+        />
+      </DndProvider>
+    </Provider>
+  );
+}
+
+export default Release;
diff --git a/static/js/publisher-pages/pages/Releases/Releases.tsx b/static/js/publisher-pages/pages/Releases/Releases.tsx
new file mode 100644
index 0000000000..6ededc2558
--- /dev/null
+++ b/static/js/publisher-pages/pages/Releases/Releases.tsx
@@ -0,0 +1,66 @@
+import { useParams } from "react-router-dom";
+import { useQuery } from "react-query";
+import { Strip, Link } from "@canonical/react-components";
+
+import SectionNav from "../../components/SectionNav";
+import Release from "./Release";
+
+function Releases(): JSX.Element {
+  const { snapId } = useParams();
+  const { isLoading, isFetched, data } = useQuery({
+    queryKey: ["releases"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/releases`);
+
+      if (!response.ok) {
+        throw new Error("There was a problem fetching releases data");
+      }
+
+      const responseData = await response.json();
+
+      if (!responseData.success) {
+        throw new Error("There was a problem fetching releases data");
+      }
+
+      return responseData.data;
+    },
+  });
+
+  return (
+    <>
+      <h1 className="p-heading--4">
+        <Link href="/snaps">My snaps</Link> /{" "}
+        <Link href={`/${snapId}`}>{snapId}</Link> / Releases
+      </h1>
+
+      <SectionNav snapName={snapId} activeTab="releases" />
+
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
+            {snapId} releases data
+          </p>
+        </Strip>
+      )}
+
+      {isFetched && data && (
+        <Release
+          snapName={snapId || ""}
+          releasesData={data.release_history}
+          channelMap={data.channel_map}
+          tracks={data.tracks}
+          options={{
+            csrfToken: window.CSRF_TOKEN,
+            defaultTrack: data.default_track,
+            flags: {
+              isProgressiveReleaseEnabled: true,
+            },
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default Releases;
diff --git a/static/js/publisher/release/actions/architectures.js b/static/js/publisher-pages/pages/Releases/actions/architectures.js
similarity index 100%
rename from static/js/publisher/release/actions/architectures.js
rename to static/js/publisher-pages/pages/Releases/actions/architectures.js
diff --git a/static/js/publisher/release/actions/architectures.test.js b/static/js/publisher-pages/pages/Releases/actions/architectures.test.js
similarity index 100%
rename from static/js/publisher/release/actions/architectures.test.js
rename to static/js/publisher-pages/pages/Releases/actions/architectures.test.js
diff --git a/static/js/publisher/release/actions/availableRevisionsSelect.js b/static/js/publisher-pages/pages/Releases/actions/availableRevisionsSelect.js
similarity index 100%
rename from static/js/publisher/release/actions/availableRevisionsSelect.js
rename to static/js/publisher-pages/pages/Releases/actions/availableRevisionsSelect.js
diff --git a/static/js/publisher/release/actions/availableRevisionsSelect.test.js b/static/js/publisher-pages/pages/Releases/actions/availableRevisionsSelect.test.js
similarity index 100%
rename from static/js/publisher/release/actions/availableRevisionsSelect.test.js
rename to static/js/publisher-pages/pages/Releases/actions/availableRevisionsSelect.test.js
diff --git a/static/js/publisher/release/actions/branches.js b/static/js/publisher-pages/pages/Releases/actions/branches.js
similarity index 100%
rename from static/js/publisher/release/actions/branches.js
rename to static/js/publisher-pages/pages/Releases/actions/branches.js
diff --git a/static/js/publisher/release/actions/branches.test.js b/static/js/publisher-pages/pages/Releases/actions/branches.test.js
similarity index 100%
rename from static/js/publisher/release/actions/branches.test.js
rename to static/js/publisher-pages/pages/Releases/actions/branches.test.js
diff --git a/static/js/publisher/release/actions/channelMap.js b/static/js/publisher-pages/pages/Releases/actions/channelMap.js
similarity index 100%
rename from static/js/publisher/release/actions/channelMap.js
rename to static/js/publisher-pages/pages/Releases/actions/channelMap.js
diff --git a/static/js/publisher/release/actions/channelMap.test.js b/static/js/publisher-pages/pages/Releases/actions/channelMap.test.js
similarity index 100%
rename from static/js/publisher/release/actions/channelMap.test.js
rename to static/js/publisher-pages/pages/Releases/actions/channelMap.test.js
diff --git a/static/js/publisher/release/actions/currentTrack.js b/static/js/publisher-pages/pages/Releases/actions/currentTrack.js
similarity index 100%
rename from static/js/publisher/release/actions/currentTrack.js
rename to static/js/publisher-pages/pages/Releases/actions/currentTrack.js
diff --git a/static/js/publisher/release/actions/currentTrack.test.js b/static/js/publisher-pages/pages/Releases/actions/currentTrack.test.js
similarity index 100%
rename from static/js/publisher/release/actions/currentTrack.test.js
rename to static/js/publisher-pages/pages/Releases/actions/currentTrack.test.js
diff --git a/static/js/publisher/release/actions/defaultTrack.js b/static/js/publisher-pages/pages/Releases/actions/defaultTrack.js
similarity index 100%
rename from static/js/publisher/release/actions/defaultTrack.js
rename to static/js/publisher-pages/pages/Releases/actions/defaultTrack.js
diff --git a/static/js/publisher/release/actions/defaultTrack.test.js b/static/js/publisher-pages/pages/Releases/actions/defaultTrack.test.js
similarity index 100%
rename from static/js/publisher/release/actions/defaultTrack.test.js
rename to static/js/publisher-pages/pages/Releases/actions/defaultTrack.test.js
diff --git a/static/js/publisher/release/actions/gaEventTracking.js b/static/js/publisher-pages/pages/Releases/actions/gaEventTracking.js
similarity index 92%
rename from static/js/publisher/release/actions/gaEventTracking.js
rename to static/js/publisher-pages/pages/Releases/actions/gaEventTracking.js
index 21c02a4fc5..13c51c9eb5 100644
--- a/static/js/publisher/release/actions/gaEventTracking.js
+++ b/static/js/publisher-pages/pages/Releases/actions/gaEventTracking.js
@@ -1,4 +1,4 @@
-import { triggerEventReleaseUI } from "../../../base/ga";
+import { triggerEventReleaseUI } from "../../../../base/ga";
 
 export function triggerGAEvent() {
   const eventLabelItems = [...arguments];
diff --git a/static/js/publisher/release/actions/gaEventTracking.test.js b/static/js/publisher-pages/pages/Releases/actions/gaEventTracking.test.js
similarity index 100%
rename from static/js/publisher/release/actions/gaEventTracking.test.js
rename to static/js/publisher-pages/pages/Releases/actions/gaEventTracking.test.js
diff --git a/static/js/publisher/release/actions/globalNotification.js b/static/js/publisher-pages/pages/Releases/actions/globalNotification.js
similarity index 100%
rename from static/js/publisher/release/actions/globalNotification.js
rename to static/js/publisher-pages/pages/Releases/actions/globalNotification.js
diff --git a/static/js/publisher/release/actions/globalNotification.test.js b/static/js/publisher-pages/pages/Releases/actions/globalNotification.test.js
similarity index 100%
rename from static/js/publisher/release/actions/globalNotification.test.js
rename to static/js/publisher-pages/pages/Releases/actions/globalNotification.test.js
diff --git a/static/js/publisher/release/actions/history.js b/static/js/publisher-pages/pages/Releases/actions/history.js
similarity index 100%
rename from static/js/publisher/release/actions/history.js
rename to static/js/publisher-pages/pages/Releases/actions/history.js
diff --git a/static/js/publisher/release/actions/history.test.js b/static/js/publisher-pages/pages/Releases/actions/history.test.js
similarity index 100%
rename from static/js/publisher/release/actions/history.test.js
rename to static/js/publisher-pages/pages/Releases/actions/history.test.js
diff --git a/static/js/publisher/release/actions/index.js b/static/js/publisher-pages/pages/Releases/actions/index.js
similarity index 100%
rename from static/js/publisher/release/actions/index.js
rename to static/js/publisher-pages/pages/Releases/actions/index.js
diff --git a/static/js/publisher/release/actions/modal.js b/static/js/publisher-pages/pages/Releases/actions/modal.js
similarity index 100%
rename from static/js/publisher/release/actions/modal.js
rename to static/js/publisher-pages/pages/Releases/actions/modal.js
diff --git a/static/js/publisher/release/actions/modal.test.js b/static/js/publisher-pages/pages/Releases/actions/modal.test.js
similarity index 100%
rename from static/js/publisher/release/actions/modal.test.js
rename to static/js/publisher-pages/pages/Releases/actions/modal.test.js
diff --git a/static/js/publisher/release/actions/pendingCloses.js b/static/js/publisher-pages/pages/Releases/actions/pendingCloses.js
similarity index 100%
rename from static/js/publisher/release/actions/pendingCloses.js
rename to static/js/publisher-pages/pages/Releases/actions/pendingCloses.js
diff --git a/static/js/publisher/release/actions/pendingCloses.test.js b/static/js/publisher-pages/pages/Releases/actions/pendingCloses.test.js
similarity index 100%
rename from static/js/publisher/release/actions/pendingCloses.test.js
rename to static/js/publisher-pages/pages/Releases/actions/pendingCloses.test.js
diff --git a/static/js/publisher/release/actions/pendingReleases.js b/static/js/publisher-pages/pages/Releases/actions/pendingReleases.js
similarity index 100%
rename from static/js/publisher/release/actions/pendingReleases.js
rename to static/js/publisher-pages/pages/Releases/actions/pendingReleases.js
diff --git a/static/js/publisher/release/actions/pendingReleases.test.js b/static/js/publisher-pages/pages/Releases/actions/pendingReleases.test.js
similarity index 100%
rename from static/js/publisher/release/actions/pendingReleases.test.js
rename to static/js/publisher-pages/pages/Releases/actions/pendingReleases.test.js
diff --git a/static/js/publisher/release/actions/releases.test.js b/static/js/publisher-pages/pages/Releases/actions/releases.test.js
similarity index 100%
rename from static/js/publisher/release/actions/releases.test.js
rename to static/js/publisher-pages/pages/Releases/actions/releases.test.js
diff --git a/static/js/publisher/release/actions/releases.ts b/static/js/publisher-pages/pages/Releases/actions/releases.ts
similarity index 100%
rename from static/js/publisher/release/actions/releases.ts
rename to static/js/publisher-pages/pages/Releases/actions/releases.ts
diff --git a/static/js/publisher/release/actions/revisions.js b/static/js/publisher-pages/pages/Releases/actions/revisions.js
similarity index 100%
rename from static/js/publisher/release/actions/revisions.js
rename to static/js/publisher-pages/pages/Releases/actions/revisions.js
diff --git a/static/js/publisher/release/actions/revisions.test.js b/static/js/publisher-pages/pages/Releases/actions/revisions.test.js
similarity index 100%
rename from static/js/publisher/release/actions/revisions.test.js
rename to static/js/publisher-pages/pages/Releases/actions/revisions.test.js
diff --git a/static/js/publisher/release/api/releases.js b/static/js/publisher-pages/pages/Releases/api/releases.js
similarity index 100%
rename from static/js/publisher/release/api/releases.js
rename to static/js/publisher-pages/pages/Releases/api/releases.js
diff --git a/static/js/publisher/release/components/ProgressiveReleaseProgressChart.tsx b/static/js/publisher-pages/pages/Releases/components/ProgressiveReleaseProgressChart.tsx
similarity index 100%
rename from static/js/publisher/release/components/ProgressiveReleaseProgressChart.tsx
rename to static/js/publisher-pages/pages/Releases/components/ProgressiveReleaseProgressChart.tsx
diff --git a/static/js/publisher/release/components/TrackInfo.test.tsx b/static/js/publisher-pages/pages/Releases/components/TrackInfo.test.tsx
similarity index 100%
rename from static/js/publisher/release/components/TrackInfo.test.tsx
rename to static/js/publisher-pages/pages/Releases/components/TrackInfo.test.tsx
diff --git a/static/js/publisher/release/components/TrackInfo.tsx b/static/js/publisher-pages/pages/Releases/components/TrackInfo.tsx
similarity index 100%
rename from static/js/publisher/release/components/TrackInfo.tsx
rename to static/js/publisher-pages/pages/Releases/components/TrackInfo.tsx
diff --git a/static/js/publisher/release/components/channelMenu.js b/static/js/publisher-pages/pages/Releases/components/channelMenu.js
similarity index 100%
rename from static/js/publisher/release/components/channelMenu.js
rename to static/js/publisher-pages/pages/Releases/components/channelMenu.js
diff --git a/static/js/publisher/release/components/contextualMenu.js b/static/js/publisher-pages/pages/Releases/components/contextualMenu.js
similarity index 100%
rename from static/js/publisher/release/components/contextualMenu.js
rename to static/js/publisher-pages/pages/Releases/components/contextualMenu.js
diff --git a/static/js/publisher/release/components/defaultTrackModifier.js b/static/js/publisher-pages/pages/Releases/components/defaultTrackModifier.js
similarity index 100%
rename from static/js/publisher/release/components/defaultTrackModifier.js
rename to static/js/publisher-pages/pages/Releases/components/defaultTrackModifier.js
diff --git a/static/js/publisher/release/components/dnd.tsx b/static/js/publisher-pages/pages/Releases/components/dnd.tsx
similarity index 100%
rename from static/js/publisher/release/components/dnd.tsx
rename to static/js/publisher-pages/pages/Releases/components/dnd.tsx
diff --git a/static/js/publisher/release/components/globalNotification.js b/static/js/publisher-pages/pages/Releases/components/globalNotification.js
similarity index 100%
rename from static/js/publisher/release/components/globalNotification.js
rename to static/js/publisher-pages/pages/Releases/components/globalNotification.js
diff --git a/static/js/publisher/release/components/historyIcon.js b/static/js/publisher-pages/pages/Releases/components/historyIcon.js
similarity index 100%
rename from static/js/publisher/release/components/historyIcon.js
rename to static/js/publisher-pages/pages/Releases/components/historyIcon.js
diff --git a/static/js/publisher/release/components/historyPanel.js b/static/js/publisher-pages/pages/Releases/components/historyPanel.js
similarity index 100%
rename from static/js/publisher/release/components/historyPanel.js
rename to static/js/publisher-pages/pages/Releases/components/historyPanel.js
diff --git a/static/js/publisher/release/components/modal.js b/static/js/publisher-pages/pages/Releases/components/modal.js
similarity index 100%
rename from static/js/publisher/release/components/modal.js
rename to static/js/publisher-pages/pages/Releases/components/modal.js
diff --git a/static/js/publisher/release/components/notification.js b/static/js/publisher-pages/pages/Releases/components/notification.js
similarity index 100%
rename from static/js/publisher/release/components/notification.js
rename to static/js/publisher-pages/pages/Releases/components/notification.js
diff --git a/static/js/publisher/release/components/progressiveBar.js b/static/js/publisher-pages/pages/Releases/components/progressiveBar.js
similarity index 100%
rename from static/js/publisher/release/components/progressiveBar.js
rename to static/js/publisher-pages/pages/Releases/components/progressiveBar.js
diff --git a/static/js/publisher/release/components/progressiveConfirm.js b/static/js/publisher-pages/pages/Releases/components/progressiveConfirm.js
similarity index 100%
rename from static/js/publisher/release/components/progressiveConfirm.js
rename to static/js/publisher-pages/pages/Releases/components/progressiveConfirm.js
diff --git a/static/js/publisher/release/components/releasesConfirm.tsx b/static/js/publisher-pages/pages/Releases/components/releasesConfirm.tsx
similarity index 99%
rename from static/js/publisher/release/components/releasesConfirm.tsx
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirm.tsx
index 26482af010..ffa16460d9 100644
--- a/static/js/publisher/release/components/releasesConfirm.tsx
+++ b/static/js/publisher-pages/pages/Releases/components/releasesConfirm.tsx
@@ -1,7 +1,7 @@
 import { Component, createRef } from "react";
 import { connect } from "react-redux";
 
-import debounce from "../../../libs/debounce";
+import debounce from "../../../../libs/debounce";
 
 import ReleasesConfirmDetails from "./releasesConfirmDetails/";
 import ReleasesConfirmActions from "./releasesConfirmActions";
diff --git a/static/js/publisher/release/components/releasesConfirmActions.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmActions.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmActions.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmActions.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/cancelProgressiveRow.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/cancelProgressiveRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/cancelProgressiveRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/cancelProgressiveRow.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/closeChannelsRow.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/closeChannelsRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/closeChannelsRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/closeChannelsRow.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/globalRow.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/globalRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/globalRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/globalRow.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/index.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/index.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/index.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/index.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/progressiveRow.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/progressiveRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/progressiveRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/progressiveRow.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/progressiveRowGroup.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/progressiveRowGroup.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/progressiveRowGroup.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/progressiveRowGroup.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/releaseRow.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/releaseRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/releaseRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/releaseRow.js
diff --git a/static/js/publisher/release/components/releasesConfirmDetails/types.js b/static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/types.js
similarity index 100%
rename from static/js/publisher/release/components/releasesConfirmDetails/types.js
rename to static/js/publisher-pages/pages/Releases/components/releasesConfirmDetails/types.js
diff --git a/static/js/publisher-pages/pages/Releases/components/releasesHeading.js b/static/js/publisher-pages/pages/Releases/components/releasesHeading.js
new file mode 100644
index 0000000000..b069c11c2c
--- /dev/null
+++ b/static/js/publisher-pages/pages/Releases/components/releasesHeading.js
@@ -0,0 +1,593 @@
+import React, { useState } from "react";
+import { useQuery } from "react-query";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import {
+  Row,
+  Col,
+  Button,
+  Icon,
+  Form,
+  Notification,
+  Accordion,
+} from "@canonical/react-components";
+
+import { setCurrentTrack } from "../actions/currentTrack";
+import { closeHistory } from "../actions/history";
+import { getTracks } from "../selectors";
+import {
+  validatePhasingPercentage,
+  resizeAsidePanel,
+  numericalSort,
+  getPackageMetadata,
+} from "../helpers";
+
+import DefaultTrackModifier from "./defaultTrackModifier";
+import ReleasesTable from "./releasesTable";
+import TrackInfo from "./TrackInfo";
+
+function ReleasesHeading(props) {
+  resizeAsidePanel("request");
+  resizeAsidePanel("add");
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [requestTrackSidePanelOpen, setRequestTrackSidePanelOpen] =
+    useState(false);
+
+  const [addTrackSidePanelOpen, setAddTrackSidePanelOpen] = useState(false);
+
+  const openRequestTrackSidePanel = () => {
+    setRequestTrackSidePanelOpen(true);
+  };
+
+  const closeRequestTrackSidePanel = () => {
+    setRequestTrackSidePanelOpen(false);
+  };
+
+  const openAddTrackSidePanel = () => {
+    setAddTrackSidePanelOpen(true);
+  };
+
+  const closeAddTrackSidePanel = () => {
+    setTrackName("");
+    setVersionPattern("");
+    setPhasingPercentage("");
+    setPhasingPercentageError("");
+    setTrackNameError("");
+    setAddTrackSidePanelOpen(false);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (track) => {
+    props.setCurrentTrack(track);
+    setIsOpen(false);
+  };
+
+  const { tracks, currentTrack, defaultTrack } = props;
+  tracks.sort(numericalSort);
+  const options = tracks.map((track) => ({ value: track, label: track }));
+
+  const [trackName, setTrackName] = useState("");
+  const [versionPattern, setVersionPattern] = useState("");
+  const [phasingPercentage, setPhasingPercentage] = useState("");
+  const [phasingPercentageError, setPhasingPercentageError] = useState("");
+
+  const isTrackNameFilled = trackName.trim().length > 0;
+  const [isLoading, setIsLoading] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  const { data, guardrailsLoading, error } = useQuery(
+    ["snapData", props.snapName],
+    async () => {
+      const response = await getPackageMetadata(props.snapName);
+      return response;
+    },
+    { enabled: !!props.snapName },
+  );
+
+  const storedTracks = data?.tracks || [];
+  const trackGuardrailsData = data?.["track-guardrails"];
+
+  const trackInfo = storedTracks.find(
+    (track) => track.name === props.currentTrack,
+  );
+  const currentTrackVersionPattern = trackInfo?.["version-pattern"] || null;
+  const currentPhasingPercentage =
+    trackInfo?.["automatic-phasing-percentage"] || null;
+
+  let trackGuardrailsStatus = null;
+
+  if (guardrailsLoading) {
+    trackGuardrailsStatus = null;
+  } else if (error) {
+    trackGuardrailsStatus = "error";
+  } else if (!trackGuardrailsData) {
+    trackGuardrailsStatus = "no-guardrails";
+  } else if (trackGuardrailsData.length === 0) {
+    trackGuardrailsStatus = "request";
+  } else {
+    trackGuardrailsStatus = "add";
+  }
+
+  const handleTrackNameChange = (event) => {
+    setTrackNameError("");
+    const { value } = event.target;
+    setTrackName(value);
+  };
+
+  const handleVersionPatternChange = (event) => {
+    setVersionPattern(event.target.value);
+  };
+
+  const handlePhasingPercentageChange = (event) => {
+    const { value } = event.target;
+    setPhasingPercentage(value);
+    const error = validatePhasingPercentage(value);
+    setPhasingPercentageError(error);
+  };
+
+  const showNotification = (type, message) => {
+    setNotification({ type, message });
+  };
+
+  const [successNotification, setSuccessNotification] = useState(null);
+  const [trackNameError, setTrackNameError] = useState("");
+
+  const handleAddTrack = async () => {
+    try {
+      setIsLoading(true);
+
+      const formData = new URLSearchParams();
+      formData.append("track-name", trackName);
+
+      if (versionPattern.trim() !== "") {
+        formData.append("version-pattern", versionPattern);
+      }
+
+      if (phasingPercentage.trim() !== "" && !phasingPercentageError) {
+        formData.append("automatic-phasing-percentage", phasingPercentage);
+      }
+
+      const response = await fetch(`/${props.snapName}/create-track`, {
+        method: "POST",
+        body: formData,
+      });
+
+      const responseData = await response.json();
+
+      if (response.ok) {
+        props.setCurrentTrack(trackName);
+        closeAddTrackSidePanel();
+        setSuccessNotification(`Track ${trackName} created successfully`);
+      } else {
+        let errorMessage = responseData.error;
+        if (responseData && responseData["error-list"]) {
+          const error = responseData["error-list"][0];
+          if (error && error.message) {
+            errorMessage = error.message;
+          }
+        }
+        setTrackNameError(errorMessage);
+      }
+    } catch (error) {
+      console.error("Error:", error.message);
+      showNotification("Error", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const dropdownPaddingClass =
+    trackGuardrailsStatus === "error"
+      ? "dropdown-menu padding-bottom"
+      : "dropdown-menu no-padding-bottom";
+
+  return (
+    <>
+      <main className="l-main">
+        <div>
+          <div className="u-fixed-width">
+            <h4 className="p-heading--4">Releases available to install</h4>
+          </div>
+          <Row>
+            <Col size={6}>
+              <h5 className="p-strip is-shallow u-no-padding--top u-no-padding--bottom">
+                <label htmlFor="track-dropdown">
+                  Track: &nbsp;
+                  <div className="track-dropdown">
+                    <div className="dropdown-toggle" onClick={handleToggle}>
+                      {currentTrack}
+                      <i className="p-icon--chevron-down u-float-right"></i>
+                    </div>
+                    {isOpen && (
+                      <div className={dropdownPaddingClass}>
+                        <div className="options-container">
+                          {options.map((option, index) => (
+                            <div
+                              key={index}
+                              className="dropdown-item"
+                              onClick={() => handleSelect(option.value)}
+                            >
+                              {option.label}
+                              {option.value === defaultTrack && (
+                                <div className="p-status-label">Default</div>
+                              )}
+                              {option.value === currentTrack && (
+                                <i className="p-icon--task-outstanding u-float-right"></i>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                        {trackGuardrailsStatus !== "error" &&
+                          trackGuardrailsStatus !== "no-guardrails" && (
+                            <div className="track-button-wrapper">
+                              {guardrailsLoading ? (
+                                <div>
+                                  <Icon
+                                    name="spinner"
+                                    className="u-animation--spin"
+                                  />
+                                  &nbsp;Loading...
+                                </div>
+                              ) : (
+                                <div className="track-button">
+                                  {trackGuardrailsStatus === "request" && (
+                                    <Button
+                                      className="p-button has-icon new-track-button"
+                                      onClick={() => {
+                                        openRequestTrackSidePanel();
+                                        if (isOpen) {
+                                          handleToggle();
+                                        }
+                                      }}
+                                    >
+                                      <i className="p-icon--plus"></i>
+                                      <span>Request track</span>
+                                    </Button>
+                                  )}
+                                  {trackGuardrailsStatus === "add" && (
+                                    <Button
+                                      className="p-button has-icon new-track-button"
+                                      onClick={() => {
+                                        openAddTrackSidePanel();
+                                        if (isOpen) {
+                                          handleToggle();
+                                        }
+                                      }}
+                                    >
+                                      <i className="p-icon--plus"></i>
+                                      <span>Add track</span>
+                                    </Button>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                      </div>
+                    )}
+                  </div>
+                </label>
+              </h5>
+              <TrackInfo
+                versionPattern={currentTrackVersionPattern}
+                automaticPhasingPercentage={currentPhasingPercentage}
+              />
+              <div className="success-notification">
+                {successNotification && (
+                  <Notification severity="positive">
+                    {successNotification}
+                  </Notification>
+                )}
+              </div>
+            </Col>
+            <div className="col-6" style={{ marginTop: "0.25rem" }}>
+              {<DefaultTrackModifier />}
+            </div>
+          </Row>
+        </div>
+        <ReleasesTable />
+      </main>
+
+      {/* Request track aside panel */}
+
+      <div
+        className={`l-aside__overlay ${requestTrackSidePanelOpen ? "" : "u-hide"}`}
+        onClick={closeRequestTrackSidePanel}
+      ></div>
+      <aside
+        className={`l-aside ${requestTrackSidePanelOpen ? "" : "is-collapsed"}`}
+        id="request-track-aside-panel"
+      >
+        <div className="p-panel is-flex-column">
+          <div className="p-panel__header">
+            <h4 className="p-panel__title p-heading--4">REQUEST TRACK</h4>
+          </div>
+          <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
+            <h5 className="p-heading--5 u-no-margin--bottom">
+              What is a track?
+            </h5>
+            <p>
+              A track contains a series of compatible releases. <br />
+              For example, you could maintain your &#34;3.x&#34; and
+              &#34;4.x&#34; series in different tracks. <br />
+              You could also use a track for an LTS release.
+            </p>
+            <p>
+              Every track has risk-levels available (stable, beta, candidate,
+              edge).
+            </p>
+            <p>
+              Release to a new track using: <br />
+              <code>
+                snapcraft release &lt;snap-name&gt; &lt;revision&gt;
+                &lt;track&gt;/&lt;risk&gt;
+              </code>
+            </p>
+            <p>
+              <a href="https://snapcraft.io/docs/channels">
+                Learn about tracks, risk-levels and branches
+              </a>
+              <br />
+              <a href="https://snapcraft.io/docs/publish-to-a-branch">
+                How to make a release
+              </a>
+            </p>
+            <h5 className="p-heading--5 u-no-padding--top u-no-margin--bottom">
+              What to expect
+            </h5>
+            <p>
+              After the Forum request, we will be in touch with you to validate
+              the track creation guardrails (TCG).
+            </p>
+            <p>
+              After the Admin validation, you will have access to a self-serve
+              track creation service.
+            </p>
+            <h5 className="p-heading--5 u-no-padding--top u-no-margin--bottom">
+              Request a new track
+            </h5>
+            <p className="u-no-padding--bottom">
+              To request a new track, follow the link below to go to the
+              Snapcraft Forum and open a new topic under the
+              &#34;store-requests&#34; category.
+            </p>
+          </div>
+          <div className="aside-panel-footer">
+            <div className="p-panel__footer u-align--right">
+              <div className="u-fixed-width">
+                <Button
+                  className="u-no-margin--bottom"
+                  onClick={closeRequestTrackSidePanel}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="u-no-margin--bottom p-button--positive"
+                  onClick={() =>
+                    window.open(
+                      'https://forum.snapcraft.io/new-topic?title=Create+new+track+for+"snap+name"&category=store-requests',
+                      "_blank",
+                    )
+                  }
+                >
+                  Request on Forum
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      {/* Add track aside panel */}
+
+      <div
+        className={`l-aside__overlay ${addTrackSidePanelOpen ? "" : "u-hide"}`}
+        onClick={closeAddTrackSidePanel}
+      ></div>
+      <aside
+        className={`l-aside ${addTrackSidePanelOpen ? "" : "is-collapsed"}`}
+        id="add-track-aside-panel"
+      >
+        <div className="p-panel is-flex-column">
+          <div className="p-panel__header">
+            <h4 className="p-panel__title p-heading--4">ADD TRACK</h4>
+          </div>
+          <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
+            <Form>
+              <div>
+                <div
+                  className={`p-form__group p-form-validation ${trackNameError ? " is-error" : ""}`}
+                >
+                  <label htmlFor="trackName" className="p-form__label">
+                    <strong>* Track name</strong>
+                  </label>
+                  <div className="p-form__control">
+                    <input
+                      type="text"
+                      id="trackName"
+                      className="p-form-validation__input"
+                      required={true}
+                      placeholder="display-name123"
+                      aria-invalid="true"
+                      aria-describedby="trackName"
+                      name="trackName"
+                      value={trackName}
+                      onChange={handleTrackNameChange}
+                    />
+                    <p
+                      className="p-form-validation__message"
+                      id="trackNameErrorMessage"
+                    >
+                      {trackNameError}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <p className="p-form-help-text" id="trackNameHelpMessage">
+                Name should follow the track creation guardrails (TCG).
+              </p>
+
+              {/* Optional Properties */}
+              <Accordion
+                className="add-track-accordion"
+                sections={[
+                  {
+                    key: "optional properties",
+                    title: "Optional Properties",
+                    content: (
+                      <div>
+                        <div>
+                          <label htmlFor="versionPattern">
+                            <strong>Version pattern</strong>
+                          </label>
+                          <input
+                            type="text"
+                            id="versionPattern"
+                            name="versionPattern"
+                            placeholder="?.v.*"
+                            value={versionPattern}
+                            onChange={handleVersionPatternChange}
+                          />
+                        </div>
+                        <p
+                          className="p-form-help-text"
+                          id="versionPatternHelpMessage"
+                        >
+                          Version pattern should follow glob pattern
+                        </p>
+
+                        <div
+                          className={`p-form__group p-form-validation ${phasingPercentageError ? " is-error" : ""}`}
+                        >
+                          <label
+                            htmlFor="phasingPercentage"
+                            className="p-form__label"
+                          >
+                            <strong>Automatic phasing percentage</strong>
+                          </label>
+                          <div className="p-form__control">
+                            <input
+                              type="text"
+                              id="phasingPercentage"
+                              className="p-form-validation__input"
+                              placeholder="10.15"
+                              aria-invalid="true"
+                              aria-describedby="phasingPercentageErrorMessage"
+                              name="phasingPercentage"
+                              value={phasingPercentage}
+                              onChange={handlePhasingPercentageChange}
+                            />
+                            <p
+                              className="p-form-validation__message"
+                              id="phasingPercentageErrorMessage"
+                            >
+                              {phasingPercentageError}
+                            </p>
+                          </div>
+                        </div>
+                        <p
+                          className="p-form-help-text"
+                          id="phasingPercentageHelpMessage"
+                        >
+                          The percentage is a value from 0 to 100
+                        </p>
+                      </div>
+                    ),
+                  },
+                ]}
+              />
+            </Form>
+            <p>* Mandatory field</p>
+            <p>
+              TCG were provided by the team when the first track was requested
+              through the Snapcraft forum.
+            </p>
+            <p>
+              <a href="https://snapcraft.io/docs/channels">
+                Learn about tracks
+              </a>{" "}
+              or{" "}
+              <a href="https://forum.snapcraft.io/c/store-requests/19">
+                contact us
+              </a>{" "}
+              for help.
+            </p>
+            {notification && (
+              <Notification
+                severity={
+                  notification.type === "Error" ? "negative" : "positive"
+                }
+              >
+                {notification.message}
+              </Notification>
+            )}
+          </div>
+          <div className="aside-panel-footer">
+            <div className="p-panel__footer u-align--right">
+              <div className="u-fixed-width">
+                <Button
+                  className="u-no-margin--bottom"
+                  onClick={() => {
+                    closeAddTrackSidePanel();
+                    setNotification(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="u-no-margin--bottom p-button--positive"
+                  onClick={() => {
+                    handleAddTrack();
+                    setNotification(null);
+                  }}
+                  disabled={
+                    !isTrackNameFilled || phasingPercentageError || isLoading
+                  }
+                >
+                  {isLoading ? (
+                    <div>
+                      <Icon name="spinner" className="u-animation--spin" />
+                      &nbsp;Loading...
+                    </div>
+                  ) : (
+                    <div>Add track</div>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+ReleasesHeading.propTypes = {
+  tracks: PropTypes.array.isRequired,
+  setCurrentTrack: PropTypes.func.isRequired,
+  closeHistoryPanel: PropTypes.func.isRequired,
+  currentTrack: PropTypes.string.isRequired,
+  defaultTrack: PropTypes.string,
+  snapName: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = (state) => {
+  return {
+    tracks: getTracks(state),
+    currentTrack: state.currentTrack,
+    defaultTrack: state.defaultTrack,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setCurrentTrack: (track) => dispatch(setCurrentTrack(track)),
+    closeHistoryPanel: () => dispatch(closeHistory()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReleasesHeading);
diff --git a/static/js/publisher/release/components/releasesTable/cellViews.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/cellViews.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/cellViews.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/cellViews.js
diff --git a/static/js/publisher/release/components/releasesTable/channelHeading.tsx b/static/js/publisher-pages/pages/Releases/components/releasesTable/channelHeading.tsx
similarity index 99%
rename from static/js/publisher/release/components/releasesTable/channelHeading.tsx
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/channelHeading.tsx
index 5d038d3bd2..598b70efe9 100644
--- a/static/js/publisher/release/components/releasesTable/channelHeading.tsx
+++ b/static/js/publisher-pages/pages/Releases/components/releasesTable/channelHeading.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { connect } from "react-redux";
 import { format, formatDistanceToNow } from "date-fns";
 
-import { sortChannels } from "../../../../libs/channels";
+import { sortChannels } from "../../../../../libs/channels.js";
 
 import {
   getArchitectures,
diff --git a/static/js/publisher/release/components/releasesTable/channelRow.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/channelRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/channelRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/channelRow.js
diff --git a/static/js/publisher/release/components/releasesTable/droppableRow.tsx b/static/js/publisher-pages/pages/Releases/components/releasesTable/droppableRow.tsx
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/droppableRow.tsx
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/droppableRow.tsx
diff --git a/static/js/publisher/release/components/releasesTable/index.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/index.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/index.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/index.js
diff --git a/static/js/publisher/release/components/releasesTable/releaseCell.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/releaseCell.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/releaseCell.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/releaseCell.js
diff --git a/static/js/publisher/release/components/releasesTable/releaseMenuItem.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/releaseMenuItem.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/releaseMenuItem.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/releaseMenuItem.js
diff --git a/static/js/publisher/release/components/releasesTable/revisionCell.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/revisionCell.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/revisionCell.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/revisionCell.js
diff --git a/static/js/publisher/release/components/releasesTable/revisionsRow.js b/static/js/publisher-pages/pages/Releases/components/releasesTable/revisionsRow.js
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/revisionsRow.js
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/revisionsRow.js
diff --git a/static/js/publisher/release/components/releasesTable/row.tsx b/static/js/publisher-pages/pages/Releases/components/releasesTable/row.tsx
similarity index 100%
rename from static/js/publisher/release/components/releasesTable/row.tsx
rename to static/js/publisher-pages/pages/Releases/components/releasesTable/row.tsx
diff --git a/static/js/publisher/release/components/revisionLabel.js b/static/js/publisher-pages/pages/Releases/components/revisionLabel.js
similarity index 100%
rename from static/js/publisher/release/components/revisionLabel.js
rename to static/js/publisher-pages/pages/Releases/components/revisionLabel.js
diff --git a/static/js/publisher/release/components/revisionsList.js b/static/js/publisher-pages/pages/Releases/components/revisionsList.js
similarity index 100%
rename from static/js/publisher/release/components/revisionsList.js
rename to static/js/publisher-pages/pages/Releases/components/revisionsList.js
diff --git a/static/js/publisher/release/components/revisionsListRow.js b/static/js/publisher-pages/pages/Releases/components/revisionsListRow.js
similarity index 98%
rename from static/js/publisher/release/components/revisionsListRow.js
rename to static/js/publisher-pages/pages/Releases/components/revisionsListRow.js
index 325d60300a..f59bc2d86f 100644
--- a/static/js/publisher/release/components/revisionsListRow.js
+++ b/static/js/publisher-pages/pages/Releases/components/revisionsListRow.js
@@ -6,7 +6,7 @@ import { connect } from "react-redux";
 import { format } from "date-fns";
 
 import { canBeReleased } from "../helpers";
-import { getChannelString } from "../../../libs/channels";
+import { getChannelString } from "../../../../libs/channels.js";
 import { toggleRevision } from "../actions/channelMap";
 
 import {
@@ -104,8 +104,8 @@ const RevisionsListRow = (props) => {
           </span>
         )}
       </td>
-      <td 
-        data-heading="Version" 
+      <td
+        data-heading="Version"
         style={{ whiteSpace: "normal", wordWrap: "break-word" }}
       >
         {revision.version}
diff --git a/static/js/publisher/release/constants.js b/static/js/publisher-pages/pages/Releases/constants.js
similarity index 100%
rename from static/js/publisher/release/constants.js
rename to static/js/publisher-pages/pages/Releases/constants.js
diff --git a/static/js/publisher/release/helpers.test.js b/static/js/publisher-pages/pages/Releases/helpers.test.js
similarity index 100%
rename from static/js/publisher/release/helpers.test.js
rename to static/js/publisher-pages/pages/Releases/helpers.test.js
diff --git a/static/js/publisher/release/helpers.ts b/static/js/publisher-pages/pages/Releases/helpers.ts
similarity index 98%
rename from static/js/publisher/release/helpers.ts
rename to static/js/publisher-pages/pages/Releases/helpers.ts
index c77bb68f30..33d9875170 100644
--- a/static/js/publisher/release/helpers.ts
+++ b/static/js/publisher-pages/pages/Releases/helpers.ts
@@ -1,5 +1,5 @@
 import { AVAILABLE, REVISION_STATUS } from "./constants";
-import { getChannelString } from "../../libs/channels";
+import { getChannelString } from "../../../libs/channels";
 import { useEffect } from "react";
 
 export function isInDevmode(revision: any) {
diff --git a/static/js/publisher-pages/pages/Releases/index.ts b/static/js/publisher-pages/pages/Releases/index.ts
new file mode 100644
index 0000000000..b0c2d072b6
--- /dev/null
+++ b/static/js/publisher-pages/pages/Releases/index.ts
@@ -0,0 +1 @@
+export { default } from "./Releases";
diff --git a/static/js/publisher/release/reducers/architectures.js b/static/js/publisher-pages/pages/Releases/reducers/architectures.js
similarity index 100%
rename from static/js/publisher/release/reducers/architectures.js
rename to static/js/publisher-pages/pages/Releases/reducers/architectures.js
diff --git a/static/js/publisher/release/reducers/architectures.test.js b/static/js/publisher-pages/pages/Releases/reducers/architectures.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/architectures.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/architectures.test.js
diff --git a/static/js/publisher/release/reducers/availableRevisionsSelect.js b/static/js/publisher-pages/pages/Releases/reducers/availableRevisionsSelect.js
similarity index 100%
rename from static/js/publisher/release/reducers/availableRevisionsSelect.js
rename to static/js/publisher-pages/pages/Releases/reducers/availableRevisionsSelect.js
diff --git a/static/js/publisher/release/reducers/availableRevisionsSelect.test.js b/static/js/publisher-pages/pages/Releases/reducers/availableRevisionsSelect.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/availableRevisionsSelect.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/availableRevisionsSelect.test.js
diff --git a/static/js/publisher/release/reducers/branches.js b/static/js/publisher-pages/pages/Releases/reducers/branches.js
similarity index 100%
rename from static/js/publisher/release/reducers/branches.js
rename to static/js/publisher-pages/pages/Releases/reducers/branches.js
diff --git a/static/js/publisher/release/reducers/branches.test.js b/static/js/publisher-pages/pages/Releases/reducers/branches.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/branches.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/branches.test.js
diff --git a/static/js/publisher/release/reducers/channelMap.js b/static/js/publisher-pages/pages/Releases/reducers/channelMap.js
similarity index 100%
rename from static/js/publisher/release/reducers/channelMap.js
rename to static/js/publisher-pages/pages/Releases/reducers/channelMap.js
diff --git a/static/js/publisher/release/reducers/channelMap.test.js b/static/js/publisher-pages/pages/Releases/reducers/channelMap.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/channelMap.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/channelMap.test.js
diff --git a/static/js/publisher/release/reducers/currentTrack.js b/static/js/publisher-pages/pages/Releases/reducers/currentTrack.js
similarity index 100%
rename from static/js/publisher/release/reducers/currentTrack.js
rename to static/js/publisher-pages/pages/Releases/reducers/currentTrack.js
diff --git a/static/js/publisher/release/reducers/currentTrack.test.js b/static/js/publisher-pages/pages/Releases/reducers/currentTrack.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/currentTrack.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/currentTrack.test.js
diff --git a/static/js/publisher/release/reducers/defaultTrack.js b/static/js/publisher-pages/pages/Releases/reducers/defaultTrack.js
similarity index 100%
rename from static/js/publisher/release/reducers/defaultTrack.js
rename to static/js/publisher-pages/pages/Releases/reducers/defaultTrack.js
diff --git a/static/js/publisher/release/reducers/defaultTrack.test.js b/static/js/publisher-pages/pages/Releases/reducers/defaultTrack.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/defaultTrack.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/defaultTrack.test.js
diff --git a/static/js/publisher/release/reducers/globalNotification.js b/static/js/publisher-pages/pages/Releases/reducers/globalNotification.js
similarity index 100%
rename from static/js/publisher/release/reducers/globalNotification.js
rename to static/js/publisher-pages/pages/Releases/reducers/globalNotification.js
diff --git a/static/js/publisher/release/reducers/globalNotification.test.js b/static/js/publisher-pages/pages/Releases/reducers/globalNotification.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/globalNotification.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/globalNotification.test.js
diff --git a/static/js/publisher/release/reducers/history.js b/static/js/publisher-pages/pages/Releases/reducers/history.js
similarity index 100%
rename from static/js/publisher/release/reducers/history.js
rename to static/js/publisher-pages/pages/Releases/reducers/history.js
diff --git a/static/js/publisher/release/reducers/history.test.js b/static/js/publisher-pages/pages/Releases/reducers/history.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/history.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/history.test.js
diff --git a/static/js/publisher/release/reducers/index.js b/static/js/publisher-pages/pages/Releases/reducers/index.js
similarity index 100%
rename from static/js/publisher/release/reducers/index.js
rename to static/js/publisher-pages/pages/Releases/reducers/index.js
diff --git a/static/js/publisher/release/reducers/modal.js b/static/js/publisher-pages/pages/Releases/reducers/modal.js
similarity index 100%
rename from static/js/publisher/release/reducers/modal.js
rename to static/js/publisher-pages/pages/Releases/reducers/modal.js
diff --git a/static/js/publisher/release/reducers/modal.test.js b/static/js/publisher-pages/pages/Releases/reducers/modal.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/modal.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/modal.test.js
diff --git a/static/js/publisher/release/reducers/options.js b/static/js/publisher-pages/pages/Releases/reducers/options.js
similarity index 100%
rename from static/js/publisher/release/reducers/options.js
rename to static/js/publisher-pages/pages/Releases/reducers/options.js
diff --git a/static/js/publisher/release/reducers/pendingCloses.js b/static/js/publisher-pages/pages/Releases/reducers/pendingCloses.js
similarity index 100%
rename from static/js/publisher/release/reducers/pendingCloses.js
rename to static/js/publisher-pages/pages/Releases/reducers/pendingCloses.js
diff --git a/static/js/publisher/release/reducers/pendingCloses.test.js b/static/js/publisher-pages/pages/Releases/reducers/pendingCloses.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/pendingCloses.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/pendingCloses.test.js
diff --git a/static/js/publisher/release/reducers/pendingReleases.test.js b/static/js/publisher-pages/pages/Releases/reducers/pendingReleases.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/pendingReleases.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/pendingReleases.test.js
diff --git a/static/js/publisher/release/reducers/pendingReleases.ts b/static/js/publisher-pages/pages/Releases/reducers/pendingReleases.ts
similarity index 100%
rename from static/js/publisher/release/reducers/pendingReleases.ts
rename to static/js/publisher-pages/pages/Releases/reducers/pendingReleases.ts
diff --git a/static/js/publisher/release/reducers/releases.js b/static/js/publisher-pages/pages/Releases/reducers/releases.js
similarity index 100%
rename from static/js/publisher/release/reducers/releases.js
rename to static/js/publisher-pages/pages/Releases/reducers/releases.js
diff --git a/static/js/publisher/release/reducers/releases.test.js b/static/js/publisher-pages/pages/Releases/reducers/releases.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/releases.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/releases.test.js
diff --git a/static/js/publisher/release/reducers/revisions.js b/static/js/publisher-pages/pages/Releases/reducers/revisions.js
similarity index 100%
rename from static/js/publisher/release/reducers/revisions.js
rename to static/js/publisher-pages/pages/Releases/reducers/revisions.js
diff --git a/static/js/publisher/release/reducers/revisions.test.js b/static/js/publisher-pages/pages/Releases/reducers/revisions.test.js
similarity index 100%
rename from static/js/publisher/release/reducers/revisions.test.js
rename to static/js/publisher-pages/pages/Releases/reducers/revisions.test.js
diff --git a/static/js/publisher/release/releasesController.js b/static/js/publisher-pages/pages/Releases/releasesController.js
similarity index 100%
rename from static/js/publisher/release/releasesController.js
rename to static/js/publisher-pages/pages/Releases/releasesController.js
diff --git a/static/js/publisher/release/releasesState.js b/static/js/publisher-pages/pages/Releases/releasesState.js
similarity index 100%
rename from static/js/publisher/release/releasesState.js
rename to static/js/publisher-pages/pages/Releases/releasesState.js
diff --git a/static/js/publisher/release/selectors/index.ts b/static/js/publisher-pages/pages/Releases/selectors/index.ts
similarity index 99%
rename from static/js/publisher/release/selectors/index.ts
rename to static/js/publisher-pages/pages/Releases/selectors/index.ts
index 3526defe66..5bf8af8eae 100644
--- a/static/js/publisher/release/selectors/index.ts
+++ b/static/js/publisher-pages/pages/Releases/selectors/index.ts
@@ -11,7 +11,7 @@ import {
   isRevisionBuiltOnLauchpad,
   jsonClone,
 } from "../helpers";
-import { sortAlphaNum, getChannelString } from "../../../libs/channels";
+import { sortAlphaNum, getChannelString } from "../../../../libs/channels";
 import { CombinedState } from "redux";
 
 // returns true if isProgressiveReleaseEnabled feature flag is enabled
diff --git a/static/js/publisher/release/selectors/selectors.test.js b/static/js/publisher-pages/pages/Releases/selectors/selectors.test.js
similarity index 100%
rename from static/js/publisher/release/selectors/selectors.test.js
rename to static/js/publisher-pages/pages/Releases/selectors/selectors.test.js
diff --git a/static/js/publisher-pages/types/releaseTypes.d.ts b/static/js/publisher-pages/types/releaseTypes.d.ts
new file mode 100644
index 0000000000..79b29998d2
--- /dev/null
+++ b/static/js/publisher-pages/types/releaseTypes.d.ts
@@ -0,0 +1,92 @@
+export interface Progressive {
+  "current-percentage": number | null;
+  paused: boolean | null;
+  percentage: number | null;
+}
+
+export interface Release {
+  architecture: string;
+  branch: string | null;
+  channel: string;
+  "expiration-date": string | null;
+  progressive: Progressive;
+  revision: number | null;
+  risk: string;
+  track: string;
+  when: string;
+}
+
+export interface Revision {
+  architectures: string[];
+  attributes: { [key: string]: string };
+  base: string;
+  build_url: string | null;
+  confinement: string;
+  created_at: string;
+  epoch: {
+    read: number[];
+    write: number[];
+  };
+  grade: string;
+  revision: number;
+  sha3_384: string;
+  size: number;
+  status: string;
+  version: string;
+}
+
+export interface Channel {
+  branch: string | null;
+  fallback: string | null;
+  name: string;
+  risk: string;
+  track: string;
+}
+
+export interface Track {
+  "creation-date": string | null;
+  name: string;
+  status: string;
+  "version-pattern": string | null;
+}
+
+export interface Snap {
+  channels: Channel[];
+  "default-track": string | null;
+  id: string;
+  name: string;
+  private: boolean;
+  publisher: {
+    "display-name": string;
+    id: string;
+    username: string;
+  };
+  title: string;
+  tracks: Track[];
+}
+
+export interface ReleasesData {
+  _links: {
+    self: string;
+  };
+  releases: Release[];
+  revisions: Revision[];
+  snap: Snap;
+}
+
+export interface ChannelMap {
+  architecture: string;
+  channel: string;
+  "expiration-date": string | null;
+  progressive: Progressive;
+  revision: number | null;
+  when: string;
+}
+
+export interface Options {
+  defaultTrack: string;
+  csrfToken: string;
+  flags: {
+    isProgressiveReleaseEnabled: boolean;
+  };
+}
diff --git a/static/js/publisher/release/components/releasesHeading.js b/static/js/publisher/release/components/releasesHeading.js
deleted file mode 100644
index c8aee2a5ac..0000000000
--- a/static/js/publisher/release/components/releasesHeading.js
+++ /dev/null
@@ -1,595 +0,0 @@
-import React, { useState } from "react";
-import { useQuery } from "react-query";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  Row,
-  Col,
-  Button,
-  Icon,
-  Form,
-  Notification,
-  Accordion,
-} from "@canonical/react-components";
-
-import { setCurrentTrack } from "../actions/currentTrack";
-import { closeHistory } from "../actions/history";
-import { getTracks } from "../selectors";
-import {
-  validatePhasingPercentage,
-  resizeAsidePanel,
-  numericalSort,
-  getPackageMetadata,
-} from "../helpers";
-
-import DefaultTrackModifier from "./defaultTrackModifier";
-import ReleasesTable from "./releasesTable";
-import TrackInfo from "./TrackInfo";
-
-function ReleasesHeading(props) {
-  resizeAsidePanel("request");
-  resizeAsidePanel("add");
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [requestTrackSidePanelOpen, setRequestTrackSidePanelOpen] =
-    useState(false);
-
-  const [addTrackSidePanelOpen, setAddTrackSidePanelOpen] = useState(false);
-
-  const openRequestTrackSidePanel = () => {
-    setRequestTrackSidePanelOpen(true);
-  };
-
-  const closeRequestTrackSidePanel = () => {
-    setRequestTrackSidePanelOpen(false);
-  };
-
-  const openAddTrackSidePanel = () => {
-    setAddTrackSidePanelOpen(true);
-  };
-
-  const closeAddTrackSidePanel = () => {
-    setTrackName("");
-    setVersionPattern("");
-    setPhasingPercentage("");
-    setPhasingPercentageError("");
-    setTrackNameError("");
-    setAddTrackSidePanelOpen(false);
-  };
-
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const handleSelect = (track) => {
-    props.setCurrentTrack(track);
-    setIsOpen(false);
-  };
-
-  const { tracks, currentTrack, defaultTrack } = props;
-  tracks.sort(numericalSort);
-  const options = tracks.map((track) => ({ value: track, label: track }));
-
-  const [trackName, setTrackName] = useState("");
-  const [versionPattern, setVersionPattern] = useState("");
-  const [phasingPercentage, setPhasingPercentage] = useState("");
-  const [phasingPercentageError, setPhasingPercentageError] = useState("");
-
-  const isTrackNameFilled = trackName.trim().length > 0;
-  const [isLoading, setIsLoading] = useState(false);
-  const [notification, setNotification] = useState(null);
-
-  const { data, guardrailsLoading, error } = useQuery(
-    ["snapData", props.snapName],
-    async () => {
-      const response = await getPackageMetadata(props.snapName);
-      return response;
-    },
-    { enabled: !!props.snapName },
-  );
-
-  const storedTracks = data?.tracks || [];
-  const trackGuardrailsData = data?.["track-guardrails"];
-
-  const trackInfo = storedTracks.find(
-    (track) => track.name === props.currentTrack,
-  );
-  const currentTrackVersionPattern = trackInfo?.["version-pattern"] || null;
-  const currentPhasingPercentage =
-    trackInfo?.["automatic-phasing-percentage"] || null;
-
-  let trackGuardrailsStatus = null;
-
-  if (guardrailsLoading) {
-    trackGuardrailsStatus = null;
-  } else if (error) {
-    trackGuardrailsStatus = "error";
-  } else if (!trackGuardrailsData) {
-    trackGuardrailsStatus = "no-guardrails";
-  } else if (trackGuardrailsData.length === 0) {
-    trackGuardrailsStatus = "request";
-  } else {
-    trackGuardrailsStatus = "add";
-  }
-
-  const handleTrackNameChange = (event) => {
-    setTrackNameError("");
-    const { value } = event.target;
-    setTrackName(value);
-  };
-
-  const handleVersionPatternChange = (event) => {
-    setVersionPattern(event.target.value);
-  };
-
-  const handlePhasingPercentageChange = (event) => {
-    const { value } = event.target;
-    setPhasingPercentage(value);
-    const error = validatePhasingPercentage(value);
-    setPhasingPercentageError(error);
-  };
-
-  const showNotification = (type, message) => {
-    setNotification({ type, message });
-  };
-
-  const [successNotification, setSuccessNotification] = useState(null);
-  const [trackNameError, setTrackNameError] = useState("");
-
-  const handleAddTrack = async () => {
-    try {
-      setIsLoading(true);
-
-      const formData = new URLSearchParams();
-      formData.append("track-name", trackName);
-
-      if (versionPattern.trim() !== "") {
-        formData.append("version-pattern", versionPattern);
-      }
-
-      if (phasingPercentage.trim() !== "" && !phasingPercentageError) {
-        formData.append("automatic-phasing-percentage", phasingPercentage);
-      }
-
-      const response = await fetch(`/${props.snapName}/create-track`, {
-        method: "POST",
-        body: formData,
-      });
-
-      const responseData = await response.json();
-
-      if (response.ok) {
-        props.setCurrentTrack(trackName);
-        closeAddTrackSidePanel();
-        setSuccessNotification(`Track ${trackName} created successfully`);
-      } else {
-        let errorMessage = responseData.error;
-        if (responseData && responseData["error-list"]) {
-          const error = responseData["error-list"][0];
-          if (error && error.message) {
-            errorMessage = error.message;
-          }
-        }
-        setTrackNameError(errorMessage);
-      }
-    } catch (error) {
-      console.error("Error:", error.message);
-      showNotification("Error", error.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const dropdownPaddingClass =
-    trackGuardrailsStatus === "error"
-      ? "dropdown-menu padding-bottom"
-      : "dropdown-menu no-padding-bottom";
-
-  return (
-    <div>
-      <div className="l-application">
-        <main className="l-main">
-          <div>
-            <div className="u-fixed-width">
-              <h4 className="p-heading--4">Releases available to install</h4>
-            </div>
-            <Row>
-              <Col size={6}>
-                <h5 className="p-strip is-shallow u-no-padding--top u-no-padding--bottom">
-                  <label htmlFor="track-dropdown">
-                    Track: &nbsp;
-                    <div className="track-dropdown">
-                      <div className="dropdown-toggle" onClick={handleToggle}>
-                        {currentTrack}
-                        <i className="p-icon--chevron-down u-float-right"></i>
-                      </div>
-                      {isOpen && (
-                        <div className={dropdownPaddingClass}>
-                          <div className="options-container">
-                            {options.map((option, index) => (
-                              <div
-                                key={index}
-                                className="dropdown-item"
-                                onClick={() => handleSelect(option.value)}
-                              >
-                                {option.label}
-                                {option.value === defaultTrack && (
-                                  <div className="p-status-label">Default</div>
-                                )}
-                                {option.value === currentTrack && (
-                                  <i className="p-icon--task-outstanding u-float-right"></i>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                          {trackGuardrailsStatus !== "error" &&
-                            trackGuardrailsStatus !== "no-guardrails" && (
-                              <div className="track-button-wrapper">
-                                {guardrailsLoading ? (
-                                  <div>
-                                    <Icon
-                                      name="spinner"
-                                      className="u-animation--spin"
-                                    />
-                                    &nbsp;Loading...
-                                  </div>
-                                ) : (
-                                  <div className="track-button">
-                                    {trackGuardrailsStatus === "request" && (
-                                      <Button
-                                        className="p-button has-icon new-track-button"
-                                        onClick={() => {
-                                          openRequestTrackSidePanel();
-                                          if (isOpen) {
-                                            handleToggle();
-                                          }
-                                        }}
-                                      >
-                                        <i className="p-icon--plus"></i>
-                                        <span>Request track</span>
-                                      </Button>
-                                    )}
-                                    {trackGuardrailsStatus === "add" && (
-                                      <Button
-                                        className="p-button has-icon new-track-button"
-                                        onClick={() => {
-                                          openAddTrackSidePanel();
-                                          if (isOpen) {
-                                            handleToggle();
-                                          }
-                                        }}
-                                      >
-                                        <i className="p-icon--plus"></i>
-                                        <span>Add track</span>
-                                      </Button>
-                                    )}
-                                  </div>
-                                )}
-                              </div>
-                            )}
-                        </div>
-                      )}
-                    </div>
-                  </label>
-                </h5>
-                <TrackInfo
-                  versionPattern={currentTrackVersionPattern}
-                  automaticPhasingPercentage={currentPhasingPercentage}
-                />
-                <div className="success-notification">
-                  {successNotification && (
-                    <Notification severity="positive">
-                      {successNotification}
-                    </Notification>
-                  )}
-                </div>
-              </Col>
-              <div className="col-6" style={{ marginTop: "0.25rem" }}>
-                {<DefaultTrackModifier />}
-              </div>
-            </Row>
-          </div>
-          <ReleasesTable />
-        </main>
-
-        {/* Request track aside panel */}
-
-        <div
-          className={`l-aside__overlay ${requestTrackSidePanelOpen ? "" : "u-hide"}`}
-          onClick={closeRequestTrackSidePanel}
-        ></div>
-        <aside
-          className={`l-aside ${requestTrackSidePanelOpen ? "" : "is-collapsed"}`}
-          id="request-track-aside-panel"
-        >
-          <div className="p-panel is-flex-column">
-            <div className="p-panel__header">
-              <h4 className="p-panel__title p-heading--4">REQUEST TRACK</h4>
-            </div>
-            <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
-              <h5 className="p-heading--5 u-no-margin--bottom">
-                What is a track?
-              </h5>
-              <p>
-                A track contains a series of compatible releases. <br />
-                For example, you could maintain your &#34;3.x&#34; and
-                &#34;4.x&#34; series in different tracks. <br />
-                You could also use a track for an LTS release.
-              </p>
-              <p>
-                Every track has risk-levels available (stable, beta, candidate,
-                edge).
-              </p>
-              <p>
-                Release to a new track using: <br />
-                <code>
-                  snapcraft release &lt;snap-name&gt; &lt;revision&gt;
-                  &lt;track&gt;/&lt;risk&gt;
-                </code>
-              </p>
-              <p>
-                <a href="https://snapcraft.io/docs/channels">
-                  Learn about tracks, risk-levels and branches
-                </a>
-                <br />
-                <a href="https://snapcraft.io/docs/publish-to-a-branch">
-                  How to make a release
-                </a>
-              </p>
-              <h5 className="p-heading--5 u-no-padding--top u-no-margin--bottom">
-                What to expect
-              </h5>
-              <p>
-                After the Forum request, we will be in touch with you to
-                validate the track creation guardrails (TCG).
-              </p>
-              <p>
-                After the Admin validation, you will have access to a self-serve
-                track creation service.
-              </p>
-              <h5 className="p-heading--5 u-no-padding--top u-no-margin--bottom">
-                Request a new track
-              </h5>
-              <p className="u-no-padding--bottom">
-                To request a new track, follow the link below to go to the
-                Snapcraft Forum and open a new topic under the
-                &#34;store-requests&#34; category.
-              </p>
-            </div>
-            <div className="aside-panel-footer">
-              <div className="p-panel__footer u-align--right">
-                <div className="u-fixed-width">
-                  <Button
-                    className="u-no-margin--bottom"
-                    onClick={closeRequestTrackSidePanel}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    className="u-no-margin--bottom p-button--positive"
-                    onClick={() =>
-                      window.open(
-                        'https://forum.snapcraft.io/new-topic?title=Create+new+track+for+"snap+name"&category=store-requests',
-                        "_blank",
-                      )
-                    }
-                  >
-                    Request on Forum
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </aside>
-
-        {/* Add track aside panel */}
-
-        <div
-          className={`l-aside__overlay ${addTrackSidePanelOpen ? "" : "u-hide"}`}
-          onClick={closeAddTrackSidePanel}
-        ></div>
-        <aside
-          className={`l-aside ${addTrackSidePanelOpen ? "" : "is-collapsed"}`}
-          id="add-track-aside-panel"
-        >
-          <div className="p-panel is-flex-column">
-            <div className="p-panel__header">
-              <h4 className="p-panel__title p-heading--4">ADD TRACK</h4>
-            </div>
-            <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
-              <Form>
-                <div>
-                  <div
-                    className={`p-form__group p-form-validation ${trackNameError ? " is-error" : ""}`}
-                  >
-                    <label htmlFor="trackName" className="p-form__label">
-                      <strong>* Track name</strong>
-                    </label>
-                    <div className="p-form__control">
-                      <input
-                        type="text"
-                        id="trackName"
-                        className="p-form-validation__input"
-                        required={true}
-                        placeholder="display-name123"
-                        aria-invalid="true"
-                        aria-describedby="trackName"
-                        name="trackName"
-                        value={trackName}
-                        onChange={handleTrackNameChange}
-                      />
-                      <p
-                        className="p-form-validation__message"
-                        id="trackNameErrorMessage"
-                      >
-                        {trackNameError}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <p className="p-form-help-text" id="trackNameHelpMessage">
-                  Name should follow the track creation guardrails (TCG).
-                </p>
-
-                {/* Optional Properties */}
-                <Accordion
-                  className="add-track-accordion"
-                  sections={[
-                    {
-                      key: "optional properties",
-                      title: "Optional Properties",
-                      content: (
-                        <div>
-                          <div>
-                            <label htmlFor="versionPattern">
-                              <strong>Version pattern</strong>
-                            </label>
-                            <input
-                              type="text"
-                              id="versionPattern"
-                              name="versionPattern"
-                              placeholder="?.v.*"
-                              value={versionPattern}
-                              onChange={handleVersionPatternChange}
-                            />
-                          </div>
-                          <p
-                            className="p-form-help-text"
-                            id="versionPatternHelpMessage"
-                          >
-                            Version pattern should follow glob pattern
-                          </p>
-
-                          <div
-                            className={`p-form__group p-form-validation ${phasingPercentageError ? " is-error" : ""}`}
-                          >
-                            <label
-                              htmlFor="phasingPercentage"
-                              className="p-form__label"
-                            >
-                              <strong>Automatic phasing percentage</strong>
-                            </label>
-                            <div className="p-form__control">
-                              <input
-                                type="text"
-                                id="phasingPercentage"
-                                className="p-form-validation__input"
-                                placeholder="10.15"
-                                aria-invalid="true"
-                                aria-describedby="phasingPercentageErrorMessage"
-                                name="phasingPercentage"
-                                value={phasingPercentage}
-                                onChange={handlePhasingPercentageChange}
-                              />
-                              <p
-                                className="p-form-validation__message"
-                                id="phasingPercentageErrorMessage"
-                              >
-                                {phasingPercentageError}
-                              </p>
-                            </div>
-                          </div>
-                          <p
-                            className="p-form-help-text"
-                            id="phasingPercentageHelpMessage"
-                          >
-                            The percentage is a value from 0 to 100
-                          </p>
-                        </div>
-                      ),
-                    },
-                  ]}
-                />
-              </Form>
-              <p>* Mandatory field</p>
-              <p>
-                TCG were provided by the team when the first track was requested
-                through the Snapcraft forum.
-              </p>
-              <p>
-                <a href="https://snapcraft.io/docs/channels">
-                  Learn about tracks
-                </a>{" "}
-                or{" "}
-                <a href="https://forum.snapcraft.io/c/store-requests/19">
-                  contact us
-                </a>{" "}
-                for help.
-              </p>
-              {notification && (
-                <Notification
-                  severity={
-                    notification.type === "Error" ? "negative" : "positive"
-                  }
-                >
-                  {notification.message}
-                </Notification>
-              )}
-            </div>
-            <div className="aside-panel-footer">
-              <div className="p-panel__footer u-align--right">
-                <div className="u-fixed-width">
-                  <Button
-                    className="u-no-margin--bottom"
-                    onClick={() => {
-                      closeAddTrackSidePanel();
-                      setNotification(null);
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    className="u-no-margin--bottom p-button--positive"
-                    onClick={() => {
-                      handleAddTrack();
-                      setNotification(null);
-                    }}
-                    disabled={
-                      !isTrackNameFilled || phasingPercentageError || isLoading
-                    }
-                  >
-                    {isLoading ? (
-                      <div>
-                        <Icon name="spinner" className="u-animation--spin" />
-                        &nbsp;Loading...
-                      </div>
-                    ) : (
-                      <div>Add track</div>
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </aside>
-      </div>
-    </div>
-  );
-}
-
-ReleasesHeading.propTypes = {
-  tracks: PropTypes.array.isRequired,
-  setCurrentTrack: PropTypes.func.isRequired,
-  closeHistoryPanel: PropTypes.func.isRequired,
-  currentTrack: PropTypes.string.isRequired,
-  defaultTrack: PropTypes.string,
-  snapName: PropTypes.string.isRequired,
-};
-
-const mapStateToProps = (state) => {
-  return {
-    tracks: getTracks(state),
-    currentTrack: state.currentTrack,
-    defaultTrack: state.defaultTrack,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setCurrentTrack: (track) => dispatch(setCurrentTrack(track)),
-    closeHistoryPanel: () => dispatch(closeHistory()),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReleasesHeading);
diff --git a/templates/publisher/release-history.html b/templates/publisher/release-history.html
deleted file mode 100644
index 3403ffbc1c..0000000000
--- a/templates/publisher/release-history.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{% extends "publisher/_publisher_layout.html" %}
-
-{% block meta_title %}
-Releases and revision history for {% if snap_title %}{{ snap_title }}{% else %}{{ snap_name }}{% endif %}
-{% endblock %}
-
-{% block content %}
-<div id="main-content" class="u-no-margin--top">
-  {% set selected_tab='release' %}
-  {% include "publisher/_header.html" %}
-
-  <div id="release-history">
-    {% if release_history["error-list"] %}
-      <div class="row">
-        <div class="p-notification--negative">
-          <div class="p-notification__content">
-            <p class="p-notification__message">
-              {% for error in release_history["error-list"] %}
-                <strong>{{ error.code }}:</strong> {{ error.message }}<br />
-              {% endfor %}
-            </p>
-          </div>
-        </div>
-      </div>
-    {% endif %}
-  </div>
-</div>
-
-{% endblock %}
-
-{% block scripts_includes %}
-  <script src="{{ static_url('js/dist/release.js') }}" defer></script>
-{% endblock %}
-
-{% block scripts %}
-  {% if "error-list" not in release_history %}
-    <script>
-      window.addEventListener("DOMContentLoaded", function() {
-        Raven.context(function () {
-          snapcraft.release.initReleases('#release-history',
-            {{ snap_name|tojson }},
-            {{ release_history|tojson }},
-            {{ channel_map|tojson }},
-            {{ tracks|tojson }},
-            {
-              defaultTrack: {% if default_track %}{{ default_track|tojson }}{% else %}"latest"{% endif %},
-              csrfToken: {{ csrf_token()|tojson }},
-              flags: {
-                isProgressiveReleaseEnabled: true
-              }
-            }
-          );
-        });
-      });
-    </script>
-  {% endif %}
-{% endblock %}
diff --git a/tests/publisher/snaps/tests_revision.py b/tests/publisher/snaps/tests_revision.py
deleted file mode 100644
index 001135eb81..0000000000
--- a/tests/publisher/snaps/tests_revision.py
+++ /dev/null
@@ -1,87 +0,0 @@
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-class RevisionHistoryPageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/releases".format(snap_name)
-
-        super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
-
-
-class GetRevisionGetInfoPage(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = (
-            "https://dashboard.snapcraft.io/api/v2/snaps/{}"
-            + "/releases?page=1"
-        )
-        api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/releases".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="GET",
-            api_url=api_url,
-            method_api="GET",
-        )
-
-
-class GetRevisionHistory(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = (
-            "https://dashboard.snapcraft.io/api/v2/snaps/{}"
-            + "/releases?page=1"
-        )
-        api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/releases".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            api_url=api_url,
-            method_endpoint="GET",
-            method_api="GET",
-        )
-
-    @responses.activate
-    def test_get_revision(self):
-        info_url = "https://dashboard.snapcraft.io/api/v2/snaps/{}/channel-map"
-        self.info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap": {
-                "snap_id": "id",
-                "title": "Test Snap",
-                "publisher": {"display-name": "test"},
-            },
-            "channel-map": {},
-        }
-
-        responses.add(responses.GET, self.api_url, json={}, status=200)
-
-        responses.add(responses.GET, self.info_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(self.info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/release-history.html")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("release_history", {})
-        self.assert_context("channel_map", {})
diff --git a/webapp/publisher/snaps/release_views.py b/webapp/publisher/snaps/release_views.py
index 44d4a109fd..f49ea8f0ce 100644
--- a/webapp/publisher/snaps/release_views.py
+++ b/webapp/publisher/snaps/release_views.py
@@ -18,7 +18,7 @@ def redirect_get_release_history(snap_name):
 
 
 @login_required
-def get_release_history(snap_name):
+def get_release_history_data(snap_name):
     release_history = publisher_api.snap_release_history(
         flask.session, snap_name
     )
@@ -33,12 +33,21 @@ def get_release_history(snap_name):
         "publisher_name": snap.get("publisher", {}).get("display-name", {}),
         "release_history": release_history,
         "private": snap.get("private"),
-        "default_track": snap.get("default-track"),
+        "default_track": (
+            snap.get("default-track")
+            if snap.get("default-track") is not None
+            else "latest"
+        ),
         "channel_map": channel_map.get("channel-map"),
         "tracks": snap.get("tracks"),
     }
 
-    return flask.render_template("publisher/release-history.html", **context)
+    return flask.jsonify({"success": True, "data": context})
+
+
+@login_required
+def get_releases(snap_name):
+    return flask.render_template("store/publisher.html")
 
 
 @login_required
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index f0234ecdab..93627aa43b 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -162,7 +162,12 @@
 )
 publisher_snaps.add_url_rule(
     "/<snap_name>/releases",
-    view_func=release_views.get_release_history,
+    view_func=release_views.get_releases,
+    methods=["GET"],
+)
+publisher_snaps.add_url_rule(
+    "/api/<snap_name>/releases",
+    view_func=release_views.get_release_history_data,
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
index edf1d75f05..c3e41a4f73 100644
--- a/webpack.config.entry.js
+++ b/webpack.config.entry.js
@@ -2,7 +2,6 @@ module.exports = {
   "cookie-policy": "./static/js/base/cookie-policy.ts",
   "global-nav": "./static/js/base/global-nav.ts",
   base: "./static/js/base/base.ts",
-  release: "./static/js/publisher/release.tsx",
   about: "./static/js/public/about/index.ts",
   "featured-snaps": "./static/js/public/featured-snaps.ts",
   modal: "./static/js/public/modal.ts",
diff --git a/webpack.config.rules.js b/webpack.config.rules.js
index 57712b2c04..b7e821a4ae 100644
--- a/webpack.config.rules.js
+++ b/webpack.config.rules.js
@@ -25,10 +25,6 @@ module.exports = [
     test: require.resolve(__dirname + "/static/js/base/base.ts"),
     use: ["expose-loader?exposes=snapcraft.base", "babel-loader"],
   },
-  {
-    test: require.resolve(__dirname + "/static/js/publisher/release.tsx"),
-    use: ["expose-loader?exposes=snapcraft.release", "babel-loader"],
-  },
   {
     test: require.resolve(__dirname + "/static/js/publisher/publisher.ts"),
     use: ["expose-loader?exposes=snapcraft.publisher", "babel-loader"],

From a303422e2e2176652913aea4aeb4e5b1326dac64 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Wed, 20 Nov 2024 14:22:20 +0000
Subject: [PATCH 11/24] fix: Fix publicise disabled notification (#4911)

---
 static/js/global.d.ts                         |   6 -
 .../pages/Publicise/Publicise.tsx             | 123 +++++++++++-------
 .../pages/Publicise/PubliciseBadges.tsx       |  29 +++--
 .../Publicise/__tests__/Publicise.test.tsx    |  54 +++++---
 templates/store/publisher.html                |   7 -
 tests/publisher/snaps/tests_publicise.py      |  81 ------------
 .../publisher/snaps/tests_publicise_badges.py | 116 -----------------
 .../publisher/snaps/tests_publicise_cards.py  | 102 ---------------
 webapp/publisher/snaps/publicise_views.py     |  39 ++----
 webapp/publisher/snaps/views.py               |   8 +-
 10 files changed, 148 insertions(+), 417 deletions(-)
 delete mode 100644 tests/publisher/snaps/tests_publicise.py
 delete mode 100644 tests/publisher/snaps/tests_publicise_badges.py
 delete mode 100644 tests/publisher/snaps/tests_publicise_cards.py

diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 3ce309e21e..7a991a92a3 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -18,12 +18,6 @@ declare interface Window {
   DNS_VERIFICATION_TOKEN: string;
   SENTRY_DSN: string;
   CSRF_TOKEN: string;
-  SNAP_PUBLICISE_DATA: {
-    hasScreenshot: boolean;
-    isReleased: boolean;
-    private: boolean;
-    trending: boolean;
-  };
   SNAP_SETTINGS_DATA: {
     blacklist_countries: string[];
     blacklist_country_keys: string;
diff --git a/static/js/publisher-pages/pages/Publicise/Publicise.tsx b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
index 71c693dc6a..d03880b795 100644
--- a/static/js/publisher-pages/pages/Publicise/Publicise.tsx
+++ b/static/js/publisher-pages/pages/Publicise/Publicise.tsx
@@ -1,10 +1,12 @@
 import { useParams, NavLink } from "react-router-dom";
+import { useQuery } from "react-query";
 import {
   Row,
   Col,
   SideNavigation,
   Strip,
   Notification,
+  Icon,
 } from "@canonical/react-components";
 
 import SectionNav from "../../components/SectionNav";
@@ -19,12 +21,27 @@ type Props = {
 function Publicise({ view }: Props): JSX.Element {
   const { snapId } = useParams();
 
+  const { data, isLoading, isFetched } = useQuery({
+    queryKey: ["publiciseData"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/publicise`);
+
+      if (!response.ok) {
+        throw new Error("There was a problem loading publicise data");
+      }
+
+      const data = await response.json();
+
+      return data.data;
+    },
+  });
+
   const disableView = () => {
-    if (window.SNAP_PUBLICISE_DATA.private) {
+    if (data.private) {
       return true;
     }
 
-    if (!window.SNAP_PUBLICISE_DATA.isReleased) {
+    if (!data.is_released) {
       return true;
     }
 
@@ -40,50 +57,64 @@ function Publicise({ view }: Props): JSX.Element {
 
       <SectionNav snapName={snapId} activeTab="publicise" />
 
-      <Strip shallow>
-        {disableView() && (
-          <Notification severity="information">
-            When your snap is public and has a release, you'll be able to share
-            it using Store buttons, badges and embeddable cards. Make your snap
-            public in its <a href={`/${snapId}/settings`}>settings page</a>.
-          </Notification>
-        )}
-        <Row className={window.SNAP_PUBLICISE_DATA.private ? "u-disabled" : ""}>
-          <Col size={3}>
-            <SideNavigation
-              items={[
-                {
-                  items: [
-                    {
-                      "aria-current": !view,
-                      label: "Snap Store buttons",
-                      to: `/${snapId}/publicise`,
-                      component: NavLink,
-                    },
-                    {
-                      "aria-current": view === "badges",
-                      label: "GitHub badges",
-                      to: `/${snapId}/publicise/badges`,
-                      component: NavLink,
-                    },
-                    {
-                      "aria-current": view === "cards",
-                      label: "Embeddable cards",
-                      to: `/${snapId}/publicise/cards`,
-                      component: NavLink,
-                    },
-                  ],
-                },
-              ]}
-            />
-          </Col>
-          <Col size={9}>
-            {!view && <PubliciseButtons />}
-            {view === "badges" && <PubliciseBadges />}
-            {view === "cards" && <PubliciseCards />}
-          </Col>
-        </Row>
-      </Strip>
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <Icon name="spinner" className="u-animation--spin" />
+            &nbsp;Loading...
+          </p>
+        </Strip>
+      )}
+
+      {isFetched && data && (
+        <Strip shallow>
+          {disableView() && (
+            <Notification severity="information">
+              When your snap is public and has a release, you'll be able to
+              share it using Store buttons, badges and embeddable cards. Make
+              your snap public in its{" "}
+              <a href={`/${snapId}/settings`}>settings page</a>.
+            </Notification>
+          )}
+          <Row className={data.private ? "u-disabled" : ""}>
+            <Col size={3}>
+              <SideNavigation
+                items={[
+                  {
+                    items: [
+                      {
+                        "aria-current": !view,
+                        label: "Snap Store buttons",
+                        to: `/${snapId}/publicise`,
+                        component: NavLink,
+                      },
+                      {
+                        "aria-current": view === "badges",
+                        label: "GitHub badges",
+                        to: `/${snapId}/publicise/badges`,
+                        component: NavLink,
+                      },
+                      {
+                        "aria-current": view === "cards",
+                        label: "Embeddable cards",
+                        to: `/${snapId}/publicise/cards`,
+                        component: NavLink,
+                      },
+                    ],
+                  },
+                ]}
+              />
+            </Col>
+            <Col size={9}>
+              {!view && <PubliciseButtons />}
+              {view === "badges" && (
+                <PubliciseBadges trending={data.trending} />
+              )}
+              {view === "cards" && <PubliciseCards />}
+            </Col>
+          </Row>
+        </Strip>
+      )}
     </>
   );
 }
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
index 7794dba5e8..b422d157a1 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
@@ -7,7 +7,11 @@ import {
   Notification,
 } from "@canonical/react-components";
 
-function PubliciseBadges(): JSX.Element {
+type Props = {
+  trending: boolean;
+};
+
+function PubliciseBadges({ trending }: Props): JSX.Element {
   const { snapId } = useParams();
   const [showStableChannelBadge, setShowStableChannelBadge] =
     useState<boolean>(true);
@@ -40,7 +44,9 @@ function PubliciseBadges(): JSX.Element {
             label="Stable channel from default track"
             checked={showStableChannelBadge}
             onChange={(
-              e: SyntheticEvent<HTMLInputElement> & { target: HTMLInputElement }
+              e: SyntheticEvent<HTMLInputElement> & {
+                target: HTMLInputElement;
+              },
             ) => {
               setShowStableChannelBadge(e.target.checked);
             }}
@@ -50,7 +56,9 @@ function PubliciseBadges(): JSX.Element {
             labelClassName="u-no-margin--bottom"
             checked={showTrendingStatusBadge}
             onChange={(
-              e: SyntheticEvent<HTMLInputElement> & { target: HTMLInputElement }
+              e: SyntheticEvent<HTMLInputElement> & {
+                target: HTMLInputElement;
+              },
             ) => {
               setShowTrendingStatusBadge(e.target.checked);
             }}
@@ -92,14 +100,13 @@ function PubliciseBadges(): JSX.Element {
                 )}
               </p>
 
-              {!window?.SNAP_PUBLICISE_DATA?.trending &&
-                showTrendingStatusBadge && (
-                  <Notification severity="information" title="Trending badge">
-                    Your snap is not currently flagged as trending. Only when
-                    your snap becomes trending will the trending badge appear on
-                    external sites.
-                  </Notification>
-                )}
+              {!trending && showTrendingStatusBadge && (
+                <Notification severity="information" title="Trending badge">
+                  Your snap is not currently flagged as trending. Only when your
+                  snap becomes trending will the trending badge appear on
+                  external sites.
+                </Notification>
+              )}
             </Col>
           </Row>
           <Row>
diff --git a/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
index 0e738db01b..96a11d248d 100644
--- a/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
+++ b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
@@ -1,68 +1,92 @@
 import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
 import { screen, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import Publicise from "../Publicise";
 
+const queryClient = new QueryClient();
+
 const renderComponent = (view?: "badges" | "cards" | undefined) => {
   return render(
-    <BrowserRouter>
-      <Publicise view={view} />
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Publicise view={view} />
+      </BrowserRouter>
+      ,
+    </QueryClientProvider>,
   );
 };
 
-window.SNAP_PUBLICISE_DATA = {
-  hasScreenshot: true,
-  isReleased: true,
+let mockPubliciseData = {
+  is_released: true,
   private: false,
   trending: false,
 };
 
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
 beforeEach(() => {
-  window.SNAP_PUBLICISE_DATA.private = false;
+  mockPubliciseData.private = false;
 });
 
 describe("Publicise", () => {
   test("notification if private", () => {
-    window.SNAP_PUBLICISE_DATA.private = true;
+    // @ts-expect-error Mocking useQuery to return mock publicise data
+    useQuery.mockReturnValue({
+      isLoading: false,
+      isFetched: true,
+      data: { data: mockPubliciseData },
+    });
     renderComponent();
     expect(screen.getByText(/Make your snap public/)).toBeInTheDocument();
   });
 
   test("disabled if private", () => {
-    window.SNAP_PUBLICISE_DATA.private = true;
+    mockPubliciseData.private = true;
+
+    // @ts-expect-error Mocking useQuery to return mock publicise data
+    useQuery.mockReturnValue({
+      isLoading: false,
+      isFetched: true,
+      data: { data: mockPubliciseData },
+    });
     renderComponent();
-    expect(document.querySelector(".u-disabled")).toBeInTheDocument();
+    expect(
+      screen.getByText(/When your snap is public and has a release/),
+    ).toBeInTheDocument();
   });
 
   test("renders section navigation", () => {
     renderComponent();
 
     expect(
-      screen.getByRole("link", { name: "Snap Store buttons" })
+      screen.getByRole("link", { name: "Snap Store buttons" }),
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole("link", { name: "GitHub badges" })
+      screen.getByRole("link", { name: "GitHub badges" }),
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole("link", { name: "Embeddable cards" })
+      screen.getByRole("link", { name: "Embeddable cards" }),
     ).toBeInTheDocument();
   });
 
   test("renders buttons by default", () => {
     renderComponent();
     expect(
-      screen.getByText(/You can help translate these buttons/)
+      screen.getByText(/You can help translate these buttons/),
     ).toBeInTheDocument();
   });
 
   test("renders badges if passed argument", () => {
     renderComponent("badges");
     expect(
-      screen.getByText(/Stable channel from default track/)
+      screen.getByText(/Stable channel from default track/),
     ).toBeInTheDocument();
   });
 
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
index 40d63e6288..8d090682e5 100644
--- a/templates/store/publisher.html
+++ b/templates/store/publisher.html
@@ -6,13 +6,6 @@
 <script>
   window.CSRF_TOKEN = "{{ csrf_token() }}";
   
-  window.SNAP_PUBLICISE_DATA = {
-    hasScreenshot: {% if has_screenshot %}{{ has_screenshot | tojson }}{% else %}false{% endif %},
-    isReleased: {% if is_released %}{{ is_released | tojson }}{% else %}false{% endif %},
-    private: {% if private %}{{ private | tojson }}{% else %}false{% endif %},
-    trending: {% if trending %}{{ trending | tojson }}{% else %}false{% endif %},
-  }
-
   window.SNAP_SETTINGS_DATA = {
     countries: {% if countries %}{{ countries|tojson }}{% else %}[]{% endif %},
     publisher_name: "{% if publisher_name %}{{ publisher_name }}{% endif %}",
diff --git a/tests/publisher/snaps/tests_publicise.py b/tests/publisher/snaps/tests_publicise.py
deleted file mode 100644
index dd1d22d7ef..0000000000
--- a/tests/publisher/snaps/tests_publicise.py
+++ /dev/null
@@ -1,81 +0,0 @@
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-class PublicisePageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/publicise".format(snap_name)
-
-        super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
-
-
-class GetPublicisePage(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/publicise".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="GET",
-            api_url=api_url,
-            method_api="GET",
-        )
-
-    @responses.activate
-    def test_page_not_found(self):
-        payload = {"error_list": []}
-        responses.add(responses.GET, self.api_url, json=payload, status=404)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        assert response.status_code == 404
-        self.assert_template_used("404.html")
-
-    @responses.activate
-    def test_publicise_logged_in(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": False,
-            "snap_name": snap_name,
-            "channel_maps_list": [],
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        assert response.status_code == 200
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("snap_name", snap_name)
-
-    @responses.activate
-    def test_publicise_private_snap(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": True,
-            "snap_name": snap_name,
-            "channel_maps_list": [],
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        assert response.status_code == 200
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("private", True)
diff --git a/tests/publisher/snaps/tests_publicise_badges.py b/tests/publisher/snaps/tests_publicise_badges.py
deleted file mode 100644
index 864a439cc3..0000000000
--- a/tests/publisher/snaps/tests_publicise_badges.py
+++ /dev/null
@@ -1,116 +0,0 @@
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-class PublicisePageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/publicise/badges".format(snap_name)
-
-        super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
-
-
-class GetPubliciseBadgesPage(BaseTestCases.EndpointLoggedInErrorHandling):
-    snap_payload = {
-        "snap-id": "id",
-        "name": "snapName",
-        "default-track": "test",
-        "snap": {
-            "title": "Snap Title",
-            "summary": "This is a summary",
-            "description": "this is a description",
-            "media": [],
-            "license": "license",
-            "publisher": {
-                "display-name": "Toto",
-                "username": "toto",
-                "validation": True,
-            },
-            "categories": [],
-            "trending": False,
-        },
-        "channel-map": [],
-    }
-
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        api_url = api_url.format(snap_name)
-        self.public_api_url = "".join(
-            [
-                "https://api.snapcraft.io/v2/",
-                "snaps/info/",
-                snap_name,
-                "?fields=title%2Csummary%2Cdescription%2Clicense%2Ccontact%2C",
-                "website%2Cpublisher%2Cmedia%2Cdownload%2Cversion%2C",
-                "created-at%2Cconfinement%2Ccategories%2Ctrending%2Cunlisted",
-                "%2Clinks",
-            ]
-        )
-
-        endpoint_url = "/{}/publicise/badges".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="GET",
-            api_url=api_url,
-            method_api="GET",
-        )
-
-    @responses.activate
-    def test_page_not_found(self):
-        payload = {"error_list": []}
-        responses.add(responses.GET, self.api_url, json=payload, status=404)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 404)
-        self.assert_template_used("404.html")
-
-    @responses.activate
-    def test_publicise_logged_in(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": False,
-            "snap_name": snap_name,
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-        responses.add(
-            responses.GET,
-            self.public_api_url,
-            json=self.snap_payload,
-            status=200,
-        )
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("snap_name", snap_name)
-
-    @responses.activate
-    def test_publicise_private_snap(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": True,
-            "snap_name": snap_name,
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 404)
-        self.assert_template_used("404.html")
diff --git a/tests/publisher/snaps/tests_publicise_cards.py b/tests/publisher/snaps/tests_publicise_cards.py
deleted file mode 100644
index a39f7377d3..0000000000
--- a/tests/publisher/snaps/tests_publicise_cards.py
+++ /dev/null
@@ -1,102 +0,0 @@
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-class PublicisePageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/publicise/cards".format(snap_name)
-
-        super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
-
-
-class GetPubliciseCardsPage(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/publicise/cards".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="GET",
-            api_url=api_url,
-            method_api="GET",
-        )
-
-    @responses.activate
-    def test_page_not_found(self):
-        payload = {"error_list": []}
-        responses.add(responses.GET, self.api_url, json=payload, status=404)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 404)
-        self.assert_template_used("404.html")
-
-    @responses.activate
-    def test_publicise_logged_in(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": False,
-            "snap_name": snap_name,
-            "media": [],
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("snap_name", snap_name)
-        self.assert_context("has_screenshot", False)
-
-    @responses.activate
-    def test_publicise_snap_with_screenshot(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "private": False,
-            "snap_name": snap_name,
-            "media": [{"url": "this is a url", "type": "screenshot"}],
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("has_screenshot", True)
-
-    @responses.activate
-    def test_publicise_private_snap(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "title": "test snap",
-            "private": True,
-            "snap_name": snap_name,
-            "media": [],
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        self.assertEqual(response.status_code, 404)
-        self.assert_template_used("404.html")
diff --git a/webapp/publisher/snaps/publicise_views.py b/webapp/publisher/snaps/publicise_views.py
index 65c30a4364..4ecab2ae20 100644
--- a/webapp/publisher/snaps/publicise_views.py
+++ b/webapp/publisher/snaps/publicise_views.py
@@ -8,57 +8,34 @@
 # Local
 from webapp.helpers import api_publisher_session
 from webapp.decorators import login_required
-from webapp.store.logic import filter_screenshots
 
 store_api = SnapStore(api_publisher_session)
 publisher_api = SnapPublisher(api_publisher_session)
 
 
 @login_required
-def get_publicise(snap_name):
+def get_publicise_data(snap_name):
+
     snap_details = publisher_api.get_snap_info(snap_name, flask.session)
+    snap_public_details = store_api.get_item_details(snap_name, api_version=2)
 
     is_released = len(snap_details["channel_maps_list"]) > 0
 
     context = {
-        "private": snap_details["private"],
-        "snap_name": snap_details["snap_name"],
         "is_released": is_released,
-    }
-
-    return flask.render_template("store/publisher.html", **context)
-
-
-@login_required
-def get_publicise_badges(snap_name):
-    snap_details = publisher_api.get_snap_info(snap_name, flask.session)
-
-    if snap_details["private"]:
-        return flask.abort(404, "No snap named {}".format(snap_name))
-
-    snap_public_details = store_api.get_item_details(snap_name, api_version=2)
-
-    context = {
-        "snap_name": snap_details["snap_name"],
         "trending": snap_public_details["snap"]["trending"],
+        "private": snap_details["private"],
     }
 
-    return flask.render_template("store/publisher.html", **context)
+    return flask.jsonify({"success": True, "data": context})
 
 
 @login_required
-def get_publicise_cards(snap_name):
+def get_publicise(snap_name):
+
     snap_details = publisher_api.get_snap_info(snap_name, flask.session)
 
     if snap_details["private"]:
         return flask.abort(404, "No snap named {}".format(snap_name))
 
-    screenshots = filter_screenshots(snap_details["media"])
-    has_screenshot = True if screenshots else False
-
-    context = {
-        "has_screenshot": has_screenshot,
-        "snap_name": snap_details["snap_name"],
-    }
-
-    return flask.render_template("store/publisher.html", **context)
+    return flask.render_template("store/publisher.html", snap_name=snap_name)
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 93627aa43b..ae17f022d9 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -255,11 +255,15 @@
 )
 publisher_snaps.add_url_rule(
     "/<snap_name>/publicise/badges",
-    view_func=publicise_views.get_publicise_badges,
+    view_func=publicise_views.get_publicise,
 )
 publisher_snaps.add_url_rule(
     "/<snap_name>/publicise/cards",
-    view_func=publicise_views.get_publicise_cards,
+    view_func=publicise_views.get_publicise,
+)
+publisher_snaps.add_url_rule(
+    "/api/<snap_name>/publicise",
+    view_func=publicise_views.get_publicise_data,
 )
 
 # Settings views

From 97b72ac4a78dfd8cb482ac1d0d538ff870fed037 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 21 Nov 2024 11:43:14 +0000
Subject: [PATCH 12/24] fix: Fix issue with saving settings when navigating
 from listing (#4913)

---
 static/js/global.d.ts                         |  20 -
 .../pages/Settings/Settings.tsx               | 515 +-----------------
 .../pages/Settings/SettingsForm.tsx           | 515 ++++++++++++++++++
 templates/store/publisher.html                |  16 -
 tests/publisher/snaps/tests_post_settings.py  | 326 -----------
 tests/publisher/snaps/tests_settings.py       | 100 ----
 webapp/publisher/snaps/settings_views.py      |  72 ++-
 webapp/publisher/snaps/views.py               |  13 +-
 8 files changed, 598 insertions(+), 979 deletions(-)
 create mode 100644 static/js/publisher-pages/pages/Settings/SettingsForm.tsx
 delete mode 100644 tests/publisher/snaps/tests_post_settings.py
 delete mode 100644 tests/publisher/snaps/tests_settings.py

diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 7a991a92a3..f99fb16e22 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -18,26 +18,6 @@ declare interface Window {
   DNS_VERIFICATION_TOKEN: string;
   SENTRY_DSN: string;
   CSRF_TOKEN: string;
-  SNAP_SETTINGS_DATA: {
-    blacklist_countries: string[];
-    blacklist_country_keys: string;
-    countries: Array<{ key: string; name: string }>;
-    country_keys_status: string | null;
-    private: boolean;
-    publisher_name: string;
-    snap_id: string;
-    snap_name: string;
-    snap_title: string;
-    status: string;
-    store: string;
-    territory_distribution_status: string;
-    unlisted: boolean;
-    update_metadata_on_release: boolean;
-    visibility: string;
-    visibility_locked: boolean;
-    whitelist_countries: string[];
-    whitelist_country_keys: string;
-  };
   SNAP_LISTING_DATA: {
     DNS_VERIFICATION_TOKEN: string;
   };
diff --git a/static/js/publisher-pages/pages/Settings/Settings.tsx b/static/js/publisher-pages/pages/Settings/Settings.tsx
index 07f2907545..51a7b1ea2b 100644
--- a/static/js/publisher-pages/pages/Settings/Settings.tsx
+++ b/static/js/publisher-pages/pages/Settings/Settings.tsx
@@ -1,161 +1,27 @@
-import { useState, useEffect } from "react";
-import { useForm, useWatch } from "react-hook-form";
 import { useParams } from "react-router-dom";
-import {
-  Button,
-  Form,
-  Strip,
-  Row,
-  Col,
-  Notification,
-  Tooltip,
-} from "@canonical/react-components";
+import { useQuery } from "react-query";
+import { Strip, Icon } from "@canonical/react-components";
 
 import SectionNav from "../../components/SectionNav";
-import SaveAndPreview from "../../components/SaveAndPreview";
-import SearchAutocomplete from "../../components/SearchAutocomplete";
-import UpdateMetadataModal from "../../components/UpdateMetadataModal";
-import SaveStateNotifications from "../../components/SaveStateNotifications";
-import { UnregisterSnapModal } from "./UnregisterSnapModal";
-
-import { getSettingsData, getSettingsFormData } from "../../utils";
+import SettingsForm from "./SettingsForm";
 
 function Settings() {
   const { snapId } = useParams();
-  const settingsData = getSettingsData(window.SNAP_SETTINGS_DATA);
-  const countries = window.SNAP_SETTINGS_DATA.countries;
-
-  const [isSaving, setIsSaving] = useState(false);
-  const [hasSaved, setHasSaved] = useState(false);
-  const [savedError, setSavedError] = useState<
-    boolean | { code: string; message: string }[]
-  >(false);
-  const [unregisterError, setUnregisterError] = useState(false);
-  const [unregisterErrorMessage, setUnregisterErrorMessage] = useState("");
-  const [unregisterModalOpen, setUnregisterModalOpen] = useState(false);
-  const [isUsersSnap, setIsUsersSnap] = useState(false);
-  const [formData, setFormData] = useState({});
-  const [showMetadataWarningModal, setShowMetadataWarningModal] =
-    useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState,
-    getValues,
-    setValue,
-    control,
-  } = useForm({
-    defaultValues: settingsData,
-    mode: "onChange",
-  });
+  const { data, isLoading, isFetched } = useQuery({
+    queryKey: ["settingsData"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/settings`);
 
-  const isDirty = formState.isDirty;
-  const isValid = formState.isValid;
-  const dirtyFields: { [key: string]: any } = formState.dirtyFields;
+      if (!response.ok) {
+        throw new Error("There was a problem fetching settings data");
+      }
 
-  const whitelistCountryKeyValues = useWatch({
-    control,
-    name: "whitelist_country_keys",
-  });
+      const data = await response.json();
 
-  const blacklistCountryKeyValues = useWatch({
-    control,
-    name: "blacklist_country_keys",
+      return data.data;
+    },
   });
 
-  const onSubmit = (data: any) => {
-    if (getValues("update_metadata_on_release") && dirtyFields.visibility) {
-      setShowMetadataWarningModal(true);
-      setFormData(data);
-    } else {
-      submitForm(data);
-    }
-  };
-
-  const submitForm = async (data: any) => {
-    setIsSaving(true);
-    setHasSaved(false);
-    setSavedError(false);
-
-    if (data.visibility === "private" || data.visibility_locked) {
-      data.private = true;
-      data.unlisted = false;
-    } else if (data.visibility === "unlisted") {
-      data.private = false;
-      data.unlisted = true;
-    } else if (data.visibility === "public") {
-      data.private = false;
-      data.unlisted = false;
-    }
-
-    const response = await fetch(`/${data.snap_name}/settings.json`, {
-      method: "POST",
-      body: getSettingsFormData(settingsData, dirtyFields, data),
-    });
-
-    if (response.status !== 200) {
-      setIsSaving(false);
-      setSavedError(true);
-      return;
-    }
-
-    let newData = await response.json();
-
-    setIsSaving(false);
-
-    if (newData.error_list) {
-      setSavedError(newData.error_list);
-      setIsSaving(false);
-      return;
-    }
-
-    setHasSaved(true);
-    setIsSaving(false);
-
-    newData = { ...data, ...newData };
-
-    if (newData.private) {
-      newData.visibility = "private";
-    } else if (newData.unlisted) {
-      newData.visibility = "unlisted";
-    }
-
-    reset(newData);
-    window.scrollTo(0, 0);
-  };
-
-  useEffect(() => {
-    if (whitelistCountryKeyValues) {
-      setValue("blacklist_country_keys", "");
-    }
-  }, [whitelistCountryKeyValues]);
-
-  useEffect(() => {
-    if (blacklistCountryKeyValues) {
-      setValue("whitelist_country_keys", "");
-    }
-  }, [blacklistCountryKeyValues]);
-
-  useEffect(() => {
-    const snapName = settingsData?.snap_name;
-
-    fetch(`/snap_info/user_snap/${snapName}`)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Error: ${response.status}}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        setIsUsersSnap(data.is_users_snap);
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  }, [settingsData?.snap_name]);
-
   return (
     <>
       <h1 className="p-heading--4">
@@ -164,354 +30,15 @@ function Settings() {
       </h1>
 
       <SectionNav snapName={snapId} activeTab="settings" />
-
-      {settingsData?.visibility_locked && (
-        <div className="u-fixed-width">
-          <Notification severity="information" title="">
-            Your Snap is in the queue for manual review. When approved, you will
-            receive an email, and you will be able to change the visibility of
-            your Snap.
-          </Notification>
-        </div>
-      )}
-      <Form onSubmit={handleSubmit(onSubmit)} stacked={true}>
-        <SaveAndPreview
-          snapName={settingsData?.snap_name}
-          isDirty={isDirty}
-          reset={reset}
-          isSaving={isSaving}
-          isValid={isValid}
-        />
-
-        <Strip shallow={true}>
-          <SaveStateNotifications
-            hasSaved={hasSaved}
-            setHasSaved={setHasSaved}
-            savedError={savedError}
-            setSavedError={setSavedError}
-          />
-
-          <Row className="p-form__group">
-            <Col size={2}>
-              <label className="p-form__label" htmlFor="private">
-                Visibility:
-              </label>
-            </Col>
-            <Col size={8}>
-              <div className="p-form__control">
-                <label className="p-radio">
-                  <input
-                    type="radio"
-                    className="p-radio__input"
-                    value="public"
-                    disabled={settingsData?.visibility_locked}
-                    {...register("visibility")}
-                  />
-                  <span className="p-radio__label">Public</span>
-                  <br />
-                  <span className="p-form-help-text">
-                    Anyone can find your snap in the Snap Store
-                  </span>
-                </label>
-              </div>
-
-              <div className="p-form__control">
-                <label className="p-radio">
-                  <input
-                    type="radio"
-                    className="p-radio__input"
-                    value="unlisted"
-                    disabled={settingsData?.visibility_locked}
-                    {...register("visibility")}
-                  />
-                  <span className="p-radio__label">Unlisted</span>
-                  <br />
-                  <span className="p-form-help-text">
-                    Does not appear in search results. Anyone can visit or
-                    install using its snap name
-                  </span>
-                </label>
-              </div>
-
-              <div className="p-form__control">
-                <label className="p-radio">
-                  <input
-                    type="radio"
-                    className="p-radio__input"
-                    value="private"
-                    disabled={settingsData?.visibility_locked}
-                    {...register("visibility")}
-                  />
-                  <span className="p-radio__label">Private</span>
-                  <br />
-                  <span className="p-form-help-text">
-                    Hidden in the Snap Store. Only accessible by the publisher
-                    and collaborators
-                  </span>
-                </label>
-              </div>
-            </Col>
-          </Row>
-
-          <div className="u-fixed-width">
-            <hr />
-          </div>
-
-          <Row className="p-form__group">
-            <Col size={2}>
-              <label className="p-form__label" htmlFor="distribution">
-                Distribution:
-              </label>
-            </Col>
-            <Col size={8}>
-              <p className="u-no-margin--bottom">
-                This snap should be available in:
-              </p>
-              <ul className="p-inline-list">
-                <li className="p-inline-list__item">
-                  <label
-                    className="p-radio u-no-margin--bottom"
-                    style={{ display: "inline-block" }}
-                  >
-                    <input
-                      type="radio"
-                      className="p-radio__input"
-                      value="all"
-                      {...register("territory_distribution_status")}
-                    />
-                    <span className="p-radio__label">All territories</span>
-                  </label>
-                </li>
-                <li className="p-inline-list__item">
-                  <label
-                    className="p-radio u-no-margin--bottom"
-                    style={{ display: "inline-block" }}
-                  >
-                    <input
-                      type="radio"
-                      className="p-radio__input"
-                      value="custom"
-                      {...register("territory_distribution_status")}
-                    />
-                    <span className="p-radio__label">Selected territories</span>
-                  </label>
-                </li>
-              </ul>
-
-              {getValues("territory_distribution_status") === "custom" && (
-                <>
-                  <label className="p-radio">
-                    <input
-                      type="radio"
-                      className="p-radio__input"
-                      value="include"
-                      {...register("country_keys_status")}
-                    />
-                    <span className="p-radio__label">
-                      Only these territories
-                    </span>
-                  </label>
-
-                  <SearchAutocomplete
-                    data={countries}
-                    field="whitelist_country_keys"
-                    currentValues={settingsData?.whitelist_countries}
-                    register={register}
-                    setValue={setValue}
-                    getValues={getValues}
-                    control={control}
-                    disabled={getValues("country_keys_status") === "exclude"}
-                  />
-
-                  <label className="p-radio">
-                    <input
-                      type="radio"
-                      className="p-radio__input"
-                      value="exclude"
-                      {...register("country_keys_status")}
-                    />
-                    <span className="p-radio__label">
-                      Exclude these territories
-                    </span>
-                  </label>
-
-                  <SearchAutocomplete
-                    data={countries}
-                    field="blacklist_country_keys"
-                    currentValues={settingsData?.blacklist_countries}
-                    register={register}
-                    setValue={setValue}
-                    getValues={getValues}
-                    control={control}
-                    disabled={getValues("country_keys_status") === "include"}
-                  />
-                </>
-              )}
-            </Col>
-          </Row>
-
-          <div className="u-fixed-width">
-            <hr />
-          </div>
-
-          <Row className="p-form__group">
-            <Col size={2}>
-              <label
-                className="p-form__label"
-                htmlFor="update_metadata_on_release"
-              >
-                Update metadata on release:
-              </label>
-            </Col>
-            <Col size={8}>
-              <div className="p-form__control">
-                <label className="p-checkbox">
-                  <input
-                    type="checkbox"
-                    className="p-checkbox__input"
-                    {...register("update_metadata_on_release", {
-                      setValueAs: (value) => value === "on" || value === true,
-                    })}
-                  />
-                  <span className="p-checkbox__label">Enabled</span>
-                  <br />
-                  <span className="p-form-help-text">
-                    The information on the Listing page of this snap will be
-                    automatically updated to the version in snapcraft.yaml of
-                    the latest revision pushed to the stable channel. If you
-                    manually edit the Listing page, the automatic updates will
-                    be turned off.{" "}
-                    <a href="/docs/snapcraft-top-level-metadata">Learn more</a>.
-                  </span>
-                </label>
-                {getValues("update_metadata_on_release") && (
-                  <Notification severity="caution" title="Warning">
-                    This snap is set to have its metadata updated when a new
-                    revision is published in the stable channel. Any changes you
-                    make here will be overwritten by the contents of any snap
-                    published. If this is not desirable, please disable “Update
-                    metadata on release” for this snap.
-                  </Notification>
-                )}
-              </div>
-            </Col>
-          </Row>
-
-          <div className="u-fixed-width">
-            <hr />
-          </div>
-
-          <Row className="p-form__group">
-            <Col size={2}>
-              <label className="p-form__label" id="collaboration-label">
-                Collaboration:
-              </label>
-            </Col>
-            <Col size={8}>
-              <div
-                className="p-form__control"
-                aria-labelledby="collaboration-label"
-              >
-                <a
-                  href={`https://dashboard.snapcraft.io/snaps/${settingsData?.snap_name}/collaboration/`}
-                >
-                  Manage collaborators in dashboard.snapcraft.io
-                </a>
-              </div>
-            </Col>
-          </Row>
-
-          <div className="u-fixed-width">
-            <hr />
-          </div>
-
-          <Row className="p-form__group">
-            <Col size={2}>
-              <label className="p-form__label" id="store-label">
-                Store:
-              </label>
-            </Col>
-            <Col size={8}>
-              <div className="p-form__control" aria-labelledby="store-label">
-                {settingsData?.store}
-              </div>
-            </Col>
-          </Row>
-
-          <div className="u-fixed-width">
-            <hr />
-          </div>
-
-          <Row className="p-form__group">
-            {unregisterModalOpen && (
-              <UnregisterSnapModal
-                snapName={settingsData.snap_name}
-                setUnregisterModalOpen={setUnregisterModalOpen}
-                setUnregisterError={setUnregisterError}
-                setUnregisterErrorMessage={setUnregisterErrorMessage}
-              />
-            )}
-            <Col size={2}>
-              <label className="p-form__label" id="status-label">
-                Status:
-              </label>
-            </Col>
-            <Col size={8}>
-              <div className="p-form__control" aria-labelledby="status-label">
-                {settingsData?.status === "unpublished" ? (
-                  <div>
-                    <span className="u-margin--right">Registered</span>
-                    {!isUsersSnap ? (
-                      <Tooltip
-                        message={
-                          <>Snaps can only be unregistered by their owner.</>
-                        }
-                        position="top-center"
-                      >
-                        <Button inline={true} disabled>
-                          Unregister
-                        </Button>
-                      </Tooltip>
-                    ) : (
-                      <Button
-                        inline={true}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          setUnregisterModalOpen(true);
-                        }}
-                      >
-                        Unregister
-                      </Button>
-                    )}
-                  </div>
-                ) : (
-                  (settingsData?.status).charAt(0).toUpperCase() +
-                  (settingsData?.status).slice(1)
-                )}
-              </div>
-            </Col>
-            {unregisterError && (
-              <div className="u-fixed-width">
-                <Notification
-                  severity="negative"
-                  title={unregisterErrorMessage}
-                  onDismiss={() => {
-                    setUnregisterError(false);
-                  }}
-                />
-              </div>
-            )}
-          </Row>
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <Icon name="spinner" className="u-animate--spin" />
+            &nbsp;Loading...
+          </p>
         </Strip>
-      </Form>
-
-      {showMetadataWarningModal ? (
-        <UpdateMetadataModal
-          setShowMetadataWarningModal={setShowMetadataWarningModal}
-          submitForm={submitForm}
-          formData={formData}
-        />
-      ) : null}
+      )}
+      {!isLoading && isFetched && data && <SettingsForm settings={data} />}
     </>
   );
 }
diff --git a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
new file mode 100644
index 0000000000..e4cce182fa
--- /dev/null
+++ b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
@@ -0,0 +1,515 @@
+import { useState, useEffect } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import {
+  Button,
+  Form,
+  Strip,
+  Row,
+  Col,
+  Notification,
+  Tooltip,
+} from "@canonical/react-components";
+
+import SaveAndPreview from "../../components/SaveAndPreview";
+import SearchAutocomplete from "../../components/SearchAutocomplete";
+import UpdateMetadataModal from "../../components/UpdateMetadataModal";
+import SaveStateNotifications from "../../components/SaveStateNotifications";
+import { UnregisterSnapModal } from "./UnregisterSnapModal";
+
+import { getSettingsData, getSettingsFormData } from "../../utils";
+
+import type { SettingsData } from "../../types";
+
+type Props = {
+  settings: SettingsData;
+};
+
+function SettingsForm({ settings }: Props) {
+  const settingsData = getSettingsData(settings);
+  const countries = settingsData.countries;
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasSaved, setHasSaved] = useState(false);
+  const [savedError, setSavedError] = useState<
+    boolean | { code: string; message: string }[]
+  >(false);
+  const [unregisterError, setUnregisterError] = useState(false);
+  const [unregisterErrorMessage, setUnregisterErrorMessage] = useState("");
+  const [unregisterModalOpen, setUnregisterModalOpen] = useState(false);
+  const [isUsersSnap, setIsUsersSnap] = useState(false);
+  const [formData, setFormData] = useState({});
+  const [showMetadataWarningModal, setShowMetadataWarningModal] =
+    useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState,
+    getValues,
+    setValue,
+    control,
+  } = useForm({
+    defaultValues: settingsData,
+    mode: "onChange",
+  });
+
+  const isDirty = formState.isDirty;
+  const isValid = formState.isValid;
+  const dirtyFields: { [key: string]: any } = formState.dirtyFields;
+
+  const whitelistCountryKeyValues = useWatch({
+    control,
+    name: "whitelist_country_keys",
+  });
+
+  const blacklistCountryKeyValues = useWatch({
+    control,
+    name: "blacklist_country_keys",
+  });
+
+  const onSubmit = (data: any) => {
+    if (getValues("update_metadata_on_release") && dirtyFields.visibility) {
+      setShowMetadataWarningModal(true);
+      setFormData(data);
+    } else {
+      submitForm(data);
+    }
+  };
+
+  const submitForm = async (data: any) => {
+    setIsSaving(true);
+    setHasSaved(false);
+    setSavedError(false);
+
+    if (data.visibility === "private" || data.visibility_locked) {
+      data.private = true;
+      data.unlisted = false;
+    } else if (data.visibility === "unlisted") {
+      data.private = false;
+      data.unlisted = true;
+    } else if (data.visibility === "public") {
+      data.private = false;
+      data.unlisted = false;
+    }
+
+    const response = await fetch(`/api/${data.snap_name}/settings`, {
+      method: "POST",
+      body: getSettingsFormData(settingsData, dirtyFields, data),
+    });
+
+    if (response.status !== 200) {
+      setIsSaving(false);
+      setSavedError(true);
+      return;
+    }
+
+    let newData = await response.json();
+
+    setIsSaving(false);
+
+    if (newData.error_list) {
+      setSavedError(newData.error_list);
+      setIsSaving(false);
+      return;
+    }
+
+    setHasSaved(true);
+    setIsSaving(false);
+
+    newData = { ...data, ...newData };
+
+    if (newData.private) {
+      newData.visibility = "private";
+    } else if (newData.unlisted) {
+      newData.visibility = "unlisted";
+    }
+
+    reset(newData);
+    window.scrollTo(0, 0);
+  };
+
+  useEffect(() => {
+    if (whitelistCountryKeyValues) {
+      setValue("blacklist_country_keys", "");
+    }
+  }, [whitelistCountryKeyValues]);
+
+  useEffect(() => {
+    if (blacklistCountryKeyValues) {
+      setValue("whitelist_country_keys", "");
+    }
+  }, [blacklistCountryKeyValues]);
+
+  useEffect(() => {
+    const snapName = settingsData?.snap_name;
+
+    fetch(`/snap_info/user_snap/${snapName}`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setIsUsersSnap(data.is_users_snap);
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }, [settingsData?.snap_name]);
+
+  return (
+    <>
+      {settingsData?.visibility_locked && (
+        <div className="u-fixed-width">
+          <Notification severity="information" title="">
+            Your Snap is in the queue for manual review. When approved, you will
+            receive an email, and you will be able to change the visibility of
+            your Snap.
+          </Notification>
+        </div>
+      )}
+      <Form onSubmit={handleSubmit(onSubmit)} stacked={true}>
+        <SaveAndPreview
+          snapName={settingsData?.snap_name}
+          isDirty={isDirty}
+          reset={reset}
+          isSaving={isSaving}
+          isValid={isValid}
+        />
+
+        <Strip shallow={true}>
+          <SaveStateNotifications
+            hasSaved={hasSaved}
+            setHasSaved={setHasSaved}
+            savedError={savedError}
+            setSavedError={setSavedError}
+          />
+
+          <Row className="p-form__group">
+            <Col size={2}>
+              <label className="p-form__label" htmlFor="private">
+                Visibility:
+              </label>
+            </Col>
+            <Col size={8}>
+              <div className="p-form__control">
+                <label className="p-radio">
+                  <input
+                    type="radio"
+                    className="p-radio__input"
+                    value="public"
+                    disabled={settingsData?.visibility_locked}
+                    {...register("visibility")}
+                  />
+                  <span className="p-radio__label">Public</span>
+                  <br />
+                  <span className="p-form-help-text">
+                    Anyone can find your snap in the Snap Store
+                  </span>
+                </label>
+              </div>
+
+              <div className="p-form__control">
+                <label className="p-radio">
+                  <input
+                    type="radio"
+                    className="p-radio__input"
+                    value="unlisted"
+                    disabled={settingsData?.visibility_locked}
+                    {...register("visibility")}
+                  />
+                  <span className="p-radio__label">Unlisted</span>
+                  <br />
+                  <span className="p-form-help-text">
+                    Does not appear in search results. Anyone can visit or
+                    install using its snap name
+                  </span>
+                </label>
+              </div>
+
+              <div className="p-form__control">
+                <label className="p-radio">
+                  <input
+                    type="radio"
+                    className="p-radio__input"
+                    value="private"
+                    disabled={settingsData?.visibility_locked}
+                    {...register("visibility")}
+                  />
+                  <span className="p-radio__label">Private</span>
+                  <br />
+                  <span className="p-form-help-text">
+                    Hidden in the Snap Store. Only accessible by the publisher
+                    and collaborators
+                  </span>
+                </label>
+              </div>
+            </Col>
+          </Row>
+
+          <div className="u-fixed-width">
+            <hr />
+          </div>
+
+          <Row className="p-form__group">
+            <Col size={2}>
+              <label className="p-form__label" htmlFor="distribution">
+                Distribution:
+              </label>
+            </Col>
+            <Col size={8}>
+              <p className="u-no-margin--bottom">
+                This snap should be available in:
+              </p>
+              <ul className="p-inline-list">
+                <li className="p-inline-list__item">
+                  <label
+                    className="p-radio u-no-margin--bottom"
+                    style={{ display: "inline-block" }}
+                  >
+                    <input
+                      type="radio"
+                      className="p-radio__input"
+                      value="all"
+                      {...register("territory_distribution_status")}
+                    />
+                    <span className="p-radio__label">All territories</span>
+                  </label>
+                </li>
+                <li className="p-inline-list__item">
+                  <label
+                    className="p-radio u-no-margin--bottom"
+                    style={{ display: "inline-block" }}
+                  >
+                    <input
+                      type="radio"
+                      className="p-radio__input"
+                      value="custom"
+                      {...register("territory_distribution_status")}
+                    />
+                    <span className="p-radio__label">Selected territories</span>
+                  </label>
+                </li>
+              </ul>
+
+              {getValues("territory_distribution_status") === "custom" && (
+                <>
+                  <label className="p-radio">
+                    <input
+                      type="radio"
+                      className="p-radio__input"
+                      value="include"
+                      {...register("country_keys_status")}
+                    />
+                    <span className="p-radio__label">
+                      Only these territories
+                    </span>
+                  </label>
+
+                  <SearchAutocomplete
+                    data={countries}
+                    field="whitelist_country_keys"
+                    currentValues={settingsData?.whitelist_countries}
+                    register={register}
+                    setValue={setValue}
+                    getValues={getValues}
+                    control={control}
+                    disabled={getValues("country_keys_status") === "exclude"}
+                  />
+
+                  <label className="p-radio">
+                    <input
+                      type="radio"
+                      className="p-radio__input"
+                      value="exclude"
+                      {...register("country_keys_status")}
+                    />
+                    <span className="p-radio__label">
+                      Exclude these territories
+                    </span>
+                  </label>
+
+                  <SearchAutocomplete
+                    data={countries}
+                    field="blacklist_country_keys"
+                    currentValues={settingsData?.blacklist_countries}
+                    register={register}
+                    setValue={setValue}
+                    getValues={getValues}
+                    control={control}
+                    disabled={getValues("country_keys_status") === "include"}
+                  />
+                </>
+              )}
+            </Col>
+          </Row>
+
+          <div className="u-fixed-width">
+            <hr />
+          </div>
+
+          <Row className="p-form__group">
+            <Col size={2}>
+              <label
+                className="p-form__label"
+                htmlFor="update_metadata_on_release"
+              >
+                Update metadata on release:
+              </label>
+            </Col>
+            <Col size={8}>
+              <div className="p-form__control">
+                <label className="p-checkbox">
+                  <input
+                    type="checkbox"
+                    className="p-checkbox__input"
+                    {...register("update_metadata_on_release", {
+                      setValueAs: (value) => value === "on" || value === true,
+                    })}
+                  />
+                  <span className="p-checkbox__label">Enabled</span>
+                  <br />
+                  <span className="p-form-help-text">
+                    The information on the Listing page of this snap will be
+                    automatically updated to the version in snapcraft.yaml of
+                    the latest revision pushed to the stable channel. If you
+                    manually edit the Listing page, the automatic updates will
+                    be turned off.{" "}
+                    <a href="/docs/snapcraft-top-level-metadata">Learn more</a>.
+                  </span>
+                </label>
+                {getValues("update_metadata_on_release") && (
+                  <Notification severity="caution" title="Warning">
+                    This snap is set to have its metadata updated when a new
+                    revision is published in the stable channel. Any changes you
+                    make here will be overwritten by the contents of any snap
+                    published. If this is not desirable, please disable “Update
+                    metadata on release” for this snap.
+                  </Notification>
+                )}
+              </div>
+            </Col>
+          </Row>
+
+          <div className="u-fixed-width">
+            <hr />
+          </div>
+
+          <Row className="p-form__group">
+            <Col size={2}>
+              <label className="p-form__label" id="collaboration-label">
+                Collaboration:
+              </label>
+            </Col>
+            <Col size={8}>
+              <div
+                className="p-form__control"
+                aria-labelledby="collaboration-label"
+              >
+                <a
+                  href={`https://dashboard.snapcraft.io/snaps/${settingsData?.snap_name}/collaboration/`}
+                >
+                  Manage collaborators in dashboard.snapcraft.io
+                </a>
+              </div>
+            </Col>
+          </Row>
+
+          <div className="u-fixed-width">
+            <hr />
+          </div>
+
+          <Row className="p-form__group">
+            <Col size={2}>
+              <label className="p-form__label" id="store-label">
+                Store:
+              </label>
+            </Col>
+            <Col size={8}>
+              <div className="p-form__control" aria-labelledby="store-label">
+                {settingsData?.store}
+              </div>
+            </Col>
+          </Row>
+
+          <div className="u-fixed-width">
+            <hr />
+          </div>
+
+          <Row className="p-form__group">
+            {unregisterModalOpen && (
+              <UnregisterSnapModal
+                snapName={settingsData.snap_name}
+                setUnregisterModalOpen={setUnregisterModalOpen}
+                setUnregisterError={setUnregisterError}
+                setUnregisterErrorMessage={setUnregisterErrorMessage}
+              />
+            )}
+            <Col size={2}>
+              <label className="p-form__label" id="status-label">
+                Status:
+              </label>
+            </Col>
+            <Col size={8}>
+              <div className="p-form__control" aria-labelledby="status-label">
+                {settingsData?.status === "unpublished" ? (
+                  <div>
+                    <span className="u-margin--right">Registered</span>
+                    {!isUsersSnap ? (
+                      <Tooltip
+                        message={
+                          <>Snaps can only be unregistered by their owner.</>
+                        }
+                        position="top-center"
+                      >
+                        <Button inline={true} disabled>
+                          Unregister
+                        </Button>
+                      </Tooltip>
+                    ) : (
+                      <Button
+                        inline={true}
+                        onClick={(event) => {
+                          event.preventDefault();
+                          setUnregisterModalOpen(true);
+                        }}
+                      >
+                        Unregister
+                      </Button>
+                    )}
+                  </div>
+                ) : (
+                  (settingsData?.status).charAt(0).toUpperCase() +
+                  (settingsData?.status).slice(1)
+                )}
+              </div>
+            </Col>
+            {unregisterError && (
+              <div className="u-fixed-width">
+                <Notification
+                  severity="negative"
+                  title={unregisterErrorMessage}
+                  onDismiss={() => {
+                    setUnregisterError(false);
+                  }}
+                />
+              </div>
+            )}
+          </Row>
+        </Strip>
+      </Form>
+
+      {showMetadataWarningModal ? (
+        <UpdateMetadataModal
+          setShowMetadataWarningModal={setShowMetadataWarningModal}
+          submitForm={submitForm}
+          formData={formData}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export default SettingsForm;
diff --git a/templates/store/publisher.html b/templates/store/publisher.html
index 8d090682e5..b300ce5bcb 100644
--- a/templates/store/publisher.html
+++ b/templates/store/publisher.html
@@ -6,22 +6,6 @@
 <script>
   window.CSRF_TOKEN = "{{ csrf_token() }}";
   
-  window.SNAP_SETTINGS_DATA = {
-    countries: {% if countries %}{{ countries|tojson }}{% else %}[]{% endif %},
-    publisher_name: "{% if publisher_name %}{{ publisher_name }}{% endif %}",
-    snap_title: "{% if snap_title %}{{ snap_title }}{% endif %}",
-    snap_name: "{% if snap_name %}{{ snap_name }}{% endif %}",
-    snap_id: "{% if snap_id %}{{ snap_id }}{% endif %}",
-    store: "{% if store %}{{ store }}{% endif %}",
-    status: "{% if status %}{{ status }}{% endif %}",
-    update_metadata_on_release: {% if update_metadata_on_release %}{{ update_metadata_on_release|tojson }}{% else %}false{% endif %},
-    private: {% if private %}{{ private|tojson }}{% else %}false{% endif %},
-    unlisted: {% if unlisted %}{{ unlisted|tojson }}{% else %}false{% endif %},
-    whitelist_countries: {% if whitelist_country_codes %}{{ whitelist_country_codes|tojson }}{% else %}[]{% endif %},
-    blacklist_countries: {% if blacklist_country_codes %}{{ blacklist_country_codes|tojson }}{% else %}[]{% endif %},
-    visibility_locked: {% if visibility_locked %}{{ visibility_locked|tojson }}{% else %}false{% endif %},
-  }
-
   window.SNAP_LISTING_DATA = {
     DNS_VERIFICATION_TOKEN: "{{ dns_verification_token }}",
   };
diff --git a/tests/publisher/snaps/tests_post_settings.py b/tests/publisher/snaps/tests_post_settings.py
deleted file mode 100644
index 3725ee1aa4..0000000000
--- a/tests/publisher/snaps/tests_post_settings.py
+++ /dev/null
@@ -1,326 +0,0 @@
-import os
-import json
-
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-LP_API_USERNAME = os.getenv("LP_API_USERNAME")
-
-
-class PostSettingsPageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/settings".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="POST",
-        )
-
-
-class PostMetadataSettingsPage(BaseTestCases.EndpointLoggedIn):
-    def setUp(self):
-        self.snap_id = "complexId"
-
-        snap_name = "test-snap"
-        endpoint_url = "/{}/settings".format(snap_name)
-        api_url = (
-            "https://dashboard.snapcraft.io/dev/api/"
-            "snaps/{}/metadata?conflict_on_update=true"
-        ).format(self.snap_id)
-
-        changes = {"description": "New description"}
-        data = {"changes": json.dumps(changes), "snap_id": self.snap_id}
-
-        super().setUp(
-            snap_name=snap_name,
-            api_url=api_url,
-            endpoint_url=endpoint_url,
-            method_api="PUT",
-            method_endpoint="POST",
-            data=data,
-        )
-
-    @responses.activate
-    def test_post_no_data(self):
-        response = self.client.post(self.endpoint_url)
-
-        assert response.status_code == 302
-        assert response.location == self._get_location()
-
-    @responses.activate
-    def test_update_invalid_field(self):
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": '{"dumb_field": "this is a dumb field"}'},
-        )
-
-        assert 0 == len(responses.calls)
-        assert response.status_code == 302
-        assert response.location == self._get_location()
-
-    @responses.activate
-    def test_update_valid_field(self):
-        responses.add(responses.PUT, self.api_url, json={}, status=200)
-
-        changes = {"description": "New description"}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(1, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        self.assertEqual(
-            b'{"description": "New description"}', called.request.body
-        )
-
-        assert response.status_code == 302
-        assert response.location == self._get_location()
-
-    @responses.activate
-    def test_return_error_update_one_field(self):
-        metadata_payload = {
-            "error_list": [{"code": "code", "message": "message"}]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "title": "test snap",
-            "snap_name": self.snap_name,
-            "private": True,
-            "unlisted": False,
-            "store": "stotore",
-            "keywords": [],
-            "status": "published",
-            "publisher": {"display-name": "test"},
-            "update_metadata_on_release": False,
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-
-        launchpad_url = "".join(
-            [
-                "https://api.launchpad.net",
-                "/devel/+snaps" "?ws.op=findByStoreName",
-                f"&owner=%2F~{LP_API_USERNAME}",
-                "&store_name=",
-                f'"{self.snap_name}"',
-            ]
-        )
-
-        launchpad_payload = {"snaps": [{"store_name": self.snap_name}]}
-
-        responses.add(
-            responses.GET,
-            launchpad_url,
-            json=launchpad_payload,
-            status=200,
-        )
-
-        changes = {"private": True}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        self.assertEqual(b'{"private": true}', called.request.body)
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("snap_id", self.snap_id)
-        self.assert_context("snap_title", "test snap")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("private", True)
-        self.assert_context("store", "stotore")
-        self.assert_context("keywords", [])
-        self.assert_context("status", "published")
-
-    @responses.activate
-    def test_return_error_udpate_all_field(self):
-        metadata_payload = {
-            "error_list": [{"code": "code", "message": "message"}]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "title": "test snap",
-            "snap_name": self.snap_name,
-            "private": True,
-            "unlisted": False,
-            "public_metrics_enabled": False,
-            "public_metrics_blacklist": True,
-            "store": "stotore",
-            "keywords": [],
-            "status": "published",
-            "publisher": {"display-name": "test"},
-            "update_metadata_on_release": False,
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-
-        launchpad_url = "".join(
-            [
-                "https://api.launchpad.net",
-                "/devel/+snaps" "?ws.op=findByStoreName",
-                f"&owner=%2F~{LP_API_USERNAME}",
-                "&store_name=",
-                f'"{self.snap_name}"',
-            ]
-        )
-
-        launchpad_payload = {"snaps": [{"store_name": self.snap_name}]}
-
-        responses.add(
-            responses.GET,
-            launchpad_url,
-            json=launchpad_payload,
-            status=200,
-        )
-
-        changes = {"license": "newLicense", "private": False}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        # Not updatable fields
-        self.assert_context("snap_id", self.snap_id)
-        self.assert_context("snap_title", "test snap")
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("private", True)
-        self.assert_context("store", "stotore")
-        self.assert_context("keywords", [])
-        self.assert_context("status", "published")
-
-    @responses.activate
-    def test_return_error_invalid_field(self):
-        metadata_payload = {
-            "error_list": [
-                {
-                    "code": "invalid-field",
-                    "message": "error message",
-                    "extra": {"name": "description"},
-                }
-            ]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "title": "test snap",
-            "snap_name": self.snap_name,
-            "summary": "This is a summary",
-            "description": "This is a description",
-            "license": "license",
-            "media": [],
-            "publisher": {"display-name": "The publisher"},
-            "private": True,
-            "unlisted": False,
-            "website": "website_url",
-            "store": "stotore",
-            "keywords": [],
-            "status": "published",
-            "update_metadata_on_release": False,
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-
-        launchpad_url = "".join(
-            [
-                "https://api.launchpad.net",
-                "/devel/+snaps" "?ws.op=findByStoreName",
-                f"&owner=%2F~{LP_API_USERNAME}",
-                "&store_name=",
-                f'"{self.snap_name}"',
-            ]
-        )
-
-        launchpad_payload = {"snaps": [{"store_name": self.snap_name}]}
-
-        responses.add(
-            responses.GET,
-            launchpad_url,
-            json=launchpad_payload,
-            status=200,
-        )
-
-        changes = {"description": "This is an updated description"}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("field_errors", {"description": "error message"})
diff --git a/tests/publisher/snaps/tests_settings.py b/tests/publisher/snaps/tests_settings.py
deleted file mode 100644
index 7149e4826f..0000000000
--- a/tests/publisher/snaps/tests_settings.py
+++ /dev/null
@@ -1,100 +0,0 @@
-import os
-
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-LP_API_USERNAME = os.getenv("LP_API_USERNAME")
-
-
-class SettingsPageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/settings".format(snap_name)
-
-        super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
-
-
-class GetSettingsPage(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        snap_name = "test-snap"
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/settings".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="GET",
-            api_url=api_url,
-            method_api="GET",
-        )
-
-    @responses.activate
-    def test_page_not_found(self):
-        payload = {"error_list": []}
-        responses.add(responses.GET, self.api_url, json=payload, status=404)
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        assert response.status_code == 404
-        self.assert_template_used("404.html")
-
-    @responses.activate
-    def test_account_logged_in(self):
-        snap_name = "test-snap"
-
-        payload = {
-            "snap_id": "id",
-            "title": "test snap",
-            "snap_name": snap_name,
-            "private": True,
-            "unlisted": False,
-            "store": "stotore",
-            "keywords": [],
-            "status": "published",
-            "publisher": {"display-name": "test"},
-            "update_metadata_on_release": True,
-            "license": "",
-            "visibility_locked": False,
-        }
-
-        responses.add(responses.GET, self.api_url, json=payload, status=200)
-
-        launchpad_url = "".join(
-            [
-                "https://api.launchpad.net",
-                "/devel/+snaps?ws.op=findByStoreName",
-                f"&owner=%2F~{LP_API_USERNAME}",
-                "&store_name=",
-                f'"{snap_name}"',
-            ]
-        )
-
-        launchpad_payload = {"snaps": [{"store_name": snap_name}]}
-
-        responses.add(
-            responses.GET,
-            launchpad_url,
-            json=launchpad_payload,
-            status=200,
-        )
-
-        response = self.client.get(self.endpoint_url)
-
-        self.check_call_by_api_url(responses.calls)
-
-        assert response.status_code == 200
-        self.assert_template_used("store/publisher.html")
-
-        self.assert_context("snap_id", "id")
-        self.assert_context("snap_title", "test snap")
-        self.assert_context("snap_name", snap_name)
-        self.assert_context("private", True)
-        self.assert_context("store", "stotore")
-        self.assert_context("keywords", [])
-        self.assert_context("status", "published")
-        self.assert_context("update_metadata_on_release", True)
diff --git a/webapp/publisher/snaps/settings_views.py b/webapp/publisher/snaps/settings_views.py
index 59cd8d999c..ff07ce21af 100644
--- a/webapp/publisher/snaps/settings_views.py
+++ b/webapp/publisher/snaps/settings_views.py
@@ -22,6 +22,61 @@ def get_settings_json(snap_name):
     return get_settings(snap_name, return_json=True)
 
 
+@login_required
+def get_settings_data(snap_name):
+    snap_details = publisher_api.get_snap_info(snap_name, flask.session)
+
+    if "whitelist_country_codes" in snap_details:
+        whitelist_country_codes = (
+            snap_details["whitelist_country_codes"]
+            if len(snap_details["whitelist_country_codes"]) > 0
+            else []
+        )
+    else:
+        whitelist_country_codes = []
+
+    if "blacklist_country_codes" in snap_details:
+        blacklist_country_codes = (
+            snap_details["blacklist_country_codes"]
+            if len(snap_details["blacklist_country_codes"]) > 0
+            else []
+        )
+    else:
+        blacklist_country_codes = []
+
+    countries = []
+    for country in pycountry.countries:
+        countries.append({"key": country.alpha_2, "name": country.name})
+
+    is_on_lp = False
+    lp_snap = launchpad.get_snap_by_store_name(snap_name)
+    if lp_snap:
+        is_on_lp = True
+
+    context = {
+        "snap_name": snap_details["snap_name"],
+        "snap_title": snap_details["title"],
+        "snap_id": snap_details["snap_id"],
+        "publisher_name": snap_details["publisher"]["display-name"],
+        "license": snap_details["license"],
+        "private": snap_details["private"],
+        "unlisted": snap_details["unlisted"],
+        "countries": countries,
+        "whitelist_countries": whitelist_country_codes,
+        "blacklist_countries": blacklist_country_codes,
+        "store": snap_details["store"],
+        "keywords": snap_details["keywords"],
+        "status": snap_details["status"],
+        "is_on_lp": is_on_lp,
+        "update_metadata_on_release": snap_details[
+            "update_metadata_on_release"
+        ],
+        "visibility_locked": snap_details["visibility_locked"] | False,
+    }
+
+    return flask.jsonify({"success": True, "data": context})
+
+
 @login_required
 def get_settings(snap_name, return_json=False):
     snap_details = publisher_api.get_snap_info(snap_name, flask.session)
@@ -81,12 +136,7 @@ def get_settings(snap_name, return_json=False):
 
 
 @login_required
-def post_settings_json(snap_name):
-    return post_settings(snap_name, return_json=True)
-
-
-@login_required
-def post_settings(snap_name, return_json=False):
+def post_settings_data(snap_name):
     changes = None
     changed_fields = flask.request.form.get("changes")
 
@@ -104,8 +154,7 @@ def post_settings(snap_name, return_json=False):
                 response = publisher_api.snap_metadata(
                     snap_id, flask.session, body_json
                 )
-                if return_json:
-                    return flask.jsonify(response)
+                return flask.jsonify(response)
             except StoreApiResponseErrorList as api_response_error_list:
                 if api_response_error_list.status_code == 404:
                     return flask.abort(
@@ -184,9 +233,4 @@ def post_settings(snap_name, return_json=False):
                 "other_errors": other_errors,
             }
 
-            if return_json:
-                return flask.jsonify(context)
-
-            return flask.render_template("store/publisher.html", **context)
-
-    return flask.redirect(flask.url_for(".get_settings", snap_name=snap_name))
+            return flask.jsonify(context)
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index ae17f022d9..27859e0f2a 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -272,18 +272,13 @@
     view_func=settings_views.get_settings,
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/settings.json",
-    view_func=settings_views.get_settings_json,
-)
-publisher_snaps.add_url_rule(
-    "/<snap_name>/settings",
-    view_func=settings_views.post_settings,
+    "/api/<snap_name>/settings",
+    view_func=settings_views.post_settings_data,
     methods=["POST"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/settings.json",
-    view_func=settings_views.post_settings_json,
-    methods=["POST"],
+    "/api/<snap_name>/settings",
+    view_func=settings_views.get_settings_data,
 )
 
 

From 47ded70fd6100be66c9125c2a8000f7444deb749 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 21 Nov 2024 14:50:57 +0000
Subject: [PATCH 13/24] fix: Fix publicise view for private snaps (#4914)

---
 webapp/publisher/snaps/publicise_views.py | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/webapp/publisher/snaps/publicise_views.py b/webapp/publisher/snaps/publicise_views.py
index 4ecab2ae20..8f1150090b 100644
--- a/webapp/publisher/snaps/publicise_views.py
+++ b/webapp/publisher/snaps/publicise_views.py
@@ -4,6 +4,7 @@
     SnapStore,
     SnapPublisher,
 )
+from canonicalwebteam.store_api.exceptions import StoreApiError
 
 # Local
 from webapp.helpers import api_publisher_session
@@ -17,13 +18,21 @@
 def get_publicise_data(snap_name):
 
     snap_details = publisher_api.get_snap_info(snap_name, flask.session)
-    snap_public_details = store_api.get_item_details(snap_name, api_version=2)
+
+    try:
+        snap_public_details = store_api.get_item_details(
+            snap_name, api_version=2
+        )
+        trending = snap_public_details["snap"]["trending"]
+    except StoreApiError:
+        trending = False
 
     is_released = len(snap_details["channel_maps_list"]) > 0
 
+    print(snap_details)
     context = {
         "is_released": is_released,
-        "trending": snap_public_details["snap"]["trending"],
+        "trending": trending,
         "private": snap_details["private"],
     }
 
@@ -32,10 +41,4 @@ def get_publicise_data(snap_name):
 
 @login_required
 def get_publicise(snap_name):
-
-    snap_details = publisher_api.get_snap_info(snap_name, flask.session)
-
-    if snap_details["private"]:
-        return flask.abort(404, "No snap named {}".format(snap_name))
-
     return flask.render_template("store/publisher.html", snap_name=snap_name)

From 655bc4cb784c0a08d670b0b26ab913c87a681544 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Fri, 22 Nov 2024 10:32:02 +0000
Subject: [PATCH 14/24] Rebase

---
 .../components/App/__tests__/App.test.tsx     | 150 ------------------
 static/js/publisher/listing/index.tsx         |  18 ---
 .../activeDevicesGraph/dataProcessing.ts      |  16 +-
 .../graphs/activeDevicesGraph/index.ts        |   4 +-
 .../graphs/activeDevicesGraph/tooltips.ts     |  10 +-
 static/js/publisher/metrics/metrics.ts        |  65 ++++----
 static/js/publisher/release.tsx               |  61 -------
 .../__tests__/UnregisterSnapModal.test.tsx    | 108 -------------
 .../settings/types/SettingsData.d.ts          |  21 ---
 9 files changed, 53 insertions(+), 400 deletions(-)
 delete mode 100644 static/js/publisher/listing/components/App/__tests__/App.test.tsx
 delete mode 100644 static/js/publisher/listing/index.tsx
 delete mode 100644 static/js/publisher/release.tsx
 delete mode 100644 static/js/publisher/settings/components/App/__tests__/UnregisterSnapModal.test.tsx
 delete mode 100644 static/js/publisher/settings/types/SettingsData.d.ts

diff --git a/static/js/publisher/listing/components/App/__tests__/App.test.tsx b/static/js/publisher/listing/components/App/__tests__/App.test.tsx
deleted file mode 100644
index 6804992fd7..0000000000
--- a/static/js/publisher/listing/components/App/__tests__/App.test.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { BrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider, useQuery } from "react-query";
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import App from "../App";
-
-import { mockData } from "../../../test-utils";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  },
-});
-
-jest.mock("react-query", () => ({
-  ...jest.requireActual("react-query"),
-  useQuery: jest.fn(),
-}));
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({
-    snapName: "test-snap",
-  }),
-}));
-
-const renderComponent = () => {
-  return render(
-    <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
-        <App />
-      </QueryClientProvider>
-    </BrowserRouter>,
-  );
-};
-
-describe("App", () => {
-  test("renders page header", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: true,
-      data: undefined,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", { level: 1, name: "test-snap" }),
-    ).toBeInTheDocument();
-  });
-
-  test("renders loading state", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: true,
-      data: undefined,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByText(/Loading test-snap listing data/),
-    ).toBeInTheDocument();
-  });
-
-  test("renders listing details section", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: false,
-      data: mockData,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", { level: 2, name: "Listing details" }),
-    ).toBeInTheDocument();
-  });
-
-  test("renders contact section", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: false,
-      data: mockData,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", { level: 2, name: "Contact information" }),
-    ).toBeInTheDocument();
-  });
-
-  test("renders additional information section", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: false,
-      data: mockData,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", { level: 2, name: "Additional information" }),
-    ).toBeInTheDocument();
-  });
-
-  test("shows 'Update metadata' notification", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: false,
-      data: { ...mockData, update_metadata_on_release: true },
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.getByText(
-        /Information here was automatically updated to the latest version of the snapcraft.yaml released to the stable channel/,
-      ),
-    ).toBeInTheDocument();
-  });
-
-  test("doesn't show 'Update metadata' nofitication", () => {
-    // @ts-ignore
-    useQuery.mockReturnValue({
-      isLoading: false,
-      data: mockData,
-      refetch: jest.fn(),
-    });
-
-    renderComponent();
-
-    expect(
-      screen.queryByText(
-        /Information here was automatically updated to the latest version of the snapcraft.yaml released to the stable channel/,
-      ),
-    ).not.toBeInTheDocument();
-  });
-});
diff --git a/static/js/publisher/listing/index.tsx b/static/js/publisher/listing/index.tsx
deleted file mode 100644
index 0565ad1617..0000000000
--- a/static/js/publisher/listing/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
-import App from "./components/App";
-
-const queryClient = new QueryClient();
-
-const container = document.getElementById("main-content");
-const root = createRoot(container as HTMLElement);
-root.render(
-  <Router>
-    <QueryClientProvider client={queryClient}>
-      <Routes>
-        <Route path="/:snapName/listing" element={<App />} />
-      </Routes>
-    </QueryClientProvider>
-  </Router>,
-);
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts b/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts
index 8354cf9b4b..b245b92ed9 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts
+++ b/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts
@@ -18,7 +18,7 @@ function prepareStackedData(this: any) {
   };
 
   this.rawData.buckets.forEach((bucket: any, i: number) => {
-    const obj: {
+    let obj: {
       [key: string]: any;
     } = {
       date: utcParse("%Y-%m-%d")(bucket),
@@ -30,7 +30,7 @@ function prepareStackedData(this: any) {
         if (_keys.indexOf(series.name) < 0) {
           _keys.push(series.name);
         }
-      },
+      }
     );
 
     _data.push(obj);
@@ -74,7 +74,7 @@ function prepareLineData(this: any) {
         });
       });
       data.push(obj);
-    },
+    }
   );
 
   this.rawData.buckets.forEach((bucket: any, i: number) => {
@@ -97,7 +97,7 @@ function prepareLineData(this: any) {
     (acc: Array<any>, current: { values: Array<number> }) => {
       return acc.concat(current.values);
     },
-    [],
+    []
   );
 
   this.data = _data;
@@ -141,7 +141,7 @@ function prepareAnnotationsData(this: any) {
   let annotationsData: Array<any>;
   annotationsData = [];
   this.options.annotations.buckets.forEach((bucket: any, i: number) => {
-    const obj: {
+    let obj: {
       [key: string]: any;
     } = {
       date: utcParse("%Y-%m-%d")(bucket),
@@ -153,7 +153,7 @@ function prepareAnnotationsData(this: any) {
         if (this.keys.indexOf(series.name) < 0) {
           this.keys.push(series.name);
         }
-      },
+      }
     );
 
     annotationsData.push(obj);
@@ -168,7 +168,7 @@ function prepareAnnotationsData(this: any) {
   if (annotationsData) {
     annotationsData = annotationsData
       .map((annotation) => {
-        const x = this.xScale(annotation.date);
+        let x = this.xScale(annotation.date);
 
         if (x < 0 + this.padding.left) {
           return false;
@@ -221,7 +221,7 @@ function prepareAxis(this: any) {
   this.xAxis = axisBottom(this.xScale).tickValues(tickValues).tickPadding(16);
 
   this.yAxis = axisLeft(this.yScale).tickFormat((d) =>
-    d === 0 ? "0" : this.shortValue(d),
+    d === 0 ? "0" : this.shortValue(d)
   );
 }
 
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts b/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
index bb122a7bfb..a2091bee4d 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
+++ b/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
@@ -37,7 +37,7 @@ class ActiveDevicesGraph {
         bottom: 30,
         left: 50,
       },
-      options.margin || {},
+      options.margin || {}
     );
 
     this.padding = Object.assign(
@@ -47,7 +47,7 @@ class ActiveDevicesGraph {
         bottom: 16,
         left: 16,
       },
-      options.padding || {},
+      options.padding || {}
     );
 
     this.width;
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts b/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts
index 9ede7304de..dcba03d48b 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts
+++ b/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts
@@ -13,16 +13,16 @@ export function tooltips(this: any) {
   const tooltipTemplate = (dateData: { date: Date }, currentHoverKey: any) => {
     const tooltipRows = (
       dateData: { [x: string]: any; date?: Date },
-      currentHoverKey: string,
+      currentHoverKey: string
     ) => {
-      const dataArr: {
+      let dataArr: {
         skip?: boolean;
         key: any;
         value: any;
         count: any;
       }[] = [];
       let total = 0;
-      const other = {
+      let other = {
         key: "other",
         value: 0,
         count: 0,
@@ -85,7 +85,7 @@ export function tooltips(this: any) {
               `<span class="snapcraft-graph-tooltip__series-name">${item.key}</span>`,
               `</span>`,
               `<span class="snapcraft-graph-tooltip__series-value">${commaValue(
-                item.value,
+                item.value
               )} (${total !== 0 ? ((item.value / total) * 100).toFixed(2) : 0}%)</span>`,
               `</span>`,
             ].join("");
@@ -100,7 +100,7 @@ export function tooltips(this: any) {
       `<div class="p-tooltip p-tooltip--top-center" style="display: block; pointer-events: none;">`,
       `<span class="p-tooltip__message" role="tooltip" style="display: block;">`,
       `<span class="snapcraft-graph-tooltip__title">${tooltipTimeFormat(
-        dateData.date,
+        dateData.date
       )}</span>`,
       tooltipRows(dateData, currentHoverKey),
       `</span>`,
diff --git a/static/js/publisher/metrics/metrics.ts b/static/js/publisher/metrics/metrics.ts
index ed8b559aa9..7174beac8f 100644
--- a/static/js/publisher/metrics/metrics.ts
+++ b/static/js/publisher/metrics/metrics.ts
@@ -16,8 +16,21 @@ type ActiveDeviceMetric = {
   type: string;
 };
 
-function renderMetrics(metrics: Metrics) {
-  const activeDevices: {
+type TerritoriesMetric = {
+  metrics: {
+    [key: string]: {
+      code: string;
+      color_rgb: string;
+      name: string;
+      number_of_users: number;
+      percentage_of_users: number;
+    };
+  };
+  selector: string;
+};
+
+function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
+  let activeDevices: {
     series: Array<Series>;
     buckets: Array<string>;
   } = {
@@ -25,8 +38,8 @@ function renderMetrics(metrics: Metrics) {
     buckets: metrics.metrics.buckets,
   };
 
-  metrics.activeDevices.metrics.series.forEach((series) => {
-    const fullSeries = series.values.map((value) => {
+  metrics.metrics.series.forEach((series) => {
+    let fullSeries = series.values.map((value) => {
       return value === null ? 0 : value;
     });
     activeDevices.series.push({
@@ -35,17 +48,11 @@ function renderMetrics(metrics: Metrics) {
     });
   });
 
-  const graph = new ActiveDevicesGraph(
-    metrics.activeDevices.selector,
-    activeDevices,
-    {
-      stacked: true,
-      area: true,
-      graphType: metrics.activeDevices.type,
-      defaultTrack: metrics.defaultTrack,
-      annotations: metrics.activeDevices.annotations,
-    },
-  )
+  const graph = new ActiveDevicesGraph(metrics.selector, activeDevices, {
+    stacked: true,
+    area: true,
+    graphType: metrics.type,
+  })
     .render()
     // @ts-ignore
     .enableTooltip()
@@ -57,7 +64,7 @@ function renderMetrics(metrics: Metrics) {
     categories.addEventListener("mouseover", (e) => {
       const target = e.target as HTMLElement;
       const annotationHover = target.closest(
-        `[data-js="annotation-hover"]`,
+        `[data-js="annotation-hover"]`
       ) as HTMLElement;
       if (annotationHover) {
         const category = annotationHover.dataset.id;
@@ -68,7 +75,7 @@ function renderMetrics(metrics: Metrics) {
     categories.addEventListener("mouseout", (e) => {
       const target = e.target as HTMLElement;
       const annotationHover = target.closest(
-        `[data-js="annotation-hover"]`,
+        `[data-js="annotation-hover"]`
       ) as HTMLElement;
       if (annotationHover) {
         const category = annotationHover.dataset.id;
@@ -101,11 +108,11 @@ function renderPublisherMetrics(options: {
     {
       stacked: false,
       area: false,
-    },
+    }
   );
 
   const loader = document.querySelector(
-    ".snapcraft-metrics__loader",
+    ".snapcraft-metrics__loader"
   ) as HTMLElement;
 
   function getSnapDevices(snapList: any) {
@@ -137,10 +144,10 @@ function renderPublisherMetrics(options: {
           json.snaps.forEach(
             (snap: { series: Array<Series>; name: string }) => {
               const continuedDevices = snap.series.filter(
-                (singleSeries) => singleSeries.name === "continued",
+                (singleSeries) => singleSeries.name === "continued"
               )[0];
               const newDevices = snap.series.filter(
-                (singleSeries) => singleSeries.name === "new",
+                (singleSeries) => singleSeries.name === "new"
               )[0];
 
               let totalSeries: Array<number> = [];
@@ -149,12 +156,12 @@ function renderPublisherMetrics(options: {
                 totalSeries = continuedDevices.values.map(
                   (continuedValue, index) => {
                     return continuedValue + newDevices.values[index];
-                  },
+                  }
                 );
               } else {
                 console.log(
                   "There is no information available for continued or new devices.",
-                  snap.series,
+                  snap.series
                 );
               }
 
@@ -162,7 +169,7 @@ function renderPublisherMetrics(options: {
                 name: snap.name,
                 values: totalSeries,
               });
-            },
+            }
           );
 
           resolve(snaps);
@@ -172,7 +179,7 @@ function renderPublisherMetrics(options: {
   }
 
   const snaps_arr: Array<{ name: string; id: string }> = Object.keys(
-    options.snaps,
+    options.snaps
   ).map((key) => {
     return {
       name: key,
@@ -206,7 +213,7 @@ function renderPublisherMetrics(options: {
         _graph.rawData.buckets.length === 0
       ) {
         const dashboardMetrics = document.querySelector(
-          `[data-js="dashboard-metrics"]`,
+          `[data-js="dashboard-metrics"]`
         ) as HTMLElement;
 
         dashboardMetrics.classList.add("u-hide");
@@ -247,4 +254,8 @@ function renderPublisherMetrics(options: {
   getChunk(chunkedSnaps);
 }
 
-export { renderPublisherMetrics, renderTerritoriesMetrics };
+export {
+  renderActiveDevicesMetrics,
+  renderPublisherMetrics,
+  renderTerritoriesMetrics,
+};
diff --git a/static/js/publisher/release.tsx b/static/js/publisher/release.tsx
deleted file mode 100644
index d19fa1e733..0000000000
--- a/static/js/publisher/release.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { createStore, applyMiddleware, compose } from "redux";
-import thunk from "redux-thunk";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { Provider } from "react-redux";
-import { DndProvider } from "react-dnd";
-import { QueryClient, QueryClientProvider } from "react-query";
-import ReleasesController from "./release/releasesController";
-import releases from "./release/reducers";
-import { ReleasesData, ChannelMap, Track, Options } from "./types/releaseTypes";
-
-// setup redux store with thunk middleware and devtools extension:
-// https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
-const initReleases = (
-  id: string,
-  snapName: string,
-  releasesData: ReleasesData,
-  channelMap: ChannelMap[],
-  tracks: Track[],
-  options: Options,
-): void => {
-  const store = createStore(
-    releases,
-    {
-      currentTrack: options.defaultTrack || "latest",
-      defaultTrack: options.defaultTrack,
-      options: {
-        ...options,
-        // @ts-expect-error
-        snapName,
-        tracks,
-      },
-    },
-    composeEnhancers(applyMiddleware(thunk)),
-  );
-
-  const queryClient = new QueryClient();
-
-  const container = document.querySelector(id);
-  if (!container) throw new Error(`Container with id ${id} not found`);
-  const root = createRoot(container);
-  root.render(
-    <Provider store={store}>
-      <DndProvider backend={HTML5Backend}>
-        <QueryClientProvider client={queryClient}>
-          <ReleasesController
-            snapName={snapName}
-            releasesData={releasesData}
-            channelMap={channelMap}
-            // @ts-expect-error
-            options={options}
-          />
-        </QueryClientProvider>
-      </DndProvider>
-    </Provider>,
-  );
-};
-
-export { initReleases };
diff --git a/static/js/publisher/settings/components/App/__tests__/UnregisterSnapModal.test.tsx b/static/js/publisher/settings/components/App/__tests__/UnregisterSnapModal.test.tsx
deleted file mode 100644
index 08085fee9d..0000000000
--- a/static/js/publisher/settings/components/App/__tests__/UnregisterSnapModal.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-import { UnregisterSnapModal } from "../../UnregisterSnapModal";
-
-// Mock the global fetch function
-global.fetch = jest.fn(() =>
-  Promise.resolve({
-    ok: true,
-    json: () => Promise.resolve({}),
-  }),
-) as jest.Mock;
-
-const mockSetUnregisterModalOpen = jest.fn();
-const mockSetUnregisterError = jest.fn();
-const mockSetUnregisterErrorMessage = jest.fn();
-
-const defaultProps = {
-  snapName: "test-snap",
-  setUnregisterModalOpen: mockSetUnregisterModalOpen,
-  setUnregisterError: mockSetUnregisterError,
-  setUnregisterErrorMessage: mockSetUnregisterErrorMessage,
-};
-
-describe("UnregisterSnapModal", () => {
-  beforeEach(() => {
-    (global.fetch as jest.Mock).mockClear();
-    mockSetUnregisterModalOpen.mockClear();
-    mockSetUnregisterError.mockClear();
-    mockSetUnregisterErrorMessage.mockClear();
-  });
-
-  test("renders the modal with the correct snap name", () => {
-    render(<UnregisterSnapModal {...defaultProps} />);
-    expect(screen.getByText('Unregister "test-snap"')).toBeInTheDocument();
-  });
-
-  test("closes the modal when Cancel button is clicked", async () => {
-    const user = userEvent.setup();
-    render(<UnregisterSnapModal {...defaultProps} />);
-    await user.click(screen.getByText("Cancel"));
-    expect(mockSetUnregisterModalOpen).toHaveBeenCalledWith(false);
-  });
-
-  test("disables the Unregister button and shows spinner when clicked", async () => {
-    const user = userEvent.setup();
-    render(<UnregisterSnapModal {...defaultProps} />);
-    const unregisterButton = screen.getByText("Unregister");
-    await user.click(unregisterButton);
-    expect(unregisterButton).toHaveAttribute("aria-disabled", "true");
-    expect(screen.getByText("Unregistering...")).toBeInTheDocument();
-  });
-
-  test("calls fetch with correct parameters and redirects on success", async () => {
-    const user = userEvent.setup();
-    Object.defineProperty(window, "location", {
-      value: { href: "" },
-      writable: true,
-    });
-    render(<UnregisterSnapModal {...defaultProps} />);
-    await user.click(screen.getByText("Unregister"));
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        "/packages/test-snap",
-        expect.objectContaining({
-          method: "DELETE",
-          headers: {
-            "X-CSRFToken": window["CSRF_TOKEN"],
-          },
-        }),
-      );
-      expect(window.location.href).toBe("/snaps");
-    });
-  });
-
-  test("handles errors correctly", async () => {
-    const user = userEvent.setup();
-    (global.fetch as jest.Mock).mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: false,
-        json: () => Promise.resolve({ error: "Some error occurred" }),
-      }),
-    );
-    render(<UnregisterSnapModal {...defaultProps} />);
-    await user.click(screen.getByText("Unregister"));
-    await waitFor(() => {
-      expect(mockSetUnregisterModalOpen).toHaveBeenCalledWith(false);
-      expect(mockSetUnregisterError).toHaveBeenCalledWith(true);
-      expect(mockSetUnregisterErrorMessage).toHaveBeenCalledWith(
-        "Some error occurred",
-      );
-    });
-  });
-
-  test("logs error to console if fetch throws", async () => {
-    const user = userEvent.setup();
-    console.error = jest.fn();
-    (global.fetch as jest.Mock).mockImplementationOnce(() =>
-      Promise.reject("Fetch error"),
-    );
-    render(<UnregisterSnapModal {...defaultProps} />);
-    await user.click(screen.getByText("Unregister"));
-    await waitFor(() => {
-      expect(console.error).toHaveBeenCalledWith("Fetch error");
-    });
-  });
-});
diff --git a/static/js/publisher/settings/types/SettingsData.d.ts b/static/js/publisher/settings/types/SettingsData.d.ts
deleted file mode 100644
index 5a2f6a1c0a..0000000000
--- a/static/js/publisher/settings/types/SettingsData.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-type SettingsData = {
-  snap_title: string;
-  publisher_name: string;
-  snap_name: string;
-  snap_id: string;
-  store: string;
-  status: string;
-  update_metadata_on_release: boolean;
-  private: boolean;
-  unlisted: boolean;
-  visibility: string;
-  whitelist_countries: Array<string>;
-  blacklist_countries: Array<string>;
-  territory_distribution_status: string;
-  whitelist_country_keys: string;
-  blacklist_country_keys: string;
-  country_keys_status: string | null;
-  visibility_locked: boolean;
-};
-
-export type { SettingsData };

From 2c77db4907d5f6bfe7f39eed977ffd963b973095 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Mon, 25 Nov 2024 15:13:15 +0000
Subject: [PATCH 15/24] fix: Fix issues with tour styles (#4916)

---
 package.json                                  |   1 +
 .../publisher-pages/components/Tour/Tour.tsx  |  70 ++++++++++++
 .../components/Tour/TourStep.tsx              |  74 +++++++++++++
 .../publisher-pages/components/Tour/index.ts  |   1 +
 .../Listing/ListingDetails/ImageUpload.tsx    |   6 +-
 .../Listing/ListingDetails/ListingDetails.tsx |  21 ++--
 .../Listing/ListingDetails/Screenshots.tsx    |   9 +-
 .../pages/Listing/ListingForm/ListingForm.tsx |  31 +-----
 static/js/publisher-pages/utils/index.ts      |   2 +
 .../utils/listingTourSteps.tsx                | 103 ++++++++++++++++++
 yarn.lock                                     |  96 +++++++++++++++-
 11 files changed, 369 insertions(+), 45 deletions(-)
 create mode 100644 static/js/publisher-pages/components/Tour/Tour.tsx
 create mode 100644 static/js/publisher-pages/components/Tour/TourStep.tsx
 create mode 100644 static/js/publisher-pages/components/Tour/index.ts
 create mode 100644 static/js/publisher-pages/utils/listingTourSteps.tsx

diff --git a/package.json b/package.json
index cf3476bcc3..8bc8b4bd2f 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
     "react-hook-form": "7.53.0",
+    "react-joyride": "2.9.3",
     "react-query": "3.39.3",
     "react-redux": "8.1.3",
     "react-router-dom": "6.21.1",
diff --git a/static/js/publisher-pages/components/Tour/Tour.tsx b/static/js/publisher-pages/components/Tour/Tour.tsx
new file mode 100644
index 0000000000..843345b08a
--- /dev/null
+++ b/static/js/publisher-pages/components/Tour/Tour.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+import Joyride, { CallBackProps, STATUS } from "react-joyride";
+import { Button, Icon } from "@canonical/react-components";
+
+import TourStep from "./TourStep";
+
+type Props = {
+  steps: {
+    target: string;
+    title: string;
+    content: JSX.Element;
+    disableBeacon?: boolean;
+  }[];
+};
+function Tour({ steps }: Props) {
+  const firstVisit = !localStorage.getItem("tourSeen");
+  const [run, setRun] = useState<boolean>(firstVisit);
+
+  const handleClickStart = () => {
+    setRun(true);
+  };
+
+  if (firstVisit) {
+    localStorage.setItem("tourSeen", "true");
+  }
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status, action } = data;
+
+    if (action === "close") {
+      setRun(false);
+    }
+
+    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+
+    if (finishedStatuses.includes(status)) {
+      setRun(false);
+    }
+  };
+  return (
+    <>
+      <Button
+        type="button"
+        onClick={handleClickStart}
+        style={{
+          position: "fixed",
+          bottom: "1rem",
+          right: "2rem",
+          zIndex: 100,
+        }}
+      >
+        <Icon name="question" />
+        <span className="u-off-screen">Start tour</span>
+      </Button>
+      <Joyride
+        run={run}
+        callback={handleJoyrideCallback}
+        tooltipComponent={TourStep}
+        continuous={true}
+        disableCloseOnEsc={true}
+        disableOverlayClose={true}
+        scrollOffset={80}
+        showProgress={true}
+        steps={steps}
+      />
+    </>
+  );
+}
+
+export default Tour;
diff --git a/static/js/publisher-pages/components/Tour/TourStep.tsx b/static/js/publisher-pages/components/Tour/TourStep.tsx
new file mode 100644
index 0000000000..1e06de6c4b
--- /dev/null
+++ b/static/js/publisher-pages/components/Tour/TourStep.tsx
@@ -0,0 +1,74 @@
+import { TooltipRenderProps } from "react-joyride";
+import { Card, Button, Icon } from "@canonical/react-components";
+
+function TourStep(props: TooltipRenderProps) {
+  const {
+    backProps,
+    closeProps,
+    continuous,
+    index,
+    primaryProps,
+    step,
+    isLastStep,
+    size,
+  } = props;
+
+  return (
+    <Card style={{ border: "none" }}>
+      <h4>{step.title}</h4>
+      {step.content}
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <div>
+          Done?{" "}
+          <button
+            className="p-button--link u-no-margin--bottom"
+            {...closeProps}
+          >
+            Skip tour
+          </button>
+          .
+        </div>
+        <div>
+          <span>
+            {index + 1} / {size}
+          </span>
+
+          <Button
+            {...backProps}
+            disabled={index < 1}
+            className="u-no-margin--bottom"
+            style={{ marginLeft: "1rem" }}
+          >
+            <Icon name="chevron-up" style={{ transform: "rotate(90deg)" }} />
+            <span className="u-off-screen">{backProps.title}</span>
+          </Button>
+
+          {continuous && (
+            <>
+              <Button
+                appearance="positive"
+                {...primaryProps}
+                className="u-no-margin--bottom u-no-margin--right"
+              >
+                {isLastStep ? (
+                  <>Finish tour</>
+                ) : (
+                  <>
+                    <Icon
+                      name="chevron-up"
+                      light
+                      style={{ transform: "rotate(-90deg)" }}
+                    />
+                    <span className="u-off-screen">{primaryProps.title}</span>
+                  </>
+                )}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default TourStep;
diff --git a/static/js/publisher-pages/components/Tour/index.ts b/static/js/publisher-pages/components/Tour/index.ts
new file mode 100644
index 0000000000..7846786bd4
--- /dev/null
+++ b/static/js/publisher-pages/components/Tour/index.ts
@@ -0,0 +1 @@
+export { default } from "./Tour";
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
index a33010bfa8..366ca73f06 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
@@ -136,8 +136,8 @@ function ImageUpload({
   };
 
   return (
-    <Row className="p-form__group p-form__group--top">
-      <Col size={2} data-tour={tourLabel}>
+    <Row className="p-form__group p-form__group--top" data-tour={tourLabel}>
+      <Col size={2}>
         <label htmlFor={fieldId} className="p-form__label">
           {label}:
         </label>
@@ -149,7 +149,7 @@ function ImageUpload({
 
         <input type="hidden" {...register(imageUrlFieldKey)} />
         <div style={hasDarkThemePreview ? darkThemeStyles : {}}>
-          <div className="snap-image-upload-container" data-tour={tourLabel}>
+          <div className="snap-image-upload-container">
             <div
               className={`snap-image-upload-drop-area ${
                 isDragging ? "is-dragging" : ""
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
index 9a39e99bed..8fd9118eee 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
@@ -73,14 +73,14 @@ function ListingDetails({
         hasDarkThemePreview={true}
       />
 
-      <Row className="p-form__group">
-        <Col size={2} data-tour="listing-title">
+      <Row className="p-form__group" data-tour="listing-title">
+        <Col size={2}>
           <label htmlFor="title" className="p-form__label">
             Title:
           </label>
         </Col>
         <Col size={8}>
-          <div className="p-form__control" data-tour="listing-title">
+          <div className="p-form__control">
             <input
               type="text"
               id="title"
@@ -91,14 +91,14 @@ function ListingDetails({
         </Col>
       </Row>
 
-      <Row className="p-form__group">
-        <Col size={2} data-tour="listing-category">
+      <Row className="p-form__group" data-tour="listing-category">
+        <Col size={2}>
           <label htmlFor="primary_category" className="p-form__label">
             Category:
           </label>
         </Col>
         <Col size={5}>
-          <div className="p-form__control" data-tour="listing-category">
+          <div className="p-form__control">
             <select
               id="primary_category"
               defaultValue={data.primary_category}
@@ -191,7 +191,7 @@ function ListingDetails({
           <label htmlFor="video_urls">Video:</label>
         </Col>
         <Col size={8}>
-          <div className="p-form__control" data-tour="listing-video">
+          <div className="p-form__control">
             <input
               type="url"
               id="video_urls"
@@ -235,12 +235,12 @@ function ListingDetails({
         tourLabel="listing-banner"
       />
 
-      <Row className="p-form__group">
-        <Col size={2} data-tour="listing-summary">
+      <Row className="p-form__group" data-tour="listing-summary">
+        <Col size={2}>
           <label htmlFor="video_urls">Summary:</label>
         </Col>
         <Col size={8}>
-          <div className="p-form__control" data-tour="listing-summary">
+          <div className="p-form__control">
             <input
               type="text"
               id="summary"
@@ -258,7 +258,6 @@ function ListingDetails({
         <Col size={8}>
           <div className="p-form__control">
             <textarea
-              data-tour="listing-description"
               id="description"
               defaultValue={data.description}
               rows={10}
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
index 8db14214a7..7fbe246c3a 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
@@ -79,13 +79,16 @@ function Screenshots({ register, control, getValues, setValue }: Props) {
   };
 
   return (
-    <Row className="p-form__group p-form__group--top">
-      <Col size={2} data-tour="listing-images">
+    <Row
+      className="p-form__group p-form__group--top"
+      data-tour="listing-images"
+    >
+      <Col size={2}>
         <label htmlFor={fieldId} className="p-form__label">
           Images:
         </label>
       </Col>
-      <Col size={8} data-tour="listing-images">
+      <Col size={8}>
         {!imageIsValid && (
           <Notification severity="negative">{imageVaidationError}</Notification>
         )}
diff --git a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
index 90e3051d3c..6048925d4a 100644
--- a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useForm, useFormState, FieldValues } from "react-hook-form";
 import { Strip, Notification } from "@canonical/react-components";
@@ -9,12 +9,13 @@ import ContactInformation from "../ContactInformation";
 import AdditionalInformation from "../AdditionalInformation";
 import PreviewForm from "../PreviewForm";
 import UpdateMetadataModal from "../../../components/UpdateMetadataModal";
+import Tour from "../../../components/Tour";
 
 import {
   shouldShowUpdateMetadataWarning,
   getDefaultListingData,
+  listingTourSteps,
 } from "../../../utils";
-import { initListingTour } from "../../../../publisher/tour";
 
 import { useMutateListingData } from "../../../hooks";
 
@@ -69,30 +70,6 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
     snapName: snapId,
   });
 
-  useEffect(() => {
-    const tourContainer = document.getElementById(
-      "tour-container",
-    ) as HTMLElement;
-
-    if (snapId) {
-      initListingTour({
-        snapName: snapId,
-        container: tourContainer,
-        formFields: {
-          title: data.title,
-          snap_name: snapId,
-          categories: [],
-          video_urls: [],
-          images: [],
-          summary: data.summary,
-          website: [],
-          contact: [],
-        },
-        steps: data.tour_steps,
-      });
-    }
-  }, []);
-
   return (
     <>
       <form
@@ -109,6 +86,7 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
           }
         })}
       >
+        <Tour steps={listingTourSteps} />
         <SaveAndPreview
           snapName={snapId || ""}
           isDirty={formState.isDirty}
@@ -199,7 +177,6 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
         </Strip>
       </form>
       {snapId && <PreviewForm snapName={snapId} getValues={getValues} />}
-      <div id="tour-container" />
     </>
   );
 }
diff --git a/static/js/publisher-pages/utils/index.ts b/static/js/publisher-pages/utils/index.ts
index 6831b29c2a..60637ad435 100644
--- a/static/js/publisher-pages/utils/index.ts
+++ b/static/js/publisher-pages/utils/index.ts
@@ -7,6 +7,7 @@ import getDefaultListingData from "./getDefaultListingData";
 import shouldShowUpdateMetadataWarning from "./shouldShowUpdateMetadataWarning";
 import validateImageDimensions from "./validateImageDimensions";
 import addDateToFilename from "./addDateToFilename";
+import listingTourSteps from "./listingTourSteps";
 
 export {
   getSettingsData,
@@ -18,4 +19,5 @@ export {
   shouldShowUpdateMetadataWarning,
   validateImageDimensions,
   addDateToFilename,
+  listingTourSteps,
 };
diff --git a/static/js/publisher-pages/utils/listingTourSteps.tsx b/static/js/publisher-pages/utils/listingTourSteps.tsx
new file mode 100644
index 0000000000..9864f3e156
--- /dev/null
+++ b/static/js/publisher-pages/utils/listingTourSteps.tsx
@@ -0,0 +1,103 @@
+export default [
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-icon']",
+    title: "Icons attract eyes…",
+    content: (
+      <p>
+        Including an icon will help your snap to stand out making it far more
+        attractive to users browsing graphical interfaces such as
+        snapcraft.io/store and the Snap Store.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-title']",
+    title: "Title your snap",
+    content: (
+      <>
+        <p>
+          Adding a meaningful title to your snap listing will help people
+          understand what the purpose of your snap is.
+        </p>
+        <p>
+          It's best to use something that aligns with your brand and looks
+          clean. This is your opportunity to replace punctuation with spaces and
+          capitalise.
+        </p>
+      </>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-category']",
+    title: "Set your snap category",
+    content: (
+      <p>
+        Categories are used to define the kind of application you have
+        published. Categorising your snap will aid findability within the Store
+        and increase exposure to end users.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-video']",
+    title: "Showcase your application with a video",
+    content: (
+      <p>
+        Allow potential users get a better understanding of features and
+        functionality prior to installation. Snaps that utilise a video tend to
+        have a higher number of installs and better user retention.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-images']",
+    title: "Celebrate key features with images",
+    content: (
+      <p>
+        Explain your application visually and allow users to see what they will
+        get prior to installation. Data shows that snaps with images tend to
+        have a bigger install base.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-banner']",
+    title: "Get featured, get installed!",
+    content: (
+      <p>
+        Adding a banner will increase your chances of being featured on
+        snapcraft.io and in GNOME software.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-summary']",
+    title: "Summarise your application",
+    content: (
+      <p>
+        Having a relevant and descriptive summary will allow users to get a
+        quick insight into what your snap does. This should mean that you have
+        more target users clicking through to your listing page.
+      </p>
+    ),
+  },
+  {
+    disableBeacon: true,
+    target: "[data-tour='listing-description']",
+    title: "Get into the details with your description",
+    content: (
+      <p>
+        Providing a detailed description allows your users to understand the
+        core functionality of your snap. It’s especially useful if it doesn’t
+        have a user interface or if you don’t have any media assets to upload.
+      </p>
+    ),
+  },
+];
diff --git a/yarn.lock b/yarn.lock
index 4fef402787..a0e497af9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1188,6 +1188,16 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
+"@gilbarbara/deep-equal@^0.1.1":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz#1a106721368dba5e7e9fb7e9a3a6f9efbd8df36d"
+  integrity sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==
+
+"@gilbarbara/deep-equal@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz#9c72ed0b2e6f8edb1580217e28d78b5b03ad4aee"
+  integrity sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -3833,6 +3843,11 @@ dedent@^1.0.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
   integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
 
+deep-diff@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
+  integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==
+
 deep-equal@^2.0.5:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
@@ -3867,7 +3882,7 @@ deepmerge@^2.1.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
-deepmerge@^4.2.2:
+deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -5201,6 +5216,16 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-lite@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.8.2.tgz#26ab98b32aae8cc8b226593b9a641d2bf4bd3b6a"
+  integrity sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==
+
+is-lite@^1.2.0, is-lite@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-1.2.1.tgz#401f30bfccd34cb8cc1283f958907c97859d8f25"
+  integrity sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw==
+
 is-map@^2.0.2, is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
@@ -6549,6 +6574,11 @@ polylabel@1.1.0:
   dependencies:
     tinyqueue "^2.0.3"
 
+popper.js@^1.16.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -6829,11 +6859,27 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-floater@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.7.9.tgz#b15a652e817f200bfa42a2023ee8d3105803b968"
+  integrity sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==
+  dependencies:
+    deepmerge "^4.3.1"
+    is-lite "^0.8.2"
+    popper.js "^1.16.0"
+    prop-types "^15.8.1"
+    tree-changes "^0.9.1"
+
 react-hook-form@7.53.0:
   version "7.53.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
   integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
+react-innertext@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
+  integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -6849,6 +6895,23 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-joyride@2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/react-joyride/-/react-joyride-2.9.3.tgz#97633aa78dfe70b16b45fafa59ce2ee06b14c78f"
+  integrity sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==
+  dependencies:
+    "@gilbarbara/deep-equal" "^0.3.1"
+    deep-diff "^1.0.2"
+    deepmerge "^4.3.1"
+    is-lite "^1.2.1"
+    react-floater "^0.7.9"
+    react-innertext "^1.1.5"
+    react-is "^16.13.1"
+    scroll "^3.0.1"
+    scrollparent "^2.1.0"
+    tree-changes "^0.11.2"
+    type-fest "^4.27.0"
+
 react-query@3.39.3:
   version "3.39.3"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
@@ -7224,6 +7287,16 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.1.0"
 
+scroll@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scroll/-/scroll-3.0.1.tgz#d5afb59fb3592ee3df31c89743e78b39e4cd8a26"
+  integrity sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==
+
+scrollparent@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.1.0.tgz#6cae915c953835886a6ba0d77fdc2bb1ed09076d"
+  integrity sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==
+
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
@@ -7773,6 +7846,22 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
+tree-changes@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.11.2.tgz#e02e65c4faae6230dfe357aa97a26e8eb7c7d321"
+  integrity sha512-4gXlUthrl+RabZw6lLvcCDl6KfJOCmrC16BC5CRdut1EAH509Omgg0BfKLY+ViRlzrvYOTWR0FMS2SQTwzumrw==
+  dependencies:
+    "@gilbarbara/deep-equal" "^0.3.1"
+    is-lite "^1.2.0"
+
+tree-changes@^0.9.1:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.9.3.tgz#89433ab3b4250c2910d386be1f83912b7144efcc"
+  integrity sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==
+  dependencies:
+    "@gilbarbara/deep-equal" "^0.1.1"
+    is-lite "^0.8.2"
+
 tree-kill@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -7847,6 +7936,11 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^4.27.0:
+  version "4.27.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.27.0.tgz#57329aae32e7b27b942b961e3ef861f0873c4b1b"
+  integrity sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==
+
 typed-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"

From e2a1395c3eb88083e8157d173383b6edee2bdeed Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Wed, 4 Dec 2024 18:13:16 +0000
Subject: [PATCH 16/24] fix: Fix code linting errors in publisher app (#4921)

---
 .eslintrc.js                                  |  4 +-
 .../SaveAndPreview/SaveAndPreview.test.tsx    | 24 ++++++--
 .../SaveAndPreview/SaveAndPreview.tsx         |  4 +-
 .../SaveStateNotifications.tsx                |  7 ++-
 .../__tests__/SaveStateNotifications.test.tsx | 22 ++++----
 .../SearchAutocomplete/SearchAutocomplete.tsx | 23 +++++---
 .../components/SectionNav/SectionNavTest.tsx  | 14 ++---
 .../UpdateMetadataModal.tsx                   |  7 ++-
 .../__tests__/UpdateMetadataModal.test.tsx    |  2 +-
 .../__tests__/useActiveDeviceMetrics.test.tsx | 19 ++++---
 .../hooks/useActiveDeviceMetrics.ts           |  7 ++-
 .../hooks/useMetricsAnnotation.ts             |  2 +-
 .../hooks/useMutateListingData.ts             | 38 ++++++++-----
 .../js/publisher-pages/pages/Build/Build.tsx  | 55 +------------------
 .../pages/Builds/DisconnectRepoActions.tsx    |  4 +-
 .../pages/Builds/RepoConnected.tsx            |  4 +-
 .../pages/Builds/RepoNotConnected.tsx         |  3 +-
 .../pages/Builds/RepoSelector.tsx             |  4 +-
 .../AdditionalInformation/LicenseInputs.tsx   | 10 ++--
 .../AdditionalInformation/LicenseSearch.tsx   | 12 +++-
 .../__tests__/PrimaryDomainInput.test.tsx     | 35 ++++++------
 .../Listing/ListingDetails/Screenshot.tsx     | 17 ++++--
 .../Listing/ListingDetails/ScreenshotList.tsx | 23 +++++---
 .../Listing/ListingDetails/Screenshots.tsx    | 17 ++++--
 .../pages/Listing/ListingForm/ListingForm.tsx | 12 ++--
 .../pages/Listing/PreviewForm/PreviewForm.tsx |  3 +-
 .../pages/Metrics/ActiveDeviceMetrics.tsx     |  2 +-
 .../publisher-pages/pages/Metrics/Metrics.tsx |  2 +-
 .../pages/Metrics/TerritoryMetrics.tsx        | 21 ++++---
 .../__tests__/ActiveDeviceAnnotation.test.tsx | 20 +++----
 .../__tests__/ActiveDeviceMetrics.test.tsx    | 14 ++---
 .../__tests__/TerritoryMetrics.test.tsx       | 14 ++---
 .../pages/Publicise/PubliciseCards.tsx        | 10 ++--
 .../Publicise/__tests__/Publicise.test.tsx    |  2 +-
 .../pages/Settings/SettingsForm.tsx           | 15 ++++-
 .../pages/Settings/UnregisterSnapModal.tsx    |  8 +--
 .../__tests__/UnregisterSnapModal.test.tsx    | 10 ++--
 .../utils/formatImageChanges.ts               |  2 +-
 .../utils/getDefaultListingData.ts            |  2 +-
 .../utils/getListingChanges.ts                | 27 +++++++--
 .../utils/getSettingsChanges.ts               |  9 ++-
 .../utils/getSettingsFormData.ts              |  4 +-
 .../utils/shouldShowUpdateMetadataWarning.ts  |  2 +-
 43 files changed, 297 insertions(+), 239 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4617f86bfa..ce76f657d9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
     "prettier/prettier": "error",
     "react/react-in-jsx-scope": "off",
     "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
   },
   settings: {
     react: {
@@ -43,6 +44,7 @@ module.exports = {
     },
   ],
   ignorePatterns: [
-    "/static/js/publisher" // skip linting any files in the publisher directory 
+    "/static/js/publisher", // skip linting any files in the publisher directory
+    "/static/js/publisher-pages/pages/Releases", // skip releases for now as structural changes are required to fix TS
   ],
 };
diff --git a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
index 7e091f5b89..62ea4fe422 100644
--- a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
+++ b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx
@@ -9,7 +9,7 @@ const reset = jest.fn();
 const renderComponent = (
   isDirty: boolean,
   isSaving: boolean,
-  isValid: boolean
+  isValid: boolean,
 ) => {
   return render(
     <SaveAndPreview
@@ -18,13 +18,16 @@ const renderComponent = (
       reset={reset}
       isSaving={isSaving}
       isValid={isValid}
-    />
+    />,
   );
 };
 
 test("the 'Revert' button is disabled by default", () => {
   renderComponent(false, false, true);
-  expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute("aria-disabled","true");
+  expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
 });
 
 test("the 'Revert' button is enabled is data is dirty", () => {
@@ -34,7 +37,10 @@ test("the 'Revert' button is enabled is data is dirty", () => {
 
 test("the 'Save' button is disabled by default", () => {
   renderComponent(false, false, true);
-  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
 });
 
 test("the 'Save' button is enabled is data is dirty", () => {
@@ -49,12 +55,18 @@ test("the 'Save' button shows loading state if saving", () => {
 
 test("the 'Save' button is disabled when saving", () => {
   renderComponent(true, true, true);
-  expect(screen.getByRole("button", { name: "Saving" })).toHaveAttribute("aria-disabled","true");
+  expect(screen.getByRole("button", { name: "Saving" })).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
 });
 
 test("the 'Save' button is disabled if the form is invalid", () => {
   renderComponent(false, false, false);
-  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
 });
 
 test("revert button resets the form", async () => {
diff --git a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
index eb2eb093ed..13e4c21c23 100644
--- a/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
+++ b/static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx
@@ -6,7 +6,7 @@ import debounce from "../../../libs/debounce";
 type Props = {
   snapName: string;
   isDirty: boolean;
-  reset: Function;
+  reset: () => void;
   isSaving: boolean;
   isValid: boolean;
   showPreview?: boolean;
@@ -25,7 +25,7 @@ function SaveAndPreview({
   const handleScroll = () => {
     stickyBar?.current?.classList.toggle(
       "sticky-shadow",
-      stickyBar?.current?.getBoundingClientRect()?.top === 0
+      stickyBar?.current?.getBoundingClientRect()?.top === 0,
     );
   };
 
diff --git a/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx b/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
index ad7e351067..13ea72b323 100644
--- a/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
+++ b/static/js/publisher-pages/components/SaveStateNotifications/SaveStateNotifications.tsx
@@ -1,10 +1,13 @@
+import { Dispatch, SetStateAction } from "react";
 import { Notification } from "@canonical/react-components";
 
 type Props = {
   hasSaved: boolean;
-  setHasSaved: Function;
+  setHasSaved: Dispatch<SetStateAction<boolean>>;
   savedError: boolean | Array<{ message: string }>;
-  setSavedError: Function;
+  setSavedError: Dispatch<
+    SetStateAction<boolean | { code: string; message: string }[]>
+  >;
 };
 
 function SaveStateNotifications({
diff --git a/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx b/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
index a0f1ff20fb..27095a4b66 100644
--- a/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
+++ b/static/js/publisher-pages/components/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from "react";
 import { screen, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
@@ -6,9 +7,9 @@ import SaveStateNotifications from "../SaveStateNotifications";
 
 type Options = {
   hasSaved?: boolean;
-  setHasSaved?: Function;
+  setHasSaved?: Dispatch<SetStateAction<boolean>>;
   savedError?: boolean | Array<{ message: string }>;
-  setSavedError?: Function;
+  setSavedError?: Dispatch<SetStateAction<boolean>>;
 };
 
 const renderComponent = (options: Options) => {
@@ -17,8 +18,9 @@ const renderComponent = (options: Options) => {
       hasSaved={options.hasSaved || false}
       setHasSaved={options.setHasSaved || jest.fn()}
       savedError={options.savedError || false}
+      // @ts-expect-error Mock for testing
       setSavedError={options.setSavedError || jest.fn()}
-    />
+    />,
   );
 };
 
@@ -26,14 +28,14 @@ describe("SaveStateNotifications", () => {
   test("shows success notification if saved", () => {
     renderComponent({ hasSaved: true });
     expect(
-      screen.getByRole("heading", { name: "Changes applied successfully." })
+      screen.getByRole("heading", { name: "Changes applied successfully." }),
     ).toBeInTheDocument();
   });
 
   test("doesn't show success notification if not saved", () => {
     renderComponent({ hasSaved: false });
     expect(
-      screen.queryByRole("heading", { name: "Changes applied successfully." })
+      screen.queryByRole("heading", { name: "Changes applied successfully." }),
     ).not.toBeInTheDocument();
   });
 
@@ -42,7 +44,7 @@ describe("SaveStateNotifications", () => {
     const setHasSaved = jest.fn();
     renderComponent({ hasSaved: true, setHasSaved });
     await user.click(
-      screen.getByRole("button", { name: "Close notification" })
+      screen.getByRole("button", { name: "Close notification" }),
     );
     expect(setHasSaved).toHaveBeenCalled();
   });
@@ -50,14 +52,14 @@ describe("SaveStateNotifications", () => {
   test("shows error notification if saved", () => {
     renderComponent({ savedError: true });
     expect(
-      screen.getByText(/Changes have not been saved./)
+      screen.getByText(/Changes have not been saved./),
     ).toBeInTheDocument();
   });
 
   test("doesn't show error notification if not saved", () => {
     renderComponent({ savedError: false });
     expect(
-      screen.queryByText(/Changes have not been saved./)
+      screen.queryByText(/Changes have not been saved./),
     ).not.toBeInTheDocument();
   });
 
@@ -82,7 +84,7 @@ describe("SaveStateNotifications", () => {
     const setHasSaved = jest.fn();
     renderComponent({ savedError: true, setHasSaved });
     await user.click(
-      screen.getByRole("button", { name: "Close notification" })
+      screen.getByRole("button", { name: "Close notification" }),
     );
     expect(setHasSaved).toHaveBeenCalled();
   });
@@ -92,7 +94,7 @@ describe("SaveStateNotifications", () => {
     const setSavedError = jest.fn();
     renderComponent({ savedError: true, setSavedError });
     await user.click(
-      screen.getByRole("button", { name: "Close notification" })
+      screen.getByRole("button", { name: "Close notification" }),
     );
     expect(setSavedError).toHaveBeenCalled();
   });
diff --git a/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
index 69e492e6b3..46d59d8a2b 100644
--- a/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
+++ b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -1,6 +1,13 @@
 import { useState, useEffect } from "react";
 import Downshift from "downshift";
-import { useWatch } from "react-hook-form";
+import {
+  useWatch,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormGetValues,
+  Control,
+  FieldValues,
+} from "react-hook-form";
 
 type DataItem = {
   key: string;
@@ -11,10 +18,10 @@ type Props = {
   data: Array<DataItem>;
   field: string;
   currentValues: Array<string>;
-  register: Function;
-  setValue: Function;
-  getValues: Function;
-  control: any;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  control: Control<FieldValues>;
   disabled?: boolean;
 };
 
@@ -83,7 +90,7 @@ function SearchAutocomplete({
                 className="p-icon--close p-multiselect__item-remove"
                 onClick={() => {
                   const newSelections = selections.filter(
-                    (item: DataItem) => item.key !== suggestion.key
+                    (item: DataItem) => item.key !== suggestion.key,
                   );
 
                   const newSelectionsKeys = getNewSelectionKeys(newSelections);
@@ -115,13 +122,13 @@ function SearchAutocomplete({
                   (item) =>
                     !inputValue ||
                     item.key.toLowerCase().includes(inputValue) ||
-                    item.name.toLowerCase().includes(inputValue)
+                    item.name.toLowerCase().includes(inputValue),
                 )
                 .map((item, index) => (
                   <li
+                    key={item.key}
                     className="p-multiselect__option"
                     {...getItemProps({
-                      key: item.key,
                       index,
                       item,
                       style: {
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx b/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
index 11193c6ebe..499d5f6273 100644
--- a/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
+++ b/static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx
@@ -13,48 +13,48 @@ const props = {
 test("the page displays the correct name for the snap", () => {
   render(<SectionNav {...props} />);
   expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-    "test-snap-name"
+    "test-snap-name",
   );
 });
 
 test("the 'Listing' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Listing" }).getAttribute("href")
+    screen.getByRole("link", { name: "Listing" }).getAttribute("href"),
   ).toBe(`/${snapName}/listing`);
 });
 
 test("the 'Builds' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Builds" }).getAttribute("href")
+    screen.getByRole("link", { name: "Builds" }).getAttribute("href"),
   ).toBe(`/${snapName}/builds`);
 });
 
 test("the 'Releases' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Releases" }).getAttribute("href")
+    screen.getByRole("link", { name: "Releases" }).getAttribute("href"),
   ).toBe(`/${snapName}/releases`);
 });
 
 test("the 'Metrics' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Metrics" }).getAttribute("href")
+    screen.getByRole("link", { name: "Metrics" }).getAttribute("href"),
   ).toBe(`/${snapName}/metrics`);
 });
 
 test("the 'Publicise' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Publicise" }).getAttribute("href")
+    screen.getByRole("link", { name: "Publicise" }).getAttribute("href"),
   ).toBe(`/${snapName}/publicise`);
 });
 
 test("the 'Settings' tab has the correct path", () => {
   render(<SectionNav {...props} />);
   expect(
-    screen.getByRole("link", { name: "Settings" }).getAttribute("href")
+    screen.getByRole("link", { name: "Settings" }).getAttribute("href"),
   ).toBe(`/${snapName}/settings`);
 });
diff --git a/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx b/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
index 1f64e1b142..b82f658afc 100644
--- a/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
+++ b/static/js/publisher-pages/components/UpdateMetadataModal/UpdateMetadataModal.tsx
@@ -1,9 +1,10 @@
+import { Dispatch, SetStateAction } from "react";
 import { Modal, Button } from "@canonical/react-components";
 
 type Props = {
-  setShowMetadataWarningModal: Function;
-  submitForm: Function;
-  formData: any;
+  setShowMetadataWarningModal: Dispatch<SetStateAction<boolean>>;
+  submitForm: (arg: { [key: string]: unknown }) => void;
+  formData: { [key: string]: unknown };
 };
 
 function UpdateMetadataModal({
diff --git a/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx b/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
index 707e9ff5c9..cf0f52fd98 100644
--- a/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
+++ b/static/js/publisher-pages/components/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
@@ -14,7 +14,7 @@ const renderComponent = () => {
       setShowMetadataWarningModal={setShowMetadataWarningModal}
       submitForm={submitForm}
       formData={formData}
-    />
+    />,
   );
 };
 
diff --git a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
index 2285f4ecad..c574f3ba2f 100644
--- a/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
+++ b/static/js/publisher-pages/hooks/__tests__/useActiveDeviceMetrics.test.tsx
@@ -5,18 +5,19 @@ import useActiveDeviceMetrics from "../useActiveDeviceMetrics";
 
 describe("useActiveDeviceMetrics", () => {
   test("Calls useQuery", () => {
+    // @ts-expect-error Mock for tests
     const spy = jest.spyOn(ReactQuery, "useQuery").mockReturnValue({
       data: [],
       status: "success",
       isFetcing: false,
-    } as any);
+    } as { data: []; status: string; isFetching: boolean });
 
     renderHook(() =>
       useActiveDeviceMetrics({
         period: "30d",
         snapId: "test-id",
         type: "version",
-      })
+      }),
     );
     expect(ReactQuery.useQuery).toHaveBeenCalled();
     spy.mockRestore();
@@ -24,7 +25,7 @@ describe("useActiveDeviceMetrics", () => {
 
   const createWrapper = () => {
     const queryClient = new QueryClient();
-    return ({ children }: any) => (
+    return ({ children }: { children: JSX.Element }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     );
   };
@@ -54,7 +55,7 @@ describe("useActiveDeviceMetrics", () => {
             total_page_num: 1,
           }),
         ok: true,
-      })
+      }),
     ) as jest.Mock;
 
     const { result } = renderHook(
@@ -66,7 +67,7 @@ describe("useActiveDeviceMetrics", () => {
         }),
       {
         wrapper: createWrapper(),
-      }
+      },
     );
 
     await waitFor(() => expect(result.current.status).toBe("success"));
@@ -112,7 +113,7 @@ describe("useActiveDeviceMetrics", () => {
             total_page_num: 1,
           }),
         ok: true,
-      })
+      }),
     ) as jest.Mock;
 
     const { result } = renderHook(
@@ -124,7 +125,7 @@ describe("useActiveDeviceMetrics", () => {
         }),
       {
         wrapper: createWrapper(),
-      }
+      },
     );
 
     await waitFor(() => expect(result.current.status).toBe("success"));
@@ -139,7 +140,7 @@ describe("useActiveDeviceMetrics", () => {
         json: () => Promise.resolve(undefined),
         ok: false,
         status: 404,
-      })
+      }),
     ) as jest.Mock;
 
     const { result } = renderHook(
@@ -151,7 +152,7 @@ describe("useActiveDeviceMetrics", () => {
         }),
       {
         wrapper: createWrapper(),
-      }
+      },
     );
     await waitFor(() => expect(result.current.status).toBe("success"));
 
diff --git a/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
index eea8ceba41..9177fa3b68 100644
--- a/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
+++ b/static/js/publisher-pages/hooks/useActiveDeviceMetrics.ts
@@ -19,6 +19,7 @@ function useActiveDeviceMetrics({
   });
 
   const parsePeriod = (period: string) => {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
     const [_, periodLength, periodTime] = period.trim().split(/(\d+)/);
     return { periodLength: +periodLength, periodTime };
   };
@@ -44,8 +45,8 @@ function useActiveDeviceMetrics({
     for (let i = 1; i <= totalPage; i++) {
       responses.push(
         fetch(
-          `/${snapId}/metrics/active-devices?active-devices=${type}&period=${period}&page=${i}&page-length=${pagePeriodLengthInMonths}`
-        )
+          `/${snapId}/metrics/active-devices?active-devices=${type}&period=${period}&page=${i}&page-length=${pagePeriodLengthInMonths}`,
+        ),
       );
     }
 
@@ -88,7 +89,7 @@ function useActiveDeviceMetrics({
       for (const seriesKey of series.keys()) {
         const seriesExistInBatch = data.active_devices.series.find(
           (activeDeviceSeries: { name: string }) =>
-            activeDeviceSeries.name === seriesKey
+            activeDeviceSeries.name === seriesKey,
         );
         if (!seriesExistInBatch) {
           series.set(seriesKey, [
diff --git a/static/js/publisher-pages/hooks/useMetricsAnnotation.ts b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
index d28850e836..0450ab827d 100644
--- a/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
+++ b/static/js/publisher-pages/hooks/useMetricsAnnotation.ts
@@ -5,7 +5,7 @@ function useMetricsAnnotation(snapId?: string) {
     queryKey: ["annotationMetrics", snapId],
     queryFn: async () => {
       const response = await fetch(
-        `/${snapId}/metrics/active-device-annotation`
+        `/${snapId}/metrics/active-device-annotation`,
       );
 
       if (!response.ok) {
diff --git a/static/js/publisher-pages/hooks/useMutateListingData.ts b/static/js/publisher-pages/hooks/useMutateListingData.ts
index 3d9f22f72d..652f62abf6 100644
--- a/static/js/publisher-pages/hooks/useMutateListingData.ts
+++ b/static/js/publisher-pages/hooks/useMutateListingData.ts
@@ -1,3 +1,5 @@
+import { Dispatch, SetStateAction } from "react";
+import { UseFormReset, FieldValues } from "react-hook-form";
 import { useMutation } from "react-query";
 
 import { addDateToFilename, getListingChanges } from "../utils";
@@ -6,13 +8,13 @@ import type { ListingData } from "../types";
 
 type Options = {
   data: ListingData;
-  dirtyFields: any;
-  getDefaultData: Function;
-  refetch: Function;
-  reset: Function;
-  setShowSuccessNotification: Function;
-  setUpdateMetadataOnRelease: Function;
-  shouldShowUpdateMetadataWarning: Function;
+  dirtyFields: { [key: string]: boolean };
+  getDefaultData: (arg: ListingData) => { [key: string]: unknown };
+  refetch: () => void;
+  reset: UseFormReset<FieldValues>;
+  setShowSuccessNotification: Dispatch<SetStateAction<boolean>>;
+  setUpdateMetadataOnRelease: Dispatch<SetStateAction<boolean>>;
+  shouldShowUpdateMetadataWarning: (arg: FieldValues) => boolean;
   snapName: string | undefined;
 };
 
@@ -28,7 +30,7 @@ function useMutateListingData({
   snapName,
 }: Options) {
   return useMutation({
-    mutationFn: async (values: any) => {
+    mutationFn: async (values: FieldValues) => {
       const formData = new FormData();
 
       const changes = getListingChanges(dirtyFields, values, data);
@@ -52,11 +54,18 @@ function useMutateListingData({
 
             formData.append("screenshots", newFile);
 
-            const imageIndex = changes.images.findIndex(
-              (image: any) => image.name === oldName,
+            const imageIndex = changes?.images?.findIndex(
+              (image: {
+                url: string;
+                type: string;
+                status: string;
+                name?: string;
+              }) => image.name === oldName,
             );
-            changes.images[imageIndex].name = newFile.name;
-            changes.images[imageIndex].url = URL.createObjectURL(newFile);
+            if (changes.images && imageIndex) {
+              changes.images[imageIndex].name = newFile.name;
+              changes.images[imageIndex].url = URL.createObjectURL(newFile);
+            }
           }
         });
       }
@@ -76,9 +85,10 @@ function useMutateListingData({
         throw new Error("There was a problem saving listing data");
       }
     },
-    onSuccess: async () => {
-      const response = await refetch();
+    onSuccess: () => {
+      const response = refetch();
       setShowSuccessNotification(true);
+      // @ts-expect-error Conflict between React Query and React Hook Form
       reset(getDefaultData(response.data));
 
       const mainPanel = document.querySelector(".l-main") as HTMLElement;
diff --git a/static/js/publisher-pages/pages/Build/Build.tsx b/static/js/publisher-pages/pages/Build/Build.tsx
index d28763fa23..248f62d2f0 100644
--- a/static/js/publisher-pages/pages/Build/Build.tsx
+++ b/static/js/publisher-pages/pages/Build/Build.tsx
@@ -1,7 +1,7 @@
 import { useParams, Link } from "react-router-dom";
 import { useQuery } from "react-query";
 import { Strip, Row, Col, MainTable } from "@canonical/react-components";
-import { formatDistanceToNow, formatDuration } from "date-fns";
+import { formatDistanceToNow } from "date-fns";
 
 import SectionNav from "../../components/SectionNav";
 
@@ -26,58 +26,6 @@ function Build(): JSX.Element {
     },
   });
 
-  const formatDurationString = (duration?: string): string => {
-    if (!duration) {
-      return "-";
-    }
-
-    const durationParts = duration.split(":");
-
-    return formatDuration({
-      hours: parseInt(durationParts[0]),
-      minutes: parseInt(durationParts[1]),
-      seconds: Math.floor(parseInt(durationParts[2])),
-    });
-  };
-
-  const formatStatus = (status: string): JSX.Element => {
-    switch (status) {
-      case "never_built":
-        return <>Never built</>;
-      case "building_soon":
-        return <>Building soon</>;
-      case "wont_release":
-        return <>Won't release</>;
-      case "released":
-        return <>Released</>;
-      case "release_failed":
-        return <>Release failed</>;
-      case "releasing_soon":
-        return <>Releasing soon</>;
-      case "in_progress":
-        return (
-          <>
-            <i className="p-icon--spinner u-animation--spin" />
-            In progress
-          </>
-        );
-      case "failed_to_build":
-        return <>Failed to build</>;
-      case "cancelled":
-        return <>Cancelled</>;
-      case "unknown":
-        return <>Unknown</>;
-      case "ERROR":
-        return <>Error</>;
-      case "SUCCESS":
-        return <>Success</>;
-      case "IDLE":
-        return <>Idle</>;
-      default:
-        return <>{status}</>;
-    }
-  };
-
   return (
     <>
       <h1 className="p-heading--4">
@@ -126,6 +74,7 @@ function Build(): JSX.Element {
                 target="_blank"
                 href={data.snap_build.logs}
                 className="p-button"
+                rel="noreferrer"
               >
                 View raw
               </a>
diff --git a/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx b/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
index 9d53ecafe9..5f0a5b9aa6 100644
--- a/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
+++ b/static/js/publisher-pages/pages/Builds/DisconnectRepoActions.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 import { Button } from "@canonical/react-components";
@@ -8,7 +8,7 @@ import { buildRepoConnectedState } from "../../state/atoms";
 import type { GithubData } from "../../types";
 
 type Props = {
-  setDisconnectModalOpen: Function;
+  setDisconnectModalOpen: Dispatch<SetStateAction<boolean>>;
   githubData: GithubData | null;
 };
 
diff --git a/static/js/publisher-pages/pages/Builds/RepoConnected.tsx b/static/js/publisher-pages/pages/Builds/RepoConnected.tsx
index 0e6511f451..721825dd58 100644
--- a/static/js/publisher-pages/pages/Builds/RepoConnected.tsx
+++ b/static/js/publisher-pages/pages/Builds/RepoConnected.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import { useQuery } from "react-query";
 import { useRecoilValue } from "recoil";
 import { useParams, Link } from "react-router-dom";
@@ -21,7 +21,7 @@ function RepoConnected({
   setAutoTriggerBuild,
 }: {
   autoTriggerBuild: boolean;
-  setAutoTriggerBuild: Function;
+  setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element {
   const { snapId } = useParams();
   const githubData = useRecoilValue(githubDataState);
diff --git a/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx b/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
index fd04590593..8210b1c656 100644
--- a/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
+++ b/static/js/publisher-pages/pages/Builds/RepoNotConnected.tsx
@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from "react";
 import { useRecoilValue } from "recoil";
 import { Strip } from "@canonical/react-components";
 
@@ -10,7 +11,7 @@ import type { GithubData } from "../../types/";
 function RepoNotConnected({
   setAutoTriggerBuild,
 }: {
-  setAutoTriggerBuild: Function;
+  setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element {
   const githubData = useRecoilValue<GithubData | null>(githubDataState);
 
diff --git a/static/js/publisher-pages/pages/Builds/RepoSelector.tsx b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
index 767a914814..78b9d72cfd 100644
--- a/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
+++ b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, ChangeEventHandler, useState } from "react";
+import { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 import { Strip, Row, Col, Select, Button } from "@canonical/react-components";
@@ -11,7 +11,7 @@ type Repo = { name: string; nameWithOwner: string };
 
 type Props = {
   githubData: GithubData;
-  setAutoTriggerBuild: Function;
+  setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
 };
 
 function RepoSelector({ githubData, setAutoTriggerBuild }: Props) {
diff --git a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx
index 05dd78c853..cde4111715 100644
--- a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx
+++ b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseInputs.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, SetStateAction } from "react";
 import {
   UseFormRegister,
   UseFormSetValue,
@@ -29,9 +29,11 @@ function LicenseInputs({ listingData, register, setValue, watch }: Props) {
   const customLicenseId = nanoid();
 
   useEffect(() => {
-    const subscription = watch((value: { [index: string]: any }) => {
-      setLicense(value?.license);
-    });
+    const subscription = watch(
+      (value: { [index: string]: SetStateAction<string> }) => {
+        setLicense(value?.license);
+      },
+    );
     return () => subscription.unsubscribe();
   }, [watch]);
 
diff --git a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
index 675dd11d04..28ccbdee28 100644
--- a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
+++ b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
@@ -1,4 +1,10 @@
-import { useState, SyntheticEvent, useEffect } from "react";
+import {
+  useState,
+  SyntheticEvent,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+} from "react";
 import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
 import Downshift from "downshift";
 
@@ -14,7 +20,7 @@ type Props = {
   license: string | undefined;
   register: UseFormRegister<FieldValues>;
   setValue: UseFormSetValue<FieldValues>;
-  setLicense: Function;
+  setLicense: Dispatch<SetStateAction<string>>;
   originalLicense: string;
 };
 
@@ -170,9 +176,9 @@ function LicenseSearch({
             >
               {suggestions.map((item: License, index) => (
                 <li
+                  key={item.key}
                   className="p-list__item p-autocomplete__suggestion"
                   {...getItemProps({
-                    key: item.key,
                     index,
                     item,
                     style: {
diff --git a/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
index 730e822c37..14fa002a4f 100644
--- a/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
@@ -42,7 +42,7 @@ const mockUseFormReturnValue = {
 
 const renderComponent = (
   data: ListingData,
-  defaultValues: { [key: string]: any },
+  defaultValues: { [key: string]: unknown },
 ) => {
   const Component = () => {
     const { register, getFieldState, getValues } = useForm({
@@ -70,10 +70,10 @@ const renderComponent = (
 describe("PrimaryDomainInput", () => {
   it("shows as verified if domain is verified", () => {
     mockUseQueryReturnValue.data.primary_domain = true;
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     renderComponent(mockListingData, {
@@ -84,7 +84,7 @@ describe("PrimaryDomainInput", () => {
 
   it("shows message if verified domain is changed", async () => {
     mockUseQueryReturnValue.data.primary_domain = true;
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getFieldState = jest.fn().mockReturnValue({
@@ -95,7 +95,7 @@ describe("PrimaryDomainInput", () => {
     mockUseFormReturnValue.getValues = jest
       .fn()
       .mockReturnValue("https://example.comabc");
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
@@ -113,7 +113,7 @@ describe("PrimaryDomainInput", () => {
 
   it("doesn't show message if only verified domain path is changed", async () => {
     mockUseQueryReturnValue.data.primary_domain = true;
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getFieldState = jest.fn().mockReturnValue({
@@ -125,7 +125,7 @@ describe("PrimaryDomainInput", () => {
       .fn()
       .mockReturnValue("https://example.com");
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
@@ -141,14 +141,14 @@ describe("PrimaryDomainInput", () => {
   it("shows message if verified domain is in no path list", async () => {
     mockUseQueryReturnValue.data.primary_domain = true;
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getValues = jest
       .fn()
       .mockReturnValue("https://launchpad.net/path");
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
     const user = userEvent.setup();
     renderComponent(
@@ -165,7 +165,7 @@ describe("PrimaryDomainInput", () => {
   it("'Verified ownership' button opens modal with token", async () => {
     mockUseQueryReturnValue.data.primary_domain = true;
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getFieldState = jest.fn().mockReturnValue({
@@ -173,7 +173,7 @@ describe("PrimaryDomainInput", () => {
       isDirty: false,
     });
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
@@ -194,10 +194,10 @@ describe("PrimaryDomainInput", () => {
   it("shows 'Verify ownership' button if not verified", () => {
     mockUseQueryReturnValue.data.primary_domain = false;
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     renderComponent(mockListingData, {
@@ -212,7 +212,7 @@ describe("PrimaryDomainInput", () => {
   it("'Verify ownership' button opens modal with token", async () => {
     mockUseQueryReturnValue.data.primary_domain = false;
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getFieldState = jest.fn().mockReturnValue({
@@ -220,7 +220,7 @@ describe("PrimaryDomainInput", () => {
       isDirty: false,
     });
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
@@ -239,7 +239,7 @@ describe("PrimaryDomainInput", () => {
   it("'Verify ownership' button is disabled if field is dirty", async () => {
     mockUseQueryReturnValue.data.primary_domain = false;
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
     mockUseFormReturnValue.getFieldState = jest.fn().mockReturnValue({
@@ -247,10 +247,9 @@ describe("PrimaryDomainInput", () => {
       isDirty: true,
     });
 
-    // @ts-ignore
+    // @ts-expect-error mocks
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
-    const user = userEvent.setup();
     renderComponent(mockListingData, {
       primary_website: "https://example.com",
     });
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx
index daf01680b7..7d3d81cd89 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshot.tsx
@@ -1,4 +1,11 @@
 import { SyntheticEvent } from "react";
+import {
+  UseFormGetValues,
+  UseFieldArrayRemove,
+  UseFormSetValue,
+  UseFormRegister,
+  FieldValues,
+} from "react-hook-form";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
@@ -6,11 +13,11 @@ type Props = {
   field: { id: string };
   index: number;
   screenshotUrls: Array<string>;
-  getValues: Function;
-  removeScreenshotUrl: Function;
-  setValue: Function;
-  register: Function;
-  setImage: Function;
+  getValues: UseFormGetValues<FieldValues>;
+  removeScreenshotUrl: UseFieldArrayRemove;
+  setValue: UseFormSetValue<FieldValues>;
+  register: UseFormRegister<FieldValues>;
+  setImage: (arg: File) => void;
 };
 
 function Screenshot({
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx
index 5adb94bfa2..9f5587b7dc 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ScreenshotList.tsx
@@ -1,10 +1,19 @@
 import { useState } from "react";
+import {
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormRegister,
+  FieldValues,
+  UseFieldArrayRemove,
+  UseFieldArrayMove,
+} from "react-hook-form";
 import {
   DndContext,
   closestCenter,
   PointerSensor,
   useSensor,
   useSensors,
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -17,12 +26,12 @@ import Screenshot from "./Screenshot";
 type Props = {
   screenshots: Array<{ id: string }>;
   screenshotUrls: Array<string>;
-  getValues: Function;
-  removeScreenshotUrl: Function;
-  setValue: Function;
-  register: Function;
-  setImage: Function;
-  moveScreenshotUrl: Function;
+  getValues: UseFormGetValues<FieldValues>;
+  removeScreenshotUrl: UseFieldArrayRemove;
+  setValue: UseFormSetValue<FieldValues>;
+  register: UseFormRegister<FieldValues>;
+  setImage: (arg: File) => void;
+  moveScreenshotUrl: UseFieldArrayMove;
 };
 
 function ScreenshotList({
@@ -38,7 +47,7 @@ function ScreenshotList({
   const [items, setItems] = useState(screenshots);
   const sensors = useSensors(useSensor(PointerSensor));
 
-  const handleDragEnd = (e: any) => {
+  const handleDragEnd = (e: DragEndEvent) => {
     const { active, over } = e;
 
     if (active && over && active?.id !== over?.id) {
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
index 7fbe246c3a..fc62ca4132 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/Screenshots.tsx
@@ -1,5 +1,12 @@
 import { useState } from "react";
-import { useFieldArray } from "react-hook-form";
+import {
+  useFieldArray,
+  UseFormRegister,
+  UseFormGetValues,
+  UseFormSetValue,
+  FieldValues,
+  Control,
+} from "react-hook-form";
 import { nanoid } from "nanoid";
 import { Row, Col, Notification } from "@canonical/react-components";
 
@@ -8,10 +15,10 @@ import { validateImageDimensions } from "../../../utils";
 import ScreenshotList from "./ScreenshotList";
 
 type Props = {
-  register: Function;
-  control: any;
-  getValues: Function;
-  setValue: Function;
+  register: UseFormRegister<FieldValues>;
+  control: Control<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
 };
 
 function Screenshots({ register, control, getValues, setValue }: Props) {
diff --git a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
index 6048925d4a..6d86162aa8 100644
--- a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
@@ -23,7 +23,7 @@ import type { ListingData } from "../../../types";
 
 type Props = {
   data: ListingData;
-  refetch: Function;
+  refetch: () => void;
 };
 
 function ListingForm({ data, refetch }: Props): JSX.Element {
@@ -54,9 +54,9 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
   const [showMetadataWarningModal, setShowMetadataWarningModal] =
     useState<boolean>(false);
 
-  const [formValues, setFormValues] = useState<{ [key: string]: any } | null>(
-    null,
-  );
+  const [formValues, setFormValues] = useState<{
+    [key: string]: unknown;
+  } | null>(null);
 
   const { mutate, isLoading } = useMutateListingData({
     data,
@@ -74,7 +74,8 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
     <>
       <form
         className="p-form"
-        onSubmit={handleSubmit((values: any) => {
+        // @ts-expect-error Conflict between React Query and Reach Hook Form
+        onSubmit={handleSubmit((values: ListingData) => {
           if (
             data.update_metadata_on_release &&
             shouldShowUpdateMetadataWarning(dirtyFields)
@@ -118,6 +119,7 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
               <UpdateMetadataModal
                 setShowMetadataWarningModal={setShowMetadataWarningModal}
                 submitForm={mutate}
+                // @ts-expect-error Conflict between React Query and React Hook Form
                 formData={formValues}
               />
             ) : null}
diff --git a/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx b/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
index 6b698ee747..a3a4a0567b 100644
--- a/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
@@ -1,8 +1,9 @@
+import { UseFormGetValues, FieldValues } from "react-hook-form";
 import { Form } from "@canonical/react-components";
 
 type Props = {
   snapName: string;
-  getValues: Function;
+  getValues: UseFormGetValues<FieldValues>;
 };
 
 type ListingData = {
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
index 13a17d7cc0..6f48ee3f16 100644
--- a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
@@ -1,7 +1,7 @@
 import { useParams, useSearchParams } from "react-router-dom";
 import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { renderActiveDevicesMetrics } from "../../../publisher/metrics/metrics";
 import { select } from "d3-selection";
 import ActiveDeviceAnnotation from "./ActiveDeviceAnnotation";
diff --git a/static/js/publisher-pages/pages/Metrics/Metrics.tsx b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
index cad0eae341..b1d2d06466 100644
--- a/static/js/publisher-pages/pages/Metrics/Metrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/Metrics.tsx
@@ -1,4 +1,4 @@
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Row, Col } from "@canonical/react-components";
 
 import SectionNav from "../../components/SectionNav";
diff --git a/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
index 2f5b1562d0..49c1f6bec4 100644
--- a/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
@@ -1,11 +1,5 @@
-import { useParams, useSearchParams } from "react-router-dom";
-import {
-  Row,
-  Col,
-  Select,
-  Spinner,
-  CodeSnippet,
-} from "@canonical/react-components";
+import { useParams } from "react-router-dom";
+import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
 
 import { useEffect } from "react";
 import { renderTerritoriesMetrics } from "../../../publisher/metrics/metrics";
@@ -27,7 +21,15 @@ export const TerritoryMetrics = ({
     status: string;
     data:
       | {
-          active_devices: any;
+          active_devices: {
+            [key: string]: {
+              code: string;
+              color_rgb: string;
+              name: string;
+              number_of_users: number;
+              percentage_of_users: number;
+            };
+          };
           territories_total: number;
         }
       | undefined;
@@ -41,6 +43,7 @@ export const TerritoryMetrics = ({
           selector: "#territories",
           metrics: countryInfo.active_devices,
         });
+      // @ts-expect-error Type clash
       onDataLoad(countryInfo.active_devices?.length);
     }
   }, [countryInfo]);
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
index e1d5960ff7..bfff2c94ea 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceAnnotation.test.tsx
@@ -13,7 +13,7 @@ const renderComponent = () => {
       <BrowserRouter>
         <ActiveDeviceAnnotation snapId="test" />
       </BrowserRouter>
-    </QueryClientProvider>
+    </QueryClientProvider>,
   );
 };
 
@@ -52,7 +52,7 @@ jest.mock("react-query", () => ({
 
 describe("ActiveDeviceAnnotation", () => {
   test("renders the information correctly", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockReturnValue({
       status: "success",
       data: mockMetricsAnnotation,
@@ -62,33 +62,33 @@ describe("ActiveDeviceAnnotation", () => {
 
     await waitFor(() => {
       const serverAndCloudElement = container.querySelector(
-        '[data-id="category-server-and-cloud"]'
+        '[data-id="category-server-and-cloud"]',
       );
       expect(serverAndCloudElement).toBeInTheDocument();
       expect(serverAndCloudElement).toHaveTextContent(
-        "Added to Server and cloud in January 2019"
+        "Added to Server and cloud in January 2019",
       );
 
       const categoryDevelopmentElement = container.querySelector(
-        '[data-id="category-development"]'
+        '[data-id="category-development"]',
       );
       expect(categoryDevelopmentElement).toBeInTheDocument();
       expect(categoryDevelopmentElement).toHaveTextContent(
-        "Added to Development in February 2019"
+        "Added to Development in February 2019",
       );
 
       const categoryFeaturedElement = container.querySelector(
-        '[data-id="category-featured"]'
+        '[data-id="category-featured"]',
       );
       expect(categoryFeaturedElement).toBeInTheDocument();
       expect(categoryFeaturedElement).toHaveTextContent(
-        "Featured snap since July 2024"
+        "Featured snap since July 2024",
       );
     });
   });
 
   test("renders empty annotations if the data is returned empty", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockReturnValue({
       status: "success",
       data: {
@@ -102,7 +102,7 @@ describe("ActiveDeviceAnnotation", () => {
 
     await waitFor(() => {
       const serverAndCloudElement = container.querySelector(
-        '[data-id="category-server-and-cloud"]'
+        '[data-id="category-server-and-cloud"]',
       );
       expect(serverAndCloudElement).not.toBeInTheDocument();
     });
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
index 1543a8c562..46565cc999 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
@@ -17,7 +17,7 @@ const renderComponent = (isEmpty: boolean) => {
       <BrowserRouter>
         <ActiveDeviceMetrics isEmpty={isEmpty} onDataLoad={jest.fn()} />
       </BrowserRouter>
-    </QueryClientProvider>
+    </QueryClientProvider>,
   );
 };
 
@@ -82,12 +82,12 @@ jest.mock("react-router-dom", () => ({
 
 describe("ActiveDeviceMetrics", () => {
   beforeEach(() => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useSearchParams.mockReturnValue([new URLSearchParams()]);
   });
 
   test("renders the information correctly", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation((params) => {
       if (params) {
         if (params.queryKey[0] === "activeDeviceMetrics") {
@@ -124,7 +124,7 @@ describe("ActiveDeviceMetrics", () => {
   });
 
   test("renders the error state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation((params) => {
       if (params) {
         if (params.queryKey[0] === "activeDeviceMetrics") {
@@ -158,13 +158,13 @@ describe("ActiveDeviceMetrics", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("An error occurred. Please try again.")
+        screen.getByText("An error occurred. Please try again."),
       ).toBeInTheDocument();
     });
   });
 
   test("renders the loading state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation((params) => {
       if (params) {
         if (params.queryKey[0] === "activeDeviceMetrics") {
@@ -202,7 +202,7 @@ describe("ActiveDeviceMetrics", () => {
   });
 
   test("renders the empty state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation((params) => {
       if (params) {
         if (params.queryKey[0] === "activeDeviceMetrics") {
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
index 466f4231ed..ffa5714e83 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
@@ -17,7 +17,7 @@ const renderComponent = (isEmpty: boolean) => {
       <BrowserRouter>
         <TerritoryMetrics isEmpty={isEmpty} onDataLoad={jest.fn()} />
       </BrowserRouter>
-    </QueryClientProvider>
+    </QueryClientProvider>,
   );
 };
 
@@ -53,12 +53,12 @@ jest.mock("react-router-dom", () => ({
 
 describe("ActiveDeviceMetrics", () => {
   beforeEach(() => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useSearchParams.mockReturnValue([new URLSearchParams()]);
   });
 
   test("renders the information correctly", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => ({
       status: "success",
       data: mockTerritoryMetrics,
@@ -73,7 +73,7 @@ describe("ActiveDeviceMetrics", () => {
   });
 
   test("renders the error state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => ({
       status: "error",
       data: undefined,
@@ -83,13 +83,13 @@ describe("ActiveDeviceMetrics", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("An error occurred. Please try again.")
+        screen.getByText("An error occurred. Please try again."),
       ).toBeInTheDocument();
     });
   });
 
   test("renders the loading state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => ({
       isFetching: true,
       data: undefined,
@@ -103,7 +103,7 @@ describe("ActiveDeviceMetrics", () => {
   });
 
   test("renders the empty state", async () => {
-    // @ts-ignore
+    // @ts-expect-error mocks
     useQuery.mockImplementation(() => ({
       status: "success",
       data: undefined,
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
index a5c86407ab..4c5db698a4 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
@@ -10,7 +10,7 @@ import {
 function PubliciseCards(): JSX.Element {
   const { snapId } = useParams();
   const [buttonType, setButtonType] = useState<"black" | "white" | "hidden">(
-    "black"
+    "black",
   );
   const [showAllChannels, setShowAllChannels] = useState<boolean>(true);
   const [showSummary, setShowSummary] = useState<boolean>(true);
@@ -35,7 +35,7 @@ function PubliciseCards(): JSX.Element {
   }
 
   const iframeQueryString = new URLSearchParams(
-    iframeQueryParameters
+    iframeQueryParameters,
   ).toString();
 
   const htmlSnippet = `<iframe src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}"width="100%" height="990px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
@@ -87,7 +87,7 @@ function PubliciseCards(): JSX.Element {
               onChange={(
                 e: SyntheticEvent<HTMLInputElement> & {
                   target: HTMLInputElement;
-                }
+                },
               ) => {
                 setShowAllChannels(e.target.checked);
               }}
@@ -98,7 +98,7 @@ function PubliciseCards(): JSX.Element {
               onChange={(
                 e: SyntheticEvent<HTMLInputElement> & {
                   target: HTMLInputElement;
-                }
+                },
               ) => {
                 setShowSummary(e.target.checked);
               }}
@@ -109,7 +109,7 @@ function PubliciseCards(): JSX.Element {
               onChange={(
                 e: SyntheticEvent<HTMLInputElement> & {
                   target: HTMLInputElement;
-                }
+                },
               ) => {
                 setShowScreenshot(e.target.checked);
               }}
diff --git a/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
index 96a11d248d..b2c48a1b14 100644
--- a/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
+++ b/static/js/publisher-pages/pages/Publicise/__tests__/Publicise.test.tsx
@@ -18,7 +18,7 @@ const renderComponent = (view?: "badges" | "cards" | undefined) => {
   );
 };
 
-let mockPubliciseData = {
+const mockPubliciseData = {
   is_released: true,
   private: false,
   trending: false,
diff --git a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
index e4cce182fa..71e9d8a677 100644
--- a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
+++ b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
@@ -56,7 +56,7 @@ function SettingsForm({ settings }: Props) {
 
   const isDirty = formState.isDirty;
   const isValid = formState.isValid;
-  const dirtyFields: { [key: string]: any } = formState.dirtyFields;
+  const dirtyFields: { [key: string]: unknown } = formState.dirtyFields;
 
   const whitelistCountryKeyValues = useWatch({
     control,
@@ -68,7 +68,7 @@ function SettingsForm({ settings }: Props) {
     name: "blacklist_country_keys",
   });
 
-  const onSubmit = (data: any) => {
+  const onSubmit = (data: SettingsData) => {
     if (getValues("update_metadata_on_release") && dirtyFields.visibility) {
       setShowMetadataWarningModal(true);
       setFormData(data);
@@ -77,7 +77,7 @@ function SettingsForm({ settings }: Props) {
     }
   };
 
-  const submitForm = async (data: any) => {
+  const submitForm = async (data: SettingsData) => {
     setIsSaving(true);
     setHasSaved(false);
     setSavedError(false);
@@ -312,9 +312,13 @@ function SettingsForm({ settings }: Props) {
                     data={countries}
                     field="whitelist_country_keys"
                     currentValues={settingsData?.whitelist_countries}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     register={register}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     setValue={setValue}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     getValues={getValues}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     control={control}
                     disabled={getValues("country_keys_status") === "exclude"}
                   />
@@ -335,9 +339,13 @@ function SettingsForm({ settings }: Props) {
                     data={countries}
                     field="blacklist_country_keys"
                     currentValues={settingsData?.blacklist_countries}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     register={register}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     setValue={setValue}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     getValues={getValues}
+                    // @ts-expect-error Conflict between React Query and React Hook Form
                     control={control}
                     disabled={getValues("country_keys_status") === "include"}
                   />
@@ -504,6 +512,7 @@ function SettingsForm({ settings }: Props) {
       {showMetadataWarningModal ? (
         <UpdateMetadataModal
           setShowMetadataWarningModal={setShowMetadataWarningModal}
+          // @ts-expect-error Conflict between React Query and React Hook Form
           submitForm={submitForm}
           formData={formData}
         />
diff --git a/static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx b/static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx
index eac2f59afb..446e76561b 100644
--- a/static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx
+++ b/static/js/publisher-pages/pages/Settings/UnregisterSnapModal.tsx
@@ -1,11 +1,11 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { Button, Modal } from "@canonical/react-components";
 
 type UnregisterSnapModalProps = {
   snapName: string;
-  setUnregisterModalOpen: Function;
-  setUnregisterError: Function;
-  setUnregisterErrorMessage: Function;
+  setUnregisterModalOpen: Dispatch<SetStateAction<boolean>>;
+  setUnregisterError: Dispatch<SetStateAction<boolean>>;
+  setUnregisterErrorMessage: Dispatch<SetStateAction<string>>;
 };
 
 export function UnregisterSnapModal({
diff --git a/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx b/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
index d2ce535ef6..7050a35290 100644
--- a/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
+++ b/static/js/publisher-pages/pages/Settings/__tests__/UnregisterSnapModal.test.tsx
@@ -9,7 +9,7 @@ global.fetch = jest.fn(() =>
   Promise.resolve({
     ok: true,
     json: () => Promise.resolve({}),
-  })
+  }),
 ) as jest.Mock;
 
 const mockSetUnregisterModalOpen = jest.fn();
@@ -68,7 +68,7 @@ describe("UnregisterSnapModal", () => {
           headers: {
             "X-CSRFToken": window["CSRF_TOKEN"],
           },
-        })
+        }),
       );
       expect(window.location.href).toBe("/snaps");
     });
@@ -80,7 +80,7 @@ describe("UnregisterSnapModal", () => {
       Promise.resolve({
         ok: false,
         json: () => Promise.resolve({ error: "Some error occurred" }),
-      })
+      }),
     );
     render(<UnregisterSnapModal {...defaultProps} />);
     await user.click(screen.getByText("Unregister"));
@@ -88,7 +88,7 @@ describe("UnregisterSnapModal", () => {
       expect(mockSetUnregisterModalOpen).toHaveBeenCalledWith(false);
       expect(mockSetUnregisterError).toHaveBeenCalledWith(true);
       expect(mockSetUnregisterErrorMessage).toHaveBeenCalledWith(
-        "Some error occurred"
+        "Some error occurred",
       );
     });
   });
@@ -97,7 +97,7 @@ describe("UnregisterSnapModal", () => {
     const user = userEvent.setup();
     console.error = jest.fn();
     (global.fetch as jest.Mock).mockImplementationOnce(() =>
-      Promise.reject("Fetch error")
+      Promise.reject("Fetch error"),
     );
     render(<UnregisterSnapModal {...defaultProps} />);
     await user.click(screen.getByText("Unregister"));
diff --git a/static/js/publisher-pages/utils/formatImageChanges.ts b/static/js/publisher-pages/utils/formatImageChanges.ts
index 3cdfe77992..5d434a85ea 100644
--- a/static/js/publisher-pages/utils/formatImageChanges.ts
+++ b/static/js/publisher-pages/utils/formatImageChanges.ts
@@ -24,7 +24,7 @@ export default function formatImageChanges(
   }
 
   if (screenshotUrls.length) {
-    screenshotUrls.forEach((url, i) => {
+    screenshotUrls.forEach((url) => {
       images.push({
         url,
         type: "screenshot",
diff --git a/static/js/publisher-pages/utils/getDefaultListingData.ts b/static/js/publisher-pages/utils/getDefaultListingData.ts
index 5afe6aca79..01165f8918 100644
--- a/static/js/publisher-pages/utils/getDefaultListingData.ts
+++ b/static/js/publisher-pages/utils/getDefaultListingData.ts
@@ -37,7 +37,7 @@ function getPublicMetricsDistrosValue(
 }
 
 export default function getDefaultListingData(data: ListingData): {
-  [key: string]: any;
+  [key: string]: unknown;
 } {
   return {
     contacts: data.contacts,
diff --git a/static/js/publisher-pages/utils/getListingChanges.ts b/static/js/publisher-pages/utils/getListingChanges.ts
index 34aad3744e..28233f0f4d 100644
--- a/static/js/publisher-pages/utils/getListingChanges.ts
+++ b/static/js/publisher-pages/utils/getListingChanges.ts
@@ -1,13 +1,32 @@
+import { FieldValues } from "react-hook-form";
+
 import formatImageChanges from "./formatImageChanges";
 
 import type { ListingData } from "../types";
 
 export default function getListingChanges(
-  dirtyFields: any,
-  fieldValues: any,
+  dirtyFields: { [key: string]: boolean },
+  fieldValues: FieldValues,
   data: ListingData,
-): { [key: string]: any } {
-  const changes: { [key: string]: any } = {};
+) {
+  const changes: {
+    [key: string]: unknown;
+    images?: {
+      url: string;
+      type: string;
+      status: string;
+      name?: string;
+    }[];
+    links?: {
+      website: string[];
+      donations: string[];
+      contact: string[];
+      issues: string[];
+      source: string[];
+    };
+    categories?: string[] | undefined;
+    public_metrics_blacklist?: string[];
+  } = {};
 
   if (
     dirtyFields.banner_urls ||
diff --git a/static/js/publisher-pages/utils/getSettingsChanges.ts b/static/js/publisher-pages/utils/getSettingsChanges.ts
index 26fd5ad7b4..88ba36539d 100644
--- a/static/js/publisher-pages/utils/getSettingsChanges.ts
+++ b/static/js/publisher-pages/utils/getSettingsChanges.ts
@@ -1,5 +1,10 @@
-function getSettingsChanges(dirtyFields: { [key: string]: any }, data: any) {
-  const changes: { [key: string]: any } = {};
+import type { SettingsData } from "../types";
+
+function getSettingsChanges(
+  dirtyFields: { [key: string]: unknown },
+  data: SettingsData,
+) {
+  const changes: { [key: string]: unknown } = {};
 
   if (dirtyFields?.visibility) {
     if (data?.visibility === "public") {
diff --git a/static/js/publisher-pages/utils/getSettingsFormData.ts b/static/js/publisher-pages/utils/getSettingsFormData.ts
index 93a264d006..0b2a44702d 100644
--- a/static/js/publisher-pages/utils/getSettingsFormData.ts
+++ b/static/js/publisher-pages/utils/getSettingsFormData.ts
@@ -4,8 +4,8 @@ import type { SettingsData } from "../types";
 
 function getSettingsFormData(
   settingsData: SettingsData,
-  dirtyFields: { [key: string]: any },
-  data: any,
+  dirtyFields: { [key: string]: unknown },
+  data: SettingsData,
 ) {
   const changes = getSettingsChanges(dirtyFields, data);
   const formData = new FormData();
diff --git a/static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts b/static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts
index f02262ca9d..9580c9d1f1 100644
--- a/static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts
+++ b/static/js/publisher-pages/utils/shouldShowUpdateMetadataWarning.ts
@@ -1,5 +1,5 @@
 interface DirtyField {
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 function shouldShowUpdateMetadataWarning(dirtyFields: DirtyField) {

From e69125fce71153db94fe6326a6de01757ce1c485 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 10:23:41 +0000
Subject: [PATCH 17/24] fix: Fix a11y errors in builds section (#4922)

---
 .../publisher-pages/pages/Builds/RepoSelector.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/static/js/publisher-pages/pages/Builds/RepoSelector.tsx b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
index 78b9d72cfd..e72d6aca04 100644
--- a/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
+++ b/static/js/publisher-pages/pages/Builds/RepoSelector.tsx
@@ -1,7 +1,14 @@
 import { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
-import { Strip, Row, Col, Select, Button } from "@canonical/react-components";
+import {
+  Strip,
+  Row,
+  Col,
+  Select,
+  Button,
+  Input,
+} from "@canonical/react-components";
 
 import { buildRepoConnectedState } from "../../state/atoms";
 
@@ -170,10 +177,10 @@ function RepoSelector({ githubData, setAutoTriggerBuild }: Props) {
         Your repo needs a snapcraft.yaml file, so that Snapcraft can make it
         buildable, installable, and runnable.
       </p>
-      <label className="p-form__label">Select a repository:</label>
       <Row>
         <Col size={4}>
           <Select
+            label="Select an organization"
             defaultValue=""
             options={[
               { label: "Select organization", value: "" },
@@ -191,8 +198,9 @@ function RepoSelector({ githubData, setAutoTriggerBuild }: Props) {
           className={`p-form-validation ${getValidationStatusClassName()}`}
           style={{ position: "relative" }}
         >
-          <input
+          <Input
             type="text"
+            label="Select a repository"
             list="repo-list"
             placeholder="Search your repos"
             disabled={selectedOrg === null || validating}

From d6aee20fb0c793ad2a113c0d15810ba9d7f3a7a9 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 10:24:00 +0000
Subject: [PATCH 18/24] fix: Fix publisher a11y errors in the publicise cards
 section (#4923)

---
 .../pages/Publicise/PubliciseCards.tsx                | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
index 4c5db698a4..c73bc463a4 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
@@ -38,13 +38,13 @@ function PubliciseCards(): JSX.Element {
     iframeQueryParameters,
   ).toString();
 
-  const htmlSnippet = `<iframe src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}"width="100%" height="990px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
+  const htmlSnippet = `<iframe title="Publicise card" src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}"width="100%" height="990px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
 
   return (
     <>
       <Row>
         <Col size={2}>
-          <label>Snap Store button:</label>
+          <p>Snap Store button:</p>
         </Col>
         <Col size={10}>
           <p>
@@ -77,7 +77,7 @@ function PubliciseCards(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>Options:</label>
+          <p>Options:</p>
         </Col>
         <Col size={10}>
           <p>
@@ -119,11 +119,12 @@ function PubliciseCards(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>Preview:</label>
+          <p>Preview:</p>
         </Col>
         <Col size={8}>
           <p>
             <iframe
+              title="Card preview"
               src={`/${snapId}/embedded?${iframeQueryString}`}
               width="100%"
               style={{
@@ -137,7 +138,7 @@ function PubliciseCards(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>HTML:</label>
+          <p>HTML:</p>
         </Col>
         <Col size={10}>
           <div className="p-code-snippet">

From e192b7af1425adb856e856f39135d3c7723eb397 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 10:28:57 +0000
Subject: [PATCH 19/24] fix: Fix publisher a11y errors in publicise badges
 section (#4924)

---
 .../publisher-pages/pages/Publicise/PubliciseBadges.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
index b422d157a1..ddb40bb1c6 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseBadges.tsx
@@ -37,7 +37,7 @@ function PubliciseBadges({ trending }: Props): JSX.Element {
     <>
       <Row>
         <Col size={2}>
-          <label>Display:</label>
+          <p>Display:</p>
         </Col>
         <Col size={10}>
           <CheckboxInput
@@ -81,7 +81,7 @@ function PubliciseBadges({ trending }: Props): JSX.Element {
         <>
           <Row>
             <Col size={2}>
-              <label>Preview:</label>
+              <p>Preview:</p>
             </Col>
             <Col size={10}>
               <p>
@@ -111,7 +111,7 @@ function PubliciseBadges({ trending }: Props): JSX.Element {
           </Row>
           <Row>
             <Col size={2}>
-              <label>HTML:</label>
+              <p>HTML:</p>
             </Col>
             <Col size={10}>
               <div className="p-code-snippet">
@@ -125,7 +125,7 @@ function PubliciseBadges({ trending }: Props): JSX.Element {
           </Row>
           <Row>
             <Col size={2}>
-              <label>Markdown:</label>
+              <p>Markdown:</p>
             </Col>
             <Col size={10}>
               <div className="p-code-snippet">

From 8ecf8eb549e69eb51d67a0068341a3870ba54812 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 10:47:58 +0000
Subject: [PATCH 20/24] fix: Fix publisher a11y errors in publicise buttons
 section (#4925)

---
 .../pages/Publicise/PubliciseButtons.tsx             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
index 1f0a0aad67..760079b56f 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
@@ -46,7 +46,7 @@ function PubliciseButtons(): JSX.Element {
     <>
       <Row>
         <Col size={2}>
-          <label>Language:</label>
+          <p>Language:</p>
         </Col>
         <Col size={10}>
           <Select
@@ -86,7 +86,7 @@ function PubliciseButtons(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>HTML:</label>
+          <p>HTML:</p>
         </Col>
         <Col size={10}>
           <div className="p-code-snippet">
@@ -96,7 +96,7 @@ function PubliciseButtons(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>Markdown:</label>
+          <p>Markdown:</p>
         </Col>
         <Col size={10}>
           <div className="p-code-snippet">
@@ -121,7 +121,7 @@ function PubliciseButtons(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>HTML:</label>
+          <p>HTML:</p>
         </Col>
         <Col size={10}>
           <div className="p-code-snippet">
@@ -131,7 +131,7 @@ function PubliciseButtons(): JSX.Element {
       </Row>
       <Row>
         <Col size={2}>
-          <label>Markdown:</label>
+          <p>Markdown:</p>
         </Col>
         <Col size={10}>
           <div className="p-code-snippet">
@@ -144,7 +144,7 @@ function PubliciseButtons(): JSX.Element {
       <hr />
       <Row>
         <Col size={2}>
-          <label>Download all:</label>
+          <p>Download all:</p>
         </Col>
         <Col size={10}>
           <a

From 1d92a4b16dff18787521213d9f9bdb5b126a987c Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 11:06:52 +0000
Subject: [PATCH 21/24] fix: Fix publisher a11y errors in settings section
 (#4926)

---
 .../pages/Settings/SettingsForm.tsx           | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
index 71e9d8a677..c8d31f32b5 100644
--- a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
+++ b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
@@ -129,6 +129,16 @@ function SettingsForm({ settings }: Props) {
     window.scrollTo(0, 0);
   };
 
+  const getPublishedStatus = () => {
+    if (!settingsData || !settingsData.status) {
+      return "No status";
+    }
+
+    return (
+      settingsData.status.charAt(0).toUpperCase() + settingsData.status.slice(1)
+    );
+  };
+
   useEffect(() => {
     if (whitelistCountryKeyValues) {
       setValue("blacklist_country_keys", "");
@@ -407,9 +417,9 @@ function SettingsForm({ settings }: Props) {
 
           <Row className="p-form__group">
             <Col size={2}>
-              <label className="p-form__label" id="collaboration-label">
+              <p id="collaboration-label" style={{ marginBottom: ".625rem" }}>
                 Collaboration:
-              </label>
+              </p>
             </Col>
             <Col size={8}>
               <div
@@ -431,9 +441,9 @@ function SettingsForm({ settings }: Props) {
 
           <Row className="p-form__group">
             <Col size={2}>
-              <label className="p-form__label" id="store-label">
+              <p id="store-label" style={{ marginBottom: ".625rem" }}>
                 Store:
-              </label>
+              </p>
             </Col>
             <Col size={8}>
               <div className="p-form__control" aria-labelledby="store-label">
@@ -456,9 +466,9 @@ function SettingsForm({ settings }: Props) {
               />
             )}
             <Col size={2}>
-              <label className="p-form__label" id="status-label">
+              <p id="status-label" style={{ marginBottom: ".625rem" }}>
                 Status:
-              </label>
+              </p>
             </Col>
             <Col size={8}>
               <div className="p-form__control" aria-labelledby="status-label">
@@ -489,8 +499,7 @@ function SettingsForm({ settings }: Props) {
                     )}
                   </div>
                 ) : (
-                  (settingsData?.status).charAt(0).toUpperCase() +
-                  (settingsData?.status).slice(1)
+                  getPublishedStatus()
                 )}
               </div>
             </Col>

From ca89c9e9181248b9e6ae08c4d8efe49535cc7357 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 14:10:16 +0000
Subject: [PATCH 22/24] fix: Fix a11y errors in license search (#4928)

---
 .../AdditionalInformation/LicenseSearch.tsx    | 18 ++++++++++++++----
 .../Listing/ListingDetails/ListingDetails.tsx  |  5 +++--
 static/sass/_patterns_form-multiselect.scss    |  1 -
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
index 28ccbdee28..f54729d9ac 100644
--- a/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
+++ b/static/js/publisher-pages/pages/Listing/AdditionalInformation/LicenseSearch.tsx
@@ -7,6 +7,7 @@ import {
 } from "react";
 import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
 import Downshift from "downshift";
+import { Button } from "@canonical/react-components";
 
 import debounce from "../../../../libs/debounce";
 
@@ -109,8 +110,15 @@ function LicenseSearch({
                 key={selectedLicense?.key}
               >
                 {selectedLicense?.name}
-                <i
-                  className="p-icon--close p-multiselect__item-remove"
+                <Button
+                  type="button"
+                  style={{
+                    backgroundColor: "transparent",
+                    border: 0,
+                    color: "inherit",
+                    margin: 0,
+                    padding: 0,
+                  }}
                   onClick={() => {
                     const newSelectedLicenses: (License | undefined)[] =
                       selectedLicenses.filter(
@@ -127,8 +135,10 @@ function LicenseSearch({
                     });
                   }}
                 >
-                  Remove license
-                </i>
+                  <i className="p-icon--close p-multiselect__item-remove">
+                    Remove license
+                  </i>
+                </Button>
               </span>
             ))}
             <input
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
index 8fd9118eee..eea5f4d231 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
@@ -303,9 +303,10 @@ function ListingDetails({
                 </p>
                 <p>
                   <small>
-                    <strong>Code</strong>: Text indented with 3 spaces or inside single backticks
+                    <strong>Code</strong>: Text indented with 3 spaces or inside
+                    single backticks
                   </small>
-                  <code>`code`</code> 
+                  <code>`code`</code>
                 </p>
               </Col>
             </Row>
diff --git a/static/sass/_patterns_form-multiselect.scss b/static/sass/_patterns_form-multiselect.scss
index da3f3867a6..0b3cff272b 100644
--- a/static/sass/_patterns_form-multiselect.scss
+++ b/static/sass/_patterns_form-multiselect.scss
@@ -52,7 +52,6 @@
       .p-multiselect__item-remove {
         cursor: pointer;
         height: 0.75em;
-        margin-bottom: 0.125rem;
         margin-left: 0.5rem;
         width: 0.75em;
       }

From bc933435c7e1e8248a4a921a612f29ea68047eac Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Thu, 5 Dec 2024 14:28:07 +0000
Subject: [PATCH 23/24] fix: Fix a11y errors in search autocomplete (#4929)

---
 .../SearchAutocomplete/SearchAutocomplete.tsx  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
index 46d59d8a2b..fa89adb7d2 100644
--- a/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
+++ b/static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -8,6 +8,7 @@ import {
   Control,
   FieldValues,
 } from "react-hook-form";
+import { Button } from "@canonical/react-components";
 
 type DataItem = {
   key: string;
@@ -86,8 +87,15 @@ function SearchAutocomplete({
           {selections.map((suggestion: DataItem) => (
             <span key={suggestion.key} className="p-multiselect__item">
               {suggestion.name}
-              <i
-                className="p-icon--close p-multiselect__item-remove"
+              <Button
+                type="button"
+                style={{
+                  backgroundColor: "transparent",
+                  border: 0,
+                  color: "inherit",
+                  margin: 0,
+                  padding: 0,
+                }}
                 onClick={() => {
                   const newSelections = selections.filter(
                     (item: DataItem) => item.key !== suggestion.key,
@@ -101,8 +109,10 @@ function SearchAutocomplete({
                   });
                 }}
               >
-                Remove suggestion
-              </i>
+                <i className="p-icon--close p-multiselect__item-remove">
+                  Remove suggestion
+                </i>
+              </Button>
             </span>
           ))}
 

From 74e7a1ebe9a14a133baf3cc18ea0b457ec34f47d Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Fri, 6 Dec 2024 12:03:08 +0000
Subject: [PATCH 24/24] chore: Remove legacy publisher JS (#4930)

fix: Ignore metrics TS errors for now (#4933)

fix: Fix checkbox values resetting in publisher settings form (#4937)

fix: Fix primary website field clearing on revert (#4938)

fix: Make sure Edit button on preview page closes current tab (#4939)

fix: Fix deleting icon or banner not activating save button (#4940)

fix: render selected language in HTML and markdown snippets (#4942)

fix: remove extra whitespace in embeddable card (#4943)

fix: Fix missing contact links in preview (#4944)

fix: Fix preview card button being squashed (#4945)

fix: Fix display of releases table (#4946)

fix: Add loading state to single build page (#4947)

fix: ensure markdown is rendered correctly (#4948)

fix: build page showing stale data while fetching logs (#4949)

fix: Fix missing banner in listing publisher page (#4950)

fix: Fix form not resetting when making changes to images (#4952)
---
 .eslintrc.js                                  |   3 +-
 static/js/public/snap-details/embeddedCard.ts |   2 +-
 .../snap-details}/lightbox.ts                 |   6 +-
 .../snap-details}/publicise.ts                |   0
 static/js/public/snap-details/screenshots.ts  |   2 +-
 .../components/SectionNav/SectionNav.tsx      |   3 +-
 .../hooks/useMutateListingData.ts             |  15 +-
 .../js/publisher-pages/pages/Build/Build.tsx  |  55 +-
 .../ContactInformation/PrimaryDomainInput.tsx |   1 +
 .../__tests__/PrimaryDomainInput.test.tsx     |   2 +-
 .../Listing/ListingDetails/ImageUpload.tsx    |  34 +-
 .../Listing/ListingDetails/ListingDetails.tsx |   2 +
 .../pages/Listing/ListingForm/ListingForm.tsx |   4 +-
 .../pages/Listing/PreviewForm/PreviewForm.tsx |  34 +-
 .../pages/Metrics/ActiveDeviceMetrics.tsx     |   2 +-
 .../pages/Metrics/TerritoryMetrics.tsx        |   2 +-
 .../__tests__/ActiveDeviceMetrics.test.tsx    |   2 +-
 .../__tests__/TerritoryMetrics.test.tsx       |   2 +-
 .../pages/Metrics}/__tests__/arrays.test.ts   |   2 +-
 .../pages/Metrics/metrics}/arrays.ts          |   0
 .../pages/Metrics}/metrics/axis.ts            |   0
 .../pages/Metrics}/metrics/config.js          |   0
 .../pages/Metrics}/metrics/filters.js         |   0
 .../activeDevicesGraph/dataProcessing.ts      |  18 +-
 .../graphs/activeDevicesGraph/index.ts        |   8 +-
 .../graphs/activeDevicesGraph/rendering.js    |   0
 .../graphs/activeDevicesGraph/tooltips.ts     |  12 +-
 .../pages/Metrics}/metrics/graphs/installs.ts |   2 +-
 .../Metrics/metrics/graphs/territories.js     |   5 +
 .../pages/Metrics}/metrics/metrics.ts         |  28 +-
 .../pages/Publicise/PubliciseButtons.tsx      |  22 +-
 .../pages/Publicise/PubliciseCards.tsx        |  24 +-
 .../pages/Releases/Releases.tsx               |   2 +-
 .../Releases/components/releasesHeading.js    | 192 +++---
 .../pages/Settings/SettingsForm.tsx           |  16 +
 .../__tests__/formatImageChanges.test.ts      |   1 -
 .../__tests__/getDefaultListingData.test.ts   |   1 -
 .../utils/formatImageChanges.ts               |   3 +-
 .../utils/getDefaultListingData.ts            |   1 +
 .../utils/getListingChanges.ts                |   1 -
 static/js/publisher/build-status.ts           |  60 --
 static/js/publisher/builds/helpers.ts         | 106 ----
 static/js/publisher/builds/repoDisconnect.ts  |  49 --
 static/js/publisher/form.test.js              | 269 --------
 static/js/publisher/form.ts                   | 598 ------------------
 static/js/publisher/form/AccordionHelp.js     |  55 --
 .../js/publisher/form/AccordionHelp.test.js   |  22 -
 static/js/publisher/form/banner.js            | 216 -------
 static/js/publisher/form/banner.test.js       | 153 -----
 static/js/publisher/form/fileInput.js         | 230 -------
 static/js/publisher/form/fileInput.test.js    | 204 ------
 static/js/publisher/form/icon.js              | 159 -----
 static/js/publisher/form/icon.test.js         | 106 ----
 static/js/publisher/form/media.js             | 182 ------
 static/js/publisher/form/media.test.js        | 256 --------
 static/js/publisher/form/mediaItem.js         |  56 --
 static/js/publisher/form/mediaList.js         |  93 ---
 static/js/publisher/market/categories.test.js | 218 -------
 static/js/publisher/market/categories.ts      |  96 ---
 static/js/publisher/market/initBanner.js      |  29 -
 static/js/publisher/market/initBanner.test.js |  21 -
 static/js/publisher/market/initIcon.js        |  25 -
 static/js/publisher/market/initIcon.test.js   |   9 -
 static/js/publisher/market/initMedia.js       |  23 -
 static/js/publisher/market/initMedia.test.js  |  21 -
 static/js/publisher/market/license.js         |  26 -
 static/js/publisher/market/lightbox.test.js   |  61 --
 static/js/publisher/market/markdown.js        |  14 -
 static/js/publisher/market/publicMetrics.js   |  33 -
 static/js/publisher/market/restrictions.js    |  82 ---
 .../js/publisher/market/stickyListingBar.js   |  18 -
 .../publisher/market/storageCommands.test.js  | 139 ----
 static/js/publisher/market/storageCommands.ts |  28 -
 .../js/publisher/market/whitelistBlacklist.js |  21 -
 .../publisher/metrics/graphs/territories.js   |   5 -
 static/js/publisher/preview.ts                | 512 ---------------
 static/js/publisher/publisher.ts              |  23 -
 .../shared/PageHeader/PageHeader.test.tsx     |  60 --
 .../shared/PageHeader/PageHeader.tsx          |  69 --
 .../js/publisher/shared/PageHeader/index.ts   |   1 -
 .../shared/RenderErrors/RenderErrors.tsx      |  28 -
 .../__tests__/RenderErrors.test.tsx           |  18 -
 .../js/publisher/shared/RenderErrors/index.ts |   1 -
 .../SaveAndPreview/SaveAndPreview.test.tsx    |  82 ---
 .../shared/SaveAndPreview/SaveAndPreview.tsx  |  98 ---
 .../publisher/shared/SaveAndPreview/index.ts  |   1 -
 .../SaveStateNotifications.tsx                |  52 --
 .../__tests__/SaveStateNotifications.test.tsx |  99 ---
 .../shared/SaveStateNotifications/index.ts    |   1 -
 .../SearchAutocomplete/SearchAutocomplete.tsx | 144 -----
 .../shared/SearchAutocomplete/index.ts        |   1 -
 .../UpdateMetadataModal.tsx                   |  53 --
 .../__tests__/UpdateMetadataModal.test.tsx    |  40 --
 .../shared/UpdateMetadataModal/index.ts       |   1 -
 static/js/publisher/state.js                  | 104 ---
 static/js/publisher/state.test.js             | 161 -----
 static/js/publisher/submitEnabler.test.js     | 135 ----
 static/js/publisher/submitEnabler.ts          |  61 --
 static/js/publisher/tour.tsx                  | 119 ----
 .../js/publisher/tour/__mocks__/constants.ts  |   8 -
 static/js/publisher/tour/constants.ts         |   8 -
 static/js/publisher/tour/helpers.ts           | 115 ----
 .../js/publisher/tour/metricsEvents.test.ts   |  59 --
 static/js/publisher/tour/metricsEvents.ts     |  33 -
 static/js/publisher/tour/tour.test.tsx        | 164 -----
 static/js/publisher/tour/tour.tsx             |  52 --
 static/js/publisher/tour/tourBar.tsx          |  20 -
 static/js/publisher/tour/tourOverlay.test.tsx | 207 ------
 static/js/publisher/tour/tourOverlay.tsx      | 175 -----
 static/js/publisher/tour/tourOverlayMask.tsx  |  38 --
 .../js/publisher/tour/tourStepCard.test.tsx   | 190 ------
 static/js/publisher/tour/tourStepCard.tsx     | 114 ----
 static/js/publisher/types/releaseTypes.d.ts   |  92 ---
 static/sass/styles-embedded.scss              |   2 +
 static/sass/styles.scss                       |  15 +
 templates/publisher/account-snaps.html        |   4 -
 .../publisher/publicise/store_buttons.html    |   4 -
 templates/store/snap-details.html             |  13 +-
 templates/store/snap-details/_details.html    |  10 +
 templates/store/snap-embedded-card.html       |   4 +-
 webapp/markdown.py                            |   4 +-
 webapp/publisher/snaps/publicise_views.py     |   1 -
 webpack.config.entry.js                       |   4 -
 webpack.config.rules.js                       |   8 -
 124 files changed, 340 insertions(+), 7060 deletions(-)
 rename static/js/{publisher/market => public/snap-details}/lightbox.ts (97%)
 rename static/js/{publisher => public/snap-details}/publicise.ts (100%)
 rename static/js/{libs => publisher-pages/pages/Metrics}/__tests__/arrays.test.ts (97%)
 rename static/js/{libs => publisher-pages/pages/Metrics/metrics}/arrays.ts (100%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/axis.ts (100%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/config.js (100%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/filters.js (100%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/graphs/activeDevicesGraph/dataProcessing.ts (96%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/graphs/activeDevicesGraph/index.ts (95%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/graphs/activeDevicesGraph/rendering.js (100%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/graphs/activeDevicesGraph/tooltips.ts (97%)
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/graphs/installs.ts (96%)
 create mode 100644 static/js/publisher-pages/pages/Metrics/metrics/graphs/territories.js
 rename static/js/{publisher => publisher-pages/pages/Metrics}/metrics/metrics.ts (93%)
 delete mode 100644 static/js/publisher/build-status.ts
 delete mode 100644 static/js/publisher/builds/helpers.ts
 delete mode 100644 static/js/publisher/builds/repoDisconnect.ts
 delete mode 100644 static/js/publisher/form.test.js
 delete mode 100644 static/js/publisher/form.ts
 delete mode 100644 static/js/publisher/form/AccordionHelp.js
 delete mode 100644 static/js/publisher/form/AccordionHelp.test.js
 delete mode 100644 static/js/publisher/form/banner.js
 delete mode 100644 static/js/publisher/form/banner.test.js
 delete mode 100644 static/js/publisher/form/fileInput.js
 delete mode 100644 static/js/publisher/form/fileInput.test.js
 delete mode 100644 static/js/publisher/form/icon.js
 delete mode 100644 static/js/publisher/form/icon.test.js
 delete mode 100644 static/js/publisher/form/media.js
 delete mode 100644 static/js/publisher/form/media.test.js
 delete mode 100644 static/js/publisher/form/mediaItem.js
 delete mode 100644 static/js/publisher/form/mediaList.js
 delete mode 100644 static/js/publisher/market/categories.test.js
 delete mode 100644 static/js/publisher/market/categories.ts
 delete mode 100644 static/js/publisher/market/initBanner.js
 delete mode 100644 static/js/publisher/market/initBanner.test.js
 delete mode 100644 static/js/publisher/market/initIcon.js
 delete mode 100644 static/js/publisher/market/initIcon.test.js
 delete mode 100644 static/js/publisher/market/initMedia.js
 delete mode 100644 static/js/publisher/market/initMedia.test.js
 delete mode 100644 static/js/publisher/market/license.js
 delete mode 100644 static/js/publisher/market/lightbox.test.js
 delete mode 100644 static/js/publisher/market/markdown.js
 delete mode 100644 static/js/publisher/market/publicMetrics.js
 delete mode 100644 static/js/publisher/market/restrictions.js
 delete mode 100644 static/js/publisher/market/stickyListingBar.js
 delete mode 100644 static/js/publisher/market/storageCommands.test.js
 delete mode 100644 static/js/publisher/market/storageCommands.ts
 delete mode 100644 static/js/publisher/market/whitelistBlacklist.js
 delete mode 100644 static/js/publisher/metrics/graphs/territories.js
 delete mode 100644 static/js/publisher/preview.ts
 delete mode 100644 static/js/publisher/publisher.ts
 delete mode 100644 static/js/publisher/shared/PageHeader/PageHeader.test.tsx
 delete mode 100644 static/js/publisher/shared/PageHeader/PageHeader.tsx
 delete mode 100644 static/js/publisher/shared/PageHeader/index.ts
 delete mode 100644 static/js/publisher/shared/RenderErrors/RenderErrors.tsx
 delete mode 100644 static/js/publisher/shared/RenderErrors/__tests__/RenderErrors.test.tsx
 delete mode 100644 static/js/publisher/shared/RenderErrors/index.ts
 delete mode 100644 static/js/publisher/shared/SaveAndPreview/SaveAndPreview.test.tsx
 delete mode 100644 static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
 delete mode 100644 static/js/publisher/shared/SaveAndPreview/index.ts
 delete mode 100644 static/js/publisher/shared/SaveStateNotifications/SaveStateNotifications.tsx
 delete mode 100644 static/js/publisher/shared/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
 delete mode 100644 static/js/publisher/shared/SaveStateNotifications/index.ts
 delete mode 100644 static/js/publisher/shared/SearchAutocomplete/SearchAutocomplete.tsx
 delete mode 100644 static/js/publisher/shared/SearchAutocomplete/index.ts
 delete mode 100644 static/js/publisher/shared/UpdateMetadataModal/UpdateMetadataModal.tsx
 delete mode 100644 static/js/publisher/shared/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
 delete mode 100644 static/js/publisher/shared/UpdateMetadataModal/index.ts
 delete mode 100644 static/js/publisher/state.js
 delete mode 100644 static/js/publisher/state.test.js
 delete mode 100644 static/js/publisher/submitEnabler.test.js
 delete mode 100644 static/js/publisher/submitEnabler.ts
 delete mode 100644 static/js/publisher/tour.tsx
 delete mode 100644 static/js/publisher/tour/__mocks__/constants.ts
 delete mode 100644 static/js/publisher/tour/constants.ts
 delete mode 100644 static/js/publisher/tour/helpers.ts
 delete mode 100644 static/js/publisher/tour/metricsEvents.test.ts
 delete mode 100644 static/js/publisher/tour/metricsEvents.ts
 delete mode 100644 static/js/publisher/tour/tour.test.tsx
 delete mode 100644 static/js/publisher/tour/tour.tsx
 delete mode 100644 static/js/publisher/tour/tourBar.tsx
 delete mode 100644 static/js/publisher/tour/tourOverlay.test.tsx
 delete mode 100644 static/js/publisher/tour/tourOverlay.tsx
 delete mode 100644 static/js/publisher/tour/tourOverlayMask.tsx
 delete mode 100644 static/js/publisher/tour/tourStepCard.test.tsx
 delete mode 100644 static/js/publisher/tour/tourStepCard.tsx
 delete mode 100644 static/js/publisher/types/releaseTypes.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index ce76f657d9..ec1e427ae6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -44,7 +44,8 @@ module.exports = {
     },
   ],
   ignorePatterns: [
-    "/static/js/publisher", // skip linting any files in the publisher directory
     "/static/js/publisher-pages/pages/Releases", // skip releases for now as structural changes are required to fix TS
+    "/static/js/publisher-pages/pages/Metrics/metrics", // skip metrics for now as structural changes are required to fix TS
+    "/static/js/public/snap-details/publicise.ts", // skip publicise for now as structual changes are required to fix tS
   ],
 };
diff --git a/static/js/public/snap-details/embeddedCard.ts b/static/js/public/snap-details/embeddedCard.ts
index fc2fccd119..68de4b6bab 100644
--- a/static/js/public/snap-details/embeddedCard.ts
+++ b/static/js/public/snap-details/embeddedCard.ts
@@ -1,4 +1,4 @@
-import { initEmbeddedCardPicker } from "../../publisher/publicise";
+import { initEmbeddedCardPicker } from "./publicise";
 
 const showEl = (el: { classList: { remove: (arg0: string) => void } }) =>
   el.classList.remove("u-hide");
diff --git a/static/js/publisher/market/lightbox.ts b/static/js/public/snap-details/lightbox.ts
similarity index 97%
rename from static/js/publisher/market/lightbox.ts
rename to static/js/public/snap-details/lightbox.ts
index c56c6666f6..c39f4ab451 100644
--- a/static/js/publisher/market/lightbox.ts
+++ b/static/js/public/snap-details/lightbox.ts
@@ -1,4 +1,4 @@
-function openLightbox(url: string, images: Array<any>) {
+function openLightbox(url: string, images: (string | undefined)[]) {
   const lightboxEl = initLightboxEl();
 
   openLightboxEl(lightboxEl, url, images);
@@ -60,7 +60,7 @@ const initLightboxEl = () => {
 const loadLightboxImage = (
   lightboxEl: HTMLElement,
   url: string | undefined,
-  images: Array<any>,
+  images: (string | undefined)[],
 ) => {
   const contentEl = lightboxEl.querySelector(".vbox-content") as HTMLElement;
 
@@ -156,7 +156,7 @@ const loadLightboxImage = (
 const openLightboxEl = (
   lightboxEl: HTMLElement,
   url: string,
-  images: Array<any>,
+  images: (string | undefined)[],
 ) => {
   // prepare navigating to next/prev images
   if (images && images.length) {
diff --git a/static/js/publisher/publicise.ts b/static/js/public/snap-details/publicise.ts
similarity index 100%
rename from static/js/publisher/publicise.ts
rename to static/js/public/snap-details/publicise.ts
diff --git a/static/js/public/snap-details/screenshots.ts b/static/js/public/snap-details/screenshots.ts
index e5d04c33dd..ca92389b4c 100644
--- a/static/js/public/snap-details/screenshots.ts
+++ b/static/js/public/snap-details/screenshots.ts
@@ -1,4 +1,4 @@
-import lightbox from "./../../publisher/market/lightbox";
+import lightbox from "./lightbox";
 import Swiper from "swiper";
 import { Navigation } from "swiper/modules";
 import { SCREENSHOTS_CONFIG } from "../../config/swiper.config";
diff --git a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
index da7acf4e42..7ddf6e0328 100644
--- a/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
+++ b/static/js/publisher-pages/components/SectionNav/SectionNav.tsx
@@ -26,7 +26,8 @@ function SectionNav({ activeTab, snapName }: Props) {
         {
           label: "Releases",
           active: activeTab === "releases",
-          href: `/${snapName}/releases`,
+          to: `/${snapName}/releases`,
+          component: Link,
         },
         {
           label: "Metrics",
diff --git a/static/js/publisher-pages/hooks/useMutateListingData.ts b/static/js/publisher-pages/hooks/useMutateListingData.ts
index 652f62abf6..db3cd9f48d 100644
--- a/static/js/publisher-pages/hooks/useMutateListingData.ts
+++ b/static/js/publisher-pages/hooks/useMutateListingData.ts
@@ -21,7 +21,6 @@ type Options = {
 function useMutateListingData({
   data,
   dirtyFields,
-  getDefaultData,
   refetch,
   reset,
   setShowSuccessNotification,
@@ -86,13 +85,17 @@ function useMutateListingData({
       }
     },
     onSuccess: () => {
-      const response = refetch();
-      setShowSuccessNotification(true);
-      // @ts-expect-error Conflict between React Query and React Hook Form
-      reset(getDefaultData(response.data));
-
       const mainPanel = document.querySelector(".l-main") as HTMLElement;
       mainPanel.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+      refetch();
+      setShowSuccessNotification(true);
+    },
+    onSettled: (_error, _context, data) => {
+      if (data) {
+        reset(data);
+      } else {
+        reset();
+      }
     },
   });
 }
diff --git a/static/js/publisher-pages/pages/Build/Build.tsx b/static/js/publisher-pages/pages/Build/Build.tsx
index 248f62d2f0..50478e19c1 100644
--- a/static/js/publisher-pages/pages/Build/Build.tsx
+++ b/static/js/publisher-pages/pages/Build/Build.tsx
@@ -7,8 +7,8 @@ import SectionNav from "../../components/SectionNav";
 
 function Build(): JSX.Element {
   const { buildId, snapId } = useParams();
-  const { data, isFetched } = useQuery({
-    queryKey: ["build"],
+  const { data, isFetched, isLoading, isFetching } = useQuery({
+    queryKey: ["build", snapId, buildId],
     queryFn: async () => {
       const response = await fetch(`/api/${snapId}/builds/${buildId}`);
 
@@ -24,8 +24,15 @@ function Build(): JSX.Element {
 
       return responseData.data;
     },
+    refetchOnWindowFocus: false,
   });
 
+  const isDataLoading =
+    isLoading ||
+    isFetching ||
+    !data ||
+    (data.snap_build && data.snap_build.id.toString() !== buildId);
+
   return (
     <>
       <h1 className="p-heading--4">
@@ -33,8 +40,16 @@ function Build(): JSX.Element {
         <Link to={`/${snapId}/builds`}>Builds</Link> / Build #{buildId}
       </h1>
       <SectionNav activeTab="builds" snapName={snapId} />
-      <Strip shallow>
-        {isFetched && data && (
+      {isDataLoading && (
+        <Strip shallow>
+          <p>
+            <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
+            {snapId} build data
+          </p>
+        </Strip>
+      )}
+      {!isDataLoading && isFetched && data && (
+        <Strip shallow>
           <MainTable
             headers={[
               { content: "id" },
@@ -60,16 +75,14 @@ function Build(): JSX.Element {
               },
             ]}
           />
-        )}
-        <Row>
-          <Col size={6}>
-            <h2 className="p-heading--4">Build log</h2>
-          </Col>
-          <Col size={6} className="u-align-text--right">
-            <a className="p-button--base" href="#footer">
-              Scroll to bottom
-            </a>
-            {isFetched && data && (
+          <Row>
+            <Col size={6}>
+              <h2 className="p-heading--4">Build log</h2>
+            </Col>
+            <Col size={6} className="u-align-text--right">
+              <a className="p-button--base" href="#footer">
+                Scroll to bottom
+              </a>
               <a
                 target="_blank"
                 href={data.snap_build.logs}
@@ -78,15 +91,11 @@ function Build(): JSX.Element {
               >
                 View raw
               </a>
-            )}
-          </Col>
-        </Row>
-        {isFetched && data && (
-          <>
-            <pre>{data.raw_logs}</pre>
-          </>
-        )}
-      </Strip>
+            </Col>
+          </Row>
+          <pre>{data.raw_logs}</pre>
+        </Strip>
+      )}
       <div id="footer"></div>
     </>
   );
diff --git a/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
index 69e36dc70a..6f4a954eb5 100644
--- a/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/PrimaryDomainInput.tsx
@@ -121,6 +121,7 @@ function PrimaryDomainInput({
             <input
               type="url"
               id={id}
+              defaultValue={defaultDomain}
               className="p-form-validation__input"
               {...register("primary_website")}
             />
diff --git a/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
index 14fa002a4f..e6429f701d 100644
--- a/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
+++ b/static/js/publisher-pages/pages/Listing/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
@@ -103,7 +103,7 @@ describe("PrimaryDomainInput", () => {
       primary_website: "https://example.com",
     });
     const input = screen.getByRole("textbox", { name: "Primary website:" });
-    await user.type(input, "https://example.comabc");
+    await user.type(input, "abc");
     expect(input).toHaveValue("https://example.comabc");
 
     expect(
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
index 366ca73f06..27c082266e 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ImageUpload.tsx
@@ -1,5 +1,10 @@
 import { useState, SyntheticEvent } from "react";
-import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
+import {
+  UseFormRegister,
+  UseFormSetValue,
+  FieldValues,
+  UseFormGetValues,
+} from "react-hook-form";
 import { nanoid } from "nanoid";
 import {
   Row,
@@ -15,6 +20,7 @@ type Props = {
   imageUrl: string | null;
   register: UseFormRegister<FieldValues>;
   setValue: UseFormSetValue<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
   validationSchema: {
     maxFileSize: number;
     minWidth: number;
@@ -61,6 +67,7 @@ function ImageUpload({
   imageUrl,
   register,
   setValue,
+  getValues,
   validationSchema,
   label,
   imageUrlFieldKey,
@@ -77,7 +84,9 @@ function ImageUpload({
   const [imageIsValid, setImageIsValid] = useState(true);
   const [isDragging, setIsDragging] = useState(false);
   const [darkThemeEnabled, setDarkThemeEnabled] = useState(false);
-  const [previewImageUrl, setPreviewImageUrl] = useState(imageUrl);
+  const [previewImageUrl, setPreviewImageUrl] = useState(
+    getValues(imageUrlFieldKey),
+  );
 
   const fieldId = nanoid();
   const isDark = hasDarkThemePreview && darkThemeEnabled;
@@ -135,6 +144,16 @@ function ImageUpload({
     };
   };
 
+  const showDeleteButton = (): boolean => {
+    const fieldValue = getValues(imageUrlFieldKey);
+
+    if (fieldValue && fieldValue.length > 0) {
+      return true;
+    }
+
+    return false;
+  };
+
   return (
     <Row className="p-form__group p-form__group--top" data-tour={tourLabel}>
       <Col size={2}>
@@ -170,7 +189,8 @@ function ImageUpload({
                 setIsDragging(false);
               }}
             >
-              {previewImageUrl ? (
+              {getValues(imageUrlFieldKey) &&
+              getValues(imageUrlFieldKey).length > 0 ? (
                 <div
                   className="snap-image-upload-preview"
                   style={{
@@ -179,7 +199,7 @@ function ImageUpload({
                   }}
                 >
                   <img
-                    src={previewImageUrl}
+                    src={getValues(imageUrlFieldKey)}
                     width={previewWidth}
                     height={previewHeight}
                     alt=""
@@ -230,13 +250,15 @@ function ImageUpload({
               />
             </div>
 
-            {previewImageUrl && (
+            {showDeleteButton() && (
               <button
                 type="button"
                 className="p-button--base snap-remove-icon"
                 onClick={() => {
                   setImageIsValid(true);
-                  setValue(imageUrlFieldKey, "");
+                  setValue(imageUrlFieldKey, "", {
+                    shouldDirty: imageUrl !== "",
+                  });
                   setValue(imageFieldKey, new File([], ""));
                   setPreviewImageUrl("");
                 }}
diff --git a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
index eea5f4d231..2a8f5b2a54 100644
--- a/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingDetails/ListingDetails.tsx
@@ -51,6 +51,7 @@ function ListingDetails({
         imageUrl={data.icon_url}
         register={register}
         setValue={setValue}
+        getValues={getValues}
         validationSchema={{
           maxFileSize: 256000,
           minWidth: 40,
@@ -213,6 +214,7 @@ function ListingDetails({
         imageUrl={data.banner_urls[0]}
         register={register}
         setValue={setValue}
+        getValues={getValues}
         validationSchema={{
           maxFileSize: 2000000,
           minWidth: 720,
diff --git a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
index 6d86162aa8..c55ad2bc60 100644
--- a/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/ListingForm/ListingForm.tsx
@@ -178,7 +178,9 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
           />
         </Strip>
       </form>
-      {snapId && <PreviewForm snapName={snapId} getValues={getValues} />}
+      {snapId && (
+        <PreviewForm snapName={snapId} getValues={getValues} watch={watch} />
+      )}
     </>
   );
 }
diff --git a/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx b/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
index a3a4a0567b..5dbb06f504 100644
--- a/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
+++ b/static/js/publisher-pages/pages/Listing/PreviewForm/PreviewForm.tsx
@@ -1,9 +1,10 @@
-import { UseFormGetValues, FieldValues } from "react-hook-form";
+import { UseFormGetValues, FieldValues, UseFormWatch } from "react-hook-form";
 import { Form } from "@canonical/react-components";
 
 type Props = {
   snapName: string;
   getValues: UseFormGetValues<FieldValues>;
+  watch: UseFormWatch<FieldValues>;
 };
 
 type ListingData = {
@@ -26,17 +27,31 @@ type ListingData = {
   description: string;
 };
 
-function PreviewForm({ snapName, getValues }: Props) {
+function PreviewForm({ snapName, getValues, watch }: Props) {
+  const watchWebsites = watch("websites");
+  const watchContacts = watch("contacts");
+  const watchDonations = watch("donations");
+  const watchSource = watch("source");
+  const watchIssues = watch("issues");
+
   const listingData: ListingData = {
     categories: [],
     links: {
-      website: getValues("websites").map((item: { url: string }) => item.url),
-      contact: getValues("contacts").map((item: { url: string }) => item.url),
-      donations: getValues("donations").map(
-        (item: { url: string }) => item.url,
-      ),
-      source: getValues("source_code").map((item: { url: string }) => item.url),
-      issues: getValues("issues").map((item: { url: string }) => item.url),
+      website: watchWebsites
+        ? watchWebsites.map((item: { url: string }) => item.url)
+        : [],
+      contact: watchContacts
+        ? watchContacts.map((item: { url: string }) => item.url)
+        : [],
+      donations: watchDonations
+        ? watchDonations.map((item: { url: string }) => item.url)
+        : [],
+      source: watchSource
+        ? watchSource.map((item: { url: string }) => item.url)
+        : [],
+      issues: watchIssues
+        ? watchIssues.map((item: { url: string }) => item.url)
+        : [],
     },
     snap_name: snapName,
     title: getValues("title"),
@@ -100,6 +115,7 @@ function PreviewForm({ snapName, getValues }: Props) {
       encType="multipart/form-data"
       className="u-hide"
       target="_blank"
+      rel="opener"
     >
       <input type="hidden" name="csrf_token" defaultValue={window.CSRF_TOKEN} />
       <input
diff --git a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
index 6f48ee3f16..bd0aee83ec 100644
--- a/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/ActiveDeviceMetrics.tsx
@@ -2,7 +2,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
 
 import { useEffect } from "react";
-import { renderActiveDevicesMetrics } from "../../../publisher/metrics/metrics";
+import { renderActiveDevicesMetrics } from "./metrics/metrics";
 import { select } from "d3-selection";
 import ActiveDeviceAnnotation from "./ActiveDeviceAnnotation";
 import { ActiveDeviceMetricFilter } from "./ActiveDeviceMetricFilter";
diff --git a/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
index 49c1f6bec4..55e35197f7 100644
--- a/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
+++ b/static/js/publisher-pages/pages/Metrics/TerritoryMetrics.tsx
@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
 
 import { useEffect } from "react";
-import { renderTerritoriesMetrics } from "../../../publisher/metrics/metrics";
+import { renderTerritoriesMetrics } from "./metrics/metrics";
 import useCountryMetrics from "../../hooks/useCountryMetrics";
 
 export const TerritoryMetrics = ({
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
index 46565cc999..74fe5ce563 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter, useSearchParams } from "react-router-dom";
 import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { QueryClient, QueryClientProvider, useQuery } from "react-query";
-import * as MetricsRenderMethods from "../../../../publisher/metrics/metrics";
+import * as MetricsRenderMethods from "../metrics/metrics";
 
 import ActiveDeviceMetrics from "../ActiveDeviceMetrics";
 
diff --git a/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
index ffa5714e83..2f7b005ad4 100644
--- a/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/TerritoryMetrics.test.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter, useSearchParams } from "react-router-dom";
 import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { QueryClient, QueryClientProvider, useQuery } from "react-query";
-import * as MetricsRenderMethods from "../../../../publisher/metrics/metrics";
+import * as MetricsRenderMethods from "../metrics/metrics";
 
 import { TerritoryMetrics } from "../TerritoryMetrics";
 
diff --git a/static/js/libs/__tests__/arrays.test.ts b/static/js/publisher-pages/pages/Metrics/__tests__/arrays.test.ts
similarity index 97%
rename from static/js/libs/__tests__/arrays.test.ts
rename to static/js/publisher-pages/pages/Metrics/__tests__/arrays.test.ts
index 4bb029d004..54176c183a 100644
--- a/static/js/libs/__tests__/arrays.test.ts
+++ b/static/js/publisher-pages/pages/Metrics/__tests__/arrays.test.ts
@@ -1,4 +1,4 @@
-import { arraysEqual, arrayChunk, arraysMerge } from "../arrays";
+import { arraysEqual, arrayChunk, arraysMerge } from "../metrics/arrays";
 
 describe("arraysEqual", () => {
   it("should return empty arrays as equal", () => {
diff --git a/static/js/libs/arrays.ts b/static/js/publisher-pages/pages/Metrics/metrics/arrays.ts
similarity index 100%
rename from static/js/libs/arrays.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/arrays.ts
diff --git a/static/js/publisher/metrics/axis.ts b/static/js/publisher-pages/pages/Metrics/metrics/axis.ts
similarity index 100%
rename from static/js/publisher/metrics/axis.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/axis.ts
diff --git a/static/js/publisher/metrics/config.js b/static/js/publisher-pages/pages/Metrics/metrics/config.js
similarity index 100%
rename from static/js/publisher/metrics/config.js
rename to static/js/publisher-pages/pages/Metrics/metrics/config.js
diff --git a/static/js/publisher/metrics/filters.js b/static/js/publisher-pages/pages/Metrics/metrics/filters.js
similarity index 100%
rename from static/js/publisher/metrics/filters.js
rename to static/js/publisher-pages/pages/Metrics/metrics/filters.js
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/dataProcessing.ts
similarity index 96%
rename from static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/dataProcessing.ts
index b245b92ed9..b86f1e505f 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/dataProcessing.ts
+++ b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/dataProcessing.ts
@@ -3,7 +3,7 @@ import { utcParse } from "d3-time-format";
 import { scaleLinear, scaleOrdinal } from "d3-scale";
 import { extent } from "d3-array";
 import { schemePaired } from "d3-scale-chromatic";
-import { isMobile } from "../../../../libs/mobile";
+import { isMobile } from "../../../../../../libs/mobile";
 import { axisBottom, axisLeft } from "d3-axis";
 
 function prepareStackedData(this: any) {
@@ -18,7 +18,7 @@ function prepareStackedData(this: any) {
   };
 
   this.rawData.buckets.forEach((bucket: any, i: number) => {
-    let obj: {
+    const obj: {
       [key: string]: any;
     } = {
       date: utcParse("%Y-%m-%d")(bucket),
@@ -30,7 +30,7 @@ function prepareStackedData(this: any) {
         if (_keys.indexOf(series.name) < 0) {
           _keys.push(series.name);
         }
-      }
+      },
     );
 
     _data.push(obj);
@@ -74,7 +74,7 @@ function prepareLineData(this: any) {
         });
       });
       data.push(obj);
-    }
+    },
   );
 
   this.rawData.buckets.forEach((bucket: any, i: number) => {
@@ -97,7 +97,7 @@ function prepareLineData(this: any) {
     (acc: Array<any>, current: { values: Array<number> }) => {
       return acc.concat(current.values);
     },
-    []
+    [],
   );
 
   this.data = _data;
@@ -141,7 +141,7 @@ function prepareAnnotationsData(this: any) {
   let annotationsData: Array<any>;
   annotationsData = [];
   this.options.annotations.buckets.forEach((bucket: any, i: number) => {
-    let obj: {
+    const obj: {
       [key: string]: any;
     } = {
       date: utcParse("%Y-%m-%d")(bucket),
@@ -153,7 +153,7 @@ function prepareAnnotationsData(this: any) {
         if (this.keys.indexOf(series.name) < 0) {
           this.keys.push(series.name);
         }
-      }
+      },
     );
 
     annotationsData.push(obj);
@@ -168,7 +168,7 @@ function prepareAnnotationsData(this: any) {
   if (annotationsData) {
     annotationsData = annotationsData
       .map((annotation) => {
-        let x = this.xScale(annotation.date);
+        const x = this.xScale(annotation.date);
 
         if (x < 0 + this.padding.left) {
           return false;
@@ -221,7 +221,7 @@ function prepareAxis(this: any) {
   this.xAxis = axisBottom(this.xScale).tickValues(tickValues).tickPadding(16);
 
   this.yAxis = axisLeft(this.yScale).tickFormat((d) =>
-    d === 0 ? "0" : this.shortValue(d)
+    d === 0 ? "0" : this.shortValue(d),
   );
 }
 
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/index.ts
similarity index 95%
rename from static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/index.ts
index a2091bee4d..74f76450e7 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/index.ts
+++ b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/index.ts
@@ -1,8 +1,8 @@
 import { select } from "d3-selection";
 import { format } from "d3-format";
 import { area, curveMonotoneX, line } from "d3-shape";
-import debounce from "../../../../libs/debounce";
-import { arraysMerge } from "../../../../libs/arrays";
+import debounce from "../../../../../../libs/debounce";
+import { arraysMerge } from "../../arrays";
 
 import {
   prepareStackedData,
@@ -37,7 +37,7 @@ class ActiveDevicesGraph {
         bottom: 30,
         left: 50,
       },
-      options.margin || {}
+      options.margin || {},
     );
 
     this.padding = Object.assign(
@@ -47,7 +47,7 @@ class ActiveDevicesGraph {
         bottom: 16,
         left: 16,
       },
-      options.padding || {}
+      options.padding || {},
     );
 
     this.width;
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/rendering.js b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/rendering.js
similarity index 100%
rename from static/js/publisher/metrics/graphs/activeDevicesGraph/rendering.js
rename to static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/rendering.js
diff --git a/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/tooltips.ts
similarity index 97%
rename from static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/tooltips.ts
index dcba03d48b..9e9b8d6968 100644
--- a/static/js/publisher/metrics/graphs/activeDevicesGraph/tooltips.ts
+++ b/static/js/publisher-pages/pages/Metrics/metrics/graphs/activeDevicesGraph/tooltips.ts
@@ -1,6 +1,6 @@
 import { bisector } from "d3-array";
 import { pointer, select } from "d3-selection";
-import { sortChannels } from "../../../../libs/channels";
+import { sortChannels } from "../../../../../../libs/channels";
 import { utcFormat } from "d3-time-format";
 import { format } from "d3-format";
 
@@ -13,16 +13,16 @@ export function tooltips(this: any) {
   const tooltipTemplate = (dateData: { date: Date }, currentHoverKey: any) => {
     const tooltipRows = (
       dateData: { [x: string]: any; date?: Date },
-      currentHoverKey: string
+      currentHoverKey: string,
     ) => {
-      let dataArr: {
+      const dataArr: {
         skip?: boolean;
         key: any;
         value: any;
         count: any;
       }[] = [];
       let total = 0;
-      let other = {
+      const other = {
         key: "other",
         value: 0,
         count: 0,
@@ -85,7 +85,7 @@ export function tooltips(this: any) {
               `<span class="snapcraft-graph-tooltip__series-name">${item.key}</span>`,
               `</span>`,
               `<span class="snapcraft-graph-tooltip__series-value">${commaValue(
-                item.value
+                item.value,
               )} (${total !== 0 ? ((item.value / total) * 100).toFixed(2) : 0}%)</span>`,
               `</span>`,
             ].join("");
@@ -100,7 +100,7 @@ export function tooltips(this: any) {
       `<div class="p-tooltip p-tooltip--top-center" style="display: block; pointer-events: none;">`,
       `<span class="p-tooltip__message" role="tooltip" style="display: block;">`,
       `<span class="snapcraft-graph-tooltip__title">${tooltipTimeFormat(
-        dateData.date
+        dateData.date,
       )}</span>`,
       tooltipRows(dateData, currentHoverKey),
       `</span>`,
diff --git a/static/js/publisher/metrics/graphs/installs.ts b/static/js/publisher-pages/pages/Metrics/metrics/graphs/installs.ts
similarity index 96%
rename from static/js/publisher/metrics/graphs/installs.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/graphs/installs.ts
index 6a38a85e50..9fdc3f0369 100644
--- a/static/js/publisher/metrics/graphs/installs.ts
+++ b/static/js/publisher-pages/pages/Metrics/metrics/graphs/installs.ts
@@ -5,7 +5,7 @@ import {
   formatXAxisTickLabels,
   formatYAxisTickLabels,
 } from "../axis";
-import debounce from "../../../libs/debounce";
+import debounce from "../../../../../libs/debounce";
 import { COLORS, PADDING } from "../config";
 
 function showGraph(el: HTMLElement) {
diff --git a/static/js/publisher-pages/pages/Metrics/metrics/graphs/territories.js b/static/js/publisher-pages/pages/Metrics/metrics/graphs/territories.js
new file mode 100644
index 0000000000..702e41361d
--- /dev/null
+++ b/static/js/publisher-pages/pages/Metrics/metrics/graphs/territories.js
@@ -0,0 +1,5 @@
+import map from "../../../../../public/snap-details/map";
+
+export default function (el, data) {
+  map(el, data);
+}
diff --git a/static/js/publisher/metrics/metrics.ts b/static/js/publisher-pages/pages/Metrics/metrics/metrics.ts
similarity index 93%
rename from static/js/publisher/metrics/metrics.ts
rename to static/js/publisher-pages/pages/Metrics/metrics/metrics.ts
index 7174beac8f..324f034744 100644
--- a/static/js/publisher/metrics/metrics.ts
+++ b/static/js/publisher-pages/pages/Metrics/metrics/metrics.ts
@@ -1,4 +1,4 @@
-import { arrayChunk } from "../../libs/arrays";
+import { arrayChunk } from "./arrays";
 import { ActiveDevicesGraph } from "./graphs/activeDevicesGraph/";
 import territoriesMetrics from "./graphs/territories";
 
@@ -30,7 +30,7 @@ type TerritoriesMetric = {
 };
 
 function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
-  let activeDevices: {
+  const activeDevices: {
     series: Array<Series>;
     buckets: Array<string>;
   } = {
@@ -39,7 +39,7 @@ function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
   };
 
   metrics.metrics.series.forEach((series) => {
-    let fullSeries = series.values.map((value) => {
+    const fullSeries = series.values.map((value) => {
       return value === null ? 0 : value;
     });
     activeDevices.series.push({
@@ -64,7 +64,7 @@ function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
     categories.addEventListener("mouseover", (e) => {
       const target = e.target as HTMLElement;
       const annotationHover = target.closest(
-        `[data-js="annotation-hover"]`
+        `[data-js="annotation-hover"]`,
       ) as HTMLElement;
       if (annotationHover) {
         const category = annotationHover.dataset.id;
@@ -75,7 +75,7 @@ function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
     categories.addEventListener("mouseout", (e) => {
       const target = e.target as HTMLElement;
       const annotationHover = target.closest(
-        `[data-js="annotation-hover"]`
+        `[data-js="annotation-hover"]`,
       ) as HTMLElement;
       if (annotationHover) {
         const category = annotationHover.dataset.id;
@@ -108,11 +108,11 @@ function renderPublisherMetrics(options: {
     {
       stacked: false,
       area: false,
-    }
+    },
   );
 
   const loader = document.querySelector(
-    ".snapcraft-metrics__loader"
+    ".snapcraft-metrics__loader",
   ) as HTMLElement;
 
   function getSnapDevices(snapList: any) {
@@ -144,10 +144,10 @@ function renderPublisherMetrics(options: {
           json.snaps.forEach(
             (snap: { series: Array<Series>; name: string }) => {
               const continuedDevices = snap.series.filter(
-                (singleSeries) => singleSeries.name === "continued"
+                (singleSeries) => singleSeries.name === "continued",
               )[0];
               const newDevices = snap.series.filter(
-                (singleSeries) => singleSeries.name === "new"
+                (singleSeries) => singleSeries.name === "new",
               )[0];
 
               let totalSeries: Array<number> = [];
@@ -156,12 +156,12 @@ function renderPublisherMetrics(options: {
                 totalSeries = continuedDevices.values.map(
                   (continuedValue, index) => {
                     return continuedValue + newDevices.values[index];
-                  }
+                  },
                 );
               } else {
                 console.log(
                   "There is no information available for continued or new devices.",
-                  snap.series
+                  snap.series,
                 );
               }
 
@@ -169,7 +169,7 @@ function renderPublisherMetrics(options: {
                 name: snap.name,
                 values: totalSeries,
               });
-            }
+            },
           );
 
           resolve(snaps);
@@ -179,7 +179,7 @@ function renderPublisherMetrics(options: {
   }
 
   const snaps_arr: Array<{ name: string; id: string }> = Object.keys(
-    options.snaps
+    options.snaps,
   ).map((key) => {
     return {
       name: key,
@@ -213,7 +213,7 @@ function renderPublisherMetrics(options: {
         _graph.rawData.buckets.length === 0
       ) {
         const dashboardMetrics = document.querySelector(
-          `[data-js="dashboard-metrics"]`
+          `[data-js="dashboard-metrics"]`,
         ) as HTMLElement;
 
         dashboardMetrics.classList.add("u-hide");
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
index 760079b56f..1a0742a3c8 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseButtons.tsx
@@ -19,28 +19,26 @@ const LANGUAGES = {
   tw: { title: "中文（台灣）", text: "安裝軟體敬請移駕 Snap Store" },
 };
 
+type LanguageKey = keyof typeof LANGUAGES;
+
 function PubliciseButtons(): JSX.Element {
   const { snapId } = useParams();
-  const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
+  const [selectedLanguage, setSelectedLanguage] = useState<LanguageKey>("en");
 
   const darkBadgeSource = `https://snapcraft.io/${selectedLanguage}/dark/install.svg`;
   const lightBadgeSource = `https://snapcraft.io/${selectedLanguage}/light/install.svg`;
 
   const htmlSnippetBlack = `<a href="https://snapcraft.io/${snapId}">
-  <img alt="Get it from the Snap Store" src=${darkBadgeSource} />
-</a>
-`;
+    <img alt="${LANGUAGES[selectedLanguage].text}" src=${darkBadgeSource} />
+  </a>`;
 
   const htmlSnippetWhite = `<a href="https://snapcraft.io/${snapId}">
-  <img alt="Get it from the Snap Store" src=${lightBadgeSource} />
-</a>
-`;
+    <img alt="${LANGUAGES[selectedLanguage].text}" src=${lightBadgeSource} />
+  </a>`;
 
-  const markdownSnippetBlack = `[![Get it from the Snap Store](${darkBadgeSource})](https://snapcraft.io/${snapId})
-`;
+  const markdownSnippetBlack = `[![${LANGUAGES[selectedLanguage].text}](${darkBadgeSource})](https://snapcraft.io/${snapId})`;
 
-  const markdownSnippetWhite = `[![Get it from the Snap Store](${lightBadgeSource})](https://snapcraft.io/${snapId})
-`;
+  const markdownSnippetWhite = `[![${LANGUAGES[selectedLanguage].text}](${lightBadgeSource})](https://snapcraft.io/${snapId})`;
 
   return (
     <>
@@ -58,7 +56,7 @@ function PubliciseButtons(): JSX.Element {
               };
             })}
             onChange={(e) => {
-              setSelectedLanguage(e.target.value);
+              setSelectedLanguage(e.target.value as LanguageKey);
             }}
             style={{ maxWidth: "180px" }}
           />
diff --git a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
index c73bc463a4..2906d4d9e2 100644
--- a/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
+++ b/static/js/publisher-pages/pages/Publicise/PubliciseCards.tsx
@@ -1,4 +1,4 @@
-import { useState, SyntheticEvent } from "react";
+import { useState, useRef, SyntheticEvent } from "react";
 import { useParams } from "react-router-dom";
 import {
   Row,
@@ -16,6 +16,7 @@ function PubliciseCards(): JSX.Element {
   const [showSummary, setShowSummary] = useState<boolean>(true);
   const [showScreenshot, setShowScreenshot] = useState<boolean>(true);
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const iframeQueryParameters: { [key: string]: string } = {};
 
   if (buttonType !== "hidden") {
@@ -38,7 +39,22 @@ function PubliciseCards(): JSX.Element {
     iframeQueryParameters,
   ).toString();
 
-  const htmlSnippet = `<iframe title="Publicise card" src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}"width="100%" height="990px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
+  const htmlSnippet = `<iframe title="Publicise card" src="https://snapcraft.io/${snapId}/embedded?${iframeQueryString}" style="width: 100%; height: 100%; border: 1px solid #CCC; border-radius: 2px;"></iframe>`;
+
+  const adjustIframeHeight = () => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      try {
+        iframe.style.height =
+          iframe.contentWindow?.document.body.scrollHeight + "px";
+      } catch (error) {
+        console.warn(
+          "Unable to access iframe content for height adjustment:",
+          error,
+        );
+      }
+    }
+  };
 
   return (
     <>
@@ -124,14 +140,16 @@ function PubliciseCards(): JSX.Element {
         <Col size={8}>
           <p>
             <iframe
+              ref={iframeRef}
               title="Card preview"
               src={`/${snapId}/embedded?${iframeQueryString}`}
               width="100%"
               style={{
                 border: "1px solid rgb(204, 204, 204)",
                 borderRadius: "2px",
-                height: "990px",
+                height: "auto",
               }}
+              onLoad={adjustIframeHeight}
             ></iframe>
           </p>
         </Col>
diff --git a/static/js/publisher-pages/pages/Releases/Releases.tsx b/static/js/publisher-pages/pages/Releases/Releases.tsx
index 6ededc2558..d937fd8224 100644
--- a/static/js/publisher-pages/pages/Releases/Releases.tsx
+++ b/static/js/publisher-pages/pages/Releases/Releases.tsx
@@ -39,7 +39,7 @@ function Releases(): JSX.Element {
         <Strip shallow>
           <p>
             <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
-            {snapId} releases data
+            {snapId} builds data
           </p>
         </Strip>
       )}
diff --git a/static/js/publisher-pages/pages/Releases/components/releasesHeading.js b/static/js/publisher-pages/pages/Releases/components/releasesHeading.js
index b069c11c2c..e4599a1375 100644
--- a/static/js/publisher-pages/pages/Releases/components/releasesHeading.js
+++ b/static/js/publisher-pages/pages/Releases/components/releasesHeading.js
@@ -188,109 +188,105 @@ function ReleasesHeading(props) {
 
   return (
     <>
-      <main className="l-main">
-        <div>
-          <div className="u-fixed-width">
-            <h4 className="p-heading--4">Releases available to install</h4>
-          </div>
-          <Row>
-            <Col size={6}>
-              <h5 className="p-strip is-shallow u-no-padding--top u-no-padding--bottom">
-                <label htmlFor="track-dropdown">
-                  Track: &nbsp;
-                  <div className="track-dropdown">
-                    <div className="dropdown-toggle" onClick={handleToggle}>
-                      {currentTrack}
-                      <i className="p-icon--chevron-down u-float-right"></i>
+      <div className="u-fixed-width">
+        <h4 className="p-heading--4">Releases available to install</h4>
+      </div>
+      <Row>
+        <Col size={6}>
+          <h5 className="p-strip is-shallow u-no-padding--top u-no-padding--bottom">
+            <label htmlFor="track-dropdown">
+              Track: &nbsp;
+              <div className="track-dropdown">
+                <div className="dropdown-toggle" onClick={handleToggle}>
+                  {currentTrack}
+                  <i className="p-icon--chevron-down u-float-right"></i>
+                </div>
+                {isOpen && (
+                  <div className={dropdownPaddingClass}>
+                    <div className="options-container">
+                      {options.map((option, index) => (
+                        <div
+                          key={index}
+                          className="dropdown-item"
+                          onClick={() => handleSelect(option.value)}
+                        >
+                          {option.label}
+                          {option.value === defaultTrack && (
+                            <div className="p-status-label">Default</div>
+                          )}
+                          {option.value === currentTrack && (
+                            <i className="p-icon--task-outstanding u-float-right"></i>
+                          )}
+                        </div>
+                      ))}
                     </div>
-                    {isOpen && (
-                      <div className={dropdownPaddingClass}>
-                        <div className="options-container">
-                          {options.map((option, index) => (
-                            <div
-                              key={index}
-                              className="dropdown-item"
-                              onClick={() => handleSelect(option.value)}
-                            >
-                              {option.label}
-                              {option.value === defaultTrack && (
-                                <div className="p-status-label">Default</div>
-                              )}
-                              {option.value === currentTrack && (
-                                <i className="p-icon--task-outstanding u-float-right"></i>
-                              )}
+                    {trackGuardrailsStatus !== "error" &&
+                      trackGuardrailsStatus !== "no-guardrails" && (
+                        <div className="track-button-wrapper">
+                          {guardrailsLoading ? (
+                            <div>
+                              <Icon
+                                name="spinner"
+                                className="u-animation--spin"
+                              />
+                              &nbsp;Loading...
                             </div>
-                          ))}
-                        </div>
-                        {trackGuardrailsStatus !== "error" &&
-                          trackGuardrailsStatus !== "no-guardrails" && (
-                            <div className="track-button-wrapper">
-                              {guardrailsLoading ? (
-                                <div>
-                                  <Icon
-                                    name="spinner"
-                                    className="u-animation--spin"
-                                  />
-                                  &nbsp;Loading...
-                                </div>
-                              ) : (
-                                <div className="track-button">
-                                  {trackGuardrailsStatus === "request" && (
-                                    <Button
-                                      className="p-button has-icon new-track-button"
-                                      onClick={() => {
-                                        openRequestTrackSidePanel();
-                                        if (isOpen) {
-                                          handleToggle();
-                                        }
-                                      }}
-                                    >
-                                      <i className="p-icon--plus"></i>
-                                      <span>Request track</span>
-                                    </Button>
-                                  )}
-                                  {trackGuardrailsStatus === "add" && (
-                                    <Button
-                                      className="p-button has-icon new-track-button"
-                                      onClick={() => {
-                                        openAddTrackSidePanel();
-                                        if (isOpen) {
-                                          handleToggle();
-                                        }
-                                      }}
-                                    >
-                                      <i className="p-icon--plus"></i>
-                                      <span>Add track</span>
-                                    </Button>
-                                  )}
-                                </div>
+                          ) : (
+                            <div className="track-button">
+                              {trackGuardrailsStatus === "request" && (
+                                <Button
+                                  className="p-button has-icon new-track-button"
+                                  onClick={() => {
+                                    openRequestTrackSidePanel();
+                                    if (isOpen) {
+                                      handleToggle();
+                                    }
+                                  }}
+                                >
+                                  <i className="p-icon--plus"></i>
+                                  <span>Request track</span>
+                                </Button>
+                              )}
+                              {trackGuardrailsStatus === "add" && (
+                                <Button
+                                  className="p-button has-icon new-track-button"
+                                  onClick={() => {
+                                    openAddTrackSidePanel();
+                                    if (isOpen) {
+                                      handleToggle();
+                                    }
+                                  }}
+                                >
+                                  <i className="p-icon--plus"></i>
+                                  <span>Add track</span>
+                                </Button>
                               )}
                             </div>
                           )}
-                      </div>
-                    )}
+                        </div>
+                      )}
                   </div>
-                </label>
-              </h5>
-              <TrackInfo
-                versionPattern={currentTrackVersionPattern}
-                automaticPhasingPercentage={currentPhasingPercentage}
-              />
-              <div className="success-notification">
-                {successNotification && (
-                  <Notification severity="positive">
-                    {successNotification}
-                  </Notification>
                 )}
               </div>
-            </Col>
-            <div className="col-6" style={{ marginTop: "0.25rem" }}>
-              {<DefaultTrackModifier />}
-            </div>
-          </Row>
+            </label>
+          </h5>
+          <TrackInfo
+            versionPattern={currentTrackVersionPattern}
+            automaticPhasingPercentage={currentPhasingPercentage}
+          />
+          <div className="success-notification">
+            {successNotification && (
+              <Notification severity="positive">
+                {successNotification}
+              </Notification>
+            )}
+          </div>
+        </Col>
+        <div className="col-6" style={{ marginTop: "0.25rem" }}>
+          {<DefaultTrackModifier />}
         </div>
-        <ReleasesTable />
-      </main>
+      </Row>
+      <ReleasesTable />
 
       {/* Request track aside panel */}
 
@@ -299,14 +295,14 @@ function ReleasesHeading(props) {
         onClick={closeRequestTrackSidePanel}
       ></div>
       <aside
-        className={`l-aside ${requestTrackSidePanelOpen ? "" : "is-collapsed"}`}
+        className={`l-aside releases-track-aside ${requestTrackSidePanelOpen ? "" : "is-collapsed"}`}
         id="request-track-aside-panel"
       >
         <div className="p-panel is-flex-column">
           <div className="p-panel__header">
             <h4 className="p-panel__title p-heading--4">REQUEST TRACK</h4>
           </div>
-          <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
+          <div className="p-panel__content" style={{ padding: "0 1.5rem" }}>
             <h5 className="p-heading--5 u-no-margin--bottom">
               What is a track?
             </h5>
@@ -389,14 +385,14 @@ function ReleasesHeading(props) {
         onClick={closeAddTrackSidePanel}
       ></div>
       <aside
-        className={`l-aside ${addTrackSidePanelOpen ? "" : "is-collapsed"}`}
+        className={`l-aside releases-track-aside ${addTrackSidePanelOpen ? "" : "is-collapsed"}`}
         id="add-track-aside-panel"
       >
         <div className="p-panel is-flex-column">
           <div className="p-panel__header">
             <h4 className="p-panel__title p-heading--4">ADD TRACK</h4>
           </div>
-          <div className="p-panel__content u-no-padding--top u-no-padding--bottom u-fixed-width">
+          <div className="p-panel__content" style={{ padding: "0 1.5rem" }}>
             <Form>
               <div>
                 <div
diff --git a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
index c8d31f32b5..11fb3df508 100644
--- a/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
+++ b/static/js/publisher-pages/pages/Settings/SettingsForm.tsx
@@ -211,6 +211,7 @@ function SettingsForm({ settings }: Props) {
                     className="p-radio__input"
                     value="public"
                     disabled={settingsData?.visibility_locked}
+                    defaultChecked={settingsData.visibility === "public"}
                     {...register("visibility")}
                   />
                   <span className="p-radio__label">Public</span>
@@ -228,6 +229,7 @@ function SettingsForm({ settings }: Props) {
                     className="p-radio__input"
                     value="unlisted"
                     disabled={settingsData?.visibility_locked}
+                    defaultChecked={settingsData.visibility === "unlisted"}
                     {...register("visibility")}
                   />
                   <span className="p-radio__label">Unlisted</span>
@@ -246,6 +248,7 @@ function SettingsForm({ settings }: Props) {
                     className="p-radio__input"
                     value="private"
                     disabled={settingsData?.visibility_locked}
+                    defaultChecked={settingsData.visibility === "private"}
                     {...register("visibility")}
                   />
                   <span className="p-radio__label">Private</span>
@@ -283,6 +286,9 @@ function SettingsForm({ settings }: Props) {
                       type="radio"
                       className="p-radio__input"
                       value="all"
+                      defaultChecked={
+                        settingsData.territory_distribution_status === "all"
+                      }
                       {...register("territory_distribution_status")}
                     />
                     <span className="p-radio__label">All territories</span>
@@ -297,6 +303,9 @@ function SettingsForm({ settings }: Props) {
                       type="radio"
                       className="p-radio__input"
                       value="custom"
+                      defaultChecked={
+                        settingsData.territory_distribution_status === "custom"
+                      }
                       {...register("territory_distribution_status")}
                     />
                     <span className="p-radio__label">Selected territories</span>
@@ -311,6 +320,9 @@ function SettingsForm({ settings }: Props) {
                       type="radio"
                       className="p-radio__input"
                       value="include"
+                      defaultChecked={
+                        settingsData.country_keys_status === "include"
+                      }
                       {...register("country_keys_status")}
                     />
                     <span className="p-radio__label">
@@ -338,6 +350,9 @@ function SettingsForm({ settings }: Props) {
                       type="radio"
                       className="p-radio__input"
                       value="exclude"
+                      defaultChecked={
+                        settingsData.country_keys_status === "exclude"
+                      }
                       {...register("country_keys_status")}
                     />
                     <span className="p-radio__label">
@@ -383,6 +398,7 @@ function SettingsForm({ settings }: Props) {
                   <input
                     type="checkbox"
                     className="p-checkbox__input"
+                    defaultChecked={settingsData.update_metadata_on_release}
                     {...register("update_metadata_on_release", {
                       setValueAs: (value) => value === "on" || value === true,
                     })}
diff --git a/static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts b/static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts
index 9a975869cd..40bcc6feae 100644
--- a/static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts
+++ b/static/js/publisher-pages/utils/__tests__/formatImageChanges.test.ts
@@ -7,7 +7,6 @@ describe("formatImageChanges", () => {
       "https://example.com/icon",
       ["https://example.com/screenshot"],
       [],
-      {},
     );
 
     expect(imageChanges[0].url).toBe("https://example.com/banner");
diff --git a/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts b/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
index 058788c9ef..f03f5be1ba 100644
--- a/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
+++ b/static/js/publisher-pages/utils/__tests__/getDefaultListingData.test.ts
@@ -28,7 +28,6 @@ describe("getDefaultData", () => {
     expect(defaultData.video_urls).toBeDefined();
     expect(defaultData.websites).toBeDefined();
 
-    expect(defaultData.banner_urls).not.toBeDefined();
     expect(defaultData.categories).not.toBeDefined();
     expect(defaultData.public_metrics_blacklist).not.toBeDefined();
     expect(defaultData.snap_id).not.toBeDefined();
diff --git a/static/js/publisher-pages/utils/formatImageChanges.ts b/static/js/publisher-pages/utils/formatImageChanges.ts
index 5d434a85ea..96d4445eca 100644
--- a/static/js/publisher-pages/utils/formatImageChanges.ts
+++ b/static/js/publisher-pages/utils/formatImageChanges.ts
@@ -3,11 +3,10 @@ export default function formatImageChanges(
   iconUrl: string,
   screenshotUrls: string[],
   screenshots: FileList[],
-  dirtyFields: { [key: string]: boolean },
 ) {
   const images = [];
 
-  if (!dirtyFields.banner_urls && bannerUrls.length > 0) {
+  if (bannerUrls.length > 0) {
     images.push({
       url: bannerUrls[0],
       type: "banner",
diff --git a/static/js/publisher-pages/utils/getDefaultListingData.ts b/static/js/publisher-pages/utils/getDefaultListingData.ts
index 01165f8918..4ec117163f 100644
--- a/static/js/publisher-pages/utils/getDefaultListingData.ts
+++ b/static/js/publisher-pages/utils/getDefaultListingData.ts
@@ -40,6 +40,7 @@ export default function getDefaultListingData(data: ListingData): {
   [key: string]: unknown;
 } {
   return {
+    banner_urls: data.banner_urls,
     contacts: data.contacts,
     description: data.description,
     donations: data.donations,
diff --git a/static/js/publisher-pages/utils/getListingChanges.ts b/static/js/publisher-pages/utils/getListingChanges.ts
index 28233f0f4d..078bb8fa77 100644
--- a/static/js/publisher-pages/utils/getListingChanges.ts
+++ b/static/js/publisher-pages/utils/getListingChanges.ts
@@ -41,7 +41,6 @@ export default function getListingChanges(
       fieldValues.icon_url,
       fieldValues.screenshot_urls,
       fieldValues.screenshots,
-      dirtyFields,
     );
   }
 
diff --git a/static/js/publisher/build-status.ts b/static/js/publisher/build-status.ts
deleted file mode 100644
index c943f59c5f..0000000000
--- a/static/js/publisher/build-status.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { UserFacingStatus } from "./builds/helpers";
-
-function getStatuses() {
-  return fetch("/snap-builds.json").then((r) => r.json());
-}
-
-function addBuildStatus(
-  row: HTMLElement,
-  data: Array<{ name: string; status: string }>,
-): void {
-  const snapName: string | undefined = row.dataset.snapName;
-  const releaseData: { name: string; status: string } | undefined = data.find(
-    (d) => d.name === snapName,
-  );
-
-  let buildStatus: string | undefined;
-
-  if (releaseData && releaseData.status) {
-    buildStatus = UserFacingStatus[releaseData.status].statusMessage;
-  }
-
-  const buildColumn = row.querySelector(
-    "[data-js='snap-build-status']",
-  ) as HTMLElement;
-
-  const failedStatuses: string[] = ["failed_to_build", "release_failed"];
-
-  const errorIcon = document.createElement("i") as HTMLElement;
-  errorIcon.classList.add("p-icon--error");
-
-  const buildLink = document.createElement("a");
-  buildLink.href = `/${snapName}/builds`;
-
-  if (buildColumn && buildStatus && buildStatus.toLowerCase() !== "unknown") {
-    if (releaseData && failedStatuses.includes(releaseData.status)) {
-      buildColumn.innerText = "";
-      buildColumn.appendChild(errorIcon);
-      buildLink.innerText = buildStatus;
-      buildColumn.appendChild(buildLink);
-    } else {
-      buildColumn.innerText = buildStatus;
-    }
-  } else {
-    buildColumn.innerText = buildColumn.dataset.status as string;
-  }
-}
-
-function buildStatus(): void {
-  getStatuses()
-    .then((data) => {
-      const snapListRows = document.querySelectorAll(
-        "[data-js='snap-list-row']",
-      ) as NodeListOf<HTMLElement>;
-
-      snapListRows.forEach((row) => addBuildStatus(row, data));
-    })
-    .catch((e) => console.error(e));
-}
-
-export default buildStatus;
diff --git a/static/js/publisher/builds/helpers.ts b/static/js/publisher/builds/helpers.ts
deleted file mode 100644
index 72409604de..0000000000
--- a/static/js/publisher/builds/helpers.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-const NEVER_BUILT = "never_built";
-const BUILDING_SOON = "building_soon";
-const WONT_RELEASE = "wont_release";
-const RELEASED = "released";
-const RELEASE_FAILED = "release_failed";
-const RELEASING_SOON = "releasing_soon";
-const IN_PROGRESS = "in_progress";
-const FAILED_TO_BUILD = "failed_to_build";
-const CANCELLED = "cancelled";
-const UNKNOWN = "unknown";
-
-const ERROR = "ERROR";
-const SUCCESS = "SUCCESS";
-const IDLE = "IDLE";
-
-export const UserFacingStatus: {
-  [key: string]: {
-    statusMessage: string;
-    shortStatusMessage: string;
-    icon: string | undefined;
-    priority: number;
-    badge: string;
-  };
-} = {
-  // Used only when there is no build returned from LP.
-  // When build is returned from LP (scheduled) it's 'Building soon' for BSI.
-  [NEVER_BUILT]: createStatus("Never built", "Never built", 8, NEVER_BUILT),
-  [BUILDING_SOON]: createStatus("Building soon", "Building", 7, BUILDING_SOON),
-  [WONT_RELEASE]: createStatus(
-    "Built, won’t be released",
-    "Built",
-    6,
-    WONT_RELEASE,
-  ),
-  [RELEASED]: createStatus("Released", "Released", 5, "released"),
-  [RELEASE_FAILED]: createStatus(
-    "Built, failed to release",
-    "Failed",
-    4,
-    RELEASE_FAILED,
-  ),
-  [RELEASING_SOON]: createStatus("Releasing", "Releasing", 3, RELEASING_SOON),
-  [IN_PROGRESS]: createStatus("In progress", "In progress", 2, IN_PROGRESS),
-  [FAILED_TO_BUILD]: createStatus(
-    "Failed to build",
-    "Failed",
-    1,
-    FAILED_TO_BUILD,
-  ),
-  [CANCELLED]: createStatus("Cancelled", "Cancelled", 8, CANCELLED),
-  [UNKNOWN]: createStatus("Unknown", "Unknown", 8, NEVER_BUILT),
-};
-
-export function createStatus(
-  statusMessage: string,
-  shortStatusMessage: string,
-  priority: number,
-  badge: string,
-) {
-  const loadingStatus = [IN_PROGRESS, RELEASING_SOON];
-  let icon;
-  if (badge.indexOf("failed") > -1) {
-    icon = "error";
-  } else if (loadingStatus.indexOf(badge) > -1) {
-    icon = "spinner u-animation--spin";
-  }
-
-  return {
-    statusMessage,
-    shortStatusMessage,
-    icon: icon,
-    priority,
-    badge,
-  };
-}
-
-export function createDuration(duration: string) {
-  if (duration) {
-    const durationParts = duration.split(":");
-    const hours = parseInt(durationParts[0]);
-    const minutes = parseInt(durationParts[1]);
-    const seconds = Math.round(parseInt(durationParts[2]));
-
-    if (hours > 0) {
-      return `${hours} hour${hours > 1 ? "s" : ""}`;
-    }
-    if (minutes > 0) {
-      return `${minutes} minute${minutes > 1 ? "s" : ""}`;
-    }
-
-    return `${seconds} second${seconds > 1 || seconds === 0 ? "s" : ""}`;
-  }
-  return "";
-}
-
-export const TriggerBuildStatus = {
-  ERROR,
-  SUCCESS,
-  IDLE,
-};
-
-export const BuildRequestStatus = {
-  PENDING: "Pending",
-  COMPLETED: "Completed",
-  FAILED: "Failed",
-};
diff --git a/static/js/publisher/builds/repoDisconnect.ts b/static/js/publisher/builds/repoDisconnect.ts
deleted file mode 100644
index d796efa087..0000000000
--- a/static/js/publisher/builds/repoDisconnect.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-function initRepoDisconnect() {
-  /**
-  Toggles visibility of modal dialog.
-  @param {HTMLElement} modal Modal dialog to show or hide.
-*/
-  function toggleModal(modal: HTMLElement) {
-    if (modal && modal.classList.contains("p-modal")) {
-      if (modal.style.display === "none") {
-        modal.style.display = "flex";
-      } else {
-        modal.style.display = "none";
-      }
-    }
-  }
-
-  const repoDisconnectButtons = document.querySelectorAll(
-    "[aria-controls='repo-disconnect-modal']",
-  ) as NodeList;
-  const repoDisconnectConfirm = document.querySelector(
-    "[data-js='repo-disconnect-confirm']",
-  ) as HTMLButtonElement;
-  const repoDisconnectModal = document.querySelector(
-    "[data-js='repo-disconnect-modal']",
-  ) as HTMLElement;
-  const repoDisconnectForm = document.getElementById(
-    "repoDisconnectForm",
-  ) as HTMLElement;
-
-  if (
-    repoDisconnectButtons &&
-    repoDisconnectModal &&
-    repoDisconnectConfirm &&
-    repoDisconnectForm
-  ) {
-    // Add click handler for clicks on elements with aria-controls for repo-disconnect-modal
-    [].slice.call(repoDisconnectButtons).forEach((el: HTMLElement) => {
-      el.addEventListener("click", (event) => {
-        event.preventDefault();
-        toggleModal(repoDisconnectModal);
-      });
-    });
-
-    repoDisconnectForm.addEventListener("submit", () => {
-      repoDisconnectConfirm.disabled = true;
-    });
-  }
-}
-
-export { initRepoDisconnect };
diff --git a/static/js/publisher/form.test.js b/static/js/publisher/form.test.js
deleted file mode 100644
index e8ad2e1432..0000000000
--- a/static/js/publisher/form.test.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import * as market from "./form";
-import * as categories from "./market/categories";
-
-describe("initForm", () => {
-  let form;
-  let submitButton;
-  let revertButton;
-  let previewButton;
-  let titleInput;
-  let summaryInput;
-  let descriptionInput;
-  let websiteInput;
-  let contactInput;
-  let primaryCategoryInput;
-  let secondaryCategoryInput;
-  let categoriesInput;
-  let csrfInput;
-  let previewForm;
-  let previewStateInput;
-
-  const categoriesList = ["", "test1", "test2"];
-
-  function setupForm(config, initialState) {
-    form = document.createElement("form");
-    form.id = config.form;
-
-    submitButton = document.createElement("button");
-    submitButton.classList.add("js-form-submit");
-
-    revertButton = document.createElement("a");
-    revertButton.classList.add("js-form-revert");
-    revertButton.href = "/test";
-
-    previewButton = document.createElement("button");
-    previewButton.classList.add("js-listing-preview");
-    previewButton.setAttribute("form", "preview-form");
-
-    titleInput = document.createElement("input");
-    titleInput.type = "text";
-    titleInput.name = "title";
-    titleInput.value = initialState.title;
-    titleInput.required = "true";
-    titleInput.maxlength = "40";
-
-    categoriesInput = document.createElement("input");
-    categoriesInput.type = "text";
-    categoriesInput.name = "categories";
-    categoriesInput.value = initialState.categories;
-
-    primaryCategoryInput = document.createElement("select");
-    primaryCategoryInput.name = "primary_category";
-    primaryCategoryInput.value = "";
-
-    categoriesList.forEach((category, index) => {
-      const option = document.createElement("option");
-      option.value = category;
-      if (index === 0) {
-        option.selected = "selected";
-      }
-      primaryCategoryInput.appendChild(option);
-    });
-
-    secondaryCategoryInput = document.createElement("select");
-    secondaryCategoryInput.name = "secondary_category";
-    secondaryCategoryInput.value = "";
-
-    categoriesList.forEach((category, index) => {
-      const option = document.createElement("option");
-      option.value = category;
-      if (index === 0) {
-        option.selected = "selected";
-      }
-      secondaryCategoryInput.appendChild(option);
-    });
-
-    summaryInput = document.createElement("input");
-    summaryInput.type = "text";
-    summaryInput.name = "summary";
-    summaryInput.value = initialState.summary;
-    summaryInput.required = "true";
-    summaryInput.maxlength = "128";
-
-    descriptionInput = document.createElement("textarea");
-    descriptionInput.name = "description";
-    descriptionInput.rows = "10";
-    descriptionInput.required = "true";
-    descriptionInput.value = initialState.description;
-
-    websiteInput = document.createElement("input");
-    websiteInput.type = "url";
-    websiteInput.name = "website";
-    websiteInput.maxlength = "256";
-    websiteInput.value = initialState.website;
-
-    contactInput = document.createElement("input");
-    contactInput.type = "url";
-    contactInput.name = "contact";
-    contactInput.value = initialState.contact;
-    contactInput.maxlength = "256";
-
-    csrfInput = document.createElement("input");
-    csrfInput.type = "hidden";
-    csrfInput.name = "csrf_token";
-    csrfInput.value = "test";
-
-    form.appendChild(submitButton);
-    form.appendChild(revertButton);
-    form.appendChild(previewButton);
-    form.appendChild(titleInput);
-    form.appendChild(categoriesInput);
-    form.appendChild(primaryCategoryInput);
-    form.appendChild(secondaryCategoryInput);
-    form.appendChild(summaryInput);
-    form.appendChild(descriptionInput);
-    form.appendChild(websiteInput);
-    form.appendChild(contactInput);
-    form.appendChild(csrfInput);
-
-    document.body.appendChild(form);
-
-    previewForm = document.createElement("form");
-    previewForm.id = "preview-form";
-    previewStateInput = document.createElement("input");
-    previewStateInput.name = "state";
-    previewStateInput.value = JSON.stringify(initialState);
-    previewForm.appendChild(previewStateInput);
-    document.body.appendChild(previewForm);
-
-    market.initForm(config, initialState, undefined);
-  }
-
-  const config = {
-    form: "market-form",
-  };
-
-  const initialState = {
-    snap_name: "test",
-    title: "test",
-    categories: [],
-    summary: "Summary",
-    description: "Description",
-    website: "https://example.com",
-    contact: "mailto:test@example.com",
-    images: [],
-  };
-
-  beforeEach(() => {
-    setupForm(config, initialState);
-  });
-
-  afterEach(() => {
-    form.parentNode.removeChild(form);
-  });
-
-  test("should create diff input", () => {
-    const diffInput = document.querySelector("[name='changes']");
-    expect(diffInput.value).toEqual("");
-  });
-
-  test("should disable the submit button", () => {
-    expect(submitButton.getAttribute("disabled")).toEqual("");
-  });
-
-  test("should disable the revert button", () => {
-    expect(revertButton.classList.contains("is-disabled")).toEqual(true);
-    expect(revertButton.href).toEqual("javascript:void(0);");
-  });
-
-  describe("on title change", () => {
-    beforeEach(() => {
-      titleInput.click();
-      titleInput.value = "test2";
-      titleInput.dispatchEvent(new Event("change", { bubbles: true }));
-    });
-
-    test("should enable save button", () => {
-      expect(submitButton.getAttribute("disabled")).toBeNull();
-    });
-
-    test("should enable revert button", () => {
-      expect(revertButton.classList.contains("is-disabled")).toEqual(false);
-      expect(revertButton.getAttribute("href")).toEqual("/test");
-    });
-  });
-
-  describe("on submit", () => {
-    describe("with diffs", () => {
-      test("should update state and diff", () => {
-        titleInput.click();
-        titleInput.value = "test3";
-        titleInput.dispatchEvent(new Event("change", { bubbles: true }));
-
-        form.dispatchEvent(new Event("submit"));
-
-        const stateInput = document.querySelector("[name='state']");
-        expect(stateInput.value).toEqual(
-          JSON.stringify(
-            Object.assign(initialState, {
-              title: "test",
-            }),
-          ),
-        );
-
-        const diffInput = document.querySelector("[name='changes']");
-        expect(diffInput.value).toEqual(
-          JSON.stringify({
-            title: "test3",
-            categories: "",
-          }),
-        );
-      });
-    });
-
-    describe("with no diff", () => {
-      test("should not submit", () => {
-        const event = new Event("submit");
-        const spy = jest.spyOn(event, "preventDefault");
-
-        form.dispatchEvent(event);
-
-        expect(spy.mock.calls.length).toEqual(1);
-      });
-    });
-  });
-
-  describe("on preview", () => {
-    test("should update the state", () => {
-      previewButton.dispatchEvent(
-        new Event("click", {
-          bubbles: true,
-        }),
-      );
-
-      expect(JSON.parse(previewStateInput.value)).toEqual(initialState);
-    });
-  });
-
-  describe("has localStorage", () => {
-    describe("updateLocalStorage init", () => {
-      test("should set the initial state", () => {
-        expect(window.localStorage.getItem("test-initial")).toEqual(
-          JSON.stringify(initialState),
-        );
-        expect(window.localStorage.getItem("test")).toEqual(
-          JSON.stringify(initialState),
-        );
-      });
-    });
-  });
-
-  describe("categories", () => {
-    describe("on submit", () => {
-      beforeEach(() => {
-        jest.spyOn(categories, "categories");
-        primaryCategoryInput.click();
-        primaryCategoryInput.options[0].removeAttribute("selected");
-        primaryCategoryInput.options[1].selected = "selected";
-        primaryCategoryInput.dispatchEvent(
-          new Event("change", { bubbles: true }),
-        );
-
-        form.dispatchEvent(new Event("submit"));
-      });
-      test("should call categories function", () => {
-        expect(categories.categories.mock.calls.length).toEqual(1);
-      });
-    });
-  });
-});
diff --git a/static/js/publisher/form.ts b/static/js/publisher/form.ts
deleted file mode 100644
index b11c7db420..0000000000
--- a/static/js/publisher/form.ts
+++ /dev/null
@@ -1,598 +0,0 @@
-import { updateState, diffState } from "./state";
-import { publicMetrics } from "./market/publicMetrics";
-import { whitelistBlacklist } from "./market/whitelistBlacklist";
-import { initLicenses, license } from "./market/license";
-import { categories } from "./market/categories";
-import { storageCommands } from "./market/storageCommands";
-import { initMedia } from "./market/initMedia";
-import { initIcon } from "./market/initIcon";
-import { initBanner } from "./market/initBanner";
-
-interface Image {
-  type: "icon" | "screenshot" | "banner";
-}
-
-// https://gist.github.com/dperini/729294
-// Luke 07-06-2018 made the protocol optional
-const URL_REGEXP =
-  /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
-// Luke 07-06-2018 rather then looking for a mailto, look for 1 @ and at least 1 .
-const MAILTO_REGEXP = /[^@]+@[^@]+\.[^@]+/;
-
-// check if browser is on chromium engine, based on:
-// https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
-const IS_CHROMIUM =
-  window.chrome !== null &&
-  typeof window.chrome !== "undefined" &&
-  window.navigator.userAgent.indexOf("Edge") === -1; // Edge pretends to have window.chrome
-
-interface InitFormConfig {
-  form: string;
-  snapIconHolder: HTMLElement | null;
-  formNotification: string;
-  mediaHolder: HTMLElement | null;
-  bannerHolder: HTMLElement | null;
-  licenseRadioContent: HTMLElement | null;
-}
-
-interface InitialState {
-  [key: string]: unknown;
-}
-
-function initFormNotification(formElId: string, notificationElId: string) {
-  const form = document.getElementById(formElId) as HTMLFormElement;
-
-  form.addEventListener("change", function () {
-    const notification = document.getElementById(notificationElId);
-
-    if (notification && notification.parentNode) {
-      notification.parentNode.removeChild(notification);
-    }
-  });
-  const notification = document.getElementById(notificationElId);
-
-  if (notification) {
-    setTimeout(function () {
-      if (notification && notification.parentNode) {
-        notification.parentNode.removeChild(notification);
-      }
-    }, 20000);
-  }
-}
-
-function initForm(
-  config: InitFormConfig,
-  initialState: InitialState,
-  errors: string | string[] | undefined,
-) {
-  // if there are errors focus first error
-  if (errors && errors.length) {
-    // find input with error or error notification and scroll it into view
-    const errorInput =
-      (document.querySelector(".is-error input") as HTMLInputElement) ||
-      (document.querySelector(".p-notification--negative") as HTMLInputElement);
-
-    if (errorInput) {
-      errorInput.focus();
-
-      if (errorInput.scrollIntoView) {
-        const stickyEl = document.querySelector(
-          ".snapcraft-p-sticky",
-        ) as HTMLElement;
-        const stickyHeight = stickyEl.scrollHeight;
-        errorInput.scrollIntoView();
-        window.scrollBy(0, -(stickyHeight + 16));
-      }
-    }
-  }
-
-  // setup form functionality
-  const formEl = document.getElementById(config.form) as HTMLFormElement;
-  const submitButton = formEl.querySelector(
-    ".js-form-submit",
-  ) as HTMLButtonElement;
-  const revertButton = formEl.querySelector(".js-form-revert") as HTMLElement;
-  const previewButton = formEl.querySelector(
-    ".js-listing-preview",
-  ) as HTMLElement;
-  const revertURL = revertButton.getAttribute("href") as string;
-  const disabledRevertClass = "is-disabled";
-
-  function disableSubmit() {
-    submitButton.disabled = true;
-  }
-
-  function enableSubmit() {
-    submitButton.disabled = false;
-  }
-
-  function disableRevert() {
-    revertButton.setAttribute("href", "javascript:void(0);");
-    revertButton.classList.add(disabledRevertClass);
-  }
-
-  function enableRevert() {
-    revertButton.setAttribute("href", revertURL);
-    revertButton.classList.remove(disabledRevertClass);
-  }
-
-  // disable submit by default, it will be enabled on valid change
-  disableSubmit();
-  disableRevert();
-
-  const state = JSON.parse(JSON.stringify(initialState));
-
-  const diffInput = document.createElement("input");
-  diffInput.type = "hidden";
-  diffInput.name = "changes";
-  diffInput.value = "";
-
-  formEl.appendChild(diffInput);
-
-  if (config.snapIconHolder) {
-    const icons = state.images.filter(
-      (image: { type: string }) => image.type === "icon",
-    );
-    initIcon(
-      config.snapIconHolder,
-      icons[0],
-      state.title,
-      (newIcon: Image | null) => {
-        let noneIcons = state.images.filter(
-          (image: { type: string }) => image.type !== "icon",
-        );
-
-        if (newIcon) {
-          noneIcons = noneIcons.concat([newIcon]);
-        }
-
-        const newState = {
-          ...state,
-          images: noneIcons,
-        };
-
-        updateState(state, newState);
-        updateFormState();
-      },
-    );
-  }
-
-  initFormNotification(config.form, config.formNotification);
-
-  if (config.mediaHolder) {
-    const screenshots = state.images.filter(
-      (image: { type: string }) => image.type === "screenshot",
-    );
-    initMedia(config.mediaHolder, screenshots, (newImages: Image[]) => {
-      const noneScreenshots = state.images.filter(
-        (item: { type: string }) => item.type !== "screenshot",
-      );
-      const newState = {
-        ...state,
-        images: noneScreenshots.concat(newImages),
-      };
-      updateState(state, newState);
-      updateFormState();
-    });
-  }
-
-  if (config.bannerHolder) {
-    const banners = state.images.filter(
-      (image: { type: string }) => image.type === "banner",
-    );
-    initBanner(config.bannerHolder, banners, (image: Image | null) => {
-      let newImages = state.images.filter(
-        (image: { type: string }) => image.type !== "banner",
-      );
-
-      if (image) {
-        newImages = newImages.concat([image]);
-      }
-
-      const newState = {
-        ...state,
-        images: newImages,
-      };
-      updateState(state, newState);
-      updateFormState();
-    });
-  }
-
-  if (config.licenseRadioContent) {
-    initLicenses(config.licenseRadioContent);
-  }
-
-  let ignoreChangesOnUnload = false;
-
-  window.addEventListener("beforeunload", function (event) {
-    const diff = diffState(initialState, state);
-
-    if (!ignoreChangesOnUnload && diff) {
-      // crossbrowser beforeunload:
-      // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
-
-      // confirmation message (ignored by most browsers),
-      // but may be showed by some older ones
-      const confirmationMessage =
-        "Changes that you made will not be saved if you leave the page.";
-
-      event.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
-
-      return confirmationMessage; // Gecko, WebKit, Chrome <34
-    }
-
-    // make sure to show unload warning dialog during submit in progress
-    // but because of Chrome bug don't show it in Chrome:
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=152649
-    if (!IS_CHROMIUM) {
-      ignoreChangesOnUnload = false;
-    }
-
-    return "";
-  });
-
-  revertButton.addEventListener("click", () => {
-    // make sure we don't warn user about leaving the page when reverting
-    ignoreChangesOnUnload = true;
-  });
-
-  function checkForm() {
-    const diff = diffState(initialState, state);
-
-    if (diff) {
-      enableRevert();
-      if (isFormValid()) {
-        enableSubmit();
-      } else {
-        disableSubmit();
-      }
-    } else {
-      disableRevert();
-      disableSubmit();
-    }
-  }
-
-  interface Field {
-    checked: boolean;
-  }
-
-  interface State {
-    [key: string]: unknown;
-  }
-
-  function metadata(field: Field, state: State) {
-    state["update_metadata_on_release"] = field.checked;
-  }
-
-  function updateFormState() {
-    // Some extra modifications need to happen for the checkboxes
-    if (formEl["public_metrics_enabled"]) {
-      publicMetrics(formEl);
-    }
-    if (formEl["territories"]) {
-      whitelistBlacklist(formEl);
-    }
-    if (formEl["license"]) {
-      license(formEl);
-    }
-    const primaryCategoryElement =
-      formEl.elements.namedItem("primary_category");
-    if (primaryCategoryElement) {
-      categories(formEl, state);
-    }
-
-    const updateMetadataElement = formEl.elements.namedItem(
-      "update_metadata_on_release",
-    ) as HTMLInputElement;
-    if (updateMetadataElement) {
-      const fieldValue: Field = { checked: updateMetadataElement.checked };
-      metadata(fieldValue, state);
-    }
-
-    const formData = new FormData(formEl);
-
-    // update state based on data of all inputs
-    updateState(state, formData);
-
-    // checkboxes are tricky,
-    // make sure to update state based on their 'checked' status
-    if (formEl["private"]) {
-      // "private" radio sets both `private` and `unlisted` values
-      // if value is:
-      //   "public": private is false, unlisted is false
-      //   "unlisted": private is false, unlisted is true
-      //   "private": private is true, unlisted is false
-      updateState(state, {
-        private: formEl["private"].value === "private",
-        unlisted: formEl["private"].value === "unlisted",
-      });
-    }
-
-    if (formEl["public_metrics_enabled"]) {
-      updateState(state, {
-        public_metrics_enabled: formEl["public_metrics_enabled"].checked,
-      });
-    }
-
-    checkForm();
-    updateLocalStorage();
-  }
-
-  function receiveCommands() {
-    if (window.localStorage) {
-      window.addEventListener("storage", (e) => {
-        storageCommands(e, formEl, state["snap_name"], () => {
-          ignoreChangesOnUnload = true;
-        });
-      });
-    }
-  }
-
-  function updateLocalStorage() {
-    if (!window.localStorage) {
-      previewButton.classList.add("u-hide");
-      return;
-    }
-    const key = state["snap_name"];
-    window.localStorage.setItem(`${key}-initial`, JSON.stringify(initialState));
-    window.localStorage.setItem(key, JSON.stringify(state));
-  }
-
-  // when anything is changed update the state
-  formEl.addEventListener("change", function () {
-    updateFormState();
-  });
-
-  formEl.addEventListener(
-    "submit",
-    function (event: { preventDefault: () => void }) {
-      event.preventDefault();
-
-      const diff = diffState(initialState, state);
-
-      // if anything was changed, update state inputs and submit
-      if (diff) {
-        diffInput.value = JSON.stringify(diff);
-
-        // make sure we don't warn user about leaving the page when submitting
-        ignoreChangesOnUnload = true;
-
-        const updateMetadataModal = document.querySelector(
-          ".update-metadata-warning",
-        );
-
-        if (updateMetadataModal) {
-          updateMetadataModal.classList.remove("u-hide");
-
-          const saveChangesButton = updateMetadataModal.querySelector(
-            ".js-save-changes",
-          ) as HTMLButtonElement;
-          const closeModalButtons: NodeListOf<HTMLElement> =
-            document.querySelectorAll(".close-modal-button");
-
-          closeModalButtons.forEach((closeModalButton: HTMLElement) => {
-            closeModalButton.addEventListener("click", () => {
-              updateMetadataModal.classList.add("u-hide");
-            });
-          });
-
-          saveChangesButton.addEventListener("click", () => {
-            updateMetadataModal.classList.add("u-hide");
-            disableSubmit();
-            submitButton.classList.add("has-spinner");
-            setTimeout(() => {
-              formEl.submit();
-            }, 2000);
-          });
-        } else {
-          disableSubmit();
-          submitButton.classList.add("has-spinner");
-          setTimeout(() => {
-            formEl.submit();
-          }, 2000);
-        }
-      } else {
-        updateLocalStorage();
-      }
-    },
-  );
-
-  // client side validation
-
-  interface InputValidation {
-    isValid: boolean;
-    required?: boolean;
-    maxLength?: number;
-    counterEl?: HTMLElement;
-    mailto?: boolean;
-    url?: boolean;
-  }
-  const validation: { [key: string]: InputValidation } = {};
-  const validateInputs = Array.from(formEl.querySelectorAll("input,textarea"));
-
-  function isFormValid() {
-    // form is valid if every validated input is valid
-    return Object.keys(validation).every(
-      (name: string) => validation[name].isValid,
-    );
-  }
-
-  function validateInput(input: HTMLInputElement | HTMLTextAreaElement) {
-    const field = input.closest(".p-form-validation");
-
-    if (field) {
-      const message = field.querySelector(".p-form-validation__message");
-      if (message) {
-        message.remove();
-      }
-
-      let isValid = true;
-      let showCounter = false;
-
-      const inputValidation = validation[input.name];
-
-      if (inputValidation.required) {
-        const length = input.value.length;
-        if (!length) {
-          isValid = false;
-        }
-      }
-
-      if (inputValidation.maxLength) {
-        if (validation[input.name].maxLength === input.value.length) {
-          if (inputValidation.counterEl) {
-            inputValidation.counterEl.innerHTML = `The maximum number of characters for this field is ${inputValidation.maxLength}.`;
-          }
-          showCounter = true;
-        } else {
-          if (inputValidation.counterEl) {
-            inputValidation.counterEl.innerHTML = "";
-          }
-          showCounter = false;
-        }
-      }
-
-      // only validate contents when there is any value
-      if (input.value.length > 0) {
-        if (inputValidation.mailto) {
-          if (
-            !URL_REGEXP.test(input.value) &&
-            !MAILTO_REGEXP.test(input.value)
-          ) {
-            isValid = false;
-          }
-        } else if (inputValidation.url) {
-          if (!URL_REGEXP.test(input.value)) {
-            isValid = false;
-          }
-        }
-      }
-
-      if (isValid) {
-        field.classList.remove("is-error");
-        inputValidation.isValid = true;
-      } else {
-        field.classList.add("is-error");
-        inputValidation.isValid = false;
-      }
-
-      if (showCounter) {
-        field.classList.add("has-counter");
-      } else {
-        field.classList.remove("has-counter");
-      }
-    }
-  }
-
-  // prepare validation of inputs based on their HTML attributes
-  validateInputs.forEach((input) => {
-    const inputValidation: InputValidation = { isValid: true };
-
-    if (
-      input instanceof HTMLInputElement ||
-      input instanceof HTMLTextAreaElement
-    ) {
-      if (input.maxLength > 0) {
-        // save max length, but remove it from input so more chars can be entered
-        inputValidation.maxLength = input.maxLength;
-
-        // prepare counter element to show how many chars need to be removed
-        const counter = document.createElement("p");
-        counter.className = "p-form-help-text";
-        inputValidation.counterEl = counter;
-        if (input.parentNode) {
-          input.parentNode.appendChild(counter);
-        }
-      }
-
-      if (input.required) {
-        inputValidation.required = true;
-      }
-
-      if (input.type === "url") {
-        inputValidation.url = true;
-      }
-
-      // allow mailto: addresses for contact field
-      if (input.name === "contact") {
-        inputValidation.mailto = true;
-      }
-
-      validation[input.name] = inputValidation;
-    }
-  });
-
-  // validate inputs on change
-  formEl.addEventListener("input", function (event: Event) {
-    const target = event.target as unknown as
-      | HTMLInputElement
-      | HTMLTextAreaElement
-      | null;
-
-    if (
-      target &&
-      (target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement)
-    ) {
-      validateInput(target);
-      updateFormState();
-    }
-  });
-
-  const previewForm = document.getElementById(
-    "preview-form",
-  ) as HTMLFormElement;
-
-  const openPreview = () => {
-    const stateInput = previewForm.elements.namedItem(
-      "state",
-    ) as HTMLInputElement;
-    stateInput.value = JSON.stringify(state);
-  };
-
-  if (previewForm) {
-    previewForm.addEventListener("submit", openPreview);
-  }
-
-  // Prefix contact and website fields on blur if the user doesn't provide the protocol
-  function prefixInput(input: HTMLInputElement) {
-    if (["website", "contact"].includes(input.name)) {
-      if (
-        validation[input.name].isValid &&
-        input.value.length > 0 &&
-        !input.value.includes("http") &&
-        !input.value.includes("mailto")
-      ) {
-        if (input.name === "website") {
-          input.value = `https://${input.value}`;
-        } else if (
-          input.name === "contact" &&
-          MAILTO_REGEXP.test(input.value)
-        ) {
-          input.value = `mailto:${input.value}`;
-        }
-        validateInput(input);
-        updateFormState();
-      }
-    }
-  }
-
-  const prefixableFields = ["website", "contact"];
-  prefixableFields.forEach((inputName: string) => {
-    const input = formEl[inputName];
-    if (input) {
-      input.addEventListener(
-        "blur",
-        function (event: { target: EventTarget | null }) {
-          const target = event.target as HTMLInputElement;
-          prefixInput(target);
-        },
-      );
-    }
-  });
-
-  receiveCommands();
-  updateLocalStorage();
-}
-
-export { initForm };
diff --git a/static/js/publisher/form/AccordionHelp.js b/static/js/publisher/form/AccordionHelp.js
deleted file mode 100644
index e82da326aa..0000000000
--- a/static/js/publisher/form/AccordionHelp.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-
-class AccordionHelp extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toggleHelp = this.toggleHelp.bind(this);
-
-    this.state = {
-      open: false,
-    };
-  }
-
-  toggleHelp(e) {
-    const { open } = this.state;
-
-    e.preventDefault();
-    this.setState({
-      open: !open,
-    });
-  }
-
-  render() {
-    const { open } = this.state;
-    const { name, children } = this.props;
-
-    let label = `Hide ${name.toLowerCase()}`;
-    if (!open) {
-      label = `Show ${name.toLowerCase()}`;
-    }
-
-    return (
-      <Fragment>
-        <p className="p-form-help-text">
-          <a href="#" role="button" tabIndex="0" onClick={this.toggleHelp}>
-            {label}
-          </a>
-        </p>
-        <div className={`${open ? "" : "u-hide"}`}>{children}</div>
-      </Fragment>
-    );
-  }
-}
-
-AccordionHelp.defaultProps = {
-  name: "help",
-};
-
-AccordionHelp.propTypes = {
-  name: PropTypes.string,
-  children: PropTypes.element,
-};
-
-export { AccordionHelp as default };
diff --git a/static/js/publisher/form/AccordionHelp.test.js b/static/js/publisher/form/AccordionHelp.test.js
deleted file mode 100644
index 37d584574a..0000000000
--- a/static/js/publisher/form/AccordionHelp.test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import AccordionHelp from "./AccordionHelp";
-
-describe("AccordionHelp", () => {
-  it("renders with a title", () => {
-    const { container } = render(<AccordionHelp name="test" />);
-    expect(container.querySelector("a").innerHTML).toEqual("Show test");
-  });
-
-  it("opens when toggled", () => {
-    const { container } = render(
-      <AccordionHelp name="test">
-        <div className="todd" />
-      </AccordionHelp>,
-    );
-    const aEl = container.querySelector("a");
-    fireEvent.click(aEl);
-    expect(aEl.innerHTML).toEqual("Hide test");
-    expect(container.querySelectorAll(".todd").length).toEqual(1);
-  });
-});
diff --git a/static/js/publisher/form/banner.js b/static/js/publisher/form/banner.js
deleted file mode 100644
index c012bd3d88..0000000000
--- a/static/js/publisher/form/banner.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-
-import FileInput from "../form/fileInput";
-import AccordionHelp from "./AccordionHelp";
-import RenderErrors from "../shared/RenderErrors";
-
-class Banner extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.bannerImageChangeHandler = this.bannerImageChangeHandler.bind(this);
-    this.handleRemoveImageClick = this.handleRemoveImageClick.bind(this);
-
-    this.keyboardEvent = this.keyboardEvent.bind(this);
-    this.toggleFocus = this.toggleFocus.bind(this);
-
-    this.state = {
-      bannerImage: this.props.bannerImage,
-      focused: false,
-      errors: {},
-    };
-  }
-
-  bannerImageChangeHandler(files) {
-    const { updateImageState } = this.props;
-    const file = files[0];
-
-    if (file.errors) {
-      this.setState({
-        errors: {
-          [file.name]: file.errors,
-        },
-      });
-    } else {
-      const url = URL.createObjectURL(file);
-
-      this.setState({
-        errors: {},
-        bannerImage: {
-          url: url,
-        },
-      });
-
-      updateImageState({
-        url: url,
-        file,
-        name: file.name,
-        status: "new",
-        type: "banner",
-      });
-    }
-  }
-
-  handleRemoveImageClick() {
-    const { updateImageState } = this.props;
-
-    this.setState({
-      errors: {},
-      bannerImage: {},
-    });
-
-    updateImageState(null);
-  }
-
-  keyboardEvent(e) {
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.handleRemoveImageClick();
-    }
-  }
-
-  toggleFocus() {
-    const { focused } = this.state;
-    this.setState({
-      focused: !focused,
-    });
-  }
-
-  renderErrors() {
-    const { errors } = this.state;
-    if (Object.keys(errors).length > 0) {
-      return <RenderErrors errors={errors} />;
-    }
-    return false;
-  }
-
-  renderBackground() {
-    const { bannerImage } = this.state;
-    const { restrictions } = this.props;
-    const background = bannerImage.url;
-
-    let backgroundClasses = ["p-market-banner__image"];
-    if (!background) {
-      backgroundClasses.push("is-empty");
-    }
-
-    return (
-      <Fragment>
-        <FileInput
-          inputName="banner-image"
-          inputId="banner-image"
-          active={true}
-          fileChangedCallback={this.bannerImageChangeHandler}
-          noFocus={true}
-          restrictions={restrictions}
-        >
-          <div
-            className={backgroundClasses.join(" ")}
-            tabIndex="0"
-            onKeyDown={this.keyboardEvent}
-            onFocus={this.toggleFocus}
-            onBlur={this.toggleFocus}
-          >
-            {background ? (
-              <img src={background} />
-            ) : (
-              <div className="u-align-text--center">
-                <i className="p-icon--plus" />
-                Add banner
-              </div>
-            )}
-          </div>
-        </FileInput>
-        {background && (
-          <Fragment>
-            <span
-              className="p-market-banner__remove p-market-remove"
-              role="button"
-              onClick={this.handleRemoveImageClick}
-            >
-              <i className="p-icon--delete" />
-            </span>
-            <div className="p-market-banner__change">Edit banner</div>
-          </Fragment>
-        )}
-      </Fragment>
-    );
-  }
-
-  renderHelp() {
-    return (
-      <Fragment>
-        <p className="p-form-help-text">
-          Adding a featured banner will increase your chances of being featured
-          on snapcraft.io and in GNOME software but does not immediately make
-          you eligible to be featured.
-        </p>
-        <AccordionHelp name="banner restrictions">
-          <ul>
-            <li>
-              <small>
-                Accepted image formats include: <b>JPEG & PNG files</b>
-              </small>
-            </li>
-            <li>
-              <small>
-                Min resolution: <b>720 x 240 pixels</b>
-                <br />
-                <i>
-                  For best results on <a href="/store">the store</a> we
-                  recommend a resolution of <b>1920 x 640 pixels</b> or greater
-                </i>
-              </small>
-            </li>
-            <li>
-              <small>
-                Max resolution: <b>4320 x 1440 pixels</b>
-              </small>
-            </li>
-            <li>
-              <small>
-                Aspect ratio: <b>3:1</b>
-              </small>
-            </li>
-            <li>
-              <small>
-                File size limit: <b>2MB</b>
-              </small>
-            </li>
-          </ul>
-        </AccordionHelp>
-      </Fragment>
-    );
-  }
-
-  render() {
-    const { focused } = this.state;
-    const classNames = ["p-market-banner__image-holder"];
-    if (focused) {
-      classNames.push("is-focused");
-    }
-    return (
-      <Fragment>
-        {this.renderErrors()}
-        <div className={classNames.join(" ")}>{this.renderBackground()}</div>
-        {this.renderHelp()}
-      </Fragment>
-    );
-  }
-}
-
-Banner.defaultProps = {
-  bannerImage: {},
-  restrictions: {},
-  updateImageState: () => {},
-};
-
-Banner.propTypes = {
-  bannerImage: PropTypes.shape({
-    url: PropTypes.string,
-  }),
-  restrictions: PropTypes.object,
-  updateImageState: PropTypes.func,
-};
-
-export { Banner as default };
diff --git a/static/js/publisher/form/banner.test.js b/static/js/publisher/form/banner.test.js
deleted file mode 100644
index 171acb04d2..0000000000
--- a/static/js/publisher/form/banner.test.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import Banner from "./banner";
-
-const backgroundSelector = ".p-market-banner__image img";
-
-describe("Banner", () => {
-  it("should render with no props", () => {
-    const { container } = render(<Banner />);
-
-    expect(
-      container.querySelectorAll(".p-market-banner__image-holder").length,
-    ).toEqual(1);
-  });
-
-  describe("background image", () => {
-    it("should show the background image if set at render", () => {
-      const { container } = render(
-        <Banner bannerImage={{ url: "banner.png" }} />,
-      );
-
-      expect(
-        container.querySelector(backgroundSelector).getAttribute("src"),
-      ).toEqual("banner.png");
-    });
-
-    it("should set the background if image added", (done) => {
-      const { container } = render(<Banner />);
-
-      window.URL = {
-        createObjectURL: () => {
-          return "banner.png";
-        },
-      };
-
-      const fileContents = "test";
-      const file = new File([fileContents], "banner.png", {
-        type: "image/png",
-      });
-
-      const input = container.querySelector(`[name="banner-image"]`);
-
-      Object.defineProperty(input, "files", {
-        value: [file],
-      });
-
-      fireEvent.change(input);
-
-      setTimeout(() => {
-        expect(
-          container.querySelectorAll(".p-notification--negative").length,
-        ).toEqual(0);
-
-        const imageElement = container.querySelector(backgroundSelector);
-        if (imageElement) {
-          expect(imageElement.getAttribute("src")).toEqual("banner.png");
-        }
-
-        done();
-      }, 500);
-    });
-
-    it("should show an error if a restriction isn't met", (done) => {
-      const { container } = render(
-        <Banner
-          restrictions={{
-            accept: ["image/jpeg"],
-          }}
-        />,
-      );
-
-      window.URL = {
-        createObjectURL: () => {
-          return "banner.png";
-        },
-      };
-
-      const fileContents = "test";
-      const file = new File([fileContents], "banner.png", {
-        type: "text/html",
-      });
-
-      const input = container.querySelector(`[name="banner-image"]`);
-
-      Object.defineProperty(input, "files", {
-        value: [file],
-      });
-
-      fireEvent.change(input);
-
-      setTimeout(() => {
-        expect(
-          container.querySelectorAll(".p-notification--negative").length,
-        ).toEqual(1);
-        done();
-      }, 500);
-    });
-
-    it("should remove the background when delete is clicked", () => {
-      const cb = jest.fn();
-      const { container } = render(
-        <Banner
-          bannerImage={{
-            url: "banner.png",
-          }}
-          updateImageState={cb}
-        />,
-      );
-
-      const deleteButton = container.querySelector(".p-market-banner__remove");
-
-      fireEvent.click(deleteButton);
-
-      expect(cb.mock.calls.length).toEqual(1);
-      expect(cb.mock.calls[0][0]).toEqual(null);
-    });
-
-    it("should remove the background when backspace is pressed", () => {
-      const cb = jest.fn();
-      const { container } = render(
-        <Banner
-          bannerImage={{
-            url: "banner.png",
-          }}
-          updateImageState={cb}
-        />,
-      );
-
-      const backgroundImage = container.querySelector(backgroundSelector);
-
-      fireEvent.keyDown(backgroundImage, {
-        key: "Backspace",
-      });
-
-      expect(cb.mock.calls.length).toEqual(1);
-      expect(cb.mock.calls[0][0]).toEqual(null);
-    });
-
-    it("should set focus class when focused and remove it on blur", () => {
-      const { container } = render(
-        <Banner bannerImage={{ url: "banner.png" }} />,
-      );
-
-      const image = container.querySelector(backgroundSelector);
-      fireEvent.focus(image);
-      expect(container.querySelectorAll(".is-focused").length).toEqual(1);
-
-      fireEvent.blur(image);
-      expect(container.querySelectorAll(".is-focused").length).toEqual(0);
-    });
-  });
-});
diff --git a/static/js/publisher/form/fileInput.js b/static/js/publisher/form/fileInput.js
deleted file mode 100644
index 9a488592f7..0000000000
--- a/static/js/publisher/form/fileInput.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import { validateRestrictions } from "../../libs/fileValidation";
-
-class FileInput extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.fileClickHandler = this.fileClickHandler.bind(this);
-    this.fileChangedHandler = this.fileChangedHandler.bind(this);
-    this.keyboardEventHandler = this.keyboardEventHandler.bind(this);
-    this.dragOverHandler = this.dragOverHandler.bind(this);
-    this.dropHandler = this.dropHandler.bind(this);
-    this.dragExitHandler = this.dragExitHandler.bind(this);
-    this.dragLeaveHandler = this.dragLeaveHandler.bind(this);
-
-    this.cancelDragging = this.cancelDragging.bind(this);
-
-    this.state = {
-      isDragging: false,
-      canDrop: false,
-      overLimit: false,
-    };
-  }
-
-  componentDidMount() {
-    const { restrictions, inputName, inputId } = this.props;
-
-    // Handle input creation outside of the react lifecycle to avoid
-    // re-rendering and side-effects. We need the input to maintain a consistent
-    // DOM state throughout the component lifecycle.
-    this.input = document.createElement("input");
-    this.input.type = "file";
-    this.input.name = inputName;
-    this.input.id = inputId;
-    if (restrictions && restrictions.accept) {
-      this.input.accept = restrictions.accept;
-    }
-    this.input.hidden = true;
-    this.input.addEventListener("change", this.fileChangedHandler);
-
-    this.holder.appendChild(this.input);
-
-    document.addEventListener("dragover", this.dragOverHandler);
-    document.addEventListener("drop", this.dropHandler);
-
-    if ("ondragexit" in document) {
-      // Firefox fires dragexit and we can use the event.relatedTarget to see what the
-      // new element taking focus is. When leaving the window, this is set to null
-      document.addEventListener("dragexit", this.dragExitHandler);
-    } else {
-      // Chrome does not implement dragexit, but it does fire an event as soon as the
-      // mouse leaves the window, setting the mouse position to 0, 0
-      document.addEventListener("dragleave", this.dragLeaveHandler);
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("dragover", this.dragOverHandler);
-    document.removeEventListener("drop", this.dropHandler);
-    if ("ondragexit" in document) {
-      document.removeEventListener("dragexit", this.dragExitHandler);
-    } else {
-      document.removeEventListener("dragleave", this.dragLeaveHandler);
-    }
-  }
-
-  fileClickHandler() {
-    const { active } = this.props;
-    if (active) {
-      this.input.value = "";
-      this.input.click();
-    }
-  }
-
-  fileChangedHandler() {
-    const { fileChangedCallback, restrictions } = this.props;
-    const files = Array.from(this.input.files).map((file) =>
-      validateRestrictions(file, restrictions),
-    );
-
-    Promise.all(files).then((values) => {
-      // Remove the new file from input if is not valid
-      if (values[0].errors) {
-        this.input.value = "";
-      }
-      fileChangedCallback(values);
-    });
-  }
-
-  keyboardEventHandler(e) {
-    if (e.key === "Enter") {
-      this.fileClickHandler();
-    }
-  }
-
-  dragOverHandler(e) {
-    e.preventDefault();
-    const dataTransfer = e.dataTransfer || e.target.dataTransfer;
-
-    if (dataTransfer.types && dataTransfer.types.indexOf("Files") !== -1) {
-      if (dataTransfer.items.length > 1) {
-        this.setState({
-          isDragging: true,
-          overLimit: true,
-        });
-      } else {
-        this.setState({
-          isDragging: true,
-          canDrop: false,
-          overLimit: false,
-        });
-
-        if (e.target === this.holder) {
-          this.setState({
-            canDrop: true,
-          });
-        }
-      }
-    }
-  }
-
-  cancelDragging() {
-    this.setState({
-      isDragging: false,
-      canDrop: false,
-      overLimit: false,
-    });
-  }
-
-  dragExitHandler(e) {
-    const relatedTarget = e.relatedTarget || e.target.relatedTarget;
-    if (relatedTarget === null) {
-      this.cancelDragging();
-    }
-  }
-
-  dragLeaveHandler(e) {
-    if (e.clientX + e.clientY === 0) {
-      this.cancelDragging();
-    }
-  }
-
-  dropHandler(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const dataTransfer = e.dataTransfer || e.target.dataTransfer;
-
-    if (dataTransfer.items.length === 1) {
-      this.setState({
-        isDragging: false,
-        canDrop: false,
-      });
-
-      if (e.target === this.holder) {
-        // I can't find a way to test this
-        this.input.files = dataTransfer.files;
-        this.fileChangedHandler();
-      }
-    } else {
-      this.cancelDragging();
-    }
-  }
-
-  render() {
-    const { className, children, isSmall, noFocus } = this.props;
-    const { isDragging, canDrop, overLimit } = this.state;
-    const localClassName = [className, "p-file-input"];
-
-    if (isDragging) {
-      localClassName.push("is-dragging");
-    }
-
-    if (canDrop) {
-      localClassName.push("can-drop");
-    }
-
-    if (overLimit) {
-      localClassName.push("over-limit");
-    }
-
-    if (isSmall) {
-      localClassName.push("p-file-input--is-small");
-    }
-
-    return (
-      <div
-        ref={(el) => (this.holder = el)}
-        className={localClassName.join(" ")}
-        onClick={this.fileClickHandler}
-        onKeyDown={this.keyboardEventHandler}
-        tabIndex={noFocus ? null : 0}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-FileInput.defaultProps = {
-  className: "",
-  inputName: "file-upload",
-  inputId: "file-upload",
-  fileChangedCallback: () => {},
-  restrictions: {
-    accept: [],
-  },
-  active: true,
-  isSmall: false,
-  noFocus: false,
-};
-
-FileInput.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  inputName: PropTypes.string,
-  inputId: PropTypes.string,
-  fileChangedCallback: PropTypes.func,
-  restrictions: PropTypes.shape({
-    accept: PropTypes.arrayOf(PropTypes.string),
-  }),
-  active: PropTypes.bool,
-  isSmall: PropTypes.bool,
-  noFocus: PropTypes.bool,
-};
-
-export { FileInput as default };
diff --git a/static/js/publisher/form/fileInput.test.js b/static/js/publisher/form/fileInput.test.js
deleted file mode 100644
index 8d5fc32436..0000000000
--- a/static/js/publisher/form/fileInput.test.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import FileInput from "./fileInput";
-import React from "react";
-import { render, fireEvent, waitFor } from "@testing-library/react";
-import * as fileValidation from "../../libs/fileValidation";
-
-describe("FileInput", () => {
-  it("should append an input when holder is clicked", () => {
-    const { container } = render(
-      <FileInput
-        className="test"
-        inputName="test-input"
-        restrictions={{
-          accept: ["image/jpeg"],
-        }}
-      >
-        <span>bewton</span>
-      </FileInput>,
-    );
-
-    const clickElement = container.querySelector(".test");
-    fireEvent.click(clickElement);
-
-    const input = container.querySelector(`[name="test-input"]`);
-
-    expect(input.accept).toEqual("image/jpeg");
-  });
-
-  it("should run restrictions when a file changes", () => {
-    const mock = jest.spyOn(fileValidation, "validateRestrictions");
-
-    const { container } = render(
-      <FileInput
-        className="test"
-        inputName="test-input"
-        restrictions={{
-          accept: ["image/jpeg"],
-        }}
-      >
-        <span>bewton</span>
-      </FileInput>,
-    );
-    const clickElement = container.querySelector(".test");
-
-    fireEvent.click(clickElement);
-
-    const input = container.querySelector(`[name="test-input"]`);
-
-    const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
-
-    fireEvent.change(input, {
-      target: {
-        files: [file],
-      },
-    });
-
-    expect(mock.mock.calls.length).toEqual(1);
-    mock.mockRestore();
-  });
-
-  it("should create a new image if return is pressed on add image", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(`[name="file-upload"]`);
-    const clickCb = jest.fn();
-
-    input.addEventListener("click", clickCb);
-
-    const addButton = container.querySelector(".p-file-input");
-
-    fireEvent.keyDown(addButton, { key: "Enter", code: 13, charCode: 13 });
-
-    expect(clickCb.mock.calls.length).toEqual(1);
-  });
-
-  it("should add drag related event listeners to document on mount", () => {
-    const addEventListener = jest.spyOn(document, "addEventListener");
-
-    render(<FileInput />);
-
-    const dragRelatedCalls = addEventListener.mock.calls.filter(
-      (call) => call[0].indexOf("drag") > -1 || call[0].indexOf("drop") > -1,
-    );
-
-    expect(dragRelatedCalls.length).toEqual(3);
-  });
-
-  it("should remove drag related event listeners from document on unmount", () => {
-    const removeEventListener = jest.spyOn(document, "removeEventListener");
-
-    const { unmount } = render(<FileInput />);
-
-    unmount();
-
-    const dragRelatedCalls = removeEventListener.mock.calls.filter(
-      (call) => call[0].indexOf("drag") > -1 || call[0].indexOf("drop") > -1,
-    );
-
-    expect(dragRelatedCalls.length).toEqual(3);
-  });
-
-  it("should set the class `is-dragging` when a file is dragged onto the document", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(".p-file-input");
-
-    fireEvent.dragOver(container, {
-      target: {
-        dataTransfer: {
-          types: ["Files"],
-          items: [1],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-  });
-
-  it("should remove the class `is-dragging` when a file is dropped outside of the component", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(".p-file-input");
-
-    fireEvent.dragOver(container, {
-      target: {
-        dataTransfer: {
-          types: ["Files"],
-          items: [1],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-    fireEvent.drop(container, {
-      target: {
-        dataTransfer: {
-          items: [1],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(false);
-  });
-
-  it("should add the class `can-drop` when a file is dragged over the component", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(".p-file-input");
-
-    fireEvent.dragOver(container, {
-      target: {
-        dataTransfer: {
-          types: ["Files"],
-          items: [1],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-    const target = input.parentNode;
-    Object.defineProperties(target, {
-      dataTransfer: {
-        items: [1],
-        files: [new File(["test"], "test.jpg", { type: "image/jpeg" })],
-      },
-    });
-    fireEvent.dragOver(input, {
-      target: target,
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-    expect(input.classList.contains("can-drop")).toEqual(true);
-  });
-
-  it("should cancel dragging when exiting the window", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(".p-file-input");
-
-    fireEvent.dragOver(container, {
-      target: {
-        dataTransfer: {
-          types: ["Files"],
-          items: [1],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-    fireEvent.dragExit(input, {
-      target: {
-        relatedTarget: null,
-      },
-    });
-    waitFor(() => {
-      expect(input.classList.contains("is-dragging")).toEqual(false);
-      expect(input.classList.contains("can-drop")).toEqual(false);
-    });
-  });
-
-  it("should show a warning if more than 1 image is dragged", () => {
-    const { container } = render(<FileInput />);
-    const input = container.querySelector(".p-file-input");
-
-    fireEvent.dragOver(container, {
-      target: {
-        dataTransfer: {
-          types: ["Files"],
-          items: [1, 2],
-        },
-      },
-    });
-    expect(input.classList.contains("is-dragging")).toEqual(true);
-    expect(input.classList.contains("over-limit")).toEqual(true);
-  });
-});
diff --git a/static/js/publisher/form/icon.js b/static/js/publisher/form/icon.js
deleted file mode 100644
index f54b30238d..0000000000
--- a/static/js/publisher/form/icon.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
-
-import AccordionHelp from "./AccordionHelp";
-import FileInput from "./fileInput";
-import RenderErrors from "../shared/RenderErrors";
-
-class Icon extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.iconChanged = this.iconChanged.bind(this);
-    this.removeIconHandler = this.removeIconHandler.bind(this);
-
-    this.state = {
-      icon: props.icon,
-      errors: {},
-    };
-  }
-
-  removeIconHandler(e) {
-    const { updateIcon } = this.props;
-    e.preventDefault();
-    this.setState({
-      icon: {},
-    });
-
-    updateIcon(null);
-  }
-
-  iconChanged(files) {
-    const { updateIcon } = this.props;
-    const iconFile = files[0];
-
-    if (iconFile.errors) {
-      this.setState({
-        errors: {
-          [iconFile.name]: iconFile.errors,
-        },
-      });
-    } else {
-      const iconURL = URL.createObjectURL(iconFile);
-
-      this.setState({
-        errors: {},
-        icon: {
-          url: iconURL,
-        },
-      });
-
-      updateIcon({
-        url: iconURL,
-        file: iconFile,
-        name: iconFile.name,
-        status: "new",
-        type: "icon",
-      });
-    }
-  }
-
-  renderErrors() {
-    const { errors } = this.state;
-    if (Object.keys(errors).length > 0) {
-      return <RenderErrors errors={errors} />;
-    }
-    return false;
-  }
-
-  renderRescrictions() {
-    return (
-      <AccordionHelp name="icon restrictions">
-        <ul>
-          <li>
-            <small>
-              Accepted image formats include: <b>PNG, JPEG & SVG files</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Min resolution: <b>40 x 40 pixels</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Max resolution: <b>512 x 512 pixels</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Aspect ratio: <b>1:1</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              File size limit: <b>256kB</b>
-            </small>
-          </li>
-        </ul>
-      </AccordionHelp>
-    );
-  }
-
-  render() {
-    const { title, restrictions } = this.props;
-    const { icon } = this.state;
-
-    const iconUrl = icon ? icon.url : null;
-
-    return (
-      <Fragment>
-        {this.renderErrors()}
-        <div className="u-flex u-vertically-center">
-          <div className="p-editable-icon" data-tour="listing-icon">
-            <FileInput
-              restrictions={restrictions}
-              className="p-editable-icon__icon"
-              inputName="icon"
-              inputId="snap-icon"
-              fileChangedCallback={this.iconChanged}
-              isSmall={true}
-            >
-              {iconUrl && <img src={iconUrl} alt={`${title} snap`} />}
-              <span className="p-editable-icon__change">Edit</span>
-            </FileInput>
-          </div>
-          {iconUrl && (
-            <div className="p-editable-icon__actions">
-              <a
-                href="#"
-                role="button"
-                tabIndex="0"
-                className="p-editable-icon__delete"
-                onClick={this.removeIconHandler}
-              >
-                <i className="p-icon--delete" />
-              </a>
-            </div>
-          )}
-        </div>
-        {this.renderRescrictions()}
-      </Fragment>
-    );
-  }
-}
-
-Icon.defaultProps = {
-  icon: {},
-  title: "Snap icon",
-  restrictions: {},
-};
-
-Icon.propTypes = {
-  icon: PropTypes.object,
-  title: PropTypes.string,
-  updateIcon: PropTypes.func.isRequired,
-  restrictions: PropTypes.object,
-};
-
-export { Icon as default };
diff --git a/static/js/publisher/form/icon.test.js b/static/js/publisher/form/icon.test.js
deleted file mode 100644
index 09ef5cbc73..0000000000
--- a/static/js/publisher/form/icon.test.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import Icon from "./icon";
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-describe("Icon", () => {
-  it("should render without an icon", () => {
-    const { container } = render(<Icon updateIcon={() => {}} />);
-    expect(container.querySelectorAll(".p-editable-icon__icon").length).toEqual(
-      1,
-    );
-    expect(
-      container.querySelectorAll(".p-editable-icon__actions").length,
-    ).toEqual(0);
-  });
-
-  it("should render with an icon", () => {
-    const { container } = render(
-      <Icon icon={{ url: "test" }} updateIcon={() => {}} />,
-    );
-    expect(container.querySelectorAll(`img[src="test"]`).length).toEqual(1);
-    expect(
-      container.querySelectorAll(".p-editable-icon__actions").length,
-    ).toEqual(1);
-  });
-
-  it("should add a new icon when iconChanged is called", (done) => {
-    window.URL = {
-      createObjectURL: () => "test",
-    };
-    const changeCB = jest.fn();
-    const { container } = render(<Icon updateIcon={changeCB} />);
-
-    const file = new File(["test"], "test", { type: "image/png" });
-    const input = container.querySelector(`[name="icon"]`);
-
-    Object.defineProperty(input, "files", {
-      value: [file],
-    });
-
-    fireEvent.change(input);
-
-    setTimeout(() => {
-      expect(changeCB.mock.calls.length).toEqual(1);
-      expect(changeCB.mock.calls[0]).toEqual([
-        {
-          file,
-          name: "test",
-          url: "test",
-          status: "new",
-          type: "icon",
-        },
-      ]);
-      done();
-    }, 500);
-  });
-
-  it("should render an error when file doesn't validate", (done) => {
-    window.URL = {
-      createObjectURL: () => "test",
-    };
-    const changeCB = jest.fn();
-    const { container } = render(
-      <Icon
-        updateIcon={changeCB}
-        restrictions={{
-          accept: ["text/plain"],
-        }}
-      />,
-    );
-
-    const file = new File(["test"], "test", { type: "text/html" });
-    const input = container.querySelector(`[name="icon"]`);
-
-    Object.defineProperty(input, "files", {
-      value: [file],
-    });
-
-    fireEvent.change(input);
-
-    setTimeout(() => {
-      expect(
-        container.querySelectorAll(".p-notification--negative").length,
-      ).toEqual(1);
-      done();
-    }, 500);
-  });
-
-  it("should remove the icon when removeIcon is called", (done) => {
-    const changeCB = jest.fn();
-    const { container } = render(
-      <Icon icon={{ url: "test" }} updateIcon={changeCB} />,
-    );
-
-    const deleteButton = container.querySelector(".p-editable-icon__delete");
-
-    expect(deleteButton).toBeDefined();
-
-    fireEvent.click(deleteButton);
-
-    setTimeout(() => {
-      expect(changeCB.mock.calls.length).toEqual(1);
-      expect(changeCB.mock.calls[0]).toEqual([null]);
-      done();
-    }, 500);
-  });
-});
diff --git a/static/js/publisher/form/media.js b/static/js/publisher/form/media.js
deleted file mode 100644
index 3fa558cd3a..0000000000
--- a/static/js/publisher/form/media.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { Fragment } from "react";
-
-import { PropTypes } from "prop-types";
-
-import AccordionHelp from "./AccordionHelp";
-import SortableMediaList from "./mediaList";
-import RenderErrors from "../shared/RenderErrors";
-
-class Media extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.markForDeletion = this.markForDeletion.bind(this);
-    this.mediaChanged = this.mediaChanged.bind(this);
-
-    this.state = {
-      mediaData: props.mediaData,
-      errors: {},
-    };
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { mediaData } = this.state;
-    const { mediaLimit } = this.props;
-
-    if (prevState.mediaData !== mediaData && mediaData.length <= mediaLimit) {
-      this.props.updateState(mediaData);
-    }
-  }
-
-  markForDeletion(key) {
-    this.setState({
-      mediaData: this.state.mediaData.filter((item) => item.url !== key),
-    });
-  }
-
-  mediaChanged(files) {
-    const newMediaData = [...this.state.mediaData];
-    const errors = {};
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      if (file.errors) {
-        errors[file.name] = file.errors;
-      } else {
-        newMediaData.push({
-          file,
-          url: URL.createObjectURL(file),
-          name: file.name,
-          type: "screenshot",
-          status: "new",
-        });
-      }
-    }
-
-    this.setState({
-      mediaData: newMediaData,
-      errors: errors,
-    });
-  }
-
-  renderOverLimit() {
-    if (this.state.mediaData.length > this.props.mediaLimit) {
-      return (
-        <div className="p-notification--caution">
-          <div className="p-notification__content">
-            <p className="p-notification__message">
-              You have over 5 images uploaded. Not all image will be visible to
-              users.
-            </p>
-          </div>
-        </div>
-      );
-    }
-    return false;
-  }
-
-  renderErrors() {
-    const { errors } = this.state;
-    if (Object.keys(errors).length > 0) {
-      return <RenderErrors errors={errors} />;
-    }
-    return false;
-  }
-
-  renderRescrictions() {
-    return (
-      <AccordionHelp name="image restrictions">
-        <ul>
-          <li>
-            <small>
-              Accepted image formats include: <b>GIF, JPEG & PNG files</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Min resolution: <b>480 x 480 pixels</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Max resolution: <b>3840 x 2160 pixels</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Aspect ratio: <b>Between 1:2 and 2:1</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              File size limit: <b>2MB</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Animation min fps: <b>1</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Animation max fps: <b>30</b>
-            </small>
-          </li>
-          <li>
-            <small>
-              Animation max length: <b>40 seconds</b>
-            </small>
-          </li>
-        </ul>
-      </AccordionHelp>
-    );
-  }
-
-  onSortEnd(params) {
-    const { oldIndex, newIndex } = params;
-    const newMediaData = [...this.state.mediaData];
-    const moved = newMediaData.splice(oldIndex, 1);
-    newMediaData.splice(newIndex, 0, moved[0]);
-
-    this.setState({
-      mediaData: newMediaData,
-    });
-  }
-
-  render() {
-    const mediaList = this.state.mediaData;
-
-    return (
-      <Fragment>
-        {this.renderOverLimit()}
-        {this.renderErrors()}
-        <SortableMediaList
-          distance={10}
-          onSortEnd={this.onSortEnd.bind(this)}
-          axis="xy"
-          mediaData={mediaList}
-          mediaLimit={this.props.mediaLimit}
-          restrictions={this.props.restrictions}
-          markForDeletion={this.markForDeletion}
-          mediaChanged={this.mediaChanged}
-        />
-        {this.renderRescrictions()}
-      </Fragment>
-    );
-  }
-}
-
-Media.defaultProps = {
-  mediaLimit: 5,
-  mediaData: [],
-  updateState: () => {},
-  restrictions: {},
-};
-
-Media.propTypes = {
-  mediaLimit: PropTypes.number,
-  mediaData: PropTypes.array,
-  updateState: PropTypes.func,
-  restrictions: PropTypes.object,
-};
-
-export { Media as default };
diff --git a/static/js/publisher/form/media.test.js b/static/js/publisher/form/media.test.js
deleted file mode 100644
index c2333a1595..0000000000
--- a/static/js/publisher/form/media.test.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import Media from "./media";
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-describe("Media", () => {
-  const imageSelector = ".js-media-item-holder:not(.is-empty)";
-  const addImageSelector = ".p-listing-images__add-image";
-
-  it("should render without an image", () => {
-    const { container } = render(<Media />);
-    expect(container.querySelectorAll(addImageSelector).length).toEqual(1);
-  });
-
-  it("should render with an image", () => {
-    const { container } = render(
-      <Media
-        mediaData={[
-          {
-            url: "test",
-            status: "uploaded",
-          },
-        ]}
-      />,
-    );
-    expect(container.querySelectorAll(imageSelector).length).toEqual(1);
-    expect(container.querySelector(`[src="test"]`).length).toBeUndefined();
-  });
-
-  it("should set the focus state to an item", () => {
-    const { container } = render(
-      <Media
-        mediaData={[
-          {
-            url: "test",
-            status: "uploaded",
-          },
-        ]}
-      />,
-    );
-
-    const image = container.querySelector(imageSelector);
-    image.focus();
-
-    expect(document.activeElement).toEqual(image);
-  });
-
-  it("should remove the focus state of an item", () => {
-    const { container } = render(
-      <Media
-        mediaData={[
-          {
-            url: "test",
-            status: "uploaded",
-          },
-        ]}
-      />,
-    );
-
-    const image = container.querySelector(imageSelector);
-    image.focus();
-
-    expect(document.activeElement).toEqual(image);
-
-    jest.setTimeout(1000);
-    image.blur();
-    expect(document.activeElement).toEqual(document.body);
-  });
-
-  it("should show an warning element if too many items are passed", () => {
-    const { container } = render(
-      <Media
-        mediaData={[
-          { url: "test", status: "uploaded" },
-          { url: "test-2", status: "uploaded" },
-        ]}
-        mediaLimit={1}
-      />,
-    );
-
-    expect(
-      container.querySelectorAll(".p-notification--caution").length,
-    ).toEqual(1);
-  });
-
-  describe("add image", () => {
-    let cont;
-    let updateState;
-
-    beforeEach(() => {
-      updateState = jest.fn();
-      const { container } = render(
-        <Media
-          mediaData={[
-            {
-              url: "test",
-              status: "uploaded",
-            },
-          ]}
-          updateState={updateState}
-        />,
-      );
-
-      const addButton = container.querySelector(addImageSelector);
-      addButton.click();
-
-      cont = container;
-    });
-
-    it("should add a new image when mediaChanged called", (done) => {
-      // Setup
-      window.URL = {
-        createObjectURL: () => {
-          return "test-upload";
-        },
-      };
-      const fileContents = "testymctestface";
-      const file = new File([fileContents], "test", { type: "image/png" });
-
-      const input = cont.querySelector(`[name="screenshots"]`);
-
-      Object.defineProperty(input, "files", {
-        value: [file],
-      });
-
-      // Start functional bit
-      fireEvent.change(input);
-
-      // timeout to wait for the promises to resolve
-      setTimeout(() => {
-        expect(cont.querySelectorAll(`[src="test"]`).length).toEqual(1);
-
-        const imageElement = cont.querySelector(
-          `.js-media-item-holder [src="test-upload"]`,
-        );
-        if (imageElement) {
-          expect(imageElement.getAttribute("src")).toEqual("test-upload");
-        }
-
-        expect(updateState.mock.calls.length).toEqual(1);
-        expect(updateState.mock.calls[0]).toEqual([
-          [
-            {
-              status: "uploaded",
-              url: "test",
-            },
-            {
-              file,
-              name: "test",
-              status: "new",
-              type: "screenshot",
-              url: "test-upload",
-            },
-          ],
-        ]);
-        done();
-      }, 1000);
-    });
-  });
-
-  describe("delete image", () => {
-    let cont;
-    let updateState;
-
-    beforeEach(() => {
-      updateState = jest.fn();
-      const { container } = render(
-        <Media
-          mediaData={[
-            {
-              url: "test",
-              status: "uploaded",
-            },
-            {
-              url: "test-2",
-              status: "uploaded",
-            },
-            {
-              url: "test-3",
-              status: "uploaded",
-            },
-          ]}
-          updateState={updateState}
-        />,
-      );
-
-      cont = container;
-    });
-
-    it("should remove an item from images list", () => {
-      const deleteImages = cont.querySelectorAll(
-        ".p-listing-images__delete-image",
-      );
-      expect(deleteImages.length).toEqual(3);
-
-      fireEvent.click(deleteImages[0]);
-
-      expect(updateState.mock.calls.length).toEqual(1);
-      expect(updateState.mock.calls[0][0]).toEqual([
-        {
-          status: "uploaded",
-          url: "test-2",
-        },
-        {
-          status: "uploaded",
-          url: "test-3",
-        },
-      ]);
-
-      const newDeleteImages = cont.querySelectorAll(
-        ".p-listing-images__delete-image",
-      );
-
-      expect(newDeleteImages.length).toEqual(2);
-    });
-  });
-
-  it("should error when restrictions aren't met", (done) => {
-    const { container } = render(
-      <Media
-        mediaData={[]}
-        restrictions={{
-          size: { max: 0.00001 },
-        }}
-      />,
-    );
-
-    const addImageButton = container.querySelector(
-      ".p-listing-images__add-image",
-    );
-    fireEvent.click(addImageButton);
-
-    window.URL = {
-      createObjectURL: () => {
-        return "test-upload";
-      },
-    };
-    const fileContents = "testymctestface";
-    const file = new File([fileContents], "test", { type: "image/png" });
-
-    const input = container.querySelector(`[name="screenshots"]`);
-
-    Object.defineProperty(input, "files", {
-      value: [file],
-    });
-
-    fireEvent.change(input);
-
-    // timeout to wait for the promises to resolve
-    setTimeout(() => {
-      expect(
-        container.querySelectorAll(".p-notification--negative").length,
-      ).toEqual(1);
-      done();
-    }, 500);
-  });
-});
diff --git a/static/js/publisher/form/mediaItem.js b/static/js/publisher/form/mediaItem.js
deleted file mode 100644
index 3c8d8f886e..0000000000
--- a/static/js/publisher/form/mediaItem.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import { PropTypes } from "prop-types";
-
-const mediaClasses = ["p-listing-images__image", "js-media-item-holder"];
-
-import { SortableElement } from "react-sortable-hoc";
-
-class MediaItem extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.keyboardEvent = this.keyboardEvent.bind(this);
-  }
-
-  keyboardEvent(e) {
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.props.markForDeletion(this.props.url);
-    }
-  }
-
-  render() {
-    const classes = mediaClasses.slice(0);
-    if (this.props.overflow) {
-      classes.push("p-listing-images__image--no-show");
-    }
-    return (
-      <div
-        className={classes.join(" ")}
-        tabIndex="0"
-        onKeyDown={this.keyboardEvent}
-        ref={(item) => (this.mediaItem = item)}
-      >
-        <span
-          role="button"
-          className="p-listing-images__delete-image p-market-remove"
-          onClick={this.props.markForDeletion.bind(this, this.props.url)}
-        >
-          <i className="p-icon--delete" />
-        </span>
-        <img src={this.props.url} />
-      </div>
-    );
-  }
-}
-
-MediaItem.propTypes = {
-  url: PropTypes.string,
-  status: PropTypes.string,
-  overflow: PropTypes.bool,
-  markForDeletion: PropTypes.func,
-};
-
-MediaItem.displayName = "MediaItem";
-
-const SortableMediaItem = SortableElement(MediaItem);
-export { SortableMediaItem as default, mediaClasses };
diff --git a/static/js/publisher/form/mediaList.js b/static/js/publisher/form/mediaList.js
deleted file mode 100644
index 652d4fc9a2..0000000000
--- a/static/js/publisher/form/mediaList.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Fragment } from "react";
-
-import { PropTypes } from "prop-types";
-
-import MediaItem, { mediaClasses } from "./mediaItem";
-import FileInput from "./fileInput";
-
-import { SortableContainer } from "react-sortable-hoc";
-
-class MediaList extends React.Component {
-  renderInputs() {
-    const { mediaLimit, restrictions } = this.props;
-    const currentMedia = this.props.mediaData.length;
-    const inputs = [];
-
-    for (let i = 0; i < mediaLimit; i++) {
-      const classes = [...mediaClasses];
-      classes.push("is-empty");
-
-      let isActive = false;
-
-      if (i === currentMedia) {
-        classes.push("p-listing-images__add-image");
-        isActive = true;
-      } else if (i < currentMedia) {
-        classes.push("u-hide");
-      }
-
-      // We always want the "add" item to be before any hidden inputs
-      // So if it's one of those unshift rather then push
-      let method = "push";
-      if (isActive) {
-        method = "unshift";
-      }
-
-      inputs[method](
-        <Fragment key={`add-screenshot-${i}`}>
-          <FileInput
-            restrictions={restrictions}
-            className={classes.join(" ")}
-            inputName="screenshots"
-            inputId={`screenshot-${i}`}
-            fileChangedCallback={this.props.mediaChanged}
-            active={isActive}
-          >
-            {isActive && (
-              <span role="button" className="u-align-text--center">
-                <i className="p-icon--plus" />
-                <br />
-                Add image
-              </span>
-            )}
-          </FileInput>
-        </Fragment>,
-      );
-    }
-
-    return inputs;
-  }
-
-  render() {
-    const mediaList = this.props.mediaData;
-
-    return (
-      <div className="p-listing-images">
-        {mediaList.map((item, i) => {
-          return (
-            <MediaItem
-              key={`${item.url}-${i}`}
-              index={i}
-              url={item.url}
-              type={item.type}
-              status={item.status}
-              markForDeletion={this.props.markForDeletion}
-              overflow={i > 4}
-            />
-          );
-        })}
-        {this.renderInputs()}
-      </div>
-    );
-  }
-}
-
-MediaList.propTypes = {
-  mediaLimit: PropTypes.number,
-  mediaData: PropTypes.array,
-  restrictions: PropTypes.object,
-  mediaChanged: PropTypes.func,
-  markForDeletion: PropTypes.func,
-};
-
-export default SortableContainer(MediaList);
diff --git a/static/js/publisher/market/categories.test.js b/static/js/publisher/market/categories.test.js
deleted file mode 100644
index f7699f43b4..0000000000
--- a/static/js/publisher/market/categories.test.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import * as categories from "./categories";
-
-describe("categories", () => {
-  let form;
-  let cat1Input;
-  let cat2Input;
-  let state;
-
-  beforeEach(() => {
-    form = document.createElement("form");
-
-    cat1Input = document.createElement("input");
-    cat1Input.name = "primary_category";
-    cat1Input.type = "text";
-    cat1Input.value = "";
-
-    cat2Input = document.createElement("input");
-    cat2Input.name = "secondary_category";
-    cat2Input.type = "text";
-    cat2Input.value = "";
-
-    state = {};
-
-    form.appendChild(cat1Input);
-    form.appendChild(cat2Input);
-
-    document.body.appendChild(form);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(form);
-  });
-
-  test("given a primary category, return that value", () => {
-    cat1Input.value = "test";
-    categories.categories(form, state);
-    expect(state).toEqual({ categories: ["test"] });
-  });
-
-  test("given a primary and secondary category, return those values", () => {
-    cat1Input.value = "test";
-    cat2Input.value = "test2";
-    categories.categories(form, state);
-    expect(state).toEqual({ categories: ["test", "test2"] });
-  });
-});
-
-describe("initCategories", () => {
-  let holder;
-  let categoryHelpTextEl;
-  let categorySecondaryAddEl;
-  let categorySecondaryPickerEl;
-  let categorySecondaryAddLink;
-  let secondaryCategoryRemove;
-  let primaryCategorySelectEl;
-  let secondaryCategorySelectEl;
-
-  const categoryOptions = ["", "test1", "test2", "test3"];
-
-  let cb;
-
-  beforeEach(() => {
-    categoryHelpTextEl = document.createElement("div");
-    categoryHelpTextEl.className = "js-categories-category1-help-text";
-
-    categorySecondaryAddEl = document.createElement("div");
-    categorySecondaryAddEl.className = "js-categories-category2-add";
-
-    categorySecondaryPickerEl = document.createElement("div");
-    categorySecondaryPickerEl.className = "js-categories-category2-picker";
-
-    categorySecondaryAddLink = document.createElement("div");
-    categorySecondaryAddLink.className = "js-categories-category2-add-link";
-
-    secondaryCategoryRemove = document.createElement("div");
-    secondaryCategoryRemove.className = "js-categories-category2-remove";
-
-    primaryCategorySelectEl = document.createElement("select");
-    primaryCategorySelectEl.name = "primary_category";
-    primaryCategorySelectEl.value = "";
-
-    secondaryCategorySelectEl = document.createElement("select");
-    secondaryCategorySelectEl.name = "secondary_category";
-    secondaryCategorySelectEl.value = "";
-
-    categoryOptions.forEach((category, index) => {
-      const option1 = document.createElement("option");
-      const option2 = document.createElement("option");
-      option1.value = category;
-      option2.value = category;
-      if (index === 0) {
-        option1.selected = "selected";
-        option2.selected = "selected";
-      }
-      primaryCategorySelectEl.appendChild(option1);
-      secondaryCategorySelectEl.appendChild(option2);
-    });
-
-    cb = jest.fn();
-    secondaryCategorySelectEl.addEventListener("change", cb);
-
-    holder = document.createElement("div");
-    holder.appendChild(categoryHelpTextEl);
-    holder.appendChild(categorySecondaryAddEl);
-    holder.appendChild(categorySecondaryPickerEl);
-    holder.appendChild(categorySecondaryAddLink);
-    holder.appendChild(secondaryCategoryRemove);
-    holder.appendChild(primaryCategorySelectEl);
-    holder.appendChild(secondaryCategorySelectEl);
-    document.body.appendChild(holder);
-
-    categories.initCategories();
-  });
-
-  afterEach(() => {
-    document.body.removeChild(holder);
-  });
-
-  describe("changing primary category without a secondary category", () => {
-    beforeEach(() => {
-      primaryCategorySelectEl.options[0].removeAttribute("selected");
-      primaryCategorySelectEl.options[1].selected = "selected";
-      primaryCategorySelectEl.dispatchEvent(new Event("change"));
-    });
-
-    test("hides the help text", () => {
-      expect(categoryHelpTextEl.classList.contains("u-hide")).toEqual(true);
-    });
-
-    test("shows the secondary add prompty", () => {
-      expect(categorySecondaryAddEl.classList.contains("u-hide")).toEqual(
-        false,
-      );
-    });
-
-    test("hides the secondary category selector", () => {
-      expect(categorySecondaryPickerEl.classList.contains("u-hide")).toEqual(
-        true,
-      );
-    });
-
-    test("secondary selector option is disabled", () => {
-      expect(secondaryCategorySelectEl.options[1].disabled).toEqual(true);
-    });
-  });
-
-  describe("removing primary category", () => {
-    beforeEach(() => {
-      primaryCategorySelectEl.options[1].removeAttribute("selected");
-      primaryCategorySelectEl.options[0].selected = "selected";
-      primaryCategorySelectEl.dispatchEvent(new Event("change"));
-    });
-
-    test("shows the help text", () => {
-      expect(categoryHelpTextEl.classList.contains("u-hide")).toEqual(false);
-    });
-
-    test("hides the secondary add prompt", () => {
-      expect(categorySecondaryAddEl.classList.contains("u-hide")).toEqual(true);
-    });
-
-    test("hides the secondary category selector", () => {
-      expect(categorySecondaryPickerEl.classList.contains("u-hide")).toEqual(
-        true,
-      );
-    });
-
-    test("secondary selector option is disabled", () => {
-      expect(secondaryCategorySelectEl.options[0].disabled).toEqual(true);
-    });
-
-    test("expect secondary category change event to be triggered", () => {
-      expect(cb.mock.calls.length).toBe(1);
-    });
-  });
-
-  describe("add second category", () => {
-    beforeEach(() => {
-      categorySecondaryAddLink.dispatchEvent(new Event("click"));
-    });
-
-    test("hides the secondary add prompt", () => {
-      expect(categorySecondaryAddEl.classList.contains("u-hide")).toEqual(true);
-    });
-
-    test("shows the secondary category selector", () => {
-      expect(categorySecondaryPickerEl.classList.contains("u-hide")).toEqual(
-        false,
-      );
-    });
-
-    test("secondary selector option is disabled", () => {
-      expect(secondaryCategorySelectEl.options[0].disabled).toEqual(true);
-    });
-  });
-
-  describe("remove secondary category", () => {
-    beforeEach(() => {
-      secondaryCategoryRemove.dispatchEvent(new Event("click"));
-    });
-
-    test("shows the secondary add prompt", () => {
-      expect(categorySecondaryAddEl.classList.contains("u-hide")).toEqual(
-        false,
-      );
-    });
-
-    test("hides the secondary category selector", () => {
-      expect(categorySecondaryPickerEl.classList.contains("u-hide")).toEqual(
-        true,
-      );
-    });
-
-    test("expect secondary category change event to be triggered", () => {
-      expect(cb.mock.calls.length).toBe(1);
-    });
-  });
-});
diff --git a/static/js/publisher/market/categories.ts b/static/js/publisher/market/categories.ts
deleted file mode 100644
index be51c5c58c..0000000000
--- a/static/js/publisher/market/categories.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-function categories(form: any, state: any) {
-  const categoriesList = [];
-  if (
-    form.elements["primary_category"] &&
-    form.elements["primary_category"].value !== ""
-  ) {
-    categoriesList.push(form.elements["primary_category"].value);
-
-    if (
-      form.elements["secondary_category"] &&
-      form.elements["secondary_category"].value !== ""
-    ) {
-      categoriesList.push(form.elements["secondary_category"].value);
-    }
-  }
-
-  state.categories = categoriesList;
-}
-
-function initCategories() {
-  const categoryHelpTextEl = document.querySelector(
-    ".js-categories-category1-help-text",
-  ) as HTMLElement;
-  const categorySecondaryAddEl = document.querySelector(
-    ".js-categories-category2-add",
-  ) as HTMLElement;
-  const categorySecondaryPickerEl = document.querySelector(
-    ".js-categories-category2-picker",
-  ) as HTMLElement;
-  const categorySecondaryAddLink = document.querySelector(
-    ".js-categories-category2-add-link",
-  ) as HTMLElement;
-  const secondaryCategoryRemove = document.querySelector(
-    ".js-categories-category2-remove",
-  ) as HTMLElement;
-
-  const primaryCategorySelectEl = document.querySelector(
-    "[name='primary_category']",
-  ) as HTMLSelectElement;
-  const secondaryCategorySelectEl = document.querySelector(
-    "[name='secondary_category']",
-  ) as HTMLSelectElement;
-
-  const setSecondaryOptions = () => {
-    const primaryValue = primaryCategorySelectEl.value;
-    const secondaryValue = secondaryCategorySelectEl.value;
-    for (let i = 0; i < secondaryCategorySelectEl.options.length; i++) {
-      const option = secondaryCategorySelectEl.options[i];
-      if (option.value === primaryValue) {
-        option.setAttribute("disabled", "disabled");
-        if (secondaryValue === primaryValue) {
-          resetSecondaryCategory();
-        }
-      } else {
-        option.removeAttribute("disabled");
-      }
-    }
-  };
-
-  const resetSecondaryCategory = () => {
-    secondaryCategorySelectEl.value = "";
-    secondaryCategorySelectEl.dispatchEvent(
-      new Event("change", { bubbles: true }),
-    );
-  };
-
-  primaryCategorySelectEl.addEventListener("change", () => {
-    const value = primaryCategorySelectEl.value;
-    if (value.trim() !== "") {
-      categoryHelpTextEl.classList.add("u-hide");
-      if (secondaryCategorySelectEl.value === "") {
-        categorySecondaryAddEl.classList.remove("u-hide");
-        categorySecondaryPickerEl.classList.add("u-hide");
-      }
-    } else {
-      categoryHelpTextEl.classList.remove("u-hide");
-      categorySecondaryAddEl.classList.add("u-hide");
-      categorySecondaryPickerEl.classList.add("u-hide");
-    }
-    setSecondaryOptions();
-  });
-
-  categorySecondaryAddLink.addEventListener("click", () => {
-    categorySecondaryAddEl.classList.add("u-hide");
-    categorySecondaryPickerEl.classList.remove("u-hide");
-    setSecondaryOptions();
-  });
-
-  secondaryCategoryRemove.addEventListener("click", () => {
-    resetSecondaryCategory();
-    categorySecondaryPickerEl.classList.add("u-hide");
-    categorySecondaryAddEl.classList.remove("u-hide");
-  });
-}
-
-export { categories, initCategories };
diff --git a/static/js/publisher/market/initBanner.js b/static/js/publisher/market/initBanner.js
deleted file mode 100644
index 2a139336e3..0000000000
--- a/static/js/publisher/market/initBanner.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import Banner from "../form/banner";
-import { BANNER_RESTRICTIONS } from "./restrictions";
-
-function initBanner(holder, banners, nextState) {
-  const container = document.querySelector(holder);
-
-  if (!container) {
-    throw new Error("No banner holder defined");
-  }
-
-  let banner = {};
-
-  if (banners[0]) {
-    banner = banners[0];
-  }
-
-  const root = createRoot(container);
-  root.render(
-    <Banner
-      bannerImage={banner}
-      updateImageState={nextState}
-      restrictions={BANNER_RESTRICTIONS}
-    />,
-  );
-}
-
-export { initBanner };
diff --git a/static/js/publisher/market/initBanner.test.js b/static/js/publisher/market/initBanner.test.js
deleted file mode 100644
index 10752dfe45..0000000000
--- a/static/js/publisher/market/initBanner.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { initBanner } from "./initBanner";
-
-describe("initBanner", () => {
-  let holder;
-
-  beforeEach(() => {
-    holder = document.createElement("div");
-    holder.className = "test";
-    document.body.appendChild(holder);
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  it("should throw if there is no bannerHolderEl", () => {
-    expect(function () {
-      initBanner(".testing-it");
-    }).toThrow();
-  });
-});
diff --git a/static/js/publisher/market/initIcon.js b/static/js/publisher/market/initIcon.js
deleted file mode 100644
index 98f1e41a17..0000000000
--- a/static/js/publisher/market/initIcon.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import Icon from "../form/icon";
-
-import { ICON_RESTRICTIONS } from "../market/restrictions";
-
-function initIcon(holder, icon, title, updateIcon) {
-  const container = document.querySelector(holder);
-
-  if (!container) {
-    throw new Error(`${holder} does not exist.`);
-  }
-
-  const root = createRoot(container);
-  root.render(
-    <Icon
-      icon={icon}
-      title={title}
-      updateIcon={updateIcon}
-      restrictions={ICON_RESTRICTIONS}
-    />,
-  );
-}
-
-export { initIcon };
diff --git a/static/js/publisher/market/initIcon.test.js b/static/js/publisher/market/initIcon.test.js
deleted file mode 100644
index 57a9b4d882..0000000000
--- a/static/js/publisher/market/initIcon.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { initIcon } from "./initIcon";
-
-describe("initIcon", () => {
-  it("should throw if there is no icon holder", () => {
-    expect(function () {
-      initIcon();
-    }).toThrow();
-  });
-});
diff --git a/static/js/publisher/market/initMedia.js b/static/js/publisher/market/initMedia.js
deleted file mode 100644
index 21b3100d52..0000000000
--- a/static/js/publisher/market/initMedia.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import ReactDOM from "react-dom";
-import React from "react";
-import Media from "../form/media";
-import { MEDIA_RESTRICTIONS } from "./restrictions";
-
-function initMedia(mediaHolder, images, updateState) {
-  const mediaHolderEl = document.querySelector(mediaHolder);
-  if (!mediaHolderEl) {
-    throw new Error("No media holder El");
-  }
-
-  // eslint-disable-next-line
-  ReactDOM.render(
-    <Media
-      mediaData={images}
-      updateState={updateState}
-      restrictions={MEDIA_RESTRICTIONS}
-    />,
-    mediaHolderEl,
-  );
-}
-
-export { initMedia };
diff --git a/static/js/publisher/market/initMedia.test.js b/static/js/publisher/market/initMedia.test.js
deleted file mode 100644
index b3c459e675..0000000000
--- a/static/js/publisher/market/initMedia.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { initMedia } from "./initMedia";
-
-describe("initMedia", () => {
-  it("should throw if there is no media holder", () => {
-    expect(function () {
-      initMedia();
-    }).toThrow();
-  });
-
-  it("should render to the holder, without images", () => {
-    const holder = document.createElement("div");
-    holder.id = "media-holder";
-    document.body.appendChild(holder);
-
-    initMedia("#media-holder", [], () => {});
-
-    expect(
-      holder.querySelectorAll(".p-listing-images__add-image").length,
-    ).toEqual(1);
-  });
-});
diff --git a/static/js/publisher/market/license.js b/static/js/publisher/market/license.js
deleted file mode 100644
index f32b475957..0000000000
--- a/static/js/publisher/market/license.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function license(form) {
-  const type = form["license-type"].value;
-  form["license"].value = form[`license-${type}`].value;
-}
-
-function initLicenses(inputs) {
-  function licenseTypeChange() {
-    var type = this.value;
-    inputs.forEach((item) => {
-      if (item.id.includes(type)) {
-        item.style.display = "block";
-      } else {
-        item.style.display = "none";
-      }
-    });
-  }
-
-  var licenseRadio = document.querySelectorAll('[name="license-type"]');
-  if (licenseRadio) {
-    for (var i = 0; i < licenseRadio.length; i++) {
-      licenseRadio[i].addEventListener("change", licenseTypeChange);
-    }
-  }
-}
-
-export { license, initLicenses };
diff --git a/static/js/publisher/market/lightbox.test.js b/static/js/publisher/market/lightbox.test.js
deleted file mode 100644
index 2ab8256d6f..0000000000
--- a/static/js/publisher/market/lightbox.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import lightbox from "./lightbox";
-
-describe("lightbox", () => {
-  afterEach(() => {
-    document.querySelector(".vbox-preloader").remove();
-    document.querySelector(".vbox-container").remove();
-    document.querySelector(".vbox-title").remove();
-    document.querySelector(".vbox-num").remove();
-    document.querySelector(".vbox-close").remove();
-    document.querySelector(".vbox-next").remove();
-    document.querySelector(".vbox-prev").remove();
-  });
-
-  describe("standard images", () => {
-    const urls = [
-      "https://dashboard.snapcraft.io/site_media/appmedia/2018/12/space_06hkcxJ.png",
-    ];
-    const images = urls.map((src) => {
-      const img = new Image();
-      img.src = src;
-    });
-
-    beforeEach(() => {
-      lightbox.openLightbox(urls[0], images);
-    });
-
-    it("inits", () => {
-      expect(document.querySelector(".vbox-preloader")).toBeDefined();
-      expect(document.querySelector(".vbox-container")).toBeDefined();
-      expect(document.querySelector(".vbox-content")).toBeDefined();
-      expect(document.querySelector(".vbox-title")).toBeDefined();
-      expect(document.querySelector(".vbox-num")).toBeDefined();
-      expect(document.querySelector(".vbox-close")).toBeDefined();
-      expect(document.querySelector(".vbox-next")).toBeDefined();
-      expect(document.querySelector(".vbox-prev")).toBeDefined();
-    });
-  });
-
-  describe("gifs", () => {
-    const urls = ["https://media.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif"];
-    const images = urls.map((src) => {
-      const img = new Image();
-      img.src = src;
-    });
-
-    beforeEach(() => {
-      lightbox.openLightbox(urls[0], images);
-    });
-
-    it("inits", () => {
-      expect(document.querySelector(".vbox-preloader")).toBeDefined();
-      expect(document.querySelector(".vbox-container")).toBeDefined();
-      expect(document.querySelector(".vbox-content")).toBeDefined();
-      expect(document.querySelector(".vbox-title")).toBeDefined();
-      expect(document.querySelector(".vbox-num")).toBeDefined();
-      expect(document.querySelector(".vbox-close")).toBeDefined();
-      expect(document.querySelector(".vbox-next")).toBeDefined();
-      expect(document.querySelector(".vbox-prev")).toBeDefined();
-    });
-  });
-});
diff --git a/static/js/publisher/market/markdown.js b/static/js/publisher/market/markdown.js
deleted file mode 100644
index 523e6a6b1d..0000000000
--- a/static/js/publisher/market/markdown.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function () {
-  const markdownLink = document.querySelector(".js-toggle-markdown");
-  const markdownInfo = document.querySelector(".js-markdown");
-
-  markdownLink.addEventListener("click", (e) => {
-    e.preventDefault();
-    markdownInfo.classList.toggle("u-hide");
-    if (markdownInfo.classList.contains("u-hide")) {
-      markdownLink.innerHTML = "Show supported markdown syntax";
-    } else {
-      markdownLink.innerHTML = "Hide supported markdown syntax";
-    }
-  });
-}
diff --git a/static/js/publisher/market/publicMetrics.js b/static/js/publisher/market/publicMetrics.js
deleted file mode 100644
index 89048ea597..0000000000
--- a/static/js/publisher/market/publicMetrics.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const NAMES = {
-  public_metrics_territories: "installed_base_by_country_percent",
-  public_metrics_distros:
-    "weekly_installed_base_by_operating_system_normalized",
-};
-
-function publicMetrics(form) {
-  const publicMetricsEnabled = form["public_metrics_enabled"].checked;
-
-  let blackList = [];
-
-  Object.keys(NAMES).forEach((name) => {
-    const checked = form[name].checked;
-
-    if (!checked) {
-      blackList.push(NAMES[name]);
-    }
-
-    if (!publicMetricsEnabled) {
-      form[name].setAttribute("disabled", "disabled");
-    } else {
-      form[name].removeAttribute("disabled");
-    }
-  });
-
-  if (blackList.length > 0) {
-    form["public_metrics_blacklist"].setAttribute("value", blackList.join(","));
-  } else {
-    form["public_metrics_blacklist"].removeAttribute("value");
-  }
-}
-
-export { NAMES, publicMetrics };
diff --git a/static/js/publisher/market/restrictions.js b/static/js/publisher/market/restrictions.js
deleted file mode 100644
index 6ea05bae71..0000000000
--- a/static/js/publisher/market/restrictions.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
-   These configs can contain a whitelist array of objects at the top level
-   containing: {
-     dimensions: [width, height],
-     fileName: "string",
-     accept: ["file/format", "file/format"]
-   }
-   This was previously used for legacy banners
-*/
-
-const MEDIA_RESTRICTIONS = {
-  accept: ["image/png", "image/gif", "image/jpeg"],
-  width: {
-    min: 480,
-    max: 3840,
-  },
-  height: {
-    min: 480,
-    max: 2160,
-  },
-  aspectRatio: {
-    min: [1, 2],
-    max: [2, 1],
-  },
-  // bytes
-  size: {
-    min: 0,
-    max: 2000000,
-  },
-  animation: {
-    fps: {
-      min: 1,
-      max: 30,
-    },
-    length: {
-      min: 0,
-      max: 40,
-    },
-  },
-};
-
-const ICON_RESTRICTIONS = {
-  accept: ["image/png", "image/jpeg", "image/svg+xml"],
-  width: {
-    min: 40,
-    max: 512,
-  },
-  height: {
-    min: 40,
-    max: 512,
-  },
-  aspectRatio: {
-    min: [1, 1],
-    max: [1, 1],
-  },
-  size: {
-    min: 0,
-    max: 256000,
-  },
-};
-
-const BANNER_RESTRICTIONS = {
-  accept: ["image/png", "image/jpeg"],
-  width: {
-    min: 720,
-    max: 4320,
-  },
-  height: {
-    min: 240,
-    max: 1440,
-  },
-  aspectRatio: {
-    min: [3, 1],
-    max: [3, 1],
-  },
-  size: {
-    min: 0,
-    max: 2000000,
-  },
-};
-
-export { MEDIA_RESTRICTIONS, ICON_RESTRICTIONS, BANNER_RESTRICTIONS };
diff --git a/static/js/publisher/market/stickyListingBar.js b/static/js/publisher/market/stickyListingBar.js
deleted file mode 100644
index 55f6324646..0000000000
--- a/static/js/publisher/market/stickyListingBar.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import throttle from "../../libs/throttle";
-
-export const toggleClassWhenStickyOnTop = (el, className) => {
-  if (el) {
-    el.classList.toggle(className, el.getBoundingClientRect().top === 0);
-  }
-};
-
-export const toggleShadowWhenSticky = (el) => {
-  toggleClassWhenStickyOnTop(el, "sticky-shadow");
-};
-
-export default function () {
-  const stickyBar = document.querySelector(".js-sticky-bar");
-  toggleShadowWhenSticky(stickyBar);
-  const onScroll = throttle(() => toggleShadowWhenSticky(stickyBar), 30);
-  document.addEventListener("scroll", onScroll);
-}
diff --git a/static/js/publisher/market/storageCommands.test.js b/static/js/publisher/market/storageCommands.test.js
deleted file mode 100644
index 551b8580b4..0000000000
--- a/static/js/publisher/market/storageCommands.test.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import { storageCommands } from "./storageCommands";
-
-describe("storage commands", () => {
-  let ignoreChangeOnUnload;
-  const _window = window;
-  window.location = _window.location;
-
-  beforeEach(() => {
-    delete window.location;
-    window.location = { reload: jest.fn() };
-    window.focus = jest.fn();
-    ignoreChangeOnUnload = jest.fn();
-  });
-
-  it("uses window if no context provided", () => {
-    storageCommands(
-      {
-        key: "test-command",
-        newValue: "edit",
-      },
-      document.createElement("form"),
-      "test",
-      ignoreChangeOnUnload,
-    );
-  });
-
-  describe("key doesn't match", () => {
-    it("returns", () => {
-      expect(
-        storageCommands(
-          {
-            key: "test2-command",
-            newValue: "edit",
-          },
-          document.createElement("form"),
-          "test",
-          ignoreChangeOnUnload,
-        ),
-      ).toEqual(undefined);
-    });
-  });
-
-  describe("newValue doesn't match", () => {
-    it("returns", () => {
-      expect(
-        storageCommands(
-          {
-            key: "test-command",
-            newValue: "green",
-          },
-          document.createElement("form"),
-          "test",
-          ignoreChangeOnUnload,
-        ),
-      ).toEqual(undefined);
-    });
-  });
-
-  describe("edit", () => {
-    beforeEach(() => {
-      window.localStorage.setItem("test-command", "remove me");
-
-      storageCommands(
-        {
-          key: "test-command",
-          newValue: "edit",
-        },
-        document.createElement("form"),
-        "test",
-        ignoreChangeOnUnload,
-      );
-    });
-    it("removes the %-command key from localStorage", () => {
-      expect(window.localStorage.getItem("test-command")).toBe(null);
-    });
-
-    it("pulls focus to the window", () => {
-      expect(window.focus.mock.calls.length).toBe(1);
-    });
-  });
-
-  describe("revert", () => {
-    beforeEach(() => {
-      window.localStorage.setItem("test-command", "remove me");
-
-      storageCommands(
-        {
-          key: "test-command",
-          newValue: "revert",
-        },
-        document.createElement("form"),
-        "test",
-        ignoreChangeOnUnload,
-      );
-    });
-
-    it("removes the %-command key from localStorage", () => {
-      expect(window.localStorage.getItem("test-command")).toBe(null);
-    });
-
-    it("calls ignoreChangesOnUnload", () => {
-      expect(ignoreChangeOnUnload.mock.calls.length).toBe(1);
-    });
-
-    it("reloads the page", () => {
-      expect(window.location.reload.mock.calls.length).toBe(1);
-    });
-  });
-
-  describe("save", () => {
-    let form;
-    let formSubmitEvent;
-    beforeEach(() => {
-      form = document.createElement("form");
-      formSubmitEvent = jest.fn();
-      form.addEventListener("submit", formSubmitEvent);
-
-      window.localStorage.setItem("test-command", "remove me");
-
-      storageCommands(
-        {
-          key: "test-command",
-          newValue: "save",
-        },
-        form,
-        "test",
-        ignoreChangeOnUnload,
-      );
-    });
-
-    it("removes the %-command key from localStorage", () => {
-      expect(window.localStorage.getItem("test-command")).toBe(null);
-    });
-
-    it("dispatches a submit event to the form", () => {
-      expect(formSubmitEvent.mock.calls.length).toBe(1);
-    });
-  });
-});
diff --git a/static/js/publisher/market/storageCommands.ts b/static/js/publisher/market/storageCommands.ts
deleted file mode 100644
index ff9e5971c8..0000000000
--- a/static/js/publisher/market/storageCommands.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-function storageCommands(
-  e: StorageEvent,
-  formEl: HTMLFormElement,
-  snap_name: string,
-  ignoreChangesOnUnload: Function,
-  context = window,
-) {
-  const key = `${snap_name}-command`;
-  if (e.key === key) {
-    context.localStorage.removeItem(key);
-    switch (e.newValue) {
-      case "edit":
-        context.focus();
-        break;
-      case "revert":
-        ignoreChangesOnUnload();
-        context.location.reload();
-        break;
-      case "save":
-        formEl.dispatchEvent(new Event("submit"));
-        break;
-    }
-  }
-
-  return;
-}
-
-export { storageCommands };
diff --git a/static/js/publisher/market/whitelistBlacklist.js b/static/js/publisher/market/whitelistBlacklist.js
deleted file mode 100644
index fcc0567f26..0000000000
--- a/static/js/publisher/market/whitelistBlacklist.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function whitelistBlacklist(form) {
-  const type = form["territories"].value;
-  const whitelist = form["whitelist_countries"];
-  const blacklist = form["blacklist_countries"];
-  const customType = form["territories_custom_type"].value;
-
-  if (type === "all") {
-    whitelist.value = "";
-    blacklist.value = "";
-  }
-
-  if (type === "custom") {
-    if (customType === "whitelist") {
-      blacklist.value = "";
-    } else if (customType === "blacklist") {
-      whitelist.value = "";
-    }
-  }
-}
-
-export { whitelistBlacklist };
diff --git a/static/js/publisher/metrics/graphs/territories.js b/static/js/publisher/metrics/graphs/territories.js
deleted file mode 100644
index 859f7b7a77..0000000000
--- a/static/js/publisher/metrics/graphs/territories.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import map from "../../../public/snap-details/map";
-
-export default function (el, data) {
-  map(el, data);
-}
diff --git a/static/js/publisher/preview.ts b/static/js/publisher/preview.ts
deleted file mode 100644
index 12a4249efe..0000000000
--- a/static/js/publisher/preview.ts
+++ /dev/null
@@ -1,512 +0,0 @@
-import markdownit from "markdown-it";
-import {
-  default as initScreenshots,
-  terminateScreenshots,
-} from "../public/snap-details/screenshots";
-import { diffState } from "./state";
-// Ensure markdown is set to be the same as `webapp/markdown.py` config
-// doesn't include the custom ascii bullet-point (as this is legacy
-// and shouldn't be promoted).
-const md = markdownit({
-  linkify: true,
-}).disable([
-  "table",
-  "blockquote",
-  "hr",
-  "reference",
-  "heading",
-  "lheading",
-  "html_block",
-  "replacements",
-  "smartquotes",
-  "escape",
-  "strikethrough",
-  "image",
-  "html_inline",
-  "fence",
-  "link",
-]);
-
-// For the different elements we might need to change different properties
-const functionMap: { [key: string]: any } = {
-  title: (el: any, content: any) => (el.innerHTML = content),
-  summary: (el: any, content: any) => (el.innerHTML = content),
-  description: (el: any, content: any) => (el.innerHTML = content),
-  website: (el: any, content: any) => (el.href = content),
-  contact: (el: any, content: any) => (el.href = content),
-  screenshots: (el: any, content: any) => el.appendChild(content),
-  license: (el: any, content: any) => (el.innerHTML = content),
-  icon: (el: any, content: any) => {
-    if (content) {
-      el.src = content;
-    } else {
-      el.src =
-        "https://assets.ubuntu.com/v1/6fbb3483-snapcraft-default-snap-icon.svg";
-    }
-  },
-};
-
-// For some elements we want to hide/ show a different element to the one
-// being targeted.
-const hideMap: { [key: string]: any } = {
-  screenshots: (el: { parentNode: any }) => el.parentNode,
-  website: (el: { parentNode: any }) => el.parentNode,
-  contact: (el: { parentNode: any }) => el.parentNode,
-};
-
-// For some fields we need to transform the data.
-const transformMap: { [key: string]: any } = {
-  description: md.render.bind(md),
-};
-
-function transformStateImages(state: {
-  [x: string]: any;
-  images: Array<{
-    type: string;
-    url: string;
-  }>;
-}) {
-  const newState: any = {
-    icon: null,
-    screenshots: [],
-  };
-
-  if (state.images) {
-    state.images.forEach((image: { [key: string]: any }) => {
-      if (image.type === "icon") {
-        newState.icon = image.url;
-      } else if (image.type === "screenshot") {
-        newState.screenshots.push(image.url);
-      }
-    });
-  }
-
-  Object.keys(state).forEach((key) => {
-    newState[key] = state[key];
-  });
-
-  return newState;
-}
-
-function getVideoDetails(url: string) {
-  if (url.indexOf("youtube") > -1) {
-    return {
-      type: "youtube",
-      url: url.replace("watch?v=", "embed/"),
-      id: url.split("v=")[1].split("&")[0],
-    };
-  }
-  if (url.indexOf("youtu.be") > -1) {
-    return {
-      type: "youtube",
-      url: url.replace("youtu.be/", "youtube.com/embed/"),
-      id: url.split("/")[1].split("?")[0],
-    };
-  }
-  if (url.indexOf("vimeo") > -1) {
-    const splitUrl = url.split("/");
-    return {
-      type: "vimeo",
-      url: url.replace("vimeo.com/", "player.vimeo.com/video/"),
-      id: splitUrl[splitUrl.length - 1],
-    };
-  }
-  if (url.indexOf("asciinema") > -1) {
-    const splitUrl = url.split("/");
-    return {
-      type: "asciinema",
-      url: `${url}.js`,
-      id: splitUrl[splitUrl.length - 1],
-    };
-  }
-  return url;
-}
-
-function screenshot(image: string | undefined) {
-  const slide = document.createElement("div");
-  slide.className = "p-carousel__item--screenshot swiper-slide";
-  const img: any = new Image();
-  img.src = image;
-  img.dataset.original = image;
-
-  slide.appendChild(img);
-  return slide;
-}
-
-function screenshotsAndVideos(screenshots: any[], video: string) {
-  if (video) {
-    const videoDetails: any = getVideoDetails(video);
-    const holder = document.createElement("div");
-    holder.className = "p-snap-details__media row u-equal-height";
-    const col10 = document.createElement("div");
-    col10.className = "col-10 u-align--center";
-    holder.appendChild(col10);
-    const videoSlide = document.createElement("div");
-    videoSlide.className = "js-video-slide u-embedded-media";
-    videoSlide.setAttribute("data-video-type", videoDetails.type);
-    videoSlide.setAttribute("data-video-url", videoDetails.url);
-    videoSlide.setAttribute("data-video-id", videoDetails.id);
-    const videoTemplate = document.querySelector(
-      `#video-${videoDetails.type}-template`,
-    );
-    if (!videoTemplate) {
-      throw new Error("Video template not available");
-    }
-    const videoHTML = videoTemplate.innerHTML
-      .split("${url}")
-      .join(videoDetails.url)
-      .split("${id}")
-      .join(videoDetails.id);
-
-    if (videoDetails.type === "asciinema") {
-      const fakeHolder = document.createElement("div");
-      fakeHolder.innerHTML = videoHTML;
-      const fakeScript: any = fakeHolder.children[0];
-      const scriptTag = document.createElement("script");
-      fakeScript.getAttributeNames().forEach((attr: any) => {
-        scriptTag.setAttribute(attr, fakeScript.getAttribute(attr));
-      });
-
-      videoSlide.appendChild(scriptTag);
-    } else {
-      videoSlide.innerHTML = videoHTML;
-    }
-
-    col10.appendChild(videoSlide);
-
-    if (screenshots) {
-      const col2 = document.createElement("div");
-      col2.className = "col-2 p-snap-details__media-items";
-      if (screenshots.length > 3) {
-        col2.classList.add("p-snap-details__media-items--distributed");
-      }
-
-      screenshots.map(screenshot).forEach((image) => {
-        col2.appendChild(image);
-      });
-
-      holder.appendChild(col2);
-    }
-
-    return holder;
-  }
-  if (screenshots.length === 0) {
-    return null;
-  }
-  const holder = document.createElement("div");
-  holder.className = "p-carousel u-no-margin--bottom u-no-margin--top";
-  const container = document.createElement("div");
-  container.className = "swiper-container";
-  holder.appendChild(container);
-  const wrapper = document.createElement("div");
-  wrapper.className = "swiper-wrapper";
-  container.appendChild(wrapper);
-  const next = document.createElement("button");
-  next.className = "p-carousel__next swiper-button__next";
-  next.innerText = "Next";
-  holder.appendChild(next);
-  const prev = document.createElement("button");
-  prev.className = "p-carousel__prev swiper-button__prev";
-  prev.innerText = "Previous";
-  holder.appendChild(prev);
-  screenshots.map(screenshot).forEach((image) => {
-    wrapper.appendChild(image);
-  });
-
-  return holder;
-}
-
-function getState(packageName: string) {
-  const storedPackage = window.localStorage.getItem(packageName);
-  return storedPackage !== null ? JSON.parse(storedPackage) : {};
-}
-
-function sendCommand(packageName: any, command: string) {
-  window.localStorage.setItem(`${packageName}-command`, command);
-}
-
-function render(packageName: string) {
-  let transformedState: any;
-  try {
-    transformedState = transformStateImages(getState(packageName));
-  } catch (e) {
-    const notification = `<div class="p-notification--negative"><div class="p-notification__content">
-<p class="p-notification__message">Something went wrong. Please ensure you have permission to preview this snap.</p></div>
-</div>`;
-    const snapHeading = document.querySelector(
-      ".p-snap-heading",
-    ) as HTMLElement;
-
-    if (snapHeading.parentNode) {
-      snapHeading.parentNode.appendChild(
-        (() => {
-          const el = document.createElement("div");
-          el.innerHTML = notification;
-          return el;
-        })(),
-      );
-    }
-    return;
-  }
-
-  // For basic content, loop through and update the content
-  Object.keys(transformedState).forEach(function (key: string) {
-    if (key === "screenshots") {
-      return;
-    }
-    const el = document.querySelector(`[data-live="${key}"]`);
-    if (el && functionMap[key]) {
-      let content = transformedState[key];
-      if (transformMap[key]) {
-        content = transformMap[key](transformedState[key]);
-      }
-      if (content !== "") {
-        functionMap[key](el, content);
-
-        if (hideMap[key]) {
-          hideMap[key](el).classList.remove("u-hide");
-        } else {
-          el.classList.remove("u-hide");
-        }
-      } else {
-        if (hideMap[key]) {
-          hideMap[key](el).classList.add("u-hide");
-        } else {
-          el.classList.add("u-hide");
-        }
-      }
-    }
-  });
-
-  // Screenshots are a bit more involved, so treat them separately
-  const screenshotsEl = document.querySelector(
-    `[data-live="screenshots"]`,
-  ) as HTMLElement;
-  if (
-    transformedState.video_urls !== "" ||
-    transformedState.screenshots.length > 0
-  ) {
-    screenshotsEl.innerHTML = "";
-    functionMap.screenshots(
-      screenshotsEl,
-      screenshotsAndVideos(
-        transformedState.screenshot_urls,
-        transformedState.video_urls,
-      ),
-    );
-    hideMap.screenshots(screenshotsEl).classList.remove("u-hide");
-    terminateScreenshots("#js-snap-screenshots");
-    initScreenshots("#js-snap-screenshots");
-  } else {
-    hideMap.screenshots(screenshotsEl).classList.add("u-hide");
-  }
-
-  // We won't be changing any metrics, we just want to show them or not if selected
-  // on the listings page.
-  // Some of the elements won't exist because there aren't any metrics available, so make sure
-  // to check the elements exist before doing modifications.
-  const metricsEl = document.querySelector(`[data-live="public_metrics_live"]`);
-  if (metricsEl) {
-    const mapEl = metricsEl.querySelector(
-      `[data-live="installed_base_by_country_percent"]`,
-    );
-    const distroEl = metricsEl.querySelector(
-      `[data-live="weekly_installed_base_by_operating_system_normalized"]`,
-    );
-
-    if (transformedState.public_metrics_enabled) {
-      metricsEl.classList.remove("u-hide");
-    } else {
-      metricsEl.classList.add("u-hide");
-    }
-
-    if (mapEl) {
-      if (
-        transformedState.public_metrics_blacklist.indexOf(
-          "installed_base_by_country_percent",
-        ) > -1
-      ) {
-        mapEl.classList.add("u-hide");
-      } else {
-        mapEl.classList.remove("u-hide");
-      }
-    }
-
-    if (distroEl) {
-      if (
-        transformedState.public_metrics_blacklist.indexOf(
-          "weekly_installed_base_by_operating_system_normalized",
-        ) > -1
-      ) {
-        distroEl.classList.add("u-hide");
-      } else {
-        distroEl.classList.remove("u-hide");
-      }
-    }
-  }
-
-  // Remove the notification that you can edit the snap
-  const snapOwnerNotification = document.querySelector(
-    ".js-snap-owner-notification",
-  );
-  if (snapOwnerNotification) {
-    snapOwnerNotification.classList.add("u-hide");
-  }
-}
-
-function lostConnection(disableButtons: any) {
-  const previewMessageEl = document.querySelector(
-    "#preview-message",
-  ) as HTMLElement;
-  previewMessageEl.innerHTML = `<i class="p-icon--error"></i> This is taking longer then usual. You can click "Edit" to return to the form.`;
-  disableButtons();
-}
-
-function establishedConnection(
-  packageName: any,
-  enableButtons: { (): void; (): void; (): void },
-) {
-  const previewMessageEl = document.querySelector(
-    "#preview-message",
-  ) as HTMLElement;
-  previewMessageEl.innerHTML = `You are previewing the listing page for ${packageName}`;
-  enableButtons();
-}
-
-/**
- * Initial render and storage change listener
- * @param packageName
- */
-function preview(packageName: string) {
-  const packageNameInitial = window.localStorage.getItem(
-    `${packageName}-initial`,
-  );
-  let initialState =
-    packageNameInitial !== null ? JSON.parse(packageNameInitial) : "";
-  let editButton: Element;
-  let revertButton: Element;
-  let saveButton: Element;
-
-  let responseTimer: string | number | NodeJS.Timeout | undefined;
-  let timedOut = false;
-  const RESPONSE_TIMEOUT = 30000; // 30seconds
-
-  const resetButtons = () => {
-    if (editButton) {
-      editButton.innerHTML = "Edit";
-    }
-    if (revertButton) {
-      revertButton.innerHTML = "Revert";
-    }
-    if (saveButton) {
-      saveButton.innerHTML = "Save";
-    }
-  };
-
-  const disableButtons = () => {
-    resetButtons();
-    if (revertButton) {
-      revertButton.setAttribute("disabled", "disabled");
-    }
-    if (saveButton) {
-      saveButton.setAttribute("disabled", "disabled");
-    }
-  };
-
-  const enableButtons = () => {
-    resetButtons();
-    if (revertButton) {
-      revertButton.removeAttribute("disabled");
-    }
-    if (saveButton) {
-      saveButton.removeAttribute("disabled");
-    }
-  };
-
-  const checkState = () => {
-    const state = getState(packageName);
-    if (!diffState(initialState, state)) {
-      disableButtons();
-    } else {
-      enableButtons();
-    }
-  };
-
-  window.addEventListener("storage", (e) => {
-    if (e.key === packageName) {
-      // Slight delay to ensure the state has fully updated
-      // There was an issue with images when it was immediate.
-      setTimeout(() => {
-        render(packageName);
-
-        if (timedOut === true) {
-          establishedConnection(packageName, enableButtons);
-          timedOut = false;
-        }
-
-        if (responseTimer) {
-          clearTimeout(responseTimer);
-        }
-
-        checkState();
-      }, 500);
-    } else if (e.key === `${packageName}-initial`) {
-      resetButtons();
-
-      // We've saved or reset the listing page form - the initialState might have changed
-      if (e.newValue) {
-        initialState = JSON.parse(e.newValue);
-      }
-      if (timedOut === true) {
-        establishedConnection(packageName, enableButtons);
-        timedOut = false;
-      }
-      if (responseTimer) {
-        clearTimeout(responseTimer);
-      }
-
-      checkState();
-    }
-  });
-
-  setTimeout(() => {
-    checkState();
-    render(packageName);
-  }, 500);
-
-  // Init the toolbar
-  editButton = document.querySelector(".js-edit") as HTMLElement;
-  revertButton = document.querySelector(".js-revert") as HTMLElement;
-  saveButton = document.querySelector(".js-save") as HTMLElement;
-
-  const timeoutTimer = () => {
-    responseTimer = window.setTimeout(() => {
-      lostConnection(disableButtons);
-      timedOut = true;
-    }, RESPONSE_TIMEOUT);
-  };
-
-  editButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    timeoutTimer();
-    sendCommand(packageName, "edit");
-    editButton.innerHTML = `<i class="p-icon--spinner u-animation--spin"></i>`;
-    window.close();
-  });
-  revertButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    disableButtons();
-    timeoutTimer();
-    sendCommand(packageName, "revert");
-    revertButton.innerHTML = `<i class="p-icon--spinner u-animation--spin"></i>`;
-  });
-  saveButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    disableButtons();
-    timeoutTimer();
-    sendCommand(packageName, "save");
-    saveButton.innerHTML = `<i class="p-icon--spinner u-animation--spin"></i>`;
-  });
-}
-
-export { preview };
diff --git a/static/js/publisher/publisher.ts b/static/js/publisher/publisher.ts
deleted file mode 100644
index e7db1557f2..0000000000
--- a/static/js/publisher/publisher.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as metrics from "./metrics/metrics";
-import { selector } from "./metrics/filters";
-import * as market from "./form";
-import * as publicise from "./publicise";
-import { initCategories } from "./market/categories";
-import markdownToggle from "./market/markdown";
-import stickyListingBar from "./market/stickyListingBar";
-import { preview } from "./preview";
-import submitEnabler from "./submitEnabler";
-import * as tour from "./tour";
-
-export {
-  initCategories,
-  markdownToggle,
-  metrics,
-  market,
-  publicise,
-  selector,
-  stickyListingBar,
-  preview,
-  submitEnabler,
-  tour,
-};
diff --git a/static/js/publisher/shared/PageHeader/PageHeader.test.tsx b/static/js/publisher/shared/PageHeader/PageHeader.test.tsx
deleted file mode 100644
index 0c43780561..0000000000
--- a/static/js/publisher/shared/PageHeader/PageHeader.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import PageHeader from "./PageHeader";
-
-const snapName = "test-snap-name";
-
-const props = {
-  snapName: "test-snap-name",
-  activeTab: "listing",
-};
-
-test("the page displays the correct name for the snap", () => {
-  render(<PageHeader {...props} />);
-  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-    "test-snap-name",
-  );
-});
-
-test("the 'Listing' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Listing" }).getAttribute("href"),
-  ).toBe(`/${snapName}/listing`);
-});
-
-test("the 'Builds' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Builds" }).getAttribute("href"),
-  ).toBe(`/${snapName}/builds`);
-});
-
-test("the 'Releases' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Releases" }).getAttribute("href"),
-  ).toBe(`/${snapName}/releases`);
-});
-
-test("the 'Metrics' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Metrics" }).getAttribute("href"),
-  ).toBe(`/${snapName}/metrics`);
-});
-
-test("the 'Publicise' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Publicise" }).getAttribute("href"),
-  ).toBe(`/${snapName}/publicise`);
-});
-
-test("the 'Settings' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
-  expect(
-    screen.getByRole("link", { name: "Settings" }).getAttribute("href"),
-  ).toBe(`/${snapName}/settings`);
-});
diff --git a/static/js/publisher/shared/PageHeader/PageHeader.tsx b/static/js/publisher/shared/PageHeader/PageHeader.tsx
deleted file mode 100644
index f71060e358..0000000000
--- a/static/js/publisher/shared/PageHeader/PageHeader.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Strip, Tabs } from "@canonical/react-components";
-
-type Props = {
-  snapName: string | undefined;
-  snapTitle?: string;
-  activeTab: string;
-  publisherName?: string;
-};
-
-function PageHeader({ snapName, snapTitle, activeTab, publisherName }: Props) {
-  // Get the users display name from sessionStorage
-  const accountName = window.sessionStorage.getItem("displayName") ?? undefined;
-  return (
-    <Strip shallow={true} className="u-no-padding--bottom">
-      <div className="u-fixed-width">
-        <a href="/snaps">&lsaquo;&nbsp;My snaps</a>
-        <div className="u-flex" style={{ alignItems: "baseline" }}>
-          <h1 className="p-heading--3">{snapTitle ? snapTitle : snapName}</h1>
-          {publisherName && accountName && publisherName !== accountName && (
-            <p
-              className="u-text-muted u-no-margin--bottom"
-              style={{ marginLeft: "0.5rem" }}
-            >
-              by {publisherName}
-            </p>
-          )}
-        </div>
-        <Tabs
-          listClassName="u-no-margin--bottom"
-          links={[
-            {
-              label: "Listing",
-              active: activeTab === "listing",
-              href: `/${snapName}/listing`,
-              "data-tour": "listing-intro",
-            },
-            {
-              label: "Builds",
-              active: activeTab === "builds",
-              href: `/${snapName}/builds`,
-            },
-            {
-              label: "Releases",
-              active: activeTab === "releases",
-              href: `/${snapName}/releases`,
-            },
-            {
-              label: "Metrics",
-              active: activeTab === "metrics",
-              href: `/${snapName}/metrics`,
-            },
-            {
-              label: "Publicise",
-              active: activeTab === "publicise",
-              href: `/${snapName}/publicise`,
-            },
-            {
-              label: "Settings",
-              active: activeTab === "settings",
-              href: `/${snapName}/settings`,
-            },
-          ]}
-        />
-      </div>
-    </Strip>
-  );
-}
-
-export default PageHeader;
diff --git a/static/js/publisher/shared/PageHeader/index.ts b/static/js/publisher/shared/PageHeader/index.ts
deleted file mode 100644
index c9b885cbfc..0000000000
--- a/static/js/publisher/shared/PageHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./PageHeader";
diff --git a/static/js/publisher/shared/RenderErrors/RenderErrors.tsx b/static/js/publisher/shared/RenderErrors/RenderErrors.tsx
deleted file mode 100644
index 7203b6f5dc..0000000000
--- a/static/js/publisher/shared/RenderErrors/RenderErrors.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-type Props = {
-  errors: { [key: string]: Array<string> };
-};
-
-function RenderErrors({ errors }: Props) {
-  return (
-    <div className="p-notification--negative">
-      <div className="p-notification__content">
-        <p className="p-notification__message">
-          {Object.keys(errors).map((fileName) => (
-            <span key={`errors-${fileName}`}>
-              {fileName}
-              &nbsp;
-              {errors[fileName].map((error, index: number) => (
-                <span key={`errors-${fileName}-${index}`}>
-                  {error}
-                  <br />
-                </span>
-              ))}
-            </span>
-          ))}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default RenderErrors;
diff --git a/static/js/publisher/shared/RenderErrors/__tests__/RenderErrors.test.tsx b/static/js/publisher/shared/RenderErrors/__tests__/RenderErrors.test.tsx
deleted file mode 100644
index e9fffa622b..0000000000
--- a/static/js/publisher/shared/RenderErrors/__tests__/RenderErrors.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { screen, render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import RenderErrors from "../RenderErrors";
-
-describe("RenderErrors", () => {
-  test("renders errors", () => {
-    render(
-      <RenderErrors
-        errors={{
-          file: ["error message one", "error message two"],
-        }}
-      />,
-    );
-    expect(screen.getByText(/error message one/)).toBeInTheDocument();
-    expect(screen.getByText(/error message two/)).toBeInTheDocument();
-  });
-});
diff --git a/static/js/publisher/shared/RenderErrors/index.ts b/static/js/publisher/shared/RenderErrors/index.ts
deleted file mode 100644
index 1e2e8e793b..0000000000
--- a/static/js/publisher/shared/RenderErrors/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./RenderErrors";
diff --git a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.test.tsx b/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.test.tsx
deleted file mode 100644
index 8be08303c0..0000000000
--- a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-
-import SaveAndPreview from "./SaveAndPreview";
-
-const reset = jest.fn();
-
-const renderComponent = (
-  isDirty: boolean,
-  isSaving: boolean,
-  isValid: boolean,
-) => {
-  return render(
-    <SaveAndPreview
-      snapName="test-snap-name"
-      isDirty={isDirty}
-      reset={reset}
-      isSaving={isSaving}
-      isValid={isValid}
-    />,
-  );
-};
-
-test("the 'Revert' button is disabled by default", () => {
-  renderComponent(false, false, true);
-  expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute(
-    "aria-disabled",
-    "true",
-  );
-});
-
-test("the 'Revert' button is enabled is data is dirty", () => {
-  renderComponent(true, false, true);
-  expect(screen.getByRole("button", { name: "Revert" })).not.toHaveAttribute(
-    "aria-disabled",
-    "true",
-  );
-});
-
-test("the 'Save' button is disabled by default", () => {
-  renderComponent(false, false, true);
-  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute(
-    "aria-disabled",
-    "true",
-  );
-});
-
-test("the 'Save' button is enabled is data is dirty", () => {
-  renderComponent(true, false, true);
-  expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
-});
-
-test("the 'Save' button shows loading state if saving", () => {
-  renderComponent(true, true, true);
-  expect(screen.getByRole("button", { name: "Saving" })).toBeInTheDocument();
-});
-
-test("the 'Save' button is disabled when saving", () => {
-  renderComponent(true, true, true);
-  expect(screen.getByRole("button", { name: "Saving" })).toHaveAttribute(
-    "aria-disabled",
-    "true",
-  );
-});
-
-test("the 'Save' button is disabled if the form is invalid", () => {
-  renderComponent(false, false, false);
-  expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute(
-    "aria-disabled",
-    "true",
-  );
-});
-
-test("revert button resets the form", async () => {
-  const user = userEvent.setup();
-  renderComponent(true, false, true);
-  await user.click(screen.getByRole("button", { name: "Revert" }));
-  await waitFor(() => {
-    expect(reset).toHaveBeenCalled();
-  });
-});
diff --git a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
deleted file mode 100644
index 1e7b9eb48a..0000000000
--- a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Row, Col, Button } from "@canonical/react-components";
-
-import debounce from "../../../libs/debounce";
-
-type Props = {
-  snapName: string | undefined;
-  isDirty: boolean;
-  reset: Function;
-  isSaving: boolean;
-  isValid: boolean;
-  showPreview?: boolean;
-};
-
-function SaveAndPreview({
-  snapName,
-  isDirty,
-  reset,
-  isSaving,
-  showPreview,
-}: Props) {
-  const stickyBar = useRef<HTMLDivElement>(null);
-  const handleScroll = () => {
-    stickyBar?.current?.classList.toggle(
-      "sticky-shadow",
-      stickyBar?.current?.getBoundingClientRect()?.top === 0,
-    );
-  };
-
-  useEffect(() => {
-    document.addEventListener("scroll", debounce(handleScroll, 10, false));
-  }, []);
-
-  return (
-    <>
-      <div className="snapcraft-p-sticky js-sticky-bar" ref={stickyBar}>
-        <Row>
-          <Col size={7}>
-            <p className="u-no-margin--bottom">
-              Updates to this information will appear immediately on the{" "}
-              <a href={`/${snapName}`}>snap listing page</a>.
-            </p>
-          </Col>
-          <Col size={5}>
-            <div className="u-align--right">
-              {showPreview && (
-                <Button
-                  type="submit"
-                  className="p-button--base p-tooltip--btm-center"
-                  aria-describedby="preview-tooltip"
-                  form="preview-form"
-                >
-                  Preview
-                  <span
-                    className="p-tooltip__message"
-                    role="tooltip"
-                    id="preview-tooltip"
-                  >
-                    Previews will only work in the same browser, locally
-                  </span>
-                </Button>
-              )}
-              <Button
-                appearance="default"
-                disabled={!isDirty}
-                type="reset"
-                onClick={() => {
-                  reset();
-                }}
-              >
-                Revert
-              </Button>
-              <Button
-                appearance="positive"
-                disabled={!isDirty || isSaving}
-                type="submit"
-                style={{ minWidth: "68px" }}
-              >
-                {isSaving ? (
-                  <i className="p-icon--spinner is-light u-animation--spin">
-                    Saving
-                  </i>
-                ) : (
-                  "Save"
-                )}
-              </Button>
-            </div>
-          </Col>
-        </Row>
-      </div>
-      <div className="u-fixed-width">
-        <hr className="u-no-margin--bottom" />
-      </div>
-    </>
-  );
-}
-
-export default SaveAndPreview;
diff --git a/static/js/publisher/shared/SaveAndPreview/index.ts b/static/js/publisher/shared/SaveAndPreview/index.ts
deleted file mode 100644
index 49f6ef4f1e..0000000000
--- a/static/js/publisher/shared/SaveAndPreview/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SaveAndPreview";
diff --git a/static/js/publisher/shared/SaveStateNotifications/SaveStateNotifications.tsx b/static/js/publisher/shared/SaveStateNotifications/SaveStateNotifications.tsx
deleted file mode 100644
index ad7e351067..0000000000
--- a/static/js/publisher/shared/SaveStateNotifications/SaveStateNotifications.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Notification } from "@canonical/react-components";
-
-type Props = {
-  hasSaved: boolean;
-  setHasSaved: Function;
-  savedError: boolean | Array<{ message: string }>;
-  setSavedError: Function;
-};
-
-function SaveStateNotifications({
-  hasSaved,
-  setHasSaved,
-  savedError,
-  setSavedError,
-}: Props) {
-  return (
-    <>
-      {hasSaved && (
-        <div className="u-fixed-width">
-          <Notification
-            severity="positive"
-            title="Changes applied successfully."
-            onDismiss={() => {
-              setHasSaved(false);
-            }}
-          />
-        </div>
-      )}
-
-      {savedError && (
-        <div className="u-fixed-width">
-          <Notification
-            severity="negative"
-            title="Error"
-            onDismiss={() => {
-              setHasSaved(false);
-              setSavedError(false);
-            }}
-          >
-            Changes have not been saved.
-            <br />
-            {savedError === true
-              ? "Something went wrong."
-              : savedError.map((error) => `${error.message}`).join("\n")}
-          </Notification>
-        </div>
-      )}
-    </>
-  );
-}
-
-export default SaveStateNotifications;
diff --git a/static/js/publisher/shared/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx b/static/js/publisher/shared/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
deleted file mode 100644
index 903e991de4..0000000000
--- a/static/js/publisher/shared/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { screen, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-
-import SaveStateNotifications from "../SaveStateNotifications";
-
-type Options = {
-  hasSaved?: boolean;
-  setHasSaved?: Function;
-  savedError?: boolean | Array<{ message: string }>;
-  setSavedError?: Function;
-};
-
-const renderComponent = (options: Options) => {
-  return render(
-    <SaveStateNotifications
-      hasSaved={options.hasSaved || false}
-      setHasSaved={options.setHasSaved || jest.fn()}
-      savedError={options.savedError || false}
-      setSavedError={options.setSavedError || jest.fn()}
-    />,
-  );
-};
-
-describe("SaveStateNotifications", () => {
-  test("shows success notification if saved", () => {
-    renderComponent({ hasSaved: true });
-    expect(
-      screen.getByRole("heading", { name: "Changes applied successfully." }),
-    ).toBeInTheDocument();
-  });
-
-  test("doesn't show success notification if not saved", () => {
-    renderComponent({ hasSaved: false });
-    expect(
-      screen.queryByRole("heading", { name: "Changes applied successfully." }),
-    ).not.toBeInTheDocument();
-  });
-
-  test("success notifcation can be closed", async () => {
-    const user = userEvent.setup();
-    const setHasSaved = jest.fn();
-    renderComponent({ hasSaved: true, setHasSaved });
-    await user.click(
-      screen.getByRole("button", { name: "Close notification" }),
-    );
-    expect(setHasSaved).toHaveBeenCalled();
-  });
-
-  test("shows error notification if saved", () => {
-    renderComponent({ savedError: true });
-    expect(
-      screen.getByText(/Changes have not been saved./),
-    ).toBeInTheDocument();
-  });
-
-  test("doesn't show error notification if not saved", () => {
-    renderComponent({ savedError: false });
-    expect(
-      screen.queryByText(/Changes have not been saved./),
-    ).not.toBeInTheDocument();
-  });
-
-  test("shows generic error if message is boolean", () => {
-    renderComponent({ savedError: true });
-    expect(screen.getByText(/Something went wrong./)).toBeInTheDocument();
-  });
-
-  test("shows custom error if message is an array", () => {
-    renderComponent({
-      savedError: [
-        { message: "Saving error" },
-        { message: "Field is required" },
-      ],
-    });
-    expect(screen.getByText(/Saving error/)).toBeInTheDocument();
-    expect(screen.getByText(/Field is required/)).toBeInTheDocument();
-  });
-
-  test("error notifcation can be closed", async () => {
-    const user = userEvent.setup();
-    const setHasSaved = jest.fn();
-    renderComponent({ savedError: true, setHasSaved });
-    await user.click(
-      screen.getByRole("button", { name: "Close notification" }),
-    );
-    expect(setHasSaved).toHaveBeenCalled();
-  });
-
-  test("error notifcation can be cleared", async () => {
-    const user = userEvent.setup();
-    const setSavedError = jest.fn();
-    renderComponent({ savedError: true, setSavedError });
-    await user.click(
-      screen.getByRole("button", { name: "Close notification" }),
-    );
-    expect(setSavedError).toHaveBeenCalled();
-  });
-});
diff --git a/static/js/publisher/shared/SaveStateNotifications/index.ts b/static/js/publisher/shared/SaveStateNotifications/index.ts
deleted file mode 100644
index bc2dca163f..0000000000
--- a/static/js/publisher/shared/SaveStateNotifications/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SaveStateNotifications";
diff --git a/static/js/publisher/shared/SearchAutocomplete/SearchAutocomplete.tsx b/static/js/publisher/shared/SearchAutocomplete/SearchAutocomplete.tsx
deleted file mode 100644
index b35a4c074b..0000000000
--- a/static/js/publisher/shared/SearchAutocomplete/SearchAutocomplete.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useState, useEffect } from "react";
-import Downshift from "downshift";
-import { useWatch } from "react-hook-form";
-
-type DataItem = {
-  key: string;
-  name: string;
-};
-
-type Props = {
-  data: Array<DataItem>;
-  field: string;
-  currentValues: Array<string>;
-  register: Function;
-  setValue: Function;
-  getValues: Function;
-  control: any;
-  disabled?: boolean;
-};
-
-function SearchAutocomplete({
-  data,
-  field,
-  currentValues,
-  register,
-  setValue,
-  getValues,
-  control,
-  disabled,
-}: Props) {
-  const [selections, setSelections] = useState(() => {
-    return data.filter((value) => currentValues.includes(value.key));
-  });
-
-  const getNewSelectionKeys = (newSelections: Array<DataItem>) => {
-    return newSelections
-      .map((selection: DataItem) => selection.key)
-      .sort()
-      .join(" ");
-  };
-
-  const shouldDirty = (newSelectionsKeys: string) => {
-    return newSelectionsKeys !== getValues(field);
-  };
-
-  const selectionKeyValues = useWatch({
-    control,
-    name: field,
-  });
-
-  useEffect(() => {
-    setSelections(() => {
-      return data.filter((value) => selectionKeyValues.includes(value.key));
-    });
-  }, [selectionKeyValues]);
-
-  return (
-    <Downshift
-      onChange={(selection) => {
-        const newSelections = selections.concat([selection]);
-        const newSelectionsKeys = getNewSelectionKeys(newSelections);
-
-        setSelections(newSelections);
-        setValue(field, newSelectionsKeys, {
-          shouldDirty: shouldDirty(newSelectionsKeys),
-        });
-      }}
-      itemToString={() => ""}
-    >
-      {({
-        getInputProps,
-        getItemProps,
-        getMenuProps,
-        isOpen,
-        inputValue,
-        highlightedIndex,
-      }) => (
-        <div className="p-multiselect">
-          {selections.map((suggestion: DataItem) => (
-            <span key={suggestion.key} className="p-multiselect__item">
-              {suggestion.name}
-              <i
-                className="p-icon--close p-multiselect__item-remove"
-                onClick={() => {
-                  const newSelections = selections.filter(
-                    (item: DataItem) => item.key !== suggestion.key,
-                  );
-
-                  const newSelectionsKeys = getNewSelectionKeys(newSelections);
-
-                  setSelections(newSelections);
-                  setValue(field, newSelectionsKeys, {
-                    shouldDirty: shouldDirty(newSelectionsKeys),
-                  });
-                }}
-              >
-                Remove suggestion
-              </i>
-            </span>
-          ))}
-
-          <input type="hidden" {...register(field)} />
-
-          <input
-            type="text"
-            className="p-multiselect__input"
-            disabled={disabled}
-            {...getInputProps()}
-          />
-
-          {isOpen && (
-            <ul className="p-multiselect__options" {...getMenuProps()}>
-              {data
-                .filter(
-                  (item) =>
-                    !inputValue ||
-                    item.key.toLowerCase().includes(inputValue) ||
-                    item.name.toLowerCase().includes(inputValue),
-                )
-                .map((item, index) => (
-                  <li
-                    className="p-multiselect__option"
-                    {...getItemProps({
-                      key: item.key,
-                      index,
-                      item,
-                      style: {
-                        backgroundColor:
-                          highlightedIndex === index ? "#f7f7f7" : "#fff",
-                      },
-                    })}
-                  >
-                    {item.name}
-                  </li>
-                ))}
-            </ul>
-          )}
-        </div>
-      )}
-    </Downshift>
-  );
-}
-
-export default SearchAutocomplete;
diff --git a/static/js/publisher/shared/SearchAutocomplete/index.ts b/static/js/publisher/shared/SearchAutocomplete/index.ts
deleted file mode 100644
index 365f03ff4b..0000000000
--- a/static/js/publisher/shared/SearchAutocomplete/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SearchAutocomplete";
diff --git a/static/js/publisher/shared/UpdateMetadataModal/UpdateMetadataModal.tsx b/static/js/publisher/shared/UpdateMetadataModal/UpdateMetadataModal.tsx
deleted file mode 100644
index 1f64e1b142..0000000000
--- a/static/js/publisher/shared/UpdateMetadataModal/UpdateMetadataModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Modal, Button } from "@canonical/react-components";
-
-type Props = {
-  setShowMetadataWarningModal: Function;
-  submitForm: Function;
-  formData: any;
-};
-
-function UpdateMetadataModal({
-  setShowMetadataWarningModal,
-  submitForm,
-  formData,
-}: Props) {
-  return (
-    <Modal
-      close={() => {
-        setShowMetadataWarningModal(false);
-      }}
-      title="Warning"
-      buttonRow={
-        <>
-          <Button
-            type="button"
-            className="u-no-margin--bottom"
-            onClick={() => {
-              setShowMetadataWarningModal(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            className="u-no-margin--bottom u-no-margin--right"
-            appearance="positive"
-            onClick={() => {
-              submitForm(formData);
-              setShowMetadataWarningModal(false);
-            }}
-          >
-            Save changes
-          </Button>
-        </>
-      }
-    >
-      <p>
-        Making these changes means that the snap will no longer use the data
-        from snapcraft.yaml.
-      </p>
-    </Modal>
-  );
-}
-
-export default UpdateMetadataModal;
diff --git a/static/js/publisher/shared/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx b/static/js/publisher/shared/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
deleted file mode 100644
index cf0f52fd98..0000000000
--- a/static/js/publisher/shared/UpdateMetadataModal/__tests__/UpdateMetadataModal.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { screen, render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-
-import UpdateMetadataModal from "../UpdateMetadataModal";
-
-const setShowMetadataWarningModal = jest.fn();
-const submitForm = jest.fn();
-const formData = {};
-
-const renderComponent = () => {
-  return render(
-    <UpdateMetadataModal
-      setShowMetadataWarningModal={setShowMetadataWarningModal}
-      submitForm={submitForm}
-      formData={formData}
-    />,
-  );
-};
-
-describe("UpdateMetadataModal", () => {
-  test("cancel button closes modal", async () => {
-    const user = userEvent.setup();
-    renderComponent();
-    await user.click(screen.getByRole("button", { name: "Cancel" }));
-    await waitFor(() => {
-      expect(setShowMetadataWarningModal).toHaveBeenCalledWith(false);
-    });
-  });
-
-  test("save button submits form and closes modal", async () => {
-    const user = userEvent.setup();
-    renderComponent();
-    await user.click(screen.getByRole("button", { name: "Save changes" }));
-    await waitFor(() => {
-      expect(setShowMetadataWarningModal).toHaveBeenCalledWith(false);
-      expect(submitForm).toHaveBeenCalledWith(formData);
-    });
-  });
-});
diff --git a/static/js/publisher/shared/UpdateMetadataModal/index.ts b/static/js/publisher/shared/UpdateMetadataModal/index.ts
deleted file mode 100644
index 1685ee13ec..0000000000
--- a/static/js/publisher/shared/UpdateMetadataModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./UpdateMetadataModal";
diff --git a/static/js/publisher/state.js b/static/js/publisher/state.js
deleted file mode 100644
index bdcdd6996c..0000000000
--- a/static/js/publisher/state.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { arraysEqual } from "../libs/arrays";
-
-const allowedKeys = [
-  "title",
-  "summary",
-  "description",
-  "images",
-  "website",
-  "contact",
-  "private",
-  "unlisted",
-  "public_metrics_enabled",
-  "public_metrics_blacklist",
-  "whitelist_countries",
-  "blacklist_countries",
-  "video_urls",
-  "license",
-  "categories",
-  "update_metadata_on_release",
-];
-
-function commaSeperatedStringToArray(str) {
-  if (str !== "" && str.split(",").join("").trim() !== "") {
-    const split = str.split(",");
-    return split.map((item) => item.trim()).filter((item) => item !== "");
-  } else {
-    return [];
-  }
-}
-
-const transform = {
-  whitelist_countries: commaSeperatedStringToArray,
-  blacklist_countries: commaSeperatedStringToArray,
-  private: (value) => value === "private",
-  public_metrics_enabled: (value) => value === "on",
-};
-
-function updateState(state, values) {
-  if (values) {
-    // if values can be iterated on (like FormData)
-    if (values.forEach) {
-      values.forEach((value, key) => {
-        if (allowedKeys.includes(key)) {
-          // FormData values encode new lines as \r\n which are invalid for our API
-          // so we need to replace them back to \n
-          let newValue = value.replace(/\r\n/g, "\n");
-
-          // Some values will need to be transformed in some way for the API
-          if (transform[key]) {
-            newValue = transform[key](newValue);
-          }
-
-          state[key] = newValue;
-        }
-      });
-      // else if it's just a plain object
-    } else {
-      for (let key in values) {
-        if (allowedKeys.includes(key)) {
-          state[key] = values[key];
-        }
-      }
-    }
-  }
-}
-
-function diffState(initialState, state) {
-  if (!initialState) {
-    return null;
-  }
-
-  const diff = {};
-
-  for (let key of allowedKeys) {
-    // images is an array of objects so compare stringified version
-    if (key === "images" && state[key]) {
-      const images = state[key]
-        // ignore selected status when comparing
-        .map((image) => {
-          delete image.selected;
-          return image;
-        });
-
-      if (JSON.stringify(initialState[key]) !== JSON.stringify(images)) {
-        diff[key] = images;
-      }
-    } else {
-      if (initialState[key] !== state[key]) {
-        if (Array.isArray(initialState[key]) && Array.isArray(state[key])) {
-          if (!arraysEqual(initialState[key], state[key])) {
-            diff[key] = state[key];
-          }
-        } else {
-          diff[key] = state[key];
-        }
-      }
-    }
-  }
-
-  // only return diff when there are any changes
-  return Object.keys(diff).length > 0 ? diff : null;
-}
-
-export { updateState, diffState, commaSeperatedStringToArray };
diff --git a/static/js/publisher/state.test.js b/static/js/publisher/state.test.js
deleted file mode 100644
index b2c1298772..0000000000
--- a/static/js/publisher/state.test.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { updateState, diffState, commaSeperatedStringToArray } from "./state";
-
-describe("updateState", () => {
-  let state;
-
-  beforeEach(() => {
-    state = {
-      title: "Default test title",
-    };
-  });
-
-  describe("when passing FormData values", () => {
-    let formData;
-
-    beforeEach(() => {
-      formData = new FormData();
-    });
-
-    test("should add value from allowed keys", () => {
-      formData.set("summary", "Test summary");
-      updateState(state, formData);
-
-      expect(state.summary).toBe("Test summary");
-    });
-
-    test("should update value from allowed keys", () => {
-      formData.set("title", "Test title");
-      updateState(state, formData);
-
-      expect(state.title).toBe("Test title");
-    });
-
-    test("should not add value not from allowed keys", () => {
-      formData.set("something", "Test something");
-      updateState(state, formData);
-
-      expect(state.something).toBeUndefined();
-    });
-  });
-
-  describe("when passing object with values", () => {
-    test("should add value from allowed keys", () => {
-      updateState(state, {
-        summary: "Test summary",
-      });
-
-      expect(state.summary).toBe("Test summary");
-    });
-
-    test("should update value from allowed keys", () => {
-      updateState(state, {
-        title: "Test title",
-      });
-
-      expect(state.title).toBe("Test title");
-    });
-
-    test("should not add value not from allowed keys", () => {
-      updateState(state, {
-        something: "Test something",
-      });
-
-      expect(state.something).toBeUndefined();
-    });
-  });
-});
-
-describe("diffState", () => {
-  test("should return null if states are equal is empty", () => {
-    expect(
-      diffState(
-        {
-          title: "Test title",
-        },
-        {
-          title: "Test title",
-        },
-      ),
-    ).toBeNull();
-  });
-
-  test("should return diff containing only changed fields", () => {
-    expect(
-      diffState(
-        {
-          title: "Test title",
-          summary: "Test summary",
-        },
-        {
-          title: "Test title",
-          summary: "Test summary changed",
-          something: "Test something",
-        },
-      ),
-    ).toEqual({
-      summary: "Test summary changed",
-    });
-  });
-
-  // when comparing images
-  describe("when comparing images in state", () => {
-    test("should ignore selected status", () => {
-      expect(
-        diffState(
-          {
-            images: [
-              { url: "test1.png", status: "uploaded" },
-              { url: "test2.png", status: "uploaded" },
-            ],
-          },
-          {
-            images: [
-              { url: "test1.png", status: "uploaded", selected: false },
-              { url: "test2.png", status: "uploaded", selected: true },
-            ],
-          },
-        ),
-      ).toBeNull();
-    });
-  });
-});
-
-describe("commaSeperatedStringToArray", () => {
-  test("should return empty array if single value is blank", () => {
-    expect(commaSeperatedStringToArray("")).toEqual([]);
-  });
-
-  test("should return empty array if all values are blank", () => {
-    expect(commaSeperatedStringToArray(", ")).toEqual([]);
-  });
-
-  test("should return an array if single value is not blank", () => {
-    expect(commaSeperatedStringToArray("test")).toEqual(["test"]);
-  });
-
-  test("should return an array if multiple values are not blank", () => {
-    expect(commaSeperatedStringToArray("test, test2")).toEqual([
-      "test",
-      "test2",
-    ]);
-  });
-
-  test("should return a single element array if multiple values and 1 is blank", () => {
-    expect(commaSeperatedStringToArray("test, ")).toEqual(["test"]);
-    expect(commaSeperatedStringToArray(", test")).toEqual(["test"]);
-  });
-
-  test("should return multiple elements with comma and space", () => {
-    expect(commaSeperatedStringToArray("test, test2")).toEqual([
-      "test",
-      "test2",
-    ]);
-  });
-
-  test("should return multuple elements with comma and no space", () => {
-    expect(commaSeperatedStringToArray("test,test2")).toEqual([
-      "test",
-      "test2",
-    ]);
-  });
-});
diff --git a/static/js/publisher/submitEnabler.test.js b/static/js/publisher/submitEnabler.test.js
deleted file mode 100644
index 0248db3d2a..0000000000
--- a/static/js/publisher/submitEnabler.test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import submitEnabler from "./submitEnabler";
-
-describe("submitEnabler", () => {
-  let form;
-  let buttons = [];
-  let input;
-
-  beforeEach(() => {
-    form = document.createElement("form");
-    form.className = "test-form";
-
-    input = document.createElement("input");
-    input.type = "text";
-    input.name = "an-input";
-    input.value = "hi";
-
-    form.appendChild(input);
-
-    for (let i = 0; i < 4; i += 1) {
-      buttons.push(document.createElement("button"));
-      buttons[i].className = `test-form-button-${i}`;
-      form.appendChild(buttons[i]);
-    }
-
-    document.body.appendChild(form);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(form);
-    buttons = [];
-  });
-
-  it("should throw if no form selector is provided", () => {
-    expect(() => {
-      submitEnabler();
-    }).toThrow("`formSelector` argument is required");
-  });
-
-  it("should throw if the form selector is invalid", () => {
-    expect(() => {
-      submitEnabler(".form", [".test"]);
-    }).toThrow(".form is not a valid element");
-  });
-
-  it("should throw if no button selectors are provided", () => {
-    expect(() => {
-      submitEnabler(".test-form");
-    }).toThrow("At least one `buttonSelectors` must be defined");
-
-    expect(() => {
-      submitEnabler(".test-form", []);
-    }).toThrow("At least one `buttonSelectors` must be defined");
-  });
-
-  it("should set provided buttons to disabled", () => {
-    const button1 = document.querySelector(".test-form-button-0");
-    const button2 = document.querySelector(".test-form-button-1");
-    const button3 = document.querySelector(".test-form-button-2");
-    const button4 = document.querySelector(".test-form-button-3");
-
-    expect(button1.getAttribute("disabled")).toBeNull();
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toBeNull();
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    submitEnabler(".test-form", [".test-form-button-0", ".test-form-button-2"]);
-
-    expect(button1.getAttribute("disabled")).toEqual("disabled");
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toEqual("disabled");
-    expect(button4.getAttribute("disabled")).toBeNull();
-  });
-
-  it("should enable the passed buttons when the form changes", () => {
-    const button1 = document.querySelector(".test-form-button-0");
-    const button2 = document.querySelector(".test-form-button-1");
-    const button3 = document.querySelector(".test-form-button-2");
-    const button4 = document.querySelector(".test-form-button-3");
-
-    expect(button1.getAttribute("disabled")).toBeNull();
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toBeNull();
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    submitEnabler(".test-form", [".test-form-button-0", ".test-form-button-2"]);
-
-    expect(button1.getAttribute("disabled")).toEqual("disabled");
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toEqual("disabled");
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    input.value = "bye";
-    form.dispatchEvent(new Event("change"));
-
-    expect(button1.getAttribute("disabled")).toBeNull();
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toBeNull();
-    expect(button4.getAttribute("disabled")).toBeNull();
-  });
-
-  it("should disable the passed buttons when the form changes back to initial values", () => {
-    const button1 = document.querySelector(".test-form-button-0");
-    const button2 = document.querySelector(".test-form-button-1");
-    const button3 = document.querySelector(".test-form-button-2");
-    const button4 = document.querySelector(".test-form-button-3");
-
-    expect(button1.getAttribute("disabled")).toBeNull();
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toBeNull();
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    submitEnabler(".test-form", [".test-form-button-0", ".test-form-button-2"]);
-
-    expect(button1.getAttribute("disabled")).toEqual("disabled");
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toEqual("disabled");
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    input.value = "bye";
-    form.dispatchEvent(new Event("change"));
-
-    expect(button1.getAttribute("disabled")).toBeNull();
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toBeNull();
-    expect(button4.getAttribute("disabled")).toBeNull();
-
-    input.value = "hi";
-    form.dispatchEvent(new Event("change"));
-
-    expect(button1.getAttribute("disabled")).toEqual("disabled");
-    expect(button2.getAttribute("disabled")).toBeNull();
-    expect(button3.getAttribute("disabled")).toEqual("disabled");
-    expect(button4.getAttribute("disabled")).toBeNull();
-  });
-});
diff --git a/static/js/publisher/submitEnabler.ts b/static/js/publisher/submitEnabler.ts
deleted file mode 100644
index 8274a1595e..0000000000
--- a/static/js/publisher/submitEnabler.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import shallowDiff from "../libs/shallowDiff";
-
-function submitEnabler(
-  formSelector: string | undefined,
-  buttonSelectors: any[] | undefined,
-) {
-  if (!formSelector) {
-    throw new TypeError("`formSelector` argument is required");
-  }
-
-  if (!buttonSelectors || buttonSelectors.length === 0) {
-    throw new TypeError("At least one `buttonSelectors` must be defined");
-  }
-
-  const formEl = document.querySelector(formSelector) as HTMLFormElement;
-
-  if (!formEl) {
-    throw new Error(`${formSelector} is not a valid element`);
-  }
-
-  const buttonEls = buttonSelectors.map((selector) =>
-    document.querySelector(selector),
-  );
-
-  const initialState = new FormData(formEl);
-
-  const initialStateJson: { [key: string]: any } = {};
-
-  for (const [key, value] of initialState.entries()) {
-    initialStateJson[key] = value;
-  }
-
-  buttonEls.forEach((button) => {
-    if (button) {
-      button.setAttribute("disabled", "disabled");
-      button.classList.add("is-disabled");
-    }
-  });
-
-  formEl.addEventListener("change", () => {
-    const newState = new FormData(formEl);
-    const newStateJson: { [key: string]: any } = {};
-
-    for (const [key, value] of newState.entries()) {
-      newStateJson[key] = value;
-    }
-
-    const diff = shallowDiff(initialStateJson, newStateJson);
-    buttonEls.forEach((button) => {
-      if (diff) {
-        button.removeAttribute("disabled");
-        button.classList.remove("is-disabled");
-      } else {
-        button.setAttribute("disabled", "disabled");
-        button.classList.add("is-disabled");
-      }
-    });
-  });
-}
-
-export { submitEnabler as default };
diff --git a/static/js/publisher/tour.tsx b/static/js/publisher/tour.tsx
deleted file mode 100644
index 3af2d4ade6..0000000000
--- a/static/js/publisher/tour.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { createRoot } from "react-dom/client";
-
-import Tour from "./tour/tour";
-
-import { toggleShadowWhenSticky } from "./market/stickyListingBar";
-
-import type { TourStep } from "../publisher-pages/types";
-
-// returns true if % of truthy values in the array is above the threshold
-function isCompleted(fields: unknown[], threshold = 0.5): boolean {
-  const completed = fields.filter((isCompleted) => isCompleted);
-
-  return completed.length / fields.length >= threshold;
-}
-
-export function initTour({
-  container,
-  steps,
-  onTourStarted,
-  onTourClosed,
-  startTour,
-}: {
-  container: HTMLElement;
-  steps: TourStep[];
-  onTourStarted: () => void;
-  onTourClosed: () => void;
-  startTour: boolean;
-}) {
-  if (!document.contains(container)) {
-    throw Error("initTour container element not found in document.");
-  }
-  if (!steps || !steps.length) {
-    throw Error("initTour expects steps array as an argument.");
-  }
-
-  const root = createRoot(container);
-  root.render(
-    <Tour
-      steps={steps}
-      onTourStarted={onTourStarted}
-      onTourClosed={onTourClosed}
-      startTour={startTour}
-    />,
-  );
-}
-
-export function initListingTour({
-  snapName,
-  container,
-  steps,
-  formFields,
-}: {
-  snapName: string;
-  container: HTMLElement;
-  steps: TourStep[];
-  formFields: {
-    title: string;
-    snap_name: string;
-    categories: string[];
-    video_urls: string[];
-    images: Array<{
-      type: string;
-    }>;
-    summary: string;
-    website: string[];
-    contact: string[];
-  };
-}) {
-  const storageKey = `listing-tour-finished-${snapName}`;
-
-  // check form fields completed status
-  // truthy value means field is considered completed
-  const completedFields = [
-    // title is completed if it is different from package name
-    formFields.title !== formFields.snap_name,
-    // category
-    formFields.categories.length,
-    // video
-    formFields.video_urls.length,
-    // icon
-    formFields.images.filter((i) => i.type === "icon").length,
-    // images
-    formFields.images.filter((i) => i.type === "screenshot").length,
-    // banner
-    formFields.images.filter((i) => i.type === "banner").length,
-    // summary is completed if it is different from the title
-    formFields.summary !== formFields.title,
-    // if one of website or contact is filled we consider it completed
-    formFields.website || formFields.contact,
-  ];
-
-  const isFormCompleted = isCompleted(completedFields);
-  const isTourFinished = !!(
-    window.localStorage && window.localStorage.getItem(storageKey) === "true"
-  );
-
-  // start the tour automatically if form is not completed
-  // (has less than 50% fields filled), and the tour wasn't closed before
-  const startTour = !isFormCompleted && !isTourFinished;
-
-  const stickyHeader = document.querySelector(".js-sticky-bar");
-  const onTourClosed = (): void => {
-    // save that tour was seen by user
-    window.localStorage && window.localStorage.setItem(storageKey, "true");
-    // make header sticky again
-    if (stickyHeader) {
-      stickyHeader.classList.remove("is-static");
-    }
-    toggleShadowWhenSticky(stickyHeader);
-  };
-
-  const onTourStarted = (): void => {
-    if (stickyHeader) {
-      stickyHeader.classList.add("is-static");
-    }
-  };
-
-  initTour({ container, steps, onTourStarted, onTourClosed, startTour });
-}
diff --git a/static/js/publisher/tour/__mocks__/constants.ts b/static/js/publisher/tour/__mocks__/constants.ts
deleted file mode 100644
index cf1aa86e38..0000000000
--- a/static/js/publisher/tour/__mocks__/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// this specifically needs to be mocked
-// not to rely on getting font size from browser
-export const REM = 16;
-
-export const MASK_OFFSET = 8;
-export const SCROLL_MARGIN = 400;
-export const SCROLL_OFFSET_TOP = 10;
-export const SCROLL_OFFSET_BOTTOM = 10;
diff --git a/static/js/publisher/tour/constants.ts b/static/js/publisher/tour/constants.ts
deleted file mode 100644
index 773dc8fd41..0000000000
--- a/static/js/publisher/tour/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const REM = parseFloat(
-  getComputedStyle(document.documentElement).fontSize,
-);
-export const MASK_OFFSET = REM / 2; // .5rem  is a default spacing unit in Vanilla
-
-export const SCROLL_MARGIN = 400; // if element highlighted element doesn't fit into this top/bottom area of the screen, we scroll it into view
-export const SCROLL_OFFSET_TOP = 10;
-export const SCROLL_OFFSET_BOTTOM = 10;
diff --git a/static/js/publisher/tour/helpers.ts b/static/js/publisher/tour/helpers.ts
deleted file mode 100644
index ce4bc6da7a..0000000000
--- a/static/js/publisher/tour/helpers.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { MASK_OFFSET } from "./constants";
-
-import type { TourStep } from "../../publisher-pages/types";
-
-// check if element is part of the DOM and is visible
-export const isVisibleInDocument = (el: HTMLElement): boolean =>
-  document.contains(el) && !(el.offsetWidth === 0 && el.offsetHeight === 0);
-
-// find DOM elements for each step, ignore steps with no elements
-// set default position to "bottom-left"
-export function prepareSteps(steps: TourStep[]): Array<{
-  id: string;
-  position: string;
-  elements: HTMLElement[];
-  title: string;
-  content: string;
-}> {
-  return steps
-    .map((step) => {
-      return {
-        ...step,
-        elements: [].slice.apply(
-          document.querySelectorAll(`[data-tour="${step.id}"]`),
-        ),
-        position: step.position || "bottom-left",
-      };
-    })
-    .filter((step) => step.elements.length > 0);
-}
-
-// get rectangle of given DOM element
-// relative to the page, taking scroll into account
-const getRectFromEl = (
-  el: HTMLElement,
-): {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-} => {
-  const clientRect = el.getBoundingClientRect();
-  const ret = {
-    top:
-      clientRect.top +
-      (window.pageYOffset || document.documentElement.scrollTop),
-    left:
-      clientRect.left +
-      (window.pageXOffset || document.documentElement.scrollLeft),
-    width: clientRect.width,
-    height: clientRect.height,
-  };
-
-  return ret;
-};
-
-// get mask based on rectangle
-const getMaskFromRect = (rect: {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-}): {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-} => {
-  let top = rect.top - MASK_OFFSET;
-  if (top < 0) {
-    top = 0;
-  }
-
-  let left = rect.left - MASK_OFFSET;
-  if (left < 0) {
-    left = 0;
-  }
-
-  const bottom = rect.top + rect.height + MASK_OFFSET;
-  const right = rect.left + rect.width + MASK_OFFSET;
-
-  return {
-    top,
-    bottom,
-    left,
-    right,
-  };
-};
-
-// calculate mask for given element
-const getMaskFromEl = (el: HTMLElement) => getMaskFromRect(getRectFromEl(el));
-
-// get mask that is an union of all elements' masks
-// calculates the rectangle that contains each individual element rectangles
-export const getMaskFromElements = (elements: Array<HTMLElement>) => {
-  const masks = elements
-    .filter(isVisibleInDocument)
-    .map((el) => getMaskFromEl(el));
-
-  return masks.reduce(
-    (unionMask, elMask) => {
-      return {
-        top: Math.min(unionMask.top, elMask.top),
-        left: Math.min(unionMask.left, elMask.left),
-        bottom: Math.max(unionMask.bottom, elMask.bottom),
-        right: Math.max(unionMask.right, elMask.right),
-      };
-    },
-    {
-      top: Infinity,
-      left: Infinity,
-      right: 0,
-      bottom: 0,
-    },
-  );
-};
diff --git a/static/js/publisher/tour/metricsEvents.test.ts b/static/js/publisher/tour/metricsEvents.test.ts
deleted file mode 100644
index 7f74a20497..0000000000
--- a/static/js/publisher/tour/metricsEvents.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  tourStartedByUser,
-  tourStartedAutomatically,
-  tourFinished,
-  tourSkipped,
-} from "./metricsEvents";
-import { triggerEvent } from "../../base/ga";
-
-jest.mock("../../base/ga");
-
-describe("metricsEvents", () => {
-  describe("tourStartedByUser", () => {
-    it("should trigger GA tour-started-by-user event", () => {
-      tourStartedByUser();
-      expect(triggerEvent).toBeCalledWith(
-        "tour-started-by-user",
-        expect.anything(),
-        expect.anything(),
-        expect.anything(),
-      );
-    });
-  });
-
-  describe("tourStartedAutomatically", () => {
-    it("should trigger GA tour-started-automatically event", () => {
-      tourStartedAutomatically();
-      expect(triggerEvent).toBeCalledWith(
-        "tour-started-automatically",
-        expect.anything(),
-        expect.anything(),
-        expect.anything(),
-      );
-    });
-  });
-
-  describe("tourFinished", () => {
-    it("should trigger GA tour-finished event with step id", () => {
-      tourFinished("test-step");
-      expect(triggerEvent).toBeCalledWith(
-        "tour-finished",
-        expect.anything(),
-        expect.anything(),
-        expect.stringContaining("test-step"),
-      );
-    });
-  });
-
-  describe("tourSkipped", () => {
-    it("should trigger GA tour-skipped event with step id", () => {
-      tourSkipped("test-step");
-      expect(triggerEvent).toBeCalledWith(
-        "tour-skipped",
-        expect.anything(),
-        expect.anything(),
-        expect.stringContaining("test-step"),
-      );
-    });
-  });
-});
diff --git a/static/js/publisher/tour/metricsEvents.ts b/static/js/publisher/tour/metricsEvents.ts
deleted file mode 100644
index 72807f9397..0000000000
--- a/static/js/publisher/tour/metricsEvents.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { triggerEvent } from "../../base/ga";
-
-export const tourStartedByUser = () =>
-  triggerEvent(
-    "tour-started-by-user",
-    window.location.href,
-    "",
-    `Tour started manually by user on "${document.title}" page`,
-  );
-
-export const tourStartedAutomatically = () =>
-  triggerEvent(
-    "tour-started-automatically",
-    window.location.href,
-    "",
-    `Tour started automatically on "${document.title}" page`,
-  );
-
-export const tourFinished = (stepId: string) =>
-  triggerEvent(
-    "tour-finished",
-    window.location.href,
-    "",
-    `Tour finished on "${document.title}" page on step ${stepId}`,
-  );
-
-export const tourSkipped = (stepId: string) =>
-  triggerEvent(
-    "tour-skipped",
-    window.location.href,
-    "",
-    `Tour skipped on "${document.title}" page on step ${stepId}`,
-  );
diff --git a/static/js/publisher/tour/tour.test.tsx b/static/js/publisher/tour/tour.test.tsx
deleted file mode 100644
index 878dee5bd9..0000000000
--- a/static/js/publisher/tour/tour.test.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { render, fireEvent, cleanup } from "@testing-library/react";
-
-import Tour from "./tour";
-
-// mocks
-import { tourStartedAutomatically } from "./metricsEvents";
-jest.mock("./metricsEvents");
-
-import TourOverlay from "./tourOverlay";
-jest.mock("./tourOverlay", () => jest.fn().mockReturnValue(null));
-
-describe("Tour", () => {
-  const steps = [
-    {
-      id: "test-step",
-      title: "",
-      content: "",
-      elements: [],
-      position: "",
-    },
-  ];
-
-  afterEach(cleanup);
-
-  it("should render TourBar with a button", () => {
-    const { getByText } = render(
-      <Tour
-        steps={steps}
-        startTour={false}
-        onTourClosed={jest.fn()}
-        onTourStarted={jest.fn()}
-      />,
-    );
-
-    const button = getByText("Tour");
-    expect(button).toBeDefined();
-
-    expect(TourOverlay).not.toBeCalled();
-  });
-
-  describe("when tour button is clicked", () => {
-    it("should render tour overlay", () => {
-      const { getByText } = render(
-        <Tour
-          steps={steps}
-          startTour={false}
-          onTourClosed={jest.fn()}
-          onTourStarted={jest.fn()}
-        />,
-      );
-      const button = getByText("Tour");
-
-      fireEvent.click(button);
-
-      expect(TourOverlay).toBeCalledWith(
-        expect.objectContaining({
-          steps,
-        }),
-        expect.any(Object),
-      );
-    });
-  });
-
-  describe("when startTour is true", () => {
-    it("should render tour overlay", () => {
-      render(
-        <Tour
-          steps={steps}
-          startTour={true}
-          onTourClosed={jest.fn()}
-          onTourStarted={jest.fn()}
-        />,
-      );
-
-      expect(TourOverlay).toBeCalledWith(
-        expect.objectContaining({
-          steps,
-        }),
-        expect.any(Object),
-      );
-    });
-
-    it("should call metrics event", () => {
-      render(
-        <Tour
-          steps={steps}
-          startTour={true}
-          onTourClosed={jest.fn()}
-          onTourStarted={jest.fn()}
-        />,
-      );
-      expect(tourStartedAutomatically).toBeCalled();
-    });
-  });
-
-  describe("when tour start callback is provided", () => {
-    let onTourStarted: () => void;
-
-    beforeEach(() => {
-      onTourStarted = jest.fn();
-    });
-
-    it("should call the callback when starting automatically", () => {
-      render(
-        <Tour
-          steps={steps}
-          startTour={true}
-          onTourStarted={onTourStarted}
-          onTourClosed={jest.fn()}
-        />,
-      );
-
-      expect(onTourStarted).toBeCalled();
-    });
-
-    it("should call the callback when starting with a button", () => {
-      const { getByText } = render(
-        <Tour
-          steps={steps}
-          onTourStarted={onTourStarted}
-          startTour={false}
-          onTourClosed={jest.fn()}
-        />,
-      );
-      fireEvent.click(getByText("Tour"));
-
-      expect(onTourStarted).toBeCalled();
-    });
-  });
-
-  describe("when tour close callback is provided", () => {
-    let onTourClosed: () => void;
-
-    beforeEach(() => {
-      onTourClosed = jest.fn();
-    });
-
-    it("should not call the callback when starting automatically", () => {
-      render(
-        <Tour
-          steps={steps}
-          startTour={true}
-          onTourClosed={onTourClosed}
-          onTourStarted={jest.fn()}
-        />,
-      );
-
-      expect(onTourClosed).not.toBeCalled();
-    });
-
-    it("should call the callback when rendered initially", () => {
-      render(
-        <Tour
-          steps={steps}
-          onTourClosed={onTourClosed}
-          startTour={false}
-          onTourStarted={jest.fn()}
-        />,
-      );
-
-      expect(onTourClosed).toBeCalled();
-    });
-  });
-});
diff --git a/static/js/publisher/tour/tour.tsx b/static/js/publisher/tour/tour.tsx
deleted file mode 100644
index bf7d8fc4b6..0000000000
--- a/static/js/publisher/tour/tour.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState, useEffect, ReactNode } from "react";
-
-import TourOverlay from "./tourOverlay";
-import TourBar from "./tourBar";
-
-import { tourStartedAutomatically } from "./metricsEvents";
-
-import type { TourStep } from "../../publisher-pages/types";
-
-type Props = {
-  steps: TourStep[];
-  startTour: boolean;
-  onTourStarted: () => void;
-  onTourClosed: () => void;
-};
-
-export default function Tour({
-  steps,
-  onTourStarted,
-  onTourClosed,
-  startTour = false,
-}: Props): ReactNode {
-  // send metrics event if tour started automatically
-  useEffect(() => {
-    if (startTour) {
-      tourStartedAutomatically();
-    }
-  }, [startTour]);
-
-  const [isTourOpen, setIsTourOpen] = useState(startTour);
-
-  const showTour = () => setIsTourOpen(true);
-  const hideTour = () => setIsTourOpen(false);
-
-  // trigger callbacks when tour is started or finished
-  useEffect(() => {
-    if (isTourOpen && onTourStarted) {
-      onTourStarted();
-    }
-    if (!isTourOpen && onTourClosed) {
-      onTourClosed();
-    }
-  }, [isTourOpen]);
-
-  return (
-    <>
-      <TourBar showTour={showTour} />
-
-      {isTourOpen && <TourOverlay steps={steps} hideTour={hideTour} />}
-    </>
-  );
-}
diff --git a/static/js/publisher/tour/tourBar.tsx b/static/js/publisher/tour/tourBar.tsx
deleted file mode 100644
index a76cdcf3b7..0000000000
--- a/static/js/publisher/tour/tourBar.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { tourStartedByUser } from "./metricsEvents";
-
-export default function TourBar({ showTour }: { showTour: () => void }) {
-  const onButtonClick = () => {
-    tourStartedByUser();
-    showTour();
-  };
-
-  return (
-    <div className="p-tour-bar">
-      <button
-        className="p-tour-bar__button"
-        data-tour="tour-end"
-        onClick={onButtonClick}
-      >
-        <i className="p-icon--question">Tour</i>
-      </button>
-    </div>
-  );
-}
diff --git a/static/js/publisher/tour/tourOverlay.test.tsx b/static/js/publisher/tour/tourOverlay.test.tsx
deleted file mode 100644
index ed38a1a648..0000000000
--- a/static/js/publisher/tour/tourOverlay.test.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { render, fireEvent, cleanup } from "@testing-library/react";
-
-import TourOverlay from "./tourOverlay";
-
-// mocks
-jest.mock("./constants"); // __mocks__/constants.js
-jest.mock("./helpers");
-jest.mock("./metricsEvents");
-jest.mock("../../public/scroll-to");
-
-import {
-  prepareSteps,
-  isVisibleInDocument,
-  getMaskFromElements,
-} from "./helpers";
-import { tourSkipped, tourFinished } from "./metricsEvents";
-import { animateScrollTo } from "../../public/scroll-to";
-
-// @ts-expect-error
-isVisibleInDocument.mockReturnValue(true);
-
-// @ts-expect-error
-getMaskFromElements.mockReturnValue({
-  top: 10,
-  left: 20,
-  bottom: 30,
-  right: 40,
-});
-
-// @ts-expect-error
-prepareSteps.mockImplementation(
-  (
-    steps: Array<{
-      id: string;
-      position: string;
-      elements: HTMLElement[];
-      content: string;
-      title: string;
-    }>,
-  ) => steps,
-);
-
-describe("TourOverlay", () => {
-  const steps = [
-    {
-      id: "test-step-1",
-      title: "Test step 1",
-      position: "bottom-left",
-      elements: [],
-      content: "",
-    },
-    {
-      id: "test-step-2",
-      title: "Test step 2",
-      position: "top-left",
-      elements: [],
-      content: "",
-    },
-  ];
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  it("should render TourStepCard for first step", () => {
-    const { getByText } = render(
-      <TourOverlay steps={steps} hideTour={jest.fn()} />,
-    );
-
-    expect(getByText(steps[0].title)).toBeDefined();
-  });
-
-  describe("when moving to next step", () => {
-    it("should render TourStepCard for next step", () => {
-      const { getByText } = render(
-        <TourOverlay steps={steps} hideTour={jest.fn()} />,
-      );
-
-      fireEvent.click(getByText("Next step"));
-
-      expect(getByText(steps[1].title)).toBeDefined();
-    });
-
-    it("should scroll next step into view", () => {
-      const { getByText } = render(
-        <TourOverlay steps={steps} hideTour={jest.fn()} />,
-      );
-
-      fireEvent.click(getByText("Next step"));
-
-      expect(animateScrollTo).toHaveBeenCalled();
-    });
-  });
-
-  describe("when moving to previous step", () => {
-    it("should render TourStepCard for previous step", () => {
-      const { getByText } = render(
-        <TourOverlay steps={steps} currentStepIndex={1} hideTour={jest.fn()} />,
-      );
-
-      fireEvent.click(getByText("Previous step"));
-
-      expect(getByText(steps[0].title)).toBeDefined();
-    });
-
-    it("should scroll previous step into view", () => {
-      const { getByText } = render(
-        <TourOverlay steps={steps} currentStepIndex={1} hideTour={jest.fn()} />,
-      );
-
-      fireEvent.click(getByText("Previous step"));
-
-      expect(animateScrollTo).toHaveBeenCalled();
-    });
-  });
-
-  describe("when skipping the tour", () => {
-    it("should call the hide callback", () => {
-      const hideTour = jest.fn();
-
-      const { getByText } = render(
-        <TourOverlay steps={steps} hideTour={hideTour} />,
-      );
-
-      fireEvent.click(getByText("Skip tour"));
-
-      expect(hideTour).toHaveBeenCalled();
-    });
-
-    it("should trigger the skip metrics event", () => {
-      const hideTour = jest.fn();
-
-      const { getByText } = render(
-        <TourOverlay steps={steps} hideTour={hideTour} />,
-      );
-
-      fireEvent.click(getByText("Skip tour"));
-
-      expect(tourSkipped).toHaveBeenCalled();
-      expect(tourFinished).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("when finishing the tour", () => {
-    it("should call the hide callback", () => {
-      const hideTour = jest.fn();
-
-      const { getByText } = render(
-        <TourOverlay steps={steps} currentStepIndex={1} hideTour={hideTour} />,
-      );
-
-      fireEvent.click(getByText("Finish tour"));
-
-      expect(hideTour).toHaveBeenCalled();
-    });
-
-    it("should trigger the finished metrics event", () => {
-      const hideTour = jest.fn();
-
-      const { getByText } = render(
-        <TourOverlay steps={steps} currentStepIndex={1} hideTour={hideTour} />,
-      );
-
-      fireEvent.click(getByText("Finish tour"));
-
-      expect(tourSkipped).not.toHaveBeenCalled();
-      expect(tourFinished).toHaveBeenCalled();
-    });
-  });
-
-  describe("when closing tour with ESC key", () => {
-    it("should call the hide callback", () => {
-      const hideTour = jest.fn();
-
-      render(<TourOverlay steps={steps} hideTour={hideTour} />);
-
-      fireEvent.keyUp(document, { key: "Escape", keyCode: 27 });
-
-      expect(hideTour).toHaveBeenCalled();
-    });
-
-    it("should trigger the skip metrics event", () => {
-      const hideTour = jest.fn();
-
-      render(<TourOverlay steps={steps} hideTour={hideTour} />);
-
-      fireEvent.keyUp(document, { key: "Escape", keyCode: 27 });
-
-      expect(tourSkipped).toHaveBeenCalled();
-      expect(tourFinished).not.toHaveBeenCalled();
-    });
-
-    it("should trigger the finish metrics event on last step", () => {
-      const hideTour = jest.fn();
-
-      render(
-        <TourOverlay steps={steps} currentStepIndex={1} hideTour={hideTour} />,
-      );
-
-      fireEvent.keyUp(document, { key: "Escape", keyCode: 27 });
-
-      expect(tourSkipped).not.toHaveBeenCalled();
-      expect(tourFinished).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/static/js/publisher/tour/tourOverlay.tsx b/static/js/publisher/tour/tourOverlay.tsx
deleted file mode 100644
index 6fb5673c86..0000000000
--- a/static/js/publisher/tour/tourOverlay.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-
-import debounce from "../../libs/debounce";
-
-import TourStepCard from "./tourStepCard";
-import TourOverlayMask from "./tourOverlayMask";
-import { tourFinished, tourSkipped } from "./metricsEvents";
-import { getMaskFromElements, prepareSteps } from "./helpers";
-import {
-  SCROLL_MARGIN,
-  SCROLL_OFFSET_TOP,
-  SCROLL_OFFSET_BOTTOM,
-} from "./constants";
-
-import { animateScrollTo } from "../../public/scroll-to";
-
-import type { TourStep } from "../../publisher-pages/types";
-
-export default function TourOverlay({
-  steps,
-  hideTour,
-  currentStepIndex = 0,
-}: {
-  steps: TourStep[];
-  hideTour: () => void;
-  currentStepIndex?: number;
-}) {
-  steps = prepareSteps(steps);
-
-  let setCurrentStepIndex: Function;
-  [currentStepIndex, setCurrentStepIndex] = useState(currentStepIndex);
-
-  const step = steps[currentStepIndex];
-
-  // when current step changes, scroll step element into view
-  useEffect(
-    () => {
-      const scrollTop =
-        window.pageYOffset || document.documentElement.scrollTop;
-
-      // when tooltip is on top of the mask, scroll into view aligning to bottom
-      if (step.position && step.position.indexOf("top") === 0) {
-        // scroll element into view aligning it to bottom
-        // only if it's below the bottom border of the screen
-        // or it's in the top half of the screen
-        if (
-          mask.bottom > scrollTop + window.innerHeight ||
-          mask.top < SCROLL_MARGIN + scrollTop
-        ) {
-          animateScrollTo(
-            // we scroll relative to top of the screen, but we want to stick to bottom
-            // so we need to substract the window height
-            mask.bottom - window.innerHeight,
-            -SCROLL_OFFSET_BOTTOM,
-          );
-        }
-      }
-      // when tooltip is on the bottom of the mask, scroll aligning to top
-      if (step.position && step.position.indexOf("bottom") === 0) {
-        // scroll element into view, but only if it's higher on page than top offset
-        // or it is in the bottom half of screen
-        if (
-          mask.top < SCROLL_OFFSET_TOP + scrollTop ||
-          mask.bottom > SCROLL_MARGIN + scrollTop
-        ) {
-          animateScrollTo(mask.top, SCROLL_OFFSET_TOP);
-        }
-      }
-    },
-    [currentStepIndex], // refresh effect on step changes, to scroll to correct step
-  );
-
-  const overlayEl = useRef(null);
-
-  const mask = getMaskFromElements(step.elements || []);
-
-  // rerender on resize or scroll
-  // it is an unusual use of useState to force rerender, but on resize or scroll
-  // the state of component doesn't change, it's the position of elements
-  // in DOM that changes and component needs to rerender to adapt
-  const [, forceUpdate] = useState<object>();
-  const rerender = () => forceUpdate({});
-
-  const [isResizing, setIsResizing] = useState(false);
-
-  // rerender after scroll (to adjust to fixed elements that might have moved)
-  useEffect(
-    () => {
-      const afterScroll = debounce(() => rerender(), 200);
-      window.addEventListener("scroll", afterScroll);
-
-      return () => {
-        afterScroll.clear();
-        window.removeEventListener("scroll", afterScroll);
-      };
-    },
-    [], // don't refresh the effect on every render
-  );
-
-  // rerender after resize (to adjust to new positions of elements)
-  // and hide mask during resize to avoid misalign of mask and tooltip
-  useEffect(
-    () => {
-      const onResize = () => {
-        setIsResizing(true);
-      };
-      const afterResize = debounce(() => {
-        setIsResizing(false);
-        rerender();
-      }, 1000);
-
-      window.addEventListener("resize", onResize);
-      window.addEventListener("resize", afterResize);
-
-      return () => {
-        afterResize.clear();
-        window.removeEventListener("resize", onResize);
-        window.removeEventListener("resize", afterResize);
-      };
-    },
-    [], // don't refresh the effect on every render
-  );
-
-  const onNextClick = () =>
-    setCurrentStepIndex((currentStepIndex + 1) % steps.length);
-  const onPrevClick = () =>
-    setCurrentStepIndex((currentStepIndex - 1) % steps.length);
-
-  const onFinishClick = () => {
-    tourFinished(step.id);
-    hideTour();
-  };
-
-  const onSkipClick = () => {
-    tourSkipped(step.id);
-    hideTour();
-  };
-
-  // close tour on ESC
-  // treat as 'finished' on last step and as 'skipped' on any other step
-  useEffect(
-    () => {
-      const escClick = (event: { keyCode: number }) => {
-        if (event.keyCode === 27) {
-          if (currentStepIndex === steps.length - 1) {
-            onFinishClick();
-          } else {
-            onSkipClick();
-          }
-        }
-      };
-      window.addEventListener("keyup", escClick);
-
-      return () => {
-        window.removeEventListener("keyup", escClick);
-      };
-    },
-    [currentStepIndex], // refresh effect when step changes, to pass correct step id into skip metrics
-  );
-
-  return (
-    <div className="p-tour-overlay" ref={overlayEl}>
-      <TourOverlayMask mask={isResizing ? null : mask} />
-      <TourStepCard
-        steps={steps}
-        currentStepIndex={currentStepIndex}
-        mask={mask}
-        onFinishClick={onFinishClick}
-        onSkipClick={onSkipClick}
-        onNextClick={onNextClick}
-        onPrevClick={onPrevClick}
-      />
-    </div>
-  );
-}
diff --git a/static/js/publisher/tour/tourOverlayMask.tsx b/static/js/publisher/tour/tourOverlayMask.tsx
deleted file mode 100644
index 436db46359..0000000000
--- a/static/js/publisher/tour/tourOverlayMask.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ReactNode } from "react";
-
-type Props = {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-};
-
-const getClipPathFromMask = ({ top, bottom, left, right }: Props): string => {
-  const mask = [
-    `${left}px ${top}px`,
-    `${left}px ${bottom}px`,
-    `${right}px ${bottom}px`,
-    `${right}px ${top}px`,
-    `${left}px ${top}px`,
-  ].join(",");
-
-  return `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${mask})`;
-};
-
-export default function TourOverlayMask({
-  mask,
-}: {
-  mask: Props | null;
-}): ReactNode {
-  let maskStyle = {};
-
-  if (mask) {
-    const clipPath = getClipPathFromMask(mask);
-    maskStyle = {
-      clipPath,
-      WebkitClipPath: clipPath,
-    };
-  }
-
-  return <div className="p-tour-overlay__mask" style={maskStyle} />;
-}
diff --git a/static/js/publisher/tour/tourStepCard.test.tsx b/static/js/publisher/tour/tourStepCard.test.tsx
deleted file mode 100644
index 43c47f55b0..0000000000
--- a/static/js/publisher/tour/tourStepCard.test.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { render, fireEvent, cleanup } from "@testing-library/react";
-
-import TourStepCard from "./tourStepCard";
-
-// Helper function to be used in testing library queries,
-// to query elements by text content even if the text is
-// contained in child elements
-//
-// For example to query for a button with icon:
-// <button><i>Text</i></button>
-//
-// getByText(textContentEquals("Text"), { selector: "button" })
-const textContentEquals = (textContent: string) => {
-  return (_: unknown, node: HTMLElement): boolean =>
-    node.textContent === textContent;
-};
-
-describe("TourStepCard", () => {
-  const dummyStep = {
-    id: "test-step",
-    position: "bottom-left",
-    title: "Test step title",
-    content: "Test step content",
-    elements: [],
-  };
-
-  const dummyMask = {
-    top: 10,
-    bottom: 20,
-    left: 30,
-    right: 40,
-  };
-
-  let onFinishClick: () => void;
-  let onSkipClick: () => void;
-  let onNextClick: () => void;
-  let onPrevClick: () => void;
-
-  beforeEach(() => {
-    onFinishClick = jest.fn();
-    onSkipClick = jest.fn();
-    onNextClick = jest.fn();
-    onPrevClick = jest.fn();
-  });
-
-  afterEach(cleanup);
-
-  const renderTourStepCard = (steps = [dummyStep], currentStepIndex = 0) => {
-    return render(
-      <TourStepCard
-        mask={dummyMask}
-        steps={steps}
-        currentStepIndex={currentStepIndex}
-        onFinishClick={onFinishClick}
-        onSkipClick={onSkipClick}
-        onNextClick={onNextClick}
-        onPrevClick={onPrevClick}
-      />,
-    );
-  };
-
-  it("should render tour step", () => {
-    const { getByText } = renderTourStepCard();
-
-    expect(getByText(dummyStep.title)).toBeDefined();
-    expect(getByText(dummyStep.content)).toBeDefined();
-  });
-
-  describe("when showing first step", () => {
-    const steps = [
-      {
-        ...dummyStep,
-        id: "test-step-first",
-        position: "bottom-right",
-      },
-      dummyStep,
-    ];
-
-    it("should not show Finish button", () => {
-      const { queryByText } = renderTourStepCard(steps);
-
-      expect(queryByText("Finish tour")).toBeNull();
-    });
-
-    it("should show disabled Previous button", () => {
-      const { getByText } = renderTourStepCard(steps);
-      // @ts-expect-error
-      const prevButton = getByText(textContentEquals("Previous step"), {
-        selector: "button",
-      });
-
-      // @ts-expect-error
-      expect(prevButton.disabled).toBe(true);
-    });
-
-    it("clicking on Skip link should trigger skip callback", () => {
-      const { getByText } = renderTourStepCard(steps);
-
-      fireEvent.click(getByText("Skip tour"));
-
-      expect(onSkipClick).toHaveBeenCalled();
-    });
-
-    it("clicking on Next button should trigger next callback", () => {
-      const { getByText } = renderTourStepCard(steps);
-
-      fireEvent.click(getByText("Next step"));
-
-      expect(onNextClick).toHaveBeenCalled();
-    });
-  });
-
-  describe("when showing middle step", () => {
-    const steps = [
-      dummyStep,
-      {
-        ...dummyStep,
-        id: "test-step-middle",
-        position: "top-left",
-      },
-      {
-        ...dummyStep,
-        id: "test-step-last",
-      },
-    ];
-
-    it("should not show Finish button", () => {
-      const { queryByText } = renderTourStepCard(steps, 1);
-
-      expect(queryByText("Finish tour")).toBeNull();
-    });
-
-    it("clicking on Skip link should trigger skip callback", () => {
-      const { getByText } = renderTourStepCard(steps, 1);
-
-      fireEvent.click(getByText("Skip tour"));
-
-      expect(onSkipClick).toHaveBeenCalled();
-    });
-
-    it("clicking on Previous button should trigger previous callback", () => {
-      const { getByText } = renderTourStepCard(steps, 1);
-
-      fireEvent.click(getByText("Previous step"));
-
-      expect(onPrevClick).toHaveBeenCalled();
-    });
-
-    it("clicking on Next button should trigger next callback", () => {
-      const { getByText } = renderTourStepCard(steps);
-
-      fireEvent.click(getByText("Next step"));
-
-      expect(onNextClick).toHaveBeenCalled();
-    });
-  });
-
-  describe("when showing last step", () => {
-    const steps = [
-      dummyStep,
-      {
-        id: "test-step-last",
-        position: "top-right",
-        title: "",
-        elements: [],
-        content: "",
-      },
-    ];
-
-    it("should not show skip tour link", () => {
-      const { queryByText } = renderTourStepCard(steps, 1);
-
-      expect(queryByText("Skip tour")).toBeNull();
-    });
-
-    it("should not show Next button", () => {
-      const { queryByText } = renderTourStepCard(steps, 1);
-
-      expect(queryByText("Next step")).toBeNull();
-    });
-
-    it("clicking on Finish button should trigger finish callback", () => {
-      const { getByText } = renderTourStepCard(steps, 1);
-
-      fireEvent.click(getByText("Finish tour"));
-
-      expect(onFinishClick).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/static/js/publisher/tour/tourStepCard.tsx b/static/js/publisher/tour/tourStepCard.tsx
deleted file mode 100644
index 7c8cb9c188..0000000000
--- a/static/js/publisher/tour/tourStepCard.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { ReactNode } from "react";
-
-import type { TourStep } from "../../publisher-pages/types";
-
-type Props = {
-  steps: TourStep[];
-  currentStepIndex: number;
-  mask: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-  onFinishClick: () => void;
-  onSkipClick: () => void;
-  onNextClick: () => void;
-  onPrevClick: () => void;
-};
-
-export default function TourStepCard({
-  steps,
-  currentStepIndex,
-  mask,
-  onFinishClick,
-  onSkipClick,
-  onNextClick,
-  onPrevClick,
-}: Props): ReactNode {
-  const step = steps[currentStepIndex];
-
-  let tooltipStyle = {};
-
-  // for positioning relative to right/bottom of the screen
-  const overlayHeight = document.body.clientHeight;
-  const overlayWidth = document.body.clientWidth;
-
-  switch (step.position) {
-    // TODO: support for all available tooltip positions
-    case "bottom-left":
-      tooltipStyle = {
-        top: mask.bottom,
-        left: mask.left,
-      };
-      break;
-    case "bottom-right":
-      tooltipStyle = {
-        top: mask.bottom,
-        right: overlayWidth - mask.right,
-      };
-      break;
-    case "top-left":
-      tooltipStyle = {
-        bottom: overlayHeight - mask.top,
-        left: mask.left,
-      };
-      break;
-    case "top-right":
-      tooltipStyle = {
-        bottom: overlayHeight - mask.top,
-        right: overlayWidth - mask.right,
-      };
-      break;
-  }
-
-  // step content is controlled by us and passed as data to component directly
-  // so it should be safe to set it via dangerouslySetInnerHTML
-  const content = { __html: step.content };
-
-  const isLastStep = currentStepIndex === steps.length - 1;
-
-  return (
-    <div
-      className={`p-card--tour is-tooltip--${step.position}`}
-      style={tooltipStyle}
-    >
-      <h4>{step.title}</h4>
-      <div
-        className="p-card--tour__content"
-        dangerouslySetInnerHTML={content}
-      />
-
-      <p className="p-tour-controls">
-        {!isLastStep && (
-          <span>
-            Done? <a onClick={onSkipClick}>Skip tour</a>.
-          </span>
-        )}
-
-        <small className="p-tour-controls__step">
-          {currentStepIndex + 1}/{steps.length}
-        </small>
-        <span className="p-tour-controls__buttons">
-          <button
-            disabled={currentStepIndex === 0}
-            onClick={onPrevClick}
-            className="p-button has-icon u-no-margin--bottom"
-          >
-            <i className="p-icon--chevron-up is-prev">Previous step</i>
-          </button>
-          <button
-            onClick={isLastStep ? onFinishClick : onNextClick}
-            className="p-button--positive has-icon u-no-margin--bottom u-no-margin--right"
-          >
-            {isLastStep ? (
-              "Finish tour"
-            ) : (
-              <i className="p-icon--chevron-up is-light is-next">Next step</i>
-            )}
-          </button>
-        </span>
-      </p>
-    </div>
-  );
-}
diff --git a/static/js/publisher/types/releaseTypes.d.ts b/static/js/publisher/types/releaseTypes.d.ts
deleted file mode 100644
index 79b29998d2..0000000000
--- a/static/js/publisher/types/releaseTypes.d.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-export interface Progressive {
-  "current-percentage": number | null;
-  paused: boolean | null;
-  percentage: number | null;
-}
-
-export interface Release {
-  architecture: string;
-  branch: string | null;
-  channel: string;
-  "expiration-date": string | null;
-  progressive: Progressive;
-  revision: number | null;
-  risk: string;
-  track: string;
-  when: string;
-}
-
-export interface Revision {
-  architectures: string[];
-  attributes: { [key: string]: string };
-  base: string;
-  build_url: string | null;
-  confinement: string;
-  created_at: string;
-  epoch: {
-    read: number[];
-    write: number[];
-  };
-  grade: string;
-  revision: number;
-  sha3_384: string;
-  size: number;
-  status: string;
-  version: string;
-}
-
-export interface Channel {
-  branch: string | null;
-  fallback: string | null;
-  name: string;
-  risk: string;
-  track: string;
-}
-
-export interface Track {
-  "creation-date": string | null;
-  name: string;
-  status: string;
-  "version-pattern": string | null;
-}
-
-export interface Snap {
-  channels: Channel[];
-  "default-track": string | null;
-  id: string;
-  name: string;
-  private: boolean;
-  publisher: {
-    "display-name": string;
-    id: string;
-    username: string;
-  };
-  title: string;
-  tracks: Track[];
-}
-
-export interface ReleasesData {
-  _links: {
-    self: string;
-  };
-  releases: Release[];
-  revisions: Revision[];
-  snap: Snap;
-}
-
-export interface ChannelMap {
-  architecture: string;
-  channel: string;
-  "expiration-date": string | null;
-  progressive: Progressive;
-  revision: number | null;
-  when: string;
-}
-
-export interface Options {
-  defaultTrack: string;
-  csrfToken: string;
-  flags: {
-    isProgressiveReleaseEnabled: boolean;
-  };
-}
diff --git a/static/sass/styles-embedded.scss b/static/sass/styles-embedded.scss
index b6caa0c162..991bc2fae8 100644
--- a/static/sass/styles-embedded.scss
+++ b/static/sass/styles-embedded.scss
@@ -58,7 +58,9 @@ body {
 // responsive styles for summary + badge
 @media screen and (min-width: $breakpoint-x-small) {
   .p-embedded-description {
+    align-items: center;
     display: flex;
+    justify-content: space-between;
   }
 
   .p-embedded-description__summary {
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 5ede466624..4dd7bac0c6 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -572,3 +572,18 @@ dl {
 .publisher-app > .p-panel > .p-panel__content {
   overflow: visible;
 }
+
+.releases-track-aside {
+  height: 100%;
+  position: fixed !important;
+  right: 0;
+  top: 0;
+}
+
+@media (max-width: $breakpoint-small) {
+  .releases-track-aside {
+    .is-flex-column {
+      min-height: calc(100% - 56px);
+    }
+  }
+}
diff --git a/templates/publisher/account-snaps.html b/templates/publisher/account-snaps.html
index 306b8df186..f4b1a77dd6 100644
--- a/templates/publisher/account-snaps.html
+++ b/templates/publisher/account-snaps.html
@@ -265,10 +265,6 @@ <h2 class="p-modal__title"><i class="p-icon--warning modal-header-icon"></i> Unr
 {% endif %}
 {% endblock %}
 
-{% block scripts_includes %}
-<script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
 {% block scripts %}
 {% if snaps %}
 <script>
diff --git a/templates/publisher/publicise/store_buttons.html b/templates/publisher/publicise/store_buttons.html
index 9f0be20aae..26a6e8d973 100644
--- a/templates/publisher/publicise/store_buttons.html
+++ b/templates/publisher/publicise/store_buttons.html
@@ -133,10 +133,6 @@ <h4>Promote your snap using Snap Store badges</h4>
   </div>
 {% endblock %}
 
-{% block scripts_includes %}
-  <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-{% endblock %}
-
 {% block scripts %}
   <script>
     window.addEventListener("DOMContentLoaded", function() {
diff --git a/templates/store/snap-details.html b/templates/store/snap-details.html
index 10f90e1496..d240d43399 100644
--- a/templates/store/snap-details.html
+++ b/templates/store/snap-details.html
@@ -309,9 +309,6 @@ <h5 class="p-notification__title">Error</h5>
 
 {% block scripts_includes %}
   <script src="{{ static_url('js/dist/store-details.js') }}" defer></script>
-  {% if is_preview %}
-    <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
-  {% endif %}
 {% endblock %}
 
 {% block scripts %}
@@ -374,7 +371,15 @@ <h5 class="p-notification__title">Error</h5>
         {% endif %}
 
         {% if is_preview %}
-          snapcraft.publisher.preview({{ package_name|tojson }});
+          const editButton = document.querySelector('.js-edit');
+          if (editButton) {
+            editButton.addEventListener("click", (e) => {
+              if (window.opener) {
+                e.preventDefault();
+                window.close();
+              }
+            });
+          }
         {% endif %}
       });
     });
diff --git a/templates/store/snap-details/_details.html b/templates/store/snap-details/_details.html
index aa067e7171..2872db129a 100644
--- a/templates/store/snap-details/_details.html
+++ b/templates/store/snap-details/_details.html
@@ -24,9 +24,11 @@ <h5 class="p-muted-heading">Last updated</h5>
     <h5 class="p-muted-heading">Websites</h5>
     <ul class="p-list">
       {% for link in links["website"] %}
+        {% if format_link(link) != None %}
         <li {% if loop.index == 1 %}data-js="primary-domain"{% endif %}>
           <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
         </li>
+        {% endif %}
       {% endfor %}
     </ul>  
     <hr>
@@ -36,9 +38,11 @@ <h5 class="p-muted-heading">Websites</h5>
     <h5 class="p-muted-heading">Contact</h5>
     <ul class="p-list">
       {% for link in links["contact"] %}
+        {% if format_link(link) != None %}
         <li>
           <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
         </li>
+        {% endif %}
       {% endfor %}
     </ul>  
     <hr>
@@ -48,9 +52,11 @@ <h5 class="p-muted-heading">Contact</h5>
     <h5 class="p-muted-heading">Donations</h5>
     <ul class="p-list">
       {% for link in links["donations"] %}
+        {% if format_link(link) != None %}
         <li>
           <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
         </li>
+        {% endif %}
       {% endfor %}
     </ul>  
     <hr>
@@ -60,9 +66,11 @@ <h5 class="p-muted-heading">Donations</h5>
     <h5 class="p-muted-heading">Source code</h5>
     <ul class="p-list">
       {% for link in links["source"] %}
+        {% if format_link(link) != None %}
         <li>
           <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
         </li>
+        {% endif %}
       {% endfor %}
     </ul>  
     <hr>
@@ -72,9 +80,11 @@ <h5 class="p-muted-heading">Source code</h5>
     <h5 class="p-muted-heading">Report a bug</h5>
     <ul class="p-list">
       {% for link in links["issues"] %}
+        {% if format_link(link) != None %}
         <li>
           <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
         </li>
+        {% endif %}
       {% endfor %}
     </ul>  
     <hr>
diff --git a/templates/store/snap-embedded-card.html b/templates/store/snap-embedded-card.html
index 912a58187b..7221b8ec81 100644
--- a/templates/store/snap-embedded-card.html
+++ b/templates/store/snap-embedded-card.html
@@ -56,8 +56,10 @@ <h1 class="p-heading--2 p-snap-heading__name" data-live="title">{{ snap_title }}
         <h4 class="p-embedded-description__summary">{{ summary }}</h4>
       {% endif %}
       {% if button %}
-      <img alt="Get it from the Snap Store"
+      <div>
+        <img alt="Get it from the Snap Store"
         src="https://snapcraft.io/en/{% if button == 'white' %}light{% else %}dark{% endif %}/install.svg" />
+      </div>
       {% endif %}
     </div>
   </div>
diff --git a/webapp/markdown.py b/webapp/markdown.py
index 3e96e371c0..723cdf1cbd 100644
--- a/webapp/markdown.py
+++ b/webapp/markdown.py
@@ -1,4 +1,5 @@
 import re
+import html
 
 from mistune import HTMLRenderer, Markdown
 from mistune.block_parser import (
@@ -59,4 +60,5 @@ class SnapcraftInlineParser(InlineParser):
 
 
 def parse_markdown_description(content):
-    return parser(content)
+    unescaped_content = html.unescape(content)
+    return parser(unescaped_content)
diff --git a/webapp/publisher/snaps/publicise_views.py b/webapp/publisher/snaps/publicise_views.py
index 8f1150090b..ac28a5a5b8 100644
--- a/webapp/publisher/snaps/publicise_views.py
+++ b/webapp/publisher/snaps/publicise_views.py
@@ -29,7 +29,6 @@ def get_publicise_data(snap_name):
 
     is_released = len(snap_details["channel_maps_list"]) > 0
 
-    print(snap_details)
     context = {
         "is_released": is_released,
         "trending": trending,
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
index c3e41a4f73..8908f6310f 100644
--- a/webpack.config.entry.js
+++ b/webpack.config.entry.js
@@ -5,10 +5,6 @@ module.exports = {
   about: "./static/js/public/about/index.ts",
   "featured-snaps": "./static/js/public/featured-snaps.ts",
   modal: "./static/js/public/modal.ts",
-  // TODO:
-  // publisher bundle is big (webpack warning) - try to chunk it down
-  // https://github.com/canonical-web-and-design/snapcraft.io/issues/1246
-  publisher: "./static/js/publisher/publisher.ts",
   homepage: "./static/js/public/homepage.ts",
   blog: "./static/js/public/blog.ts",
   "store-details": "./static/js/public/store-details.ts",
diff --git a/webpack.config.rules.js b/webpack.config.rules.js
index b7e821a4ae..b7501966bd 100644
--- a/webpack.config.rules.js
+++ b/webpack.config.rules.js
@@ -25,14 +25,6 @@ module.exports = [
     test: require.resolve(__dirname + "/static/js/base/base.ts"),
     use: ["expose-loader?exposes=snapcraft.base", "babel-loader"],
   },
-  {
-    test: require.resolve(__dirname + "/static/js/publisher/publisher.ts"),
-    use: ["expose-loader?exposes=snapcraft.publisher", "babel-loader"],
-  },
-  {
-    test: require.resolve(__dirname + "/static/js/public/about/index.ts"),
-    use: ["expose-loader?exposes=snapcraft.about", "babel-loader"],
-  },
   {
     test: require.resolve(__dirname + "/static/js/public/featured-snaps.ts"),
     use: [