From 3b71345ade8e91caaa57c723780320d94389c6ab Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Tue, 24 Sep 2024 13:25:19 +0200 Subject: [PATCH 01/18] Using latest version (2024.39.0) of design system --- package.json | 2 +- yarn.lock | 39 +++++++-------------------------------- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 407f0f054a..0bef0bf479 100644 --- a/package.json +++ b/package.json @@ -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.39.0-b108f0932dde82a7db1ef93e7d09a109d2c58363", "@fullcalendar/core": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/interaction": "^6.1.15", diff --git a/yarn.lock b/yarn.lock index d4e558c232..e306ea6a96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1688,10 +1688,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@danskernesdigitalebibliotek/dpl-design-system@^2024.38.0-0dbeffee4f1a1dce73311d4744a9bf02acceeeb1": - version "2024.38.0-0dbeffee4f1a1dce73311d4744a9bf02acceeeb1" - resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2024.38.0-0dbeffee4f1a1dce73311d4744a9bf02acceeeb1/2ab697e3935b4d0a4161333359bacd45e041bb84#2ab697e3935b4d0a4161333359bacd45e041bb84" - integrity sha512-/Ub3iTyL0FgapnmfnvTClg0euC7bjxPaKJ2lNA3bPBZptWwoyhAXr6OXFQnSpzMTWP6sh2cxLW30FEZtcauodA== +"@danskernesdigitalebibliotek/dpl-design-system@^2024.39.0-b108f0932dde82a7db1ef93e7d09a109d2c58363": + version "2024.39.0-b108f0932dde82a7db1ef93e7d09a109d2c58363" + resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2024.39.0-b108f0932dde82a7db1ef93e7d09a109d2c58363/1e13e3cab19990d156ac517ba6e27bd622148695#1e13e3cab19990d156ac517ba6e27bd622148695" + integrity sha512-1zqMCnr6BHUq5rvc3a8XhulFSNsK2ExuN+/FDCVQOL22wgUxyKGD5qC8zq38/mpdU/YgoiqE63tEHT/b3gmjlg== "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3": version "0.5.7" @@ -18067,7 +18067,7 @@ string-env-interpolation@1.0.1, string-env-interpolation@^1.0.1: resolved "https://registry.npmjs.org/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz" integrity sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18093,15 +18093,6 @@ string-width@^1.0.1: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^3.0.0, string-width@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz" @@ -18265,7 +18256,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18293,13 +18284,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2" @@ -20348,7 +20332,7 @@ worker-rpc@^0.1.0: dependencies: microevent.ts "~0.1.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -20383,15 +20367,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From b3b466fe104fbd5ede0314dde54c39df90857983 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 18 Sep 2024 12:57:57 +0200 Subject: [PATCH 02/18] Add "location" and "sublocation" URL parameters in advanced search (CQL) Implements URL parameters for `location` and `sublocation`. Additionally, the parameters from the URL are processed in `useEffectOnce`, ensuring they are included on the first load. The `removeQueryParametersFromUrl` function is used to remove the parameters if their strings are empty. Currently, the code does not handle multiple "locations" or "sublocations." It is unclear whether this is necessary, and I am awaiting a response from DDF regarding this. --- src/apps/advanced-search/AdvancedSearch.tsx | 27 +++++++++++++++++++ .../advanced-search/AdvancedSearchHeader.tsx | 6 ++++- src/apps/advanced-search/CqlSearchHeader.tsx | 9 +++++-- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/apps/advanced-search/AdvancedSearch.tsx b/src/apps/advanced-search/AdvancedSearch.tsx index cd6ab998c9..0726327364 100644 --- a/src/apps/advanced-search/AdvancedSearch.tsx +++ b/src/apps/advanced-search/AdvancedSearch.tsx @@ -35,12 +35,22 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { ...prevFilter, location: [location] })); + if (location) { + setQueryParametersInUrl({ location }); + } else { + removeQueryParametersFromUrl("location"); + } }; const handleSublocationChange = (sublocation: string) => { setLocationFilter((prevFilter) => ({ ...prevFilter, sublocation: [sublocation] })); + if (sublocation) { + setQueryParametersInUrl({ sublocation }); + } else { + removeQueryParametersFromUrl("sublocation"); + } }; const [onShelf, setOnShelf] = useState(false); @@ -83,6 +93,22 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { if (getUrlQueryParam("onshelf") === "true") { setOnShelf(true); } + + const locationParam = getUrlQueryParam("location"); + if (locationParam) { + setLocationFilter((prevFilter) => ({ + ...prevFilter, + location: [locationParam] + })); + } + + const sublocationParam = getUrlQueryParam("sublocation"); + if (sublocationParam) { + setLocationFilter((prevFilter) => ({ + ...prevFilter, + sublocation: [sublocationParam] + })); + } }); useEffect(() => { @@ -120,6 +146,7 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { setOnShelf={handleOnShelfChange} onLocationChange={handleLocationChange} onSublocationChange={handleSublocationChange} + locationFilter={locationFilter} /> )} {executedQuery && ( diff --git a/src/apps/advanced-search/AdvancedSearchHeader.tsx b/src/apps/advanced-search/AdvancedSearchHeader.tsx index a137fda14d..e85b44c1dd 100644 --- a/src/apps/advanced-search/AdvancedSearchHeader.tsx +++ b/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 = ({ @@ -44,7 +46,8 @@ const AdvancedSearchHeader: React.FC = ({ onShelf, setOnShelf, onLocationChange, - onSublocationChange + onSublocationChange, + locationFilter }) => { const t = useText(); const [isFormMode, setIsFormMode] = useState(true); @@ -226,6 +229,7 @@ const AdvancedSearchHeader: React.FC = ({ handleOnShelfChange={handleOnShelfChange} onLocationChange={onLocationChange} onSublocationChange={onSublocationChange} + locationFilter={locationFilter} /> )} diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index 5c65e4ff47..9bde200d7c 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -2,6 +2,7 @@ import React, { useEffect } 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"; export type CqlSearchHeaderProps = { dataCy?: string; @@ -11,6 +12,7 @@ export type CqlSearchHeaderProps = { handleOnShelfChange: (newState: boolean) => void; onLocationChange: (location: string) => void; onSublocationChange: (sublocation: string) => void; + locationFilter: LocationFilter; }; const CqlSearchHeader: React.FC = ({ @@ -20,7 +22,8 @@ const CqlSearchHeader: React.FC = ({ onShelf, handleOnShelfChange, onLocationChange, - onSublocationChange + onSublocationChange, + locationFilter }) => { const t = useText(); @@ -52,12 +55,14 @@ const CqlSearchHeader: React.FC = ({ label="Location" type="text" onChange={(location) => onLocationChange(location)} + value={locationFilter?.location?.[0] ?? ""} /> onSublocationChange(sublocation)} + value={locationFilter?.sublocation?.[0] ?? ""} /> Date: Wed, 18 Sep 2024 15:30:27 +0200 Subject: [PATCH 03/18] Refactor "location" and "sublocation" fields to support multiple values in advanced search (CQL) This allow users to search across several locations or sublocations by using a comma-separated string in the input fields. --- src/apps/advanced-search/AdvancedSearch.tsx | 15 +++++--- .../advanced-search/AdvancedSearchResults.tsx | 6 ++- src/apps/advanced-search/CqlSearchHeader.tsx | 37 ++++++++++++++++--- src/apps/advanced-search/LocationFilter.ts | 4 +- src/apps/advanced-search/helpers.tsx | 7 ++++ 5 files changed, 55 insertions(+), 14 deletions(-) diff --git a/src/apps/advanced-search/AdvancedSearch.tsx b/src/apps/advanced-search/AdvancedSearch.tsx index 0726327364..16994c68a7 100644 --- a/src/apps/advanced-search/AdvancedSearch.tsx +++ b/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,10 +33,11 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { const [executedQuery, setExecutedQuery] = useState(null); const [locationFilter, setLocationFilter] = useState({}); + const handleLocationChange = (location: string) => { setLocationFilter((prevFilter) => ({ ...prevFilter, - location: [location] + location: commaSeparatedStringToArray(location) })); if (location) { setQueryParametersInUrl({ location }); @@ -41,10 +45,11 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { removeQueryParametersFromUrl("location"); } }; + const handleSublocationChange = (sublocation: string) => { setLocationFilter((prevFilter) => ({ ...prevFilter, - sublocation: [sublocation] + sublocation: commaSeparatedStringToArray(sublocation) })); if (sublocation) { setQueryParametersInUrl({ sublocation }); @@ -98,7 +103,7 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { if (locationParam) { setLocationFilter((prevFilter) => ({ ...prevFilter, - location: [locationParam] + location: commaSeparatedStringToArray(locationParam) })); } @@ -106,7 +111,7 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { if (sublocationParam) { setLocationFilter((prevFilter) => ({ ...prevFilter, - sublocation: [sublocationParam] + sublocation: commaSeparatedStringToArray(sublocationParam) })); } }); diff --git a/src/apps/advanced-search/AdvancedSearchResults.tsx b/src/apps/advanced-search/AdvancedSearchResults.tsx index e44b23bb9a..ed0ce6b8f1 100644 --- a/src/apps/advanced-search/AdvancedSearchResults.tsx +++ b/src/apps/advanced-search/AdvancedSearchResults.tsx @@ -70,8 +70,10 @@ const AdvancedSearchResult: React.FC = ({ 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 }) } diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index 9bde200d7c..fd78b3a1ac 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -1,4 +1,4 @@ -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"; @@ -33,6 +33,31 @@ const CqlSearchHeader: React.FC = ({ } }, [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 ( <>

