Merge branch 'main' into charmed-snapcraft-io

Author: edisile

package.json

@@ -32,8 +32,8 @@
     "@babel/preset-typescript": "7.26.0",
     "@canonical/cookie-policy": "3.6.5",
     "@canonical/global-nav": "3.6.4",
-    "@canonical/react-components": "2.2.4",
-    "@canonical/store-components": "0.53.0",
+    "@canonical/react-components": "2.7.9",
+    "@canonical/store-components": "0.54.2",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -70,6 +70,7 @@
     "downshift": "9.0.8",
     "expose-loader": "5.0.0",
     "fast-average-color": "9.4.0",
+    "jotai": "2.12.5",
     "markdown-it": "14.1.0",
     "nanoid": "5.0.9",
     "polylabel": "2.0.1",
@@ -84,12 +85,11 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.54.2",
-    "react-joyride": "2.9.3",
+    "react-joyride": "3.0.0-7",
     "react-query": "3.39.3",
     "react-redux": "8.1.3",
     "react-router-dom": "7.1.1",
     "react-sortable-hoc": "2.0.0",
-    "recoil": "0.7.7",
     "redux": "4.2.1",
     "redux-mock-store": "1.5.5",
     "redux-thunk": "2.4.2",
@@ -100,7 +100,7 @@
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
     "uuid": "11.0.4",
-    "vanilla-framework": "4.23.2",
+    "vanilla-framework": "4.26.0",
     "watch-cli": "0.2.3",
     "webpack": "5.97.1",
     "webpack-cli": "6.0.1",

redirects.yaml

@@ -136,6 +136,8 @@ docs/snapcraft-quickstart/?: https://documentation.ubuntu.com/snapcraft/stable/t
 docs/snapcraft-checklist/?: https://documentation.ubuntu.com/snapcraft/stable/tutorials/craft-a-snap/
 docs/adding-parts/?: https://documentation.ubuntu.com/snapcraft/stable/tutorials/craft-a-snap/
 docs/defining-a-command/?: https://documentation.ubuntu.com/snapcraft/stable/tutorials/craft-a-snap/
+docs/snapcraft-tutorials/?: https://documentation.ubuntu.com/snapcraft/stable/tutorials/
+docs/snapcraft-reference/?: https://documentation.ubuntu.com/snapcraft/stable/reference/
 
 # Old URL redirects
 docs/build-snaps: /docs/snap-format

requirements.txt

@@ -1,11 +1,11 @@
 # App dependencies
-canonicalwebteam.flask-base==2.5.0
+canonicalwebteam.flask-base==2.6.0
 canonicalwebteam.candid==0.9.0
-canonicalwebteam.discourse==6.1.1
-canonicalwebteam.blog==6.4.4
-canonicalwebteam.search==2.1.1
-canonicalwebteam.image-template==1.5.0
-canonicalwebteam.store-api==6.4.0
+canonicalwebteam.discourse==6.3.0
+canonicalwebteam.blog==6.4.6
+canonicalwebteam.search==2.1.2
+canonicalwebteam.image-template==1.6.0
+canonicalwebteam.store-api==6.7.0
 canonicalwebteam.launchpad==0.9.0
 django-openid-auth==0.17
 Flask-OpenID==1.3.0

static/js/global.d.ts

@@ -24,12 +24,8 @@ declare interface Window {
       setVolume: (level: number) => void;
     };
   };
-  DNS_VERIFICATION_TOKEN: string;
   SENTRY_DSN: string;
   CSRF_TOKEN: string;
-  SNAP_LISTING_DATA: {
-    DNS_VERIFICATION_TOKEN: string;
-  };
   API_URL: string;
 }
 

static/js/publisher/brand-store.tsx

@@ -3,7 +3,8 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/browser";
 import BrandStoreRoot from "./routes/brand-store-root";
