Use the "Title" / "notes" field in notifications

This also applies to the Recent Activity module in the Dashboard page.

src/@types/MainItem.ts

@@ -118,3 +118,18 @@ export type MigrationItemDetails = MigrationItem & {
 }
 
 export type TransferItemDetails = ReplicaItemDetails | MigrationItemDetails
+
+export const getTransferItemTitle = (item: TransferItem | null) => {
+  if (!item) {
+    return null
+  }
+  const { instances, notes } = item
+  let title = notes
+  if (!notes) {
+    title = instances[0]
+    if (instances.length > 1) {
+      title += ` (+${instances.length - 1} more)`
+    }
+  }
+  return title
+}

src/components/molecules/MainListItem/MainListItem.tsx

@@ -21,7 +21,7 @@ import StatusPill from '../../atoms/StatusPill'
 import EndpointLogos from '../../atoms/EndpointLogos'
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
-import type { TransferItem } from '../../../@types/MainItem'
+import { getTransferItemTitle, TransferItem } from '../../../@types/MainItem'
 
 import arrowImage from './images/arrow.svg'
 import scheduleImage from './images/schedule.svg'
@@ -178,14 +178,6 @@ class MainListItem extends React.Component<Props> {
       </EndpointsImages>
     )
     const status = this.getStatus()
-    const { instances, notes } = this.props.item
-    let title = notes
-    if (!notes) {
-      title = instances[0]
-      if (instances.length > 1) {
-        title += ` (+${instances.length - 1} more)`
-      }
-    }
 
     return (
       <Wrapper>
@@ -196,7 +188,7 @@ class MainListItem extends React.Component<Props> {
         <Content onClick={this.props.onClick}>
           <Image image={this.props.image} />
           <Title>
-            <TitleLabel>{title}</TitleLabel>
+            <TitleLabel>{getTransferItemTitle(this.props.item)}</TitleLabel>
             <StatusWrapper>
               {status ? (
                 <StatusPill

src/components/pages/MigrationDetailsPage/MigrationDetailsPage.tsx

@@ -40,6 +40,7 @@ import Palette from '../../styleUtils/Palette'
 import type { Field } from '../../../@types/Field'
 import type { InstanceScript } from '../../../@types/Instance'
 import minionPoolStore from '../../../stores/MinionPoolStore'
+import { getTransferItemTitle } from '../../../@types/MainItem'
 
 const Wrapper = styled.div<any>``
 
@@ -343,19 +344,6 @@ class MigrationDetailsPage extends React.Component<Props, State> {
       },
     ]
 
-    const migration = migrationStore.migrationDetails
-    let title = migration?.notes
-    if (!title) {
-      if (migration?.instances) {
-        title = migration.instances[0]
-        if (migration.instances.length > 1) {
-          title += ` (+${migration.instances.length - 1} more)`
-        }
-      } else {
-        title = migration?.name
-      }
-    }
-
     return (
       <Wrapper>
         <DetailsTemplate
@@ -368,7 +356,7 @@ class MigrationDetailsPage extends React.Component<Props, State> {
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={migrationStore.migrationDetails?.last_execution_status}
-              itemTitle={title}
+              itemTitle={getTransferItemTitle(migrationStore.migrationDetails)}
               itemType="migration"
               itemDescription={migrationStore.migrationDetails?.description}
               backLink="/migrations"

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -48,7 +48,7 @@ import { providerTypes } from '../../../constants'
 
 import replicaImage from './images/replica.svg'
 import Palette from '../../styleUtils/Palette'
-import { ReplicaItemDetails } from '../../../@types/MainItem'
+import { getTransferItemTitle, ReplicaItemDetails } from '../../../@types/MainItem'
 import ObjectUtils from '../../../utils/ObjectUtils'
 import minionPoolStore from '../../../stores/MinionPoolStore'
 
@@ -551,17 +551,6 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
       },
     ]
     const replica = this.replica
-    let title = replica?.notes
-    if (!title) {
-      if (replica?.instances) {
-        title = replica.instances[0]
-        if (replica.instances.length > 1) {
-          title += ` (+${replica.instances.length - 1} more)`
-        }
-      } else {
-        title = replica?.name
-      }
-    }
 
     return (
       <Wrapper>
@@ -575,7 +564,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={replica?.last_execution_status}
-              itemTitle={title}
+              itemTitle={getTransferItemTitle(this.replica)}
               itemType="replica"
               itemDescription={replica?.description}
               dropdownActions={dropdownActions}

src/sources/NotificationSource.ts

@@ -12,12 +12,12 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import moment from 'moment'
-
 import configLoader from '../utils/Config'
 import Api from '../utils/ApiCaller'
 import type { NotificationItemData, NotificationItem } from '../@types/NotificationItem'
-import { TransferItem, MigrationItem, ReplicaItem } from '../@types/MainItem'
+import {
+  TransferItem, MigrationItem, ReplicaItem, getTransferItemTitle,
+} from '../@types/MainItem'
 
 class NotificationStorage {
   static storeName: string = 'seenNotifications'
@@ -85,14 +85,15 @@ class NotificationSource {
     const migrations: MigrationItem[] = migrationsResponse.data.migrations
     const replicas: ReplicaItem[] = replicasResponse.data.replicas
     const apiData = [...migrations, ...replicas]
-    apiData.sort((a, b) => moment(b.updated_at).diff(a.updated_at))
+    apiData.sort((a, b) => new Date(b.updated_at || b.created_at).getTime()
+        - new Date(a.updated_at || a.created_at).getTime())
 
     const notificationItems: NotificationItemData[] = apiData.map(item => {
       const newItem: NotificationItemData = {
         id: item.id,
         status: item.last_execution_status,
         type: item.type,
-        name: item.instances[0],
+        name: getTransferItemTitle(item) || '',
         updatedAt: item.updated_at,
         description: DataUtils.getItemDescription(item),
       }