ZKUI-396 // Veeam Configuration Summary Page

package.json

@@ -76,7 +76,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@js-temporal/polyfill": "^0.4.3",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "github:scality/core-ui#0.93.0",
+    "@scality/core-ui": "github:scality/core-ui#0.102.0",
     "@scality/module-federation": "github:scality/module-federation#1.1.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

src/react/Routes.tsx

@@ -1,5 +1,6 @@
-import { EmptyStateContainer } from './ui-elements/Container';
+import { AppContainer, ErrorPage401, Icon, Sidebar } from '@scality/core-ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Redirect,
   Route,
@@ -9,36 +10,34 @@ import {
   useHistory,
   useLocation,
 } from 'react-router-dom';
+import { useTheme } from 'styled-components';
+import makeMgtClient from '../js/managementClient';
+import type { AppState } from '../types/state';
+import DataServiceRoleProvider, {
+  useCurrentAccount,
+} from './DataServiceRoleProvider';
+import ManagementProvider from './ManagementProvider';
+import NoMatch from './NoMatch';
+import AccountContent from './account/AccountContent';
+import AccountCreate from './account/AccountCreate';
+import Accounts from './account/Accounts';
 import {
   loadClients,
   loadInstanceLatestStatus,
   setManagementClient,
 } from './actions';
-import { useDispatch, useSelector } from 'react-redux';
-import AccountCreate from './account/AccountCreate';
-import Accounts from './account/Accounts';
-import AccountContent from './account/AccountContent';
-import type { AppState } from '../types/state';
 import DataBrowser from './databrowser/DataBrowser';
+import BucketCreate from './databrowser/buckets/BucketCreate';
 import EndpointCreate from './endpoint/EndpointCreate';
 import Endpoints from './endpoint/Endpoints';
-import Loader from './ui-elements/Loader';
 import LocationEditor from './locations/LocationEditor';
-import NoMatch from './NoMatch';
-import ManagementProvider from './ManagementProvider';
-import DataServiceRoleProvider, {
-  useCurrentAccount,
-} from './DataServiceRoleProvider';
-import BucketCreate from './databrowser/buckets/BucketCreate';
-import makeMgtClient from '../js/managementClient';
-import { ErrorPage401, Icon, Sidebar } from '@scality/core-ui';
-import { Warning } from './ui-elements/Warning';
-import { AppContainer } from '@scality/core-ui';
 import { Locations } from './locations/Locations';
+import { EmptyStateContainer } from './ui-elements/Container';
+import Loader from './ui-elements/Loader';
 import ReauthDialog from './ui-elements/ReauthDialog';
+import VeeamSteppers from './ui-elements/Veeam/VeeamSteps';
+import { Warning } from './ui-elements/Warning';
 import { useAuthGroups } from './utils/hooks';
