Merge pull request #135 from aali309/viewAppSetToolTip

Proper tooltip alignment on `Owner` field

Author: keithchong

locales/en/public.json

@@ -27,5 +27,6 @@
   "Reason": "Reason",
   "Message": "Message",
   "No conditions found": "No conditions found",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "View {{kind}}": "View {{kind}}"
 }

locales/ja/public.json

@@ -27,5 +27,6 @@
   "Reason": "Reason",
   "Message": "Message",
   "No conditions found": "No conditions found",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "View {{kind}}": "View {{kind}}"
 }

locales/ko/public.json

@@ -27,5 +27,6 @@
   "Reason": "Reason",
   "Message": "Message",
   "No conditions found": "No conditions found",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "View {{kind}}": "View {{kind}}"
 }

locales/zh/public.json

@@ -27,5 +27,6 @@
   "Reason": "Reason",
   "Message": "Message",
   "No conditions found": "No conditions found",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "View {{kind}}": "View {{kind}}"
 }

src/gitops/utils/components/OwnerReferences/owner-references.tsx

@@ -45,23 +45,44 @@ export const OwnerReferences: React.FC<OwnerReferencesProps> = ({ resource }) =>
     }
 
     return (
-      <Tooltip key={o.uid} content={<div>View {model.kind}</div>} position="top">
+      <OwnerReferenceLink
+        key={o.uid}
+        owner={o}
+        model={model}
+        namespace={resource.metadata.namespace}
+      />
+    );
+  });
+  return owners.length ? (
+    <>{owners}</>
+  ) : (
+    <span className="pf-v6-u-text-color-subtle">{t('public~No owner')}</span>
+  );
+};
+
+type OwnerReferenceLinkProps = {
+  owner: OwnerReference;
+  model: K8sModel;
+  namespace: string;
+};
+
+const OwnerReferenceLink: React.FC<OwnerReferenceLinkProps> = ({ owner, model, namespace }) => {
+  const { t } = useGitOpsTranslation();
+
+  return (
+    <Tooltip content={<div>{t('public~View {{kind}}', { kind: model.kind })}</div>} position="top">
+      <span className="pf-v6-u-display-inline-block">
         <ResourceLink
-          namespace={resource.metadata.namespace}
+          namespace={namespace}
           groupVersionKind={{
             group: model.apiGroup,
             version: model.apiVersion,
             kind: model.kind,
           }}
-          name={o.name}
+          name={owner.name}
         />
-      </Tooltip>
-    );
-  });
-  return owners.length ? (
-    <>{owners}</>
-  ) : (
-    <span className="pf-v6-u-text-color-subtle">{t('public~No owner')}</span>
+      </span>
+    </Tooltip>
   );
 };