= ({ id="location" label="Location" type="text" - onChange={(location) => onLocationChange(location)} - value={locationFilter?.location?.[0] ?? ""} + onChange={(location) => handleInputChange("location", location)} + value={inputValues.location} /> onSublocationChange(sublocation)} - value={locationFilter?.sublocation?.[0] ?? ""} + onChange={(sublocation) => + handleInputChange("sublocation", sublocation) + } + value={inputValues.sublocation} /> { + return input + .split(",") + .map((s) => s.trim()) + .filter((s) => s.length > 0); +}; + export default {}; From c011515c85351bb4fe840f2209b72209b02a609c Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 Sep 2024 13:10:20 +0200 Subject: [PATCH 04/18] Add translations to `AdvancedSearch` - Location - Sublocation --- src/apps/advanced-search/AdvancedSearch.dev.tsx | 10 ++++++++++ src/apps/advanced-search/AdvancedSearch.entry.tsx | 2 ++ src/apps/advanced-search/CqlSearchHeader.tsx | 4 ++-- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/apps/advanced-search/AdvancedSearch.dev.tsx b/src/apps/advanced-search/AdvancedSearch.dev.tsx index 8c0ac118f8..d9a0d58b2f 100644 --- a/src/apps/advanced-search/AdvancedSearch.dev.tsx +++ b/src/apps/advanced-search/AdvancedSearch.dev.tsx @@ -354,6 +354,16 @@ export default { name: "Advanced search filter - holding status", defaultValue: "Holding Status On Shelf", control: { type: "text" } + }, + advancedSearchFilterLocationText: { + name: "Advanced search filter - location", + defaultValue: "Location", + control: { type: "text" } + }, + advancedSearchFilterSublocationText: { + name: "Advanced search filter - sublocation", + defaultValue: "Sublocation", + control: { type: "text" } } } } as ComponentMeta; diff --git a/src/apps/advanced-search/AdvancedSearch.entry.tsx b/src/apps/advanced-search/AdvancedSearch.entry.tsx index 41d4d0159a..c6f260913b 100644 --- a/src/apps/advanced-search/AdvancedSearch.entry.tsx +++ b/src/apps/advanced-search/AdvancedSearch.entry.tsx @@ -67,6 +67,8 @@ interface AdvancedSearchEntryTextProps { advancedSearchFilterHoldingStatusText: string; advancedSearchInputLabelText: string; advancedSearchRemoveRowText: string; + advancedSearchFilterLocationText: string; + advancedSearchFilterSublocationText: string; } interface AdvancedSearchEntryConfigProps { diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index fd78b3a1ac..c94d60f1a0 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -77,14 +77,14 @@ const CqlSearchHeader: React.FC = ({ /> handleInputChange("location", location)} value={inputValues.location} /> handleInputChange("sublocation", sublocation) From d7c8990fa2aed02befa8941a482da65e7e52696f Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 Sep 2024 15:24:19 +0200 Subject: [PATCH 05/18] Add descriptions to form elements in `CqlSearchHeader` --- src/apps/advanced-search/AdvancedSearch.dev.tsx | 10 ++++++++++ src/apps/advanced-search/AdvancedSearch.entry.tsx | 2 ++ src/apps/advanced-search/CqlSearchHeader.tsx | 2 ++ 3 files changed, 14 insertions(+) diff --git a/src/apps/advanced-search/AdvancedSearch.dev.tsx b/src/apps/advanced-search/AdvancedSearch.dev.tsx index d9a0d58b2f..39defee9e4 100644 --- a/src/apps/advanced-search/AdvancedSearch.dev.tsx +++ b/src/apps/advanced-search/AdvancedSearch.dev.tsx @@ -360,10 +360,20 @@ export default { defaultValue: "Location", control: { type: "text" } }, + advancedSearchFilterLocationDescriptionText: { + name: "Advanced search filter - location description", + defaultValue: "Add a comma separated list for multiple locations", + control: { type: "text" } + }, advancedSearchFilterSublocationText: { name: "Advanced search filter - sublocation", defaultValue: "Sublocation", control: { type: "text" } + }, + advancedSearchFilterSublocationDescriptionText: { + name: "Advanced search filter - sublocation description", + defaultValue: "Add a comma separated list for multiple sublocations", + control: { type: "text" } } } } as ComponentMeta; diff --git a/src/apps/advanced-search/AdvancedSearch.entry.tsx b/src/apps/advanced-search/AdvancedSearch.entry.tsx index c6f260913b..b119c5a4e7 100644 --- a/src/apps/advanced-search/AdvancedSearch.entry.tsx +++ b/src/apps/advanced-search/AdvancedSearch.entry.tsx @@ -68,7 +68,9 @@ interface AdvancedSearchEntryTextProps { advancedSearchInputLabelText: string; advancedSearchRemoveRowText: string; advancedSearchFilterLocationText: string; + advancedSearchFilterLocationDescriptionText: string; advancedSearchFilterSublocationText: string; + advancedSearchFilterSublocationDescriptionText: string; } interface AdvancedSearchEntryConfigProps { diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index c94d60f1a0..501a8399f7 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -78,6 +78,7 @@ const CqlSearchHeader: React.FC = ({ handleInputChange("location", location)} value={inputValues.location} @@ -85,6 +86,7 @@ const CqlSearchHeader: React.FC = ({ handleInputChange("sublocation", sublocation) From a721f13597b54855ca0c30d1e9ff82077be3a754 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 Sep 2024 15:35:52 +0200 Subject: [PATCH 06/18] Implement `Textarea` component and integrate it into `CqlSearchHeader` + Add form wrapper The `Textarea` is added to keep the structure consistent, and the class `advanced-search-cql-form` is used to maintain spacing between elements. --- src/apps/advanced-search/CqlSearchHeader.tsx | 17 ++++--- src/components/forms/label/Label.tsx | 16 +++++++ src/components/forms/textarea/Textarea.tsx | 50 ++++++++++++++++++++ 3 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 src/components/forms/label/Label.tsx create mode 100644 src/components/forms/textarea/Textarea.tsx diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index 501a8399f7..82242a8049 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -3,6 +3,7 @@ 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"; export type CqlSearchHeaderProps = { dataCy?: string; @@ -59,19 +60,23 @@ const CqlSearchHeader: React.FC = ({ }; return ( - <> +

{t("cqlSearchTitleText")}

-