Advanced search UI

package.json

@@ -17,7 +17,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "v2.0.0-pr344.5fd4982",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.61",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -193,4 +193,4 @@
   "overrides": {
     "@parcel/watcher": "2.1.0"
   }
-}
+}

packages/design-system/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# Non Published Changes
+
+- **SelectAdvanced:** Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
+
 # [2.0.2](https://github.com/IQSS/dataverse-frontend/compare/@iqss/dataverse-design-system@2.0.1...@iqss/dataverse-design-system@2.0.2) (2024-06-23)
 
 ### Bug Fixes

packages/design-system/src/lib/components/select-advanced/SelectAdvanced.module.scss

@@ -154,6 +154,7 @@
 
     &__checkbox-input {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
       padding-left: 0;
 
@@ -164,15 +165,16 @@
       }
 
       label {
-        width: 100%;
         padding-left: 0.5rem;
         padding-block: 0.25rem;
+        white-space: wrap;
       }
     }
   }
 
   .option-item-not-multiple {
     margin-bottom: 0.125rem;
+    white-space: wrap;
     cursor: pointer;
     transition: background-color 0.1s ease-in-out;
   }

public/locales/en/advancedSearch.json

@@ -0,0 +1,97 @@
+{
+  "pageTitle": "Advanced Search",
+  "clearForm": "Clear Form",
+  "collections": {
+    "name": {
+      "label": "Name",
+      "description": "The project, department, university, professor, or journal this collection will contain data for.",
+      "invalid": {
+        "maxLength": "Name must be at most {{maxLength}} characters."
+      }
+    },
+    "affiliation": {
+      "label": "Affiliation",
+      "description": "The organization with which this collection is affiliated.",
+      "invalid": {
+        "maxLength": "Affiliation must be at most {{maxLength}} characters."
+      }
+    },
+    "alias": {
+      "label": "Identifier",
+      "description": "Short name used for the URL of this collection.",
+      "invalid": {
+        "maxLength": "Identifier must be at most {{maxLength}} characters."
+      }
+    },
+    "description": {
+      "label": "Description",
+      "description": "A summary describing the purpose, nature or scope of this collection.",
+      "invalid": {
+        "maxLength": "Description must be at most {{maxLength}} characters."
+      }
+    },
+    "subject": {
+      "label": "Subject",
+      "description": "Domain-specific Subject Categories that are topically relevant to this Collection.",
+      "invalid": {
+        "maxLength": "Subject must be at most {{maxLength}} characters."
+      }
+    }
+  },
+  "files": {
+    "name": {
+      "label": "Name",
+      "description": "The name given to identify the file.",
+      "invalid": {
+        "maxLength": "Name must be at most {{maxLength}} characters."
+      }
+    },
+    "description": {
+      "label": "Description",
+      "description": "A summary describing the file and its variables.",
+      "invalid": {
+        "maxLength": "Description must be at most {{maxLength}} characters."
+      }
+    },
+    "fileType": {
+      "label": "File Type",
+      "description": "The file type, e.g. Comma Separated Values, Plain Text, R, etc.",
+      "invalid": {
+        "maxLength": "File Type must be at most {{maxLength}} characters."
+      }
+    },
+    "dataFilePersistentId": {
+      "label": "Data File Persistent ID",
+      "description": "The unique persistent identifier for the file.",
+      "invalid": {
+        "maxLength": "Data File Persistent ID must be at most {{maxLength}} characters."
+      }
+    },
+    "variableName": {
+      "label": "Variable Name",
+      "description": "The name of the variable's column in the data frame.",
+      "invalid": {
+        "maxLength": "Variable Name must be at most {{maxLength}} characters."
+      }
+    },
+    "variableLabel": {
+      "label": "Variable Label",
+      "description": "A short description of the variable.",
+      "invalid": {
+        "maxLength": "Variable Label must be at most {{maxLength}} characters."
+      }
+    },
+    "fileTags": {
+      "label": "File Tags",
+      "description": "Terms such as \"Documentation\", \"Data\", or \"Code\" that have been applied to files.",
+      "invalid": {
+        "maxLength": "File Tags must be at most {{maxLength}} characters."
+      }
+    }
+  },
+  "datasets": {
+    "invalid": {
+      "maxLength": "{{fieldName}} must be at most {{maxLength}} characters."
+    }
+  }
+}

public/locales/en/collection.json

@@ -33,6 +33,7 @@
   "datasetFilterTypeLabel": "Datasets",
   "fileFilterTypeLabel": "Files",
   "searchThisCollectionPlaceholder": "Search this collection...",
