In addition to hiding metrics that do not require immediate action, a…

…lso allow for hiding all metrics so that only the dashboard of a report is visible. Closes #7211.

components/frontend/src/AppUI.js

@@ -58,7 +58,7 @@ export function AppUI({
     const [dateOrder, setDateOrder] = useURLSearchQuery("date_order" + urlSearchQueryKeyPostfix, "string", "descending");
     const [hiddenColumns, toggleHiddenColumn, clearHiddenColumns] = useURLSearchQuery("hidden_columns" + urlSearchQueryKeyPostfix, "array");
     const [hiddenTags, toggleHiddenTag, clearHiddenTags] = useURLSearchQuery("hidden_tags" + urlSearchQueryKeyPostfix, "array");
-    const [hideMetricsNotRequiringAction, setHideMetricsNotRequiringAction] = useURLSearchQuery("hide_metrics_not_requiring_action" + urlSearchQueryKeyPostfix, "boolean", false);
+    const [metricsToHide, setMetricsToHide] = useURLSearchQuery("metrics_to_hide" + urlSearchQueryKeyPostfix, "string", "none");
     const [nrDates, setNrDates] = useURLSearchQuery("nr_dates" + urlSearchQueryKeyPostfix, "integer", 1);
     const [sortColumn, setSortColumn] = useURLSearchQuery("sort_column" + urlSearchQueryKeyPostfix, "string", null);
     const [sortDirection, setSortDirection] = useURLSearchQuery("sort_direction" + urlSearchQueryKeyPostfix, "string", "ascending");
@@ -121,13 +121,13 @@ export function AppUI({
                         handleSort={handleSort}
                         hiddenColumns={hiddenColumns}
                         hiddenTags={hiddenTags}
-                        hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
+                        metricsToHide={metricsToHide}
                         issueSettings={issueSettings}
                         nrDates={nrDates}
                         reportDate={report_date}
                         setDateInterval={setDateInterval}
                         setDateOrder={setDateOrder}
-                        setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
+                        setMetricsToHide={setMetricsToHide}
                         setNrDates={setNrDates}
                         setShowIssueCreationDate={setShowIssueCreationDate}
                         setShowIssueSummary={setShowIssueSummary}
@@ -157,7 +157,7 @@ export function AppUI({
                             handleSort={handleSort}
                             hiddenColumns={hiddenColumns}
                             hiddenTags={hiddenTags}
-                            hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
+                            metricsToHide={metricsToHide}
                             issueSettings={issueSettings}
                             loading={loading}
                             nrDates={nrDates}

components/frontend/src/PageContent.js

@@ -28,7 +28,7 @@ export function PageContent({
     handleSort,
     hiddenColumns,
     hiddenTags,
-    hideMetricsNotRequiringAction,
+    metricsToHide,
     issueSettings,
     loading,
     nrDates,
@@ -67,7 +67,7 @@ export function PageContent({
                 handleSort={handleSort}
                 hiddenColumns={hiddenColumns}
                 hiddenTags={hiddenTags}
-                hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
+                metricsToHide={metricsToHide}
                 issueSettings={issueSettings}
                 measurements={measurements}
                 reload={reload}

components/frontend/src/header_footer/SettingsPanel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Grid, Header, Menu, Segment } from 'semantic-ui-react';
 import { Icon } from '../semantic_ui_react_wrappers';
-import { datePropType, issueSettingsPropType, sortDirectionPropType } from '../sharedPropTypes';
+import { datePropType, issueSettingsPropType, metricsToHidePropType, sortDirectionPropType } from '../sharedPropTypes';
 import { capitalize, pluralize } from "../utils";
 import { SettingsMenuItem} from "./SettingsMenuItem";
 import './SettingsPanel.css';
@@ -18,13 +18,13 @@ export function SettingsPanel({
     handleSort,
     hiddenColumns,
     hiddenTags,
-    hideMetricsNotRequiringAction,
+    metricsToHide,
     issueSettings,
     nrDates,
     reportDate,
     setDateInterval,
     setDateOrder,
-    setHideMetricsNotRequiringAction,
+    setMetricsToHide,
     setNrDates,
     setShowIssueCreationDate,
     setShowIssueSummary,
@@ -49,8 +49,8 @@ export function SettingsPanel({
         setDateInterval: setDateInterval
     }
     const metricMenuItemProps = {
-        hideMetricsNotRequiringAction: hideMetricsNotRequiringAction,
-        setHideMetricsNotRequiringAction: setHideMetricsNotRequiringAction
+        metricsToHide: metricsToHide,
+        setMetricsToHide: setMetricsToHide
     }
     const sortColumnMenuItemProps = { sortColumn: sortColumn, sortDirection: sortDirection, handleSort: handleSort }
     const sortOrderMenuItemProps = {
@@ -83,13 +83,13 @@ export function SettingsPanel({
                                 handleSort={handleSort}
                                 hiddenColumns={hiddenColumns}
                                 hiddenTags={hiddenTags}
-                                hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
+                                metricsToHide={metricsToHide}
                                 issueSettings={issueSettings}
                                 nrDates={nrDates}
                                 reportDate={reportDate}
                                 setDateInterval={setDateInterval}
                                 setDateOrder={setDateOrder}
-                                setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
+                                setMetricsToHide={setMetricsToHide}
                                 setNrDates={setNrDates}
                                 setShowIssueCreationDate={setShowIssueCreationDate}
                                 setShowIssueSummary={setShowIssueSummary}
@@ -108,8 +108,9 @@ export function SettingsPanel({
             <Segment inverted color="black">
                 <Header size='small'>Visible metrics</Header>
                 <Menu {...menuProps}>
-                    <MetricMenuItem hide={false} {...metricMenuItemProps} />
-                    <MetricMenuItem hide={true} {...metricMenuItemProps} />
+                    <MetricMenuItem hide="none" {...metricMenuItemProps} />
+                    <MetricMenuItem hide="no_action_needed" {...metricMenuItemProps} />
+                    <MetricMenuItem hide="all" {...metricMenuItemProps} />
                 </Menu>
             </Segment>
             <Segment inverted color="black">
@@ -420,21 +421,21 @@ SortOrderMenuItem.propTypes = {
     help: PropTypes.string
 }
 
-function MetricMenuItem({ hide, hideMetricsNotRequiringAction, setHideMetricsNotRequiringAction }) {
+function MetricMenuItem({ hide, metricsToHide, setMetricsToHide }) {
     return (
         <SettingsMenuItem
-            active={hideMetricsNotRequiringAction === hide}
-            onClick={setHideMetricsNotRequiringAction}
+            active={hide === metricsToHide}
+            onClick={setMetricsToHide}
             onClickData={hide}
         >
-            {hide ? 'Metrics requiring action' : 'All metrics'}
+            {{"none": "All metrics", "no_action_needed": "Metrics requiring action", "all": "No metrics"}[hide]}
         </SettingsMenuItem>
     )
 }
 MetricMenuItem.propTypes = {
-    hide: PropTypes.bool,
-    hideMetricsNotRequiringAction: PropTypes.bool,
-    setHideMetricsNotRequiringAction: PropTypes.func
+    hide: metricsToHidePropType,
+    metricsToHide: metricsToHidePropType,
+    setMetricsToHide: PropTypes.func
 }
 
 function IssueAttributeMenuItem({ help, issueAttributeName, issueAttribute, setIssueAttribute }) {
@@ -468,13 +469,13 @@ function ResetSettingsButton(
         handleSort,
         hiddenColumns,
         hiddenTags,
-        hideMetricsNotRequiringAction,
+        metricsToHide,
         issueSettings,
         nrDates,
         reportDate,
         setDateInterval,
         setDateOrder,
-        setHideMetricsNotRequiringAction,
+        setMetricsToHide,
         setNrDates,
         setShowIssueCreationDate,
         setShowIssueSummary,
@@ -490,33 +491,33 @@ function ResetSettingsButton(
     return (
         <Button
             disabled={
-                visibleDetailsTabs?.length === 0 &&
-                !hideMetricsNotRequiringAction &&
-                hiddenColumns?.length === 0 &&
-                hiddenTags?.length === 0 &&
-                nrDates === 1 &&
                 dateInterval === 7 &&
                 dateOrder === "descending" &&
+                hiddenColumns?.length === 0 &&
+                hiddenTags?.length === 0 &&
                 !issueSettings.showIssueCreationDate &&
                 !issueSettings.showIssueSummary &&
                 !issueSettings.showIssueUpdateDate &&
                 !issueSettings.showIssueDueDate &&
                 !issueSettings.showIssueRelease &&
                 !issueSettings.showIssueSprint &&
+                metricsToHide === "none" &&
+                nrDates === 1 &&
                 reportDate === null &&
                 sortColumn === null &&
-                sortDirection === "ascending"
+                sortDirection === "ascending" &&
+                visibleDetailsTabs?.length === 0
             }
             onClick={() => {
                 clearVisibleDetailsTabs();
-                setHideMetricsNotRequiringAction(false);
                 clearHiddenColumns();
                 clearHiddenTags();
                 handleDateChange(null);
                 handleSort(null);
                 setNrDates(1);
                 setDateInterval(7);
                 setDateOrder("descending");
+                setMetricsToHide("none");
                 setShowIssueCreationDate(false);
                 setShowIssueSummary(false);
                 setShowIssueUpdateDate(false);
@@ -541,13 +542,13 @@ ResetSettingsButton.propTypes = {
     handleSort: PropTypes.func,
     hiddenColumns: PropTypes.arrayOf(PropTypes.string),
     hiddenTags: PropTypes.arrayOf(PropTypes.string),
-    hideMetricsNotRequiringAction: PropTypes.bool,
     issueSettings: issueSettingsPropType,
+    metricsToHide: metricsToHidePropType,
     nrDates: PropTypes.number,
     reportDate: datePropType,
     setDateInterval: PropTypes.func,
     setDateOrder: PropTypes.func,
-    setHideMetricsNotRequiringAction: PropTypes.func,
+    setMetricsToHide: PropTypes.func,
     setNrDates: PropTypes.func,
     setShowIssueCreationDate: PropTypes.func,
     setShowIssueSummary: PropTypes.func,

components/frontend/src/header_footer/SettingsPanel.test.js

@@ -11,7 +11,7 @@ function eventHandlers() {
         handleSort: jest.fn(),
         setDateInterval: jest.fn(),
         setDateOrder: jest.fn(),
-        setHideMetricsNotRequiringAction: jest.fn(),
+        setMetricsToHide: jest.fn(),
         setNrDates: jest.fn(),
         setShowIssueCreationDate: jest.fn(),
         setShowIssueSummary: jest.fn(),
@@ -31,7 +31,7 @@ it('resets the settings', () => {
             dateOrder="ascending"
             hiddenColumns={["trend"]}
             hiddenTags={["security"]}
-            hideMetricsNotRequiringAction={true}
+            metricsToHide="no_action_needed"
             issueSettings={
                 {
                     showIssueCreationDate: true,
@@ -59,7 +59,7 @@ it('resets the settings', () => {
     expect(props.setDateInterval).toHaveBeenCalledWith(7)
     expect(props.setDateOrder).toHaveBeenCalledWith("descending")
     expect(props.setNrDates).toHaveBeenCalledWith(1)
-    expect(props.setHideMetricsNotRequiringAction).toHaveBeenCalledWith(false)
+    expect(props.setMetricsToHide).toHaveBeenCalledWith("none")
     expect(props.setShowIssueCreationDate).toHaveBeenCalledWith(false)
     expect(props.setShowIssueSummary).toHaveBeenCalledWith(false)
     expect(props.setShowIssueUpdateDate).toHaveBeenCalledWith(false)
@@ -77,7 +77,7 @@ it('does not reset the settings when all have the default value', () => {
             dateOrder="descending"
             hiddenColumns={[]}
             hiddenTags={[]}
-            hideMetricsNotRequiringAction={false}
+            metricsToHide="none"
             issueSettings={
                 {
                     showIssueCreationDate: false,
@@ -105,7 +105,7 @@ it('does not reset the settings when all have the default value', () => {
     expect(props.setDateInterval).not.toHaveBeenCalled()
     expect(props.setDateOrder).not.toHaveBeenCalled()
     expect(props.setNrDates).not.toHaveBeenCalled()
-    expect(props.setHideMetricsNotRequiringAction).not.toHaveBeenCalled()
+    expect(props.setMetricsToHide).not.toHaveBeenCalled()
     expect(props.setShowIssueCreationDate).not.toHaveBeenCalled()
     expect(props.setShowIssueSummary).not.toHaveBeenCalled()
     expect(props.setShowIssueUpdateDate).not.toHaveBeenCalled()
@@ -115,24 +115,24 @@ it('does not reset the settings when all have the default value', () => {
 })
 
 it("hides the metrics not requiring action", () => {
-    const setHideMetricsNotRequiringAction = jest.fn();
-    render(<SettingsPanel hideMetricsNotRequiringAction={false} setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction} />)
+    const setMetricsToHide = jest.fn();
+    render(<SettingsPanel metricsToHide="none" setMetricsToHide={setMetricsToHide} />)
     fireEvent.click(screen.getByText(/Metrics requiring action/))
-    expect(setHideMetricsNotRequiringAction).toHaveBeenCalledWith(true)
+    expect(setMetricsToHide).toHaveBeenCalledWith("no_action_needed")
 })
 
-it("shows the metrics not requiring action", () => {
-    const setHideMetricsNotRequiringAction = jest.fn();
-    render(<SettingsPanel hideMetricsNotRequiringAction={true} setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction} />)
+it("shows all metrics", () => {
+    const setMetricsToHide = jest.fn();
+    render(<SettingsPanel metricsToHide="all" setMetricsToHide={setMetricsToHide} />)
     fireEvent.click(screen.getByText(/All metrics/))
-    expect(setHideMetricsNotRequiringAction).toHaveBeenCalledWith(false)
+    expect(setMetricsToHide).toHaveBeenCalledWith("none")
 })
 
-it("shows the metrics not requiring action by keypress", async () => {
-    const setHideMetricsNotRequiringAction = jest.fn();
-    render(<SettingsPanel hideMetricsNotRequiringAction={true} setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction} />)
+it("shows all metrics by keypress", async () => {
+    const setMetricsToHide = jest.fn();
+    render(<SettingsPanel metricsToHide="all" setMetricsToHide={setMetricsToHide} />)
     await userEvent.type(screen.getByText(/All metrics/), " ")
-    expect(setHideMetricsNotRequiringAction).toHaveBeenCalledWith(false)
+    expect(setMetricsToHide).toHaveBeenCalledWith("none")
 })
 
 it("hides a tag", () => {

components/frontend/src/header_footer/UIModeMenu.test.js

@@ -18,7 +18,7 @@ it("sets light mode", () => {
 
 it("sets dark mode on keypress", async () => {
     const setUIMode = jest.fn();
-    render(<UIModeMenu hideMetricsNotRequiringAction={true} setUIMode={setUIMode} />)
+    render(<UIModeMenu metricsToHide={true} setUIMode={setUIMode} />)
     await userEvent.type(screen.getByText(/Dark mode/), " ")
     expect(setUIMode).toHaveBeenCalledWith("dark")
 })

components/frontend/src/report/Report.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
-import { datePropType, datesPropType, issueSettingsPropType, sortDirectionPropType } from '../sharedPropTypes';
+import { datePropType, datesPropType, issueSettingsPropType, metricsToHidePropType, sortDirectionPropType } from '../sharedPropTypes';
 import { DataModel } from '../context/DataModel';
 import { accessGranted, EDIT_REPORT_PERMISSION, Permissions } from '../context/Permissions';
 import { Subjects } from '../subject/Subjects';
@@ -41,7 +41,6 @@ function ReportDashboard(
     {
         dates,
         hiddenTags,
-        hideMetricsNotRequiringAction,
         measurements,
         onClick,
         onClickTag,
@@ -53,7 +52,7 @@ function ReportDashboard(
     const nrMetrics = Math.max(nrMetricsInReport(report), 1);
     const subjectCards = []
     Object.entries(report.subjects).forEach(([subject_uuid, subject]) => {
-        const metrics = visibleMetrics(subject.metrics, hideMetricsNotRequiringAction, hiddenTags)
+        const metrics = visibleMetrics(subject.metrics, "none", hiddenTags)
         if (Object.keys(metrics).length > 0) {
             const summary = {}
             dates.forEach((date) => {
@@ -98,7 +97,6 @@ function ReportDashboard(
 ReportDashboard.propTypes = {
     dates: datesPropType,
     hiddenTags: PropTypes.arrayOf(PropTypes.string),
-    hideMetricsNotRequiringAction: PropTypes.bool,
     measurements: PropTypes.array,
     onClick: PropTypes.func,
     onClickTag: PropTypes.func,
@@ -125,9 +123,9 @@ export function Report({
     handleSort,
     hiddenColumns,
     hiddenTags,
-    hideMetricsNotRequiringAction,
     issueSettings,
     measurements,
+    metricsToHide,
     openReportsOverview,
     reload,
     report,
@@ -165,7 +163,6 @@ export function Report({
             <ReportDashboard
                 dates={dates}
                 hiddenTags={hiddenTags}
-                hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
                 measurements={reversedMeasurements}
                 onClick={(e, s) => navigate_to_subject(e, s)}
                 onClickTag={(tag) => {
@@ -181,7 +178,7 @@ export function Report({
                 handleSort={handleSort}
                 hiddenColumns={hiddenColumns}
                 hiddenTags={hiddenTags}
-                hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
+                metricsToHide={metricsToHide}
                 issueSettings={issueSettings}
                 measurements={measurements}
                 reload={reload}
@@ -202,9 +199,9 @@ Report.propTypes = {
     handleSort: PropTypes.func,
     hiddenColumns: PropTypes.arrayOf(PropTypes.string),
     hiddenTags: PropTypes.arrayOf(PropTypes.string),
-    hideMetricsNotRequiringAction: PropTypes.bool,
     issueSettings: issueSettingsPropType,
     measurements: PropTypes.array,
+    metricsToHide: metricsToHidePropType,
     openReportsOverview: PropTypes.func,
     reload: PropTypes.func,
     report: PropTypes.object,

components/frontend/src/sharedPropTypes.js

@@ -16,3 +16,5 @@ export const datePropType = PropTypes.instanceOf(Date)
 export const datesPropType = PropTypes.arrayOf(datePropType)
 
 export const uiModePropType = PropTypes.oneOf(["dark", "light", "follow_os"])
+
+export const metricsToHidePropType = PropTypes.oneOf(["none", "all", "no_action_needed"])