Merge branch 'master' of github.com:NDLANO/ndla-frontend into e2e-fol…

…der-page
NDLANO · Jun 26, 2024 · 461524d · 461524d
2 parents fb47a3d + 26e4505
commit 461524d
Show file tree

Hide file tree

Showing 35 changed files with 1,105 additions and 516 deletions.
diff --git a/package.json b/package.json
@@ -44,9 +44,9 @@
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@ndla/scripts": "^2.1.2",
-    "@ndla/types-backend": "^0.2.72",
-    "@ndla/types-embed": "^4.1.6",
-    "@ndla/types-taxonomy": "^1.0.22",
+    "@ndla/types-backend": "^0.2.84",
+    "@ndla/types-embed": "^4.1.7",
+    "@ndla/types-taxonomy": "^1.0.25",
     "@playwright/test": "^1.43.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.2",
@@ -88,24 +88,24 @@
     "@fontsource/source-sans-pro": "^4.5.9",
     "@fontsource/source-serif-pro": "^4.5.7",
     "@lexical/react": "^0.12.4",
-    "@ndla/article-converter": "^8.0.0",
-    "@ndla/button": "^13.0.0",
-    "@ndla/carousel": "^4.0.44",
-    "@ndla/core": "^5.0.0",
-    "@ndla/dropdown-menu": "^1.0.37",
+    "@ndla/article-converter": "^8.0.4",
+    "@ndla/button": "^13.0.3",
+    "@ndla/carousel": "^4.0.46",
+    "@ndla/core": "^5.0.1",
+    "@ndla/dropdown-menu": "^1.0.38",
     "@ndla/error-reporter": "^2.0.1",
-    "@ndla/forms": "^8.0.0",
-    "@ndla/icons": "^6.1.4",
+    "@ndla/forms": "^8.0.3",
+    "@ndla/icons": "^6.1.6",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^6.0.0",
-    "@ndla/pager": "^3.0.9",
-    "@ndla/safelink": "^5.1.3",
-    "@ndla/select": "^4.0.0",
-    "@ndla/switch": "^1.1.43",
-    "@ndla/tabs": "^4.0.6",
+    "@ndla/modal": "^6.0.2",
+    "@ndla/pager": "^3.0.12",
+    "@ndla/safelink": "^5.1.6",
+    "@ndla/select": "^4.0.2",
+    "@ndla/switch": "^1.1.44",
+    "@ndla/tabs": "^4.0.7",
     "@ndla/tracker": "^5.0.6",
-    "@ndla/typography": "^0.4.20",
-    "@ndla/ui": "^53.0.0",
+    "@ndla/typography": "^0.4.22",
+    "@ndla/ui": "^54.0.2",
     "@ndla/util": "^4.0.4",
     "cross-env": "^7.0.3",
     "date-fns": "^2.30.0",

diff --git a/public/static/h5p-custom-css.css b/public/static/h5p-custom-css.css
@@ -23,3 +23,16 @@
 .h5p-dialogcards.h5p-text-scaling .h5p-dialogcards-card-text-wrapper {
   height: auto;
 }
+
+.h5p-content {
+  border-width: 2px 2px 0 2px;
+  border-radius: 4px;
+  border-color: #94949E;
+}
+
+.h5p-content .h5p-actions {
+  border-bottom-color: #94949E;
+  border-bottom-width: 2px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+} 
diff --git a/src/App.tsx b/src/App.tsx
@@ -54,6 +54,7 @@ import VideoPage from "./containers/ResourceEmbed/VideoPage";
 import ResourcePage from "./containers/ResourcePage/ResourcePage";
 import SearchPage from "./containers/SearchPage/SearchPage";
 import SharedFolderPage from "./containers/SharedFolderPage/SharedFolderPage";
+import SharedFolderPageV2 from "./containers/SharedFolderPage/SharedFolderPageV2";
 import SubjectRouting from "./containers/SubjectPage/SubjectRouting";
 import WelcomePage from "./containers/WelcomePage/WelcomePage";
 import handleError from "./util/handleError";
