Restrict/Unrestrict File Feature in File Page

[ChengShi-1]

What this PR does / why we need it:

Implement the Restrict/Unrestrict Feature for a single file

Which issue(s) this PR closes:

• Closes Restrict File Feature in Files Tab and Files Page #613

Special notes for your reviewer:

Some changes need to know:

• In order to add edit file option feature to dataset page, I have to add filesRepository as a parameter for dataset pages.
• add a parameter isHeader to EditFileOptions.
  • isHeader == true means it's the EditFileOptions button existing in the header of filesTable, dealing with multiple files. isHeader == false means it is one of the file in files, dealing with a single file.
  • Actually, we could ignore this parameter and replace something here after we have editing multiple file API
• One issue I didn't solve. According to current logic, if the dataset is published, after the restriction/delete/... is done and saved, the page navigates to dataset new draft version. However, if it's a draft currently, the page does nothing (because the operation is done in dataset page :draft version), the File Tab or the page should be re-rendered or refreshed to get the updated files and their status. I didn't find a good way to do this, need more thoughts.

Suggestions on how to test this:

1. create a dataset > upload file

2. click into the file page, Edit File > Restrict

3. A modal should be shown
   (input box and checkbox are both disabled, waiting for api )
   

4. Please notice that Restrict Access and Terms of Access are hard-coded, not connect to api yet

5. Save Changes, a toast should be shown. then check if the file is restricted by checking if a Unlock Icon is shown on dataset page > File tab
   

6. click into the file page, Edit File > Unrestrict, a modal shown

7. Save Changes, a toast should be shown. The Unlock icon should be disappeared

lOG

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Is there a release notes update needed for this change?:

Additional documentation:

[coveralls]

coverage: 97.689% (+0.4%) from 97.241%
when pulling dc958fa on 613-restrict-file-feature-in-files-tab-and-files-page
into fa6299a on develop.

[g-saracca]

Some minor suggestions, looks solid!
Question, I think the scope of the issue is also to add the ability to restrict a file from the dataset files table.
See screenshot.

[ChengShi-1]

Some minor suggestions, looks solid! Question, I think the scope of the issue is also to add the ability to restrict a file from the dataset files table. See screenshot.

Sorry I forgot this ... it's my fault, I'll add them here as well

[g-saracca]

Looks good!
About the redirection/refresh of dataset after restricting/unrestricting a file we can have a call if you want.
I have some suggestions about the EditFilesOptions component that is being reused for the files header and file actions cell.
It is confusing that in both cases you send an array of files even knowing that for file row you just need the file only and then mapping the array of files knowing that for IsHeader= false it will be only one.
You can do two different things:

1. One component for the header and another different one for the file actions cell. This could simplify lots of things but also think if using the same component for header and file table row will bring some benefit (if you keep about using same file for header and table row see option 2)
2. Use a union type props in EditFilesOptions like this:

type EditFileOptionsProps =
  | {
      files: FilePreview[]
      file?: never
      fileSelection: FileSelection
      fileRepository: FileRepository
      datasetInfo?: never
      isHeader: true
    }
  | {
      files?: never
      file: FilePreview
      fileSelection?: never
      fileRepository: FileRepository
      datasetInfo: EditFilesMenuDatasetInfo
      isHeader: false
    }

This interface will only require a files and fileSelection prop when isHeader is true.
And only require file and datasetInfo prop when isHeader is false.
Then the usage of EditFileOptions will be:
In the header:

      <EditFilesOptions
        files={files}
        fileSelection={fileSelection}
        fileRepository={fileRepository}
        isHeader={true}
      />

In the File Actions Cell:

        <EditFilesOptions
          file={file}
          fileRepository={fileRepository}
          datasetInfo={datasetInfo}
          isHeader={false}
        />

EditFilesOptions.tsx could look like:

export function EditFilesOptions({
  file,
  files,
  fileSelection,
  fileRepository,
  datasetInfo,
  isHeader
}: EditFileOptionsProps) {
  const { t } = useTranslation('files')
  const [showNoFilesSelectedModal, setShowNoFilesSelectedModal] = useState(false)
  const settingsEmbargoAllowed = false // TODO - Ask Guillermo if this is included in the settings endpoint
  const provenanceEnabledByConfig = false // TODO - Ask Guillermo if this is included in the MVP and from which endpoint is coming from
  const { showModal } = useNotImplementedModal()

  if (!isHeader) {
    return (
      <>
        <RestrictFileButton
          key={file.id}
          fileId={file.id}
          isRestricted={file.access.restricted}
          fileRepository={fileRepository}
          datasetInfo={datasetInfo}
        />

        <DeleteFileButton
          key={file.id}
          fileId={file.id}
          fileRepository={fileRepository}
          datasetInfo={datasetInfo}
        />
      </>
    )
  }

  const onClick = () => {
    if (Object.keys(fileSelection).length === SELECTED_FILES_EMPTY) {
      setShowNoFilesSelectedModal(true)
    } else {
      // TODO - Implement edit files
      showModal()
    }
  }

  return (
    <>
      <DropdownButtonItem onClick={onClick}>
        {t('actions.editFilesMenu.options.metadata')}
      </DropdownButtonItem>
      {files.some((file) => file.access.restricted) && (
        <DropdownButtonItem onClick={onClick}>
          {t('actions.editFilesMenu.options.unrestrict')}
        </DropdownButtonItem>
      )}
      {files.some((file) => !file.access.restricted) && (
        <DropdownButtonItem onClick={onClick}>
          {t('actions.editFilesMenu.options.restrict')}
        </DropdownButtonItem>
      )}
      <DropdownButtonItem onClick={onClick}>
        {t('actions.editFilesMenu.options.replace')}
      </DropdownButtonItem>
      {settingsEmbargoAllowed && (
        <DropdownButtonItem onClick={onClick}>
          {t('actions.editFilesMenu.options.embargo')}
        </DropdownButtonItem>
      )}
      {provenanceEnabledByConfig && (
        <DropdownButtonItem onClick={onClick}>
          {t('actions.editFilesMenu.options.provenance')}
        </DropdownButtonItem>
      )}
      <DropdownButtonItem onClick={onClick}>
        {t('actions.editFilesMenu.options.delete')}
      </DropdownButtonItem>
      <NoSelectedFilesModal
        show={showNoFilesSelectedModal}
        handleClose={() => setShowNoFilesSelectedModal(false)}
      />
    </>
  )
}