Skip to content

Strongly typed EUI theme for styled-components#90106

Merged
sorenlouv merged 4 commits intoelastic:masterfrom
sorenlouv:strongly-typed-eui-theme
Feb 9, 2021
Merged

Strongly typed EUI theme for styled-components#90106
sorenlouv merged 4 commits intoelastic:masterfrom
sorenlouv:strongly-typed-eui-theme

Conversation

@sorenlouv
Copy link
Copy Markdown
Contributor

@sorenlouv sorenlouv commented Feb 2, 2021

Use typed euiStyled when using styled-components.

typescript-styled.mp4

@sorenlouv sorenlouv added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Feb 2, 2021
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/apm-ui (Team:apm)

@sorenlouv sorenlouv added v7.12.0 release_note:skip Skip the PR/issue when compiling release notes labels Feb 2, 2021
@sorenlouv
Copy link
Copy Markdown
Contributor Author

retest

@sorenlouv
Copy link
Copy Markdown
Contributor Author

sorenlouv commented Feb 3, 2021

Anyone know why I get this a typescript error after importing the eui dark theme in the declaration file for eui?
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';

cc @chandlerprall

image

@smith
Copy link
Copy Markdown
Contributor

smith commented Feb 3, 2021

Do we need this if we import euiStyled from kibana-react/common? If you import that instead of the stock styled everything should be typed with the EUI theme variables.

https://github.com/elastic/kibana/blob/master/src/plugins/kibana_react/common/eui_styled_components.tsx#L47

https://github.com/elastic/kibana/blob/master/src/plugins/kibana_react/common/index.ts#L9

@sorenlouv
Copy link
Copy Markdown
Contributor Author

Do we need this if we import euiStyled from kibana-react/common?

Oh! Didn't know about that. I'll try that instead.

@sorenlouv sorenlouv requested a review from a team February 3, 2021 09:53
@sorenlouv sorenlouv requested a review from a team as a code owner February 3, 2021 09:53
@botelastic botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Feb 3, 2021
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/uptime (Team:uptime)

@sorenlouv
Copy link
Copy Markdown
Contributor Author

retest

@sorenlouv
Copy link
Copy Markdown
Contributor Author

@elasticmachine merge upstream

@sorenlouv sorenlouv force-pushed the strongly-typed-eui-theme branch from 1997ea3 to 495a4cb Compare February 4, 2021 20:46
Copy link
Copy Markdown
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@sorenlouv
Copy link
Copy Markdown
Contributor Author

retest

@sorenlouv
Copy link
Copy Markdown
Contributor Author

@elasticmachine merge upstream

Copy link
Copy Markdown
Contributor

@cauemarcondes cauemarcondes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just a small comment.

@sorenlouv
Copy link
Copy Markdown
Contributor Author

retest

@kibanamachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky


Test Failures

Kibana Pipeline / general / X-Pack Accessibility Tests.x-pack/test/accessibility/apps/uptime·ts.uptime overview alert popover controls

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 4 times on tracked branches: https://github.com/elastic/kibana/issues/90555

