EZQMS-562: Introduced reusable NotificationToast component (#4873)

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>

plugins/tracker-resources/src/components/issues/IssueNotification.svelte

@@ -2,20 +2,8 @@
   import { getMetadata } from '@hcengineering/platform'
   import presentation, { copyTextToClipboard, createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus } from '@hcengineering/tracker'
-  import {
-    AnySvelteComponent,
-    Button,
-    Icon,
-    IconCheckCircle,
-    IconClose,
-    IconInfo,
-    Notification,
-    NotificationSeverity,
-    navigate,
-    parseLocation
-  } from '@hcengineering/ui'
+  import { Button, Notification, navigate, parseLocation, NotificationToast } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { fade } from 'svelte/transition'
 
   import { statusStore } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
@@ -27,10 +15,10 @@
 
   const issueQuery = createQuery()
 
-  let issue: Issue | undefined
-  let status: IssueStatus | undefined
+  let issue: Issue | undefined = undefined
+  let status: IssueStatus | undefined = undefined
 
-  const { title, subTitle, severity, params } = notification
+  const { subTitle, params } = notification
 
   $: issueQuery.query(
     tracker.class.Issue,
@@ -45,30 +33,7 @@
     status = $statusStore.byId.get(issue.status)
   }
 
-  const getIcon = (): AnySvelteComponent | undefined => {
-    switch (severity) {
-      case NotificationSeverity.Success:
-        return IconCheckCircle
-      case NotificationSeverity.Error:
-      case NotificationSeverity.Info:
-      case NotificationSeverity.Warning:
-        return IconInfo
-    }
-  }
-
-  const getIconColor = () => {
-    switch (severity) {
-      case NotificationSeverity.Success:
-        return '#34db80'
-      case NotificationSeverity.Error:
-        return '#eb5757'
-      case NotificationSeverity.Info:
-        return '#93caf3'
-      case NotificationSeverity.Warning:
-        return '#f2994a'
-    }
-  }
-  const handleIssueOpened = () => {
+  function handleIssueOpened (): void {
     if (params?.issueUrl) {
       const url = new URL(params?.issueUrl)
       const frontUrl = getMetadata(presentation.metadata.FrontUrl) ?? window.location.origin
@@ -80,67 +45,34 @@
 
     onRemove()
   }
-  const handleCopyUrl = () => {
-    if (issue) {
-      copyTextToClipboard(params?.issueUrl)
+
+  function handleCopyUrl (): void {
+    if (issue === undefined) {
+      void copyTextToClipboard(params?.issueUrl)
     }
   }
-  $: icon = getIcon()
 </script>
 
-<div class="notify-container" in:fade out:fade>
-  <div class="flex-between">
-    <div class="flex-row-center">
-      {#if icon}
-        <div class="mr-2"><Icon {icon} size="medium" fill={getIconColor()} /></div>
+<NotificationToast title={notification.title} severity={notification.severity} onClose={onRemove}>
+  <svelte:fragment slot="content">
+    <div class="flex-row-center flex-wrap gap-2 reverse">
+      {#if status === undefined && issue}
+        <IssueStatusIcon value={status} space={issue.space} size="small" />
       {/if}
-      <span class="overflow-label fs-bold caption-color">{title}</span>
+      {#if issue}
+        <IssuePresenter value={issue} />
+      {/if}
+      <span class="overflow-label">
+        {subTitle}
+      </span>
+      <span class="content-dark-color">
+        {params?.subTitlePostfix}
+      </span>
     </div>
-    <Button icon={IconClose} kind="ghost" size="small" on:click={onRemove} />
-  </div>
+  </svelte:fragment>
 
-  <div class="content flex-row-center flex-wrap gap-2 reverse">
-    {#if status && issue}
-      <IssueStatusIcon value={status} space={issue.space} size="small" />
-    {/if}
-    {#if issue}
-      <IssuePresenter value={issue} />
-    {/if}
-    <span class="overflow-label">
-      {subTitle}
-    </span>
-    <span class="content-dark-color">
-      {params?.subTitlePostfix}
-    </span>
-  </div>
-  <div class="flex-between gap-2">
+  <svelte:fragment slot="buttons">
     <Button label={tracker.string.ViewIssue} on:click={handleIssueOpened} />
     <Button icon={view.icon.CopyLink} label={tracker.string.CopyIssueUrl} on:click={handleCopyUrl} />
-  </div>
-</div>
-
-<style lang="scss">
-  .notify-container {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    margin: 0.75rem;
-    padding: 0.5rem;
-    min-width: 25rem;
-    max-width: 35rem;
-    min-height: 7rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-popup-color);
-    border: 1px solid var(--theme-popup-divider);
-    border-radius: 0.5rem;
-    box-shadow: var(--theme-popup-shadow);
-
-    .content {
-      flex-grow: 1;
-      margin: 1rem 0 1.25rem;
-      padding: 0 1rem;
-      // border: 1px solid var(--theme-divider-color);
-      border-radius: 0.5rem;
-    }
-  }
-</style>
+  </svelte:fragment>
+</NotificationToast>