Merge branch 'main' into snyk-upgrade-de353905732d58fe633fb009a3665e48

.buildkite/pipelines/pipeline_pull_request_test.yml

@@ -1,9 +1,72 @@
 # 🏠/.buildkite/pipelines/pipeline_pull_request_test.yml
 
 steps:
-  - agents:
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":typescript: Linting"
+    agents:
       provider: "gcp"
-    command: .buildkite/scripts/pipeline_test.sh
-    if: build.branch != "main" # We're skipping testing commits in main for now to maintain parity with previous Jenkins setup
+    env:
+      TEST_TYPE: 'lint'
+    if: build.branch != "main" # This job is triggered by the combined test and deploy docs for every PR
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TS unit tests"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:ts'
+    if: build.branch != "main"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 16"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx:16'
+    if: build.branch != "main"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 17"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx:17'
+    if: build.branch != "main"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 18"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx'
+    if: build.branch != "main"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 16"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:16'
+    if: build.branch != "main"
+    artifact_paths:
+      - "cypress/screenshots/**/*.png"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 17"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:17'
+    if: build.branch != "main"
+    artifact_paths:
+      - "cypress/screenshots/**/*.png"
+
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 18"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:18'
+    if: build.branch != "main"
     artifact_paths:
       - "cypress/screenshots/**/*.png"

.buildkite/scripts/pipeline_test.sh

@@ -2,15 +2,63 @@
 
 set -euo pipefail
 
-docker run \
-  -i --rm \
-  --env GIT_COMMITTER_NAME=test \
-  --env GIT_COMMITTER_EMAIL=test \
-  --env HOME=/tmp \
-  --user="$(id -u):$(id -g)" \
-  --volume="$(pwd):/app" \
-  --workdir=/app \
-  docker.elastic.co/eui/ci:5.3 \
-  bash -c "/opt/yarn*/bin/yarn \
-  && yarn cypress install \
-  && NODE_OPTIONS=\"--max-old-space-size=2048\" npm run test-ci"
+DOCKER_OPTIONS=(
+  -i --rm
+  --env GIT_COMMITTER_NAME=test
+  --env GIT_COMMITTER_EMAIL=test
+  --env HOME=/tmp
+  --user="$(id -u):$(id -g)"
+  --volume="$(pwd):/app"
+  --workdir=/app
+  docker.elastic.co/eui/ci:5.3
+)
+
+case $TEST_TYPE in
+  lint)
+    echo "[TASK]: Running linters"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn lint")
+    ;;
+
+  unit:ts)
+    echo "[TASK]: Running .ts and .js unit tests"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react")
+    ;;
+
+  unit:tsx:16)
+    echo "[TASK]: Running Jest .tsx tests against React 16"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react")
+    ;;
+
+  unit:tsx:17)
+    echo "[TASK]: Running Jest .tsx tests against React 17"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react")
+    ;;
+
+  unit:tsx)
+    echo "[TASK]: Running Jest .tsx tests against React 18"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=react")
+    ;;
+
+  cypress:16)
+    echo "[TASK]: Running Cypress tests against React 16"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=16")
+    ;;
+
+  cypress:17)
+    echo "[TASK]: Running Cypress tests against React 17"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=17")
+    ;;
+
+  cypress:18)
+    echo "[TASK]: Running Cypress tests against React 18"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-cypress --node-options=--max_old_space_size=2048")
+    ;;
+
+  *)
+    echo "[ERROR]: Unknown task"
+    echo "Exit code: 1"
+    exit 1
+    ;;
+esac
+
+docker run "${DOCKER_OPTIONS[@]}"

.github/config/label_commenter_config.yml

@@ -7,3 +7,18 @@ labels:
     labeled:
       issue:
         body: 👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.
