]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-18833 Add aria label on log level edit button on system page
authorstanislavh <stanislav.honcharov@sonarsource.com>
Wed, 22 Mar 2023 13:42:43 +0000 (14:42 +0100)
committersonartech <sonartech@sonarsource.com>
Mon, 27 Mar 2023 20:03:02 +0000 (20:03 +0000)
server/sonar-web/src/main/js/apps/system/components/App.tsx [deleted file]
server/sonar-web/src/main/js/apps/system/components/PageActions.tsx
server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/apps/system/components/__tests__/App-test.tsx
server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap
server/sonar-web/src/main/js/apps/system/routes.tsx
sonar-core/src/main/resources/org/sonar/l10n/core.properties

diff --git a/server/sonar-web/src/main/js/apps/system/components/App.tsx b/server/sonar-web/src/main/js/apps/system/components/App.tsx
deleted file mode 100644 (file)
index 7478fdf..0000000
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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 * as React from 'react';
-import { Helmet } from 'react-helmet-async';
-import { getSystemInfo } from '../../../api/system';
-import UpdateNotification from '../../../app/components/update-notification/UpdateNotification';
-import Suggestions from '../../../components/embed-docs-modal/Suggestions';
-import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
-import { translate } from '../../../helpers/l10n';
-import { SysInfoCluster, SysInfoStandalone } from '../../../types/types';
-import '../styles.css';
-import {
-  getClusterVersion,
-  getServerId,
-  getSystemLogsLevel,
-  getVersion,
-  isCluster,
-  parseQuery,
-  Query,
-  serializeQuery,
-} from '../utils';
-import ClusterSysInfos from './ClusterSysInfos';
-import PageHeader from './PageHeader';
-import StandaloneSysInfos from './StandaloneSysInfos';
-
-interface Props {
-  location: Location;
-  router: Router;
-}
-
-interface State {
-  loading: boolean;
-  sysInfoData?: SysInfoCluster | SysInfoStandalone;
-}
-
-export class App extends React.PureComponent<Props, State> {
-  mounted = false;
-  state: State = { loading: true };
-
-  componentDidMount() {
-    this.mounted = true;
-    this.fetchSysInfo();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  fetchSysInfo = () => {
-    this.setState({ loading: true });
-    getSystemInfo().then(
-      (sysInfoData) => {
-        if (this.mounted) {
-          this.setState({ loading: false, sysInfoData });
-        }
-      },
-      () => {
-        if (this.mounted) {
-          this.setState({ loading: false });
-        }
-      }
-    );
-  };
-
-  toggleSysInfoCards = (toggledCard: string) => {
-    const query = parseQuery(this.props.location.query);
-    let expandedCards;
-    if (query.expandedCards.includes(toggledCard)) {
-      expandedCards = query.expandedCards.filter((card) => card !== toggledCard);
-    } else {
-      expandedCards = query.expandedCards.concat(toggledCard);
-    }
-    this.updateQuery({ expandedCards });
-  };
-
-  updateQuery = (newQuery: Query) => {
-    const query = serializeQuery({ ...parseQuery(this.props.location.query), ...newQuery });
-    this.props.router.replace({ pathname: this.props.location.pathname, query });
-  };
-
-  renderSysInfo() {
-    const { sysInfoData } = this.state;
-    if (!sysInfoData) {
-      return null;
-    }
-
-    const query = parseQuery(this.props.location.query);
-    if (isCluster(sysInfoData)) {
-      return (
-        <ClusterSysInfos
-          expandedCards={query.expandedCards}
-          sysInfoData={sysInfoData}
-          toggleCard={this.toggleSysInfoCards}
-        />
-      );
-    }
-    return (
-      <StandaloneSysInfos
-        expandedCards={query.expandedCards}
-        sysInfoData={sysInfoData}
-        toggleCard={this.toggleSysInfoCards}
-      />
-    );
-  }
-
-  render() {
-    const { loading, sysInfoData } = this.state;
-    return (
-      <main className="page page-limited">
-        <Suggestions suggestions="system_info" />
-        <Helmet defer={false} title={translate('system_info.page')} />
-        <div className="page-notifs">
-          <UpdateNotification dismissable={false} />
-        </div>
-        {sysInfoData && (
-          <PageHeader
-            isCluster={isCluster(sysInfoData)}
-            loading={loading}
-            logLevel={getSystemLogsLevel(sysInfoData)}
-            onLogLevelChange={this.fetchSysInfo}
-            serverId={getServerId(sysInfoData)}
-            showActions={sysInfoData !== undefined}
-            version={
-              isCluster(sysInfoData) ? getClusterVersion(sysInfoData) : getVersion(sysInfoData)
-            }
-          />
-        )}
-        {this.renderSysInfo()}
-      </main>
-    );
-  }
-}
-
-export default withRouter(App);
index 6c41514f8904a06bdad2437f591f1fb2dbbd408b..7c427231f86542bb11b20305d59cd8f392182dc2 100644 (file)
@@ -78,6 +78,7 @@ export default class PageActions extends React.PureComponent<Props, State> {
             className="spacer-left button-small"
             id="edit-logs-level-button"
             onClick={this.handleLogsLevelOpen}
+            aria-label={translate('system.logs_level.change')}
           />
         </span>
         {this.props.canDownloadLogs && (
diff --git a/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx b/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx
new file mode 100644 (file)
index 0000000..7b32745
--- /dev/null
@@ -0,0 +1,151 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { getSystemInfo } from '../../../api/system';
+import UpdateNotification from '../../../app/components/update-notification/UpdateNotification';
+import Suggestions from '../../../components/embed-docs-modal/Suggestions';
+import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
+import { translate } from '../../../helpers/l10n';
+import { SysInfoCluster, SysInfoStandalone } from '../../../types/types';
+import '../styles.css';
+import {
+  getClusterVersion,
+  getServerId,
+  getSystemLogsLevel,
+  getVersion,
+  isCluster,
+  parseQuery,
+  Query,
+  serializeQuery,
+} from '../utils';
+import ClusterSysInfos from './ClusterSysInfos';
+import PageHeader from './PageHeader';
+import StandaloneSysInfos from './StandaloneSysInfos';
+
+interface Props {
+  location: Location;
+  router: Router;
+}
+
+interface State {
+  loading: boolean;
+  sysInfoData?: SysInfoCluster | SysInfoStandalone;
+}
+
+export class SystemApp extends React.PureComponent<Props, State> {
+  mounted = false;
+  state: State = { loading: true };
+
+  componentDidMount() {
+    this.mounted = true;
+    this.fetchSysInfo();
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  fetchSysInfo = () => {
+    this.setState({ loading: true });
+    getSystemInfo().then(
+      (sysInfoData) => {
+        if (this.mounted) {
+          this.setState({ loading: false, sysInfoData });
+        }
+      },
+      () => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+        }
+      }
+    );
+  };
+
+  toggleSysInfoCards = (toggledCard: string) => {
+    const query = parseQuery(this.props.location.query);
+    let expandedCards;
+    if (query.expandedCards.includes(toggledCard)) {
+      expandedCards = query.expandedCards.filter((card) => card !== toggledCard);
+    } else {
+      expandedCards = query.expandedCards.concat(toggledCard);
+    }
+    this.updateQuery({ expandedCards });
+  };
+
+  updateQuery = (newQuery: Query) => {
+    const query = serializeQuery({ ...parseQuery(this.props.location.query), ...newQuery });
+    this.props.router.replace({ pathname: this.props.location.pathname, query });
+  };
+
+  renderSysInfo() {
+    const { sysInfoData } = this.state;
+    if (!sysInfoData) {
+      return null;
+    }
+
+    const query = parseQuery(this.props.location.query);
+    if (isCluster(sysInfoData)) {
+      return (
+        <ClusterSysInfos
+          expandedCards={query.expandedCards}
+          sysInfoData={sysInfoData}
+          toggleCard={this.toggleSysInfoCards}
+        />
+      );
+    }
+    return (
+      <StandaloneSysInfos
+        expandedCards={query.expandedCards}
+        sysInfoData={sysInfoData}
+        toggleCard={this.toggleSysInfoCards}
+      />
+    );
+  }
+
+  render() {
+    const { loading, sysInfoData } = this.state;
+    return (
+      <main className="page page-limited">
+        <Suggestions suggestions="system_info" />
+        <Helmet defer={false} title={translate('system_info.page')} />
+        <div className="page-notifs">
+          <UpdateNotification dismissable={false} />
+        </div>
+        {sysInfoData && (
+          <PageHeader
+            isCluster={isCluster(sysInfoData)}
+            loading={loading}
+            logLevel={getSystemLogsLevel(sysInfoData)}
+            onLogLevelChange={this.fetchSysInfo}
+            serverId={getServerId(sysInfoData)}
+            showActions={sysInfoData !== undefined}
+            version={
+              isCluster(sysInfoData) ? getClusterVersion(sysInfoData) : getVersion(sysInfoData)
+            }
+          />
+        )}
+        {this.renderSysInfo()}
+      </main>
+    );
+  }
+}
+
+export default withRouter(SystemApp);
index 0978e53fb321678d5c90427917627443d2c4e7de..b00ae1736aa0f129da3ef2a9b45b81e20cee8d8a 100644 (file)
@@ -27,7 +27,7 @@ import {
   mockStandaloneSysInfo,
 } from '../../../../helpers/testMocks';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
-import { App } from '../App';
+import { SystemApp } from '../SystemApp';
 
 jest.mock('../../../../api/system', () => ({
   getSystemInfo: jest.fn().mockResolvedValue(null),
@@ -79,6 +79,8 @@ it('should toggle cards and update the URL', () => {
   );
 });
 
-function shallowRender(props: Partial<App['props']> = {}) {
-  return shallow<App>(<App location={mockLocation()} router={mockRouter()} {...props} />);
+function shallowRender(props: Partial<SystemApp['props']> = {}) {
+  return shallow<SystemApp>(
+    <SystemApp location={mockLocation()} router={mockRouter()} {...props} />
+  );
 }
index 0490be98ac732de7f9ab9a96bd86af1eb4aca1fa..0df51df6a79f8b81f5819bd7cd1d3042460bb410 100644 (file)
@@ -17,6 +17,7 @@ exports[`should render correctly 1`] = `
       </strong>
     </span>
     <EditButton
+      aria-label="system.logs_level.change"
       className="spacer-left button-small"
       id="edit-logs-level-button"
       onClick={[Function]}
@@ -198,6 +199,7 @@ exports[`should render without log download 1`] = `
       </strong>
     </span>
     <EditButton
+      aria-label="system.logs_level.change"
       className="spacer-left button-small"
       id="edit-logs-level-button"
       onClick={[Function]}
index e70554b92129ff343e04976ce4ebcd59da93e834..83a487e93becaaf33e39bee39f3948b82e773303 100644 (file)
@@ -19,8 +19,8 @@
  */
 import React from 'react';
 import { Route } from 'react-router-dom';
-import App from './components/App';
+import SystemApp from './components/SystemApp';
 
-export const routes = () => <Route path="system" element={<App />} />;
+export const routes = () => <Route path="system" element={<SystemApp />} />;
 
 export default routes;
index 4ae548850845d8c571cd49507b91e7fb729fa783..a12def9b4dc3855a7c78f6e7f1c34acda9b2f21c 100644 (file)
@@ -165,6 +165,7 @@ recommended=Recommended
 refresh=Refresh
 reload=Reload
 remove=Remove
+remove_x=Remove {x}
 rename=Rename
 replaces=Replaces
 reset_verb=Reset
@@ -3286,6 +3287,7 @@ system.log_level.warning=This level has performance impacts, please make sure to
 system.log_level.warning.short=Current logs level has performance impacts, get back to INFO level.
 system.log_level.info=Your selection does not affect the Search Engine.
 system.logs_level=Logs level
+system.logs_level.change=Change logs level
 system.new_version_available=A new version of SonarQube is available.
 system.restart_does_not_reload_sonar_properties=Also note that a restart will not reload the sonar.properties file.
 system.see_whats_new=See what's new!