Merge branch 'main' into addActionId

Author: yyfamazon

.eslintrc.js

@@ -379,6 +379,7 @@ module.exports = {
      */
     {
       files: [
+        '**/*.stories.tsx',
         'test/*/config.ts',
         'test/*/config_open.ts',
         'test/*/{tests,test_suites,apis,apps}/**/*',

changelogs/fragments/9651.yml

@@ -0,0 +1,2 @@
+fix:
+- Data source opensearch client honors the timeout settings in yaml file ([#9651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9651))

changelogs/fragments/9697.yml

@@ -0,0 +1,2 @@
+feat:
+- Adding back storybook ([#9697](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9697))

docs/_sidebar.md

@@ -129,6 +129,7 @@
     - [Osd pm](../packages/osd-pm/README.md)
     - [Osd spec to console](../packages/osd-spec-to-console/README.md)
     - [Osd std](../packages/osd-std/README.md)
+    - [Osd storybook](../packages/osd-storybook/README.md)
     - [Osd stylelint config](../packages/osd-stylelint-config/README.md)
     - [Osd stylelint plugin stylelint](../packages/osd-stylelint-plugin-stylelint/README.md)
     - [Osd telemetry tools](../packages/osd-telemetry-tools/README.md)

package.json

@@ -82,6 +82,7 @@
     "docs:generateDevDocs": "scripts/use_node scripts/generate_docs_sidebar.js",
     "osd:bootstrap": "scripts/use_node scripts/build_ts_refs && scripts/use_node scripts/register_git_hook",
     "spec_to_console": "scripts/use_node scripts/spec_to_console",
+    "storybook": "node scripts/storybook",
     "pkg-version": "scripts/use_node -e \"console.log(require('./package.json').version)\"",
     "release_note:generate": "scripts/use_node scripts/generate_release_note",
     "cypress:run-without-security": "env TZ=America/Los_Angeles NO_COLOR=1 cypress run --env SECURITY_ENABLED=false",
@@ -108,7 +109,7 @@
     "**/@babel/helpers": "^7.27.0",
     "**/@babel/runtime": "^7.27.0",
     "**/@babel/runtime-corejs3": "^7.27.0",
-    "**/@babel/traverse": "^7.23.2",
+    "**/@babel/traverse": "^7.27.0",
     "**/@cypress/request": "^3.0.0",
     "**/@types/node": "~20.10.5",
     "**/ansi-regex": "^5.0.1",
@@ -318,6 +319,7 @@
     "@osd/optimizer": "1.0.0",
     "@osd/plugin-generator": "1.0.0",
     "@osd/pm": "1.0.0",
+    "@osd/storybook": "1.0.0",
     "@osd/stylelint-config": "1.0.0",
     "@osd/stylelint-plugin-stylelint": "1.0.0",
     "@osd/telemetry-tools": "1.0.0",
@@ -405,6 +407,7 @@
     "@types/testing-library__jest-dom": "^5.14.2",
     "@types/tough-cookie": "^4.0.1",
     "@types/type-detect": "^4.0.1",
+    "@types/unist": "^3.0.3",
     "@types/uuid": "^3.4.4",
     "@types/vinyl": "^2.0.4",
     "@types/vinyl-fs": "^2.4.11",

packages/osd-optimizer/src/worker/webpack.config.ts

@@ -222,6 +222,9 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
 
             // Don't attempt to look into release artifacts of the plugins
             /[\/\\]plugins[\/\\][^\/\\]+[\/\\]build[\/\\]/,
+
+            // exclude stories
+            /\.stories\.(js|jsx|ts|tsx)$/,
           ],
           use: {
             loader: 'babel-loader',

packages/osd-storybook/README.md

@@ -0,0 +1,53 @@
+# OpenSearch Dashboards Storybook
+
+This package provides ability to add [Storybook](https://storybook.js.org/) to any OpenSearch Dashboards plugin.
+
+- [OpenSearch Dashboards Storybook](#opensearch-dashboards-storybook)
+  - [Setup Instructions](#setup-instructions)
+  - [Customizing configuration](#customizing-configuration)
+
+## Setup Instructions
+
+- Add a `.storybook/main.js` configuration file to your plugin. For example, create a file at
+  `src/plugins/<plugin>/.storybook/main.js`, with the following contents:
+
+  ```js
+  module.exports = require('@osd/storybook').defaultConfig;
+  ```
+
+- Add a `.storybook/preview.ts` file to your plugin, with the following contents:
+
+  ```js
+  // find the correct path to these css files
+  import '../../../../packages/osd-ui-shared-deps/target/osd-ui-shared-deps.css';
+  import '../../../../packages/osd-ui-shared-deps/target/osd-ui-shared-deps.v7.light.css';
+
+  export default {
+    parameters: {},
+  };
+  ```
+
+- Add your plugin alias to `src/dev/storybook/aliases.ts` config.
+- Create sample Storybook stories. For example, in your plugin create a file at
+  `src/plugins/<plugin>/public/components/hello_world/hello_world.stories.tsx` with
+  the following [Component Story Format](https://storybook.js.org/docs/react/api/csf) contents:
+
+  ```jsx
+  import { MyComponent } from './my_component';
+
+  export default {
+    component: MyComponent,
+    title: 'Path/In/Side/Navigation/ToComponent',
+  };
+
+  export function Example() {
+    return <MyComponent />;
+  }
+  ```
+
+- Launch Storybook with `yarn storybook <plugin>`, or build a static site with `yarn storybook --site <plugin>`.
+
+## Customizing configuration
+
+The `defaultConfig` object provided by the @osd/storybook package should be all you need to get running, but you can
+override this in your .storybook/main.js. Using [Storybook's configuration options](https://storybook.js.org/docs/react/configure/overview).

packages/osd-storybook/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { defaultConfig } from './lib/default_config';
+export { runStorybookCli } from './lib/run_storybook_cli';

packages/osd-storybook/lib/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { resolve } from 'path';
+import { REPO_ROOT as OPENSEARCH_DASHBOARDS_ROOT } from '@osd/dev-utils';
+
+export const REPO_ROOT = OPENSEARCH_DASHBOARDS_ROOT;
+export const ASSET_DIR = resolve(OPENSEARCH_DASHBOARDS_ROOT, 'built_assets/storybook');

packages/osd-storybook/lib/default_config.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { StorybookConfig } from '@storybook/core-common';
+
+export const defaultConfig: StorybookConfig = {
+  addons: [
+    '@osd/storybook/preset',
+    '@storybook/addon-knobs',
+    '@storybook/addon-essentials',
+    '@storybook/addon-postcss',
+  ],
+  core: {
+    builder: 'webpack4',
+  },
+  stories: ['../**/*.stories.tsx'],
+  typescript: {
+    reactDocgen: false,
+  },
+  webpackFinal: async (config) => {
+    // Configure PostCSS
+    config.module?.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [
+                'postcss-flexbugs-fixes',
+                [
+                  'autoprefixer',
+                  {
+                    flexbox: 'no-2009',
+                  },
+                ],
+              ],
+            },
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};