Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strongly typed EUI theme for styled-components #90106

Merged
merged 4 commits into from
Feb 9, 2021

Conversation

sorenlouv
Copy link
Member

@sorenlouv sorenlouv commented Feb 2, 2021

Use typed euiStyled when using styled-components.

typescript-styled.mp4

@sorenlouv sorenlouv added the Team:APM All issues that need APM UI Team support label Feb 2, 2021
@elasticmachine
Copy link
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
Member Author

retest

@sorenlouv
Copy link
Member 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
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
Member 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 review from a team as code owners 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
Contributor

Pinging @elastic/uptime (Team:uptime)

@sorenlouv
Copy link
Member Author

retest

@sorenlouv
Copy link
Member Author

@elasticmachine merge upstream

Copy link
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
Member Author

retest

@sorenlouv
Copy link
Member Author

@elasticmachine merge upstream

Copy link
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
Member Author

retest

@kibanamachine
Copy link
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
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 All issues that need APM UI Team support 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