Add a button to the settings panel to reset all settings to their def…

…ault values (#3352) * Add a button to the settings panel to reset all settings to their default values. Closes #3183.
ICTU · Feb 1, 2022 · 260358f · 260358f
1 parent 0c69f55
commit 260358f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 3 deletions.
diff --git 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
@@ -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
@@ -32,6 +32,74 @@ 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}
+                dateInterval={14}
+                dateOrder="ascending"
+                hiddenColumns={["trend"]}
+                hideMetricsNotRequiringAction={true}
+                nrDates={7}
+                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('does not reset the settings when all have the default value', 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}
+                dateInterval={7}
+                dateOrder="descending"
+                hiddenColumns={[]}
+                hideMetricsNotRequiringAction={false}
+                nrDates={1}
+                setDateInterval={setDateInterval}
+                setDateOrder={setDateOrder}
+                setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
+                setNrDates={setNrDates}
+                visibleDetailsTabs={[]}
+            />
+        )
+        fireEvent.click(screen.getByText(/Reset all settings/))
+    });
+    expect(clearVisibleDetailsTabs).not.toHaveBeenCalled()
+    expect(clearHiddenColumns).not.toHaveBeenCalled()
+    expect(setDateInterval).not.toHaveBeenCalled()
+    expect(setDateOrder).not.toHaveBeenCalled()
+    expect(setNrDates).not.toHaveBeenCalled()
+    expect(setHideMetricsNotRequiringAction).not.toHaveBeenCalled()
+})
+
 it("hides the metrics not requiring action", async () => {
     const setHideMetricsNotRequiringAction = jest.fn();
     await act(async () => {
@@ -131,7 +199,7 @@ it("sets the number of dates", async () => {
         render(
             <ViewPanel
                 hiddenColumns={[]}
-                nrDates={1}
+                nrDates={2}
                 setNrDates={setNrDates}
                 visibleDetailsTabs={[]}
             />

diff --git 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