chore(deps): update all dependencies (major)

Dockerfile

@@ -11,7 +11,7 @@ RUN --mount=type=cache,target=/root/.cache/pip pip3 install --user --requirement
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:20 AS yarn-dependencies
+FROM node:21 AS yarn-dependencies
 WORKDIR /srv
 ADD package.json .
 ADD yarn.lock .

package.json

@@ -35,13 +35,13 @@
     "@canonical/react-components": "0.50.2",
     "@canonical/store-components": "0.48.0",
     "@dnd-kit/core": "6.1.0",
-    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@reduxjs/toolkit": "1.9.7",
     "@sentry/react": "7.91.0",
     "@sentry/tracing": "7.91.0",
     "@tarekraafat/autocomplete.js": "10.2.7",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
@@ -63,16 +63,16 @@
     "d3-selection": "3.0.0",
     "d3-shape": "3.2.0",
     "d3-time-format": "4.1.0",
-    "date-fns": "2.30.0",
-    "downshift": "7.6.2",
-    "expose-loader": "4.1.0",
+    "date-fns": "3.3.1",
+    "downshift": "8.3.1",
+    "expose-loader": "5.0.0",
     "fast-average-color": "9.4.0",
-    "markdown-it": "13.0.2",
-    "nanoid": "4.0.2",
+    "markdown-it": "14.0.0",
+    "nanoid": "5.0.5",
     "polylabel": "1.1.0",
     "postcss": "8.4.32",
-    "postcss-cli": "10.1.0",
-    "prettier": "2.8.8",
+    "postcss-cli": "11.0.0",
+    "prettier": "3.2.5",
     "prop-types": "15.8.1",
     "randomstring": "1.3.0",
     "raven-js": "3.27.2",
@@ -91,10 +91,10 @@
     "redux-thunk": "2.4.2",
     "sass": "1.69.6",
     "style-loader": "3.3.3",
-    "swiper": "9.4.1",
+    "swiper": "11.0.6",
     "topojson-client": "3.1.0",
     "ts-loader": "9.5.1",
-    "typescript": "4.9.5",
+    "typescript": "5.3.3",
     "vanilla-framework": "4.7.0",
     "watch-cli": "0.2.3",
     "webpack": "5.89.0",
@@ -106,18 +106,18 @@
     "@percy/cli": "1.27.6",
     "@types/react-dom": "18.2.18",
     "babel-jest": "29.7.0",
-    "concurrently": "7.6.0",
+    "concurrently": "8.2.2",
     "eslint": "8.56.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "27.6.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "sass-loader": "13.3.3",
-    "stylelint": "15.11.0",
-    "stylelint-config-standard-scss": "7.0.1",
+    "sass-loader": "14.1.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-standard-scss": "13.0.0",
     "stylelint-order": "6.0.4",
     "ts-jest": "29.1.1"
   }

requirements.txt

@@ -16,7 +16,7 @@ emoji==2.9.0
 humanize==4.9.0
 mistune==2.0.5
 pybadges==3.0.1
-pycountry==22.3.5
+pycountry==23.12.11
 pymacaroons==0.13.0
 python-dateutil==2.8.2
 requests==2.31.0
@@ -28,5 +28,5 @@ user-agents==2.2.0
 # Development dependencies
 Flask-Testing==0.8.1
 freezegun==1.4.0
-black==23.12.1
+black==24.1.1
 flake8==6.1.0

static/js/base/dropdown-menu-toggle.js

