SONAR-17387 Button text overflow in hotspot detail view

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
index 7a00dfede1e0f251ef5cd9b2ae0cff999d54eae5..1ed19a6a9471c8deb14ac3f4df03d5830e2c3558 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
@@ -62,30 +62,33 @@ export function HotspotSnippetHeader(props: HotspotSnippetHeaderProps) {
 
   return (
     <Container>
-      <div className="display-flex-row">
-        <FilePath>
-          {displayProjectName && (
-            <>
-              <QualifierIcon
-                className="little-spacer-right"
-                qualifier={ComponentQualifier.Project}
-              />
-              <span className="little-spacer-right">{project.name}</span>
-            </>
-          )}
-          <QualifierIcon qualifier={qualifier} /> <span>{collapsedDirFromPath(path)}</span>
-          <span className="little-spacer-right">{fileFromPath(path)}</span>
-          <ClipboardIconButton className="button-link link-no-underline" copyValue={path} />
-        </FilePath>
-
-        {isLoggedIn(currentUser) && (
-          <div className="dropdown spacer-right">
-            <HotspotOpenInIdeButton hotspotKey={hotspot.key} projectKey={project.key} />
-          </div>
+      <FilePath>
+        {displayProjectName && (
+          <>
+            <QualifierIcon className="little-spacer-right" qualifier={ComponentQualifier.Project} />
+            <ProjectName className="little-spacer-right" title={project.name}>
+              {project.name}
+            </ProjectName>
+          </>
         )}
-      </div>
+        <QualifierIcon qualifier={qualifier} />
+        <span>
+          {collapsedDirFromPath(path)}
+          {fileFromPath(path)}
+        </span>
+        <ClipboardIconButton
+          className="button-link link-no-underline little-spacer-left"
+          copyValue={path}
+        />
+      </FilePath>
+
+      {isLoggedIn(currentUser) && (
+        <div className="dropdown spacer-right flex-0">
+          <HotspotOpenInIdeButton hotspotKey={hotspot.key} projectKey={project.key} />
+        </div>
+      )}
 
-      <ClipboardButton copyValue={permalink}>
+      <ClipboardButton className="flex-0" copyValue={permalink}>
         <span>{translate('hotspots.get_permalink')}</span>
         <LinkIcon className="spacer-left" />
       </ClipboardButton>
@@ -113,4 +116,12 @@ const FilePath = styled.div`
   }
 `;
 
+const ProjectName = styled.span`
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  white-space: nowrap;
+`;
+
 export default withCurrentUserContext(HotspotSnippetHeader);

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetHeader-test.tsx.snap
index 8d201200035d40b1eb242faa74e09b2899bb25cf..35ff578b6e6f0c6b27401c0d1d9045d1e351a694 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetHeader-test.tsx.snap
@@ -2,37 +2,29 @@
 
 exports[`should render correctly: user logged in 1`] = `
 <Styled(div)>
+  <Styled(div)>
+    <QualifierIcon
+      qualifier="FIL"
+    />
+    <span>
+      path/to/
+      component
+    </span>
+    <ClipboardIconButton
+      className="button-link link-no-underline little-spacer-left"
+      copyValue="path/to/component"
+    />
+  </Styled(div)>
   <div
-    className="display-flex-row"
+    className="dropdown spacer-right flex-0"
   >
-    <Styled(div)>
-      <QualifierIcon
-        qualifier="FIL"
-      />
-       
-      <span>
-        path/to/
-      </span>
-      <span
-        className="little-spacer-right"
-      >
-        component
-      </span>
-      <ClipboardIconButton
-        className="button-link link-no-underline"
-        copyValue="path/to/component"
-      />
-    </Styled(div)>
-    <div
-      className="dropdown spacer-right"
-    >
-      <HotspotOpenInIdeButton
-        hotspotKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        projectKey="hotspot-component"
-      />
-    </div>
+    <HotspotOpenInIdeButton
+      hotspotKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
+      projectKey="hotspot-component"
+    />
   </div>
   <ClipboardButton
+    className="flex-0"
     copyValue="http://localhost/security_hotspots?id=my-project&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
   >
     <span>
@@ -47,46 +39,39 @@ exports[`should render correctly: user logged in 1`] = `
 
 exports[`should render correctly: user logged in with project Name 1`] = `
 <Styled(div)>
+  <Styled(div)>
+    <QualifierIcon
+      className="little-spacer-right"
+      qualifier="TRK"
+    />
+    <Styled(span)
+      className="little-spacer-right"
+      title="Hotspot Component"
+    >
+      Hotspot Component
+    </Styled(span)>
+    <QualifierIcon
+      qualifier="FIL"
+    />
+    <span>
+      path/to/
+      component
+    </span>
+    <ClipboardIconButton
+      className="button-link link-no-underline little-spacer-left"
+      copyValue="path/to/component"
+    />
+  </Styled(div)>
   <div
-    className="display-flex-row"
+    className="dropdown spacer-right flex-0"
   >
-    <Styled(div)>
-      <QualifierIcon
-        className="little-spacer-right"
-        qualifier="TRK"
-      />
-      <span
-        className="little-spacer-right"
-      >
-        Hotspot Component
-      </span>
-      <QualifierIcon
-        qualifier="FIL"
-      />
-       
-      <span>
-        path/to/
-      </span>
-      <span
-        className="little-spacer-right"
-      >
-        component
-      </span>
-      <ClipboardIconButton
-        className="button-link link-no-underline"
-        copyValue="path/to/component"
-      />
-    </Styled(div)>
-    <div
-      className="dropdown spacer-right"
-    >
-      <HotspotOpenInIdeButton
-        hotspotKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
-        projectKey="hotspot-component"
-      />
-    </div>
+    <HotspotOpenInIdeButton
+      hotspotKey="01fc972e-2a3c-433e-bcae-0bd7f88f5123"
+      projectKey="hotspot-component"
+    />
   </div>
   <ClipboardButton
+    className="flex-0"
     copyValue="http://localhost/security_hotspots?id=my-project&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
   >
     <span>
@@ -101,29 +86,21 @@ exports[`should render correctly: user logged in with project Name 1`] = `
 
 exports[`should render correctly: user not logged in 1`] = `
 <Styled(div)>
-  <div
-    className="display-flex-row"
-  >
-    <Styled(div)>
-      <QualifierIcon
-        qualifier="FIL"
-      />
-       
-      <span>
-        path/to/
-      </span>
-      <span
-        className="little-spacer-right"
-      >
-        component
-      </span>
-      <ClipboardIconButton
-        className="button-link link-no-underline"
-        copyValue="path/to/component"
-      />
-    </Styled(div)>
-  </div>
+  <Styled(div)>
+    <QualifierIcon
+      qualifier="FIL"
+    />
+    <span>
+      path/to/
+      component
+    </span>
+    <ClipboardIconButton
+      className="button-link link-no-underline little-spacer-left"
+      copyValue="path/to/component"
+    />
+  </Styled(div)>
   <ClipboardButton
+    className="flex-0"
     copyValue="http://localhost/security_hotspots?id=my-project&hotspots=01fc972e-2a3c-433e-bcae-0bd7f88f5123"
   >
     <span>