add ISV modal and component for it

src/react/ISV/components/ISVConfiguration.tsx

@@ -44,7 +44,8 @@ const FORM_FIELDS = {
 
 const isImmutableBackupEnabled = (application: string) =>
   application === VEEAM_BACKUP_REPLICATION_XML_VALUE ||
-  application === VEEAM_OFFICE_365_V8;
+  application === VEEAM_OFFICE_365_V8 ||
+  application === 'COMMVAULT';
 
 const AccountNameField = ({
   register,

src/react/ISV/modules/commvault/index.tsx

@@ -1,14 +1,14 @@
 import { ISVPlatformConfig } from '../../types';
-import { VeeamLogo } from '../../../ui-elements/Veeam/VeeamLogo';
 import Joi from '@hapi/joi';
 import { Text } from '@scality/core-ui';
 import { checkDecimals, ListItem } from '..';
+import { CommvaultLogo } from '../../../ui-elements/Logo/CommvaultLogo';
 
 export const Commvault: ISVPlatformConfig = {
   id: 'commvault',
   name: 'COMMVAULT',
-  logo: <VeeamLogo />,
-  description: 'Configure ARTESCA for COMMVAULT',
+  logo: <CommvaultLogo />,
+  description: 'Configure ARTESCA for ',
   bucketTag: 'commvault-backup',
   skipModalContent: (
     <Text>

src/react/account/AccountList.tsx

@@ -22,6 +22,7 @@ import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColum
 import { TableHeaderWrapper } from '../ui-elements/Table';
 import { useAuthGroups } from '../utils/hooks';
 import { useBasenameRelativeNavigate } from '@scality/module-federation';
+import ISVModal from '../ui-elements/PartnerApp/ISVModal';
 
 function useAutoAssumeRoleUponAccountDeletion({
   accounts,
@@ -42,7 +43,7 @@ function AccountList({ accounts }: { accounts: Account[] }) {
   const { features } = useConfig();
   const { isStorageManager } = useAuthGroups();
   useAutoAssumeRoleUponAccountDeletion({ accounts });
-
+  const [isISVModalOpen, setIsISVModalOpen] = React.useState(true);
   const nameCell = ({ value, row }: CellProps<Account, string>) => {
     const navigate = useBasenameRelativeNavigate();
     const setRole = useSetAssumedRole();
@@ -116,6 +117,7 @@ function AccountList({ accounts }: { accounts: Account[] }) {
         flex: 1,
       }}
     >
+      <ISVModal isOpen={isISVModalOpen} setIsOpen={setIsISVModalOpen} />
       <Table
         columns={columns}
         data={accounts}
@@ -136,7 +138,7 @@ function AccountList({ accounts }: { accounts: Account[] }) {
                   <Button
                     label="Start Configuration for Veeam"
                     variant="secondary"
-                    onClick={() => navigate('/veeam/configuration')}
+                    onClick={() => setIsISVModalOpen(true)}
                     type="button"
                   />
                 )}

src/react/ui-elements/PartnerApp/CardISV.tsx

@@ -0,0 +1,153 @@
+import { Icon, Link, spacing, Stack, Text } from '@scality/core-ui';
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+type CardProps = {
+  application?: string;
+  logo: JSX.Element;
+  name: string;
+  selected?: boolean;
+  onChange?: (value: React.SetStateAction<string>) => void;
+};
+
+type ManualCardProps = {
+  application?: string;
+  logo: JSX.Element;
+  link: string;
+};
+
+export const MoreToCome = (props: { disabled?: boolean }) => {
+  const { disabled } = props;
+  return (
+    <div
+      style={{
+        borderRadius: spacing.f8,
+        display: 'flex',
+        alignItems: 'flex-end',
+        backgroundColor: disabled
+          ? 'rgba(27, 27, 39, 0.5)'
+          : 'rgba(27, 27, 39, 1)',
+        cursor: 'not-allowed',
+        height: '4.5rem',
+        padding: spacing.r20,
+      }}
+    >
+      <Text color="textPrimary">More to come...</Text>
+    </div>
+  );
+};
+
+const cardContainerStyle = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: spacing.r32,
+  padding: spacing.r20,
+  height: '4.5rem',
+  alignItems: 'flex-start',
+  borderRadius: '8px',
+};
+
+const CardContent = (props: { logo: JSX.Element; application: string }) => {
+  const { logo, application } = props;
+  return (
+    <Stack
+      direction="vertical"
+      gap="r8"
+      style={{
+        paddingTop: '0.5rem',
+      }}
+    >
+      {logo}
+      {application && (
+        <Text color="textPrimary" isEmphazed variant="Smaller">
+          {application}
+        </Text>
+      )}
+    </Stack>
+  );
+};
+
+export const ManualISVCard = (props: ManualCardProps) => {
+  const theme = useTheme();
+  const { logo, application, link } = props;
+  return (
+    <div
+      style={{
+        position: 'relative',
+        clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          ...cardContainerStyle,
+          backgroundColor: theme.backgroundLevel4,
+          opacity: 0.5,
+        }}
+      >
+        <CardContent logo={logo} application={application}></CardContent>
+      </div>
+      <Link
+        href={link}
+        target="_blank"
+        style={{
+          position: 'absolute',
+          bottom: spacing.r10,
+          right: spacing.r24,
+        }}
+      >
+        Learn more <Icon name="External-link"></Icon>
+      </Link>
+      {/* <div
+        style={{
+          position: 'absolute',
+          cursor: 'default',
+          top: '1rem',
+          right: '-3rem',
+          color: 'white',
+          width: '10rem',
+          textAlign: 'center',
+
+          paddingBlock: spacing.r8,
+          backgroundColor: theme.infoSecondary,
+          transform: 'rotate(45deg)',
+          boxShadow: '0px 4px 4px 0px rgba(0,0,0,0.5)',
+        }}
+      >
+        <Text color="textPrimary" variant="Smaller">
+          Manual
+        </Text>
+      </div> */}
+    </div>
+  );
+};
+
+export const CardISV = (props: CardProps) => {
+  const theme = useTheme();
+  const { logo, name, application, onChange, selected } = props;
+  logo.props.height = 20;
+  return (
+    <label
+      htmlFor={`isv-${name}`}
+      style={{
+        ...cardContainerStyle,
+        cursor: 'pointer',
+        backgroundColor: selected ? theme.highlight : theme.backgroundLevel4,
+      }}
+    >
+      <CardContent logo={logo} application={application} />
+
+      <input
+        style={{
+          flex: 'flex-start',
+        }}
+        type="radio"
+        name="isv"
+        value={name}
+        id={`isv-${name}`}
+        checked={selected}
+        onChange={() => onChange(name)}
+      />
+    </label>
+  );
+};

src/react/ui-elements/PartnerApp/ISVList.tsx

@@ -0,0 +1,124 @@
+import { CommvaultLogo } from '../Logo/CommvaultLogo';
+import KastenLogo from '../Logo/KastenLogo';
+import { VEEAM_BACKUP_REPLICATION } from '../Veeam/VeeamConstants';
+import HycuLogo from '../Logo/HycuLogo';
+import CteraLogo from '../Logo/CteraLogo';
+import RubrikLogo from '../Logo/RubrikLogo';
+import VeeamLogo from '../Logo/VeeamLogo';
+import SplunkLogo from '../Logo/SplunkLogo';
+import ZertoLogo from '../Logo/ZertoLogo';
+import VeritasLogo from '../Logo/VeritasLogo';
+import CohesityLogo from '../Logo/CohesityLogo';
+
+export const ISVList = [
+  {
+    id: 'veeam',
+
+    name: 'Veeam',
+    logo: <VeeamLogo />,
+    type: VEEAM_BACKUP_REPLICATION,
+  },
+  // {
+  //   name: 'Veeam VBO',
+  //   logo: <VeeamLogo />,
+  //   type: 'Veeam Backup for Microsoft 365',
+  // },
+
+  { id: 'commvault', name: 'Commvault', logo: <CommvaultLogo /> },
+];
+
+export type ISVConfigurationProps = {
+  application: 'Veeam' | 'Commvault';
+  bucketTag: 'Veeam' | 'Commvault';
+  logo: JSX.Element;
+  fieldOverrides: [
+    {
+      name: string;
+      label?: string;
+      tooltip?: JSX.Element;
+      helpText?: string;
+      placeholder?: string;
+      additionnal?: JSX.Element[];
+    },
+  ];
+};
+type ISVManual = {
+  name: string;
+  application?: string;
+  documentationLink: string;
+  logo: JSX.Element;
+};
+
+export const ISVManualList: ISVManual[] = [
+  {
+    name: 'Kasten',
+    application: 'Veeam Kasten',
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/kasten.html',
+    logo: <KastenLogo />,
+  },
+  {
+    name: 'Hycu',
+    logo: <HycuLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/hycu_enterprise-clouds.html',
+  },
+  {
+    name: 'Ctera',
+    logo: <CteraLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/ctera/index.html',
+  },
+  {
+    name: 'Rubrik',
+    logo: <RubrikLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/rubrik_security_cloud.html',
+  },
+  {
+    name: 'Splunk',
+    logo: <SplunkLogo />,
+    //TODO update the link once the documentation is available
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/index.html',
+  },
+  {
+    name: 'Cohesity',
+    logo: <CohesityLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/cohesity_cloud_archive.html',
+  },
+  {
+    name: 'Veritas',
+    logo: <VeritasLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/veritas_netbackup.html',
+  },
+  {
+    name: 'Zerto',
+    logo: <ZertoLogo />,
+    documentationLink:
+      'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/zerto/zerto.html',
+  },
+];
+
+// Future implementation type
+export type FutureConfigurationProps = {
+  // General isv name
+  name: 'Veeam' | 'Commvault';
+  // Application of the isv
+  // An isv can have multiple applications
+  application: string;
+  bucketTag: 'Veeam' | 'Commvault';
+  logo: Element;
+  fieldOverrides: [
+    {
+      name: string;
+      lable?: string;
+      tooltip?: Element;
+      helpText?: string;
+      placeholder?: string;
+      additionnal?: Element[];
+    },
+  ];
+};