Merge branch 'master' into poc-bedrock

NDLANO · Dec 17, 2024 · aed88b2 · aed88b2
2 parents 90b54e2 + f943873
commit aed88b2
Show file tree

Hide file tree

Showing 516 changed files with 8,864 additions and 9,816 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -36,7 +36,7 @@ jobs:
           aws ecr get-login-password --region eu-central-1 | docker login --username AWS --password-stdin $NDLA_AWS_ECR_REPO
       - name: "Login to dockerhub"
         run: echo $DOCKER_HUB_PASSWORD | docker login --username $DOCKER_HUB_USERNAME --password-stdin
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         with:
           path: |
             **/node_modules

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -54,7 +54,7 @@ jobs:
         run: echo $DOCKER_HUB_PASSWORD | docker login --username $DOCKER_HUB_USERNAME
           --password-stdin
       - name: Cache pip
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ndla/deploy/.venv
           key: ${{ runner.os }}-pip-${{ hashFiles('ndla/deploy/poetry.lock') }}

diff --git a/e2e/specs/taxonomy.spec.ts b/e2e/specs/taxonomy.spec.ts
@@ -15,13 +15,13 @@ test.beforeEach(async ({ page }) => {
 });
 
 test("should have settingsMenu available after clicking button", async ({ page }) => {
-  await page.getByTestId("structure").getByRole("button", { name: "Engelsk 1" }).click();
+  await page.getByTestId("structure").getByRole("link", { name: "Engelsk 1" }).click();
   await page.getByTestId("settings-button").click();
   expect(await page.getByTestId("settings-menu-dialog").count()).toEqual(1);
 });
 
 test("should be able to change name of node", async ({ page }) => {
-  await page.getByTestId("structure").getByRole("button", { name: "Engelsk 1" }).click();
+  await page.getByTestId("structure").getByRole("link", { name: "Engelsk 1" }).click();
   await page.getByTestId("settings-button").click();
   await page.getByTestId("changeNodeNameButton").click();
   await page.getByTestId("edit-node-name-form").waitFor();
@@ -30,7 +30,7 @@ test("should be able to change name of node", async ({ page }) => {
 });
 
 test("should be able to delete and add name of node", async ({ page }) => {
-  await page.getByTestId("structure").getByRole("button", { name: "Engelsk 1" }).click();
+  await page.getByTestId("structure").getByRole("link", { name: "Engelsk 1" }).click();
   await page.getByTestId("settings-button").click();
   await page.getByTestId("changeNodeNameButton").click();
   await page.getByTestId("edit-node-name-form").waitFor();
@@ -39,7 +39,7 @@ test("should be able to delete and add name of node", async ({ page }) => {
 });
 
 test("should be able to change visibility", async ({ page }) => {
-  await page.getByTestId("structure").getByRole("button", { name: "Engelsk 1" }).click();
+  await page.getByTestId("structure").getByRole("link", { name: "Engelsk 1" }).click();
   await page.getByTestId("settings-button").click();
   await page.getByTestId("toggleVisibilityButton").click();
   expect(await page.getByLabel("Synlig", { exact: true }).count()).toEqual(1);
@@ -59,11 +59,9 @@ test("can toggle favourites", async ({ page }) => {
 test("can only toggle only show favourites", async ({ page }) => {
   await page.getByTestId("display-options").click();
   expect(await page.getByTestId("switch-favorites").isChecked()).toBeFalsy();
-  expect(await page.getByTestId("structure").locator("div").count()).toEqual(813);
+  expect(await page.getByTestId("structure").getByTestId("structure-node-item").count()).toEqual(271);
   await page.getByTestId("switch-favorites").click();
   expect(await page.getByTestId("switch-favorites").isChecked()).toBeTruthy();
   await page.getByTestId("structure").waitFor();
-  expect(
-    await page.getByTestId("structure").locator('div[id="urn:subject:1:c8d6ed8b-d376-4c7b-b73a-3a1d48c3a357"]').count(),
-  ).toEqual(1);
+  expect(await page.getByTestId("structure").getByTestId("structure-node-item").count()).toEqual(1);
 });
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// @ts-check
+
+import config from "eslint-config-ndla";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(...config, {
+  ignores: ["**/h5pResizer.ts"],
+});
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "clean": "node scripts/clean.mjs",
     "check-all": "yarn lint && yarn tsc --noEmit && yarn test",
     "lint": "yarn format-check && yarn lint-es",
-    "lint-es": "eslint --cache --cache-location '.eslintcache/' --ext .js,.jsx,.ts,.tsx --max-warnings=0 src",
+    "lint-es": "eslint --cache --cache-location '.eslintcache/' --max-warnings=0 src",
     "format-check": "prettier '{src,scripts}/**/*(*.js|*.jsx|*.ts|*.tsx)' --check",
     "format": "prettier '{src,scripts}/**/*(*.js|*.jsx|*.ts|*.tsx)' --write",
     "start:tsc": "tsc -b -w --preserveWatchOutput",
@@ -31,49 +31,48 @@
     "npm": ">=8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@emotion/babel-plugin": "11.11.0",
-    "@emotion/eslint-plugin": "11.11.0",
-    "@emotion/jest": "11.11.0",
-    "@ndla/preset-panda": "^0.0.44",
-    "@ndla/scripts": "^2.1.2",
-    "@ndla/types-backend": "^0.2.96",
-    "@ndla/types-embed": "^5.0.4-alpha.0",
+    "@babel/core": "^7.26.0",
+    "@ndla/preset-panda": "^0.0.48",
+    "@ndla/scripts": "^2.1.3",
+    "@ndla/types-backend": "^1.0.1",
+    "@ndla/types-embed": "^5.0.6-alpha.0",
     "@ndla/types-taxonomy": "^1.0.30",
-    "@pandacss/dev": "^0.46.1",
+    "@pandacss/dev": "^0.48.0",
     "@playwright/test": "^1.42.0",
-    "@tanstack/react-query-devtools": "^5.7.2",
+    "@tanstack/react-query-devtools": "^5.62.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/auth0-js": "^9.13.2",
     "@types/diff-match-patch": "^1.0.32",
     "@types/express": "^5.0.0",
+    "@types/is-hotkey": "^0.1.10",
     "@types/lodash": "^4.17.10",
     "@types/node": "^20.12.12",
     "@types/node-fetch": "^2.6.2",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "concurrently": "^8.2.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.0",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.20.2",
-    "eslint": "^8.57.0",
-    "eslint-config-ndla": "^5.0.3",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.15.0",
+    "eslint-config-ndla": "^6.0.0-alpha.0",
     "filter-console": "^0.1.1",
     "jsdom": "^25.0.1",
     "nock": "^13.5.4",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^9.6.0",
+    "postcss-preset-env": "^10.1.1",
     "postcss-reporter": "^7.1.0",
-    "sirv": "^2.0.4",
-    "tsx": "^4.7.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1"
+    "sirv": "^3.0.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^6.0.1",
+    "vitest": "^2.1.6"
   },
   "dependencies": {
     "@ark-ui/react": "^4.1.2",
@@ -82,26 +81,24 @@
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@fontsource/source-code-pro": "^4.5.9",
     "@fontsource/source-sans-pro": "^4.5.9",
     "@fontsource/source-serif-pro": "^4.5.7",
-    "@ndla/article-converter": "^10.0.75-alpha.0",
-    "@ndla/audio-search": "^7.0.62-alpha.0",
-    "@ndla/error-reporter": "^2.0.4",
-    "@ndla/hooks": "^2.1.9",
-    "@ndla/icons": "^8.0.43-alpha.0",
-    "@ndla/image-search": "^11.0.64-alpha.0",
-    "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.56-alpha.0",
-    "@ndla/safelink": "^7.0.57-alpha.0",
-    "@ndla/styled-system": "^0.0.27",
-    "@ndla/tracker": "^5.0.11-alpha.0",
-    "@ndla/ui": "^56.0.72-alpha.0",
-    "@ndla/util": "^5.0.0-alpha.0",
-    "@ndla/video-search": "^8.0.61-alpha.0",
-    "@tanstack/react-query": "5.7.2",
+    "@ndla/article-converter": "^10.0.84-alpha.0",
+    "@ndla/audio-search": "^7.0.71-alpha.0",
+    "@ndla/error-reporter": "^2.0.9",
+    "@ndla/hooks": "^2.1.11",
+    "@ndla/icons": "^8.0.48-alpha.0",
+    "@ndla/image-search": "^11.0.73-alpha.0",
+    "@ndla/licenses": "^8.0.6-alpha.0",
+    "@ndla/primitives": "^1.0.65-alpha.0",
+    "@ndla/safelink": "^7.0.66-alpha.0",
+    "@ndla/styled-system": "^0.0.29",
+    "@ndla/tracker": "^5.0.14-alpha.0",
+    "@ndla/ui": "^56.0.81-alpha.0",
+    "@ndla/util": "^5.0.5-alpha.0",
+    "@ndla/video-search": "^8.0.70-alpha.0",
+    "@tanstack/react-query": "5.62.3",
     "auth0-js": "^9.22.1",
     "compression": "^1.7.4",
     "cross-fetch": "^3.1.5",
@@ -117,7 +114,7 @@
     "he": "^1.2.0",
     "helmet": "^3.23.3",
     "history": "^5.1.0",
-    "html-react-parser": "^5.1.8",
+    "html-react-parser": "^5.2.0",
     "htmldiff-js": "^1.0.5",
     "i18next": "^23.11.5",
     "is-hotkey": "^0.2.0",

diff --git a/src/__tests__/vitest.setup.ts b/src/__tests__/vitest.setup.ts
@@ -6,12 +6,9 @@
  *
  */
 
-import { createSerializer } from "@emotion/jest";
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 
-expect.addSnapshotSerializer(createSerializer());
-
 afterEach(() => {
   cleanup();
 });
diff --git a/src/components/Accordion/FormAccordion.tsx b/src/components/Accordion/FormAccordion.tsx
@@ -7,7 +7,7 @@
  */
 
 import { ReactNode, memo } from "react";
-import { ArrowDownShortLine } from "@ndla/icons/common";
+import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,
   AccordionItemContent,

diff --git a/src/components/AlertDialog/AlertDialog.tsx b/src/components/AlertDialog/AlertDialog.tsx
@@ -9,7 +9,7 @@
 import { ReactNode, useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
-import { ErrorWarningLine } from "@ndla/icons/common";
+import { ErrorWarningLine } from "@ndla/icons";
 import {
   DialogRoot,
   DialogContent,

diff --git a/src/components/ControlledImageSearchAndUploader.tsx b/src/components/ControlledImageSearchAndUploader.tsx
@@ -8,18 +8,27 @@
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ErrorWarningLine } from "@ndla/icons";
 import { ImageSearch } from "@ndla/image-search";
-import { Button, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, Text } from "@ndla/primitives";
+import {
+  Button,
+  MessageBox,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  Text,
+} from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import {
-  IImageMetaInformationV3,
-  IUpdateImageMetaInformation,
-  ISearchResultV3,
-  INewImageMetaInformationV2,
-  ISearchParams,
+  IImageMetaInformationV3DTO,
+  IUpdateImageMetaInformationDTO,
+  ISearchResultV3DTO,
+  INewImageMetaInformationV2DTO,
+  ISearchParamsDTO,
 } from "@ndla/types-backend/image-api";
 import { useImageSearchTranslations } from "@ndla/ui";
-import EditorErrorMessage from "./SlateEditor/EditorErrorMessage";
 import ImageForm from "../containers/ImageUploader/components/ImageForm";
 import { draftLicensesToImageLicenses } from "../modules/draft/draftApiUtils";
 import { useLicenses } from "../modules/draft/draftQueries";
@@ -39,22 +48,22 @@ const StyledTabsContent = styled(TabsContent, {
 });
 
 interface Props {
-  onImageSelect: (image: IImageMetaInformationV3) => void;
+  onImageSelect: (image: IImageMetaInformationV3DTO) => void;
   locale: string;
   language?: string;
   closeModal: () => void;
   onError: (err: Error & Response) => void;
-  searchImages: (queryObject: ISearchParams) => Promise<ISearchResultV3>;
-  fetchImage: (id: number) => Promise<IImageMetaInformationV3>;
-  image?: IImageMetaInformationV3;
+  searchImages: (queryObject: ISearchParamsDTO) => Promise<ISearchResultV3DTO>;
+  fetchImage: (id: number) => Promise<IImageMetaInformationV3DTO>;
+  image?: IImageMetaInformationV3DTO;
   updateImage: (
-    imageMetadata: IUpdateImageMetaInformation & INewImageMetaInformationV2,
+    imageMetadata: IUpdateImageMetaInformationDTO & INewImageMetaInformationV2DTO,
     file: string | Blob,
     id?: number,
   ) => void;
   inModal?: boolean;
   showCheckbox?: boolean;
-  checkboxAction?: (image: IImageMetaInformationV3) => void;
+  checkboxAction?: (image: IImageMetaInformationV3DTO) => void;
   podcastFriendly?: boolean;
 }
 
@@ -135,7 +144,10 @@ const ImageSearchAndUploader = ({
             supportedLanguages={image?.supportedLanguages ?? [locale]}
           />
         ) : (
-          <EditorErrorMessage msg={t("errorMessage.description")} />
+          <MessageBox variant="error">
+            <ErrorWarningLine />
+            {t("errorMessage.description")}
+          </MessageBox>
         )}
       </StyledTabsContent>
     </TabsRoot>

diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -57,7 +57,7 @@ const DatePickerDropdown = (props: DropdownProps) => {
     return <Dropdown {...props} />;
   }
   const { children, ...rest } = props;
-  //@ts-ignore
+  // @ts-expect-error - TODO: We're going to migrate away from this at some point.
   return <StyledInput type="number" min={MIN_YEAR} max={MAX_YEAR} {...rest} />;
 };
 

diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import { DeleteBinLine } from "@ndla/icons/action";
+import { DeleteBinLine } from "@ndla/icons";
 import { IconButton, type IconButtonProps } from "@ndla/primitives";
 
 export const DeleteButton = ({ children, ...rest }: IconButtonProps) => (

diff --git a/src/components/DialogCloseButton.tsx b/src/components/DialogCloseButton.tsx
@@ -8,7 +8,7 @@
 
 import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
-import { CloseLine } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons";
 import { DialogCloseTrigger, IconButton, IconButtonProps } from "@ndla/primitives";
 
 export const DialogCloseButton = forwardRef<HTMLButtonElement, IconButtonProps>(

diff --git a/src/components/DraggableItem.tsx b/src/components/DraggableItem.tsx
@@ -23,17 +23,25 @@ interface Props {
 
 const StyledListElement = styled("li", {
   base: {
+    position: "relative",
     listStyle: "none",
     display: "flex",
     alignItems: "center",
     "&[data-has-handle='false']": {
       cursor: "grab",
     },
   },
+  variants: {
+    isDragging: {
+      true: {
+        zIndex: "docked",
+      },
+    },
+  },
 });
 
 const DraggableItem = ({ id, index, children, dragHandle, disabled }: Props) => {
-  const { attributes, setNodeRef, transform, transition, listeners, setActivatorNodeRef } = useSortable({
+  const { attributes, setNodeRef, transform, transition, listeners, setActivatorNodeRef, isDragging } = useSortable({
     id: id,
     disabled,
     data: {
@@ -60,6 +68,7 @@ const DraggableItem = ({ id, index, children, dragHandle, disabled }: Props) =>
       ref={setNodeRef}
       data-has-handle={!!dragHandle}
       style={style}
+      isDragging={isDragging}
       {...attributes}
       {...(dragHandle ? {} : listeners)}
     >