feat: Publisher react app

.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,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
   ],
 };

jest.config.js

@@ -12,4 +12,7 @@ module.exports = {
   moduleNameMapper: {
     "\\.(scss|sass|css)$": "identity-obj-proxy",
   },
+  globals: {
+    fetch: global.fetch,
+  },
 };

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",

static/js/global.d.ts

@@ -16,4 +16,9 @@ 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_LISTING_DATA: {
+    DNS_VERIFICATION_TOKEN: string;
+  };
 }

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");

static/js/publisher/market/lightbox.ts → 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) {

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";

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"),
               },
             ],
           },

static/js/publisher/shared/SaveAndPreview/SaveAndPreview.test.tsx → static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.test.tsx

@@ -32,10 +32,7 @@ test("the 'Revert' button is disabled by default", () => {
 
 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",
-  );
+  expect(screen.getByRole("button", { name: "Revert" })).not.toBeDisabled();
 });
 
 test("the 'Save' button is disabled by default", () => {

static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx → static/js/publisher-pages/components/SaveAndPreview/SaveAndPreview.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { Row, Col, Button } from "@canonical/react-components";
 
 import debounce from "../../../libs/debounce";
 
 type Props = {
-  snapName: string | undefined;
+  snapName: string;
   isDirty: boolean;
-  reset: Function;
+  reset: () => void;
   isSaving: boolean;
   isValid: boolean;
   showPreview?: boolean;
@@ -20,20 +20,26 @@
   showPreview,
 }: Props) {
   const stickyBar = useRef<HTMLDivElement>(null);
+  const mainPanel = document.querySelector(".l-main") as HTMLElement;
+
   const handleScroll = () => {
     stickyBar?.current?.classList.toggle(
       "sticky-shadow",
       stickyBar?.current?.getBoundingClientRect()?.top === 0,
     );
   };
 
-  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">

static/js/publisher/shared/SaveStateNotifications/SaveStateNotifications.tsx → 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({

static/js/publisher/shared/SaveStateNotifications/__tests__/SaveStateNotifications.test.tsx → 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,6 +18,7 @@ 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()}
     />,
   );

static/js/publisher/shared/SearchAutocomplete/SearchAutocomplete.tsx → static/js/publisher-pages/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -1,6 +1,14 @@
 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";
+import { Button } from "@canonical/react-components";
 
 type DataItem = {
   key: string;
@@ -11,10 +19,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;
 };
 
@@ -79,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,
@@ -94,8 +109,10 @@ function SearchAutocomplete({
                   });
                 }}
               >
-                Remove suggestion
-              </i>
+                <i className="p-icon--close p-multiselect__item-remove">
+                  Remove suggestion
+                </i>
+              </Button>
             </span>
           ))}
 
@@ -119,9 +136,9 @@ function SearchAutocomplete({
                 )
                 .map((item, index) => (
                   <li
+                    key={item.key}
                     className="p-multiselect__option"
                     {...getItemProps({
-                      key: item.key,
                       index,
                       item,
                       style: {

static/js/publisher-pages/components/SectionNav/SectionNav.tsx

@@ -0,0 +1,55 @@
+import { Link } from "react-router-dom";
+import { Tabs } from "@canonical/react-components";
+
+type Props = {
+  activeTab: string;
+  snapName: string | undefined;
+};
+
+function SectionNav({ activeTab, snapName }: Props) {
+  return (
+    <Tabs
+      listClassName="u-no-margin--bottom"
+      links={[
+        {
+          label: "Listing",
+          active: activeTab === "listing" || !activeTab,
+          to: `/${snapName}/listing`,
+          component: Link,
+        },
+        {
+          label: "Builds",
+          active: activeTab === "builds",
+          to: `/${snapName}/builds`,
+          component: Link,
+        },
+        {
+          label: "Releases",
+          active: activeTab === "releases",
+          to: `/${snapName}/releases`,
+          component: Link,
+        },
+        {
+          label: "Metrics",
+          active: activeTab === "metrics",
+          to: `/${snapName}/metrics`,
+          component: Link,
+        },
+        {
+          label: "Publicise",
+          active: activeTab === "publicise",
+          to: `/${snapName}/publicise`,
+          component: Link,
+        },
+        {
+          label: "Settings",
+          active: activeTab === "settings",
+          to: `/${snapName}/settings`,
+          component: Link,
+        },
+      ]}
+    />
+  );
+}
+
+export default SectionNav;

static/js/publisher/shared/PageHeader/PageHeader.test.tsx → static/js/publisher-pages/components/SectionNav/SectionNavTest.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import PageHeader from "./PageHeader";
+import SectionNav from "./SectionNav";
 
 const snapName = "test-snap-name";
 
@@ -11,49 +11,49 @@ const props = {
 };
 
 test("the page displays the correct name for the snap", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
     "test-snap-name",
   );
 });
 
 test("the 'Listing' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Listing" }).getAttribute("href"),
   ).toBe(`/${snapName}/listing`);
 });
 
 test("the 'Builds' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Builds" }).getAttribute("href"),
   ).toBe(`/${snapName}/builds`);
 });
 
 test("the 'Releases' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Releases" }).getAttribute("href"),
   ).toBe(`/${snapName}/releases`);
 });
 
 test("the 'Metrics' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Metrics" }).getAttribute("href"),
   ).toBe(`/${snapName}/metrics`);
 });
 
 test("the 'Publicise' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Publicise" }).getAttribute("href"),
   ).toBe(`/${snapName}/publicise`);
 });
 
 test("the 'Settings' tab has the correct path", () => {
-  render(<PageHeader {...props} />);
+  render(<SectionNav {...props} />);
   expect(
     screen.getByRole("link", { name: "Settings" }).getAttribute("href"),
   ).toBe(`/${snapName}/settings`);

static/js/publisher-pages/components/SectionNav/index.ts

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