-import { RecoilRoot } from "recoil";
+import { Provider as JotaiProvider } from "jotai";
+
 Sentry.init({
   dsn: window.SENTRY_DSN,
   integrations: [new BrowserTracing()],
@@ -22,9 +23,9 @@ const queryClient = new QueryClient({
 });
 
 root.render(
-  <QueryClientProvider client={queryClient}>
-    <RecoilRoot>
+  <JotaiProvider>
+    <QueryClientProvider client={queryClient}>
       <BrandStoreRoot />
-    </RecoilRoot>
-  </QueryClientProvider>,
+    </QueryClientProvider>
+  </JotaiProvider>,
 );

static/js/publisher/components/AppPagination/AppPagination.tsx

@@ -1,18 +1,18 @@
 import { useSearchParams } from "react-router-dom";
-import { useSetRecoilState } from "recoil";
+import { useSetAtom } from "jotai";
 import { Button, Icon } from "@canonical/react-components";
 
-import type { RecoilState } from "recoil";
+import type { PrimitiveAtom } from "jotai";
 
 type Props = {
-  state: RecoilState<string>;
+  state: PrimitiveAtom<string>;
   label: string;
   placeholder: string;
 };
 
 function Filter({ state, label, placeholder }: Props): React.JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
-  const setFilter = useSetRecoilState(state);
+  const setFilter = useSetAtom(state);
 
   return (
     <div className="p-search-box">

static/js/publisher/components/AppPagination/index.ts

@@ -1,28 +1,19 @@
-import { useEffect } from "react";
 import { BrowserRouter } from "react-router-dom";
-import { RecoilRoot, RecoilValue, useRecoilValue, atom } from "recoil";
+import { atom as jotaiAtom } from "jotai";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
 import Filter from "../Filter";
 
-const mockFilterState = atom({
-  key: "mockFilter",
-  default: "" as string,
-});
+import { JotaiTestProvider } from "../../../test-utils";
+
+const mockFilterState = jotaiAtom("" as string);
 
 const searchInputLabel = "Test filter label";
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  },
-});
+const queryClient = new QueryClient();
 
 const mockFilterQuery = { filter: "" };
 
@@ -31,36 +22,21 @@ jest.mock("react-router-dom", () => ({
   useSearchParams: () => [new URLSearchParams(mockFilterQuery), jest.fn()],
 }));
 
-export const RecoilObserver = ({
-  node,
-  onChange,
-}: {
-  node: RecoilValue<string>;
-  onChange: (value: string) => void;
-}) => {
-  const value = useRecoilValue(node);
-  useEffect(() => onChange(value), [onChange, value]);
-  return null;
-};
-
-const onChange = jest.fn();
-
 const renderComponent = (filterQuery?: string) => {
   mockFilterQuery.filter = filterQuery || "";
 
   return render(
-    <RecoilRoot>
+    <QueryClientProvider client={queryClient}>
       <BrowserRouter>
-        <QueryClientProvider client={queryClient}>
-          <RecoilObserver node={mockFilterState} onChange={onChange} />
+        <JotaiTestProvider initialValues={[[mockFilterState, ""]]}>
           <Filter
             state={mockFilterState}
             label="Test filter label"
             placeholder="Test filter placeholder"
           />
-        </QueryClientProvider>
+        </JotaiTestProvider>
       </BrowserRouter>
-    </RecoilRoot>,
+    </QueryClientProvider>,
   );
 };
 
@@ -80,21 +56,10 @@ describe("Filter", () => {
     expect(screen.getByLabelText(searchInputLabel)).toHaveValue("policy-name");
   });
 
-  it("calls `setFilter` when the search input changes", () => {
-    renderComponent();
-    fireEvent.change(screen.getByLabelText(searchInputLabel), {
-      target: {
-        value: "policy-name",
-      },
-    });
-    expect(onChange).toHaveBeenCalledWith("policy-name");
-  });
-
   it("clears the filter when the reset button is clicked", async () => {
     const user = userEvent.setup();
     renderComponent();
     await user.click(screen.getByRole("button", { name: "Clear filter" }));
-    expect(onChange).toHaveBeenCalledWith("");
     expect(screen.getByLabelText(searchInputLabel)).toHaveValue("");
   });
 });

static/js/publisher/components/Filter/Filter.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useAtom, useAtomValue } from "jotai";
 import { useParams, NavLink } from "react-router-dom";
 import { Icon } from "@canonical/react-components";
 
@@ -17,15 +17,15 @@ function Navigation({
 }: {
   sectionName: string | null;
 }): React.JSX.Element {
-  const brandStoresList = useRecoilValue(brandStoresState);
+  const brandStoresList = useAtomValue(brandStoresState);
   const { id } = useParams();
   const { data: brand } = useBrand(id);
   const { data: publisherData } = usePublisher();
   const { data: validationSetsData } = useValidationSets();
   const [pinSideNavigation, setPinSideNavigation] = useState<boolean>(false);
   const [collapseNavigation, setCollapseNavigation] = useState<boolean>(false);
-  const [publisher, setPublisher] = useRecoilState(publisherState);
-  const [brandId, setBrandId] = useRecoilState(brandIdState);
+  const [publisher, setPublisher] = useAtom(publisherState);
+  const [brandId, setBrandId] = useAtom(brandIdState);
 
   const currentStore = brandStoresList.find((store) => store.id === id);