Change how full grid refreshes from websockets work (#10362)

* #10276 suppress filters/quickactions refreshes when data request comes from a ws

* #10276 linter fixes

* #10276 refresh quick actions and don't show spinner at all

* #10276 update tests

frontend/src/__tests__/actions/ViewActions.test.js

@@ -230,6 +230,7 @@ describe('ViewActions thunks', () => {
     const payload1 = {
       id: windowId,
       isModal: true,
+      websocketRefresh: false,
     };
     const payload2 = {
       id: windowId,
@@ -318,6 +319,7 @@ describe('ViewActions thunks', () => {
     const payload1 = {
       id: windowId,
       isModal: false,
+      websocketRefresh: false,
     };
     const payload2 = {
       id: windowId,

frontend/src/actions/ViewActions.js

@@ -64,12 +64,17 @@ export function deleteView(id, isModal) {
 
 /**
  * @method fetchDocumentPending
- * @summary
+ * @summary request data for the document and set the pending flag to true
+ *
+ * @param {string} id - viewId
+ * @param {boolean} isModal
+ * @param {boolean} websocketRefresh - in case of data fetches caused by
+ * ws we won't set the pending flag to true
  */
-function fetchDocumentPending(id, isModal) {
+function fetchDocumentPending(id, isModal, websocketRefresh) {
   return {
     type: FETCH_DOCUMENT_PENDING,
-    payload: { id, isModal },
+    payload: { id, isModal, websocketRefresh },
   };
 }
 
@@ -314,9 +319,10 @@ export function fetchDocument({
   pageLength,
   orderBy,
   isModal = false,
+  websocketRefresh = false,
 }) {
   return (dispatch, getState) => {
-    dispatch(fetchDocumentPending(windowId, isModal));
+    dispatch(fetchDocumentPending(windowId, isModal, websocketRefresh));
 
     return browseViewRequest({
       windowId,
@@ -327,8 +333,10 @@ export function fetchDocument({
     })
       .then((response) => {
         // remove the old filter from the store
-        const entityRelatedId = getEntityRelatedId({ windowId, viewId });
-        dispatch(deleteFilter(entityRelatedId));
+        if (!websocketRefresh) {
+          const entityRelatedId = getEntityRelatedId({ windowId, viewId });
+          dispatch(deleteFilter(entityRelatedId));
+        }
 
         dispatch(fetchDocumentSuccess(windowId, response.data, isModal));
 
@@ -345,26 +353,29 @@ export function fetchDocument({
 
         const state = getState();
         const view = getView(state, windowId, isModal);
-        const filterId = getEntityRelatedId({ windowId, viewId });
-        const activeFiltersCaptions = populateFiltersCaptions({
-          filterData: view.layout.filters,
-          filtersActive: response.data.filters,
-        });
-        const filtersActive = formatFilters({
-          filtersData: view.layout.filters,
-          filtersActive: response.data.filters,
-        });
 
-        dispatch(
-          createFilter({
-            filterId,
-            data: {
-              filterData: view.layout.filters, // set the proper layout for the filters
-              filtersActive,
-              activeFiltersCaptions,
-            },
-          })
-        );
+        if (!websocketRefresh) {
+          const filterId = getEntityRelatedId({ windowId, viewId });
+          const activeFiltersCaptions = populateFiltersCaptions({
+            filterData: view.layout.filters,
+            filtersActive: response.data.filters,
+          });
+          const filtersActive = formatFilters({
+            filtersData: view.layout.filters,
+            filtersActive: response.data.filters,
+          });
+
+          dispatch(
+            createFilter({
+              filterId,
+              data: {
+                filterData: view.layout.filters, // set the proper layout for the filters
+                filtersActive,
+                activeFiltersCaptions,
+              },
+            })
+          );
+        }
 
         let shouldFetchQuickActions = true;
         let viewProfileId = null;

frontend/src/assets/css/styles.css

@@ -679,6 +679,7 @@ body{
 .document-list-body {
     display: flex;
     flex-grow: 1;
+    position: relative;
     /*flex-direction: column;*/
 }
 
@@ -1006,7 +1007,8 @@ body{
     border-radius: 3px;
     display: inline-block;
     position: absolute;
-    z-index: 4;
+    /* it has to come on top of the overlay */
+    z-index: 500;
     left: 0;
     top: 31px;
     list-style: none;

frontend/src/components/app/DocumentList.js

@@ -302,10 +302,9 @@ export default class DocumentList extends Component {
           </div>
         )}
 
-        {triggerSpinner && !inBackground && <Spinner iconSize={50} />}
-
         {layout && (
           <div className="document-list-body">
+            {triggerSpinner && !inBackground && <Spinner iconSize={50} />}
             <div className="row table-context">
               <Table
                 entity="documentView"

frontend/src/containers/DocumentList.js

@@ -74,7 +74,13 @@ class DocumentListContainer extends Component {
     this.fetchLayoutAndData();
     this.renderedSuccessfuly = false;
 
-    this.debouncedRefresh = debounce(this.browseView, 500, { maxWait: 10000 });
+    this.debouncedRefresh = debounce(
+      () => {
+        this.browseView(true);
+      },
+      500,
+      { maxWait: 10000 }
+    );
   }
 
   UNSAFE_componentWillMount() {
@@ -322,7 +328,7 @@ class DocumentListContainer extends Component {
    * @method browseView
    * @summary If viewId exists, than browse that view.
    */
-  browseView = () => {
+  browseView = (websocketRefresh) => {
     const {
       viewId,
       page,
@@ -336,7 +342,13 @@ class DocumentListContainer extends Component {
 
     // in case of redirect from a notification, first call will have viewId empty
     if (viewId) {
-      this.getData(viewId, page, sort, locationSearchFilter).catch((err) => {
+      this.getData(
+        viewId,
+        page,
+        sort,
+        locationSearchFilter,
+        websocketRefresh
+      ).catch((err) => {
         if (err.response && err.response.status === 404) {
           this.createNewView();
         }
@@ -459,7 +471,7 @@ class DocumentListContainer extends Component {
    * @method getData
    * @summary Loads view/included tab data from REST endpoint
    */
-  getData = (id, page, sortingQuery, locationAreaSearch) => {
+  getData = (id, page, sortingQuery, locationAreaSearch, websocketRefresh) => {
     const {
       windowId,
       updateUri,
@@ -490,6 +502,7 @@ class DocumentListContainer extends Component {
       pageLength: this.pageLength,
       orderBy: sortingQuery,
       isModal,
+      websocketRefresh,
     })
       .then((response) => {
         const result = response.result;

frontend/src/reducers/viewHandler.js

@@ -159,9 +159,14 @@ export default function viewHandler(state = initialState, action) {
     }
 
     case FETCH_DOCUMENT_PENDING: {
-      const { id, isModal } = action.payload;
+      const { id, isModal, websocketRefresh } = action.payload;
       const type = getViewType(isModal);
       const view = getLocalView(state, id, isModal);
+      // if a websocket event caused this data fetch, we're not setting
+      // pending flag to true as in case of multiple refreshes in a short
+      // period of time it will cause the spinner to flicker
+      // https://github.com/metasfresh/me03/issues/6262#issuecomment-733527251
+      const pending = websocketRefresh ? false : true;
 
       return {
         ...state,
@@ -170,7 +175,7 @@ export default function viewHandler(state = initialState, action) {
           [`${id}`]: {
             ...view,
             notFound: false,
-            pending: true,
+            pending,
             error: null,
           },
         },