+  - name: breaking change
+    labeled:
+      pr:
+        body: |
+          This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:
+          - If this PR contains **prop/API changes**:
+              - [ ] Search through Kibana for `<EuiComponent` usages ([example search](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiAccordion&type=code))
+              - [ ] In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
+          - If this PR contains **CSS changes**:
+              - [ ] Search through Kibana for the changed EUI selectors, e.g. `.euiComponent` ([example search](https://github.com/search?q=repo%3Aelastic%2Fkibana+.euiAccordion&type=code))
+              - [ ] In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
+          - 🔍 Tip: When searching through Kibana, consider excluding `**/target, **/*.snap, **/*.storyshot` files to reduce noise and only look at source code usages
+          - ⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
+              - Using a [pre-release](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/releasing-versions.md#pre-release-process) release candidate to test Kibana CI ahead of time
+              - Using [`kibana-a-la-carte`](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/testing-in-kibana.md#testing-in-the-cloud) for manual QA, and to give other Kibana teams a staging server to quickly test against

.github/pull_request_template.md

@@ -2,20 +2,27 @@
 
 Provide a detailed summary of your PR. Explain how you arrived at your solution. If it includes changes to UI elements include a screenshot or gif.
 
+If this is your first PR in the EUI repo, please ensure you've fully read through our [contributing to EUI](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui#how-to-ensure-the-timely-review-of-pull-requests) wiki guide.
+
 ## QA
 
 Remove or strikethrough items that do not apply to your PR.
 
 ### General checklist
 
-- [ ] Checked in both **light and dark** modes
-- [ ] Checked in **mobile**
-- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
-- [ ] Props have proper **autodocs** (using `@default` if default values are missing) and **[playground toggles](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/playgrounds.md)**
-- [ ] Added **[documentation](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting)**
-- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for any docs examples
-- [ ] Added or updated **[jest](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/unit-testing.md) and [cypress](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/cypress-testing.md) tests**
-- [ ] Checked for **breaking changes** and labeled appropriately
-- [ ] Checked for **accessibility** including keyboard-only and screenreader modes
-- [ ] Updated the **[Figma](https://www.figma.com/community/file/964536385682658129)** library counterpart
-- [ ] A **[changelog](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/changelogs.md)** entry exists and is marked appropriately
+- Browser QA
+    - [ ] Checked in both **light and dark** modes
+    - [ ] Checked in **mobile**
+    - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
+    - [ ] Checked for **accessibility** including keyboard-only and screenreader modes
+- Docs site QA
+    - [ ] Added **[documentation](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting)**
+    - [ ] Props have proper **autodocs** (using `@default` if default values are missing) and **[playground toggles](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/playgrounds.md)**
+    - [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for any docs examples
+- Code quality checklist
+    - [ ] Added or updated **[jest](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/unit-testing.md) and [cypress](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/cypress-testing.md) tests**
+- Release checklist
+    - [ ] A **[changelog](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/changelogs.md)** entry exists and is marked appropriately.
+    - [ ] If applicable, added the **breaking change** issue label (and filled out the breaking change checklist)
+- Designer checklist
+    - [ ] Updated the **[Figma](https://www.figma.com/community/file/964536385682658129)** library counterpart

.github/workflows/community_contribution.yml

@@ -0,0 +1,48 @@
+name: "Community contribution"
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+jobs:
+  community-pr-message:
+    env:
+      USER_LOGIN: ${{ github.event.pull_request.user.login }}
+      IS_ORG_MEMBER: "" # https://github.com/github/vscode-github-actions/issues/47
+    runs-on: ubuntu-latest
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#permissions
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: "Check for org membership"
+        # https://docs.github.com/en/rest/orgs/members?apiVersion=2022-11-28#check-organization-membership-for-a-user
+        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#example-of-writing-an-environment-variable-to-github_env
+        run: |
+          DATA=$(
+            curl -L -i -w "%{http_code}" \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.EUI_COMMUNITY_PR }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/orgs/elastic/members/"$USER_LOGIN"
+          )
+
+          HTTP_CODE=$(echo "$DATA" | awk '/([0-9]{3})$/{print}')
+          echo "IS_ORG_MEMBER=$HTTP_CODE" >> "$GITHUB_ENV"
+      - name: "Add comment to community pull requests"
+        uses: actions/github-script@v6
+        if: ${{ env.IS_ORG_MEMBER != '204' }}
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?",
+            });
+
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['community contribution']
+            });

.github/workflows/label_commenter.yml

@@ -3,10 +3,13 @@ name: Auto-respond to issues with comments based on labels
 on:
   issues:
     types: [labeled]
+  pull_request_target:
+    types: [labeled]
 
 permissions:
   contents: read
   issues: write
+  pull-requests: write
 
 jobs:
   comment:

.gitignore

@@ -7,10 +7,12 @@ test/failure-screenshots/**/*.png
 cypress/screenshots
 cypress/videos
 
+storybook-static/
 coverage/
 reports/
 .nyc_output/
 tmp/
+docs/
 dist/
 lib/
 es/

.storybook/main.ts

@@ -26,7 +26,6 @@ const config: StorybookConfig = {
       use: [
         {
           loader: require.resolve('babel-loader'),
-          options: { plugins: ['@emotion/babel-plugin'] },
         },
       ],
     });

.storybook/preview.tsx

@@ -10,6 +10,7 @@
 
 import React from 'react';
 import type { Preview } from '@storybook/react';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 /*
  * Preload all EuiIcons - Storybook does not support dynamic icon loading
@@ -37,10 +38,20 @@ import { writingModeStyles } from './writing_mode.styles';
 // once all EUI components are converted to Emotion
 import '../dist/eui_theme_light.css';
 
+/**
+ * Prop controls
+ */
+
+import type { CommonProps } from '../src/components/common';
+import { hideStorybookControls } from './utils';
+
 const preview: Preview = {
   decorators: [
     (Story, context) => (
-      <EuiProvider colorMode={context.globals.colorMode}>
+      <EuiProvider
+        colorMode={context.globals.colorMode}
+        {...(context.componentId === 'euiprovider' && context.args)}
+      >
         <div
           css={[
             writingModeStyles.writingMode,
@@ -85,6 +96,7 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
+    options: { showPanel: true }, // default to showing the controls panel
     controls: {
       expanded: true,
       sort: 'requiredFirst',
@@ -93,15 +105,19 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    viewport: {
+      viewports: MINIMAL_VIEWPORTS,
+    },
   },
   // Due to CommonProps, these props appear on almost every Story, but generally
   // aren't super useful to test - let's disable them by default and (if needed)
-  // individual stories can re-enable them
-  argTypes: {
-    css: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-test-subj': { table: { disable: true } },
-  },
+  // individual stories can re-enable them, e.g. by passing
+  // `argTypes: { 'data-test-subj': { table: { disable: false } } }`
+  argTypes: hideStorybookControls<CommonProps>([
+    'css',
+    'className',
+    'data-test-subj',
+  ]),
 };
 
 export default preview;