[uptime] Fix tab focus issue for settings page #87466

shahzad31 · 2021-01-06T11:36:48Z

Summary

Resolves: #87406

Settings tabs will properly focused on switch

shahzad31 · 2021-01-06T14:26:02Z

@elasticmachine merge upstream

elasticmachine · 2021-01-06T14:26:13Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke

This looks great and works when testing. Just a question about the useMemo dependencies.

dominiqueclarke · 2021-01-06T14:35:42Z

x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx

+          dispatch(getConnectorsAction.get());
+          setAddFlyoutVisibility(false);
+          focusInput();
+        },
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps


Not a part of this PR, but why are we disabling exhaustive deps? It's generally not recommended by the hooks team.

i also don't have much context, this particular piece was added by alerting team.

As far i remember, it was rendering component twice , which was causing some flickering behaviours.

I played around with adding the dependencies, and I did not see a flicker. I console.log'd inside the useMemo to make sure it was only ever firing once on component mount, and played around with touching all the buttons inside the flyout. Perhaps recent refactors have made this no longer necessary?

in any case, we can do that as follow up. I don't want to increase the scope of this PR.

dominiqueclarke · 2021-01-06T14:37:35Z

x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx

  const ConnectorAddFlyout = useMemo(
    () =>
      getAddConnectorFlyout({
        consumer: 'uptime',
-        onClose: () => setAddFlyoutVisibility(false),
+        onClose: () => {
+          dispatch(getConnectorsAction.get());


What does this bit of logic do? Unsure of how to test its move from useEffect to onClose.

so when flyout closes, it's refetching all the connector actions, that are displayed in combo box options in settings page.

kibanamachine · 2021-01-06T16:42:10Z

💛 Build succeeded, but was flaky

continuous-integration/kibana-ci/pull-request
Commit: 0a82b43
Flaky suites:
- xpack-kibana-ciGroup7

Test Failures

Chrome X-Pack UI Plugin Functional Tests.x-pack/test/plugin_functional/test_suites/resolver.Resolver test app when the user is interacting with the node with ID: secondChild when the user hovers over the primary button when the user has clicked the primary button (which selects the node.) should render as expected

Link to Jenkins

Standard Out

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

[00:00:00]       │
[00:00:00]         └-: Resolver test app
[00:00:00]           └-> "before all" hook
[00:00:00]           └-> "before all" hook
[00:00:00]             │ debg navigating to resolverTest url: http://localhost:61151/app/resolverTest
[00:00:00]             │ debg navigate to: http://localhost:61151/app/resolverTest
[00:00:00]             │ debg browser[INFO] http://localhost:61151/login?next=%2Fapp%2FresolverTest%3F_t%3D1609948019049 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:00:00]             │
[00:00:00]             │ debg browser[INFO] http://localhost:61151/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:00]             │ debg ... sleep(700) start
[00:00:00]             │ debg ... sleep(700) end
[00:00:00]             │ debg returned from get, calling refresh
[00:00:01]             │ debg browser[INFO] http://localhost:61151/login?next=%2Fapp%2FresolverTest%3F_t%3D1609948019049 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:00:01]             │
[00:00:01]             │ debg browser[INFO] http://localhost:61151/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:01]             │ debg currentUrl = http://localhost:61151/login?next=%2Fapp%2FresolverTest%3F_t%3D1609948019049
[00:00:01]             │          appUrl = http://localhost:61151/app/resolverTest
[00:00:01]             │ debg TestSubjects.find(kibanaChrome)
[00:00:01]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:00:02]             │ info [o.e.c.m.MetadataCreateIndexService] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] [.ds-ilm-history-5-2021.01.06-000001] creating index, cause [initialize_data_stream], templates [ilm-history], shards [1]/[0]
[00:00:02]             │ info [o.e.c.m.MetadataCreateDataStreamService] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] adding data stream [ilm-history-5] with write index [.ds-ilm-history-5-2021.01.06-000001] and backing indices []
[00:00:02]             │ info [o.e.x.i.IndexLifecycleTransition] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] moving index [.ds-ilm-history-5-2021.01.06-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [ilm-history-ilm-policy]
[00:00:03]             │ info [o.e.c.r.a.AllocationService] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] current.health="GREEN" message="Cluster health status changed from [YELLOW] to [GREEN] (reason: [shards started [[.ds-ilm-history-5-2021.01.06-000001][0]]])." previous.health="YELLOW" reason="shards started [[.ds-ilm-history-5-2021.01.06-000001][0]]"
[00:00:03]             │ info [o.e.x.i.IndexLifecycleTransition] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] moving index [.ds-ilm-history-5-2021.01.06-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"wait-for-indexing-complete"}] in policy [ilm-history-ilm-policy]
[00:00:03]             │ info [o.e.x.i.IndexLifecycleTransition] [kibana-ci-immutable-ubuntu-18-tests-xxl-1609943407556613755] moving index [.ds-ilm-history-5-2021.01.06-000001] from [{"phase":"hot","action":"unfollow","name":"wait-for-indexing-complete"}] to [{"phase":"hot","action":"unfollow","name":"wait-for-follow-shard-tasks"}] in policy [ilm-history-ilm-policy]
[00:00:03]             │ debg Found login page
[00:00:03]             │ debg TestSubjects.setValue(loginUsername, test_user)
[00:00:03]             │ debg TestSubjects.click(loginUsername)
[00:00:03]             │ debg Find.clickByCssSelector('[data-test-subj="loginUsername"]') with timeout=10000
[00:00:03]             │ debg Find.findByCssSelector('[data-test-subj="loginUsername"]') with timeout=10000
[00:00:03]             │ debg TestSubjects.setValue(loginPassword, changeme)
[00:00:03]             │ debg TestSubjects.click(loginPassword)
[00:00:03]             │ debg Find.clickByCssSelector('[data-test-subj="loginPassword"]') with timeout=10000
[00:00:03]             │ debg Find.findByCssSelector('[data-test-subj="loginPassword"]') with timeout=10000
[00:00:04]             │ debg TestSubjects.click(loginSubmit)
[00:00:04]             │ debg Find.clickByCssSelector('[data-test-subj="loginSubmit"]') with timeout=10000
[00:00:04]             │ debg Find.findByCssSelector('[data-test-subj="loginSubmit"]') with timeout=10000
[00:00:04]             │ debg Find.waitForDeletedByCssSelector('.kibanaWelcomeLogo') with timeout=10000
[00:00:04]             │ proc [kibana]   log   [15:47:03.131] [info][plugins][routes][security] Logging in with provider "basic" (basic)
[00:00:04]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:00:04]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"] nav:not(.ng-hide)') with timeout=60000
[00:00:07]             │ debg browser[INFO] http://localhost:61151/app/resolverTest?_t=1609948019049 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:00:07]             │
[00:00:07]             │ debg browser[INFO] http://localhost:61151/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:07]             │ debg browser[INFO] http://localhost:61151/app/resolverTest?_t=1609948026026 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:00:07]             │
[00:00:07]             │ debg browser[INFO] http://localhost:61151/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:08]             │ debg Finished login process currentUrl = http://localhost:61151/app/resolverTest
[00:00:08]             │ debg ... sleep(501) start
[00:00:08]             │ debg ... sleep(501) end
[00:00:08]             │ debg in navigateTo url = http://localhost:61151/app/resolverTest
[00:00:08]             │ debg TestSubjects.exists(statusPageContainer)
[00:00:08]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:00:11]             │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:00:11]             │ debg ======browser======== setWindowSize 3840 2400
[00:00:12]             │ debg ======browser======== actual initial screenshot size width=1200, height=800
[00:00:12]             │ debg ======browser======== actual second screenshot size width= 600, height=400
[00:00:12]             │ debg ======browser======== calculated values xBorder= 0, yBorder=0, xScaling=1, yScaling=1
[00:00:12]             │ debg ======browser======== setting browser size to 3840 x 2400
[00:00:14]             │ debg ======browser======== final screenshot size width=3840, height=2400
[00:00:14]           └-> renders at least one node
[00:00:14]             └-> "before each" hook: global before each
[00:00:14]             │ debg TestSubjects.exists(resolver:node)
[00:00:14]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="resolver:node"]') with timeout=120000
[00:00:14]             └- ✓ pass  (67ms) "Resolver test app renders at least one node"
[00:00:14]           └-> renders a node list
[00:00:14]             └-> "before each" hook: global before each
[00:00:14]             │ debg TestSubjects.exists(resolver:node-list)
[00:00:14]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="resolver:node-list"]') with timeout=120000
[00:00:14]             └- ✓ pass  (34ms) "Resolver test app renders a node list"
[00:00:14]           └-> renders at least one edge line
[00:00:14]             └-> "before each" hook: global before each
[00:00:14]             │ debg TestSubjects.exists(resolver:graph:edgeline)
[00:00:14]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="resolver:graph:edgeline"]') with timeout=120000
[00:00:14]             └- ✓ pass  (72ms) "Resolver test app renders at least one edge line"
[00:00:14]           └-> renders graph controls
[00:00:14]             └-> "before each" hook: global before each
[00:00:14]             │ debg TestSubjects.exists(resolver:graph-controls)
[00:00:14]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="resolver:graph-controls"]') with timeout=120000
[00:00:14]             └- ✓ pass  (30ms) "Resolver test app renders graph controls"
[00:00:14]           └-: when the user is interacting with the node with ID: origin
[00:00:14]             └-> "before all" hook
[00:00:41]           └-: when the user is interacting with the node with ID: secondChild
[00:00:41]             └-> "before all" hook
[00:00:41]             └-> should render as expected
[00:00:41]               └-> "before each" hook: global before each
[00:00:41]               └-> "before each" hook
[00:00:41]               │ debg Find.findByCssSelector('[data-test-resolver-node-id="secondChild"]') with timeout=10000
[00:00:41]               │ debg compareAgainstBaseline
[00:00:41]               │ info Taking screenshot "/dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child.png"
[00:00:42]               │ debg comparePngs: /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child.png vs /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/baseline/second_child.png
[00:00:42]               │ debg calculating diff pixels...
[00:00:42]               │ debg percent different: 0.04694444444444444
[00:00:42]               └- ✓ pass  (1.4s) "Resolver test app when the user is interacting with the node with ID: secondChild should render as expected"
[00:00:42]             └-: when the user hovers over the primary button
[00:00:42]               └-> "before all" hook
[00:00:42]               └-> should render as expected
[00:00:42]                 └-> "before each" hook: global before each
[00:00:42]                 └-> "before each" hook
[00:00:42]                 └-> "before each" hook
[00:00:42]                   │ debg Find.findByCssSelector('[data-test-resolver-node-id="secondChild"]') with timeout=10000
[00:00:42]                 │ debg Find.findByCssSelector('[data-test-resolver-node-id="secondChild"]') with timeout=10000
[00:00:42]                 │ debg compareAgainstBaseline
[00:00:42]                 │ info Taking screenshot "/dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child_with_primary_button_hovered.png"
[00:00:44]                 │ debg comparePngs: /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child_with_primary_button_hovered.png vs /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/baseline/second_child_with_primary_button_hovered.png
[00:00:44]                 │ debg calculating diff pixels...
[00:00:44]                 │ debg percent different: 0.05201388888888889
[00:00:44]                 └- ✓ pass  (1.4s) "Resolver test app when the user is interacting with the node with ID: secondChild when the user hovers over the primary button should render as expected"
[00:00:44]               └-: when the user has clicked the primary button (which selects the node.)
[00:00:44]                 └-> "before all" hook
[00:00:44]                 └-> should render as expected
[00:00:44]                   └-> "before each" hook: global before each
[00:00:44]                   └-> "before each" hook
[00:00:44]                   └-> "before each" hook
[00:00:44]                     │ debg Find.findByCssSelector('[data-test-resolver-node-id="secondChild"]') with timeout=10000
[00:00:44]                   └-> "before each" hook
[00:00:45]                   │ debg Find.findByCssSelector('[data-test-resolver-node-id="secondChild"]') with timeout=10000
[00:00:45]                   │ debg compareAgainstBaseline
[00:00:45]                   │ info Taking screenshot "/dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child_selected_with_primary_button_hovered.png"
[00:00:47]                   │ debg comparePngs: /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/session/second_child_selected_with_primary_button_hovered.png vs /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/baseline/second_child_selected_with_primary_button_hovered.png
[00:00:47]                   │ debg calculating diff pixels...
[00:00:47]                   │ debg percent different: 0.09599537037037037
[00:00:47]                   │ info Taking screenshot "/dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/screenshots/failure/Resolver test app when the user is interacting with the node with ID_ secondChild when the user hovers over the primary button when the user has clicked the primary button _which selects the node_ should render as expected.png"
[00:00:47]                   │ info Current URL is: http://localhost:61151/app/resolverTest?resolver-test=(panelParameters%3A(nodeID%3AsecondChild)%2CpanelView%3AnodeDetail)
[00:00:47]                   │ info Saving page source to: /dev/shm/workspace/parallel/15/kibana/x-pack/test/plugin_functional/failure_debug/html/Resolver test app when the user is interacting with the node with ID_ secondChild when the user hovers over the primary button when the user has clicked the primary button _which selects the node_ should render as expected.html
[00:00:47]                   └- ✖ fail: Resolver test app when the user is interacting with the node with ID: secondChild when the user hovers over the primary button when the user has clicked the primary button (which selects the node.) should render as expected
[00:00:47]                   │      Error: expected 0.09599537037037037 to be below 0.09
[00:00:47]                   │       at Assertion.assert (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:100:11)
[00:00:47]                   │       at Assertion.lessThan.Assertion.below (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:336:8)
[00:00:47]                   │       at Function.lessThan (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:531:15)
[00:00:47]                   │       at Context.<anonymous> (test/plugin_functional/test_suites/resolver/index.ts:119:23)
[00:00:47]                   │       at Object.apply (/dev/shm/workspace/parallel/15/kibana/packages/kbn-test/src/functional_test_runner/lib/mocha/wrap_function.js:84:16)
[00:00:47]                   │ 
[00:00:47]                   │

