775 account page notifications

package.json

@@ -18,7 +18,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.76",
+    "@iqss/dataverse-client-javascript": "2.1.0-pr387.40189c8",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -39,6 +39,7 @@
     "i18next-browser-languagedetector": "7.0.1",
     "i18next-http-backend": "2.1.1",
     "js-md5": "0.8.3",
+    "lodash-es": "4.17.21",
     "moment-timezone": "0.5.43",
     "react-bootstrap": "2.7.2",
     "react-bootstrap-icons": "1.11.4",
@@ -131,6 +132,7 @@
     "@storybook/test-runner": "0.23.0",
     "@testing-library/cypress": "10.1.0",
     "@types/chai-as-promised": "7.1.5",
+    "@types/lodash": "4.17.20",
     "@types/node-sass": "4.11.3",
     "@types/sinon": "10.0.13",
     "@typescript-eslint/eslint-plugin": "5.51.0",

packages/design-system/CHANGELOG.md

@@ -28,6 +28,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
   - Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
 - **ButtonGroup:**
   - Fix styles for vertical button groups when using tooltips.
+- **Badge:**:
+  - Add `pill` prop to allow pill-shaped badges.
+  - Add `dataTestId` prop to facilitate testing.
+  - Add `className` prop to allow custom styling.
 
 # [2.0.2](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-06-23)
 

packages/design-system/src/lib/components/badge/Badge.tsx

@@ -4,12 +4,25 @@ import styles from './Badge.module.scss'
 
 interface BadgeProps {
   variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
+  pill?: boolean
+  dataTestId?: string
+  className?: string
   children: ReactNode
 }
 
-export function Badge({ variant = 'secondary', children }: BadgeProps) {
+export function Badge({
+  variant = 'secondary',
+  pill = false,
+  className,
+  dataTestId,
+  children
+}: BadgeProps) {
   return (
-    <BadgeBS bg={variant} className={styles[variant]}>
+    <BadgeBS
+      bg={variant}
+      pill={pill}
+      className={`${styles[variant]} ${className || ''}`}
+      data-testid={dataTestId}>
       {children}
     </BadgeBS>
   )

packages/design-system/src/lib/components/navbar/navbar-dropdown/NavbarDropdown.tsx

@@ -1,9 +1,9 @@
 import { NavDropdown as NavDropdownBS } from 'react-bootstrap'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import { NavbarDropdownItem } from './NavbarDropdownItem'
 
 interface DropdownProps {
-  title: string
+  title: ReactNode
   id: string
 }
 

packages/design-system/src/lib/stories/badge/Badge.stories.tsx

@@ -25,3 +25,28 @@ export const AllVariantsAtAGlance: Story = {
     </>
   )
 }
+
+export const WithPillShape: Story = {
+  render: () => (
+    <>
+      <Badge variant="primary" pill>
+        Primary
+      </Badge>
+      <Badge variant="secondary" pill>
+        Secondary
+      </Badge>
+      <Badge variant="success" pill>
+        Success
+      </Badge>
+      <Badge variant="danger" pill>
+        Danger
+      </Badge>
+      <Badge variant="warning" pill>
+        Warning
+      </Badge>
+      <Badge variant="info" pill>
+        Info
+      </Badge>
+    </>
+  )
+}

public/locales/en/account.json

@@ -47,5 +47,48 @@
         "datasetAndFile": "datasets or files"
       }
     }
