RI-7634: notifications

.storybook/preview-head.html

@@ -1,6 +1,20 @@
 <script>
     window.global = window;
 </script>
+<script>
+  var RIPROXYPATH = '__RIPROXYPATH__';
+  // for vite RIPROXYPATH is a "base" field in the config
+  // in the vite base must starts with '/', for app we should remove the first '/'
+  window.__RI_PROXY_PATH__ = RIPROXYPATH.startsWith('/')
+    ? RIPROXYPATH.slice(1)
+    : RIPROXYPATH;
+
+  // If the RIPROXYPATH is not set, then we need to set it to undefined
+  if (RIPROXYPATH.startsWith('__') || RIPROXYPATH.endsWith('__')) {
+    window.__RI_PROXY_PATH__ = undefined;
+  }
+</script>
+
 <style>
     :root {
         /*
@@ -44,3 +58,42 @@
     }
 
 </style>
+<style>
+  #root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #page-placeholder {
+    display: flex;
+    background-color: black;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    z-index: 100;
+  }
+
+  #page-placeholder__icon {
+    width: 28px;
+    height: 28px;
+    animation: nonstop-jump 1s ease-in-out infinite;
+
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjM4MjggMTUuNDY3MkMyNC40NTQyIDE3Ljg5NzIgMjIuMzcxMyAyMC42NzQzIDE4LjIwNTYgMjAuNjc0M0MxNC40ODQ3IDIwLjY3NDMgMTMuMDk4NSAxNy4zOTIzIDEzLjAwMSAxNC43MjYxQzEzLjgxNjMgMTYuNDUgMTUuNDEwMiAxNy44NDYxIDE3Ljg5NzEgMTcuNzgxNUMyMi42Nzk5IDE3LjYyNzIgMjUuOTU4NSAxMy4zMDcyIDI1Ljk1ODUgOS4zNzI5MkMyNS45NTg1IDQuNjY3MjIgMjIuNDQ4NSAxLjI3Mjk1IDE2LjM1NDIgMS4yNzI5NUMxMS45OTU3IDEuMjcyOTUgNi41OTU2OSAyLjkzMTUxIDMuMDQ3MTMgNS41NTQzNkMzLjAwODU2IDguMjU0MzUgNC41MTI4NCAxMS43NjQzIDUuMDUyODQgMTEuMzc4NkM4LjEyOTIgOS4xNjY3MyAxMC41Njg2IDcuNzQyODcgMTIuOTM0NyA3LjAyODkyQzkuNDMyMjYgMTAuOTM0NiAxLjAyODg4IDIwLjAwMzUgMCAyMS42QzAuMTE1NzE0IDIzLjA2NTcgMS45Mjg1NiAyNyAyLjgxNTcgMjdDMy4wODU3IDI3IDMuMzE3MTMgMjYuODQ1NyAzLjU4NzEzIDI2LjU3NTdDNi4xMjA1NiAyMy43MjkyIDguMTg1NzggMjEuMTc3MSAxMC4wMjI3IDE4LjcxNzJDMTAuMjgwNyAyMi4zMjI1IDEyLjA1MzUgMjYuNzMgMTcuMDA5OSAyNi43M0MyMS40NDU2IDI2LjczIDI1Ljg0MjggMjMuNTI4NiAyNy44NDg1IDE2LjMxNThDMjguMDc5OSAxNS40Mjg2IDI2Ljk5OTkgMTQuNzM0MyAyNi4zODI4IDE1LjQ2NzJaTTIxLjMyOTkgOS42NDI5MkMyMS4zMjk5IDExLjkxODYgMTkuMDkyOCAxMy4wMzcyIDE3LjA0ODUgMTMuMDM3MkMxNS45NTU4IDEzLjAzNzIgMTUuMTE2NCAxMi43NTAzIDE0LjQ1MjUgMTIuMzc3NEMxNS42NzQgMTAuNTI3OCAxNi44ODMxIDguNjMxMjUgMTguMTgyMiA2LjYwMDk1QzIwLjQ3MjggNi45ODg2NSAyMS4zMjk5IDguMjYxODcgMjEuMzI5OSA5LjY0MjkyWiIgZmlsbD0iI0ZGNDQzOCIvPgo8L3N2Zz4K');
+  }
+
+  @keyframes nonstop-jump {
+    0% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(6px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+</style>

redisinsight/ui/src/components/base/external-link/ExternalLink.tsx

@@ -22,7 +22,11 @@ const ExternalLink = (props: Props) => {
   } = props
 
   const ArrowIcon = () => (
-    <RiIcon type="ArrowDiagonalIcon" size={iconSize} color="informative400" />
+    <RiIcon
+      type="ArrowDiagonalIcon"
+      size={iconSize || size}
+      color="informative400"
+    />
   )
 
   return (

redisinsight/ui/src/components/notifications/ErrorNotifications.stories.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { faker } from '@faker-js/faker'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { action } from 'storybook/actions'
+
+import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+import Notifications from './Notifications'
+import ERROR_MESSAGES from './error-messages'
+
+const meta = {
+  component: Notifications,
+} satisfies Meta<typeof Notifications>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const ErrorNotifications = () => {
+  return (
+    <>
+      <Notifications />
+      <Row gap="s" wrap>
+        <PrimaryButton
+          onClick={() => {
+            ERROR_MESSAGES.DEFAULT(
+              faker.lorem.sentence(),
+              action('default error close'),
+              'Error',
+            )
+          }}
+          size="small"
+        >
+          Default Error
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            ERROR_MESSAGES.ENCRYPTION(
+              action('encryption error close'),
+              faker.database.mongodbObjectId(),
+            )
+          }}
+          size="small"
+        >
+          Encryption Error
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            ERROR_MESSAGES.CLOUD_CAPI_KEY_UNAUTHORIZED(
+              {
+                message: 'Your API key is unauthorized to access this resource',
+                title: 'Unauthorized',
+              },
+              {
+                resourceId: faker.string.uuid(),
+              },
+              action('cloud capi unauthorized close'),
+            )
+          }}
+          size="small"
+        >
+          Cloud CAPI Unauthorized
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            ERROR_MESSAGES.RDI_DEPLOY_PIPELINE(
+              {
+                title: 'Pipeline deployment failed',
+                message: faker.lorem.paragraph(),
+              },
+              action('rdi deploy error close'),
+            )
+          }}
+          size="small"
+        >
+          RDI Deploy Pipeline Error
+        </PrimaryButton>
+      </Row>
+    </>
+  )
+}
+
+export const Errors: Story = {
+  render: () => <ErrorNotifications />,
+}

redisinsight/ui/src/components/notifications/InfiniteNotifications.stories.tsx

@@ -0,0 +1,216 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useDispatch } from 'react-redux'
+import { action } from 'storybook/actions'
+
+import { addInfiniteNotification } from 'uiSrc/slices/app/notifications'
+import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
+import { CloudJobName, CloudJobStep } from 'uiSrc/electron/constants'
+import { OAuthProvider } from 'uiSrc/components/oauth/oauth-select-plan/constants'
+
+import Notifications from './Notifications'
+
+const meta = {
+  component: Notifications,
+} satisfies Meta<typeof Notifications>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const InfiniteNotifications = () => {
+  const dispatch = useDispatch()
+
+  return (
+    <>
+      <Notifications />
+      <Row gap="s" wrap>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(INFINITE_MESSAGES.AUTHENTICATING()),
+            )
+          }}
+          size="small"
+        >
+          Authenticating
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Credentials),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Pending Create DB (Credentials)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Subscription),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Pending Create DB (Subscription)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Database),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Pending Create DB (Database)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Import),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Pending Create DB (Import)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.SUCCESS_CREATE_DB(
+                  {
+                    provider: OAuthProvider.AWS,
+                    region: 'us-east-1',
+                  },
+                  action('create aws success'),
+                  CloudJobName.CreateFreeDatabase,
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Success Create DB (AWS)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.SUCCESS_CREATE_DB(
+                  {
+                    provider: OAuthProvider.Google,
+                    region: 'us-central1',
+                  },
+                  action('create gcp success'),
+                  CloudJobName.CreateFreeSubscriptionAndDatabase,
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Success Create DB (GCP)
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.DATABASE_EXISTS(
+                  action('db exists success'),
+                  action('db exists close'),
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Database Exists
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.DATABASE_IMPORT_FORBIDDEN(
+                  action('db import forbidden close'),
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Database Import Forbidden
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.SUBSCRIPTION_EXISTS(
+                  action('subscription exists success'),
+                  action('subscription exists close'),
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Subscription Exists
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.AUTO_CREATING_DATABASE(),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Auto Creating Database
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.APP_UPDATE_AVAILABLE(
+                  '2.60.0',
+                  action('app update available success'),
+                ),
+              ),
+            )
+          }}
+          size="small"
+        >
+          App Update Available
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            dispatch(
+              addInfiniteNotification(
+                INFINITE_MESSAGES.SUCCESS_DEPLOY_PIPELINE(),
+              ),
+            )
+          }}
+          size="small"
+        >
+          Success Deploy Pipeline
+        </PrimaryButton>
+      </Row>
+    </>
+  )
+}
+
+export const Infinite: Story = {
+  render: () => <InfiniteNotifications />,
+}