Improve Gradle build and fix storybook (#13719)

* Improve Gradle build and fix storybook

* Run all copy tasks after copyDocker

airbyte-webapp-e2e-tests/build.gradle

@@ -1,16 +1,15 @@
 plugins {
     id "base"
-    id "com.github.node-gradle.node" version "2.2.4"
+    id "com.github.node-gradle.node" version "3.3.0"
 }
 
-def nodeVersion = System.getenv('NODE_VERSION') ?: '16.13.0'
+def nodeVersion = System.getenv('NODE_VERSION') ?: '16.15.1'
 
 node {
     download = true
     version = nodeVersion
 }
 
-
 task e2etest(type: NpmTask) {
     dependsOn npmInstall
     // If the cypressWebappKey property has been set from the outside (see tools/bin/e2e_test.sh)

airbyte-webapp/.storybook/main.ts → airbyte-webapp/.storybook/main.js

@@ -9,6 +9,7 @@ module.exports = {
     "@storybook/preset-create-react-app",
     "storybook-addon-mock/register",
   ],
+  staticDirs: ["../public"],
   webpackFinal: (config) => {
     config.resolve.modules.push(process.cwd() + "/node_modules");
     config.resolve.modules.push(process.cwd() + "/src");

airbyte-webapp/.storybook/withProvider.tsx

@@ -11,6 +11,7 @@ import GlobalStyle from "../src/global-styles";
 import messages from "../src/locales/en.json";
 import { FeatureService } from "../src/hooks/services/Feature";
 import { ConfigServiceProvider, defaultConfig } from "../src/config";
+import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 import { ServicesProvider } from "../src/core/servicesProvider";
 import {
   analyticsServiceContext,
@@ -47,11 +48,13 @@ export const withProviders = (getStory) => (
                 <ConfigServiceProvider
                   defaultConfig={defaultConfig}
                   providers={[]}
-                >
-                  <FeatureService>
-                    <GlobalStyle />
-                    {getStory()}
-                  </FeatureService>
+                  >
+                  <DocumentationPanelProvider>
+                    <FeatureService>
+                      <GlobalStyle />
+                      {getStory()}
+                    </FeatureService>
+                  </DocumentationPanelProvider>
                 </ConfigServiceProvider>
               </ThemeProvider>
             </IntlProvider>

airbyte-webapp/Dockerfile

@@ -4,5 +4,4 @@ FROM ${NGINX_IMAGE} as webapp
 EXPOSE 80
 
 COPY bin/build /usr/share/nginx/html
-COPY bin/docs /usr/share/nginx/html/docs
 COPY bin/nginx/default.conf.template /etc/nginx/templates/default.conf.template

airbyte-webapp/build.gradle

@@ -5,78 +5,95 @@ plugins {
 
 def nodeVersion = System.getenv('NODE_VERSION') ?: '16.15.1'
 
+// This array should contain a path to all configs that are common to most build tasks and
+// might affect them (i.e. if any of those files change we want to rerun most tasks)
+def commonConfigs = [
+    '.env',
+    'package.json',
+    'package-lock.json',
+    'tsconfig.json',
+    '.prettierrc.js'
+]
+
 node {
     download = true
     version = nodeVersion
 }
 
 npm_run_build {
-    inputs.files fileTree('public')
-    inputs.files fileTree('src')
-    inputs.file 'package.json'
-    inputs.file 'package-lock.json'
+    inputs.files commonConfigs
+    inputs.file '.eslintrc'
+    inputs.dir 'public'
+    inputs.dir 'src'
 
-    // todo (cgardens) - the plugin seems to ignore this value when the copy command is run. ideally the output would be place in build/app.
-    outputs.dir project.buildDir
+    outputs.dir 'build/app'
 }
 
 task test(type: NpmTask) {
     dependsOn assemble
 
     args = ['run', 'test', '--', '--watchAll=false', '--silent']
-    inputs.files fileTree('src')
-    inputs.file 'package.json'
-    inputs.file 'package-lock.json'
+    inputs.files commonConfigs
+    inputs.dir 'src'
 }
 
 task licenseCheck(type: NpmTask) {
     dependsOn npmInstall
 
     args = ['run', 'license-check']
-    inputs.file 'package.json'
-    inputs.file 'package-lock.json'
+    inputs.files commonConfigs
+    inputs.file 'scripts/license-check.js'
+
+    // The licenseCheck has no outputs, thus we always treat the outpus up to date
+    // as long as the inputs have not changed
+    outputs.upToDateWhen { true }
 }
 
 task validateLinks(type: NpmTask) {
     dependsOn npmInstall
 
     args = ['run', 'validate-links']
-    inputs.file 'package.json'
-    inputs.file 'package-lock.json'
+
+    // Since the output of this task depends on availability of URLs
+    // we never want to treat it as "up-to-date" and always want to run it
+    outputs.upToDateWhen { false }
 }
 
-// Make sure to always run a license check after we installed dependencies
-npmInstall.finalizedBy licenseCheck
-// Validate all links after installing dependencies
-npmInstall.finalizedBy validateLinks
-assemble.dependsOn npm_run_build
-build.finalizedBy test
+task buildStorybook(type: NpmTask) {
+    dependsOn npmInstall
+    args = ['run', 'build:storybook']
 
-task copyBuild(type: Copy) {
-    dependsOn copyDocker
+    inputs.files commonConfigs
+    inputs.dir '.storybook'
+    inputs.dir 'public'
+    inputs.dir 'src'
 
-    from "${project.projectDir}/build"
-    into "build/docker/bin/build"
-    exclude ".docker"
-    exclude "docker"
+    outputs.dir 'build/storybook'
+}
+
+task copyBuildOutput(type: Copy) {
+    dependsOn copyDocker, npm_run_build
+
+    from "${project.projectDir}/build/app"
+    into 'build/docker/bin/build'
 }
 
 task copyDocs(type: Copy) {
-    dependsOn copyDocker
+    dependsOn copyDocker, copyBuildOutput
 
     from "${project.rootProject.projectDir}/docs/integrations"
-    into "build/docker/bin/docs/integrations"
-    //google-ads.md is blocked by Ad Blockers
+    into "build/docker/bin/build/docs/integrations"
+    // google-ads.md is blocked by Ad Blockers
     rename ('google-ads.md', 'gglad.md')
     duplicatesStrategy DuplicatesStrategy.INCLUDE
 }
 
 // Copy images that are used in .md integration documentation docs
-task copyAssets(type: Copy) {
-    dependsOn copyDocker
+task copyDocAssets(type: Copy) {
+    dependsOn copyDocker, copyBuildOutput
 
     from "${project.rootProject.projectDir}/docs/.gitbook"
-    into "build/docker/bin/docs/.gitbook"
+    into "build/docker/bin/build/docs/.gitbook"
     duplicatesStrategy DuplicatesStrategy.INCLUDE
 }
 
@@ -87,16 +104,15 @@ task copyNginx(type: Copy) {
     into "build/docker/bin/nginx"
 }
 
-copyBuild.dependsOn npm_run_build
-copyNginx.dependsOn npm_run_build
-copyDocs.dependsOn npm_run_build
-copyAssets.dependsOn npm_run_build
-assemble.dependsOn copyDocs
-copyDocker.dependsOn(npm_run_build)
+// Those tasks should be run as part of the "check" task
+check.dependsOn validateLinks, licenseCheck, test
+
+build.dependsOn buildStorybook
 
 Task dockerBuildTask = getDockerBuildTask("webapp", "$project.projectDir", "$rootProject.ext.version", "$rootProject.ext.image_tag")
-dockerBuildTask.dependsOn(copyBuild)
+dockerBuildTask.dependsOn(copyDocker)
+dockerBuildTask.dependsOn(copyBuildOutput)
 dockerBuildTask.dependsOn(copyNginx)
 dockerBuildTask.dependsOn(copyDocs)
-dockerBuildTask.dependsOn(copyAssets)
+dockerBuildTask.dependsOn(copyDocAssets)
 assemble.dependsOn(dockerBuildTask)

airbyte-webapp/package.json

@@ -7,11 +7,12 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "BUILD_PATH='./build/app' react-scripts build",
     "test": "react-scripts test",
     "test:coverage": "npm test -- --coverage --watchAll=false",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
-    "storybook": "start-storybook -p 9009 -s public --quiet",
+    "storybook": "start-storybook -p 9009 --quiet",
+    "build:storybook": "build-storybook -o 'build/storybook'",
     "lint": "eslint --ext js,ts,tsx src",
     "license-check": "node ./scripts/license-check.js",
     "generate-client": "orval",