feat: integrate newest eslint

Author: Jonas-C

.eslintrc.cjs

@@ -0,0 +1,52 @@
+/**
+ * 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";
+import graphqlPlugin from "@graphql-eslint/eslint-plugin";
+
+export default tseslint.config(
+  ...config,
+  {
+    ignores: ["**/graphqlTypes.ts", "**/schema.graphql"],
+  },
+  {
+    files: ["**/*.graphql"],
+    rules: {
+      "header/header": "off",
+    },
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx,mts,cts,mtsx,ctsx}"],
+    processor: graphqlPlugin.processor,
+  },
+  {
+    files: ["**/*.graphql"],
+    languageOptions: {
+      parser: graphqlPlugin.parser,
+      parserOptions: {
+        graphQLConfig: {
+          schema: "./src/schema.graphql",
+          documents: ["./src/**/*.{ts,tsx}"],
+        },
+      },
+    },
+    plugins: {
+      "@graphql-eslint": graphqlPlugin,
+    },
+    rules: {
+      ...graphqlPlugin.configs["flat/operations-recommended"].rules,
+      ...graphqlPlugin.configs["flat/schema-recommended"].rules,
+      // TODO: Consider enabling these later
+      "@graphql-eslint/selection-set-depth": "off",
+      "@graphql-eslint/require-selections": "off",
+    },
+  },
+);

e2e/apiMocks/unauthenticated_learningpath.spec.ts_contains_content.har

@@ -13,7 +13,7 @@
     "test": "vitest --run",
     "tdd": "vitest",
     "lint": "yarn format-check && yarn lint-es",
-    "lint-es": "eslint --cache --cache-location '.eslintcache/' --ext .js,.jsx,.ts,.tsx --max-warnings=0 src e2e",
+    "lint-es": "eslint --cache --cache-location '.eslintcache/' --max-warnings=0 src e2e",
     "format": "prettier '{src,e2e}/**/*(*.js|*.jsx|*.ts|*.tsx|*.graphql)' --write",
     "format-check": "prettier '{src,e2e}/**/*(*.js|*.jsx|*.ts|*.tsx|*.graphql)' --check",
     "start": "NODE_OPTIONS='--preserve-symlinks' concurrently 'yarn start:tsc' 'tsx src/index.ts'",
@@ -41,9 +41,9 @@
     "@graphql-codegen/schema-ast": "^4.0.2",
     "@graphql-codegen/typescript": "^4.0.6",
     "@graphql-codegen/typescript-operations": "^4.2.0",
-    "@graphql-eslint/eslint-plugin": "^3.20.1",
-    "@ndla/preset-panda": "^0.0.44",
-    "@ndla/scripts": "^2.1.2",
+    "@graphql-eslint/eslint-plugin": "4.0.0-alpha.16",
+    "@ndla/preset-panda": "^0.0.45",
+    "@ndla/scripts": "^2.1.3",
     "@ndla/types-backend": "^0.2.88",
     "@ndla/types-embed": "^5.0.4-alpha.0",
     "@ndla/types-taxonomy": "^1.0.33",
@@ -61,8 +61,8 @@
     "babel-plugin-graphql-tag": "^3.3.0",
     "concurrently": "^8.2.2",
     "esbuild": "^0.20.2",
-    "eslint": "^8.57.0",
-    "eslint-config-ndla": "^5.0.3",
+    "eslint": "^9.15.0",
+    "eslint-config-ndla": "^6.0.0-alpha.0",
     "jsdom": "^24.0.0",
     "nock": "^14.0.0-beta.5",
     "postcss": "^8.4.39",
@@ -73,6 +73,7 @@
     "sirv": "^2.0.4",
     "tsx": "^4.7.2",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.16.0",
     "vite": "^5.2.9",
     "vitest": "^1.5.0"
   },
@@ -88,17 +89,17 @@
     "@fontsource/source-sans-pro": "^4.5.9",
     "@fontsource/source-serif-pro": "^4.5.7",
     "@lexical/react": "^0.12.4",
