Uniform rendering of tooltips for repository badges (#1698)

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-components/src/repos/RepositoryEntry.tsx

@@ -48,9 +48,13 @@ type State = {
 const Title = styled.span`
   display: flex;
   align-items: center;
+`;
 
-  & > * {
-    margin-right: 0.25rem;
+const RepositoryFlagContainer = styled.div`
+  /*pointer-events: all;*/
+
+  .tag {
+    margin-left: 0.25rem;
   }
 `;
 
@@ -181,8 +185,11 @@ class RepositoryEntry extends React.Component<Props, State> {
     return (
       <Title>
         <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
-        <strong>{repository.name}</strong> {repositoryFlags}
-        <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+        <strong>{repository.name}</strong>{" "}
+        <RepositoryFlagContainer>
+          {repositoryFlags}
+          <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+        </RepositoryFlagContainer>
       </Title>
     );
   };

scm-ui/ui-components/src/repos/RepositoryFlag.tsx

@@ -23,20 +23,23 @@
  */
 
 import React, { FC } from "react";
-import Tag from "../Tag";
 import { Color, Size } from "../styleConstants";
+import Tooltip from "../Tooltip";
+import Tag from "../Tag";
 
 type Props = {
   color?: Color;
-  title?: string;
+  title: string;
   onClick?: () => void;
   size?: Size;
 };
 
-const RepositoryFlag: FC<Props> = ({ children, size = "small", ...props }) => (
-  <Tag size={size} {...props}>
-    {children}
-  </Tag>
+const RepositoryFlag: FC<Props> = ({ children, title, size = "small", ...props }) => (
+  <Tooltip location="bottom" message={title}>
+    <Tag size={size} {...props}>
+      {children}
+    </Tag>
+  </Tooltip>
 );
 
 export default RepositoryFlag;