diff --git a/airbyte-webapp-e2e-tests/build.gradle b/airbyte-webapp-e2e-tests/build.gradle index fc10a04ef1ad8e..78c39e8cc67509 100644 --- a/airbyte-webapp-e2e-tests/build.gradle +++ b/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) diff --git a/airbyte-webapp/.storybook/main.ts b/airbyte-webapp/.storybook/main.js similarity index 94% rename from airbyte-webapp/.storybook/main.ts rename to airbyte-webapp/.storybook/main.js index 9d87a917494ca5..6c9c2e02482d28 100644 --- a/airbyte-webapp/.storybook/main.ts +++ b/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"); diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx index 9d7e1e7a65057a..fe0b3523ebafc6 100644 --- a/airbyte-webapp/.storybook/withProvider.tsx +++ b/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) => ( - - - {getStory()} - + > + + + + {getStory()} + + diff --git a/airbyte-webapp/Dockerfile b/airbyte-webapp/Dockerfile index 92941248d7743e..45a5ba51cf434c 100644 --- a/airbyte-webapp/Dockerfile +++ b/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 diff --git a/airbyte-webapp/build.gradle b/airbyte-webapp/build.gradle index 8d838994841fff..5ae9d93f595603 100644 --- a/airbyte-webapp/build.gradle +++ b/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) diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json index a19b9075920d55..f6e52f19acbc73 100644 --- a/airbyte-webapp/package.json +++ b/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",