Create Dataset Form + Templates integration

CHANGELOG.md

@@ -8,6 +8,8 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 
 ### Added
 
+- Dataset Templates Selector in the Create Dataset page.
+
 ### Changed
 
 ### Fixed

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": "2.0.0-alpha.62",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.66",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

packages/design-system/CHANGELOG.md

@@ -11,7 +11,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
   - 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.
+- **SelectAdvanced:**
+  - Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
+  - Support for options with a shape of `{ label: string; value: string; }[]` instead of just `string[]`.
 
 # [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/select-advanced/SelectAdvanced.tsx

@@ -12,47 +12,43 @@ import {
 } from './selectAdvancedReducer'
 import { SelectAdvancedToggle } from './SelectAdvancedToggle'
 import { SelectAdvancedMenu } from './SelectAdvancedMenu'
-import { areArraysEqual, debounce } from './utils'
+import { areOptionArraysEqual, debounce, normalizeOptions } from './utils'
 import { useIsFirstRender } from './useIsFirstRender'
 
-export const DEFAULT_LOCALES = {
-  select: 'Select...'
+export const DEFAULT_LOCALES = { select: 'Select...' }
+export const SELECT_MENU_SEARCH_DEBOUNCE_TIME = 400
+
+export type Option = { value: string; label: string }
+
+export type InputOptions = string[] | Option[]
+
+type BaseProps = {
+  options: InputOptions
+  isSearchable?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  inputButtonId?: string
+  locales?: { select?: string }
 }
 
-export const SELECT_MENU_SEARCH_DEBOUNCE_TIME = 400
+type SingleProps = BaseProps & {
+  isMultiple?: false
+  onChange?: (selected: string) => void
+  defaultValue?: string
+}
 
-export type SelectAdvancedProps =
-  | {
-      isMultiple?: false
-      options: string[]
-      onChange?: (selected: string) => void
-      defaultValue?: string
-      isSearchable?: boolean
-      isDisabled?: boolean
-      isInvalid?: boolean
-      inputButtonId?: string
-      locales?: {
-        select?: string
-      }
-    }
-  | {
-      isMultiple: true
-      options: string[]
-      onChange?: (selected: string[]) => void
-      defaultValue?: string[]
-      isSearchable?: boolean
-      isDisabled?: boolean
-      isInvalid?: boolean
-      inputButtonId?: string
-      locales?: {
-        select?: string
-      }
-    }
+type MultipleProps = BaseProps & {
+  isMultiple: true
+  onChange?: (selected: string[]) => void
+  defaultValue?: string[]
+}
+
+export type SelectAdvancedProps = SingleProps | MultipleProps
 
 export const SelectAdvanced = forwardRef(
   (
     {
-      options: propsOption,
+      options: propsOptions,
       onChange,
       defaultValue,
       isMultiple,
@@ -64,15 +60,16 @@ export const SelectAdvanced = forwardRef(
     }: SelectAdvancedProps,
     ref: ForwardedRef<HTMLInputElement | null>
   ) => {
-    const dynamicInitialOptions = useMemo(() => {
-      return isMultiple ? propsOption : [locales?.select ?? DEFAULT_LOCALES.select, ...propsOption]
-    }, [isMultiple, propsOption, locales])
+    const normalizedOptions: Option[] = useMemo(
+      () => normalizeOptions(propsOptions),
+      [propsOptions]
+    )
 
     const [{ selected, filteredOptions, searchValue, options }, dispatch] = useReducer(
       selectAdvancedReducer,
       getSelectAdvancedInitialState(
         Boolean(isMultiple),
-        dynamicInitialOptions,
+        normalizedOptions,
         locales?.select ?? DEFAULT_LOCALES.select,
         defaultValue
       )
@@ -81,107 +78,89 @@ export const SelectAdvanced = forwardRef(
     const isFirstRender = useIsFirstRender()
     const menuId = useId()
 
-    const callOnChage = useCallback(
+    const callOnChange = useCallback(
       (newSelected: string | string[]): void => {
         if (!onChange) return
-        //@ts-expect-error - types differs
+        // @ts-expect-error - union narrowing en runtime
         onChange(newSelected)
       },
       [onChange]
     )
 
     useEffect(() => {
-      const optionsRemainTheSame = areArraysEqual(dynamicInitialOptions, options)
-
-      // If the options remain the same, do nothing
+      const optionsRemainTheSame = areOptionArraysEqual(normalizedOptions, options)
       if (optionsRemainTheSame) return
 
-      const selectedOptionsThatAreNotInNewOptions = isMultiple
-        ? (selected as string[]).filter((option) => !dynamicInitialOptions.includes(option))
-        : []
-
-      // If there are selected options that are not in the new options, remove them
-      if (isMultiple && selectedOptionsThatAreNotInNewOptions.length > 0) {
-        selectedOptionsThatAreNotInNewOptions.forEach((option) => dispatch(removeOption(option)))
-
-        const newSelected = (selected as string[]).filter((option) =>
-          dynamicInitialOptions.includes(option)
-        )
+      const optionValues = new Set(normalizedOptions.map((o) => o.value))
 
-        callOnChage(newSelected)
+      if (isMultiple) {
+        const selectedValues = selected as string[]
+        const outOfNewOptions = selectedValues.filter((v) => !optionValues.has(v))
+        if (outOfNewOptions.length > 0) {
+          const newSelected = selectedValues.filter((v) => optionValues.has(v))
+          callOnChange(newSelected)
+          outOfNewOptions.forEach((v) => dispatch(removeOption(v)))
+        }
+      } else {
+        const current = selected as string
+        if (current !== '' && !optionValues.has(current)) {
+          dispatch(selectOption(''))
+          callOnChange('')
+        }
       }
 
-      // If the selected option is not in the new options replace it with the default empty value
-      if (
-        !isMultiple &&
-        selected !== '' &&
-        !dynamicInitialOptions.some((option) => option === (selected as string))
-      ) {
-        dispatch(selectOption(''))
-        callOnChage('')
-      }
-      dispatch(updateOptions(dynamicInitialOptions))
-    }, [dynamicInitialOptions, options, selected, isFirstRender, dispatch, callOnChage, isMultiple])
+      dispatch(updateOptions(normalizedOptions))
+    }, [normalizedOptions, options, selected, isFirstRender, callOnChange, isMultiple])
 
     const handleSearch = debounce((e: React.ChangeEvent<HTMLInputElement>): void => {
       const { value } = e.target
       dispatch(searchOptions(value))
     }, SELECT_MENU_SEARCH_DEBOUNCE_TIME)
 
-    // ONLY FOR MULTIPLE SELECT 👇
+    // MULTIPLE
     const handleCheck = (e: React.ChangeEvent<HTMLInputElement>): void => {
       const { value, checked } = e.target
-
       if (checked) {
         const newSelected = [...(selected as string[]), value]
-        callOnChage(newSelected)
-
+        callOnChange(newSelected)
         dispatch(selectOption(value))
       } else {
-        const newSelected = (selected as string[]).filter((option) => option !== value)
-        callOnChage(newSelected)
-
+        const newSelected = (selected as string[]).filter((v) => v !== value)
+        callOnChange(newSelected)
         dispatch(removeOption(value))
       }
     }
 
-    // ONLY FOR SINGLE SELECT 👇
-    const handleClickOption = (option: string): void => {
-      if ((selected as string) === option) {
-        return
-      }
-      callOnChage(option)
-
-      dispatch(selectOption(option))
+    // SINGLE
+    const handleClickOption = (value: string): void => {
+      if ((selected as string) === value) return
+      callOnChange(value)
+      dispatch(selectOption(value))
     }
 
-    // ONLY FOR MULTIPLE SELECT 👇
-    const handleRemoveSelectedOption = (option: string): void => {
-      const newSelected = (selected as string[]).filter((selected) => selected !== option)
-      callOnChage(newSelected)
-
-      dispatch(removeOption(option))
+    // MULTIPLE
+    const handleRemoveSelectedOption = (value: string): void => {
+      const newSelected = (selected as string[]).filter((v) => v !== value)
+      callOnChange(newSelected)
+      dispatch(removeOption(value))
     }
 
-    // ONLY FOR MULTIPLE SELECT 👇
+    // MULTIPLE
     const handleToggleAllOptions = (e: React.ChangeEvent<HTMLInputElement>): void => {
       if (e.target.checked) {
-        const newSelected =
-          filteredOptions.length > 0
-            ? Array.from(new Set([...(selected as string[]), ...filteredOptions]))
-            : options
-
-        callOnChage(newSelected)
-
+        const source = filteredOptions.length > 0 ? filteredOptions : options
+        const newSelected = Array.from(
+          new Set([...(selected as string[]), ...source.map((o) => o.value)])
+        )
+        callOnChange(newSelected)
         dispatch(selectAllOptions())
       } else {
+        const toRemove = new Set(
+          (filteredOptions.length > 0 ? filteredOptions : options).map((o) => o.value)
+        )
         const newSelected =
-          filteredOptions.length > 0
-            ? (selected as string[]).filter((option) => !filteredOptions.includes(option))
-            : []
-
-        callOnChage(newSelected)
-
+          filteredOptions.length > 0 ? (selected as string[]).filter((v) => !toRemove.has(v)) : []
+        callOnChange(newSelected)
         dispatch(deselectAllOptions())
       }
     }
@@ -193,6 +172,7 @@ export const SelectAdvanced = forwardRef(
         <SelectAdvancedToggle
           isMultiple={Boolean(isMultiple)}
           selected={selected}
+          options={options}
           handleRemoveSelectedOption={handleRemoveSelectedOption}
           isInvalid={isInvalid}
           isDisabled={isDisabled}