Use Tech Preview Badge with Tooltip (#9219)

keithchong · keithchong · commit b18697bb22ad · 2026-04-07T17:05:53.000-04:00
Signed-off-by: Keith Chong &lt;kykchong@redhat.com&gt;
diff --git a/locales/en/plugin__gitops-plugin.json b/locales/en/plugin__gitops-plugin.json
@@ -48,6 +48,7 @@
   "by name": "by name",
   "ConsoleLink": "ConsoleLink",
   "ConsoleLinks": "ConsoleLinks",
+  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "No GitOps manifest URLs found": "No GitOps manifest URLs found",
   "Error cannot retrieve applications": "Cannot retrieve applications. Ensure the Argo CD applications are available and check the log for the 'cluster' pod created by the GitOps Operator.",
   "No Application groups found": "No Application groups found",
@@ -213,6 +214,7 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving App Projects. Check your connection and reload the page.": "There was an error retrieving App Projects. Check your connection and reload the page.",
   "AppProjects": "ArgoCD AppProjects",
+  "This list page is under tech preview, but not necessarily the resources it represents": "This list page is under tech preview, but not necessarily the resources it represents",
   "Create AppProject": "Create AppProject",
   "Search by name...": "Search by name...",
   "Labels": "Labels",
@@ -335,6 +337,7 @@
   "Created at": "Created at",
   "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.": "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.",
   "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.": "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.",
+  "This details page is under tech preview, but not necessarily the resource it represents": "This details page is under tech preview, but not necessarily the resource it represents",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
diff --git a/locales/ja/plugin__gitops-plugin.json b/locales/ja/plugin__gitops-plugin.json
@@ -48,6 +48,7 @@
   "by name": "名前別",
   "ConsoleLink": "ConsoleLink",
   "ConsoleLinks": "ConsoleLinks",
+  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "No GitOps manifest URLs found": "GitOps マニフェスト URL が見つかりません",
   "Error cannot retrieve applications": "エラー、アプリケーションを取得できません",
   "No Application groups found": "アプリケーショングループが見つかりません",
@@ -213,6 +214,7 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving App Projects. Check your connection and reload the page.": "There was an error retrieving App Projects. Check your connection and reload the page.",
   "AppProjects": "AppProjects",
+  "This list page is under tech preview, but not necessarily the resources it represents": "This list page is under tech preview, but not necessarily the resources it represents",
   "Create AppProject": "Create AppProject",
   "Search by name...": "Search by name...",
   "Labels": "Labels",
@@ -335,6 +337,7 @@
   "Created at": "Created at",
   "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.": "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.",
   "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.": "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.",
+  "This details page is under tech preview, but not necessarily the resource it represents": "This details page is under tech preview, but not necessarily the resource it represents",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
diff --git a/locales/ko/plugin__gitops-plugin.json b/locales/ko/plugin__gitops-plugin.json
@@ -48,6 +48,7 @@
   "by name": "이름 별",
   "ConsoleLink": "콘솔 링크",
   "ConsoleLinks": "콘솔 링크",
+  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "No GitOps manifest URLs found": "GitOps 매니페스트 URL을 찾을 수 없습니다",
   "Error cannot retrieve applications": "오류로 인해 애플리케이션을 검색할 수 없습니다",
   "No Application groups found": "애플리케이션 그룹을 찾을 수 없습니다",
@@ -213,6 +214,7 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving App Projects. Check your connection and reload the page.": "There was an error retrieving App Projects. Check your connection and reload the page.",
   "AppProjects": "AppProjects",
+  "This list page is under tech preview, but not necessarily the resources it represents": "This list page is under tech preview, but not necessarily the resources it represents",
   "Create AppProject": "Create AppProject",
   "Search by name...": "Search by name...",
   "Labels": "Labels",
@@ -335,6 +337,7 @@
   "Created at": "Created at",
   "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.": "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.",
   "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.": "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.",
+  "This details page is under tech preview, but not necessarily the resource it represents": "This details page is under tech preview, but not necessarily the resource it represents",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
diff --git a/locales/zh/plugin__gitops-plugin.json b/locales/zh/plugin__gitops-plugin.json
@@ -48,6 +48,7 @@
   "by name": "按名称",
   "ConsoleLink": "控制台链接",
   "ConsoleLinks": "控制台链接",
+  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "No GitOps manifest URLs found": "未找到 GitOps 清单 URL",
   "Error cannot retrieve applications": "错误，无法检索应用程序",
   "No Application groups found": "未找到应用程序组",
@@ -213,6 +214,7 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving App Projects. Check your connection and reload the page.": "There was an error retrieving App Projects. Check your connection and reload the page.",
   "AppProjects": "AppProjects",
+  "This list page is under tech preview, but not necessarily the resources it represents": "This list page is under tech preview, but not necessarily the resources it represents",
   "Create AppProject": "Create AppProject",
   "Search by name...": "Search by name...",
   "Labels": "Labels",
@@ -335,6 +337,7 @@
   "Created at": "Created at",
   "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.": "Time is a wrapper around time. Time which supports correct marshaling to YAML and JSON.",
   "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.": "Owner references link this resource to its parent object. For example, Applications generated by an ApplicationSet will have that ApplicationSet as their owner. This relationship enables proper resource lifecycle management and garbage collection.",
+  "This details page is under tech preview, but not necessarily the resource it represents": "This details page is under tech preview, but not necessarily the resource it represents",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
diff --git a/src/components/import/badges/TechPreviewBadge.tsx b/src/components/import/badges/TechPreviewBadge.tsx
@@ -1,17 +1,25 @@
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { TFunction, useTranslation } from 'react-i18next';
 
-import { Label } from '@patternfly/react-core';
+import { Label, Tooltip } from '@patternfly/react-core';
 
 import './Badge.scss';
 
-const TechPreviewBadge: React.FC = () => {
-  const { t } = useTranslation('plugin__gitops-plugin');
+const getBadgeLabel = (t: TFunction) => {
   return (
     <Label className="gitops-plugin__preview-badge">
       {t('plugin__gitops-plugin~Tech preview')}
     </Label>
   );
 };
 
+const TechPreviewBadge: React.FC<{ tooltipContent?: string }> = ({ tooltipContent }) => {
+  const { t } = useTranslation('plugin__gitops-plugin');
+  return tooltipContent ? (
+    <Tooltip content={tooltipContent}>{getBadgeLabel(t)}</Tooltip>
+  ) : (
+    getBadgeLabel(t)
+  );
+};
+
 export default TechPreviewBadge;
diff --git a/src/components/topology/sidebar/DeploymentSideBarDetails.tsx b/src/components/topology/sidebar/DeploymentSideBarDetails.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import * as _ from 'lodash';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import {
   DetailsTabSectionExtensionHook,
@@ -33,7 +34,6 @@ import { Label as PfLabel, LabelGroup as PfLabelGroup } from '@patternfly/react-
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { GraphElement } from '@patternfly/react-topology';
 
-import DevPreviewBadge from '../../../components/import/badges/DevPreviewBadge';
 import { RolloutKind } from '../types';
 
 export type LabelProps = {
@@ -242,7 +242,9 @@ export const DeploymentSideBarDetails: React.FC<DeploymentSideBarDetailsProps> =
     <>
       <div className="ocs-sidebar-tabsection">
         <div className="co-m-pane__heading-owner">
-          <DevPreviewBadge />
+          <TechPreviewBadge
+            tooltipContent={t('Rollouts in the Topology View is under tech preview')}
+          />
           <SidebarSectionHeading text={'Rollout'} />
         </div>
       </div>
diff --git a/src/components/topology/sidebar/resource-sections.tsx b/src/components/topology/sidebar/resource-sections.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
+import { t } from '@gitops/utils/hooks/useGitOpsTranslation';
 import {
   DetailsTabSectionExtensionHook,
   K8sResourceKind,
@@ -8,7 +10,6 @@ import { TopologyDataObject } from '@openshift-console/dynamic-plugin-sdk/lib/ex
 import { getResource } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { GraphElement } from '@patternfly/react-topology';
 
-import DevPreviewBadge from '../../../components/import/badges/DevPreviewBadge';
 import { PodOverviewItem } from '../console/PodsOverview';
 import { usePodsForRollouts } from '../usePodsForRollouts';
 
@@ -61,7 +62,9 @@ export const ResourceSection: React.FC<{
     <div className="ocs-sidebar-tabsection">
       <div className="co-m-pane__heading-owner">
         <span>
-          <DevPreviewBadge />
+          <TechPreviewBadge
+            tooltipContent={t('Rollouts in the Topology View is under tech preview')}
+          />
           <SidebarSectionHeading text={'Pods'} />
         </span>
         <div>
diff --git a/src/gitops/components/project/ProjectList.tsx b/src/gitops/components/project/ProjectList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom-v5-compat';
-import DevPreviewBadge from 'src/components/import/badges/DevPreviewBadge';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
 import { modelToGroupVersionKind, modelToRef } from '@gitops/utils/utils';
@@ -195,7 +195,13 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
         <ListPageHeader
           title={t('AppProjects')}
           badge={
-            location?.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
+            location?.pathname?.includes('openshift-gitops-operator') ? null : (
+              <TechPreviewBadge
+                tooltipContent={t(
+                  'This list page is under tech preview, but not necessarily the resources it represents',
+                )}
+              />
+            )
           }
           helpText={
             location.pathname?.includes('openshift-gitops-operator') ? (
diff --git a/src/gitops/components/rollout/RolloutList.tsx b/src/gitops/components/rollout/RolloutList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import classNames from 'classnames';
-import DevPreviewBadge from 'src/components/import/badges/DevPreviewBadge';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import { AppProjectKind } from '@gitops/models/AppProjectModel';
 import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
@@ -181,7 +181,13 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
         <ListPageHeader
           title={t('Argo Rollouts')}
           badge={
-            location.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
+            location.pathname?.includes('openshift-gitops-operator') ? null : (
+              <TechPreviewBadge
+                tooltipContent={t(
+                  'This list page is under tech preview, but not necessarily the resources it represents',
+                )}
+              />
+            )
           }
           helpText={
             location.pathname?.includes('openshift-gitops-operator') ? (
diff --git a/src/gitops/components/shared/ApplicationList.tsx b/src/gitops/components/shared/ApplicationList.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import DevPreviewBadge from 'src/components/import/badges/DevPreviewBadge';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import { ApplicationSetKind } from '@gitops/models/ApplicationSetModel';
 import {
@@ -206,7 +206,13 @@ const ApplicationList: React.FC<ApplicationProps> = ({
         <ListPageHeader
           title={t('plugin__gitops-plugin~Applications')}
           badge={
-            location.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
+            location.pathname?.includes('openshift-gitops-operator') ? null : (
+              <TechPreviewBadge
+                tooltipContent={t(
+                  'This list page is under tech preview, but not necessarily the resources it represents',
+                )}
+              />
+            )
           }
           helpText={
             location.pathname?.includes('openshift-gitops-operator') ? (
diff --git a/src/gitops/components/shared/ApplicationSetList.tsx b/src/gitops/components/shared/ApplicationSetList.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import {
   K8sResourceCommon,
@@ -18,7 +19,6 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/dynamic
 import { CubesIcon } from '@patternfly/react-icons';
 import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
-import DevPreviewBadge from '../../../components/import/badges/DevPreviewBadge';
 import { useApplicationSetActionsProvider } from '../../hooks/useApplicationSetActionsProvider';
 import { ApplicationSetKind, ApplicationSetModel } from '../../models/ApplicationSetModel';
 import ActionsDropdown from '../../utils/components/ActionDropDown/ActionDropDown';
@@ -252,7 +252,13 @@ const ApplicationSetList: React.FC<ApplicationSetProps> = ({
         <ListPageHeader
           title={t('ApplicationSets')}
           badge={
-            location.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
+            location.pathname?.includes('openshift-gitops-operator') ? null : (
+              <TechPreviewBadge
+                tooltipContent={t(
+                  'This list page is under tech preview, but not necessarily the resources it represents',
+                )}
+              />
+            )
           }
           helpText={
             location.pathname?.includes('openshift-gitops-operator') ? (
diff --git a/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx b/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
-import DevPreviewBadge from 'src/components/import/badges/DevPreviewBadge';
+import TechPreviewBadge from 'src/components/import/badges/TechPreviewBadge';
 
 import FavoriteButton from '@gitops/components/shared/FavoriteButton/FavoriteButton';
 import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
@@ -103,7 +103,11 @@ const DetailsPageHeader: React.FC<DetailsPageHeaderProps> = ({
                 className="details-page-header__item"
                 style={{ marginLeft: '10px', marginBottom: '5px' }}
               >
-                <DevPreviewBadge />
+                <TechPreviewBadge
+                  tooltipContent={t(
+                    'This details page is under tech preview, but not necessarily the resource it represents',
+                  )}
+                />
               </span>
             </Title>
             <ActionList className="co-actions">