-import { useTheme } from 'styled-components';
-import Configuration from './ui-elements/Veeam/VeeamConfiguration';
 
 export const RemoveTrailingSlash = ({ ...rest }) => {
   const location = useLocation();
@@ -182,7 +181,7 @@ function PrivateRoutes() {
       <Route exact path="/create-dataservice" component={EndpointCreate} />
       <Route exact path="/dataservices" component={Endpoints} />
       <Route exact path="/locations" component={Locations} />
-      <Route path="/veeam/configuration" component={Configuration} />
+      <Route path="/veeam/configuration" component={VeeamSteppers} />
       <Route path="*" component={NoMatch} />
     </Switch>
   );

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

@@ -8,8 +8,8 @@ export const ArtescaLogo = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17.6841 12.0043C18.9179 15.115 21.4233 17.564 24.5848 18.6921V5.2782C21.4233 6.40586 18.9179 8.85528 17.6841 12.0043ZM5.16101 5.2782V18.6921C8.32214 17.564 10.8664 15.115 12.0613 12.0043C10.8664 8.85528 8.32214 6.40586 5.16101 5.2782ZM26.7714 24C21.9525 24 17.6693 21.7202 14.8727 18.18C12.1067 21.7202 7.79337 24 2.97448 24H0V0H2.97448C7.79337 0 12.1067 2.24984 14.8727 5.79C17.6693 2.24984 21.9525 0 26.7714 0H29.7458V24H26.7714Z"
         fill="#0AADA6"
       />

src/react/ui-elements/Veeam/VeeamConfiguration.test.tsx

@@ -1,21 +1,30 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Configuration from './VeeamConfiguration';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import Configuration from './VeeamConfiguration';
+import { Stepper } from '@scality/core-ui';
 
 describe('Veeam Configuration UI', () => {
   const selectors = {
-    repositoryInput: () => screen.getByLabelText(/Repository name/i),
+    repositoryInput: () => screen.getByLabelText(/bucket name/i),
     continueButton: () => screen.getByRole('button', { name: /Continue/i }),
     skipButton: () =>
       screen.getByRole('button', { name: /Skip Use case configuration/i }),
     title: () => screen.getByText(/Prepare ARTESCA for Veeam/i),
   };
+
   it('should be able to set the Veeam configuration', async () => {
     //S
     render(
       <QueryClientProvider client={new QueryClient()}>
-        <Configuration />
+        <Stepper
+          steps={[
+            {
+              label: 'Configuration',
+              Component: Configuration,
+            },
+          ]}
+        />
       </QueryClientProvider>,
     );
     //V

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

@@ -1,13 +1,12 @@
 import Joi from '@hapi/joi';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Form, FormGroup, FormSection, Stack, Toggle } from '@scality/core-ui';
+import { useStepper } from '@scality/core-ui/dist/components/steppers/Stepper.component';
 import { Button, Input, Select } from '@scality/core-ui/dist/next';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import VeeamTable from './VeeamTable';
-
-const VEEAMVERSION11 = 'Veeam 11';
-const VEEAMVERSION12 = 'Veeam 12';
+import { VEEAM_STEPS, VeeamStepsIndexes } from './VeeamSteps';
+import { VEEAMVERSION11, VEEAMVERSION12 } from './VeeamConstants';
 
 const schema = Joi.object({
   name: Joi.string().required(),
@@ -56,11 +55,7 @@ const Configuration = () => {
     //TODO: Create account
   };
   const formRef = useRef(null);
-  const [openVeeamTable, setOpenVeeamTable] = useState(false);
-
-  if (openVeeamTable) {
-    return <VeeamTable />;
-  }
+  const { next } = useStepper(VeeamStepsIndexes.Configuration, VEEAM_STEPS);
 
   return (
     <Form
@@ -86,7 +81,7 @@ const Configuration = () => {
             label="Continue"
             disabled={!isValid}
             onClick={() => {
-              setOpenVeeamTable(true);
+              next({});
             }}
           />
         </Stack>
@@ -116,10 +111,10 @@ const Configuration = () => {
               }}
             ></Controller>
           }
-        ></FormGroup>
+        />
         <FormGroup
           id="name"
-          label="Repository name"
+          label="Bucket name"
           direction="vertical"
           required
           labelHelpTooltip="TODO"
@@ -129,16 +124,16 @@ const Configuration = () => {
               id="name"
               type="text"
               autoComplete="off"
-              placeholder="Veeam-repository name"
+              placeholder="Veeam bucket name"
               {...register('name')}
             />
           }
-        ></FormGroup>
+        />
         <FormGroup
           id="enableImmutableBackup"
           label="Immutable backup"
           direction="vertical"
-          help="Enables permanent, unchangeable backups of objects in bucket."
+          help="It enables object-lock on the bucket which means backups will be permanent and unchangeable."
           helpErrorPosition="bottom"
           labelHelpTooltip="TODO"
           content={
@@ -158,13 +153,14 @@ const Configuration = () => {
               }}
             ></Controller>
           }
-        ></FormGroup>
+        />
         {isVeeam12 ? (
           <FormGroup
             id="capacity"
-            label="Repository capacity"
+            label="Max repository capacity"
             direction="vertical"
             error={errors.capacity?.message ?? ''}
+            help="The recommended value is 80% of the platform's total capacity."
             helpErrorPosition="bottom"
             labelHelpTooltip="TODO"
             content={

src/react/ui-elements/Veeam/VeeamConstants.ts

@@ -0,0 +1,3 @@
+export const BUCKET_TAG_USECASE = 'X-Scality-Usecase';
+export const VEEAMVERSION11 = 'Veeam 11';
+export const VEEAMVERSION12 = 'Veeam 12';

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

@@ -0,0 +1,29 @@
+import VeeamTable from './VeeamTable';
+import VeeamConfiguration from './VeeamConfiguration';
+import { VeeamSummary } from './VeeamSummary';
+import { Stepper } from '@scality/core-ui';
+
+export const VEEAM_STEPS = [
+  {
+    label: 'Configuration',
+    Component: VeeamConfiguration,
+  },
+  {
+    label: 'Repository Table',
+    Component: VeeamTable,
+  },
+  {
+    label: 'Repository Summary',
+    Component: VeeamSummary,
+  },
+] as const;
+
+export enum VeeamStepsIndexes {
+  Configuration,
+  Table,
+  Summary,
+}
+
+export default function VeeamSteppers() {
+  return <Stepper steps={VEEAM_STEPS} />;
+}