🪟 🔧 Upgrade to Storybook 7 (#22056)

* WIP Upgrade to Storybook 7

* Fix outstanding issues

* Empty NL

* Increase node memory limit

* Move heap size flag to gradle

* Remove depth from checkout

* Fix chromatic action

.github/workflows/gradle.yml

@@ -397,8 +397,10 @@ jobs:
     steps:
       - name: Checkout Airbyte
         uses: actions/checkout@v3
+        # We need to fetch at least one more commmit for the Chromatic action not to fail
+        # but since we don't do screenshot comparison we don't need to fetch the full history.
         with:
-          fetch-depth: 0
+          fetch-depth: 2
 
       - name: Cache Build Artifacts
         uses: ./.github/actions/cache-build-artifacts

airbyte-webapp/.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  framework: "@storybook/react-vite",
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+  ],
+};
+
+export default config;

airbyte-webapp/.storybook/preview.ts

@@ -1,11 +1,8 @@
-import { addDecorator } from "@storybook/react";
-
 import { withProviders } from "./withProvider";
 
-import "!style-loader!css-loader!sass-loader!../public/index.css";
+import "../public/index.css";
 import "../src/scss/global.scss";
-import "../src/globals";
-
-addDecorator(withProviders);
+import "../src/dayjs-setup";
 
 export const parameters = {};
+export const decorators = [withProviders];

airbyte-webapp/.storybook/withProvider.tsx

@@ -9,10 +9,11 @@ import { QueryClientProvider, QueryClient } from "react-query";
 import { theme } from "../src/theme";
 import messages from "../src/locales/en.json";
 import { FeatureService } from "../src/hooks/services/Feature";
-import { ConfigServiceProvider, defaultConfig } from "../src/config";
+import { ConfigServiceProvider, config } from "../src/config";
 import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 import { ServicesProvider } from "../src/core/servicesProvider";
 import { analyticsServiceContext } from "../src/hooks/services/Analytics";
+import { AppMonitoringServiceProvider } from "../src/hooks/services/AppMonitoringService";
 import type { AnalyticsService } from "../src/core/analytics";
 
 const analyticsContextMock: AnalyticsService = {
@@ -38,11 +39,13 @@ export const withProviders = (getStory) => (
           <MemoryRouter>
             <IntlProvider messages={messages} locale={"en"}>
               <ThemeProvider theme={theme}>
-                <ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}>
+                <ConfigServiceProvider config={config}>
                   <DocumentationPanelProvider>
-                    <FeatureService features={[]}>
-                      {getStory()}
-                    </FeatureService>
+                    <AppMonitoringServiceProvider>
+                      <FeatureService features={[]}>
+                        {getStory()}
+                      </FeatureService>
+                    </AppMonitoringServiceProvider>
                   </DocumentationPanelProvider>
                 </ConfigServiceProvider>
               </ThemeProvider>

airbyte-webapp/build.gradle

@@ -71,6 +71,10 @@ task buildStorybook(type: NpmTask) {
     inputs.dir 'src'
 
     outputs.dir 'build/storybook'
+
+    environment = [
+        'NODE_OPTIONS': '--max_old_space_size=4096'
+    ]
 }
 
 task copyBuildOutput(type: Copy) {