Stack Trace

Error: expected 0.09599537037037037 to be below 0.09
    at Assertion.assert (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:100:11)
    at Assertion.lessThan.Assertion.below (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:336:8)
    at Function.lessThan (/dev/shm/workspace/parallel/15/kibana/packages/kbn-expect/expect.js:531:15)
    at Context.<anonymous> (test/plugin_functional/test_suites/resolver/index.ts:119:23)
    at Object.apply (/dev/shm/workspace/parallel/15/kibana/packages/kbn-test/src/functional_test_runner/lib/mocha/wrap_function.js:84: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
`uptime`	1.0MB	1.0MB	-95.0B

Distributable file count

id	before	after	diff
`default`	47262	48025	+763

History

💔 Build #97238 failed daa1c2c

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

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

shahzad31 added 2 commits January 6, 2021 12:26

fix tab focus issue for settings page

d6c209a

change flyout close effect handling

daa1c2c

shahzad31 marked this pull request as ready for review January 6, 2021 11:39

shahzad31 requested a review from a team as a code owner January 6, 2021 11:39

shahzad31 added release_note:skip Skip the PR/issue when compiling release notes v7.11.0 v7.12.0 v8.0.0 labels Jan 6, 2021

Merge branch 'master' into settings-tab-focous-fix

0a82b43

botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Jan 6, 2021

dominiqueclarke reviewed Jan 6, 2021

View reviewed changes

dominiqueclarke approved these changes Jan 7, 2021

View reviewed changes

shahzad31 merged commit b203eaf into elastic:master Jan 7, 2021

shahzad31 deleted the settings-tab-focous-fix branch January 7, 2021 15:58

shahzad31 added a commit to shahzad31/kibana that referenced this pull request Jan 7, 2021

[uptime] Fix tab focus issue for settings page (elastic#87466)

a89be38

Co-authored-by: Kibana Machine <[email protected]>

shahzad31 mentioned this pull request Jan 7, 2021

[7.x] [uptime] Fix tab focus issue for settings page (#87466) #87667

Merged

shahzad31 added a commit to shahzad31/kibana that referenced this pull request Jan 7, 2021

[uptime] Fix tab focus issue for settings page (elastic#87466)

4d207ff

Co-authored-by: Kibana Machine <[email protected]>

shahzad31 mentioned this pull request Jan 7, 2021

[7.11] [uptime] Fix tab focus issue for settings page (#87466) #87668

Merged

shahzad31 added a commit that referenced this pull request Jan 7, 2021

[7.x] [uptime] Fix tab focus issue for settings page (#87466) (#87667)

646bdb1

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

shahzad31 added a commit that referenced this pull request Jan 7, 2021

[7.11] [uptime] Fix tab focus issue for settings page (#87466) (#87668)

dd5e61b

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[uptime] Fix tab focus issue for settings page #87466

[uptime] Fix tab focus issue for settings page #87466

shahzad31 commented Jan 6, 2021

shahzad31 commented Jan 6, 2021

elasticmachine commented Jan 6, 2021

dominiqueclarke left a comment

dominiqueclarke Jan 6, 2021

shahzad31 Jan 6, 2021

dominiqueclarke Jan 6, 2021

shahzad31 Jan 6, 2021

dominiqueclarke Jan 6, 2021

shahzad31 Jan 6, 2021

kibanamachine commented Jan 6, 2021

Standard Out

Stack Trace

[uptime] Fix tab focus issue for settings page #87466

[uptime] Fix tab focus issue for settings page #87466

Conversation

shahzad31 commented Jan 6, 2021

Summary

shahzad31 commented Jan 6, 2021

elasticmachine commented Jan 6, 2021

dominiqueclarke left a comment

Choose a reason for hiding this comment

dominiqueclarke Jan 6, 2021

Choose a reason for hiding this comment

shahzad31 Jan 6, 2021

Choose a reason for hiding this comment

dominiqueclarke Jan 6, 2021

Choose a reason for hiding this comment

shahzad31 Jan 6, 2021

Choose a reason for hiding this comment

dominiqueclarke Jan 6, 2021

Choose a reason for hiding this comment

shahzad31 Jan 6, 2021

Choose a reason for hiding this comment

kibanamachine commented Jan 6, 2021

💛 Build succeeded, but was flaky

Test Failures

Standard Out

Stack Trace

Metrics [docs]

Async chunks

Distributable file count

History