@@ -196,11 +197,18 @@ const AppRoutes = ({ base }: AppProps) => {
                 </Route>
                 <Route path="about/:slug" element={<AboutPage />} />
 
-                <Route path="folder/:folderId">
-                  <Route index element={<SharedFolderPage />} />
-                  <Route path=":subfolderId" element={<SharedFolderPage />} />
-                  <Route path=":subfolderId/:resourceId" element={<SharedFolderPage />} />
-                </Route>
+                {config.folderRedesign ? (
+                  <Route path="folder/:folderId">
+                    <Route index element={<SharedFolderPageV2 />} />
+                    <Route path="*" element={<SharedFolderPageV2 />} />
+                  </Route>
+                ) : (
+                  <Route path="folder/:folderId">
+                    <Route index element={<SharedFolderPage />} />
+                    <Route path=":subfolderId" element={<SharedFolderPage />} />
+                    <Route path=":subfolderId/:resourceId" element={<SharedFolderPage />} />
+                  </Route>
+                )}
                 <Route path="404" element={<NotFound />} />
                 <Route path="403" element={<AccessDenied />} />
                 <Route path="*" element={<NotFound />} />

diff --git a/src/client.tsx b/src/client.tsx
@@ -34,6 +34,7 @@ import { ErrorReporter } from "@ndla/error-reporter";
 import { i18nInstance } from "@ndla/ui";
 import { getCookie, setCookie } from "@ndla/util";
 import App from "./App";
+import ResponseContext from "./components/ResponseContext";
 import { VersionHashProvider } from "./components/VersionHashContext";
 import { EmotionCacheKey, STORED_LANGUAGE_COOKIE_KEY } from "./constants";
 import { getLocaleInfoFromPath, initializeI18n, isValidLocale, supportedLanguages } from "./i18n";
@@ -46,7 +47,7 @@ declare global {
 }
 
 const {
-  DATA: { config, serverPath, serverQuery },
+  DATA: { config, serverPath, serverQuery, serverResponse },
 } = window;
 
 const { basepath, abbreviation } = getLocaleInfoFromPath(serverPath ?? "");
@@ -192,11 +193,13 @@ renderOrHydrate(
   <HelmetProvider>
     <I18nextProvider i18n={i18n}>
       <ApolloProvider client={client}>
-        <CacheProvider value={cache}>
-          <VersionHashProvider value={versionHash}>
-            <LanguageWrapper basename={basename} />
-          </VersionHashProvider>
-        </CacheProvider>
+        <ResponseContext.Provider value={{ status: serverResponse }}>
+          <CacheProvider value={cache}>
+            <VersionHashProvider value={versionHash}>
+              <LanguageWrapper basename={basename} />
+            </VersionHashProvider>
+          </CacheProvider>
+        </ResponseContext.Provider>
       </ApolloProvider>
     </I18nextProvider>
   </HelmetProvider>,

diff --git a/src/components/Learningpath/LearningpathMenu.tsx b/src/components/Learningpath/LearningpathMenu.tsx
@@ -195,7 +195,7 @@ const LearningpathMenu = ({ resource, learningpath, currentStep }: Props) => {
         {t("learningPath.youAreInALearningPath")}
       </LearningpathText>
       <HeaderWrapper>
-        <Heading element="h2" headingStyle="h4" margin="none" id={headingId}>
+        <Heading element="h1" headingStyle="h4" margin="none" id={headingId}>
           {learningpath.title}
         </Heading>
         {!!resource?.path && config.feideEnabled && (
@@ -242,7 +242,6 @@ const LearningpathMenu = ({ resource, learningpath, currentStep }: Props) => {
       </nav>
       <ArticleByline
         authors={learningpath.copyright.contributors}
-        license={learningpath.copyright.license.license}
         published={lastUpdatedString}
         bylineType="learningPath"
       />

diff --git a/src/components/MyNdla/CopyFolder.tsx b/src/components/MyNdla/CopyFolder.tsx
@@ -10,11 +10,13 @@ import { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ButtonV2 as Button, LoadingButton } from "@ndla/button";
 import { InformationOutline, WarningOutline } from "@ndla/icons/common";
+import { ModalContent, ModalHeader, ModalTitle, ModalCloseButton, ModalBody } from "@ndla/modal";
 import { Folder, MessageBox, useSnack } from "@ndla/ui";
 import { AddResourceContainer, ButtonRow } from "./AddResourceToFolder";
 import FolderSelect from "./FolderSelect";
 import { useCopySharedFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations";
 import { GQLFolder } from "../../graphqlTypes";
+import { routes } from "../../routeHelpers";
 import { getTotalCountForFolder } from "../../util/folderHelpers";
 import { AuthContext } from "../AuthenticationContext";
 
@@ -48,69 +50,77 @@ const CopyFolder = ({ folder, onClose }: Props) => {
   };
 
   return (
-    <AddResourceContainer>
-      <Folder
-        id={folder.id.toString()}
-        title={folder.name ?? ""}
-        link={`/folder/${folder.id}`}
-        isShared={true}
-        subFolders={folderCount.folders}
-        subResources={folderCount.resources}
-      />
-      {examLock ? (
-        <MessageBox>
-          <InformationOutline />
-          {t("myNdla.examLockInfo")}
-        </MessageBox>
-      ) : (
-        <>
-          <FolderSelect
-            folders={folders}
-            loading={loading}
-            selectedFolderId={selectedFolderId}
-            setSelectedFolderId={setSelectedFolderId}
+    <ModalContent>
+      <ModalHeader>
+        <ModalTitle>{t("myNdla.resource.copyToMyNdla")}</ModalTitle>
+        <ModalCloseButton title={t("modal.closeModal")} />
+      </ModalHeader>
+      <ModalBody>
+        <AddResourceContainer>
+          <Folder
+            id={folder.id.toString()}
+            title={folder.name ?? ""}
+            link={routes.folder(folder.id)}
+            isShared={true}
+            subFolders={folderCount.folders}
+            subResources={folderCount.resources}
           />
-          <MessageBox>
-            <InformationOutline />
-            {t("myNdla.copyFolderDisclaimer")}
-          </MessageBox>
-          {copySharedFolderMutation.error && (
-            <MessageBox type="danger">
-              <WarningOutline />
-              {t("errorMessage.description")}
+          {examLock ? (
+            <MessageBox>
+              <InformationOutline />
+              {t("myNdla.examLockInfo")}
             </MessageBox>
+          ) : (
+            <>
+              <FolderSelect
+                folders={folders}
+                loading={loading}
+                selectedFolderId={selectedFolderId}
+                setSelectedFolderId={setSelectedFolderId}
+              />
+              <MessageBox>
+                <InformationOutline />
+                {t("myNdla.copyFolderDisclaimer")}
+              </MessageBox>
+              {copySharedFolderMutation.error && (
+                <MessageBox type="danger">
+                  <WarningOutline />
+                  {t("errorMessage.description")}
+                </MessageBox>
+              )}
+            </>
           )}
-        </>
-      )}
-      <ButtonRow>
-        <Button
-          variant="outline"
-          onClick={onClose}
-          onMouseDown={(e) => {
-            e.preventDefault();
-          }}
-          onMouseUp={(e) => {
-            e.preventDefault();
-          }}
-        >
-          {t("cancel")}
-        </Button>
-        <LoadingButton
-          loading={copySharedFolderMutation.loading}
-          colorTheme="light"
-          disabled={examLock || copySharedFolderMutation.loading}
-          onMouseDown={(e) => {
-            e.preventDefault();
-          }}
-          onMouseUp={(e) => {
-            e.preventDefault();
-          }}
-          onClick={onSave}
-        >
-          {t("myNdla.resource.save")}
-        </LoadingButton>
-      </ButtonRow>
-    </AddResourceContainer>
+          <ButtonRow>
+            <Button
+              variant="outline"
+              onClick={onClose}
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}
+              onMouseUp={(e) => {
+                e.preventDefault();
+              }}
+            >
+              {t("cancel")}
+            </Button>
+            <LoadingButton
+              loading={copySharedFolderMutation.loading}
+              colorTheme="light"
+              disabled={examLock || copySharedFolderMutation.loading}
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}
+              onMouseUp={(e) => {
+                e.preventDefault();
+              }}
+              onClick={onSave}
+            >
+              {t("myNdla.resource.save")}
+            </LoadingButton>
+          </ButtonRow>
+        </AddResourceContainer>
+      </ModalBody>
+    </ModalContent>
   );
 };
 

diff --git a/src/components/MyNdla/CopyFolderModal.tsx b/src/components/MyNdla/CopyFolderModal.tsx
@@ -8,7 +8,7 @@
 
 import { ReactNode, useCallback, useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ModalBody, ModalCloseButton, ModalHeader, ModalTitle, Modal, ModalTrigger, ModalContent } from "@ndla/modal";
+import { Modal, ModalTrigger } from "@ndla/modal";
 import { Folder } from "@ndla/ui";
 import CopyFolder from "./CopyFolder";
 import LoginModalContent from "./LoginModalContent";
@@ -34,15 +34,7 @@ const CopyFolderModal = ({ folder, children }: Props) => {
     <Modal open={open} onOpenChange={setOpen}>
       <ModalTrigger>{children}</ModalTrigger>
       {authenticated ? (
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>{t("myNdla.resource.copyToMyNdla")}</ModalTitle>
-            <ModalCloseButton title={t("modal.closeModal")} />
-          </ModalHeader>
-          <ModalBody>
-            <CopyFolder folder={folder} onClose={close} />
-          </ModalBody>
-        </ModalContent>
+        <CopyFolder folder={folder} onClose={close} />
       ) : (
         <LoginModalContent
           title={t("myNdla.loginCopyFolderPitch")}

diff --git a/src/components/ResponseContext.tsx b/src/components/ResponseContext.tsx
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ */
+
+import { createContext } from "react";
+
+export interface ResponseInfo {
+  status?: number;
+}
+const ResponseContext = createContext<ResponseInfo | undefined>(undefined);
+export default ResponseContext;
diff --git a/src/containers/AllSubjectsPage/SubjectLink.tsx b/src/containers/AllSubjectsPage/SubjectLink.tsx
@@ -97,8 +97,8 @@ const SubjectLink = ({ subject, favorites, className }: Props) => {
       {authenticated && !isFavorite ? (
         <StyledIconButton
           onClick={setFavorite}
-          aria-label={t("subjectspage.addFavorite")}
-          title={t("subjectspage.addFavorite")}
+          aria-label={t("subjectsPage.addFavorite")}
+          title={t("subjectsPage.addFavorite")}
           variant="ghost"
           size="xsmall"
           colorTheme="lighter"