SONAR-10347 Create a BoxedGroupAccordion component and use it in system page

8 files changed, 84 insertions, 226 deletions

diff --git a/server/sonar-web/src/main/js/apps/system/components/ClusterSysInfos.tsx b/server/sonar-web/src/main/js/apps/system/components/ClusterSysInfos.tsx
index dec9d88310f..1d7ae6d3f8c 100644
--- a/server/sonar-web/src/main/js/apps/system/components/ClusterSysInfos.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/ClusterSysInfos.tsx
@@ -41,7 +41,7 @@ interface Props {
 export default function ClusterSysInfos({ expandedCards, sysInfoData, toggleCard }: Props) {
   const mainCardName = 'System';
   return (
-    <ul>
+    <>
       <HealthCard
         biggerHealth={true}
         health={getHealth(sysInfoData)}
@@ -77,6 +77,6 @@ export default function ClusterSysInfos({ expandedCards, sysInfoData, toggleCard
           sysInfoData={ignoreInfoFields(node)}
         />
       ))}
-    </ul>
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/system/components/StandaloneSysInfos.tsx b/server/sonar-web/src/main/js/apps/system/components/StandaloneSysInfos.tsx
index ba09a11934a..ecdb45fe85c 100644
--- a/server/sonar-web/src/main/js/apps/system/components/StandaloneSysInfos.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/StandaloneSysInfos.tsx
@@ -38,7 +38,7 @@ interface Props {
 export default function StandAloneSysInfos({ expandedCards, sysInfoData, toggleCard }: Props) {
   const mainCardName = 'System';
   return (
-    <ul>
+    <>
       <HealthCard
         biggerHealth={true}
         health={getHealth(sysInfoData)}
@@ -57,6 +57,6 @@ export default function StandAloneSysInfos({ expandedCards, sysInfoData, toggleC
           sysInfoData={ignoreInfoFields(section)}
         />
       ))}
-    </ul>
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ClusterSysInfos-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ClusterSysInfos-test.tsx.snap
index ca216f72e04..0e31e22e4be 100644
--- a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ClusterSysInfos-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ClusterSysInfos-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should support more than two nodes 1`] = `
-<ul>
+<React.Fragment>
   <HealthCard
     biggerHealth={true}
     health="RED"
@@ -67,5 +67,5 @@ exports[`should support more than two nodes 1`] = `
       }
     }
   />
-</ul>
+</React.Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/StandaloneSysInfos-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/StandaloneSysInfos-test.tsx.snap
index e5832de513c..0d7912636bf 100644
--- a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/StandaloneSysInfos-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/StandaloneSysInfos-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<ul>
+<React.Fragment>
   <HealthCard
     biggerHealth={true}
     health="RED"
@@ -60,5 +60,5 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-</ul>
+</React.Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/HealthCard.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/HealthCard.tsx
index 105c8002bcd..f042eed7de3 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/HealthCard.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/HealthCard.tsx
@@ -18,11 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as classNames from 'classnames';
 import { map } from 'lodash';
 import HealthItem from './HealthItem';
 import Section from './Section';
-import OpenCloseIcon from '../../../../components/icons-components/OpenCloseIcon';
+import BoxedGroupAccordion from '../../../../components/controls/BoxedGroupAccordion';
 import { HealthType, SysValueObject } from '../../../../api/system';
 import { LOGS_LEVELS, groupSections, getLogsLevel } from '../../utils';
 import { translate } from '../../../../helpers/l10n';
@@ -37,34 +36,27 @@ interface Props {
   sysInfoData: SysValueObject;
 }
 
-interface State {
-  hoveringDetail: boolean;
-}
-
-export default class HealthCard extends React.PureComponent<Props, State> {
-  state: State = { hoveringDetail: false };
-
-  handleClick = () => this.props.onClick(this.props.name);
-  onDetailEnter = () => this.setState({ hoveringDetail: true });
-  onDetailLeave = () => this.setState({ hoveringDetail: false });
-
-  render() {
-    const { health, open, sysInfoData } = this.props;
-    const { mainSection, sections } = groupSections(sysInfoData);
-    const showFields = open && mainSection && Object.keys(mainSection).length > 0;
-    const showSections = open && sections;
-    const logLevel = getLogsLevel(sysInfoData);
-    const showLogLevelWarning = logLevel && logLevel !== LOGS_LEVELS[0];
-    return (
-      <li
-        className={classNames('boxed-group system-info-health-card', {
-          'no-hover': this.state.hoveringDetail
-        })}>
-        <div className="boxed-group-header" onClick={this.handleClick}>
-          <span className="system-info-health-card-title">
-            <OpenCloseIcon className="little-spacer-right" open={open} />
-            {this.props.name}
-          </span>
+export default function HealthCard({
+  biggerHealth,
+  health,
+  healthCauses,
+  onClick,
+  open,
+  name,
+  sysInfoData
+}: Props) {
+  const { mainSection, sections } = groupSections(sysInfoData);
+  const showFields = open && mainSection && Object.keys(mainSection).length > 0;
+  const showSections = open && sections;
+  const logLevel = getLogsLevel(sysInfoData);
+  const showLogLevelWarning = logLevel && logLevel !== LOGS_LEVELS[0];
+  return (
+    <BoxedGroupAccordion
+      data={name}
+      onClick={onClick}
+      open={open}
+      renderHeader={() => (
+        <>
           {showLogLevelWarning && (
             <span className="alert alert-danger spacer-left">
               {translate('system.log_level.warning.short')}
@@ -72,25 +64,19 @@ export default class HealthCard extends React.PureComponent<Props, State> {
           )}
           {health && (
             <HealthItem
-              biggerHealth={this.props.biggerHealth}
+              biggerHealth={biggerHealth}
               className="pull-right"
               health={health}
-              healthCauses={this.props.healthCauses}
-              name={this.props.name}
+              healthCauses={healthCauses}
+              name={name}
             />
           )}
-        </div>
-        {open && (
-          <div
-            className="boxed-group-inner"
-            onMouseEnter={this.onDetailEnter}
-            onMouseLeave={this.onDetailLeave}>
-            {showFields && <Section items={mainSection} />}
-            {showSections &&
-              map(sections, (section, name) => <Section key={name} items={section} name={name} />)}
-          </div>
-        )}
-      </li>
-    );
-  }
+        </>
+      )}
+      title={name}>
+      {showFields && <Section items={mainSection} />}
+      {showSections &&
+        map(sections, (section, name) => <Section key={name} items={section} name={name} />)}
+    </BoxedGroupAccordion>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/HealthCard-test.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/HealthCard-test.tsx
index abe3f8b002b..08ea6b5f66d 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/HealthCard-test.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/HealthCard-test.tsx
@@ -20,22 +20,10 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import HealthCard from '../HealthCard';
-import { click } from '../../../../../helpers/testUtils';
 import { HealthType } from '../../../../../api/system';
 
 it('should render correctly', () => {
-  expect(getShallowWrapper()).toMatchSnapshot();
-});
-
-it('should display the sysinfo detail', () => {
-  expect(getShallowWrapper({ biggerHealth: true, open: true })).toMatchSnapshot();
-});
-
-it('should show the sysinfo detail when the card is clicked', () => {
-  const onClick = jest.fn();
-  click(getShallowWrapper({ onClick }).find('.boxed-group-header'));
-  expect(onClick).toBeCalled();
-  expect(onClick).toBeCalledWith('Foobar');
+  expect(getWrapper()).toMatchSnapshot();
 });
 
 it('should show a main section and multiple sub sections', () => {
@@ -45,16 +33,18 @@ it('should show a main section and multiple sub sections', () => {
     Database: { db: 'test' },
     Elasticseach: { Elastic: 'search' }
   };
-  expect(getShallowWrapper({ open: true, sysInfoData })).toMatchSnapshot();
+  expect(getWrapper({ open: true, sysInfoData })).toMatchSnapshot();
 });
 
 it('should display the log level alert', () => {
   expect(
-    getShallowWrapper({ sysInfoData: { 'Logs Level': 'DEBUG' } }).find('.alert')
+    getWrapper({ sysInfoData: { 'Logs Level': 'DEBUG' } })
+      .dive()
+      .find('.alert')
   ).toMatchSnapshot();
 });
 
-function getShallowWrapper(props = {}) {
+function getWrapper(props = {}) {
   return shallow(
     <HealthCard
       biggerHealth={false}
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/HealthCard-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/HealthCard-test.tsx.snap
index fe7c59a4286..8ce1a5d4f14 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/HealthCard-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/HealthCard-test.tsx.snap
@@ -8,135 +8,49 @@ exports[`should display the log level alert 1`] = `
 </span>
 `;
 
-exports[`should display the sysinfo detail 1`] = `
-<li
-  className="boxed-group system-info-health-card"
->
-  <div
-    className="boxed-group-header"
-    onClick={[Function]}
-  >
-    <span
-      className="system-info-health-card-title"
-    >
-      <OpenCloseIcon
-        className="little-spacer-right"
-        open={true}
-      />
-      Foobar
-    </span>
-    <HealthItem
-      biggerHealth={true}
-      className="pull-right"
-      health="RED"
-      healthCauses={
-        Array [
-          "foo",
-        ]
-      }
-      name="Foobar"
-    />
-  </div>
-  <div
-    className="boxed-group-inner"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  />
-</li>
-`;
-
 exports[`should render correctly 1`] = `
-<li
-  className="boxed-group system-info-health-card"
->
-  <div
-    className="boxed-group-header"
-    onClick={[Function]}
-  >
-    <span
-      className="system-info-health-card-title"
-    >
-      <OpenCloseIcon
-        className="little-spacer-right"
-        open={false}
-      />
-      Foobar
-    </span>
-    <HealthItem
-      biggerHealth={false}
-      className="pull-right"
-      health="RED"
-      healthCauses={
-        Array [
-          "foo",
-        ]
-      }
-      name="Foobar"
-    />
-  </div>
-</li>
+<BoxedGroupAccordion
+  data="Foobar"
+  onClick={[Function]}
+  open={false}
+  renderHeader={[Function]}
+  title="Foobar"
+/>
 `;
 
 exports[`should show a main section and multiple sub sections 1`] = `
-<li
-  className="boxed-group system-info-health-card"
+<BoxedGroupAccordion
+  data="Foobar"
+  onClick={[Function]}
+  open={true}
+  renderHeader={[Function]}
+  title="Foobar"
 >
-  <div
-    className="boxed-group-header"
-    onClick={[Function]}
-  >
-    <span
-      className="system-info-health-card-title"
-    >
-      <OpenCloseIcon
-        className="little-spacer-right"
-        open={true}
-      />
-      Foobar
-    </span>
-    <HealthItem
-      biggerHealth={false}
-      className="pull-right"
-      health="RED"
-      healthCauses={
-        Array [
-          "foo",
-        ]
-      }
-      name="Foobar"
-    />
-  </div>
-  <div
-    className="boxed-group-inner"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Section
-      items={
-        Object {
-          "Name": "foo",
-          "bar": "Bar",
-        }
+  <Section
+    items={
+      Object {
+        "Name": "foo",
+        "bar": "Bar",
       }
-    />
-    <Section
-      items={
-        Object {
-          "db": "test",
-        }
+    }
+  />
+  <Section
+    items={
+      Object {
+        "db": "test",
       }
-      key="Database"
-      name="Database"
-    />
-    <Section
-      items={
-        Object {
-          "Elastic": "search",
-        }
+    }
+    key="Database"
+    name="Database"
+  />
+  <Section
+    items={
+      Object {
+        "Elastic": "search",
       }
-      key="Elasticseach"
-      name="Elasticseach"
-    />
-  </div>
-</li>
+    }
+    key="Elasticseach"
+    name="Elasticseach"
+  />
+</BoxedGroupAccordion>
 `;
diff --git a/server/sonar-web/src/main/js/apps/system/styles.css b/server/sonar-web/src/main/js/apps/system/styles.css
index c6c4ad4afb5..3c332eaa7c1 100644
--- a/server/sonar-web/src/main/js/apps/system/styles.css
+++ b/server/sonar-web/src/main/js/apps/system/styles.css
@@ -22,38 +22,6 @@
   margin-bottom: 16px;
 }
 
-.system-info-health-card {
-  margin-bottom: 8px;
-  transition: border-color 0.3s ease;
-}
-
-.system-info-health-card:not(.no-hover):hover {
-  border-color: var(--blue);
-}
-
-.system-info-health-card:not(.no-hover):hover .system-info-health-card-title {
-  color: var(--blue);
-}
-
-.system-info-health-card .boxed-group-header {
-  cursor: pointer;
-  padding-bottom: 15px;
-}
-
-.system-info-health-card .boxed-group-header > .alert {
-  display: inline-block;
-  margin-bottom: -6px;
-  margin-top: -6px;
-}
-
-.system-info-health-card .boxed-group-inner {
-  padding-top: 0;
-}
-
-.system-info-health-card-title {
-  font-weight: bold;
-}
-
 .system-info-health-info {
   margin-top: -12px;
 }