From e2715ee9bf8d98bd524403306164c3b69c8f9ece Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Mon, 31 Jan 2022 22:59:26 +0100
Subject: [PATCH] Add a button to the settings panel to reset all settings to
 their default values. Closes #3183.

---
 components/frontend/src/AppUI.js              |  3 +-
 .../frontend/src/header_footer/ViewPanel.js   | 29 +++++++++++++++++-
 .../src/header_footer/ViewPanel.test.js       | 30 +++++++++++++++++++
 docs/src/changelog.md                         |  1 +
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/components/frontend/src/AppUI.js b/components/frontend/src/AppUI.js
index 1acfb22325..441e329464 100644
--- a/components/frontend/src/AppUI.js
+++ b/components/frontend/src/AppUI.js
@@ -39,7 +39,7 @@ export function AppUI({
     const current_report = reports.filter((report) => report.report_uuid === report_uuid)[0] || null;
     const [dateInterval, setDateInterval] = useURLSearchQuery(history, "date_interval", "integer", 7);
     const [dateOrder, setDateOrder] = useURLSearchQuery(history, "date_order", "string", "descending");
-    const [hiddenColumns, toggleHiddenColumn] = useURLSearchQuery(history, "hidden_columns", "array");
+    const [hiddenColumns, toggleHiddenColumn, clearHiddenColumns] = useURLSearchQuery(history, "hidden_columns", "array");
     const [hideMetricsNotRequiringAction, setHideMetricsNotRequiringAction] = useURLSearchQuery(history, "hide_metrics_not_requiring_action", "boolean", false);
     const [nrDates, setNrDates] = useURLSearchQuery(history, "nr_dates", "integer", 1);
     const [visibleDetailsTabs, toggleVisibleDetailsTab, clearVisibleDetailsTabs] = useURLSearchQuery(history, "tabs", "array");
@@ -55,6 +55,7 @@ export function AppUI({
                 set_user={set_user}
                 user={user}
                 panel={<ViewPanel
+                    clearHiddenColumns={clearHiddenColumns}
                     clearVisibleDetailsTabs={clearVisibleDetailsTabs}
                     dateInterval={dateInterval}
                     dateOrder={dateOrder}
diff --git a/components/frontend/src/header_footer/ViewPanel.js b/components/frontend/src/header_footer/ViewPanel.js
index e82eabf7c3..e7340cccf2 100644
--- a/components/frontend/src/header_footer/ViewPanel.js
+++ b/components/frontend/src/header_footer/ViewPanel.js
@@ -4,6 +4,7 @@ import { capitalize, pluralize } from "../utils";
 import './ViewPanel.css';
 
 export function ViewPanel({
+    clearHiddenColumns,
     clearVisibleDetailsTabs,
     dateInterval,
     dateOrder,
@@ -21,7 +22,7 @@ export function ViewPanel({
         <Segment.Group
             horizontal
             className='equal width'
-            style={{margin: "0px", border: "0px"}}
+            style={{ margin: "0px", border: "0px" }}
         >
             <Segment inverted color="black">
                 <Grid padded>
@@ -36,6 +37,32 @@ export function ViewPanel({
                             </Button>
                         </Grid.Column>
                     </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <Button
+                                disabled={
+                                    visibleDetailsTabs.length === 0 &&
+                                    !hideMetricsNotRequiringAction &&
+                                    hiddenColumns.length === 0 &&
+                                    nrDates === 1 &&
+                                    dateInterval === 7 &&
+                                    dateOrder === "descending"
+
+                                }
+                                onClick={() => {
+                                    clearVisibleDetailsTabs();
+                                    setHideMetricsNotRequiringAction(false);
+                                    clearHiddenColumns();
+                                    setNrDates(1);
+                                    setDateInterval(7);
+                                    setDateOrder("descending");
+                                }}
+                                inverted
+                            >
+                                Reset all settings
+                            </Button>
+                        </Grid.Column>
+                    </Grid.Row>
                 </Grid>
             </Segment>
             <Segment inverted color="black">
diff --git a/components/frontend/src/header_footer/ViewPanel.test.js b/components/frontend/src/header_footer/ViewPanel.test.js
index 842167f570..cae4862b2f 100644
--- a/components/frontend/src/header_footer/ViewPanel.test.js
+++ b/components/frontend/src/header_footer/ViewPanel.test.js
@@ -32,6 +32,36 @@ it("doesn't clear the visible details tabs if there are none", async () => {
     expect(clearVisibleDetailsTabs).not.toHaveBeenCalled()
 })
 
+it('resets the settings', async () => {
+    const clearVisibleDetailsTabs = jest.fn();
+    const clearHiddenColumns = jest.fn();
+    const setDateInterval = jest.fn();
+    const setDateOrder = jest.fn();
+    const setHideMetricsNotRequiringAction = jest.fn();
+    const setNrDates = jest.fn();
+    await act(async () => {
+        render(
+            <ViewPanel
+                clearHiddenColumns={clearHiddenColumns}
+                clearVisibleDetailsTabs={clearVisibleDetailsTabs}
+                hiddenColumns={["trend"]}
+                setDateInterval={setDateInterval}
+                setDateOrder={setDateOrder}
+                setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
+                setNrDates={setNrDates}
+                visibleDetailsTabs={["tab"]}
+            />
+        )
+        fireEvent.click(screen.getByText(/Reset all settings/))
+    });
+    expect(clearVisibleDetailsTabs).toHaveBeenCalled()
+    expect(clearHiddenColumns).toHaveBeenCalled()
+    expect(setDateInterval).toHaveBeenCalled()
+    expect(setDateOrder).toHaveBeenCalled()
+    expect(setNrDates).toHaveBeenCalled()
+    expect(setHideMetricsNotRequiringAction).toHaveBeenCalled()
+})
+
 it("hides the metrics not requiring action", async () => {
     const setHideMetricsNotRequiringAction = jest.fn();
     await act(async () => {
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
index 3750450d2a..535ac41310 100644
--- a/docs/src/changelog.md
+++ b/docs/src/changelog.md
@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Added
 
 - Add a setting to the settings panel to allow for reversing the order of the date columns in the metric tables. Closes [#2928](https://github.com/ICTU/quality-time/issues/2928).
+- Add a button to the settings panel to reset all settings to their default values. Closes [#3183](https://github.com/ICTU/quality-time/issues/3183).
 
 ## v3.32.0 - 2022-01-24