RI-7484 Rework the visuals of the success notification when sample data is imported

redisinsight/ui/src/components/notifications/Notifications.tsx

@@ -54,32 +54,43 @@
   )
 
   const showSuccessToasts = (data: IMessage[]) =>
-    data.forEach(({ id = '', title = '', message = '', className, group }) => {
-      const handleClose = () => {
-        onSubmitNotification(id, group)
-        removeToast(id)
-      }
-      if (toastIdsRef.current.has(id)) {
-        removeToast(id)
-        return
-      }
-      const toastId = riToast(
-        {
-          className,
-          message: title,
-          description: getSuccessText(message),
-          actions: {
-            primary: {
-              closes: true,
-              label: 'OK',
-              onClick: handleClose,
+    data.forEach(
+      ({
+        id = '',
+        title = '',
+        message = '',
+        showCloseButton = true,
+        actions,
+        className,
+        group,
+      }) => {
+        const handleClose = () => {
+          onSubmitNotification(id, group)
+          removeToast(id)
+        }
+        if (toastIdsRef.current.has(id)) {
+          removeToast(id)
+          return
+        }
+        const toastId = riToast(
+          {
+            className,
+            message: title,
+            description: getSuccessText(message),
+            actions: actions ?? {
+              primary: {
+                closes: true,
+                label: 'OK',
+                onClick: handleClose,
+              },
             },
+            showCloseButton,
           },
-        },
-        { variant: riToast.Variant.Success, toastId: id },
-      )
-      toastIdsRef.current.set(id, toastId)
-    })
+          { variant: riToast.Variant.Success, toastId: id },
+        )
+        toastIdsRef.current.set(id, toastId)
+      },
+    )
 
   const showErrorsToasts = (errors: IError[]) =>
     errors.forEach(

redisinsight/ui/src/components/notifications/styles.module.scss

@@ -17,24 +17,6 @@
   box-shadow: none !important;
 }
 
-.summary {
-  border-top: 1px solid var(--euiToastSuccessBtnColor);
-  padding-top: 8px;
-
-  :global(.euiFlexItem:not(:last-child)) {
-    margin-right: 14px !important;
-  }
-
-  .summaryValue {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .summaryLabel {
-    color: var(--euiToastLightColor) !important;
-  }
-}
-
 .infiniteMessage {
   :global {
     .euiToastHeader {

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -13,8 +13,9 @@ import {
 } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Text } from 'uiSrc/components/base/text'
+import { Text, Title } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
+import { Spacer } from '../base/layout'
 
 // TODO: use i18n file for texts
 export default {
@@ -242,53 +243,41 @@ export default {
     return {
       title: (
         <>
-          Action completed
+          <Title size="S">Action completed</Title>
           {fileName ? (
             <>
-              <br />
-              <Text color="ghost">Commands executed from file:</Text>
-              <Text color="ghost">{formatLongName(fileName, 34, 5)}</Text>
+              <Spacer size="s" />
+              <Text>Commands executed from file:</Text>
+              <Text>{formatLongName(fileName, 34, 5)}</Text>
             </>
           ) : null}
+          <Spacer size="m" />
         </>
       ),
       message: (
-        <Row align="start" className={styles.summary}>
+        <Row align="start" gap="xl">
           <FlexItem>
-            <Text color="ghost" className={styles.summaryValue}>
-              {numberWithSpaces(processed)}
-            </Text>
-            <Text size="xs" className={styles.summaryLabel}>
-              Commands Processed
-            </Text>
+            <Text>{numberWithSpaces(processed)}</Text>
+            <Text size="xs">Commands Processed</Text>
           </FlexItem>
           <FlexItem>
-            <Text color="ghost" className={styles.summaryValue}>
-              {numberWithSpaces(succeed)}
-            </Text>
-            <Text size="xs" className={styles.summaryLabel}>
-              Success
-            </Text>
+            <Text>{numberWithSpaces(succeed)}</Text>
+            <Text size="xs">Success</Text>
           </FlexItem>
           <FlexItem>
-            <Text color="ghost" className={styles.summaryValue}>
-              {numberWithSpaces(failed)}
-            </Text>
-            <Text size="xs" className={styles.summaryLabel}>
-              Errors
-            </Text>
+            <Text>{numberWithSpaces(failed)}</Text>
+            <Text size="xs">Errors</Text>
           </FlexItem>
           <FlexItem>
-            <Text color="ghost" className={styles.summaryValue}>
+            <Text>
               {millisecondsFormat(data?.duration || 0, 'H:mm:ss.SSS')}
             </Text>
-            <Text size="xs" className={styles.summaryLabel}>
-              Time Taken
-            </Text>
+            <Text size="xs">Time Taken</Text>
           </FlexItem>
         </Row>
       ),
       className: 'dynamic',
+      actions: {}, // Make sure we don't show the default OK button
     }
   },
   DELETE_LIBRARY: (libraryName: string) => ({

redisinsight/ui/src/slices/interfaces/app.ts

@@ -48,6 +48,8 @@ export interface IMessage {
   message: string | JSX.Element
   group?: string
   className?: string
+  showCloseButton?: boolean
+  actions?: RiToastType['actions']
 }
 
 export enum AppWorkspace {