add veeam summary

src/react/ui-elements/Veeam/VeeamSummary.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Clipboard } from '../Clipboard';
+import { HideCredential } from '../Hide';
+import { ModalBody } from '../Modal';
+import Table, * as T from '../TableKeyValue';
+import styled from 'styled-components';
+import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
+import { CustomModal } from './VeeamTable';
+import { Stack, Wrap } from '@scality/core-ui/dist/spacing';
+import { Banner, Icon } from '@scality/core-ui';
+import { spacing } from '@scality/core-ui/dist/style/theme';
+import { useHistory } from 'react-router-dom';
+
+const StyledCopybutton = styled(CopyButton)({
+  height: '1.914rem',
+  width: '11rem',
+});
+
+export const VeeamSummary = ({
+  secretKeyModal,
+  setSecretKeyModal,
+}: {
+  secretKeyModal: boolean;
+  setSecretKeyModal: (value: boolean) => void;
+}) => {
+  const history = useHistory();
+
+  return (
+    <CustomModal
+      isOpen={secretKeyModal}
+      title="Veeam Repository preparation summary"
+      footer={
+        <Wrap>
+          <p></p>
+          <Stack>
+            <p></p>
+            <Button
+              variant="primary"
+              label={'Continue'}
+              onClick={() => {
+                setSecretKeyModal(false);
+                history.push('/');
+              }}
+            />
+          </Stack>
+        </Wrap>
+      }
+    >
+      <ModalBody>
+        <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
+          A Root user Access key ID and its Secret Access key have been created.{' '}
+          <br />
+          The Secret Access key cannot be retrieved afterwards, so make sure to
+          keep and secure it now. <br />
+          You will be able to create new Access keys at any time.
+        </Banner>
+        <Table
+          style={{
+            marginTop: spacing.sp16,
+          }}
+        >
+          <T.Body>
+            <T.Row>
+              <T.Key> Account name </T.Key>
+              <T.Value>veeam</T.Value>
+            </T.Row>
+            <T.Row>
+              <T.Key> Access key ID </T.Key>
+              <T.Value>JLVWC9DX45XLY0K9PVEX</T.Value>
+              <T.ExtraCell>
+                {' '}
+                <Clipboard text={'JLVWC9DX45XLY0K9PVEX'} />{' '}
+              </T.ExtraCell>
+            </T.Row>
+            <T.Row>
+              <T.Key> Secret Access key </T.Key>
+              <T.Value>
+                {' '}
+                <HideCredential credentials={'EPJGOdLwTK'} />{' '}
+              </T.Value>
+              <T.ExtraCell>
+                {' '}
+                <Clipboard text={'EPJGOdLwTK'} />{' '}
+              </T.ExtraCell>
+            </T.Row>
+          </T.Body>
+        </Table>
+        <Box
+          display={'flex'}
+          style={{ alignItems: 'end', flexDirection: 'column' }}
+        >
+          <StyledCopybutton
+            textToCopy={`Username\tveeam\nAccess key ID\tJLVWC9DX45XLY0K9PVEX\nSecret Access key\tEPJGOdLwTK`}
+            label="to Clipboard"
+            variant="outline"
+          />
+        </Box>
+      </ModalBody>
+    </CustomModal>
+  );
+};

src/react/ui-elements/Veeam/VeeamTable.tsx

@@ -5,22 +5,23 @@ import {
 } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { Box, Button } from '@scality/core-ui/dist/next';
 import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
+import { VeeamSummary } from './VeeamSummary';
 import { useMockData } from './useMockData';
-import { useHistory } from 'react-router-dom';
 
-const CustomModal = styled(Modal)`
+export const CustomModal = styled(Modal)`
   background-color: ${(props) => props.theme.backgroundLevel1};
 `;
 
 export default function VeeamTable() {
   const [id, setId] = useState<number>(0);
   const [open, setOpen] = useState<boolean>(true);
   const [confirmCancel, setConfirmCancel] = useState<boolean>(false);
+  const [secretKeyModal, setSecretKeyModal] = useState<boolean>(false);
 
   const theme = useTheme();
   const history = useHistory();
-
   const { data } = useMockData({ id, setId });
 
   const columns: Column<{
@@ -107,6 +108,15 @@ export default function VeeamTable() {
     );
   }
 
+  if (secretKeyModal) {
+    return (
+      <VeeamSummary
+        secretKeyModal={secretKeyModal}
+        setSecretKeyModal={setSecretKeyModal}
+      />
+    );
+  }
+
   return (
     <CustomModal
       isOpen={open}
@@ -129,7 +139,7 @@ export default function VeeamTable() {
               label={'Continue'}
               onClick={() => {
                 setOpen(false);
-                history.push('/');
+                setSecretKeyModal(true);
               }}
             />
           </Stack>