Issue 588 dashboard layout (#594)

The layout of the reports overview dashboard would be reset after visiting a tag report. Fixes #588.

components/art/cypress/integration/create_report/create_report.js

@@ -2,11 +2,12 @@ import { When, Then } from "cypress-cucumber-preprocessor/steps";
 
 When(/^the quality manager creates a new report$/, () => {
     cy.contains('button', 'Add report').click();
+    cy.wait(4000);  // Only thing that works from things suggested @ https://github.com/cypress-io/cypress/issues/695
     cy.contains('a.ui.card', 'New report').click();
 });
 
 When(/^the quality manager adds a new subject$/, () => {
-    cy.wait(4000);  // Only thing that works from things suggested @ https://github.com/cypress-io/cypress/issues/695
+    cy.wait(4000);
     cy.contains('button', 'Add subject').click();
 });
 
@@ -16,6 +17,7 @@ When(/^the quality manager adds a new metric$/, () => {
 });
 
 When(/^the quality manager sets the metric target value to (.+)$/, (metric_target_value) => {
+    cy.wait(4000);
     cy.get('input[type=number]').first().type("{selectall}").type(metric_target_value).blur();
 });
 

components/frontend/src/App.js

@@ -28,7 +28,7 @@ class App extends Component {
       if (action === "POP") {
         const pathname = this.history.location.pathname;
         const report_uuid = pathname.slice(1, pathname.length);
-        this.setState({ report_uuid: report_uuid }, () => this.reload());
+        this.setState({ report_uuid: report_uuid, loading: true }, () => this.reload());
       }
     });
   }
@@ -39,10 +39,11 @@ class App extends Component {
     if (report_uuid !== "") {
       this.connect_to_nr_measurements_event_source(report_uuid)
     }
-    this.setState({ report_uuid: report_uuid, user: localStorage.getItem("user") }, () => this.reload());
+    this.setState({ report_uuid: report_uuid, loading: true, user: localStorage.getItem("user") }, () => this.reload());
   }
 
   reload(json) {
+    this.setState({ loading: true });
     if (json && json.ok === false && json.reason === "invalid_session") {
       this.logout();
       toast(
@@ -64,7 +65,6 @@ class App extends Component {
         console.log(error);
       });
     if (this.state.report_uuid.slice(0, 4) === "tag-") {
-      this.setState({ loading: true });
       const tag = this.state.report_uuid.slice(4);
       get_tag_report(tag, report_date)
         .then(function (tagreport_json) {
@@ -102,13 +102,13 @@ class App extends Component {
     const today = new Date();
     const today_string = String(today.getDate()).padStart(2, '0') + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + today.getFullYear();
     const new_report_date_string = value === today_string ? '' : value;
-    this.setState({ [name]: new_report_date_string }, () => this.reload())
+    this.setState({ [name]: new_report_date_string, loading: true }, () => this.reload())
   }
 
   go_home() {
     if (this.history.location.pathname !== "/") {
       this.history.push("/");
-      this.setState({ report_uuid: "" }, () => this.reload());
+      this.setState({ report_uuid: "", loading: true }, () => this.reload());
       if (this.source) {
         this.source.close()
       }
@@ -117,7 +117,7 @@ class App extends Component {
 
   open_report(event, report_uuid) {
     event.preventDefault();
-    this.setState({ report_uuid: report_uuid }, () => this.reload());
+    this.setState({ report_uuid: report_uuid, loading: true }, () => this.reload());
     this.history.push(report_uuid);
     this.connect_to_nr_measurements_event_source(report_uuid);
   }
@@ -141,7 +141,7 @@ class App extends Component {
   open_tag_report(event, tag) {
     event.preventDefault();
     const report_uuid = `tag-${tag}`
-    this.setState({ report_uuid: report_uuid }, () => this.reload());
+    this.setState({ report_uuid: report_uuid, loading: true }, () => this.reload());
     this.history.push(report_uuid);
     if (this.source) {
       this.source.close()

components/frontend/src/dashboard/CardDashboard.js

@@ -4,12 +4,14 @@ import RGL, { WidthProvider } from "react-grid-layout";
 
 const ReactGridLayout = WidthProvider(RGL);
 
-export function CardDashboard(props) {
+export function CardDashboard({ uuid, cards }) {
     const [dragging, setDragging] = useState(false);
     const [mousePos, setMousePos] = useState([0, 0, 0]);
-    if (props.cards.length === 0) { return null }
+    const [layout, setLayout] = useState(JSON.parse(localStorage.getItem(`layout-${uuid}`) || '[]'));
+    if (cards.length === 0) { return null }
     function onLayoutChange(new_layout) {
-        localStorage.setItem(`layout-${props.uuid}`, JSON.stringify(new_layout))
+        setLayout(new_layout);
+        localStorage.setItem(`layout-${uuid}`, JSON.stringify(new_layout))
     }
     function onDragStart(current_layout, oldItem, newItem, placeholder, event) {
         setDragging(true);
@@ -31,7 +33,7 @@ export function CardDashboard(props) {
     const card_width = 4;
     const card_height = 6;
     let divs = [];
-    props.cards.forEach(
+    cards.forEach(
         (card, index) => divs.push(
             <div
                 onClickCapture={(e) => { if (dragging) { e.stopPropagation() } }}
@@ -50,7 +52,6 @@ export function CardDashboard(props) {
                 {card}
             </div>)
     )
-    const layout = JSON.parse(localStorage.getItem(`layout-${props.uuid}`) || '[]');
     return (
         <Segment>
             <ReactGridLayout

docs/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Use a consistent style for labels of input fields. Fixes [#579](https://github.com/ICTU/quality-time/issues/579).
 - Added Quality-time logo to the Quality-time source. Fixes [#580](https://github.com/ICTU/quality-time/issues/580).
+- The layout of the reports overview dashboard would be reset after visiting a tag report. Fixes [#588](https://github.com/ICTU/quality-time/issues/588).
 - Tag report donut charts were always white. Fixes [#589](https://github.com/ICTU/quality-time/issues/589).
 
 ## [0.8.2] - [2019-08-28]