Browse/Search facets section

README.md

@@ -213,6 +213,11 @@ The environment is accessible through the following URLs:
 > #### Create/Edit Collection Page Identifier Field
 >
 > A feature has been added to suggest an identifier to the user based on the collection name entered.
+>
+> #### Create/Edit Collection Page Storage Field
+>
+> Given that at the moment the SPA only supports file uploading through direct upload (S3), the storage selector on the create collection
+> page is disabled. The collection is always created using the default storage, which must be S3
 
 </details>
 

packages/design-system/src/lib/components/transfer-list/ItemsList.tsx

@@ -12,6 +12,7 @@ type ListProps =
       side: 'left'
       checked: TransferListItem[]
       onToggle: (item: TransferListItem) => () => void
+      disabled: boolean
       rightItems?: never
       setRight?: never
       onChange?: never
@@ -21,6 +22,7 @@ type ListProps =
       side: 'right'
       checked: TransferListItem[]
       onToggle: (item: TransferListItem) => () => void
+      disabled: boolean
       rightItems: TransferListItem[]
       setRight: React.Dispatch<React.SetStateAction<TransferListItem[]>>
       onChange?: (selected: TransferListItem[]) => void
@@ -31,6 +33,7 @@ export const ItemsList = ({
   side,
   checked,
   onToggle,
+  disabled,
   rightItems,
   setRight,
   onChange
@@ -44,6 +47,7 @@ export const ItemsList = ({
             side={side}
             checked={checked}
             onToggle={onToggle}
+            disabled={disabled}
             key={item.value}
           />
         ))}
@@ -76,6 +80,7 @@ export const ItemsList = ({
               side={side}
               checked={checked}
               onToggle={onToggle}
+              disabled={disabled}
               key={item.value}
             />
           ))}

packages/design-system/src/lib/components/transfer-list/ListItem.tsx

@@ -12,47 +12,57 @@ interface ListItemProps {
   side: 'left' | 'right'
   checked: readonly TransferListItem[]
   onToggle: (item: TransferListItem) => () => void
+  disabled: boolean
 }
 
