Refactor MoveToDatasetButton / MoveToDatasetModal components

[nozomione]

Context

In the dataset route, we display the "Move to Dataset" button (MoveToDatasetButton) which allows a user to replace or add shared dataset samples to their “My Dataset”.

Upon clicking the MoveToDatasetButton button, we currently determine its behavior using the handleMoveToDataset method:

• If any samples are present, the button opens MoveToDatasetModal that lets users to replace or add shared dataset samples to their "My Dataset".
• If no samples are present, we directly append the shared dataset samples to the user’s “My Dataset” without opening MoveToDatasetModal.

 const handleMoveToDataset = async () => {
    if (totalSamples > 0) {
      openModal(id)
    } else {
      await addSamples(selectedDataset.data)
      ...
  }

Problem or idea

Instead of determining the button behavior using handleMoveToDataset, we want to utilize an early return to render different buttons in the UI based on the total sample count.

Additionally, we want to move some of the variables from MoveToDatasetButton to MoveToDatasetModal during this refactoring process.

e.g., New approach:

// Render a button to append shared dataset samples when no samples
if (totalSamples === 0) {
    return (
       <Button 
          label="Move to Dataset"
          secondary
          responsive
          onClick={handleMoveToDataset}
    />)
}

// Otherwise, render a button to open the modal
return (
    <Modal
      button={
        <Button
          label="Move to Dataset"
          secondary
          responsive
         onClick={openModal}
        />
      }
    >
    ...
  )

Solution or next step

• Use the early return in MoveToDatasetButton to conditionally render:
  • A button for opening MoveToDatasetModal when samples are present
  • A button for adding the shared dataset directly when there are no samples
• Move the following variables from MoveToDatasetButton to MoveToDatasetModal:
  • radioOptions
  • defaultValue
  • value/setValue