SONAR-19896 UI improvements for project activity page

diff --git a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
index a6342d22413ca316c9b1871e54ff05a2bd57b603..688d5b27ac9f1166b53f2a8caeeee79d2414fda8 100644 (file)
--- a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
+++ b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
@@ -26,9 +26,9 @@ import { themeColor } from '../helpers/theme';
 export const NewCodeLegendIcon = styled.span`
   ${tw`sw-align-middle`}
   ${tw`sw-box-border`}
-  ${tw`sw-h-3`}
+  ${tw`sw-h-4`}
   ${tw`sw-inline-block`}
-  ${tw`sw-w-3`}
+  ${tw`sw-w-4`}
   background-color: ${themeColor('newCodeLegend')};
   border: 1px solid ${themeColor('newCodeLegendBorder')};
 `;
@@ -36,7 +36,7 @@ export const NewCodeLegendIcon = styled.span`
 const NewCodeLegendText = styled.span`
   ${tw`sw-align-middle`}
   ${tw`sw-body-sm`}
-  ${tw`sw-ml-1`}
+  ${tw`sw-ml-2`}
   color: ${themeColor('graphCursorLineColor')};
 `;
 

diff --git a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
index a11dcac71d7e28e5cb2c9c64d2a40c3a72624c54..4f56e78b8a9278b71c6dfaf0ad3c73d1fcfa82d9 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
@@ -29,6 +29,6 @@ it('should render NewCodeLegend', () => {
   expect(screen.getByText('the text')).toHaveStyle({
     'font-size': tailwindBaseConfig.theme.fontSize.sm[0],
     'line-height': tailwindBaseConfig.theme.fontSize.sm[1],
-    'margin-left': tailwindBaseConfig.theme.spacing[1],
+    'margin-left': tailwindBaseConfig.theme.spacing[2],
   });
 });

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index b303f3f865502da0399818244cde6feedff488c5..b9176bdac416483d9f98d8acec1436a2535678fc 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -455,11 +455,11 @@ export const lightTheme = {
 
     // graph - chart
     graphPointCircleColor: COLORS.white,
-    'graphLineColor.0': COLORS.blue[700],
-    'graphLineColor.1': COLORS.blue[500],
+    'graphLineColor.0': COLORS.blue[500],
+    'graphLineColor.1': COLORS.blue[700],
     'graphLineColor.2': COLORS.blue[300],
-    'graphLineColor.3': COLORS.blue[700],
-    'graphLineColor.4': COLORS.blue[500],
+    'graphLineColor.3': COLORS.blue[500],
+    'graphLineColor.4': COLORS.blue[700],
     'graphLineColor.5': COLORS.blue[300],
     graphGridColor: COLORS.grey[50],
     graphCursorLineColor: COLORS.blueGrey[400],

diff --git a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
index fa87946a7835326e0879e6959194b066478da8cc..0c127643f6d4a450a88a5fc3b123b23e77236474 100644 (file)
--- a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
@@ -40,8 +40,14 @@ export default function EventInner({ event, readonly }: EventInnerProps) {
   } else if (isDefinitionChangeEvent(event)) {
     return <DefinitionChangeEventInner branchLike={branchLike} event={event} readonly={readonly} />;
   }
+
+  const tooltipContent =
+    event.category && event.category === 'QUALITY_GATE' && event.description
+      ? `${translate('event.failed_conditions')} ${event.description}`
+      : event.description;
+
   return (
-    <Tooltip overlay={event.description}>
+    <Tooltip overlay={tooltipContent}>
       <div className="sw-min-w-0 sw-flex-1 sw-py-1/2">
         <div className="sw-flex sw-items-start">
           <span>

diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index a272da3be622aba3ec42f8cc32a6ce9cc1da68f1..bdb2329092d9a56958b496e5fc1c11ee0da5d0b7 100644 (file)
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -21,7 +21,14 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
-import { CloseIcon, DestructiveIcon, FlagWarningIcon, Theme, themeColor } from 'design-system';
+import {
+  CloseIcon,
+  FlagWarningIcon,
+  InteractiveIcon,
+  Theme,
+  themeBorder,
+  themeColor,
+} from 'design-system';
 import * as React from 'react';
 import { ChartLegendIcon } from '../../components/icons/ChartLegendIcon';
 import { translateWithParameters } from '../../helpers/l10n';
@@ -48,17 +55,20 @@ export function GraphsLegendItem({
   const isActionable = removeMetric !== undefined;
 
   return (
-    <StyledLegendItem className={classNames('sw-px-2 sw-py-1 sw-rounded-pill', className)}>
+    <StyledLegendItem
+      className={classNames('sw-px-2 sw-py-1 sw-rounded-2', className)}
+      isActionable={isActionable}
+    >
       {showWarning ? (
-        <FlagWarningIcon className="sw-mx-2" />
+        <FlagWarningIcon className="sw-mr-2" />
       ) : (
-        <ChartLegendIcon className="sw-mx-2" index={index} />
+        <ChartLegendIcon className="sw-mr-2" index={index} />
       )}
       <span className="sw-body-sm" style={{ color: themeColor('graphCursorLineColor')({ theme }) }}>
         {name}
       </span>
       {isActionable && (
-        <DestructiveIcon
+        <InteractiveIcon
           Icon={CloseIcon}
           aria-label={translateWithParameters('project_activity.graphs.custom.remove_metric', name)}
           className="sw-ml-2"
@@ -70,8 +80,13 @@ export function GraphsLegendItem({
   );
 }
 
-const StyledLegendItem = styled.div`
+interface GraphPillsProps {
+  isActionable: boolean;
+}
+
+const StyledLegendItem = styled.div<GraphPillsProps>`
   display: flex;
   align-items: center;
-  border: 1px solid ${themeColor('graphLegendBorder')};
+  border: ${(props) =>
+    props.isActionable ? themeBorder('default', 'buttonSecondaryBorder') : 'none'};
 `;

diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx
index ca4af98ba1f598618467818dc9b8b375e3d43b17..0c579043bee9bc51ad7ad500cd173f44d70b5f31 100644 (file)
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx
@@ -34,7 +34,7 @@ export default function GraphsLegendStatic({ series }: GraphsLegendStaticProps)
       {series.map((serie, idx) => (
         <li key={serie.name}>
           <GraphsLegendItem
-            className="sw-ml-3"
+            className="sw-mx-2"
             index={idx}
             metric={serie.name}
             name={serie.translatedName}
@@ -43,7 +43,7 @@ export default function GraphsLegendStatic({ series }: GraphsLegendStaticProps)
       ))}
       <li key={translate('hotspot.filters.period.since_leak_period')}>
         <NewCodeLegend
-          className="sw-ml-3 big-spacer-right"
+          className="sw-mr-2"
           text={translate('hotspot.filters.period.since_leak_period')}
         />
       </li>

diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.css b/server/sonar-web/src/main/js/components/charts/LineChart.css
index 0dec72621660412eceeab02ddf404072e32bc232..30722378d02f3f11de985241918c98d8b99bf0c7 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/LineChart.css
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.css
@@ -20,19 +20,7 @@
 
 .line-chart-path {
   fill: none;
-  stroke-width: 3px;
-}
-
-.line-chart-path.line-chart-path-1 {
-  stroke-dasharray: 3;
-}
-
-.line-chart-path.line-chart-path-2 {
-  stroke-dasharray: 10;
-}
-
-.line-chart-path.line-chart-path-legend.line-chart-path-2 {
-  stroke-dasharray: 7;
+  stroke-width: 2px;
 }
 
 .line-chart-point {

diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
index 7920838e325af90d37f49b006ce9e8a74ff0812b..78d53f223552ed9bb8404cce3578e9b5e4a8482b 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
@@ -246,19 +246,19 @@ exports[`should render correctly: Zoom enabled 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -508,19 +508,19 @@ exports[`should render correctly: basisCurve 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -770,19 +770,19 @@ exports[`should render correctly: default 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -1192,19 +1192,19 @@ exports[`should render correctly: format y tick 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -1462,19 +1462,19 @@ exports[`should render correctly: leakPeriodDate 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -1607,18 +1607,18 @@ exports[`should render correctly: level metric 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,NaNL20,NaN"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,NaNZ"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -1868,19 +1868,19 @@ exports[`should render correctly: no areas 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -2035,19 +2035,19 @@ exports[`should render correctly: rating metric 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,0L20,6"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,12Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="12"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -2297,19 +2297,19 @@ exports[`should render correctly: selected date 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"
@@ -2326,7 +2326,7 @@ exports[`should render correctly: selected date 1`] = `
       <circle
         cx="0"
         cy="16"
-        fill="rgb(58,127,173)"
+        fill="rgb(85,170,223)"
         r="4"
         stroke="white"
         stroke-width="1"
@@ -2334,7 +2334,7 @@ exports[`should render correctly: selected date 1`] = `
       <circle
         cx="0"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="4"
         stroke="white"
         stroke-width="1"
@@ -2584,19 +2584,19 @@ exports[`should render correctly: zoomSpeed 1`] = `
       <path
         class="line-chart-path line-chart-path-0"
         d="M0,16L20,8"
-        stroke="rgb(58,127,173)"
+        stroke="rgb(85,170,223)"
       />
       <path
         class="line-chart-path line-chart-path-1"
         d="M40,0Z"
-        stroke="rgb(85,170,223)"
+        stroke="rgb(58,127,173)"
       />
     </g>
     <g>
       <circle
         cx="40"
         cy="0"
-        fill="rgb(85,170,223)"
+        fill="rgb(58,127,173)"
         r="2"
         stroke="white"
         stroke-width="1"

diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.css b/server/sonar-web/src/main/js/components/controls/Tooltip.css
index e37dfdd89a134f63d062ec055bba97f8549731ac..fe4f96f8db817b705d371ee3a5651ba8ebf5c737 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.css
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.css
@@ -87,7 +87,7 @@
   left: 50%;
   border-width: 5px 5px 0;
   transform: translateX(-5px);
-  border-top-color: #475760;
+  border-top-color: #2a2f40;
 }
 
 .tooltip.right .tooltip-arrow {
@@ -95,7 +95,7 @@
   left: 0;
   transform: translateY(-5px);
   border-width: 5px 5px 5px 0;
-  border-right-color: #475760;
+  border-right-color: #2a2f40;
 }
 
 .tooltip.left .tooltip-arrow {
@@ -103,7 +103,7 @@
   right: 0;
   transform: translateY(-5px);
   border-width: 5px 0 5px 5px;
-  border-left-color: #475760;
+  border-left-color: #2a2f40;
 }
 
 .tooltip.bottom .tooltip-arrow {

diff --git a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
index 2d9fa0274cf24fdc4c3445dd352e937b17333b30..f2657797cb99d0dce2c65db475457f480665620c 100644 (file)
--- a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
@@ -22,7 +22,6 @@ import { useTheme } from '@emotion/react';
 import classNames from 'classnames';
 import { Theme, themeColor } from 'design-system';
 import * as React from 'react';
-import Icon from './Icon';
 
 interface Props {
   className?: string;
@@ -33,14 +32,27 @@ export function ChartLegendIcon({ index, className }: Props) {
   const theme = useTheme() as Theme;
 
   return (
-    <Icon className={className} aria-hidden width={20}>
+    <svg
+      className={className}
+      clipRule="evenodd"
+      fillRule="evenodd"
+      height={16}
+      strokeLinejoin="round"
+      strokeMiterlimit={1.41421}
+      viewBox="0 0 16 16"
+      width={16}
+      xmlSpace="preserve"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
       <path
         className={classNames('line-chart-path line-chart-path-legend', `line-chart-path-${index}`)}
-        d="M0 8 L 20 8"
-        stroke={themeColor(`graphLineColor.${index}` as Parameters<typeof themeColor>[0])({
-          theme,
-        })}
+        d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z"
+        style={{
+          fill: themeColor(`graphLineColor.${index}` as Parameters<typeof themeColor>[0])({
+            theme,
+          }),
+        }}
       />
-    </Icon>
+    </svg>
   );
 }

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 40508094631c53d9d42d26c8128a802162d21585..28b58d317e5a10f9b1849001499f7927f5740a26 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -515,6 +515,7 @@ event.definition_change.removed={project} removed
 event.definition_change.branch_added={project} {branch} added
 event.definition_change.branch_removed={project} {branch} removed
 event.definition_change.branch_replaced={project} {oldBranch} replaced with {newBranch}
+event.failed_conditions=Failed Conditions:
 
 #------------------------------------------------------------------------------
 #