Merge branch 'develop' into feature/update-storybook

.storybook/preview.tsx

@@ -3,12 +3,12 @@ import "../src/components/components.scss";
 import "@danskernesdigitalebibliotek/dpl-design-system/build/css/base.css";
 import { setToken, TOKEN_LIBRARY_KEY, TOKEN_USER_KEY } from "../src/core/token";
 import "../src/core/mount";
-
 import React from "react";
 import { withErrorBoundary } from "react-error-boundary";
 import ErrorBoundaryAlert from "../src/components/error-boundary-alert/ErrorBoundaryAlert";
 import Store from "../src/components/store";
 
+
 const getSessionStorage = (type) => window.sessionStorage.getItem(type);
 const userToken =
   process.env.STORYBOOK_USER_TOKEN ?? getSessionStorage(TOKEN_USER_KEY);

package.json

@@ -45,16 +45,16 @@
     "post-process-generated-graphql": "ts-node ./scripts/post-process-generated-graphql.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.25.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^1",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
     "@csstools/postcss-sass": "^5.1.1",
     "@cypress/browserify-preprocessor": "^3.0.2",
-    "@cypress/code-coverage": "^3.13.2",
+    "@cypress/code-coverage": "^3.13.4",
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/introspection": "^2.1.1",
@@ -75,13 +75,13 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.2",
     "@types/node": "^20.16.5",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-flatpickr": "^3.8.11",
     "@types/react-redux": "^7.1.24",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@vitest/coverage-istanbul": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.2",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",
@@ -106,7 +106,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "glob": "^8.0.1",
@@ -145,7 +145,7 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.38.0-0dbeffee4f1a1dce73311d4744a9bf02acceeeb1",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.40.0-c006877c658f7b12d834a352487fc8ab333f83bc",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",

src/apps/advanced-search/AdvancedSearch.entry.tsx

@@ -68,6 +68,10 @@ interface AdvancedSearchEntryTextProps {
   advancedSearchInputLabelText: string;
   advancedSearchInputPlaceholderText: string;
   advancedSearchRemoveRowText: string;
+  advancedSearchFilterLocationText: string;
+  advancedSearchFilterLocationDescriptionText: string;
+  advancedSearchFilterSublocationText: string;
+  advancedSearchFilterSublocationDescriptionText: string;
 }
 
 interface AdvancedSearchEntryConfigProps {

src/apps/advanced-search/AdvancedSearch.stories.tsx

@@ -299,7 +299,23 @@ const meta: Meta<typeof AdvancedSearchEntry> = {
     advancedSearchFilterHoldingStatusText: {
       description: "Advanced search filter - holding status",
       control: { type: "text" }
-    }
+    },
+    advancedSearchFilterLocationText: {
+      description: "Advanced search filter - location",
+      control: { type: "text" }
+    },
+    advancedSearchFilterLocationDescriptionText: {
+      description: "Advanced search filter - location description",
+      control: { type: "text" }
+    },
+    advancedSearchFilterSublocationText: {
+      description: "Advanced search filter - sublocation",
+      control: { type: "text" }
+    },
+    advancedSearchFilterSublocationDescriptionText: {
+      description: "Advanced search filter - sublocation description",
+      control: { type: "text" }
+    },
   }
 };
 
@@ -383,6 +399,10 @@ export const Primary: Story = {
     advancedSearchFilterOnlineText: "Online",
     advancedSearchFilterFictionText: "Fiction",
     advancedSearchFilterNonFictionText: "Non-fiction",
-    advancedSearchFilterHoldingStatusText: "Holding Status On Shelf"
+    advancedSearchFilterHoldingStatusText: "Holding Status On Shelf",
+    advancedSearchFilterLocationText: "Location",
+    advancedSearchFilterLocationDescriptionText: "Add a comma separated list for multiple locations",
+    advancedSearchFilterSublocationText: "Sublocation",
+    advancedSearchFilterSublocationDescriptionText: "Add a comma separated list for multiple sublocations",
   }
 };

src/apps/advanced-search/AdvancedSearch.tsx

@@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useEffectOnce } from "react-use";
 import AdvancedSearchHeader from "./AdvancedSearchHeader";
 import AdvancedSearchResult from "./AdvancedSearchResults";
