Merge pull request #3112 from awslabs/feat/query-client-provider

feat(dashboard): remove query client provider
awslabs · Jan 22, 2025 · 5ce7e2a · 5ce7e2a
2 parents c210630 + e0c9943
commit 5ce7e2a
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 195 deletions.
diff --git a/packages/dashboard/src/components/csvDownloadButton/emptyDownload.test.tsx b/packages/dashboard/src/components/csvDownloadButton/emptyDownload.test.tsx
@@ -1,22 +1,25 @@
+import { QueryClient } from '@tanstack/react-query';
+
+vi.mock('../../data/query-client', () => ({
+  queryClient: new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  }),
+}));
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { createMockSiteWiseSDK } from '@iot-app-kit/testing-util';
 
 import { type IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
 import { CSVDownloadButton } from './index';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   type StyledAssetQuery,
   type StyledSiteWiseQueryConfig,
 } from '~/customization/widgets/types';
 
-const testQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
 const assetId1 = 'some-asset-id-1';
 const propertyId1 = 'some-property-id-1';
 const alias1 = 'some-asset-alias-1';
@@ -40,17 +43,15 @@ vi.mock('~/data/listAssetPropertiesMap/fetchListAssetPropertiesMap', () => ({
 
 it('does not render button if query has no content', function () {
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={{
-          source: 'iotsitewise',
-          query: MOCK_EMPTY_QUERY,
-        }}
-        widgetType='line'
-        fileName='csv-test'
-        client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={{
+        source: 'iotsitewise',
+        query: MOCK_EMPTY_QUERY,
+      }}
+      widgetType='line'
+      fileName='csv-test'
+      client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
+    />
   );
 
   expect(screen.queryByTestId(/csv-download-button/)).toBeNull();
@@ -66,14 +67,12 @@ it('creates a file for download if data is empty', async function () {
     },
   } as StyledSiteWiseQueryConfig;
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={mockQueryConfig}
-        fileName='csv-test'
-        widgetType='line'
-        client={mockClient}
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={mockQueryConfig}
+      fileName='csv-test'
+      widgetType='line'
+      client={mockClient}
+    />
   );
 
   const downloadButton = screen.queryByTestId(/csv-download-button/);

diff --git a/packages/dashboard/src/components/csvDownloadButton/errorDownload.test.tsx b/packages/dashboard/src/components/csvDownloadButton/errorDownload.test.tsx
@@ -1,21 +1,24 @@
+import { QueryClient } from '@tanstack/react-query';
+
+vi.mock('../../data/query-client', () => ({
+  queryClient: new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  }),
+}));
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { createMockSiteWiseSDK } from '@iot-app-kit/testing-util';
 
 import { type IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
 import { CSVDownloadButton } from './index';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useFetchTimeSeriesData } from '../dashboard/queryContext';
 import { type StyledAssetQuery } from '~/customization/widgets/types';
 import { type DataStream } from '@iot-app-kit/core';
 
-const testQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
 const assetId1 = 'some-asset-id-1';
 const propertyId1 = 'some-property-id-1';
 const alias1 = 'some-asset-alias-1';
@@ -47,19 +50,17 @@ vi.mock('~/data/listAssetPropertiesMap/fetchListAssetPropertiesMap', () => ({
 
 it('console an errors if data has errors', async function () {
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={{
-          source: 'iotsitewise',
-          query: {
-            ...MOCK_QUERY,
-          },
-        }}
-        widgetType='line'
-        fileName='csv-test'
-        client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={{
+        source: 'iotsitewise',
+        query: {
+          ...MOCK_QUERY,
+        },
+      }}
+      widgetType='line'
+      fileName='csv-test'
+      client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
+    />
   );
 
   const consoleErrorSpy = vi.spyOn(console, 'error');
@@ -72,19 +73,17 @@ it('console an errors if data has errors', async function () {
 
 it('does not create a file for download if data has errors', async function () {
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={{
-          source: 'iotsitewise',
-          query: {
-            ...MOCK_QUERY,
-          },
-        }}
-        widgetType='line'
-        fileName='csv-test'
-        client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={{
+        source: 'iotsitewise',
+        query: {
+          ...MOCK_QUERY,
+        },
+      }}
+      widgetType='line'
+      fileName='csv-test'
+      client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
+    />
   );
 
   const downloadButton = screen.queryByTestId(/csv-download-button/);

diff --git a/packages/dashboard/src/components/csvDownloadButton/index.tsx b/packages/dashboard/src/components/csvDownloadButton/index.tsx
@@ -9,14 +9,14 @@ import { useFetchTimeSeriesData } from '../dashboard/queryContext';
 import { useViewport } from '@iot-app-kit/react-components';
 import { assetModelQueryToSiteWiseAssetQuery } from '~/customization/widgets/utils/assetModelQueryToAssetQuery';
 import { convertToCSVObject } from './convertToCSVObject';
-import { useQueryClient } from '@tanstack/react-query';
 import { fetchListAssetPropertiesMap } from '~/data/listAssetPropertiesMap/fetchListAssetPropertiesMap';
 import {
   BAR_CHART_RESOLUTIONS,
   DEFAULT_VIEWPORT,
   EMPTY_DATA,
 } from './constants';
 import { convertViewportToHistoricalViewport } from '../util/dateTimeUtil';
+import { queryClient } from '~/data/query-client';
 
 export const canOnlyDownloadLiveMode: readonly string[] = [
   'table',
@@ -48,7 +48,6 @@ export const CSVDownloadButton = ({
   fileName?: string;
 } & ButtonProps) => {
   const [isDownloading, setIsDownloading] = useState(false);
-  const queryClient = useQueryClient();
   const fetchTimeSeriesData = useFetchTimeSeriesData();
 
   const { viewport: injectedViewport } = useViewport();

diff --git a/packages/dashboard/src/components/csvDownloadButton/succesfulDownload.test.tsx b/packages/dashboard/src/components/csvDownloadButton/succesfulDownload.test.tsx
@@ -1,17 +1,26 @@
+import { QueryClient } from '@tanstack/react-query';
+
+vi.mock('../../data/query-client', () => ({
+  queryClient: new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  }),
+}));
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { createMockSiteWiseSDK } from '@iot-app-kit/testing-util';
 
 import { type IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
 import { CSVDownloadButton } from './index';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   type StyledAssetQuery,
   type StyledSiteWiseQueryConfig,
 } from '~/customization/widgets/types';
 import { type DataStream, type DataType } from '@iot-app-kit/core';
 
-const testQueryClient = new QueryClient({});
-
 const assetId1 = 'some-asset-id-1';
 const propertyId1 = 'some-property-id-1';
 const alias1 = 'some-asset-alias-1';
@@ -44,19 +53,17 @@ vi.mock('~/data/listAssetPropertiesMap/fetchListAssetPropertiesMap', () => ({
 
 it('renders a working download button if query has content', function () {
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={{
-          source: 'iotsitewise',
-          query: {
-            ...MOCK_QUERY,
-          },
-        }}
-        widgetType='line'
-        fileName='csv-test'
-        client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={{
+        source: 'iotsitewise',
+        query: {
+          ...MOCK_QUERY,
+        },
+      }}
+      widgetType='line'
+      fileName='csv-test'
+      client={createMockSiteWiseSDK() as unknown as IoTSiteWiseClient}
+    />
   );
 
   const downloadButton = screen.queryByTestId(/csv-download-button/);
@@ -74,14 +81,12 @@ it('creates a file for download if query has content', async function () {
     },
   } as StyledSiteWiseQueryConfig;
   render(
-    <QueryClientProvider client={testQueryClient}>
-      <CSVDownloadButton
-        queryConfig={mockQueryConfig}
-        fileName='csv-test'
-        client={mockClient}
-        widgetType='line'
-      />
-    </QueryClientProvider>
+    <CSVDownloadButton
+      queryConfig={mockQueryConfig}
+      fileName='csv-test'
+      client={mockClient}
+      widgetType='line'
+    />
   );
 
   const downloadButton = screen.queryByTestId(/csv-download-button/);

diff --git a/packages/dashboard/src/components/dashboard/index.tsx b/packages/dashboard/src/components/dashboard/index.tsx
@@ -2,7 +2,6 @@ import '@cloudscape-design/global-styles/index.css';
 import type { EdgeMode, Viewport } from '@iot-app-kit/core';
 import { isEdgeModeEnabled } from '@iot-app-kit/core';
 import { TimeSync } from '@iot-app-kit/react-components';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import debounce from 'lodash-es/debounce';
 import { memo, useMemo } from 'react';
@@ -102,42 +101,41 @@ const Dashboard: React.FC<DashboardProperties> = ({
       {showFPSMonitor && <FpsView height={50} width={80} />}
       <ClientContext.Provider value={clients}>
         <QueryContext.Provider value={queries}>
-          <QueryClientProvider client={queryClient}>
-            <Provider store={initialStore}>
-              <DndProvider
-                backend={TouchBackend}
-                options={{
-                  enableMouseEvents: true,
-                  enableKeyboardEvents: true,
-                }}
+          <Provider store={initialStore}>
+            <DndProvider
+              backend={TouchBackend}
+              options={{
+                enableMouseEvents: true,
+                enableKeyboardEvents: true,
+              }}
+            >
+              <TimeSync
+                initialViewport={
+                  dashboardConfiguration.defaultViewport ?? { duration: '5m' }
+                }
+                group='dashboard-timesync'
+                onViewportChange={debounceOnViewportChange}
               >
-                <TimeSync
-                  initialViewport={
-                    dashboardConfiguration.defaultViewport ?? { duration: '5m' }
+                <InternalDashboard
+                  toolbar={toolbar}
+                  onSave={onSave}
+                  editable={true}
+                  name={name}
+                  propertiesPanel={<PropertiesPanel />}
+                  defaultViewport={dashboardConfiguration.defaultViewport}
+                  currentViewport={currentViewport}
+                  onDashboardConfigurationChange={
+                    onDashboardConfigurationChange
                   }
-                  group='dashboard-timesync'
-                  onViewportChange={debounceOnViewportChange}
-                >
-                  <InternalDashboard
-                    toolbar={toolbar}
-                    onSave={onSave}
-                    editable={true}
-                    name={name}
-                    propertiesPanel={<PropertiesPanel />}
-                    defaultViewport={dashboardConfiguration.defaultViewport}
-                    currentViewport={currentViewport}
-                    onDashboardConfigurationChange={
-                      onDashboardConfigurationChange
-                    }
-                  />
-                </TimeSync>
-              </DndProvider>
-            </Provider>
-            <ReactQueryDevtools
-              initialIsOpen={false}
-              buttonPosition='bottom-left'
-            />
-          </QueryClientProvider>
+                />
+              </TimeSync>
+            </DndProvider>
+          </Provider>
+          <ReactQueryDevtools
+            client={queryClient}
+            initialIsOpen={false}
+            buttonPosition='bottom-left'
+          />
         </QueryContext.Provider>
       </ClientContext.Provider>
     </>