External Search SPA Integration

packages/design-system/CHANGELOG.md

@@ -5,6 +5,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # Non Published Changes
 
+- **DropdownButton:**
+  - Add `customToggle` prop to allow custom toggle components.
+  - Add `customToggleClassname` and `customToggleMenuClassname` props to allow custom styling of the custom toggle dropdown wrapper and menu.
+  - Add `align` prop to control the alignment of the dropdown menu.
+- **DropdownButtonItem:**
+  - Add `type` prop to allow specifying the type of the element.
 - **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)

packages/design-system/src/lib/components/dropdown-button/DropdownButton.tsx

@@ -1,14 +1,20 @@
-import { DropdownButton as DropdownButtonBS } from 'react-bootstrap'
-import { ReactNode } from 'react'
+import { DropdownButton as DropdownButtonBS, Dropdown } from 'react-bootstrap'
+import { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react'
 import styles from './DropdownButton.module.scss'
 import { IconName } from '../icon/IconName'
 import { ButtonGroup } from '../button-group/ButtonGroup'
 import { Icon } from '../icon/Icon'
 
 type DropdownButtonVariant = 'primary' | 'secondary' | 'link'
+
+interface CustomToggleProps {
+  onClick: (event: React.MouseEvent<HTMLElement>) => void
+  [key: string]: unknown
+}
+
 interface DropdownButtonProps {
   id: string
-  title: string
+  title?: string
   variant?: DropdownButtonVariant
   icon?: IconName | ReactNode
   withSpacing?: boolean
@@ -17,6 +23,10 @@ interface DropdownButtonProps {
   disabled?: boolean
   children: ReactNode
   ariaLabel?: string
+  customToggle?: ComponentType<CustomToggleProps> | ForwardRefExoticComponent<CustomToggleProps>
+  customToggleClassname?: string
+  customToggleMenuClassname?: string
+  align?: 'end' | 'start'
 }
 
 export function DropdownButton({
@@ -29,22 +39,37 @@ export function DropdownButton({
   onSelect,
   disabled,
   ariaLabel,
+  customToggle,
+  customToggleClassname,
+  customToggleMenuClassname,
+  align,
   children
 }: DropdownButtonProps) {
+  // If customToggle is provided, use Dropdown instead of DropdownButtonBS
+  if (customToggle) {
+    return (
+      <Dropdown id={id} onSelect={onSelect} className={customToggleClassname} align={align}>
+        <Dropdown.Toggle as={customToggle} />
+        <Dropdown.Menu className={customToggleMenuClassname}>{children}</Dropdown.Menu>
+      </Dropdown>
+    )
+  }
+
   return (
     <DropdownButtonBS
       className={withSpacing ? styles.spacing : ''}
       id={id}
       title={
         <>
           {typeof icon === 'string' ? <Icon name={icon} /> : icon}
-          {title}
+          {title && title}
         </>
       }
       aria-label={ariaLabel || title}
       variant={variant}
       as={asButtonGroup ? ButtonGroup : undefined}
       disabled={disabled}
+      align={align}
       onSelect={onSelect}>
       {children}
     </DropdownButtonBS>

packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx

@@ -9,6 +9,9 @@ interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode
   as?: ElementType
   to?: string // When passing <Link> as the `as` prop, this prop is used to pass the URL <DropdownButtonItem as={Link} to="/some-path">...</DropdownButtonItem>
+  type?: string // For button or input elements
+  active?: boolean
+  className?: string
 }
 
 export function DropdownButtonItem({
@@ -18,6 +21,8 @@ export function DropdownButtonItem({
   download,
   children,
   as,
+  active,
+  className,
   ...props
 }: DropdownItemProps) {
   return (
@@ -27,6 +32,8 @@ export function DropdownButtonItem({
       disabled={disabled}
       download={download}
       as={as}
+      active={active}
+      className={className}
       {...props}>
       {children}
     </DropdownBS.Item>

packages/design-system/src/lib/stories/dropdown-button/DropdownButton.stories.tsx

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { forwardRef } from 'react'
 import { DropdownButtonItem } from '../../components/dropdown-button/dropdown-button-item/DropdownButtonItem'
 import { DropdownButton } from '../../components/dropdown-button/DropdownButton'
 import { IconName } from '../../components/icon/IconName'
 import { CanvasFixedHeight } from '../CanvasFixedHeight'
 import { DropdownSeparator } from '../../components/dropdown-button/dropdown-separator/DropdownSeparator'
 import { DropdownHeader } from '../../components/dropdown-button/dropdown-header/DropdownHeader'
+import { Icon } from '../../components/icon/Icon'
 
 /**
  * ## Description
@@ -192,3 +194,46 @@ export const UseCaseSelect: Story = {
     </CanvasFixedHeight>
   )
 }
+
+// Custom Toggle Component Example
+const CustomToggle = forwardRef<
+  HTMLButtonElement,
+  { onClick: (event: React.MouseEvent<HTMLElement>) => void }
+>(({ onClick }, ref) => (
+  <button
+    type="button"
+    ref={ref}
+    onClick={onClick}
+    style={{
+      display: 'grid',
+      placeItems: 'center',
+      padding: '8px 16px',
+      borderRadius: '999px',
+      cursor: 'pointer',
+      backgroundColor: 'orange',
+      fontSize: '22px'
+    }}>
+    <Icon name={IconName.COLLECTION} />
+  </button>
+))
+
+CustomToggle.displayName = 'CustomToggle'
+
+export const WithCustomToggle: Story = {
+  name: 'With Custom Toggle',
+  render: () => (
+    <CanvasFixedHeight height={150}>
+      <DropdownButton
+        withSpacing
+        title=""
+        id="dropdown-custom-toggle"
+        customToggle={CustomToggle}
+        onSelect={() => {}}>
+        <DropdownHeader>Choose an Option</DropdownHeader>
+        <DropdownButtonItem eventKey="option-1">Custom Option 1</DropdownButtonItem>
+        <DropdownButtonItem eventKey="option-2">Custom Option 2</DropdownButtonItem>
+        <DropdownButtonItem eventKey="option-3">Custom Option 3</DropdownButtonItem>
+      </DropdownButton>
+    </CanvasFixedHeight>
+  )
+}

packages/design-system/tests/component/dropdown-button/DropdownButton.spec.tsx

@@ -121,4 +121,30 @@ describe('DropdownButton', () => {
     )
     cy.findByText(titleText).should('be.disabled')
   })
+
+  it('renders with custom toggle', () => {
+    const CustomToggle = ({
+      onClick
+    }: {
+      onClick: (event: React.MouseEvent<HTMLElement>) => void
+    }) => (
+      <button type="button" onClick={onClick}>
+        Custom Toggle
+      </button>
+    )
+
+    cy.mount(
+      <DropdownButton
+        id="dropdown-custom-toggle"
+        title={titleText}
+        customToggle={CustomToggle}
+        onSelect={() => {}}>
+        <DropdownItem eventKey="option-1">Custom Option 1</DropdownItem>
+        <DropdownItem eventKey="option-2">Custom Option 2</DropdownItem>
+        <DropdownItem eventKey="option-3">Custom Option 3</DropdownItem>
+      </DropdownButton>
+    )
+
+    cy.findByText('Custom Toggle').should('exist')
+  })
 })

public/locales/en/homepage.json

@@ -33,5 +33,9 @@
       "content": "Learn about getting started creating your own dataverse repository here.",
       "text_button": "Getting started"
     }
+  },
+  "searchDropdown": {
+    "header": "Search Services",
+    "buttonLabel": "Toggle search services dropdown"
   }
 }

src/collection/domain/models/CollectionItemsQueryParams.ts

@@ -4,5 +4,6 @@ export enum CollectionItemsQueryParams {
   START = 'start',
   TYPES = 'types',
   QUERY = 'q',
-  FILTER_QUERIES = 'fqs'
+  FILTER_QUERIES = 'fqs',
+  SEARCH_SERVICE = 'search_service'
 }

src/collection/domain/repositories/CollectionRepository.ts

@@ -21,7 +21,8 @@ export interface CollectionRepository {
   getItems(
     collectionId: string,
     paginationInfo: CollectionItemsPaginationInfo,
-    searchCriteria?: CollectionSearchCriteria
+    searchCriteria?: CollectionSearchCriteria,
+    searchService?: string
   ): Promise<CollectionItemSubset>
   getMyDataItems: (
     roleIds: number[],

src/collection/domain/useCases/getCollectionItems.ts

@@ -7,10 +7,11 @@ export async function getCollectionItems(
   collectionRepository: CollectionRepository,
   collectionId: string,
   paginationInfo: CollectionItemsPaginationInfo,
-  searchCriteria: CollectionSearchCriteria
+  searchCriteria: CollectionSearchCriteria,
+  searchService?: string
 ): Promise<CollectionItemSubset> {
   return collectionRepository
-    .getItems(collectionId, paginationInfo, searchCriteria)
+    .getItems(collectionId, paginationInfo, searchCriteria, searchService)
     .catch((error: Error) => {
       throw new Error(error.message)
     })

src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts

@@ -59,10 +59,17 @@ export class CollectionJSDataverseRepository implements CollectionRepository {
   getItems(
     collectionId: string,
     paginationInfo: CollectionItemsPaginationInfo,
-    searchCriteria: CollectionSearchCriteria
+    searchCriteria: CollectionSearchCriteria,
+    searchService?: string
   ): Promise<CollectionItemSubset> {
     return getCollectionItems
-      .execute(collectionId, paginationInfo?.pageSize, paginationInfo?.offset, searchCriteria)
+      .execute(
+        collectionId,
+        paginationInfo?.pageSize,
+        paginationInfo?.offset,
+        searchCriteria,
+        searchService
+      )
       .then((jsCollectionItemSubset) => {
         const collectionItemsPreviewsMapped = JSCollectionItemsMapper.toCollectionItemsPreviews(
           jsCollectionItemSubset.items

src/search/domain/hooks/useGetSearchServices.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react'
+import { ReadError } from '@iqss/dataverse-client-javascript'
+import { SearchRepository } from '../repositories/SearchRepository'
+import { SearchService } from '../models/SearchService'
+import { getSearchServices } from '../useCases/getSearchServices'
+import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
+
+interface useGetSearchServicesProps {
+  searchRepository: SearchRepository
+  autoFetch?: boolean
+}
+
+export const useGetSearchServices = ({
+  searchRepository,
+  autoFetch = true
+}: useGetSearchServicesProps) => {
+  const [searchServices, setSearchServices] = useState<SearchService[]>([])
+  const [isLoadingSearchServices, setIsLoadingSearchServices] = useState<boolean>(autoFetch)
+  const [errorSearchServices, setErrorSearchServices] = useState<string | null>(null)
+
+  const fetchSearchServices = useCallback(async () => {
+    setIsLoadingSearchServices(true)
+    setErrorSearchServices(null)
+
+    try {
+      const searchServicesResponse = await getSearchServices(searchRepository)
+
+      setSearchServices(searchServicesResponse)
+    } catch (err) {
+      if (err instanceof ReadError) {
+        const error = new JSDataverseReadErrorHandler(err)
+        const formattedError =
+          error.getReasonWithoutStatusCode() ?? /* istanbul ignore next */ error.getErrorMessage()
+
+        setErrorSearchServices(formattedError)
+      } else {
+        setErrorSearchServices('Something went wrong getting the search services. Try again later.')
+      }
+    } finally {
+      setIsLoadingSearchServices(false)
+    }
+  }, [searchRepository])
+
+  useEffect(() => {
+    if (autoFetch) {
+      void fetchSearchServices()
+    }
+  }, [autoFetch, fetchSearchServices])
+
+  return {
+    searchServices,
+    isLoadingSearchServices,
+    errorSearchServices,
+    fetchSearchServices
+  }
+}

src/search/domain/models/SearchService.ts

@@ -0,0 +1,4 @@
+export interface SearchService {
+  name: string
+  displayName: string
+}

src/search/domain/repositories/SearchRepository.ts

@@ -0,0 +1,5 @@
+import { SearchService } from '../models/SearchService'
+
+export interface SearchRepository {
+  getServices: () => Promise<SearchService[]>
+}

src/search/domain/useCases/getSearchServices.ts

@@ -0,0 +1,8 @@
+import { SearchService } from '../models/SearchService'
+import { SearchRepository } from '../repositories/SearchRepository'
+
+export async function getSearchServices(
+  searchRepository: SearchRepository
+): Promise<SearchService[]> {
+  return searchRepository.getServices()
+}

src/search/infrastructure/repositories/SearchJSRepository.ts

@@ -0,0 +1,9 @@
+import { SearchService } from '@/search/domain/models/SearchService'
+import { SearchRepository } from '@/search/domain/repositories/SearchRepository'
+import { getSearchServices } from '@iqss/dataverse-client-javascript'
+
+export class SearchJSRepository implements SearchRepository {
+  getServices(): Promise<SearchService[]> {
+    return getSearchServices.execute().then((searchServices) => searchServices)
+  }
+}

src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx

@@ -109,7 +109,6 @@ export const CollectionItemsPanel = ({
 
   const handleSearchSubmit = async (searchValue: string) => {
     const isSearchValueEmpty = searchValue === ''
-
     itemsListContainerRef.current?.scrollTo({ top: 0 })
 
     const resetPaginationInfo = new CollectionItemsPaginationInfo()