+  },
+  "notifications": {
+    "title": "Notifications",
+    "userGuideLinkText": "User Guide",
+    "demoServerLinkText": "Demo Site",
+    "clearAll": "Clear All",
+    "dismiss": "Dismiss",
+    "noNotifications": "No notifications available.",
+    "notification": {
+      "createAcc": "Welcome to {{installationBrandName}}! Get started by adding or finding data. Have questions? Check out the <userGuideLink>{{userGuideLinkText}}</userGuideLink>. Want to test out Dataverse features? Use our <demoLink>{{demoServerLinkText}}</demoLink>. Also, check for your welcome email to verify your address.",
+      "ingestCompleted": "Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> has one or more tabular files that completed the <userGuideLink>tabular ingest process</userGuideLink> and are available in archival formats.",
+      "ingestCompletedWithErrors": "Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> has one or more tabular files that are available but are not supported for <b>tabular ingest</b>.",
+      "genericObjectDeleted": "The dataverse, dataset, or file for this notification has been deleted.",
+      "assignRole": "You have been granted the {{roleName}} role for <objectLink>{{- objectName}}</objectLink>.",
+      "assignRoleFileDownloader": "You now have access to all published restricted and unrestricted files in <objectLink>{{- objectName}}</objectLink>.",
+      "revokeRole": "You have been removed from a role in <objectLink>{{- objectName}}</objectLink>.",
+      "createCollection": "<collectionLink>{{- collectionDisplayName}}</collectionLink> was created in <ownerLink>{{- ownerDisplayName}}</ownerLink> . To learn more about what you can do with your collection, check out the <userGuideLink>{{userGuideLinkText}}</userGuideLink>.",
+      "createDataset": "<datasetLink>{{- datasetDisplayName}}</datasetLink> was created in <collectionLink>{{- collectionDisplayName}}</collectionLink>. To learn more about what you can do with your dataset, check out the  <userGuideLink>{{userGuideLinkText}}</userGuideLink>.",
+      "requestFileAccess": "File access requested for dataset: <datasetLink>{{- datasetDisplayName}}</datasetLink> was made by {{requestorFirstName}} {{requestorLastName}} ({{requestorEmail}}).",
+      "requestedFileAccess": "You have requested access to files in dataset: <datasetLink>{{- datasetDisplayName}}</datasetLink>.",
+      "grantFileAccess": "Access granted for files in dataset: <datasetLink>{{- datasetDisplayName}}</datasetLink>.",
+      "rejectFileAccess": "Access rejected for requested files in dataset: <datasetLink>{{- datasetDisplayName}}</datasetLink>.",
+      "datasetCreated": "<datasetLink>{{- datasetDisplayName}}</datasetLink> was created in <ownerLink>{{- ownerDisplayName}}</ownerLink> by {{requestorFirstName}} {{requestorLastName}}.",
+      "submittedDataset": "<datasetLink>{{- datasetDisplayName}}</datasetLink> was submitted for review to be published in <ownerLink>{{- ownerDisplayName}}</ownerLink>. Don''t forget to publish it or send it back to the contributor, {{requestorFirstName}} {{requestorLastName}} ({{requestorEmail}})!",
+      "returnedDataset": "<datasetLink>{{- datasetDisplayName}}</datasetLink> was returned by the curator of <ownerLink>{{- ownerDisplayName}}</ownerLink>.",
+      "publishedDataset": "<datasetLink>{{- datasetDisplayName}}</datasetLink> was published in <ownerLink>{{- ownerDisplayName}}</ownerLink>.",
+      "publishFailedPidReg": "<datasetLink>{{- datasetDisplayName}}</datasetLink> in <ownerLink>{{- ownerDisplayName}}</ownerLink> could not be published due to a failure to register, or update the Global Identifier for the dataset or one of the files in it. Contact support if this continues to happen.",
+      "workflowFailure": "An external workflow run on <datasetLink>{{- datasetDisplayName}}</datasetLink> in <ownerLink>{{- ownerDisplayName}}</ownerLink> has failed. Check your email and/or view the Dataset page which may have additional details. Contact support if this continues to happen.",
+      "workflowSuccess": "An external workflow run on <datasetLink>{{- datasetDisplayName}}</datasetLink> in <ownerLink>{{- ownerDisplayName}}</ownerLink> has succeeded. Check your email and/or view the Dataset page which may have additional details.",
+      "statusUpdated": "The status of dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> has been updated to {{currentCurationStatus}}.",
+      "pidreconciled": "The persistent identifier of dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> has been updated to {{datasetPersistentId}}.",
+      "datasetMentioned": "Announcement Received: Newly released {{type}} <relatedLink>{{- name}}</relatedLink> {{relationship}} dataset <datasetLink>{{- datasetDisplayName}}</datasetLink>.",
+      "datasetMentionedGeneric": "Announcement received for dataset <datasetLink>{{- datasetDisplayName}}</datasetLink>, additional info: {{- additionalInfo}}.",
+      "checksumFail": "One or more files in your upload failed checksum validation for dataset <datasetLink>{{- datasetDisplayName}}</datasetLink>. Please re-run the upload script. If the problem persists, please contact support.",
+      "importFilesystem": "Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> has been successfully uploaded and verified.",
+      "globusUploadCompleted": "Globus transfer to Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> was successful. File(s) have been uploaded and verified.",
+      "globusDownloadCompleted": "Globus transfer from the dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> was successful.",
+      "globusUploadCompletedWithErrors": "Globus transfer to Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> is complete with errors.",
+      "globusUploadFailedRemotely": "Remote data transfer between Globus collections for Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> failed, reported via Globus API.",
+      "globusUploadFailedLocally": "Dataverse received a confirmation of a successful Globus data transfer for Dataset <datasetLink>{{- datasetDisplayName}}</datasetLink>, but failed to add the files to the dataset locally.",
+      "globusDownloadCompletedWithErrors": "Globus transfer from the dataset <datasetLink>{{- datasetDisplayName}}</datasetLink> is complete with errors.",
+      "importChecksum": "<datasetLink>{{datasetDisplayName}}</datasetLink>, dataset had file checksums added via a batch job."
+    }
   }
 }

public/locales/en/header.json