-    "@ndla/article-converter": "^10.0.75-alpha.0",
+    "@ndla/article-converter": "^10.0.76-alpha.0",
     "@ndla/core": "^5.0.2",
-    "@ndla/hooks": "^2.1.9",
-    "@ndla/icons": "^8.0.43-alpha.0",
-    "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.56-alpha.0",
-    "@ndla/safelink": "^7.0.57-alpha.0",
+    "@ndla/hooks": "^2.1.10",
+    "@ndla/icons": "^8.0.44-alpha.0",
+    "@ndla/licenses": "^8.0.4-alpha.0",
+    "@ndla/primitives": "^1.0.57-alpha.0",
+    "@ndla/safelink": "^7.0.58-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/tracker": "^5.0.12-alpha.0",
+    "@ndla/ui": "^56.0.73-alpha.0",
+    "@ndla/util": "^5.0.1-alpha.0",
     "@sentry/react": "^8.32.0",
     "cross-env": "^7.0.3",
     "express": "^5.0.0",

e2e/apiMocks/unauthenticated_resource.spec.ts_contains_content.har

@@ -15,9 +15,9 @@ import {
   ErrorMessageActions,
 } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { PageContainer } from "./Layout/PageContainer";
 import { Status } from "../components";
 import { SKIP_TO_CONTENT_ID } from "../constants";
