Skip to content

Commit

Permalink
feat(manager-react-components): upgrade ods version 18
Browse files Browse the repository at this point in the history
ref: MANAGER-14622

Signed-off-by: Alex Boungnaseng <[email protected]>
  • Loading branch information
aboungnaseng-ovhcloud committed Sep 6, 2024
1 parent 3675b01 commit b1f1514
Show file tree
Hide file tree
Showing 79 changed files with 1,251 additions and 1,638 deletions.
2 changes: 1 addition & 1 deletion packages/manager-react-components/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Suspense, useEffect } from 'react';
import { I18nextProvider } from 'react-i18next';
import { odsSetup } from '@ovhcloud/ods-common-core';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import '../src/lib.scss';
import { Preview } from '@storybook/react';
import '../src/tailwind/theme.css';
import i18n from './i18n';
Expand Down
3 changes: 2 additions & 1 deletion packages/manager-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@ovh-ux/manager-core-api": "^0.8.0",
"@ovh-ux/manager-react-shell-client": "^0.7.0",
"@ovhcloud/ods-components": "18.0.0",
"@ovhcloud/ods-themes": "18.0.0",
"@ovhcloud/ods-common-core": "17.2.2",
"@ovhcloud/ods-common-theming": "17.2.2",
"@ovhcloud/ods-components": "17.2.2",
"@ovhcloud/ods-theme-blue-jeans": "17.2.2",
"@tanstack/react-query": "^5.51.21",
"@tanstack/react-table": "^8.20.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { ManagerButton, ManagerButtonProps } from './ManagerButton';