+  "advancedSearch": "Advanced Search",
   "publish": {
     "title": "Publish Collection",
     "button": "Publish",

public/locales/en/shared.json

@@ -1,6 +1,8 @@
 {
   "collection": "Collection",
+  "collections": "Collections",
   "dataset": "Dataset",
+  "datasets": "Datasets",
   "file": "File",
   "files": "Files",
   "page": "Page",
@@ -24,6 +26,7 @@
   "submitSearch": "Submit Search",
   "dragHandleLabel": "press space to select and keys to drag",
   "unknown": "Unknown",
+  "find": "Find",
   "pageNumberNotFound": {
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."

src/metadata-block-info/domain/models/MetadataBlockInfo.ts

@@ -24,6 +24,7 @@ export interface MetadataField {
   isControlledVocabulary: boolean
   displayFormat: string
   isRequired: boolean
+  isAdvancedSearchFieldType: boolean
   displayOrder: number
   controlledVocabularyValues?: string[]
   childMetadataFields?: Record<string, MetadataField>

src/router/routes.tsx

@@ -117,6 +117,12 @@ const SignUpPage = lazy(() =>
   }))
 )
 
+const AdvancedSearchPage = lazy(() =>
+  import('../sections/advanced-search/AdvancedSearchFactory').then(({ AdvancedSearchFactory }) => ({
+    default: () => AdvancedSearchFactory.create()
+  }))
+)
+
 export const routes: RouteObject[] = [
   {
     element: <SessionProvider repository={userRepository} />,
@@ -180,6 +186,15 @@ export const routes: RouteObject[] = [
             ),
             errorElement: <ErrorPage />
           },
+          {
+            path: Route.ADVANCED_SEARCH,
+            element: (
+              <Suspense fallback={<AppLoader />}>
+                <AdvancedSearchPage />
+              </Suspense>
+            ),
+            errorElement: <ErrorPage />
+          },
           {
             path: Route.AUTH_CALLBACK,
             element: <AuthCallback />

src/search/domain/models/SearchFields.ts

@@ -0,0 +1,21 @@
+/**
+ * This class is inspired by https://github.com/IQSS/dataverse/blob/develop/src/main/java/edu/harvard/iq/dataverse/search/SearchFields.java
+ */
+
+export class SearchFields {
+  public static readonly DATAVERSE_NAME = 'dvName'
+  public static readonly DATAVERSE_ALIAS = 'dvAlias'
+  public static readonly DATAVERSE_AFFILIATION = 'dvAffiliation'
+  public static readonly DATAVERSE_DESCRIPTION = 'dvDescription'
+  public static readonly DATAVERSE_SUBJECT = 'dvSubject'
+
+  public static readonly FILE_NAME = 'fileName'
+  public static readonly FILE_DESCRIPTION = 'fileDescription'
+  public static readonly FILE_TYPE_SEARCHABLE = 'fileType'
+  public static readonly FILE_PERSISTENT_ID = 'filePersistentId'
+
+  public static readonly VARIABLE_NAME = 'variableName'
+  public static readonly VARIABLE_LABEL = 'variableLabel'
+
+  public static readonly FILE_TAG_SEARCHABLE = 'fileTags'
+}

src/sections/Route.enum.ts

@@ -22,7 +22,8 @@ export enum Route {
   FEATURED_ITEM = '/featured-item/:parentCollectionId/:featuredItemId',
   NOT_FOUND_PAGE = '/404',
   AUTH_CALLBACK = '/auth-callback',
-  SIGN_UP = '/sign-up'
+  SIGN_UP = '/sign-up',
+  ADVANCED_SEARCH = '/collections/:collectionId/search'
 }
 
 export const RouteWithParams = {
@@ -66,7 +67,8 @@ export const RouteWithParams = {
     return `/files/replace?${searchParams.toString()}`
   },
   FEATURED_ITEM: (parentCollectionId: string, featuredItemId: string) =>
-    `/featured-item/${parentCollectionId}/${featuredItemId}`
+    `/featured-item/${parentCollectionId}/${featuredItemId}`,
+  ADVANCED_SEARCH: (collectionId: string) => `/collections/${collectionId}/search`
 }
 
 export enum QueryParamKey {

src/sections/account/my-data-section/MyDataItemsPanel.tsx

@@ -9,7 +9,7 @@ import {
   ItemsListType
 } from '@/sections/collection/collection-items-panel/items-list/ItemsList'
 import { MyDataFilterPanel } from '@/sections/account/my-data-section/my-data-filter-panel/MyDataFilterPanel'
-import { SearchPanel } from '@/sections/collection/collection-items-panel/search-panel/SearchPanel'
+import { SearchInput } from '@/sections/collection/collection-items-panel/search-input/SearchInput'
 import { ItemTypeChange } from '@/sections/collection/collection-items-panel/filter-panel/type-filters/TypeFilters'
 import { MyDataSearchCriteria } from '@/sections/account/my-data-section/MyDataSearchCriteria'
 import { useGetMyDataAccumulatedItems } from '@/sections/account/my-data-section/useGetMyDataAccumulatedItems'
@@ -269,7 +269,7 @@ export const MyDataItemsPanel = ({
 
       <section className={styles['items-panel']}>
         <header className={styles['top-wrapper']}>
-          <SearchPanel
+          <SearchInput
             onSubmitSearch={handleSearchSubmit}
             currentSearchValue={currentSearchCriteria.searchText}
             isLoadingCollectionItems={isLoadingItems}