+import { PageContainer } from "./Layout/PageContainer";
 
 interface MessageRootProps {
   applySkipToContentId?: boolean;

e2e/apiMocks/unauthenticated_topic.spec.ts_contains_article_header_and_introduction.har

@@ -94,7 +94,7 @@ const LearningpathEmbed = ({ learningpathStep, skipToContentId, subjectId, bread
     learningpathStepQuery,
     {
       variables: {
-        articleId: articleId ?? learningpathStep.resource?.article?.id.toString()!,
+        articleId: articleId ?? learningpathStep.resource?.article?.id.toString() ?? "",
         resourceId: taxId ?? "",
         includeResource: !!taxId,
         transformArgs: {
@@ -226,7 +226,6 @@ const articleFragment = gql`
     created
     updated
     articleType
-    metaDescription
     requiredLibraries {
       name
       url

e2e/apiMocks/unauthenticated_topic.spec.ts_show_have_functioning_language_box.har

@@ -86,7 +86,7 @@ const LearningpathIframe = ({ html, url }: Props) => {
     const iframe = getIframeDOM();
     if (iframe) {
       const newHeight = parseInt(evt.data.height, 10);
-      iframe.style.height = `${newHeight}px`; // eslint-disable-line no-param-reassign
+      iframe.style.height = `${newHeight}px`;
     }
   };
 

eslint.config.mjs

@@ -242,7 +242,6 @@ const ArticlePage = ({ resource, errors, skipToContentId, loading }: Props) => {
                   authors={authors}
                   suppliers={article.copyright?.rightsholders}
                   published={article.published}
-                  license={article.copyright?.license?.license ?? ""}
                   licenseBox={
                     <LicenseBox article={article} copyText={copyText} printUrl={printUrl} oembed={article.oembed} />
                   }

package.json

@@ -65,12 +65,13 @@ const PostsPage = () => {
 
   const [subscribeToTopic] = useArenaFollowTopicMutation();
   const [unsubscribeFromTopic] = useArenaUnfollowTopicMutation();
-  const { replyToTopic } = useArenaReplyToTopicMutation(arenaTopic?.id!);
+  const { replyToTopic } = useArenaReplyToTopicMutation(arenaTopic?.id ?? -1);
 
   const createReply = useCallback(
     async (data: Partial<ArenaFormValues>, postId?: number) => {
+      if (!arenaTopic?.id) return;
       const newReply = await replyToTopic({
-        variables: { topicId: arenaTopic?.id!, content: data.content ?? "", postId: postId },
+        variables: { topicId: arenaTopic.id, content: data.content ?? "", postId: postId },
       });
 
       // TODO: Replace this with `setFocusId(newReply.data.replyToTopicV2.id)` when nodebb dies
@@ -131,15 +132,15 @@ const PostsPage = () => {
     arenaCategory?.breadcrumbs?.map((crumb) => ({ name: crumb.title, id: `category/${crumb.id}` })) ?? [];
   const crumbs = [...parentCrumbs, { name: arenaTopic?.title ?? "", id: topicId ?? "" }];
 
-  if (loading || !arenaTopic?.posts?.items) return <PageSpinner />;
+  if (loading || !arenaTopic?.posts?.items?.[0]) return <PageSpinner />;
 
   return (
     <StyledMyNdlaPageWrapper>
       <HelmetWithTracker title={t("htmlTitles.arenaPostPage", { name: arenaTopic?.title })} />
       <MyNdlaBreadcrumb breadcrumbs={crumbs} page={"arena"} />
       <div>
         <MainPostCard
-          post={arenaTopic?.posts?.items[0]!}
+          post={arenaTopic.posts.items[0]}
           topic={arenaTopic}
           onFollowChange={onFollowChange}
           setFocusId={setFocusId}

src/components/DefaultErrorMessage.tsx

@@ -126,7 +126,6 @@ MovedTopicPage.fragments = {
       name
       path
       url
-      name
       breadcrumbs
       meta {
         metaDescription

src/components/Learningpath/LearningpathEmbed.tsx

@@ -211,7 +211,6 @@ const MultidisciplinarySubjectArticle = ({ node }: Props) => {
                 authors={authors}
                 suppliers={article.copyright?.rightsholders}
                 published={article.published}
-                license={article.copyright?.license?.license ?? ""}
                 licenseBox={<LicenseBox article={article} copyText={copyText} oembed={article.oembed} />}
               />
               <NoSSR fallback={null}>

src/components/Learningpath/LearningpathIframe.tsx

@@ -52,21 +52,16 @@ exports[`IframeArticlePage with article renderers correctly 1`] = `
             class="mbs_medium pbs_xsmall bd-t_1px_solid bd-c_stroke.subtle"
           >
             <div
-              class="d_flex flex-d_column-reverse gap_3xsmall w_100% jc_space-between py_xsmall textStyle_body.medium tabletWide:flex-d_row"
+              class="d_flex flex-d_column gap_3xsmall w_100% jc_space-between py_xsmall textStyle_body.medium [&_[data-contributors="false"]]:ms_auto tabletWide:flex-d_row"
             >
+              <span
+                property="cc:attributionName"
+              >
+                Skrevet av Someone. 
+              </span>
               <div
-                class="d_flex gap_xsmall"
+                data-contributors="true"
               >
-                <span>
-                  by-sa
-                </span>
-                <span
-                  property="cc:attributionName"
-                >
-                  Skrevet av Someone. 
-                </span>
-              </div>
-              <div>
                 Sist faglig oppdatert 09.01.2018
               </div>
             </div>

src/containers/ArticlePage/ArticlePage.tsx

@@ -6,10 +6,10 @@
  *
  */
 
+import { LtiData, LtiItem } from "../interfaces";
 import LtiBasicLaunch from "./components/LtiBasicLaunch";
 import LtiDeepLinking from "./components/LtiDeepLinking";
 import LtiDefault from "./components/LtiDefault";
-import { LtiData, LtiItem } from "../interfaces";
 
 interface Props {
   item: LtiItem;

src/containers/MyNdla/Arena/PostsPage.tsx

@@ -44,7 +44,7 @@ export const getContributorGroups = (licenseInfos: string[]) => {
     if (contributorFields.length !== 2) return { type: "", name: contributorFields[0]! };
     const [type, name] = contributorFields;
     const contributorType = Object.keys(contributorTypes.nb!).find(
-      (key) => contributorTypes.nb![key] === mapContributorType(type?.trim()!),
+      (key) => contributorTypes.nb![key] === mapContributorType((type as string).trim()),
     );
     return { type: contributorType || "", name: name || "" };
   };