DATAP-1549 - hide tour when site loading

src/components/List/ListPanel/ListPanel.js

@@ -18,7 +18,7 @@ import { Separator } from '../../RefineBar/Separator';
 import { TabbedNavigation } from '../../TabbedNavigation';
 import { selectAggsHasError } from '../../../reducers/aggs/selectors';
 import {
-  selectResultsIsLoading,
+  selectResultsActiveCall,
   selectResultsItems,
 } from '../../../reducers/results/selectors';
 import { selectViewWidth } from '../../../reducers/view/selectors';
@@ -36,7 +36,7 @@ export const ListPanel = () => {
   const hasError = useSelector(selectAggsHasError);
   const size = useSelector(selectQuerySize);
   const sort = useSelector(selectQuerySort);
-  const isLoading = useSelector(selectResultsIsLoading);
+  const isLoading = useSelector(selectResultsActiveCall);
   const items = useSelector(selectResultsItems);
   const width = useSelector(selectViewWidth);
 
@@ -117,7 +117,7 @@ export const ListPanel = () => {
       </div>
       {renderMap[phase]()}
       <Pagination />
-      <Loading isLoading={isLoading || false} />
+      <Loading isLoading={!!isLoading} />
     </section>
   );
 };

src/components/List/ListPanel/ListPanel.spec.js

