Move from rest-hooks to react-query

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);
     });
   });

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");

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 = {};

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>
 );