-import { translateSearchObjectToCql } from "./helpers";
+import {
+  commaSeparatedStringToArray,
+  translateSearchObjectToCql
+} from "./helpers";
 import { AdvancedSearchQuery } from "./types";
 import {
   getUrlQueryParam,
@@ -30,17 +33,29 @@ const AdvancedSearch: React.FC<AdvancedSearchProps> = ({ pageSize }) => {
   const [executedQuery, setExecutedQuery] = useState<string | null>(null);
 
   const [locationFilter, setLocationFilter] = useState<LocationFilter>({});
+
   const handleLocationChange = (location: string) => {
     setLocationFilter((prevFilter) => ({
       ...prevFilter,
-      location: [location]
+      location: commaSeparatedStringToArray(location)
     }));
+    if (location) {
+      setQueryParametersInUrl({ location });
+    } else {
+      removeQueryParametersFromUrl("location");
+    }
   };
+
   const handleSublocationChange = (sublocation: string) => {
     setLocationFilter((prevFilter) => ({
       ...prevFilter,
-      sublocation: [sublocation]
+      sublocation: commaSeparatedStringToArray(sublocation)
     }));
+    if (sublocation) {
+      setQueryParametersInUrl({ sublocation });
+    } else {
+      removeQueryParametersFromUrl("sublocation");
+    }
   };
 
   const [onShelf, setOnShelf] = useState(false);
@@ -83,6 +98,22 @@ const AdvancedSearch: React.FC<AdvancedSearchProps> = ({ pageSize }) => {
     if (getUrlQueryParam("onshelf") === "true") {
       setOnShelf(true);
     }
+
+    const locationParam = getUrlQueryParam("location");
+    if (locationParam) {
+      setLocationFilter((prevFilter) => ({
+        ...prevFilter,
+        location: commaSeparatedStringToArray(locationParam)
+      }));
+    }
+
+    const sublocationParam = getUrlQueryParam("sublocation");
+    if (sublocationParam) {
+      setLocationFilter((prevFilter) => ({
+        ...prevFilter,
+        sublocation: commaSeparatedStringToArray(sublocationParam)
+      }));
+    }
   });
 
   useEffect(() => {
@@ -120,6 +151,7 @@ const AdvancedSearch: React.FC<AdvancedSearchProps> = ({ pageSize }) => {
           setOnShelf={handleOnShelfChange}
           onLocationChange={handleLocationChange}
           onSublocationChange={handleSublocationChange}
+          locationFilter={locationFilter}
         />
       )}
       {executedQuery && (

src/apps/advanced-search/AdvancedSearchHeader.tsx

@@ -22,6 +22,7 @@ import {
 } from "./helpers";
 import { Button } from "../../components/Buttons/Button";
 import CheckBox from "../../components/checkbox/Checkbox";
+import { LocationFilter } from "./LocationFilter";
 
 export type AdvancedSearchHeaderProps = {
   dataCy?: string;
@@ -33,6 +34,7 @@ export type AdvancedSearchHeaderProps = {
   setOnShelf: (checked: boolean) => void;
   onLocationChange: (location: string) => void;
   onSublocationChange: (sublocation: string) => void;
+  locationFilter: LocationFilter;
 };
 
 const AdvancedSearchHeader: React.FC<AdvancedSearchHeaderProps> = ({
@@ -44,7 +46,8 @@ const AdvancedSearchHeader: React.FC<AdvancedSearchHeaderProps> = ({
   onShelf,
   setOnShelf,
   onLocationChange,
-  onSublocationChange
+  onSublocationChange,
+  locationFilter
 }) => {
   const t = useText();
   const [isFormMode, setIsFormMode] = useState<boolean>(true);
@@ -226,6 +229,7 @@ const AdvancedSearchHeader: React.FC<AdvancedSearchHeaderProps> = ({
           handleOnShelfChange={handleOnShelfChange}
           onLocationChange={onLocationChange}
           onSublocationChange={onSublocationChange}
+          locationFilter={locationFilter}
         />
       )}
 

src/apps/advanced-search/AdvancedSearchResults.tsx

@@ -70,8 +70,10 @@ const AdvancedSearchResult: React.FC<AdvancedSearchResultProps> = ({
     filters: {
       branchId: cleanBranches,
       status: onShelf ? [HoldingsStatus.OnShelf] : [],
-      ...(locationFilter?.location && { location: locationFilter.location }),
-      ...(locationFilter?.sublocation && {
+      ...(locationFilter?.location?.length && {
+        location: locationFilter.location
+      }),
+      ...(locationFilter?.sublocation?.length && {
         sublocation: locationFilter.sublocation
       })
     }

src/apps/advanced-search/CqlSearchHeader.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useText } from "../../core/utils/text";
 import CheckBox from "../../components/checkbox/Checkbox";
-import TextInput from "../../components/atoms/input/TextInput";
+import { LocationFilter } from "./LocationFilter";
+import Textarea from "../../components/forms/textarea/Textarea";
+import TextInput from "../../components/forms/input/TextInput";
 
 export type CqlSearchHeaderProps = {
   dataCy?: string;
@@ -11,6 +13,7 @@ export type CqlSearchHeaderProps = {
   handleOnShelfChange: (newState: boolean) => void;
   onLocationChange: (location: string) => void;
   onSublocationChange: (sublocation: string) => void;
+  locationFilter: LocationFilter;
 };
 
 const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
@@ -20,7 +23,8 @@ const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
   onShelf,
   handleOnShelfChange,
   onLocationChange,
-  onSublocationChange
+  onSublocationChange,
+  locationFilter
 }) => {
   const t = useText();
 
@@ -30,6 +34,31 @@ const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
     }
   }, [initialCql, setCql]);
 
+  // Local state is needed to track input values as plain strings,
+  // since onLocationChange expects a comma-separated string,
+  // while locationFilter location and sublocation are provided as arrays.
+  const [inputValues, setInputValues] = useState({
+    location: locationFilter?.location?.join(", ") ?? "",
+    sublocation: locationFilter?.sublocation?.join(", ") ?? ""
+  });
+
+  const handleInputChange = (
+    name: "location" | "sublocation",
+    value: string
+  ) => {
+    setInputValues((prevValues) => ({
+      ...prevValues,
+      [name]: value
+    }));
+
+    if (name === "location") {
+      onLocationChange(value);
+    }
+    if (name === "sublocation") {
+      onSublocationChange(value);
+    }
+  };
+
   return (
     <>
       <h1
@@ -38,33 +67,43 @@ const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
       >
         {t("cqlSearchTitleText")}
       </h1>
-      <textarea
-        className="advanced-search__cql-input focus-styling__input"
-        cols={100}
-        rows={5}
-        placeholder="e.g. title=snemand*"
-        data-cy={`${dataCy}-input`}
-        onChange={(e) => setCql(e.target.value)}
-        defaultValue={initialCql}
-      />
-      <TextInput
-        id="location"
-        label="Location"
-        type="text"
-        onChange={(location) => onLocationChange(location)}
-      />
-      <TextInput
-        id="location"
-        label="Sublocation"
-        type="text"
-        onChange={(sublocation) => onSublocationChange(sublocation)}
-      />
-      <CheckBox
-        id="on-shelf"
-        selected={onShelf}
-        onChecked={handleOnShelfChange}
-        label={t("advancedSearchFilterHoldingStatusText")}
-      />
+      <form className="advanced-search-cql-form">
+        <Textarea
+          id="cql"
+          label="CQL"
+          className="advanced-search-cql-form__input focus-styling__input"
+          cols={100}
+          rows={5}
+          placeholder="e.g. 'harry potter'"
+          dataCy={`${dataCy}-input`}
+          onChange={(e) => setCql(e.target.value)}
+          defaultValue={initialCql}
+        />
+        <TextInput
+          id="location"
+          label={t("advancedSearchFilterLocationText")}
+          description={t("advancedSearchFilterLocationDescriptionText")}
+          type="text"
+          onChange={(location) => handleInputChange("location", location)}
+          value={inputValues.location}
+        />
+        <TextInput
+          id="sublocation"
+          label={t("advancedSearchFilterSublocationText")}
+          description={t("advancedSearchFilterSublocationDescriptionText")}
+          type="text"
+          onChange={(sublocation) =>
+            handleInputChange("sublocation", sublocation)
+          }
+          value={inputValues.sublocation}
+        />
+        <CheckBox
+          id="on-shelf"
+          selected={onShelf}
+          onChecked={handleOnShelfChange}
+          label={t("advancedSearchFilterHoldingStatusText")}
+        />
+      </form>
     </>
   );
 };

src/apps/advanced-search/LocationFilter.ts

@@ -1,4 +1,4 @@
 export interface LocationFilter {
-  location?: [string];
-  sublocation?: [string];
+  location?: string[];
+  sublocation?: string[];
 }

src/apps/advanced-search/helpers.tsx

@@ -130,4 +130,11 @@ export const shouldAdvancedSearchButtonBeDisabled = (
   }
 };
 
+export const commaSeparatedStringToArray = (input: string): string[] => {
+  return input
+    .split(",")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+};
+
 export default {};

src/apps/dashboard/dashboard.mount.ts

@@ -1,5 +1,4 @@
 import addMount from "../../core/addMount";
-
 import DashBoard from "./dashboard.entry";
 
 addMount({ appName: "DashBoard", app: DashBoard });