Add Labels column to App, AppSet, ImageUpdater list pages; Remove TP badge (#10541)

locales/en/plugin__gitops-plugin.json

@@ -141,11 +141,11 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving ImageUpdaters. Check your connection and reload the page.": "There was an error retrieving ImageUpdaters. Check your connection and reload the page.",
   "ImageUpdaters": "ImageUpdaters",
-  "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 ImageUpdater": "Create ImageUpdater",
   "Apps": "Apps",
   "Images": "Images",
   "Last Checked": "Last Checked",
+  "Labels": "Labels",
   "Has Apps": "Has Apps",
   "No Apps": "No Apps",
   "Not Ready": "Not Ready",
@@ -218,7 +218,6 @@
   "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",
   "Create AppProject": "Create AppProject",
-  "Labels": "Labels",
   "Last Updated": "Last Updated",
   "Has Description": "Has Description",
   "No Description": "No Description",
@@ -343,18 +342,15 @@
   "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",
   "List view": "List view",
   "Graph view": "Graph view",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
   "Refresh (Hard)": "Refresh (Hard)",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Actions": "Actions",
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner",
-  "Tech preview": "Tech preview"
+  "No owner": "No owner"
 }

locales/en/plugin__gitops-public.json

@@ -5,7 +5,6 @@
   "View logs": "View logs",
   "Open URL": "Open URL",
   "Edit": "Edit",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Rollout": "Rollout",
   "Name": "Name",
   "Namespace": "Namespace",

locales/ja/plugin__gitops-plugin.json

@@ -141,11 +141,11 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving ImageUpdaters. Check your connection and reload the page.": "There was an error retrieving ImageUpdaters. Check your connection and reload the page.",
   "ImageUpdaters": "ImageUpdaters",
-  "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 ImageUpdater": "Create ImageUpdater",
   "Apps": "Apps",
   "Images": "Images",
   "Last Checked": "Last Checked",
+  "Labels": "Labels",
   "Has Apps": "Has Apps",
   "No Apps": "No Apps",
   "Not Ready": "Not Ready",
@@ -218,7 +218,6 @@
   "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",
   "Create AppProject": "Create AppProject",
-  "Labels": "Labels",
   "Last Updated": "Last Updated",
   "Has Description": "Has Description",
   "No Description": "No Description",
@@ -343,18 +342,15 @@
   "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",
   "List view": "List view",
   "Graph view": "Graph view",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
   "Refresh (Hard)": "Refresh (Hard)",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Actions": "Actions",
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner",
-  "Tech preview": "Tech preview"
+  "No owner": "No owner"
 }

locales/ja/plugin__gitops-public.json

@@ -5,7 +5,6 @@
   "View logs": "View logs",
   "Open URL": "Open URL",
   "Edit": "Edit",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Rollout": "Rollout",
   "Name": "Name",
   "Namespace": "Namespace",

locales/ko/plugin__gitops-plugin.json

@@ -141,11 +141,11 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving ImageUpdaters. Check your connection and reload the page.": "There was an error retrieving ImageUpdaters. Check your connection and reload the page.",
   "ImageUpdaters": "ImageUpdaters",
-  "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 ImageUpdater": "Create ImageUpdater",
   "Apps": "Apps",
   "Images": "Images",
   "Last Checked": "Last Checked",
+  "Labels": "Labels",
   "Has Apps": "Has Apps",
   "No Apps": "No Apps",
   "Not Ready": "Not Ready",
@@ -218,7 +218,6 @@
   "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",
   "Create AppProject": "Create AppProject",
-  "Labels": "Labels",
   "Last Updated": "Last Updated",
   "Has Description": "Has Description",
   "No Description": "No Description",
@@ -343,18 +342,15 @@
   "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",
   "List view": "List view",
   "Graph view": "Graph view",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
   "Refresh (Hard)": "Refresh (Hard)",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Actions": "Actions",
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner",
-  "Tech preview": "Tech preview"
+  "No owner": "No owner"
 }

locales/ko/plugin__gitops-public.json

@@ -5,7 +5,6 @@
   "View logs": "View logs",
   "Open URL": "Open URL",
   "Edit": "Edit",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Rollout": "Rollout",
   "Name": "Name",
   "Namespace": "Namespace",

locales/zh/plugin__gitops-plugin.json

@@ -141,11 +141,11 @@
   "Unable to load data": "Unable to load data",
   "There was an error retrieving ImageUpdaters. Check your connection and reload the page.": "There was an error retrieving ImageUpdaters. Check your connection and reload the page.",
   "ImageUpdaters": "ImageUpdaters",
-  "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 ImageUpdater": "Create ImageUpdater",
   "Apps": "Apps",
   "Images": "Images",
   "Last Checked": "Last Checked",
+  "Labels": "Labels",
   "Has Apps": "Has Apps",
   "No Apps": "No Apps",
   "Not Ready": "Not Ready",
@@ -218,7 +218,6 @@
   "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",
   "Create AppProject": "Create AppProject",
-  "Labels": "Labels",
   "Last Updated": "Last Updated",
   "Has Description": "Has Description",
   "No Description": "No Description",
@@ -343,18 +342,15 @@
   "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",
   "List view": "List view",
   "Graph view": "Graph view",
   "Sync": "Sync",
   "Stop": "Stop",
   "Refresh": "Refresh",
   "Refresh (Hard)": "Refresh (Hard)",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Actions": "Actions",
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner",
-  "Tech preview": "Tech preview"
+  "No owner": "No owner"
 }