-export const ListItem = ({ item, side, checked, onToggle }: ListItemProps) => {
+export const ListItem = ({ item, side, checked, onToggle, disabled }: ListItemProps) => {
   const { attributes, listeners, transform, transition, setNodeRef, setActivatorNodeRef } =
     useSortable({ id: item.id })
 
+  const attributesCheckingDisabled = disabled
+    ? { ...attributes, ['aria-disabled']: true, tabIndex: -1 }
+    : attributes
+
   const uniqueID = useId()
   const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`
 
   if (side === 'left') {
     return (
-      <ListGroup.Item className={styles['list-item']}>
+      <ListGroup.Item
+        className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}
+        disabled={disabled}>
         <Form.Group.Checkbox
           label={item.label}
           onChange={onToggle(item)}
           id={labelId}
           checked={checked.indexOf(item) !== -1}
+          disabled={disabled}
         />
       </ListGroup.Item>
     )
   }
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition
   }
 
   return (
     <ListGroup.Item
       ref={setNodeRef}
-      {...attributes}
+      {...attributesCheckingDisabled}
       role=""
       style={style}
-      className={styles['list-item']}>
+      className={`${styles['list-item']} ${disabled ? styles['disabled'] : ''}`}
+      disabled={disabled}>
       <Stack direction="horizontal" gap={1}>
         <button
           type="button"
           ref={setActivatorNodeRef}
           {...listeners}
-          className={styles['drag-handle']}
-          aria-label="press space to select and keys to drag">
+          className={`${styles['drag-handle']} ${disabled ? styles['disabled'] : ''}`}
+          aria-label="press space to select and keys to drag"
+          disabled={disabled}>
           <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
             <circle cx="9" cy="6" r="1.5" fill="#777" />
             <circle cx="15" cy="6" r="1.5" fill="#777" />
@@ -67,6 +77,7 @@ export const ListItem = ({ item, side, checked, onToggle }: ListItemProps) => {
           onChange={onToggle(item)}
           id={labelId}
           checked={checked.indexOf(item) !== -1}
+          disabled={disabled}
         />
       </Stack>
     </ListGroup.Item>

packages/design-system/src/lib/components/transfer-list/TransferList.module.scss

@@ -15,13 +15,21 @@
 .items-column {
   position: relative;
   z-index: 1;
-  width: 230px;
+  width: 100%;
   height: 240px;
   overflow-x: hidden;
   overflow-y: auto;
   border: solid 1px $dv-border-color;
   border-radius: 6px;
 
+  @media screen and (min-width: 768px) {
+    width: 230px;
+  }
+
+  @media screen and (min-width: 1280px) {
+    width: 275px;
+  }
+
   &::-webkit-scrollbar {
     width: 8px;
   }
@@ -78,17 +86,22 @@
         border-radius: 4px;
         cursor: grab;
 
-        &:hover {
+        &:hover:not(.disabled) {
           background-color: $dv-secondary-color;
         }
 
-        &:active {
+        &:active:not(.disabled) {
           cursor: grabbing;
         }
+
+        &.disabled {
+          opacity: 0.5;
+          pointer-events: none;
+        }
       }
 
-      &:hover,
-      &:focus-visible {
+      &:hover:not(.disabled),
+      &:focus-visible:not(.disabled) {
         color: $dv-text-color;
         background-color: color.adjust($dv-secondary-color, $alpha: -0.7);
       }
@@ -108,6 +121,7 @@
     position: sticky;
     top: 0;
     left: 0;
+    z-index: 1;
     margin: 0;
     padding: 0.35rem 0.5rem;
     font-weight: bold;

packages/design-system/src/lib/components/transfer-list/TransferList.tsx

@@ -29,20 +29,20 @@ export interface TransferListProps {
   onChange?: (selected: TransferListItem[]) => void
   leftLabel?: string
   rightLabel?: string
+  disabled?: boolean
 }
 
 export const TransferList = ({
   availableItems,
   defaultSelected = [],
   onChange,
   leftLabel,
-  rightLabel
+  rightLabel,
+  disabled = false
 }: TransferListProps) => {
   const [checked, setChecked] = useState<TransferListItem[]>([])
   const [left, setLeft] = useState<TransferListItem[]>(not(availableItems, defaultSelected))
-  const [right, setRight] = useState<TransferListItem[]>(
-    intersection(availableItems, defaultSelected)
-  )
+  const [right, setRight] = useState<TransferListItem[]>(defaultSelected)
 
   const leftChecked = intersection(checked, left)
   const rightChecked = intersection(checked, right)
@@ -66,22 +66,24 @@ export const TransferList = ({
     setLeft([])
   }
 
-  const handleCheckedRight = () => {
+  const handleCheckedToRight = () => {
     setRight(right.concat(leftChecked))
     onChange && onChange(right.concat(leftChecked))
     setLeft(not(left, leftChecked))
     setChecked(not(checked, leftChecked))
   }
 
-  const handleCheckedLeft = () => {
-    setLeft(left.concat(rightChecked.filter((item) => availableItems.includes(item))))
+  const handleCheckedToLeft = () => {
+    setLeft(
+      left.concat(rightChecked.filter((item) => availableItems.find((a) => a.value === item.value)))
+    )
     setRight(not(right, rightChecked))
     onChange && onChange(not(right, rightChecked))
     setChecked(not(checked, rightChecked))
   }
 
   const handleAllLeft = () => {
-    setLeft(left.concat(right.filter((item) => availableItems.includes(item))))
+    setLeft(left.concat(right.filter((item) => availableItems.find((a) => a.value === item.value))))
     setRight([])
     onChange && onChange([])
   }
@@ -94,47 +96,57 @@ export const TransferList = ({
 
   return (
     <div className={styles['transfer-list']}>
-      <div className={styles['items-column']} tabIndex={0}>
+      <div className={styles['items-column']} tabIndex={disabled ? -1 : 0}>
         {leftLabel && <p className={styles['column-label']}>{leftLabel}</p>}
-        <ItemsList items={left} side="left" checked={checked} onToggle={handleToggle} />
+        <ItemsList
+          items={left}
+          side="left"
+          checked={checked}
+          onToggle={handleToggle}
+          disabled={disabled}
+        />
       </div>
       <div className={styles['middle-column']} data-testid="actions-column">
         <Button
           size="sm"
+          type="button"
           onClick={handleAllRight}
-          disabled={left.length === 0}
+          disabled={left.length === 0 || disabled}
           icon={<ChevronDoubleRight />}
           aria-label="move all right"
           className={styles['transfer-button']}
         />
 
         <Button
           size="sm"
-          onClick={handleCheckedRight}
-          disabled={leftChecked.length === 0}
+          type="button"
+          onClick={handleCheckedToRight}
+          disabled={leftChecked.length === 0 || disabled}
           icon={<ChevronRight />}
           aria-label="move selected to right"
           className={styles['transfer-button']}
         />
 
         <Button
           size="sm"
-          onClick={handleCheckedLeft}
-          disabled={rightChecked.length === 0}
+          type="button"
+          onClick={handleCheckedToLeft}
+          disabled={rightChecked.length === 0 || disabled}
           icon={<ChevronLeft />}
           aria-label="move selected to left"
           className={styles['transfer-button']}
         />
         <Button
           size="sm"
+          type="button"
           onClick={handleAllLeft}
-          disabled={right.length === 0}
+          disabled={right.length === 0 || disabled}
           icon={<ChevronDoubleLeft />}
           aria-label="move all left"
           className={styles['transfer-button']}
         />
       </div>
-      <div className={styles['items-column']} tabIndex={0}>
+      <div className={styles['items-column']} tabIndex={disabled ? -1 : 0}>
         {rightLabel && <p className={styles['column-label']}>{rightLabel}</p>}
         <ItemsList
           items={right}
@@ -144,6 +156,7 @@ export const TransferList = ({
           rightItems={right}
           setRight={setRight}
           onChange={onChange}
+          disabled={disabled}
         />
       </div>
     </div>

packages/design-system/src/lib/index.ts

@@ -28,4 +28,4 @@ export { SelectAdvanced } from './components/select-advanced/SelectAdvanced'
 export { Card } from './components/card/Card'
 export { ProgressBar } from './components/progress-bar/ProgressBar'
 export { Stack } from './components/stack/Stack'
-export { TransferList } from './components/transfer-list/TransferList'
+export { TransferList, type TransferListItem } from './components/transfer-list/TransferList'

packages/design-system/src/lib/stories/transfer-list/TransferList.stories.tsx

@@ -305,3 +305,7 @@ const WithChangingAvailableItemsComponent = () => {
     </div>
   )
 }
+
+export const Disabled: Story = {
+  render: () => <TransferList availableItems={aToEitems} disabled />
+}

public/locales/en/createCollection.json

@@ -36,7 +36,9 @@
     },
     "description": {
       "label": "Description",
-      "description": "A summary describing the purpose, nature or scope of this collection."
+      "description": "A summary describing the purpose, nature or scope of this collection.",
+      "subLabel": "This field supports only certain <htmlTooltip>HTML tags</htmlTooltip>.",
+      "htmlAllowedTags": "<a>, <b>, <blockquote>, <br>, <code>, <del>, <dd>, <dl>, <dt>, <em>, <hr>, <h1>-<h3>, <i>, <img>, <kbd>, <li>, <ol>, <p>, <pre>, <s>, <sup>, <sub>, <strong>, <strike>, <u>, <ul>"
     },
     "contacts": {
       "label": "Email",
@@ -46,14 +48,8 @@
     },
     "metadataFields": {
       "sectionLabel": "Metadata Fields",
-      "helperText": "Choose the metadata fields to use in dataset templates and when adding a dataset to this dataverse.",
+      "helperText": "Choose the metadata fields to use in dataset templates and when adding a dataset to this collection.",
       "useMetadataFieldsFrom": "Use metadata fields from",
-      "citationMetadata": "Citation Metadata (Required)",
-      "geospatialMetadata": "Geospatial Metadata",
-      "socialScienceMetadata": "Social Science and Humanities Metadata",
-      "astrophysicsMetadata": "Astronomy and Astrophysics Metadata",
-      "biomedicalMetadata": "Life Sciences Metadata",
-      "journalMetadata": "Journal Metadata",
       "inputLevelsTable": {
         "hideTableAriaLabel": "Hide input levels table",
         "requiredByDataverse": "Required by Dataverse",
@@ -65,7 +61,9 @@
     },
     "browseSearchFacets": {
       "label": "Browse/Search Facets",
-      "helperText": "Choose the metadata fields to use as facets for browsing datasets and dataverses in this dataverse."
+      "helperText": "Choose and order the metadata fields to use as facets when browsing this collection.",
+      "useBrowseSearchFacetsFrom": "Use browse/search facets from",
+      "selectedFacets": "Selected"
     }
   },
   "confirmResetModal": {

src/collection/domain/models/CollectionFacet.ts

@@ -0,0 +1,5 @@
+export interface CollectionFacet {
+  id: number
+  name: string
+  displayName: string
+}

src/collection/domain/repositories/CollectionRepository.ts

@@ -1,9 +1,11 @@
 import { Collection } from '../models/Collection'
+import { CollectionFacet } from '../models/CollectionFacet'
 import { CollectionUserPermissions } from '../models/CollectionUserPermissions'
 import { CollectionDTO } from '../useCases/DTOs/CollectionDTO'
 
 export interface CollectionRepository {
   getById: (id: string) => Promise<Collection>
   create(collection: CollectionDTO, hostCollection?: string): Promise<number>
+  getFacets(collectionIdOrAlias: number | string): Promise<CollectionFacet[]>
   getUserPermissions(collectionIdOrAlias: number | string): Promise<CollectionUserPermissions>
 }

src/collection/domain/useCases/DTOs/CollectionDTO.ts

@@ -66,10 +66,9 @@ export const collectionTypeOptions = {
     value: CollectionType.DEPARTMENT
   }
 } as const
-
+// 👇 To be defined, at the moment the SPA only supports file uploading through direct upload (S3), so we are disabling the storage selector
 export const collectionStorageOptions = {
-  LOCAL_DEFAULT: 'Local (Default)',
-  LOCAL: 'Local'
+  S3: 'S3'
 } as const
 
 export type CollectionStorage =