From: Revanshu Paliwal Date: Fri, 28 Jul 2023 09:20:40 +0000 (+0200) Subject: SONAR-19896 UI improvements for project activity page X-Git-Tag: 10.2.0.77647~276 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=24f170413f40cba5c6c4bd1a8872307a427cb28f;p=sonarqube.git 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 a6342d22413..688d5b27ac9 100644 --- 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 a11dcac71d7..4f56e78b8a9 100644 --- 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 b303f3f8655..b9176bdac41 100644 --- 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 fa87946a783..0c127643f6d 100644 --- 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 ; } + + const tooltipContent = + event.category && event.category === 'QUALITY_GATE' && event.description + ? `${translate('event.failed_conditions')} ${event.description}` + : event.description; + return ( - +
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 a272da3be62..bdb2329092d 100644 --- 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 ( - + {showWarning ? ( - + ) : ( - + )} {name} {isActionable && ( - ` 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 ca4af98ba1f..0c579043bee 100644 --- 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) => (
    • 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 0dec7262166..30722378d02 100644 --- 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 7920838e325..78d53f22355 100644 --- 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`] = ` + [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[0])({ + theme, + }), + }} /> - + ); } 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 40508094631..28b58d317e5 100644 --- 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: #------------------------------------------------------------------------------ #