refactor(pci-common): move region chip and popover outside

Signed-off-by: Simon Chaumet <[email protected]>
ovh · Jan 10, 2025 · 228ec3e · 228ec3e
1 parent 783f976
commit 228ec3e
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 189 deletions.
diff --git a/...ger/modules/manager-pci-common/src/components/region-selector/Region3AZChip.component.tsx b/...ger/modules/manager-pci-common/src/components/region-selector/Region3AZChip.component.tsx
@@ -1,24 +1,9 @@
 import { useContext } from 'react';
-import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_CHIP_SIZE,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { useTranslation } from 'react-i18next';
 import { URL_INFO } from './constants';
+import { RegionChip } from './RegionChip';
+import { RegionPopover } from './RegionPopover';
 
 export function Region3AZChip({
   showTooltip = true,
@@ -32,47 +17,21 @@ export function Region3AZChip({
     URL_INFO.REGION_3AZ[ovhSubsidiary] || URL_INFO.REGION_3AZ.DEFAULT;
 
   const chip = (
-    <OsdsChip
-      size={ODS_CHIP_SIZE.sm}
-      class="chip-3AZ"
-      onClick={(event) => event.stopPropagation()}
-    >
-      <OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}>
-        {t('pci_project_flavors_zone_3AZ')}
-      </OsdsText>
-      {showTooltip && (
-        <OsdsIcon
-          name={ODS_ICON_NAME.HELP}
-          size={ODS_ICON_SIZE.xs}
-          className="ml-2"
-        />
-      )}
-    </OsdsChip>
+    <RegionChip
+      className="chip-3AZ"
+      title={t('pci_project_flavors_zone_3AZ')}
+      showTooltipIcon={showTooltip}
+    />
   );
 
-  if (showTooltip) {
-    return (
-      <OsdsPopover>
-        <span slot="popover-trigger">{chip}</span>
-        <OsdsPopoverContent>
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_TEXT_LEVEL.body}
-          >
-            {t('pci_project_flavors_zone_3AZ_tooltip')}
-          </OsdsText>
-          &nbsp;
-          <Links
-            tab-index="-1"
-            label={t('pci_project_flavors_zone_tooltip_link')}
-            type={LinkType.external}
-            target={OdsHTMLAnchorElementTarget._blank}
-            href={documentURL}
-          />
-        </OsdsPopoverContent>
-      </OsdsPopover>
-    );
-  }
-
-  return chip;
+  return showTooltip ? (
+    <RegionPopover
+      tooltipUrl={documentURL}
+      tooltip={t('pci_project_flavors_zone_3AZ_tooltip')}
+    >
+      {chip}
+    </RegionPopover>
+  ) : (
+    chip
+  );
 }
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionChip.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionChip.tsx
@@ -0,0 +1,40 @@
+import { OsdsChip, OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_CHIP_SIZE,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
+  ODS_TEXT_LEVEL,
+  ODS_TEXT_SIZE,
+} from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import React from 'react';
+
+export function RegionChip({
+  showTooltipIcon,
+  title,
+  className,
+}: {
+  showTooltipIcon?: boolean;
+  title: string;
+  className?: string;
+}) {
+  return (
+    <OsdsChip
+      class={className}
+      size={ODS_CHIP_SIZE.sm}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}>
+        {title}
+      </OsdsText>
+      {showTooltipIcon && (
+        <OsdsIcon
+          name={ODS_ICON_NAME.HELP}
+          size={ODS_ICON_SIZE.xs}
+          className="ml-2"
+          color={ODS_THEME_COLOR_INTENT.primary}
+        />
+      )}
+    </OsdsChip>
+  );
+}
diff --git a/...ules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx b/...ules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx
@@ -1,26 +1,11 @@
 import React, { useContext } from 'react';
-import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_CHIP_SIZE,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { useTranslation } from 'react-i18next';
 import { URL_INFO } from './constants';
 import { useHas3AZ } from '../../hooks/useHas3AZ/useHas3AZ';
 import { useIs1AZ } from '../../hooks/useIs1AZ/useIs1AZ';
