ZKUI-393 // Link the no account page to the Veeam Assistant

scality · Nov 20, 2023 · 87673f0 · 87673f0
1 parent 664a0d0
commit 87673f0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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,24 +39,28 @@ const ButtonSection = styled.div`
 type WarningProps = {
   icon?: ReactNode;
   title: ReactNode;
+  content?: ReactNode;
   btnTitle?: string;
   btnAction?: () => void;
   centered?: boolean;
 };
 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>