Merge pull request IQSS#233 from IQSS/feature/222-not-implemented-modal

Feature/222 not implemented modal

src/sections/dataset/Dataset.tsx

@@ -14,6 +14,8 @@ import { DatasetActionButtons } from './dataset-action-buttons/DatasetActionButt
 import { useDataset } from './DatasetContext'
 import { useEffect } from 'react'
 import { DatasetAlerts } from './dataset-alerts/DatasetAlerts'
+import { useNotImplementedModal } from '../not-implemented/NotImplementedModalContext'
+import { NotImplementedModal } from '../not-implemented/NotImplementedModal'
 
 interface DatasetProps {
   fileRepository: FileRepository
@@ -23,6 +25,7 @@ export function Dataset({ fileRepository }: DatasetProps) {
   const { setIsLoading } = useLoading()
   const { dataset, isLoading } = useDataset()
   const { t } = useTranslation('dataset')
+  const { hideModal, isModalOpen } = useNotImplementedModal()
 
   useEffect(() => {
     setIsLoading(isLoading)
@@ -34,6 +37,7 @@ export function Dataset({ fileRepository }: DatasetProps) {
 
   return (
     <>
+      <NotImplementedModal show={isModalOpen} handleClose={hideModal} />
       {!dataset ? (
         <PageNotFound />
       ) : (

src/sections/dataset/DatasetFactory.tsx

@@ -11,6 +11,7 @@ import { SettingJSDataverseRepository } from '../../settings/infrastructure/Sett
 import { FilePermissionsProvider } from '../file/file-permissions/FilePermissionsProvider'
 import { SettingsProvider } from '../settings/SettingsProvider'
 import { DatasetProvider } from './DatasetProvider'
+import { NotImplementedModalProvider } from '../not-implemented/NotImplementedModalProvider'
 import { AlertProvider } from '../alerts/AlertProvider'
 
 const datasetRepository = new DatasetJSDataverseRepository()
@@ -23,13 +24,15 @@ export class DatasetFactory {
     return (
       <FilePermissionsProvider repository={fileRepository}>
         <SettingsProvider repository={settingRepository}>
-          <MetadataBlockInfoProvider repository={metadataBlockInfoRepository}>
-            <AnonymizedProvider>
-              <AlertProvider>
-                <DatasetWithSearchParams />
-              </AlertProvider>
-            </AnonymizedProvider>
-          </MetadataBlockInfoProvider>
+          <NotImplementedModalProvider>
+            <MetadataBlockInfoProvider repository={metadataBlockInfoRepository}>
+              <AnonymizedProvider>
+                <AlertProvider>
+                  <DatasetWithSearchParams />
+                </AlertProvider>
+              </AnonymizedProvider>
+            </MetadataBlockInfoProvider>
+          </NotImplementedModalProvider>
         </SettingsProvider>
       </FilePermissionsProvider>
     )

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx

@@ -4,6 +4,7 @@ import { EditDatasetPermissionsMenu } from './EditDatasetPermissionsMenu'
 import { DeleteDatasetButton } from './DeleteDatasetButton'
 import { DeaccessionDatasetButton } from './DeaccessionDatasetButton'
 import { useTranslation } from 'react-i18next'
+import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
 import { useSession } from '../../../session/SessionContext'
 
 interface EditDatasetMenuProps {
@@ -16,10 +17,11 @@ export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) {
   if (!user || !dataset.permissions.canUpdateDataset) {
     return <></>
   }
-
+  const { showModal } = useNotImplementedModal()
   const { t } = useTranslation('dataset')
   return (
     <DropdownButton
+      onSelect={showModal}
       id={`edit-dataset-menu`}
       title={t('datasetActionButtons.editDataset.title')}
       asButtonGroup

src/sections/dataset/dataset-action-buttons/link-dataset-button/LinkDatasetButton.tsx

@@ -2,13 +2,21 @@ import { Button, ButtonGroup } from '@iqss/dataverse-design-system'
 import { Dataset, DatasetPublishingStatus } from '../../../../dataset/domain/models/Dataset'
 import { useTranslation } from 'react-i18next'
 import { useSession } from '../../../session/SessionContext'
+import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
 
 interface LinkDatasetButtonProps {
   dataset: Dataset
 }
+
 export function LinkDatasetButton({ dataset }: LinkDatasetButtonProps) {
   const { t } = useTranslation('dataset')
   const { user } = useSession()
+  const handleClick = () => {
+    // TODO - Implement upload files
+    showModal()
+  }
+  const { showModal } = useNotImplementedModal()
+
   if (
     !user ||
     !dataset.isReleased ||
@@ -19,7 +27,9 @@ export function LinkDatasetButton({ dataset }: LinkDatasetButtonProps) {
 
   return (
     <ButtonGroup>
-      <Button variant="secondary">{t('datasetActionButtons.linkDataset.title')}</Button>
+      <Button onClick={handleClick} variant="secondary">
+        {t('datasetActionButtons.linkDataset.title')}
+      </Button>
     </ButtonGroup>
   )
 }

src/sections/dataset/dataset-action-buttons/publish-dataset-menu/PublishDatasetMenu.tsx

@@ -2,6 +2,7 @@ import { Dataset, DatasetPublishingStatus } from '../../../../dataset/domain/mod
 import { DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
 import { ChangeCurationStatusMenu } from './ChangeCurationStatusMenu'
 import { useTranslation } from 'react-i18next'
+import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
 import { useSession } from '../../../session/SessionContext'
 
 interface PublishDatasetMenuProps {
@@ -20,10 +21,17 @@ export function PublishDatasetMenu({ dataset }: PublishDatasetMenuProps) {
   }
 
   const { t } = useTranslation('dataset')
+  const handleSelect = () => {
+    // TODO - Implement upload files
+    showModal()
+  }
+  const { showModal } = useNotImplementedModal()
+
   return (
     <DropdownButton
       id={`publish-dataset-menu`}
       title={t('datasetActionButtons.publish.title')}
+      onSelect={handleSelect}
       asButtonGroup
       variant="secondary"
       disabled={

src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx

@@ -4,21 +4,24 @@ import { useSession } from '../../../session/SessionContext'
 import styles from './DatasetUploadFilesButton.module.scss'
 import { useTranslation } from 'react-i18next'
 import { useDataset } from '../../DatasetContext'
+import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
 
 export function DatasetUploadFilesButton() {
   const { t } = useTranslation('dataset')
   const { user } = useSession()
   const { dataset } = useDataset()
   const handleClick = () => {
     // TODO - Implement upload files
+    showModal()
   }
-
+  const { showModal } = useNotImplementedModal()
   if (!user || !dataset?.permissions.canUpdateDataset) {
     return <></>
   }
 
   return (
     <Button
+      type="button"
       onClick={handleClick}
       icon={<PlusLg className={styles.icon} />}
       disabled={dataset.checkIsLockedFromEdits(user.persistentId)}>

src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { FileSelection } from '../../row-selection/useFileSelection'
 import { NoSelectedFilesModal } from '../no-selected-files-modal/NoSelectedFilesModal'
 import { useState } from 'react'
+import { useNotImplementedModal } from '../../../../../not-implemented/NotImplementedModalContext'
 
 interface DownloadFilesButtonProps {
   files: File[]
@@ -15,11 +16,16 @@ interface DownloadFilesButtonProps {
 
 const MINIMUM_FILES_COUNT_TO_SHOW_DOWNLOAD_FILES_BUTTON = 1
 const SELECTED_FILES_EMPTY = 0
+
 export function DownloadFilesButton({ files, fileSelection }: DownloadFilesButtonProps) {
   const { t } = useTranslation('files')
   const { dataset } = useDataset()
   const [showNoFilesSelectedModal, setShowNoFilesSelectedModal] = useState(false)
-
+  const handleClick = () => {
+    // TODO - Implement upload files
+    showModal()
+  }
+  const { showModal } = useNotImplementedModal()
   if (
     files.length < MINIMUM_FILES_COUNT_TO_SHOW_DOWNLOAD_FILES_BUTTON ||
     !dataset?.permissions.canDownloadFiles
@@ -30,6 +36,8 @@ export function DownloadFilesButton({ files, fileSelection }: DownloadFilesButto
   const onClick = () => {
     if (Object.keys(fileSelection).length === SELECTED_FILES_EMPTY) {
       setShowNoFilesSelectedModal(true)
+    } else {
+      handleClick()
     }
   }
 

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

@@ -4,21 +4,27 @@ import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import { FileSelection } from '../../row-selection/useFileSelection'
 import { NoSelectedFilesModal } from '../no-selected-files-modal/NoSelectedFilesModal'
+import { useNotImplementedModal } from '../../../../../not-implemented/NotImplementedModalContext'
 
 interface EditFileOptionsProps {
   files: File[]
   fileSelection: FileSelection
 }
+
 const SELECTED_FILES_EMPTY = 0
+
 export function EditFilesOptions({ files, fileSelection }: 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()
   const onClick = () => {
     if (Object.keys(fileSelection).length === SELECTED_FILES_EMPTY) {
       setShowNoFilesSelectedModal(true)
+    } else {
+      // TODO - Implement edit files
+      showModal()
     }
   }
 

src/sections/not-implemented/NotImplementedModal.tsx

@@ -0,0 +1,32 @@
+import { Button, Modal } from '@iqss/dataverse-design-system'
+
+interface NotImplementedModalProps {
+  show: boolean
+  handleClose: () => void
+}
+
+export function NotImplementedModal({ show, handleClose }: NotImplementedModalProps) {
+  const protocol = window.location.protocol
+  const host = window.location.host
+  const baseUrl = `${protocol}//${host}`
+
+  return (
+    <Modal show={show} onHide={handleClose} size="lg">
+      <Modal.Header>
+        <Modal.Title>Not Implemented</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>This feature is not implemented yet in SPA.</p>
+        <p>
+          If you want to use this feature you can go to the original{' '}
+          <a href={baseUrl}>Dataverse page</a>.
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}

src/sections/not-implemented/NotImplementedModalContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+
+interface NotImplementedModalContextProps {
+  showModal: () => void
+  hideModal: () => void
+  isModalOpen: boolean
+}
+
+export const NotImplementedModal = createContext<NotImplementedModalContextProps>({
+  isModalOpen: false,
+  showModal: /* istanbul ignore next */ () => {},
+  hideModal: /* istanbul ignore next */ () => {}
+})
+
+export const useNotImplementedModal = () => useContext(NotImplementedModal)

src/sections/not-implemented/NotImplementedModalProvider.tsx

@@ -0,0 +1,14 @@
+import { useState, PropsWithChildren } from 'react'
+import { NotImplementedModal } from './NotImplementedModalContext'
+
+export function NotImplementedModalProvider({ children }: PropsWithChildren) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const showModal = () => setIsModalOpen(true)
+  const hideModal = () => setIsModalOpen(false)
+
+  return (
+    <NotImplementedModal.Provider value={{ isModalOpen, showModal, hideModal }}>
+      {children}
+    </NotImplementedModal.Provider>
+  )
+}

src/stories/WithNotImplementedModal.tsx

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react'
+import { NotImplementedModalProvider } from '../sections/not-implemented/NotImplementedModalProvider'
+
+export const WithNotImplementedModal = (Story: StoryFn) => {
+  return (
+    <NotImplementedModalProvider>
+      <Story />
+    </NotImplementedModalProvider>
+  )
+}

src/stories/dataset/Dataset.stories.tsx

@@ -16,6 +16,7 @@ import { WithDatasetNotFound } from './WithDatasetNotFound'
 import { WithDatasetLoading } from './WithDatasetLoading'
 import { WithLoggedInUser } from '../WithLoggedInUser'
 import { WithAlerts } from '../WithAlerts'
+import { WithNotImplementedModal } from '../WithNotImplementedModal'
 
 const meta: Meta<typeof Dataset> = {
   title: 'Pages/Dataset',
@@ -31,16 +32,28 @@ export default meta
 type Story = StoryObj<typeof Dataset>
 
 export const Default: Story = {
-  decorators: [WithLayout, WithDataset, WithFilePermissionsDenied],
+  decorators: [WithLayout, WithDataset, WithFilePermissionsDenied, WithNotImplementedModal],
   render: () => <Dataset fileRepository={new FileMockRepository()} />
 }
 
 export const DraftWithAllDatasetPermissions: Story = {
-  decorators: [WithLayout, WithDatasetDraftAsOwner, WithLoggedInUser, WithFilePermissionsGranted],
+  decorators: [
+    WithLayout,
+    WithDatasetDraftAsOwner,
+    WithLoggedInUser,
+    WithFilePermissionsGranted,
+    WithNotImplementedModal
+  ],
   render: () => <Dataset fileRepository={new FileMockRepository()} />
 }
 export const LoggedInAsOwner: Story = {
-  decorators: [WithDataset, WithLayout, WithLoggedInUser, WithFilePermissionsGranted],
+  decorators: [
+    WithDataset,
+    WithLayout,
+    WithLoggedInUser,
+    WithFilePermissionsGranted,
+    WithNotImplementedModal
+  ],
   render: () => <Dataset fileRepository={new FileMockRepository()} />
 }
 

src/stories/not-implemented/NotImplementedModal.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { NotImplementedModal } from '../../sections/not-implemented/NotImplementedModal'
+import { Button } from '@iqss/dataverse-design-system'
+import { useNotImplementedModal } from '../../sections/not-implemented/NotImplementedModalContext'
+import { WithNotImplementedModal } from '../WithNotImplementedModal'
+
+const meta: Meta<typeof NotImplementedModal> = {
+  title: 'Sections/NotImplementedModal',
+  component: NotImplementedModal,
+  decorators: [WithNotImplementedModal]
+}
+
+export default meta
+
+type Story = StoryObj<typeof NotImplementedModal>
+
+function DefaultExample() {
+  const { showModal, hideModal, isModalOpen } = useNotImplementedModal()
+  return (
+    <>
+      <Button onClick={showModal}>Launch demo modal</Button>
+
+      <NotImplementedModal show={isModalOpen} handleClose={hideModal} />
+    </>
+  )
+}
+
+export const Default: Story = {
+  render: () => DefaultExample()
+}