@@ -2,7 +2,7 @@
   function toggleDropdown(toggle, open) {
     var parentElement = toggle.parentNode;
     var dropdown = document.getElementById(
-      toggle.getAttribute("aria-controls")
+      toggle.getAttribute("aria-controls"),
     );
     dropdown.setAttribute("aria-hidden", !open);
 
@@ -46,7 +46,7 @@
 
   function initNavDropdowns(containerClass) {
     var toggles = [].slice.call(
-      document.querySelectorAll(containerClass + " [aria-controls]")
+      document.querySelectorAll(containerClass + " [aria-controls]"),
     );
 
     handleClickOutside(toggles, containerClass);

static/js/base/navigation.js

@@ -3,10 +3,10 @@ var navAccountContainer = document.querySelector(".js-nav-account");
 
 if (navAccountContainer) {
   var notAuthenticatedMenu = navAccountContainer.querySelector(
-    ".js-nav-account--notauthenticated"
+    ".js-nav-account--notauthenticated",
   );
   var authenticatedMenu = navAccountContainer.querySelector(
-    ".js-nav-account--authenticated"
+    ".js-nav-account--authenticated",
   );
 
   fetch("/account.json")
@@ -22,7 +22,7 @@ if (navAccountContainer) {
         if (window.sessionStorage) {
           window.sessionStorage.setItem(
             "displayName",
-            data.publisher["fullname"]
+            data.publisher["fullname"],
           );
         }
 

static/js/base/notification-dismiss.js

@@ -20,7 +20,7 @@
    */
   function dismissNotifications() {
     const links = document.querySelectorAll(
-      ".p-notification__action, .js-notification-close"
+      ".p-notification__action, .js-notification-close",
     );
 
     for (let i = 0; i < links.length; i++) {

static/js/base/polyfills.js

@@ -35,7 +35,7 @@ if (!Array.from) {
       // 3. ReturnIfAbrupt(items).
       if (arrayLike == null) {
         throw new TypeError(
-          "Array.from requires an array-like object - not null or undefined"
+          "Array.from requires an array-like object - not null or undefined",
         );
       }
 
@@ -47,7 +47,7 @@ if (!Array.from) {
         // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
         if (!isCallable(mapFn)) {
           throw new TypeError(
-            "Array.from: when provided, the second argument must be a function"
+            "Array.from: when provided, the second argument must be a function",
           );
         }
 

static/js/brand-store/components/Snaps/SnapsSearch.tsx

@@ -52,7 +52,6 @@ function SnapsSearch({
                 className="p-search-box__input"
                 name="search"
                 placeholder="Search available snaps"
-                autoComplete="off"
                 {...getInputProps({
                   onKeyUp: debounce(
                     (
@@ -125,7 +124,6 @@ function SnapsSearch({
                 {suggestions.map((item: Snap, index: number) => (
                   <li
                     className="p-list__item"
-                    key={item.id}
                     {...getItemProps({
                       key: item.id,
                       index,

static/js/libs/arrays.test.js

@@ -54,7 +54,7 @@ describe("arraysEqual", () => {
     arraysEqual(arr1, arr2);
     expect(
       JSON.stringify(arr1) === JSON.stringify(arr1Copy) &&
-        JSON.stringify(arr2) === JSON.stringify(arr2Copy)
+        JSON.stringify(arr2) === JSON.stringify(arr2Copy),
     ).toEqual(true);
   });
 });

static/js/libs/channels.js

@@ -218,7 +218,7 @@ function sortChannels(channels, options) {
                 (item) =>
                   item.track === track.name &&
                   item.risk === risk.name &&
-                  item.branch === branch.name
+                  item.branch === branch.name,
               )[0].format;
               const str = [];
               if (format.track) {

static/js/libs/channels.test.js

@@ -74,7 +74,7 @@ describe("createChannelTree", () => {
   describe("risk only", () => {
     beforeEach(() => {
       channelList = ["stable", "beta", "candidate", "edge"].map((channel) =>
-        parseChannel(channel)
+        parseChannel(channel),
       );
     });
 
@@ -124,7 +124,7 @@ describe("createChannelTree", () => {
   describe("track/risk", () => {
     beforeEach(() => {
       channelList = ["stable", "latest/edge", "test/candidate"].map((channel) =>
-        parseChannel(channel)
+        parseChannel(channel),
       );
     });
     it("should return 'latest' and others", () => {
@@ -170,7 +170,7 @@ describe("createChannelTree", () => {
   describe("risk/branch", () => {
     beforeEach(() => {
       channelList = ["stable", "beta/test", "edge/1.0.1", "edge/hotfix"].map(
-        (channel) => parseChannel(channel)
+        (channel) => parseChannel(channel),
       );
     });
 
@@ -292,13 +292,13 @@ describe("sortAlphaNum", () => {
 
   it("puts latest first if isTrack and no defaultTrack", () => {
     expect(
-      sortAlphaNum(["0.0.1", "5", "test", "11", "latest"], "latest")
+      sortAlphaNum(["0.0.1", "5", "test", "11", "latest"], "latest"),
     ).toEqual(["latest", "test", "11", "5", "0.0.1"]);
   });
 
   it("puts defaultTrack first if isTrack and defaultTrack set", () => {
     expect(
-      sortAlphaNum(["0.0.1", "5", "test", "11", "latest"], "test")
+      sortAlphaNum(["0.0.1", "5", "test", "11", "latest"], "test"),
     ).toEqual(["test", "latest", "11", "5", "0.0.1"]);
   });
 });
@@ -307,7 +307,7 @@ describe("sortChannels", () => {
   describe("tracks", () => {
     it("should return in the track order, with latest first", () => {
       expect(
-        sortChannels(["zzz/edge", "stable", "1/beta", "5.9.0/candidate"]).tree
+        sortChannels(["zzz/edge", "stable", "1/beta", "5.9.0/candidate"]).tree,
       ).toEqual([
         {
           name: "latest",
@@ -368,7 +368,7 @@ describe("sortChannels", () => {
   describe("track/risk", () => {
     it("should return with 'latest' track first, with risks in order of stability", () => {
       expect(
-        sortChannels(["zzz/edge", "stable", "1/beta", "1/candidate"]).tree
+        sortChannels(["zzz/edge", "stable", "1/beta", "1/candidate"]).tree,
       ).toEqual([
         {
           name: "latest",
@@ -431,7 +431,7 @@ describe("sortChannels", () => {
             "1/beta/1.0.1",
             "1/beta/hotfix",
             "1/candidate",
-          ]).tree
+          ]).tree,
         ).toEqual([
           {
             name: "latest",
@@ -493,7 +493,7 @@ describe("sortChannels", () => {
             "1/beta/1.0.1",
             "1/beta/hotfix",
             "1/candidate",
-          ]).list
+          ]).list,
         ).toEqual([
           "stable",
           "zzz/edge",
@@ -511,7 +511,7 @@ describe("sortChannels", () => {
         expect(
           sortChannels(["latest/stable", "test/stable"], {
             defaultTrack: "test",
-          }).list
+          }).list,
         ).toEqual(["test/stable", "latest/stable"]);
       });
     });
@@ -521,7 +521,7 @@ describe("sortChannels", () => {
         expect(
           sortChannels(["test/stable", "stable"], {
             maintainFormat: true,
-          }).list
+          }).list,
         ).toEqual(["stable", "test/stable"]);
       });
     });

static/js/libs/fileValidation.js

@@ -153,7 +153,7 @@ function imageRestrictions(file, restrictions) {
           // If the min and max are the same we only accept 1 aspect ratio
           if (min === max) {
             message.push(
-              `it needs to be ${aspectRatioMin[0]}:${aspectRatioMin[1]}`
+              `it needs to be ${aspectRatioMin[0]}:${aspectRatioMin[1]}`,
             );
 
             const suggestedSize = [height / max];
@@ -168,14 +168,14 @@ function imageRestrictions(file, restrictions) {
 
             message.push(
               `(e.g., ${Math.round(suggestedSize[0])} x ${Math.round(
-                suggestedSize[1]
-              )} pixels)`
+                suggestedSize[1],
+              )} pixels)`,
             );
 
             // Otherwise it's a range
           } else {
             message.push(
-              `it needs to be between ${aspectRatioMin[0]}:${aspectRatioMin[1]} and ${aspectRatioMax[0]}:${aspectRatioMax[1]}`
+              `it needs to be between ${aspectRatioMin[0]}:${aspectRatioMin[1]} and ${aspectRatioMax[0]}:${aspectRatioMax[1]}`,
             );
           }