From 444b366de0628902a2530ff2833297341b953185 Mon Sep 17 00:00:00 2001 From: Wouter Admiraal Date: Tue, 10 Aug 2021 14:55:14 +0200 Subject: SONAR-14023 Make system health status more explicit --- .../system/components/info-items/SysInfoItem.tsx | 47 ++++++++------------ .../info-items/__tests__/SysInfoItem-test.tsx | 50 +++------------------- .../__snapshots__/SysInfoItem-test.tsx.snap | 22 ++++++++-- .../main/js/components/common/StatusIndicator.css | 12 ------ .../main/js/components/common/StatusIndicator.tsx | 31 ++++++++------ .../common/__tests__/SatusIndicator-test.tsx | 34 +++++++++++++++ .../__snapshots__/SatusIndicator-test.tsx.snap | 34 +++++++++++++++ 7 files changed, 128 insertions(+), 102 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/SatusIndicator-test.tsx create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SatusIndicator-test.tsx.snap (limited to 'server/sonar-web/src') diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx index fb20e074f63..126d912c9b5 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx +++ b/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx @@ -19,8 +19,7 @@ */ import { map } from 'lodash'; import * as React from 'react'; -import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon'; -import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon'; +import { translate } from 'sonar-ui-common/helpers/l10n'; import { HEALTH_FIELD, STATE_FIELD } from '../../utils'; import HealthItem from './HealthItem'; @@ -29,7 +28,7 @@ export interface Props { value: T.SysInfoValue; } -export default function SysInfoItem({ name, value }: Props): JSX.Element { +export default function SysInfoItem({ name, value }: Props) { if (name === HEALTH_FIELD || name === STATE_FIELD) { return ; } @@ -38,35 +37,23 @@ export default function SysInfoItem({ name, value }: Props): JSX.Element { } switch (typeof value) { case 'boolean': - return ; + return <>{translate(value ? 'yes' : 'no')}; case 'object': - return ; + return ( + + + {map(value, (v, n) => ( + + + + + ))} + +
{n} + +
+ ); default: return {value}; } } - -function BooleanItem({ value }: { value: boolean }) { - if (value) { - return ; - } else { - return ; - } -} - -function ObjectItem({ value }: { value: T.SysInfoValueObject }) { - return ( - - - {map(value, (value, name) => ( - - - - - ))} - -
{name} - -
- ); -} diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx index a640c7b0a57..ca0e85fdce1 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx +++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx @@ -19,60 +19,24 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; +import HealthItem from '../HealthItem'; import SysInfoItem, { Props } from '../SysInfoItem'; -it('should render string', () => { - expect( - shallowRender('/some/path/as/an/example') - .find('code') - .text() - ).toBe('/some/path/as/an/example'); -}); - -it('should render object', () => { - expect( - shallowRender({ bar: 'baz' }) - .find('ObjectItem') - .prop('value') - ).toEqual({ bar: 'baz' }); -}); - -it('should render boolean', () => { - expect( - shallowRender(true) - .find('BooleanItem') - .prop('value') - ).toBe(true); +it('should render correctly', () => { + expect(shallowRender('/some/path/as/an/example')).toMatchSnapshot('string'); + expect(shallowRender({ foo: 'Far', bar: { a: 1, b: 'b' }, baz: true })).toMatchSnapshot('object'); + expect(shallowRender(true)).toMatchSnapshot('true'); + expect(shallowRender(false)).toMatchSnapshot('false'); }); it('should render health item', () => { expect( shallowRender('GREEN', 'Health') - .find('HealthItem') + .find(HealthItem) .prop('health') ).toBe('GREEN'); }); -it('should render `true`', () => { - const wrapper = shallowRender(true); - expect(wrapper.find('BooleanItem').exists()).toBe(true); - expect(wrapper.dive()).toMatchSnapshot(); -}); - -it('should render `false`', () => { - const wrapper = shallowRender(false); - expect(wrapper.find('BooleanItem').exists()).toBe(true); - expect(wrapper.dive()).toMatchSnapshot(); -}); - -it('should render object correctly', () => { - expect( - shallowRender({ foo: 'Far', bar: { a: 1, b: 'b' }, baz: true }) - .find('ObjectItem') - .dive() - ).toMatchSnapshot(); -}); - function shallowRender(value: Props['value'], name: Props['name'] = 'foo') { return shallow(); } diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap index 212e5d97aa1..7b2c54af4c1 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap @@ -1,10 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render \`false\` 1`] = ``; - -exports[`should render \`true\` 1`] = ``; +exports[`should render correctly: false 1`] = ` + + no + +`; -exports[`should render object correctly 1`] = ` +exports[`should render correctly: object 1`] = ` @@ -62,3 +64,15 @@ exports[`should render object correctly 1`] = `
`; + +exports[`should render correctly: string 1`] = ` + + /some/path/as/an/example + +`; + +exports[`should render correctly: true 1`] = ` + + yes + +`; diff --git a/server/sonar-web/src/main/js/components/common/StatusIndicator.css b/server/sonar-web/src/main/js/components/common/StatusIndicator.css index a855249da6d..dd54c4331ad 100644 --- a/server/sonar-web/src/main/js/components/common/StatusIndicator.css +++ b/server/sonar-web/src/main/js/components/common/StatusIndicator.css @@ -46,18 +46,6 @@ background-color: var(--red); } -.status-indicator.red::after { - position: absolute; - z-index: 3; - display: block; - width: 6px; - height: 2px; - top: 3px; - left: 1px; - background-color: #fff; - content: ''; -} - .status-indicator.yellow { background-color: var(--yellow); } diff --git a/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx b/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx index 5037fef1f14..5e37429ade6 100644 --- a/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx +++ b/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx @@ -19,26 +19,31 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { translate } from 'sonar-ui-common/helpers/l10n'; import './StatusIndicator.css'; -interface Props { +export interface StatusIndicatorProps { className?: string; color?: string; size?: string; } -export default function StatusIndicator({ className, color, size }: Props) { +export default function StatusIndicator({ className, color, size }: StatusIndicatorProps) { return ( - + <> + {color ? translate('system.current_health', color) : undefined} + + ); } diff --git a/server/sonar-web/src/main/js/components/common/__tests__/SatusIndicator-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/SatusIndicator-test.tsx new file mode 100644 index 00000000000..c8af02b4bcc --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/__tests__/SatusIndicator-test.tsx @@ -0,0 +1,34 @@ +/* + * SonarQube + * Copyright (C) 2009-2021 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import { shallow } from 'enzyme'; +import * as React from 'react'; +import StatusIndicator, { StatusIndicatorProps } from '../StatusIndicator'; + +it('should render correctly', () => { + expect(shallowRender()).toMatchSnapshot('default'); + expect(shallowRender({ color: 'green' })).toMatchSnapshot('green'); + expect(shallowRender({ size: 'small' })).toMatchSnapshot('small'); + expect(shallowRender({ size: 'big' })).toMatchSnapshot('big'); +}); + +function shallowRender(props: Partial = {}) { + return shallow(); +} diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SatusIndicator-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SatusIndicator-test.tsx.snap new file mode 100644 index 00000000000..e2fc7608203 --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SatusIndicator-test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly: big 1`] = ` + + + +`; + +exports[`should render correctly: default 1`] = ` + + + +`; + +exports[`should render correctly: green 1`] = ` + + system.current_health.green + + +`; + +exports[`should render correctly: small 1`] = ` + + + +`; -- cgit v1.2.3