export const Default = {
args: {
children: 'Remove button',
id: 'iam-button-urn-action-1',
label: 'Remove button',
urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
iamActions: ['vrackServices:apiovh:iam/resource/tag/remove'],
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React, { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
import {
OsdsButton,
OsdsTooltip,
OsdsTooltipContent,
} from '@ovhcloud/ods-components/react';
import { OdsButton, OdsTooltip } from '@ovhcloud/ods-components/react';
import { JSX } from '@ovhcloud/ods-components';
import { useTranslation } from 'react-i18next';
import { StyleReactProps } from '@ovhcloud/ods-components/react/dist/types/react-component-lib/interfaces';
Expand All @@ -12,47 +8,59 @@ import './translations';
import { useAuthorizationIam } from '../../hooks/iam';

export type ManagerButtonProps = PropsWithChildren<{
id: string;
iamActions?: string[];
urn?: string;
displayTooltip?: boolean;
isIamTrigger?: boolean;
}>;

export const ManagerButton = ({
id,
children,
label,
iamActions,
urn,
displayTooltip = true,
isIamTrigger = true,
...restProps
}: ManagerButtonProps &
Partial<
JSX.OsdsButton &
Omit<HTMLAttributes<HTMLOsdsButtonElement>, 'style' | 'id'> &
JSX.OdsButton &
Omit<HTMLAttributes<HTMLOdsButtonElement>, 'style' | 'id'> &
StyleReactProps &
RefAttributes<HTMLOsdsButtonElement>
RefAttributes<HTMLOdsButtonElement>
>) => {
const { t } = useTranslation('iam');
const { isAuthorized } = useAuthorizationIam(iamActions, urn, isIamTrigger);

if (!isAuthorized) {
if (!displayTooltip) {
return (
<OsdsButton {...restProps} disabled onClick={null}>
{children}
</OsdsButton>
<OdsButton
{...restProps}
isDisabled={true}
onClick={null}
label={label}
/>
);
}
return (
<OsdsTooltip>
<OsdsButton {...restProps} disabled onClick={null}>
{children}
</OsdsButton>
<OsdsTooltipContent slot="tooltip-content">
<>
<div id={id} className="w-fit">
<OdsButton
{...restProps}
isDisabled={true}
label={label}
content="true"
onClick={null}
/>
</div>
<OdsTooltip triggerId={id} with-arrow>
<div>{t('common_iam_actions_message')}</div>
</OsdsTooltipContent>
</OsdsTooltip>
</OdsTooltip>
</>
);
}
return <OsdsButton {...restProps}>{children}</OsdsButton>;
return <OdsButton {...restProps} label={label} />;
};
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React, { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
import { JSX } from '@ovhcloud/ods-components';
import {
OsdsText,
OsdsTooltip,
OsdsTooltipContent,
} from '@ovhcloud/ods-components/react';
import { OdsText, OdsTooltip } from '@ovhcloud/ods-components/react';
import { StyleReactProps } from '@ovhcloud/ods-components/react/dist/types/react-component-lib/interfaces';
import { useTranslation } from 'react-i18next';
import './translations';
Expand All @@ -23,22 +19,25 @@ export const ManagerText = ({
...restProps
}: ManagerTextProps &
Partial<
JSX.OsdsText &
Omit<HTMLAttributes<HTMLOsdsTextElement>, 'style'> &
JSX.OdsText &
Omit<HTMLAttributes<HTMLOdsTextElement>, 'style'> &
StyleReactProps &
RefAttributes<HTMLOsdsTextElement>
RefAttributes<HTMLOdsTextElement>
>) => {
const { t } = useTranslation('iam');
const { isAuthorized } = useAuthorizationIam(iamActions, urn);

if (!isAuthorized) {
return (
<OsdsTooltip>
<OsdsText {...restProps}>{t('iam_hidden_text').toUpperCase()}</OsdsText>
<OsdsTooltipContent slot="tooltip-content">
<>
<div id="tooltip-iam" className="w-fit">
<OdsText {...restProps}>{t('iam_hidden_text').toUpperCase()}</OdsText>
</div>
<OdsTooltip triggerId="tooltip-iam" with-arrow>
<div>{t('common_iam_actions_message')}</div>
</OsdsTooltipContent>
</OsdsTooltip>
</OdsTooltip>
</>
);
}
return <OsdsText {...restProps}>{children}</OsdsText>;
return <OdsText {...restProps}>{children}</OdsText>;
};
Original file line number Diff line number Diff line change
@@ -1,73 +1,67 @@
import React from 'react';
import {
OsdsButton,
OsdsLink,
OsdsMessage,
OsdsText,
OdsButton,
OdsLink,
OdsMessage,
OdsText,
} from '@ovhcloud/ods-components/react';
import { ODS_BUTTON_SIZE, ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';
import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
import {
ODS_THEME_COLOR_INTENT,
ODS_THEME_TYPOGRAPHY_SIZE,
} from '@ovhcloud/ods-common-theming';
ODS_MESSAGE_COLOR,
ODS_MESSAGE_VARIANT,
} from '@ovhcloud/ods-components';
import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';

export type ActionBannerProps = {
message: string;
cta: string;
type?: ODS_MESSAGE_TYPE;
variant?: ODS_MESSAGE_VARIANT;
color?: ODS_MESSAGE_COLOR;
onClick?: () => void;
href?: string;
};

export function ActionBanner({
message,
cta,
type = ODS_MESSAGE_TYPE.info,
color,
onClick,
href,
variant,
}: Readonly<ActionBannerProps>) {
return (
<OsdsMessage
type={type}
color={(type as unknown) as ODS_THEME_COLOR_INTENT}
<OdsMessage
color={color}
variant={variant}
className={'mt-3 flex-row'}
data-testid="actionBanner-message_container"
>
<div className={'sm:flex sm:flex-row sm:justify-between sm:items-center'}>
<OsdsText
size={ODS_THEME_TYPOGRAPHY_SIZE._400}
color={ODS_THEME_COLOR_INTENT.default}
>
<OdsText>
<span
dangerouslySetInnerHTML={{
__html: message,
}}
></span>
</OsdsText>
/>
</OdsText>
{onClick && (
<OsdsButton
<OdsButton
className="sm:mt-0 mt-4 sm:ml-4 ml-0"
data-testid="actionBanner-button"
size={ODS_BUTTON_SIZE.sm}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={onClick}
>
{cta}
</OsdsButton>
label={cta}
/>
)}
{href && (
<OsdsLink
<OdsLink
className="sm:mt-0 mt-4 sm:ml-4 ml-0"
color={ODS_THEME_COLOR_INTENT.primary}
onClick={() => onClick && onClick()}
href={href}
target={OdsHTMLAnchorElementTarget._blank}
>
{cta}
</OsdsLink>
</OdsLink>
)}
</div>
</OsdsMessage>
</OdsMessage>
);
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { fireEvent, screen } from '@testing-library/react';
import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
import { ActionBanner, ActionBannerProps } from './action-banner.component';
import { render } from '../../utils/test.provider';

Expand All @@ -9,6 +10,7 @@ const renderComponent = (props: ActionBannerProps) => {
describe('ActionBanner tests', () => {
it('should display message', () => {
renderComponent({
color: ODS_MESSAGE_COLOR.information,
message: 'hello world',
cta: 'custom action',
onClick: () => {},
Expand All @@ -19,6 +21,7 @@ describe('ActionBanner tests', () => {
it('should have a working call to action button', () => {
const onClick = jest.fn();
renderComponent({
color: ODS_MESSAGE_COLOR.information,
message: 'hello world',
cta: 'custom action',
onClick,
Expand All @@ -33,6 +36,7 @@ describe('ActionBanner tests', () => {
it('should have a link action', () => {
const href = 'www.ovhcloud.com';
const { container } = renderComponent({
color: ODS_MESSAGE_COLOR.information,
message: 'hello world',
cta: 'custom action',
href,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { useNavigation } from '@ovh-ux/manager-react-shell-client';
import { ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';
import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
import { useTranslation } from 'react-i18next';
import { ActionBanner } from '../action-banner.component';
import './translations/discovery';
Expand Down Expand Up @@ -31,7 +31,7 @@ export function PciDiscoveryBanner({
<ActionBanner
message={t('pci_projects_project_activate_project_banner_message')}
cta={t('pci_projects_project_activate_project_banner_cta')}
type={ODS_MESSAGE_TYPE.warning}
color={ODS_MESSAGE_COLOR.warning}
onClick={activateDiscoveryProject}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,24 @@ import './translations/free-localzones';
export const URLs = {
DEFAULT:
'https://www.ovhcloud.com/en/about-us/global-infrastructure/local-zone/',
ASIA:
'https://www.ovhcloud.com/asia/about-us/global-infrastructure/local-zone/',
AU:
'https://www.ovhcloud.com/en-au/about-us/global-infrastructure/local-zone/',
CA:
'https://www.ovhcloud.com/en-ca/about-us/global-infrastructure/local-zone/',
ASIA: 'https://www.ovhcloud.com/asia/about-us/global-infrastructure/local-zone/',
AU: 'https://www.ovhcloud.com/en-au/about-us/global-infrastructure/local-zone/',
CA: 'https://www.ovhcloud.com/en-ca/about-us/global-infrastructure/local-zone/',
DE: 'https://www.ovhcloud.com/de/about-us/global-infrastructure/local-zone/',
ES:
'https://www.ovhcloud.com/es-es/about-us/global-infrastructure/local-zone/',
ES: 'https://www.ovhcloud.com/es-es/about-us/global-infrastructure/local-zone/',
FR: 'https://www.ovhcloud.com/fr/about-us/global-infrastructure/local-zone/',
GB:
'https://www.ovhcloud.com/en-gb/about-us/global-infrastructure/local-zone/',
IE:
'https://www.ovhcloud.com/en-ie/about-us/global-infrastructure/local-zone/',
IN:
'https://www.ovhcloud.com/en-in/about-us/global-infrastructure/local-zone/',
GB: 'https://www.ovhcloud.com/en-gb/about-us/global-infrastructure/local-zone/',
IE: 'https://www.ovhcloud.com/en-ie/about-us/global-infrastructure/local-zone/',
IN: 'https://www.ovhcloud.com/en-in/about-us/global-infrastructure/local-zone/',
IT: 'https://www.ovhcloud.com/it/about-us/global-infrastructure/local-zone/',
MA:
'https://www.ovhcloud.com/fr-ma/about-us/global-infrastructure/local-zone/',
MA: 'https://www.ovhcloud.com/fr-ma/about-us/global-infrastructure/local-zone/',
NL: 'https://www.ovhcloud.com/nl/about-us/global-infrastructure/local-zone/',
PL: 'https://www.ovhcloud.com/pl/about-us/global-infrastructure/local-zone/',
PT: 'https://www.ovhcloud.com/pt/about-us/global-infrastructure/local-zone/',
QC:
'https://www.ovhcloud.com/fr-ca/about-us/global-infrastructure/local-zone/',
SG:
'https://www.ovhcloud.com/en-sg/about-us/global-infrastructure/local-zone/',
SN:
'https://www.ovhcloud.com/fr-sn/about-us/global-infrastructure/local-zone/',
TN:
'https://www.ovhcloud.com/fr-tn/about-us/global-infrastructure/local-zone/',
QC: 'https://www.ovhcloud.com/fr-ca/about-us/global-infrastructure/local-zone/',
SG: 'https://www.ovhcloud.com/en-sg/about-us/global-infrastructure/local-zone/',
SN: 'https://www.ovhcloud.com/fr-sn/about-us/global-infrastructure/local-zone/',
TN: 'https://www.ovhcloud.com/fr-tn/about-us/global-infrastructure/local-zone/',
WE: 'https://www.ovhcloud.com/en/about-us/global-infrastructure/local-zone/',
WS: 'https://www.ovhcloud.com/es/about-us/global-infrastructure/local-zone/',
US: 'https://us.ovhcloud.com/public-cloud/local-zone/',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
ODS_MESSAGE_TYPE,
ODS_TEXT_LEVEL,
ODS_TEXT_SIZE,
} from '@ovhcloud/ods-components';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
import { aapi } from '@ovh-ux/manager-core-api';
import { useQuery } from '@tanstack/react-query';
import './translations/trusted-zone';
Expand Down Expand Up @@ -42,15 +36,9 @@ export function PciTrustedZoneBanner() {
return (
<>
{isTrustedZone && (
<OsdsMessage type={ODS_MESSAGE_TYPE.info}>
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._400}
color={ODS_THEME_COLOR_INTENT.text}
>
{t('pci_projects_trusted_zone_banner_info')}
</OsdsText>
</OsdsMessage>
<OdsMessage>
<OdsText>{t('pci_projects_trusted_zone_banner_info')}</OdsText>
</OdsMessage>
)}
</>
);
Expand Down
Loading

0 comments on commit b1f1514

Please sign in to comment.