Move from rest-hooks to react-query (#11524)

* Refactor sync and rest connections calls * Refactor connections store to react-query * Fix imports * Refactor workspaces to react-query * Remove SourceDefinition and DestinationDefinition resources * Refactor Source and Destination resources * Move discover_schema request to react-query * Remove rest-hooks specific code * Fix lint errors * Fix lint * Update package.lock * Disable refetch * Minor code update * Fix wrong port * set initialSetupComplete for /get request in e2e * Add query mocks * Use completed setup prop instead of true * Fix e2e assignment Co-authored-by: Tim Roes <tim@airbyte.io> * Add invalidation scopes * Remove not required invalidation Co-authored-by: Tim Roes <tim@airbyte.io>
airbytehq · Apr 1, 2022 · 70cf071 · 70cf071
1 parent df12c9e
commit 70cf071
Show file tree

Hide file tree

Showing 94 changed files with 1,716 additions and 2,248 deletions.
diff --git a/airbyte-webapp-e2e-tests/cypress/support/commands/workspaces.js b/airbyte-webapp-e2e-tests/cypress/support/commands/workspaces.js
@@ -1,9 +1,9 @@
 Cypress.Commands.add("initialSetupCompleted", (completed = true) => {
   // Modify the workspaces/list response to mark every workspace as "initialSetupComplete" to ensure we're not showing
   // the setup/preference page for any workspace if this method got called.
-  cy.intercept("POST", "/api/v1/workspaces/list", (req) => {
+  cy.intercept("POST", "/api/v1/workspaces/get", (req) => {
     req.continue(res => {
-      res.body.workspaces = res.body.workspaces.map(ws => ({ ...ws, initialSetupComplete: completed }));
+      res.body.initialSetupComplete = completed;
       res.send(res.body);
     });
   });

diff --git a/airbyte-webapp/.storybook/main.ts b/airbyte-webapp/.storybook/main.ts
@@ -1,12 +1,13 @@
 module.exports = {
   core: {
-    builder: 'webpack5',
+    builder: "webpack5",
   },
   stories: ["../src/**/*.stories.@(ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
+    "storybook-addon-mock/register",
   ],
   webpackFinal: (config) => {
     config.resolve.modules.push(process.cwd() + "/node_modules");

diff --git a/airbyte-webapp/.storybook/preview.ts b/airbyte-webapp/.storybook/preview.ts
@@ -1,9 +1,7 @@
 import { addDecorator } from "@storybook/react";
 
 import { withProviders } from "./withProvider";
-import { MockDecorator } from "./restHooksDecorator";
 
 addDecorator(withProviders);
-addDecorator(MockDecorator);
 
 export const parameters = {};
diff --git a/airbyte-webapp/.storybook/restHooksDecorator.tsx b/airbyte-webapp/.storybook/restHooksDecorator.tsx
diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx
@@ -1,6 +1,9 @@
+import React from "react";
+
 import { MemoryRouter } from "react-router-dom";
 import { IntlProvider } from "react-intl";
 import { ThemeProvider } from "styled-components";
+import { QueryClientProvider, QueryClient } from "react-query";
 
 // TODO: theme was not working correctly so imported directly
 import { theme } from "../src/theme";
@@ -24,21 +27,37 @@ const AnalyticsContextMock: AnalyticsServiceProviderValue = ({
   },
 } as unknown) as AnalyticsServiceProviderValue;
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      suspense: true,
+    },
+  },
+});
+
 export const withProviders = (getStory) => (
-  <analyticsServiceContext.Provider value={AnalyticsContextMock}>
-    <ServicesProvider>
-      <MemoryRouter>
-        <IntlProvider messages={messages} locale={"en"}>
-          <ThemeProvider theme={theme}>
-            <ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}>
-              <FeatureService>
-                <GlobalStyle />
-                {getStory()}
-              </FeatureService>
-            </ConfigServiceProvider>
-          </ThemeProvider>
-        </IntlProvider>
-      </MemoryRouter>
-    </ServicesProvider>
-  </analyticsServiceContext.Provider>
+  <React.Suspense fallback={null}>
+    <analyticsServiceContext.Provider value={AnalyticsContextMock}>
+      <QueryClientProvider client={queryClient}>
+        <ServicesProvider>
+          <MemoryRouter>
+            <IntlProvider messages={messages} locale={"en"}>
+              <ThemeProvider theme={theme}>
+                <ConfigServiceProvider
+                  defaultConfig={defaultConfig}
+                  providers={[]}
+                >
+                  <FeatureService>
+                    <GlobalStyle />
+                    {getStory()}
+                  </FeatureService>
+                </ConfigServiceProvider>
+              </ThemeProvider>
+            </IntlProvider>
+          </MemoryRouter>
+        </ServicesProvider>
+      </QueryClientProvider>
+    </analyticsServiceContext.Provider>
+  </React.Suspense>
 );