Skip to content

Commit

Permalink
Enhance ISV card component with link support and theme integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeanMarcMilletScality
JeanMarcMilletScality committed Jan 31, 2025
1 parent d0c5720 commit e611d2c
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 99 deletions.
35 changes: 29 additions & 6 deletions src/react/ui-elements/PartnerApp/CardISV.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { Icon, Link, spacing, Stack, Text } from '@scality/core-ui';
import React from 'react';
import styled from 'styled-components';

import styled, { useTheme } from 'styled-components';
import Input from '../Input';

type CardProps = {
application?: string;
logo: React.JSX.Element;
name: string;
selected?: boolean;
onChange?: (value: React.SetStateAction<string>) => void;
link?: string;
};

type ManualCardProps = {
Expand All @@ -24,6 +27,7 @@ const cardContainerStyle = {
height: '4.5rem',
alignItems: 'flex-start',
borderRadius: '8px',
cursor: 'pointer',
};

const CardContent = (props: {
Expand All @@ -50,6 +54,7 @@ const CardContent = (props: {
};

export const ManualISVCard = (props: ManualCardProps) => {
const theme = useTheme();
const { logo, application, link } = props;
return (
<div
Expand All @@ -61,7 +66,7 @@ export const ManualISVCard = (props: ManualCardProps) => {
<div
style={{
...cardContainerStyle,
backgroundColor: 'rgba(27, 27, 39, 0.5)',
backgroundColor: theme.backgroundLevel4,
}}
>
<CardContent logo={logo} application={application}></CardContent>
Expand All @@ -82,7 +87,6 @@ export const ManualISVCard = (props: ManualCardProps) => {
};

const CustomLabel = styled.label<{ selected?: boolean }>`
cursor: 'pointer';
background-color: ${(props) =>
props.selected ? props.theme.highlight : props.theme.backgroundLevel4};
border: 1px solid
Expand All @@ -91,23 +95,28 @@ const CustomLabel = styled.label<{ selected?: boolean }>`
&:hover {
border-color: ${(props) => props.theme.textPrimary};
}
&:focus-visible {
outline: 1px dashed ${(props) => props.theme.highlight};
}
`;

export const CardISV = (props: CardProps) => {
const { logo, name, application, onChange, selected } = props;
const { logo, name, application, onChange, selected, link } = props;
return (
<CustomLabel
htmlFor={`isv-${name}`}
style={{
...cardContainerStyle,
position: 'relative',
overflow: 'hidden',
}}
selected={selected}
>
<CardContent logo={logo} application={application} />

<input
<Input
style={{
flex: 'flex-start',
width: 0,
}}
type="radio"
name="isv"
Expand All @@ -116,6 +125,20 @@ export const CardISV = (props: CardProps) => {
checked={selected}
onChange={() => onChange(name)}
/>
{link && (
<Link
href={link}
target="_blank"
style={{
position: 'absolute',
bottom: spacing.r10,
right: spacing.r24,
fontSize: '0.875rem',
}}
>
Learn more <Icon name="External-link"></Icon>
</Link>
)}
</CustomLabel>
);
};
117 changes: 70 additions & 47 deletions src/react/ui-elements/PartnerApp/ISVList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,98 +11,121 @@ import VeritasLogo from '../Logo/VeritasLogo';
import CohesityLogo from '../Logo/CohesityLogo';
import React from 'react';

export const ISVList = [
export type ISVConfig = {
id: string;
name: string;
application?: string;
documentationLink: string;
logo: React.JSX.Element;
type?: string;
assistant?: boolean;
};

export const ISVList: ISVConfig[] = [
{
assistant: true,
id: 'veeam',
name: 'Veeam',
logo: <VeeamLogo />,
type: VEEAM_BACKUP_REPLICATION,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/veeam/index.html',
},
{
assistant: true,
id: 'veeam-vbo',
name: 'Veeam VBO',
logo: <VeeamLogo />,
type: 'Veeam Backup for Microsoft 365',
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/veeam_backup_for_ms_365.html',
},

{ id: 'commvault', name: 'Commvault', logo: <CommvaultLogo /> },
];

export type ISVConfigurationProps = {
application: 'Veeam' | 'Commvault';
bucketTag: 'Veeam' | 'Commvault';
logo: React.JSX.Element;
fieldOverrides: [
{
name: string;
label?: string;
tooltip?: React.JSX.Element;
helpText?: string;
placeholder?: string;
additionnal?: React.JSX.Element[];
},
];
};
type ISVManual = {
name: string;
application?: string;
documentationLink: string;
logo: React.JSX.Element;
};

export const ISVManualList: ISVManual[] = [
{
assistant: true,
id: 'commvault',
name: 'Commvault',
logo: <CommvaultLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/commvault.html',
},
{
id: 'kasten',
name: 'Kasten',
application: 'Veeam Kasten',
documentationLink:
'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/kasten.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/kasten.html',
logo: <KastenLogo />,
},
{
name: 'Hycu',
logo: <HycuLogo />,
id: 'rubrik',
name: 'Rubrik',
logo: <RubrikLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/hycu_enterprise-clouds.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/rubrik_security_cloud.html',
},
{
name: 'Ctera',
logo: <CteraLogo />,
id: 'cohesity',
name: 'Cohesity',
logo: <CohesityLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/ctera/index.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/cohesity_cloud_archive.html',
},
{
name: 'Rubrik',
logo: <RubrikLogo />,
id: 'veritas',
name: 'Veritas NetBackup',
logo: <VeritasLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.1/partner_applications/validated_designs/rubrik_security_cloud.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/veritas_netbackup.html',
},
{
name: 'Splunk',
logo: <SplunkLogo />,
//TODO update the link once the documentation is available
id: 'hycu',
name: 'Hycu',
logo: <HycuLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/index.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/hycu_enterprise-clouds.html',
},
{
name: 'Cohesity',
logo: <CohesityLogo />,
id: 'ctera',
name: 'Ctera',
logo: <CteraLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/cohesity_cloud_archive.html',
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/ctera/index.html',
},

{
name: 'Veritas',
logo: <VeritasLogo />,
id: 'splunk',
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/veritas_netbackup.html',
'https://documentation-internal.scality.com/Artesca/3.1.0-dev/partner_applications/validated_designs/index.html',
},
{
id: 'zerto',
name: 'Zerto',
logo: <ZertoLogo />,
documentationLink:
'https://documentation.scality.com/Artesca/3.0.2/partner_applications/validated_designs/zerto/zerto.html',
},
];

export type ISVConfigurationProps = {
application: 'Veeam' | 'Commvault';
bucketTag: 'Veeam' | 'Commvault';
logo: React.JSX.Element;
fieldOverrides: [
{
name: string;
label?: string;
tooltip?: React.JSX.Element;
helpText?: string;
placeholder?: string;
additionnal?: React.JSX.Element[];
},
];
};

// Future implementation type
export type FutureConfigurationProps = {
// General isv name
Expand Down
Loading

0 comments on commit e611d2c

Please sign in to comment.