@@ -66,7 +66,7 @@ describe('ListPanel', () => {
       error: '',
     };
     const newResultsState = {
-      isLoading: false,
+      activeCall: '',
       items: [],
     };
 

src/components/Tour/Tour.js

@@ -12,14 +12,23 @@ import { Steps } from 'intro.js-react';
 import { TOUR_STEPS } from './constants/tourStepsConstants';
 import { TourButton } from './TourButton';
 import { tourHidden } from '../../actions/view';
+import { selectAggsActiveCall } from '../../reducers/aggs/selectors';
+import { selectResultsActiveCall } from '../../reducers/results/selectors';
+import { selectMapActiveCall } from '../../reducers/map/selectors';
+import { selectTrendsActiveCall } from '../../reducers/trends/selectors';
 
 export const Tour = () => {
   const dispatch = useDispatch();
   const showTour = useSelector(selectViewShowTour);
   const tab = useSelector(selectQueryTab);
+  const aggsLoading = useSelector(selectAggsActiveCall);
+  const mapLoading = useSelector(selectMapActiveCall);
+  const resultsLoading = useSelector(selectResultsActiveCall);
+  const trendsLoading = useSelector(selectTrendsActiveCall);
   const isPrintMode = useSelector(selectViewIsPrintMode);
   const viewWidth = useSelector(selectViewWidth);
-
+  const stepRef = useRef();
+  const isLoading = aggsLoading + mapLoading + resultsLoading + trendsLoading;
   const mobileStepOpen = {
     disableInteraction: false,
     element: '.filter-panel-toggle .m-btn-group .a-btn',
@@ -44,7 +53,6 @@ export const Tour = () => {
             TOUR_STEPS[tab].slice(7),
           )
       : TOUR_STEPS[tab];
-  const stepRef = useRef();
 
   // INTRODUCTION / TUTORIAL OPTIONS:
   const options = {
@@ -66,6 +74,10 @@ export const Tour = () => {
    * @param {object} ref - React component reference.
    */
   function handleBeforeChange(ref) {
+    if (!ref.current) {
+      // early exit, tour not set
+      return;
+    }
     const currentStep = ref.current.introJs.currentStep();
 
     // exit out when we're on last step and keyboard nav pressed
@@ -135,7 +147,7 @@ export const Tour = () => {
    * @returns {boolean} Can we exit?
    */
   function handleBeforeExit(ref) {
-    if (ref.current === null) {
+    if (ref.current === null || !showTour) {
       return true;
     }
     if (ref.current.introJs.currentStep() + 1 < steps.length) {
@@ -145,7 +157,7 @@ export const Tour = () => {
     return true;
   }
 
-  return isPrintMode ? null : (
+  return isPrintMode || isLoading ? null : (
     // eslint-disable-next-line react/react-in-jsx-scope
     <>
       <TourButton />

src/components/Tour/Tour.spec.js

@@ -0,0 +1,60 @@
+import { Tour } from './Tour';
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { defaultAggs } from '../../reducers/aggs/aggs';
+import { defaultQuery } from '../../reducers/query/query';
+import { defaultView } from '../../reducers/view/view';
+import { merge } from '../../testUtils/functionHelpers';
+import userEvent from '@testing-library/user-event';
+import { MODE_LIST } from '../../constants';
+import * as viewActions from '../../actions/view';
+
+const renderComponent = (newAggsState, newQueryState, newViewModelState) => {
+  merge(newAggsState, defaultAggs);
+  merge(newQueryState, defaultQuery);
+  merge(newViewModelState, defaultView);
+
+  const data = {
+    aggs: newAggsState,
+    query: newQueryState,
+    view: newViewModelState,
+  };
+  return render(<Tour />, { preloadedState: data });
+};
+
+describe('Tour loading behavior', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const user = userEvent.setup({ delay: null });
+
+  test("Tour doesn't load if page still loading", async () => {
+    renderComponent({}, {}, { showTour: false });
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  test("Tour doesn't load unless tourShown state is true", async () => {
+    renderComponent({ activeCall: '' }, {}, { showTour: false });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    renderComponent({ activeCall: '' }, {}, { showTour: true });
+    expect(await screen.findByRole('dialog')).toBeDefined();
+  });
+
+  test('Tour launches by clicking button', async () => {
+    const tourShownSpy = jest
+      .spyOn(viewActions, 'tourShown')
+      .mockImplementation(() => jest.fn());
+
+    renderComponent(
+      { activeCall: '' },
+      { tab: MODE_LIST },
+      {
+        showTour: false,
+      },
+    );
+
+    expect(screen.getByRole('button', { name: /Take a tour/ })).toBeVisible();
+    await user.click(screen.getByRole('button', { name: /Take a tour/ }));
+    expect(tourShownSpy).toHaveBeenCalled();
+  });
+});

src/components/Trends/TrendsPanel/TrendsPanel.js

@@ -14,10 +14,10 @@ import {
   selectQueryTrendsDateWarningEnabled,
 } from '../../../reducers/query/selectors';
 import {
+  selectTrendsActiveCall,
   selectTrendsChartType,
   selectTrendsColorMap,
   selectTrendsFocus,
-  selectTrendsIsLoading,
   selectTrendsResults,
   selectTrendsTotal,
 } from '../../../reducers/trends/selectors';
@@ -97,7 +97,7 @@ export const TrendsPanel = () => {
   const chartType = useSelector(selectTrendsChartType);
   const colorMap = useSelector(selectTrendsColorMap);
   const focus = useSelector(selectTrendsFocus);
-  const isLoading = useSelector(selectTrendsIsLoading);
+  const isLoading = useSelector(selectTrendsActiveCall);
   const results = useSelector(selectTrendsResults);
   const total = useSelector(selectTrendsTotal);
   const expandedRows = useSelector(selectViewExpandedRows);
@@ -305,7 +305,7 @@ export const TrendsPanel = () => {
 
       {total > 0 && phaseMap()}
       <TrendDepthToggle />
-      <Loading isLoading={isLoading || false} />
+      <Loading isLoading={!!isLoading} />
     </section>
   );
 };

src/reducers/__fixtures__/trendsAggsDupes.js

@@ -7930,7 +7930,6 @@ export const trendsAggsDupeResults = {
   },
   error: false,
   focus: '',
-  isLoading: false,
   lens: 'Overview',
   results: {
     dateRangeArea: [],

src/reducers/__fixtures__/trendsAggsMissingBuckets.js

@@ -3171,7 +3171,6 @@ export const trendsAggsMissingBucketsResults = {
   },
   error: false,
   focus: '',
-  isLoading: false,
   lens: 'Product',
   results: {
     dateRangeArea: [

src/reducers/__fixtures__/trendsBackfill.js

@@ -410,7 +410,6 @@ export const trendsBackfillResults = {
   },
   error: false,
   focus: '',
-  isLoading: false,
   lens: 'Product',
   results: {
     dateRangeArea: [

src/reducers/__fixtures__/trendsCompanyResults.js

@@ -2394,7 +2394,6 @@ export const trendsCompanyResults = {
   },
   error: false,
   focus: '',
-  isLoading: false,
   lens: 'Company',
   results: {
     company: [

src/reducers/__fixtures__/trendsFocusAggs.js

@@ -2586,7 +2586,6 @@ export const trendsFocusAggsResults = {
   },
   error: false,
   focus: 'Debt collection',
-  isLoading: false,
   lens: 'Product',
   results: {
     dateRangeArea: [

src/reducers/__fixtures__/trendsResults.js

@@ -911,7 +911,6 @@ export const trendsResults = {
   },
   error: false,
   focus: '',
-  isLoading: false,
   lens: 'Overview',
   results: {
     dateRangeArea: [],

src/reducers/__tests__/trends.spec.js

@@ -33,7 +33,6 @@ describe('reducer:trends', () => {
         colorMap: {},
         error: false,
         focus: '',
-        isLoading: false,
         lens: 'Product',
         results: {
           dateRangeArea: [],
@@ -302,7 +301,6 @@ describe('reducer:trends', () => {
     expect(target({}, action)).toEqual({
       activeCall: 'http://www.example.org',
       chartType: 'line',
-      isLoading: true,
       tooltip: false,
     });
   });
@@ -330,7 +328,6 @@ describe('reducer:trends', () => {
         chartType: 'line',
         colorMap: {},
         error: { message: 'foo bar', name: 'ErrorTypeName', stack: 'trace' },
-        isLoading: false,
         results: {
           dateRangeArea: [],
           dateRangeLine: [],
@@ -435,7 +432,6 @@ describe('reducer:trends', () => {
         colorMap: {},
         error: false,
         focus: '',
-        isLoading: false,
         lens: 'Product',
         results: {
           dateRangeArea: [],

src/reducers/aggs/aggs.js

@@ -10,7 +10,6 @@ import { processErrorMessage } from '../../utils';
 export const defaultAggs = {
   activeCall: '',
   doc_count: 0,
-  isLoading: false,
   total: 0,
   error: '',
   lastUpdated: null,
@@ -44,7 +43,6 @@ export function aggregationsCallInProcess(state, action) {
   return {
     ...state,
     activeCall: action.url,
-    isLoading: true,
   };
 }
 
@@ -67,9 +65,9 @@ export function processAggregationResults(state, action) {
 
   const result = {
     ...state,
+    activeCall: '',
     doc_count,
     error: '',
-    isLoading: false,
     lastUpdated: action.data._meta.last_updated,
     lastIndexed: action.data._meta.last_indexed,
     hasDataIssue: action.data._meta.has_data_issue,
@@ -94,7 +92,7 @@ export function processAggregationResults(state, action) {
 export function processAggregationError(state, action) {
   return {
     ...defaultAggs,
-    isLoading: false,
+    activeCall: '',
     error: processErrorMessage(action.error),
   };
 }

src/reducers/aggs/aggs.spec.js

@@ -20,7 +20,6 @@ describe('reducer:aggs', () => {
 
     expect(target({}, action)).toEqual({
       activeCall: 'foobar',
-      isLoading: true,
     });
   });
 
@@ -68,9 +67,9 @@ describe('reducer:aggs', () => {
       },
     };
     const expected = {
+      activeCall: '',
       doc_count: 162576,
       company_response: [{ key: 'foo', doc_count: 99 }],
-      isLoading: false,
       total: 99,
       error: '',
       lastUpdated: '2017-07-10T00:00:00.000Z',

src/reducers/aggs/selectors.js

@@ -1,4 +1,5 @@
 export const selectAggsState = (state) => state.aggs;
+export const selectAggsActiveCall = (state) => state.aggs.activeCall;
 export const selectAggsDocCount = (state) => state.aggs.doc_count;
 export const selectAggsHasDataIssue = (state) => state.aggs.hasDataIssue;
 export const selectAggsHasError = (state) => state.aggs.error;

src/reducers/map/map.js

@@ -8,7 +8,6 @@ import { TILE_MAP_STATES } from '../../constants';
 export const defaultMap = {
   activeCall: '',
   error: false,
-  isLoading: false,
   results: {
     product: [],
     state: [],
@@ -70,7 +69,6 @@ export function statesCallInProcess(state, action) {
     ...state,
     activeCall: action.url,
     error: false,
-    isLoading: true,
   };
 }
 
@@ -94,7 +92,6 @@ export function processStatesResults(state, action) {
     ...state,
     activeCall: '',
     error: false,
-    isLoading: false,
     results,
   };
 }
@@ -111,7 +108,6 @@ export function processStatesError(state, action) {
     ...state,
     activeCall: '',
     error: processErrorMessage(action.error),
-    isLoading: false,
     results: {
       product: [],
       state: [],

src/reducers/map/map.spec.js

@@ -10,7 +10,6 @@ describe('reducer:map', () => {
       expect(target(undefined, {})).toEqual({
         activeCall: '',
         error: false,
-        isLoading: false,
         results: {
           product: [],
           state: [],
@@ -27,7 +26,6 @@ describe('reducer:map', () => {
     expect(target({}, action)).toEqual({
       activeCall: 'http://www.example.org',
       error: false,
-      isLoading: true,
     });
   });
 
@@ -46,7 +44,6 @@ describe('reducer:map', () => {
       expect(result).toEqual({
         activeCall: '',
         error: false,
-        isLoading: false,
         results: {
           state: [
             { name: 'CA', value: 62519, issue: 'issue o', product: 'fo prod' },
@@ -174,7 +171,6 @@ describe('reducer:map', () => {
       ).toEqual({
         activeCall: '',
         error: { message: 'foo bar', name: 'ErrorTypeName', stack: 'trace' },
-        isLoading: false,
         results: {
           product: [],
           state: [],