[00:00:00]       │
[00:01:28]         └-: uptime
[00:01:28]           └-> "before all" hook for "overview page"
[00:01:28]           └-> "before all" hook for "overview page"
[00:01:28]             │ info [uptime/blank] Loading "mappings.json"
[00:01:28]             │ info [uptime/blank] Loading "data.json"
[00:01:28]             │ info [o.e.c.m.MetadataCreateIndexService] [kibana-ci-immutable-ubuntu-16-tests-xxl-1612821509278351649] [heartbeat-8-generated-test] creating index, cause [api], templates [], shards [1]/[1]
[00:01:28]             │ info [uptime/blank] Created index "heartbeat-8-generated-test"
[00:01:28]             │ debg [uptime/blank] "heartbeat-8-generated-test" settings undefined
[00:01:29]           └-> overview page
[00:01:29]             └-> "before each" hook: global before each for "overview page"
[00:01:29]             └-> "before each" hook for "overview page"
[00:01:29]               │ debg TestSubjects.exists(uptimeSettingsToOverviewLink)
[00:01:29]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=0
[00:01:29]               │ debg --- retry.tryForTime error: [data-test-subj="uptimeSettingsToOverviewLink"] is not displayed
[00:01:29]               │ debg navigating to uptime url: http://localhost:61241/app/uptime
[00:01:29]               │ debg navigate to: http://localhost:61241/app/uptime
[00:01:30]               │ debg browser[INFO] http://localhost:61241/app/uptime?_t=1612823653034 341 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.
[00:01:30]               │
[00:01:30]               │ debg browser[INFO] http://localhost:61241/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:01:30]               │ debg ... sleep(700) start
[00:01:30]               │ debg ... sleep(700) end
[00:01:30]               │ debg returned from get, calling refresh
[00:01:31]               │ERROR browser[SEVERE] http://localhost:61241/40216/bundles/core/core.entry.js 12:158376 TypeError: Failed to fetch
[00:01:31]               │          at fetch_Fetch.fetchResponse (http://localhost:61241/40216/bundles/core/core.entry.js:6:32451)
[00:01:31]               │          at async interceptResponse (http://localhost:61241/40216/bundles/core/core.entry.js:6:28637)
[00:01:31]               │          at async http://localhost:61241/40216/bundles/core/core.entry.js:6:31117
[00:01:31]               │ debg browser[INFO] http://localhost:61241/app/uptime?_t=1612823653034 341 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.
[00:01:31]               │
[00:01:31]               │ debg browser[INFO] http://localhost:61241/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:01:32]               │ debg currentUrl = http://localhost:61241/app/uptime
[00:01:32]               │          appUrl = http://localhost:61241/app/uptime
[00:01:32]               │ debg TestSubjects.find(kibanaChrome)
[00:01:32]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:01:32]               │ debg ... sleep(501) start
[00:01:32]               │ debg ... sleep(501) end
[00:01:33]               │ debg in navigateTo url = http://localhost:61241/app/uptime
[00:01:33]               │ debg TestSubjects.exists(statusPageContainer)
[00:01:33]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:01:35]               │ERROR browser[SEVERE] http://localhost:61241/40216/bundles/plugin/uptime/uptime.chunk.1.js 2:18780 "API /api/uptime/monitor/list is not returning expected response, Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.issuer.distinguished_name\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.subject.distinguished_name\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.serial_number\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.public_key_algorithm\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.signature_algorithm\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.not_after\",Invalid value \"undefined\" supplied to \"summaries.state.summaryPings.tls.server.x509.not_before\" for response" Object
[00:01:35]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:01:36]               │ debg isGlobalLoadingIndicatorVisible
[00:01:36]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:01:36]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:01:37]               │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:01:38]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:01:38]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:01:38]               │ debg TestSubjects.exists(uptimeOverviewPage)
[00:01:38]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeOverviewPage"]') with timeout=2000
[00:01:38]             └- ✓ pass  (629ms) "uptime overview page"
[00:01:38]           └-> overview page with expanded monitor detail
[00:01:38]             └-> "before each" hook: global before each for "overview page with expanded monitor detail"
[00:01:38]             └-> "before each" hook for "overview page with expanded monitor detail"
[00:01:38]               │ debg TestSubjects.exists(uptimeSettingsToOverviewLink)
[00:01:38]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=0
[00:01:38]               │ debg TestSubjects.click(uptimeSettingsToOverviewLink)
[00:01:38]               │ debg Find.clickByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=10000
[00:01:38]               │ debg Find.findByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=10000
[00:01:38]               │ debg isGlobalLoadingIndicatorVisible
[00:01:38]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:01:38]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:01:40]               │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:01:40]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:01:40]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:01:40]               │ debg TestSubjects.exists(uptimeOverviewPage)
[00:01:40]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeOverviewPage"]') with timeout=2000
[00:01:41]             │ debg TestSubjects.click(xpack.uptime.monitorList.a11yTestMonitor.expandMonitorDetail)
[00:01:41]             │ debg Find.clickByCssSelector('[data-test-subj="xpack.uptime.monitorList.a11yTestMonitor.expandMonitorDetail"]') with timeout=10000
[00:01:41]             │ debg Find.findByCssSelector('[data-test-subj="xpack.uptime.monitorList.a11yTestMonitor.expandMonitorDetail"]') with timeout=10000
[00:01:41]             │ debg TestSubjects.click(xpack.uptime.monitorList.actionsPopover.a11yTestMonitor)
[00:01:41]             │ debg Find.clickByCssSelector('[data-test-subj="xpack.uptime.monitorList.actionsPopover.a11yTestMonitor"]') with timeout=10000
[00:01:41]             │ debg Find.findByCssSelector('[data-test-subj="xpack.uptime.monitorList.actionsPopover.a11yTestMonitor"]') with timeout=10000
[00:01:41]             └- ✓ pass  (780ms) "uptime overview page with expanded monitor detail"
[00:01:41]           └-> overview alert popover controls
[00:01:41]             └-> "before each" hook: global before each for "overview alert popover controls"
[00:01:41]             └-> "before each" hook for "overview alert popover controls"
[00:01:41]               │ debg TestSubjects.exists(uptimeSettingsToOverviewLink)
[00:01:41]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=0
[00:01:41]               │ debg TestSubjects.click(uptimeSettingsToOverviewLink)
[00:01:41]               │ debg Find.clickByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=10000
[00:01:41]               │ debg Find.findByCssSelector('[data-test-subj="uptimeSettingsToOverviewLink"]') with timeout=10000
[00:01:41]               │ debg isGlobalLoadingIndicatorVisible
[00:01:41]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:01:41]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:01:43]               │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:01:43]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:01:43]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:01:43]               │ debg TestSubjects.exists(uptimeOverviewPage)
[00:01:43]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="uptimeOverviewPage"]') with timeout=2000
[00:01:44]             │ debg TestSubjects.click(xpack.uptime.alertsPopover.toggleButton)
[00:01:44]             │ debg Find.clickByCssSelector('[data-test-subj="xpack.uptime.alertsPopover.toggleButton"]') with timeout=10000
[00:01:44]             │ debg Find.findByCssSelector('[data-test-subj="xpack.uptime.alertsPopover.toggleButton"]') with timeout=10000
[00:01:44]             │ info Taking screenshot "/dev/shm/workspace/parallel/24/kibana/x-pack/test/functional/screenshots/failure/uptime overview alert popover controls.png"
[00:01:44]             │ info Current URL is: http://localhost:61241/app/uptime
[00:01:44]             │ info Saving page source to: /dev/shm/workspace/parallel/24/kibana/x-pack/test/functional/failure_debug/html/uptime overview alert popover controls.html
[00:01:44]             └- ✖ fail: uptime overview alert popover controls
[00:01:44]             │      Error: a11y report:
[00:01:44]             │ 
[00:01:44]             │ VIOLATION
[00:01:44]             │   [aria-hidden-focus]: Ensures aria-hidden elements do not contain focusable elements
[00:01:44]             │     Help: https://dequeuniversity.com/rules/axe/4.0/aria-hidden-focus?application=axeAPI
[00:01:44]             │     Elements:
[00:01:44]             │       - #kibana-body
[00:01:44]             │       - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(1)
[00:01:44]             │       - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(2)
[00:01:44]             │       - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(4)
[00:01:44]             │       at Accessibility.testAxeReport (/dev/shm/workspace/parallel/24/kibana/test/accessibility/services/a11y/a11y.ts:76:15)
[00:01:44]             │       at Accessibility.testAppSnapshot (/dev/shm/workspace/parallel/24/kibana/test/accessibility/services/a11y/a11y.ts:49:18)
[00:01:44]             │       at runMicrotasks (<anonymous>)
[00:01:44]             │       at processTicksAndRejections (internal/process/task_queues.js:93:5)
[00:01:44]             │       at Context.<anonymous> (test/accessibility/apps/uptime.ts:62:7)
[00:01:44]             │       at Object.apply (/dev/shm/workspace/parallel/24/kibana/packages/kbn-test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16)
[00:01:44]             │ 
[00:01:44]             │ 

