Fix for issue #8869

Signed-off-by: snehaljos <joyalsnehal3421@gmail.com>
2022-01-17 21:45:54 +05:30
parent f869d916a8
commit 30b67162b3
7 changed files with 1 additions and 1 deletions
@@ -0,0 +1,86 @@
+import {
+  AlertApiForwarder,
+  ErrorAlerter,
+  ErrorApiForwarder,
+  GithubAuth,
+  GitlabAuth,
+  GoogleAuth,
+  OAuth2,
+  OAuthRequestManager,
+  OktaAuth,
+  Auth0Auth,
+  ConfigReader,
+  LocalStorageFeatureFlags,
+} from '@backstage/core-app-api';
+
+import {
+  alertApiRef,
+  errorApiRef,
+  githubAuthApiRef,
+  gitlabAuthApiRef,
+  googleAuthApiRef,
+  identityApiRef,
+  oauth2ApiRef,
+  oauthRequestApiRef,
+  oktaAuthApiRef,
+  auth0AuthApiRef,
+  configApiRef,
+  featureFlagsApiRef,
+} from '@backstage/core-plugin-api';
+
+const configApi = new ConfigReader({});
+const featureFlagsApi = new LocalStorageFeatureFlags();
+const alertApi = new AlertApiForwarder();
+const errorApi = new ErrorAlerter(alertApi, new ErrorApiForwarder());
+const identityApi = {
+  getUserId: () => 'guest',
+  getProfile: () => ({ email: 'guest@example.com' }),
+  getIdToken: () => undefined,
+  signOut: async () => {},
+};
+const oauthRequestApi = new OAuthRequestManager();
+const googleAuthApi = GoogleAuth.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const githubAuthApi = GithubAuth.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const gitlabAuthApi = GitlabAuth.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const oktaAuthApi = OktaAuth.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const auth0AuthApi = Auth0Auth.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const oauth2Api = OAuth2.create({
+  apiOrigin: 'http://localhost:7007',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+
+export const apis = [
+  [configApiRef, configApi],
+  [featureFlagsApiRef, featureFlagsApi],
+  [alertApiRef, alertApi],
+  [errorApiRef, errorApi],
+  [identityApiRef, identityApi],
+  [oauthRequestApiRef, oauthRequestApi],
+  [googleAuthApiRef, googleAuthApi],
+  [githubAuthApiRef, githubAuthApi],
+  [gitlabAuthApiRef, gitlabAuthApi],
+  [oktaAuthApiRef, oktaAuthApi],
+  [auth0AuthApiRef, auth0AuthApi],
+  [oauth2ApiRef, oauth2Api],
+];
@@ -0,0 +1,85 @@
+const path = require('path');
+const WebpackPluginFailBuildOnWarning = require('./webpack-plugin-fail-build-on-warning');
+
+/**
+ * This set of stories are the ones that we publish to backstage.io.
+ */
+const BACKSTAGE_CORE_STORIES = [
+  'packages/core-components',
+  'plugins/org',
+  'plugins/search',
+  'plugins/home',
+];
+
+module.exports = ({ args }) => {
+  // Calling storybook with no args causes our default list of stories to be used.
+  // This set of stories are the ones that we publish to backstage.io
+  //
+  // If it's called with args, each arg should be the path to a package that we will
+  // show the stories from, for example `yarn storybook plugins/catalog`.
+
+  const rootPath = '../../';
+  const storiesSrcGlob = 'src/**/*.stories.tsx';
+
+  const getStoriesPath = package =>
+    path.posix.join(rootPath, package, storiesSrcGlob);
+
+  const packages = args.length === 0 ? BACKSTAGE_CORE_STORIES : args;
+  const stories = packages.map(getStoriesPath);
+
+  return {
+    stories,
+    addons: [
+      '@storybook/addon-a11y',
+      '@storybook/addon-actions',
+      '@storybook/addon-links',
+      '@storybook/addon-storysource',
+      'storybook-dark-mode/register',
+    ],
+    webpackFinal: async config => {
+      // Mirror config in packages/cli/src/lib/bundler
+      config.resolve.mainFields = ['browser', 'module', 'main'];
+
+      // Remove the default babel-loader for js files, we're using sucrase instead
+      const [jsLoader] = config.module.rules.splice(0, 1);
+      if (!jsLoader.use[0].loader.includes('babel-loader')) {
+        throw new Error(
+          `Unexpected loader removed from storybook config, ${jsLoader.use[0].loader}`,
+        );
+      }
+
+      config.resolve.extensions.push('.ts', '.tsx');
+
+      config.module.rules.push(
+        {
+          test: /\.(tsx?)$/,
+          exclude: /node_modules/,
+          loader: require.resolve('@sucrase/webpack-loader'),
+          options: {
+            transforms: ['typescript', 'jsx', 'react-hot-loader'],
+          },
+        },
+        {
+          test: /\.(jsx?|mjs|cjs)$/,
+          exclude: /node_modules/,
+          loader: require.resolve('@sucrase/webpack-loader'),
+          options: {
+            transforms: ['jsx', 'react-hot-loader'],
+          },
+        },
+      );
+
+      // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
+      config.plugins = config.plugins.filter(
+        ({ constructor }) => constructor.name !== 'ProgressPlugin',
+      );
+
+      // Fail storybook build on CI if there are webpack warnings.
+      if (process.env.CI) {
+        config.plugins.push(new WebpackPluginFailBuildOnWarning());
+      }
+
+      return config;
+    },
+  };
+};
@@ -0,0 +1,36 @@
+import React from 'react';
+import { addDecorator, addParameters } from '@storybook/react';
+import { lightTheme, darkTheme } from '@backstage/theme';
+import { CssBaseline, ThemeProvider } from '@material-ui/core';
+import { useDarkMode } from 'storybook-dark-mode';
+import { apis } from './apis';
+
+import { Content, AlertDisplay } from '@backstage/core-components';
+import { TestApiProvider } from '@backstage/test-utils';
+
+addDecorator(story => (
+  <TestApiProvider apis={apis}>
+    <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
+      <CssBaseline>
+        <AlertDisplay />
+        <Content>{story()}</Content>
+      </CssBaseline>
+    </ThemeProvider>
+  </TestApiProvider>
+));
+
+addParameters({
+  darkMode: {
+    // Set the initial theme
+    current: 'light',
+  },
+  layout: 'fullscreen',
+});
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Plugins', 'Layout', 'Navigation'],
+    },
+  },
+};
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * When building storybook, we can have warnings which may cause issues in the future. One of the example case is
+ * https://github.com/backstage/backstage/issues/718. To make sure new warnings are not introduced with new PRs, we
+ * want to fail CI builds if there are warnings when building storybook.
+ *
+ * This webpack plugin makes sure the CI builds fail on Webpack warnings. We also have an allowlist of warnings here
+ * which we think are non-critical.
+ *
+ * Note that this implementation will not detect other warnings emitted by storybook build that are separate from
+ * Webpack. A better solution over this plugin should be preferred, possibly on Storybook level (CLI options etc.)
+ *
+ * The case with #718 is caused because we are using `ts-loader` for `webpack` to load all our JS/TS files, but we
+ * have disabled type checking during build. This is done by setting `transpileOnly` to `true` in storybook/main.js
+ * and it improves the Storybook build speed. Because of this, Webpack emits warnings when we try to re-export types.
+ * Reference: https://github.com/TypeStrong/ts-loader#transpileonly
+ */
+class WebpackPluginFailBuildOnWarning {
+  // Ignore the following warnings in the Webpack build.
+  warningsAllowlist = new Set([
+    'AssetsOverSizeLimitWarning',
+    'EntrypointsOverSizeLimitWarning',
+    'NoAsyncChunksWarning',
+  ]);
+
+  /* Entry point for the Webpack plugin. */
+  apply(compiler) {
+    // Invoke plugin logic when Webpack build is 'done'.
+    compiler.hooks.done.tap('FailBuildOnWarning', this.execute.bind(this));
+  }
+
+  execute(stats) {
+    // All the compilation warnings are stored in stats.compilation.warnings
+    let warnings = stats.compilation.warnings;
+    if (warnings.length > 0) {
+      // Throw error if there are unexpected warnings.
+      for (let warning of warnings) {
+        if (!this.warningsAllowlist.has(warning.name)) {
+          process.on('beforeExit', () => {
+            console.log(
+              `You have some unexpected warning(s) in your webpack build. Exiting process as error.`,
+            );
+            process.exit(1);
+          });
+          // No need to go over the rest of warnings from here.
+          break;
+        }
+      }
+    }
+  }
+}
+
+module.exports = WebpackPluginFailBuildOnWarning;
@@ -0,0 +1,36 @@
+# storybook
+
+## 0.2.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@0.6.0
+  - @backstage/test-utils@0.2.3
+  - @backstage/core-app-api@0.5.0
+
+## 0.2.2-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@0.6.0-next.0
+  - @backstage/core-app-api@0.5.0-next.0
+  - @backstage/test-utils@0.2.3-next.0
+
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/test-utils@0.2.2
+  - @backstage/core-plugin-api@0.5.0
+  - @backstage/core-app-api@0.4.0
+
+## 0.2.0
+
+### Patch Changes
+
+- Updated dependencies [ae5983387]
+- Updated dependencies [0d4459c08]
+  - @backstage/theme@0.2.0
@@ -0,0 +1,17 @@
+# storybook
+
+This package provides a Storybook build for Backstage. See https://backstage.io/storybook/.
+
+## Usage
+
+To run the storybook locally, call `yarn storybook` in repo root. This will show the default set of stories that we publish to https://backstage.io/storybook
+
+If you want to show stories other than the default set, you can pass one or more package paths as an argument when calling storybook, for example:
+
+```sh
+yarn storybook plugins/search
+```
+
+## Why is this not part of `@backstage/core-components`?
+
+This separate storybook package exists because of dependency conflicts with `@backstage/cli`. It uses `nohoist` to avoid the conflicts, and since you can only use that in private packages it has to be separated out of `@backstage/core-components`.
@@ -0,0 +1,27 @@
+{
+  "name": "storybook",
+  "version": "0.2.2",
+  "description": "Storybook build for components package",
+  "private": true,
+  "scripts": {
+    "start": "start-storybook -p 6006",
+    "build-storybook": "build-storybook --output-dir dist"
+  },
+  "dependencies": {
+    "@backstage/theme": "^0.2.0",
+    "@backstage/test-utils": "^0.2.3",
+    "@backstage/core-app-api": "^0.5.0",
+    "@backstage/core-plugin-api": "^0.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.3.4",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/addon-storysource": "^6.1.11",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/react": "^6.3.6",
+    "storybook-dark-mode": "^1.0.3"
+  }
+}