locales/zh/plugin__gitops-public.json

@@ -5,7 +5,6 @@
   "View logs": "View logs",
   "Open URL": "Open URL",
   "Edit": "Edit",
-  "Rollouts in the Topology View is under tech preview": "Rollouts in the Topology View is under tech preview",
   "Rollout": "Rollout",
   "Name": "Name",
   "Namespace": "Namespace",

src/gitops/components/imageupdater/ImageUpdaterList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom-v5-compat';
-import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
+import * as YamlFormatter from 'yaml';
 
 import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
 import { modelToGroupVersionKind } from '@gitops/utils/utils';
@@ -34,6 +34,7 @@ import {
   useShowOperandsInAllNamespaces,
 } from '../shared/AllNamespaces';
 import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import MetadataLabels from '../shared/MetadataLabels';
 
 import { useImageUpdaterActionsProvider } from './hooks/useImageUpdaterActionsProvider';
 
@@ -71,6 +72,7 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
       'images',
       'last-checked',
       'ready',
+      'labels',
       'actions',
     ].map((key) => ({ key }));
   }, [showNamespaceColumn]);
@@ -171,15 +173,6 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
       {showTitle == undefined && (
         <ListPageHeader
           title={t('ImageUpdaters')}
-          badge={
-            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') ? (
               <ShowOperandsInAllNamespacesRadioGroup />
@@ -251,6 +244,10 @@ export const sortData = (
         aValue = a.status?.conditions?.find((c) => c.type === 'Ready')?.status || '';
         bValue = b.status?.conditions?.find((c) => c.type === 'Ready')?.status || '';
         break;
+      case 'labels':
+        aValue = YamlFormatter.stringify(a.metadata?.labels || {});
+        bValue = YamlFormatter.stringify(b.metadata?.labels || {});
+        break;
       default:
         return 0;
     }
@@ -277,7 +274,7 @@ export const useColumnsDV = (
       cell: t('Name'),
       props: {
         'aria-label': 'name',
-        className: 'pf-m-width-20',
+        className: 'pf-m-width-30',
         sort: getSortParams(0),
         style: { minWidth: '200px' },
       },
@@ -299,23 +296,23 @@ export const useColumnsDV = (
       cell: t('Apps'),
       props: {
         'aria-label': 'apps',
-        className: 'pf-m-width-10',
+        className: 'pf-m-width-20',
         sort: getSortParams(1 + i),
       },
     },
     {
       cell: t('Images'),
       props: {
         'aria-label': 'images',
-        className: 'pf-m-width-10',
+        className: 'pf-m-width-20',
         sort: getSortParams(2 + i),
       },
     },
     {
       cell: t('Last Checked'),
       props: {
         'aria-label': 'last checked',
-        className: 'pf-m-width-15',
+        className: 'pf-m-width-20',
         sort: getSortParams(3 + i),
       },
     },
@@ -327,6 +324,14 @@ export const useColumnsDV = (
         sort: getSortParams(4 + i),
       },
     },
+    {
+      cell: t('Labels'),
+      props: {
+        'aria-label': 'labels',
+        className: 'pf-m-width-10',
+        sort: getSortParams(5 + i),
+      },
+    },
     {
       cell: '',
       props: { 'aria-label': 'actions' },
@@ -400,6 +405,25 @@ export const useImageUpdaterRowsDV = (
         cell: readyCondition ? String(isReady) : '-',
         dataLabel: 'Ready',
       },
+      {
+        id: 'labels',
+        dataLabel: 'Labels',
+        cell: (
+          <div>
+            <MetadataLabels
+              kind={
+                ImageUpdaterModel.apiGroup +
+                '~' +
+                ImageUpdaterModel.apiVersion +
+                '~' +
+                ImageUpdaterModel.kind
+              }
+              labels={obj?.metadata?.labels}
+              numLabels={3}
+            />
+          </div>
+        ),
+      },
       {
         id: 'actions-' + index,
         cell: <ImageUpdaterActionsCell imageUpdater={obj} index={index} />,

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 TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
+import * as YamlFormatter from 'yaml';
 
 import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
 import { modelToGroupVersionKind, modelToRef } from '@gitops/utils/utils';
@@ -195,15 +195,6 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
       {showTitle == undefined && (
         <ListPageHeader
           title={t('AppProjects')}
-          badge={
-            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') ? (
               <ShowOperandsInAllNamespacesRadioGroup />
@@ -360,8 +351,8 @@ export const sortData = (
         bValue = getApplicationsCount(b, applications, appsLoaded);
         break;
       case 'labels':
-        aValue = a.metadata?.labels || {};
-        bValue = b.metadata?.labels || {};
+        aValue = YamlFormatter.stringify(a.metadata?.labels || {});
+        bValue = YamlFormatter.stringify(b.metadata?.labels || {});
         break;
       case 'last-updated':
         aValue = getLastUpdateTimestamp(a) || '';
@@ -422,10 +413,7 @@ export const useColumnsDV = (
     },
     {
       cell: t('Labels'),
-      props: {
-        'aria-label': 'labels',
-        className: 'pf-m-width-20',
-      },
+      props: sortableHeaderProps('labels', 'pf-m-width-20', getSortParams(3 + i)),
     },
     {
       cell: t('Last Updated'),