Stack Trace

Error: a11y report:

VIOLATION
  [aria-hidden-focus]: Ensures aria-hidden elements do not contain focusable elements
    Help: https://dequeuniversity.com/rules/axe/4.0/aria-hidden-focus?application=axeAPI
    Elements:
      - #kibana-body
      - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(1)
      - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(2)
      - div[data-focus-guard="true"][data-aria-hidden="true"][aria-hidden="true"]:nth-child(4)
    at Accessibility.testAxeReport (/dev/shm/workspace/parallel/24/kibana/test/accessibility/services/a11y/a11y.ts:76:15)
    at Accessibility.testAppSnapshot (/dev/shm/workspace/parallel/24/kibana/test/accessibility/services/a11y/a11y.ts:49:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at Context.<anonymous> (test/accessibility/apps/uptime.ts:62:7)
    at Object.apply (/dev/shm/workspace/parallel/24/kibana/packages/kbn-test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16)

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 5.2MB 5.2MB -8.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
apm 22.9KB 23.1KB +238.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@sorenlouv sorenlouv merged commit 451d081 into elastic:master Feb 9, 2021
@sorenlouv sorenlouv deleted the strongly-typed-eui-theme branch February 9, 2021 07:26
jloleysens added a commit to jloleysens/kibana that referenced this pull request Feb 9, 2021
…timeline-and-rollover-info

* 'master' of github.com:elastic/kibana: (47 commits)
  [Fleet] Use TS project references (elastic#87574)
  before/beforeEach clean up (elastic#90663)
  [Vega] user should be able to set a specific tilemap service using the mapStyle property (elastic#88440)
  [Security Solution][Case] ServiceNow SIR Connector (elastic#88655)
  [Search Sessions] Enable extend from management (elastic#90558)
  [ILM] Delete phase redesign (rework) (elastic#90291)
  [APM-UI][E2E] use withGithubStatus step (elastic#90651)
  Add folding in kb-monaco and update some viewers (elastic#90152)
  [Grok Debugger] Changed test to wait for grok debugger container to exist to fix test flakiness (elastic#90543)
  Strongly typed EUI theme for styled-components (elastic#90106)
  Fix vega renovate label (elastic#90591)
  [Uptime] Migrate to TypeScript project references (elastic#90510)
  [Monitoring] Migrate data source for legacy alerts to monitoring data directly (elastic#87377)
  [Upgrade Assistant] Add A11y Tests (elastic#90265)
  [Time to Visualize] Adds functional tests for linking/unlinking panel from embeddable library (elastic#89612)
  [dev-utils/ship-ci-stats] fail when CI stats is down (elastic#90678)
  chore(NA): remove write permissions on Bazel remote cache for PRs (elastic#90652)
  chore(NA): move bazel workspace status from bash script into nodejs executable (elastic#90560)
  Use default ES distribution for functional tests (elastic#88737)
  [Alerts] Jira: Disallow labels with spaces (elastic#90548)
  ...

# Conflicts:
#	x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
#	x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/lib/absolute_timing_to_relative_timing.test.ts
#	x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/lib/absolute_timing_to_relative_timing.ts
@sorenlouv sorenlouv added the auto-backport Deprecated - use backport:version if exact versions are needed label Feb 9, 2021
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Feb 9, 2021
* Strongly typed EUI theme for styled-components

use euiStyled

fix tsc issue

* use relative imports

* remove redundant types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@kibanamachine
Copy link
Copy Markdown
Contributor

Backport result

{"level":"info","message":"POST https://api.github.com/graphql (status: 200)"}
{"level":"info","message":"POST https://api.github.com/graphql (status: 200)"}
{"meta":{"labels":["Team:apm","Team:uptime","auto-backport","release_note:skip","v7.12.0"],"branchLabelMapping":{"^v8.0.0$":"master","^v7.12.0$":"7.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"},"existingTargetPullRequests":[]},"level":"info","message":"Inputs when calculating target branches:"}
{"meta":["7.x"],"level":"info","message":"Target branches inferred from labels:"}
{"meta":{"killed":false,"code":2,"signal":null,"cmd":"git remote rm kibanamachine","stdout":"","stderr":"error: No such remote: 'kibanamachine'\n"},"level":"info","message":"exec error 'git remote rm kibanamachine':"}
{"meta":{"killed":false,"code":2,"signal":null,"cmd":"git remote rm elastic","stdout":"","stderr":"error: No such remote: 'elastic'\n"},"level":"info","message":"exec error 'git remote rm elastic':"}
{"level":"info","message":"Backporting [{\"sourceBranch\":\"master\",\"targetBranchesFromLabels\":[\"7.x\"],\"sha\":\"451d0819bcc12c54415ca21afed50abac01d46c3\",\"formattedMessage\":\"Strongly typed EUI theme for styled-components (#90106)\",\"originalMessage\":\"Strongly typed EUI theme for styled-components (#90106)\\n\\n* Strongly typed EUI theme for styled-components\\r\\n\\r\\nuse euiStyled\\r\\n\\r\\nfix tsc issue\\r\\n\\r\\n* use relative imports\\r\\n\\r\\n* remove redundant types\\r\\n\\r\\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>\",\"pullNumber\":90106,\"existingTargetPullRequests\":[]}] to 7.x"}

Backporting to 7.x:
{"level":"info","message":"Backporting via filesystem"}
{"level":"info","message":"Creating PR with title: \"[7.x] Strongly typed EUI theme for styled-components (#90106)\". kibanamachine:backport/7.x/pr-90106 -> 7.x"}
{"level":"info","message":"POST /repos/elastic/kibana/pulls - 201 in 1200ms"}
{"level":"info","message":"Adding assignees to #90867: sqren"}
{"level":"info","message":"POST /repos/elastic/kibana/issues/90867/assignees - 201 in 592ms"}
{"level":"info","message":"Adding labels: backport"}
{"level":"info","message":"POST /repos/elastic/kibana/issues/90867/labels - 200 in 397ms"}
View pull request: https://github.com/elastic/kibana/pull/90867

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes Team:APM - DEPRECATED Use Team:obs-ux-infra_services. Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.12.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants