File Edit Tags: populate the categories dropdown with results

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.53",
+    "@iqss/dataverse-client-javascript": "v2.0.0-pr344.5fd4982",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

public/locales/en/file.json

@@ -137,5 +137,6 @@
     "defaultFileUnrestrictError": "Something went wrong unrestricting the file. Try again later.",
     "requestAccessTooltipText": "If checked, users can request access to the restricted files in this dataset.",
     "termsOfAccessTooltipTex": "information on how and if users can access restricted files in this dataset."
-  }
+  },
+  "getCategoriesError": "Something went wrong fetching available categories. Try again later."
 }

src/dataset/domain/repositories/DatasetRepository.ts

@@ -47,4 +47,5 @@ export interface DatasetRepository {
     includeMDC?: boolean
   ) => Promise<DatasetDownloadCount>
   deleteDatasetDraft: (datasetId: string | number) => Promise<void>
+  getAvailableCategories: (datasetId: string | number) => Promise<string[]>
 }

src/dataset/domain/useCases/getAvailableCategories.ts

@@ -0,0 +1,8 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+
+export async function getAvailableCategories(
+  datasetRepository: DatasetRepository,
+  datasetId: string | number
+): Promise<string[]> {
+  return datasetRepository.getAvailableCategories(datasetId)
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -31,7 +31,8 @@ import {
   DatasetDeaccessionDTO,
   getDatasetVersionsSummaries,
   getDatasetDownloadCount,
-  deleteDatasetDraft
+  deleteDatasetDraft,
+  getDatasetAvailableCategories
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
 import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
@@ -375,6 +376,11 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       throw error
     })
   }
+
+  getAvailableCategories(datasetId: string | number): Promise<string[]> {
+    return getDatasetAvailableCategories.execute(datasetId)
+  }
+
   /*
     TODO: This is a temporary solution as this use case doesn't exist in js-dataverse yet and the API should also return the file store type rather than name only.
     After https://github.com/IQSS/dataverse/issues/11695 is implemented, create a js-dataverse use case.

src/sections/dataset/Dataset.tsx

@@ -181,12 +181,14 @@ export function Dataset({
                         datasetVersion={dataset.version}
                         canUpdateDataset={canUpdateDataset}
                         key={dataset.version.publishingStatus}
+                        datasetRepository={datasetRepository}
                       />
                     ) : (
                       <DatasetFiles
                         filesRepository={fileRepository}
                         datasetPersistentId={dataset.persistentId}
                         datasetVersion={dataset.version}
+                        datasetRepository={datasetRepository}
                       />
                     )}
                   </div>

src/sections/dataset/dataset-files/DatasetFiles.tsx

@@ -7,17 +7,20 @@ import { useFiles } from './useFiles'
 import { PaginationControls } from '../../shared/pagination/PaginationControls'
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import { FilePaginationInfo } from '../../../files/domain/models/FilePaginationInfo'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface DatasetFilesProps {
   filesRepository: FileRepository
   datasetPersistentId: string
   datasetVersion: DatasetVersion
+  datasetRepository: DatasetRepository
 }
 
 export function DatasetFiles({
   filesRepository,
   datasetPersistentId,
-  datasetVersion
+  datasetVersion,
+  datasetRepository
 }: DatasetFilesProps) {
   const [paginationInfo, setPaginationInfo] = useState<FilePaginationInfo>(new FilePaginationInfo())
   const [criteria, setCriteria] = useState<FileCriteria>(new FileCriteria())
@@ -44,6 +47,7 @@ export function DatasetFiles({
         paginationInfo={paginationInfo}
         filesTotalDownloadSize={filesTotalDownloadSize}
         criteria={criteria}
+        datasetRepository={datasetRepository}
       />
       <PaginationControls
         initialPaginationInfo={paginationInfo}

src/sections/dataset/dataset-files/DatasetFilesScrollable.tsx

@@ -14,11 +14,13 @@ import { FilesTableScrollable } from './files-table/FilesTableScrollable'
 import { FileCriteriaForm } from './file-criteria-form/FileCriteriaForm'
 import { FilesContext } from '@/sections/file/FilesContext'
 import styles from './DatasetFilesScrollable.module.scss'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface DatasetFilesScrollableProps {
   filesRepository: FileRepository
   datasetPersistentId: string
   datasetVersion: DatasetVersion
+  datasetRepository: DatasetRepository
   canUpdateDataset?: boolean
 }
 
@@ -28,7 +30,8 @@ export function DatasetFilesScrollable({
   filesRepository,
   datasetPersistentId,
   datasetVersion,
-  canUpdateDataset
+  canUpdateDataset,
+  datasetRepository
 }: DatasetFilesScrollableProps) {
   const scrollableContainerRef = useRef<HTMLDivElement | null>(null)
   const criteriaContainerRef = useRef<HTMLDivElement | null>(null)
@@ -184,6 +187,7 @@ export function DatasetFilesScrollable({
             isEmptyFiles={isEmptyFiles}
             accumulatedCount={accumulatedCount}
             fileRepository={filesRepository}
+            datasetRepository={datasetRepository}
           />
         </FilesContext.Provider>
       </div>

src/sections/dataset/dataset-files/files-table/FilesTable.tsx

@@ -11,6 +11,7 @@ import { FileSelection } from './row-selection/useFileSelection'
 import { FileCriteria } from '../../../../files/domain/models/FileCriteria'
 import { FilePaginationInfo } from '../../../../files/domain/models/FilePaginationInfo'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface FilesTableProps {
   files: FilePreview[]
@@ -19,6 +20,7 @@ interface FilesTableProps {
   paginationInfo: FilePaginationInfo
   filesTotalDownloadSize: number
   criteria: FileCriteria
+  datasetRepository: DatasetRepository
 }
 
 export function FilesTable({
@@ -27,12 +29,14 @@ export function FilesTable({
   paginationInfo,
   filesTotalDownloadSize,
   fileRepository,
-  criteria
+  criteria,
+  datasetRepository
 }: FilesTableProps) {
   const { table, fileSelection, selectAllFiles, clearFileSelection } = useFilesTable(
     files,
     paginationInfo,
-    fileRepository
+    fileRepository,
+    datasetRepository
   )
 
   const [visitedPagination, setVisitedPagination] = useState<FilePaginationInfo>(paginationInfo)

src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx

@@ -8,11 +8,13 @@ import { FileSelection } from './row-selection/useFileSelection'
 import { FilePaginationInfo } from '../../../../files/domain/models/FilePaginationInfo'
 import { RowSelectionCheckbox } from '@/sections/shared/form/row-selection-checkbox/RowSelectionCheckbox'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 export const createColumnsDefinition = (
   paginationInfo: FilePaginationInfo,
   fileSelection: FileSelection,
   fileRepository: FileRepository,
+  datasetRepository: DatasetRepository,
   accumulatedFilesCount?: number
 ): ColumnDef<FilePreview>[] => [
   {
@@ -55,9 +57,16 @@ export const createColumnsDefinition = (
         files={table.getRowModel().rows.map((row) => row.original)}
         fileSelection={fileSelection}
         fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
       />
     ),
     accessorKey: 'status',
-    cell: (props) => <FileActionsCell file={props.row.original} fileRepository={fileRepository} />
+    cell: (props) => (
+      <FileActionsCell
+        file={props.row.original}
+        fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
+      />
+    )
   }
 ]

src/sections/dataset/dataset-files/files-table/FilesTableScrollable.tsx

@@ -12,6 +12,7 @@ import { FilePaginationInfo } from '../../../../files/domain/models/FilePaginati
 import { type SentryRef } from '../DatasetFilesScrollable'
 import styles from './FilesTable.module.scss'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface FilesTableScrollableProps {
   files: FilePreview[]
@@ -24,6 +25,7 @@ interface FilesTableScrollableProps {
   isEmptyFiles: boolean
   fileRepository: FileRepository
   accumulatedCount: number
+  datasetRepository: DatasetRepository
 }
 
 export const FilesTableScrollable = ({
@@ -36,10 +38,17 @@ export const FilesTableScrollable = ({
   showSentryRef,
   isEmptyFiles,
   fileRepository,
-  accumulatedCount
+  accumulatedCount,
+  datasetRepository
 }: FilesTableScrollableProps) => {
   const { table, fileSelection, selectAllPossibleRows, clearRowsSelection } =
-    useFilesTableScrollable(files, paginationInfo, accumulatedCount, fileRepository)
+    useFilesTableScrollable(
+      files,
+      paginationInfo,
+      accumulatedCount,
+      fileRepository,
+      datasetRepository
+    )
 
   const [previousCriteria, setPreviousCriteria] = useState<FileCriteria>(criteria)
 

src/sections/dataset/dataset-files/files-table/file-actions/FileActionsHeader.tsx

@@ -5,22 +5,30 @@ import { useTranslation } from 'react-i18next'
 import { DownloadFilesButton } from './download-files/DownloadFilesButton'
 import { FileSelection } from '../row-selection/useFileSelection'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface FileActionsHeaderProps {
   files: FilePreview[]
   fileSelection: FileSelection
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
 }
 
 export function FileActionsHeader({
   files,
   fileSelection,
-  fileRepository
+  fileRepository,
+  datasetRepository
 }: FileActionsHeaderProps) {
   const { t } = useTranslation('files')
   return (
     <div aria-label={t('actions.title')} role="region" className={styles.container}>
-      <EditFilesMenu files={files} fileSelection={fileSelection} fileRepository={fileRepository} />
+      <EditFilesMenu
+        files={files}
+        fileSelection={fileSelection}
+        fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
+      />
       <DownloadFilesButton files={files} fileSelection={fileSelection} />
     </div>
   )

src/sections/dataset/dataset-files/files-table/file-actions/edit-files-menu/DatasetEditFileTagsButton.tsx

@@ -11,21 +11,24 @@ import { useFilesContext } from '@/sections/file/FilesContext'
 import { QueryParamKey, Route } from '@/sections/Route.enum'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DatasetNonNumericVersionSearchParam } from '@/dataset/domain/models/Dataset'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface EditFileTagsButtonProps {
   fileId: number
   fileRepository: FileRepository
   existingLabels?: FileLabel[]
   datasetPersistentId: string
   isTabularFile: boolean
+  datasetRepository: DatasetRepository
 }
 
 export const DatasetEditFileTagsButton = ({
   fileId,
   fileRepository,
   existingLabels,
   datasetPersistentId,
-  isTabularFile
+  isTabularFile,
+  datasetRepository
 }: EditFileTagsButtonProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const { t } = useTranslation('file')
@@ -88,6 +91,8 @@ export const DatasetEditFileTagsButton = ({
         isUpdatingTabularTags={isUpdatingTabularTags}
         errorUpdatingTabularTags={errorUpdatingTabularTags}
         isTabularFile={isTabularFile}
+        datasetRepository={datasetRepository}
+        datasetPersistentId={datasetPersistentId}
       />
     </>
   )

src/sections/dataset/dataset-files/files-table/file-actions/edit-files-menu/EditFilesMenu.tsx

@@ -9,14 +9,21 @@ import { FileSelection } from '../../row-selection/useFileSelection'
 import { useMediaQuery } from '../../../../../../shared/hooks/useMediaQuery'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import styles from './EditFilesMenu.module.scss'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 interface EditFilesMenuProps {
   files: FilePreview[]
   fileSelection: FileSelection
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
 }
 const MINIMUM_FILES_COUNT_TO_SHOW_EDIT_FILES_BUTTON = 1
-export function EditFilesMenu({ files, fileSelection, fileRepository }: EditFilesMenuProps) {
+export function EditFilesMenu({
+  files,
+  fileSelection,
+  fileRepository,
+  datasetRepository
+}: EditFilesMenuProps) {
   const { t } = useTranslation('files')
   const { user } = useSession()
   const { dataset } = useDataset()
@@ -45,6 +52,7 @@ export function EditFilesMenu({ files, fileSelection, fileRepository }: EditFile
         fileSelection={fileSelection}
         fileRepository={fileRepository}
         isHeader={true}
+        datasetRepository={datasetRepository}
       />
     </DropdownButton>
   )

src/sections/dataset/dataset-files/files-table/file-actions/edit-files-menu/EditFilesOptions.tsx

@@ -15,6 +15,7 @@ import { EditFileMetadataReferrer } from '@/sections/edit-file-metadata/EditFile
 import { useSettings } from '@/sections/settings/SettingsContext'
 import { SettingName } from '@/settings/domain/models/Setting'
 import { DatasetEditFileTagsButton } from './DatasetEditFileTagsButton'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 type EditFilesOptionsProps =
   | {
@@ -24,6 +25,7 @@ type EditFilesOptionsProps =
       fileRepository: FileRepository
       datasetInfo?: never
       isHeader: true
+      datasetRepository: DatasetRepository
     }
   | {
       files?: never
@@ -32,6 +34,7 @@ type EditFilesOptionsProps =
       fileRepository: FileRepository
       datasetInfo: EditFilesMenuDatasetInfo
       isHeader: false
+      datasetRepository: DatasetRepository
     }
 
 export interface EditFilesMenuDatasetInfo {
@@ -49,7 +52,8 @@ export function EditFilesOptions({
   fileSelection,
   fileRepository,
   datasetInfo,
-  isHeader
+  isHeader,
+  datasetRepository
 }: EditFilesOptionsProps) {
   const { t } = useTranslation('files')
   const { t: tFile } = useTranslation('file')
@@ -101,6 +105,7 @@ export function EditFilesOptions({
           datasetPersistentId={datasetInfo.persistentId}
           existingLabels={file.metadata.labels}
           isTabularFile={file.metadata.isTabular}
+          datasetRepository={datasetRepository}
         />
 
         <DatasetDeleteFileButton