From 87673f0a6241ab200273788b0a2c113fff07b11a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:27:04 +0100
Subject: [PATCH] ZKUI-393 // Link the no account page to the Veeam Assistant

---
 src/react/account/Accounts.tsx    | 20 +++++++++++++++++++-
 src/react/ui-elements/Warning.tsx | 12 ++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/react/account/Accounts.tsx b/src/react/account/Accounts.tsx
index eaf716b79..c7600aa78 100644
--- a/src/react/account/Accounts.tsx
+++ b/src/react/account/Accounts.tsx
@@ -16,6 +16,7 @@ import { useAccessibleAccountsAdapter } from '../next-architecture/ui/Accessible
 import { EmptyStateContainer } from '../ui-elements/Container';
 import { Warning } from '../ui-elements/Warning';
 import { useAuthGroups } from '../utils/hooks';
+import { Button } from '@scality/core-ui/dist/next';
 
 const Accounts = () => {
   const { pathname } = useLocation();
@@ -59,7 +60,24 @@ const Accounts = () => {
                 <Warning
                   centered={true}
                   icon={<Icon name="Account" size="5x" />}
-                  title={`You don't have any account, please create your first one.`}
+                  title={
+                    <>
+                      You don't have any account yet.
+                      <br />
+                      Launch configuration assitant to create resources needed
+                      by Veeam.
+                    </>
+                  }
+                  content={
+                    <>
+                      <Button
+                        label="Start Configuration for Veeam"
+                        variant="primary"
+                        onClick={() => history.push('/veeam/configuration')}
+                      />
+                      <p>or</p>
+                    </>
+                  }
                   btnTitle="Create Account"
                   btnAction={() => history.push('/create-account')}
                 />
diff --git a/src/react/ui-elements/Warning.tsx b/src/react/ui-elements/Warning.tsx
index c7116f70c..054580336 100644
--- a/src/react/ui-elements/Warning.tsx
+++ b/src/react/ui-elements/Warning.tsx
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { Button } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { ReactNode } from 'react';
-import { Icon } from '@scality/core-ui';
+import { Icon, Text } from '@scality/core-ui';
 const Container = styled.div<{ centered?: boolean }>`
   display: flex;
   flex: 1;
@@ -39,6 +39,7 @@ const ButtonSection = styled.div`
 type WarningProps = {
   icon?: ReactNode;
   title: ReactNode;
+  content?: ReactNode;
   btnTitle?: string;
   btnAction?: () => void;
   centered?: boolean;
@@ -46,17 +47,20 @@ type WarningProps = {
 export const Warning = ({
   icon,
   title,
+  content,
   btnTitle,
   btnAction,
   centered,
 }: WarningProps) => (
   <Container centered={centered}>
     <div>{icon}</div>
-    <Title> {title} </Title>
+    <Title>
+      <Text isEmphazed>{title}</Text>
+    </Title>
     {!!btnTitle && !!btnAction && (
       <ButtonSection>
-        {' '}
-        <Button label={btnTitle} variant="secondary" onClick={btnAction} />{' '}
+        {content}
+        <Button label={btnTitle} variant="outline" onClick={btnAction} />{' '}
       </ButtonSection>
     )}
   </Container>