+import { RegionChip } from './RegionChip';
+import { RegionPopover } from './RegionPopover';
 
 export function RegionGlobalzoneChip({
   showTooltip = true,
@@ -39,54 +24,29 @@ export function RegionGlobalzoneChip({
   const has3AZ = useHas3AZ();
 
   const chip = (
-    <OsdsChip
-      class="chip-1AZ"
-      size={ODS_CHIP_SIZE.sm}
-      onClick={(event) => event.stopPropagation()}
-    >
-      <OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}>
-        {t(`pci_project_flavors_zone_${is1AZ ? '1AZ' : 'global_region'}`)}
-      </OsdsText>
-      {showTooltip && (
-        <OsdsIcon
-          name={ODS_ICON_NAME.HELP}
-          size={ODS_ICON_SIZE.xs}
-          className="ml-2"
-          color={ODS_THEME_COLOR_INTENT.primary}
-        />
-      )}
-    </OsdsChip>
+    <RegionChip
+      showTooltipIcon={showTooltip}
+      title={t(`pci_project_flavors_zone_${is1AZ ? '1AZ' : 'global_region'}`)}
+      className="chip-1AZ"
+    />
   );
 
-  if (showTooltip) {
-    return (
-      <OsdsPopover>
-        <span slot="popover-trigger">{chip}</span>
-        <OsdsPopoverContent>
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_TEXT_LEVEL.body}
-          >
-            {is1AZ && !has3AZ
-              ? t('pci_project_flavors_zone_1AZ_with_3AZ_tooltip')
-              : t(
-                  `pci_project_flavors_zone_${
-                    is1AZ ? '1AZ' : 'globalregions'
-                  }_tooltip`,
-                )}
-          </OsdsText>
-          &nbsp;
-          <Links
-            tab-index="-1"
-            label={t('pci_project_flavors_zone_tooltip_link')}
-            type={LinkType.external}
-            target={OdsHTMLAnchorElementTarget._blank}
-            href={tooltipUrl}
-          />
-        </OsdsPopoverContent>
-      </OsdsPopover>
-    );
-  }
-
-  return chip;
+  return showTooltip ? (
+    <RegionPopover
+      tooltipUrl={tooltipUrl}
+      tooltip={
+        is1AZ && !has3AZ
+          ? t('pci_project_flavors_zone_1AZ_with_3AZ_tooltip')
+          : t(
+              `pci_project_flavors_zone_${
+                is1AZ ? '1AZ' : 'globalregions'
+              }_tooltip`,
+            )
+      }
+    >
+      {chip}
+    </RegionPopover>
+  ) : (
+    chip
+  );
 }
diff --git a/...dules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx b/...dules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx
@@ -1,25 +1,10 @@
 import React, { useContext } from 'react';
-import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_CHIP_SIZE,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { useTranslation } from 'react-i18next';
 import { URL_INFO } from './constants';
 import { useIs1AZ } from '../../hooks/useIs1AZ/useIs1AZ';
+import { RegionChip } from './RegionChip';
+import { RegionPopover } from './RegionPopover';
 
 export function RegionLocalzoneChip({
   showTooltip = true,
@@ -30,55 +15,27 @@ export function RegionLocalzoneChip({
   const is1AZ = useIs1AZ();
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
-  const getDocumentUrl = (linkType: string) =>
-    URL_INFO[linkType as keyof typeof URL_INFO][ovhSubsidiary] ||
-    URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
+  const tooltipUrl =
+    URL_INFO.LOCAL_ZONE[ovhSubsidiary] || URL_INFO.LOCAL_ZONE.DEFAULT;
 
   const chip = (
-    <OsdsChip
-      class="chip-LZ"
-      size={ODS_CHIP_SIZE.sm}
-      onClick={(event) => event.stopPropagation()}
-    >
-      <OsdsText level={ODS_TEXT_LEVEL.body} size={ODS_TEXT_SIZE._500}>
-        {t('pci_project_flavors_zone_localzone')}
-      </OsdsText>
-      {showTooltip && (
-        <OsdsIcon
-          name={ODS_ICON_NAME.HELP}
-          size={ODS_ICON_SIZE.xs}
-          className="ml-2"
-        />
-      )}
-    </OsdsChip>
+    <RegionChip
+      title={t('pci_project_flavors_zone_localzone')}
+      className="chip-LZ"
+      showTooltipIcon={showTooltip}
+    />
   );
 
-  if (showTooltip)
-    return (
-      <OsdsPopover>
-        <span slot="popover-trigger">{chip}</span>
-        <OsdsPopoverContent>
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_TEXT_LEVEL.body}
-          >
-            {t(
-              `pci_project_flavors_zone_localzone${
-                is1AZ ? '_1AZ' : ''
-              }_tooltip`,
-            )}
-          </OsdsText>
-          &nbsp;
-          <Links
-            tab-index="-1"
-            label={t('pci_project_flavors_zone_tooltip_link')}
-            type={LinkType.external}
-            target={OdsHTMLAnchorElementTarget._blank}
-            href={getDocumentUrl('LOCAL_ZONE')}
-          />
-        </OsdsPopoverContent>
-      </OsdsPopover>
-    );
-
-  return chip;
+  return showTooltip ? (
+    <RegionPopover
+      tooltip={t(
+        `pci_project_flavors_zone_localzone${is1AZ ? '_1AZ' : ''}_tooltip`,
+      )}
+      tooltipUrl={tooltipUrl}
+    >
+      {chip}
+    </RegionPopover>
+  ) : (
+    chip
+  );
 }
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionPopover.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionPopover.tsx
@@ -0,0 +1,41 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  OsdsPopover,
+  OsdsPopoverContent,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-components';
+import { Links, LinkType } from '@ovh-ux/manager-react-components';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+
+export function RegionPopover({
+  children,
+  tooltip,
+  tooltipUrl,
+}: PropsWithChildren<{ tooltip: ReactNode; tooltipUrl: string }>) {
+  const { t } = useTranslation('pci-region-selector');
+
+  return (
+    <OsdsPopover>
+      <span slot="popover-trigger">{children}</span>
+      <OsdsPopoverContent>
+        <OsdsText
+          color={ODS_THEME_COLOR_INTENT.text}
+          level={ODS_TEXT_LEVEL.body}
+        >
+          {tooltip}
+        </OsdsText>
+        &nbsp;
+        <Links
+          tab-index="-1"
+          label={t('pci_project_flavors_zone_tooltip_link')}
+          type={LinkType.external}
+          target={OdsHTMLAnchorElementTarget._blank}
+          href={tooltipUrl}
+        />
+      </OsdsPopoverContent>
+    </OsdsPopover>
+  );
+}