@@ -6,6 +6,7 @@
   "brandLogoImage": "Dataverse brand logo",
   "navigation": {
     "addData": "Add Data",
+    "notifications": "Notifications",
     "newCollection": "New Collection",
     "newDataset": "New Dataset",
     "accountInfo": "Account Information",

src/notifications/domain/hooks/needsUpdateStore.ts

@@ -0,0 +1,27 @@
+// store/updateFlagStore.ts
+type Listener = () => void
+
+class NeedsUpdateStore {
+  private needsUpdate = false
+  private listeners = new Set<Listener>()
+
+  getSnapshot = () => this.needsUpdate
+
+  subscribe = (callback: Listener) => {
+    this.listeners.add(callback)
+    return () => this.listeners.delete(callback)
+  }
+
+  setNeedsUpdate(value: boolean) {
+    if (this.needsUpdate !== value) {
+      this.needsUpdate = value
+      this.emit()
+    }
+  }
+
+  private emit() {
+    this.listeners.forEach((listener) => listener())
+  }
+}
+
+export const needsUpdateStore = new NeedsUpdateStore()

src/notifications/domain/hooks/useNeedsUpdate.ts

@@ -0,0 +1,31 @@
+// hooks/useNeedsUpdate.ts
+import { useSyncExternalStore } from 'react'
+type Listener = () => void
+
+class NeedsUpdateStore {
+  private needsUpdate = false
+  private listeners = new Set<Listener>()
+
+  getSnapshot = () => this.needsUpdate
+
+  subscribe = (callback: Listener) => {
+    this.listeners.add(callback)
+    return () => this.listeners.delete(callback)
+  }
+
+  setNeedsUpdate(value: boolean) {
+    if (this.needsUpdate !== value) {
+      this.needsUpdate = value
+      this.emit()
+    }
+  }
+
+  private emit() {
+    this.listeners.forEach((listener) => listener())
+  }
+}
+const needsUpdateStore = new NeedsUpdateStore()
+
+export function useNeedsUpdate() {
+  return useSyncExternalStore(needsUpdateStore.subscribe, needsUpdateStore.getSnapshot)
+}

src/notifications/domain/hooks/useNotifications.ts

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useSession } from '@/sections/session/SessionContext'
+import { Notification } from '@/notifications/domain/models/Notification'
+import { NotificationRepository } from '@/notifications/domain/repositories/NotificationRepository'
+import { getAllNotificationsByUser } from '@/notifications/domain/useCases/getAllNotificationsByUser'
+
+const POLLING_NOTIFICATIONS_INTERVAL_TIME = 30_000
+
+export function useNotifications(repository: NotificationRepository) {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const { user } = useSession()
+
+  const fetchNotifications = useCallback(async () => {
+    try {
+      const fetched = await getAllNotificationsByUser(repository)
+      setError(null)
+      setNotifications(fetched)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch notifications'
+      setError(message)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [repository])
+
+  useEffect(() => {
+    if (!user) return
+
+    void fetchNotifications()
+
+    const interval = setInterval(() => {
+      void fetchNotifications()
+    }, POLLING_NOTIFICATIONS_INTERVAL_TIME)
+
+    return () => clearInterval(interval)
+  }, [fetchNotifications, user])
+
+  const markAsRead = async (ids: number[]) => {
+    setNotifications((prev) =>
+      prev.map((n) => (ids.includes(n.id) ? { ...n, displayAsRead: true } : n))
+    )
+    try {
+      await Promise.all(ids.map((id) => repository.markNotificationAsRead(id)))
+      setError(null)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to mark as read'
+      setError(message)
+    }
+  }
+
+  const deleteMany = async (ids: number[]) => {
+    setNotifications((prev) => prev.filter((n) => !ids.includes(n.id)))
+    try {
+      await Promise.all(ids.map((id) => repository.deleteNotification(id)))
+      setError(null)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to delete notifications'
+      setError(message)
+    }
+  }
+
+  return {
+    notifications,
+    isLoading,
+    error,
+    refetch: fetchNotifications,
+    markAsRead,
+    deleteMany
+  }
+}

src/notifications/domain/hooks/useUnreadCount.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react'
+import { needsUpdateStore } from './needsUpdateStore'
+import { NotificationRepository } from '@/notifications/domain/repositories/NotificationRepository'
+import { User } from '@/users/domain/models/User'
+import { useNeedsUpdate } from '@/notifications/domain/hooks/useNeedsUpdate'
+import { getUnreadNotificationsCount } from '@/notifications/domain/useCases/getUnreadNotificationsCount'
+
+const POLLING_INTERVAL = 30000 // 30 seconds
+export function useUnreadCount(user: User, notificationRepository: NotificationRepository) {
+  const [unreadCount, setUnreadCount] = useState(0)
+
+  const needsUpdate = useNeedsUpdate()
+  const fetchUnread = useCallback(async () => {
+    if (user) {
+      const count = await getUnreadNotificationsCount(notificationRepository)
+      setUnreadCount(count)
+    }
+    needsUpdateStore.setNeedsUpdate(false)
+  }, [user, notificationRepository])
+  useEffect(() => {
+    if (needsUpdate) {
+      void fetchUnread()
+    }
+  }, [needsUpdate, fetchUnread, notificationRepository])
+  // Polling trigger
+  useEffect(() => {
+    const interval = setInterval(() => {
+      void fetchUnread()
+    }, POLLING_INTERVAL)
+
+    return () => clearInterval(interval)
+  }, [fetchUnread, notificationRepository])
+
+  useEffect(() => {
+    void fetchUnread() // run once when the component mounts
+  }, [fetchUnread])
+
+  return unreadCount
+}