[Code] Code Integrator Component #47180

rylnd · 2019-10-02T23:52:09Z

Summary

This is a followup to #46402. It addresses part of elastic/code#1637. It is based upon #47183. As such, here is the diff for just this branch.

Moves shared ImportModal to separate component
Adds new CodeIntegrator component that allows consumers to either select a repo or import a new one, with appropriate callback props

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~Documentation was added for features that require explanation or tutorials~~
~~Unit or functional tests were updated or added to match the most common scenarios~~
~~This was checked for keyboard-only and screenreader accessibility~~

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-10-02T23:52:11Z

Pinging @elastic/code (Team:Code)

rylnd · 2019-10-03T00:01:39Z

@mw-ding here are the remaining items (or things to defer until APM has bandwidth) as I see them:

adding translation keys for copy
revisiting keyboard accessibility (e.g. integrator popover does not draw focus)
documentation
tests
wiring up to API data: fetching snippets, POSTing to import new repos

Also, CodeIntegrator doesn't currently show an indicator for the repo import status. Design for this was somewhat in flux when I started this work, and I'm still not sure if the component should do this, or whether this should be the caller's concern (you could do this with the existing callbacks).

elasticmachine · 2019-10-03T00:58:02Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: e7432d2f47aa1791397760955a2defdc464f7068

mw-ding · 2019-10-03T21:17:50Z

x-pack/legacy/plugins/code/public/components/integrations/code_integrator.tsx

+  const handleSelect = (codeId: string) => {
+    onRepoSelect(codeId);
+    setShowSelector(false);
+    // TODO: show success


are we going to implement the success notification in this PR. do you think it's currently blocked by the case that we haven't decided on if we should issue the REST API inside the component or not?

Currently, the import calls are stubbed out, but the components are written under the assumption that they'll be making the calls themselves.

We could certainly allow the consumer to make the call themselves with a simpler callback, but then CodeIntegrator's not doing much besides generating HTML.

We should discuss both approaches with APM and go with whatever they think is best, but I think both will need the simpler component that is callback-agnostic.

elasticmachine · 2019-10-04T04:18:38Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: ccd79ca71a13248370a5d6947c0b3e6a93268d4e

mw-ding · 2019-10-04T18:30:06Z

@mw-ding here are the remaining items (or things to defer until APM has bandwidth) as I see them:

adding translation keys for copy

revisiting keyboard accessibility (e.g. integrator popover does not draw focus)

documentation

tests

wiring up to API data: fetching snippets, POSTing to import new repos

Also, CodeIntegrator doesn't currently show an indicator for the repo import status. Design for this was somewhat in flux when I started this work, and I'm still not sure if the component should do this, or whether this should be the caller's concern (you could do this with the existing callbacks).

It's great to have some follow up items. Let's have a chat on them. But not quite necessary for this PR.

mw-ding

overall, LGTM. Let get this checked in first. @daveyholler can you take a look on the design's end?

please remember to flip the flag here if you want to try it out locally. https://github.com/elastic/kibana/pull/47180/files#diff-95a72659e4d8aff5a859fc873de1b710R54

x-pack/legacy/plugins/code/public/components/integrations/integrations.scss

elasticmachine · 2019-10-04T22:33:14Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 53dd16756ea72285aa14d26d4008cd9b41c3bbe8

elasticmachine · 2019-10-04T22:58:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 08cb5a155add7326f18cade8d52e5e217fb169c8

* Abstracts shared ImportModal component * Uses placeholder data and callbacks in lieu of real integration

Integrations is too generic.

This got lost in the rebase, whoops.

elasticmachine · 2019-10-05T01:19:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 0bd656b

… into console-token-iterator * 'console-token-iterator' of github.com:jloleysens/kibana: (184 commits) [functional/services] update webdriver lib and types (elastic#47381) Standardizing IconField implementation across the app (elastic#47196) Move ui/value_suggestions ⇒ NP data plugin (elastic#45762) Remove ui/persisted_log - Part 2 (elastic#47236) Update gulp related packages (elastic#47421) Update dependency idx to ^2.5.6 (elastic#47399) try running fewer jobs in parallel on the same worker (elastic#47403) Update webpack related packages (elastic#47402) Update jsonwebtoken related packages (elastic#47400) Update gulp related packages (major) (elastic#46665) Update dependency prettier to ^1.18.2 (elastic#47340) Update dependency @types/puppeteer to ^1.20.1 (elastic#47339) Update dependency @elastic/elasticsearch to ^7.4.0 (elastic#47338) Update dependency tar-fs to ^1.16.3 (elastic#47341) [Code] Code Integrator Component (elastic#47180) [Canvas][i18n] Sidebar (elastic#46090) Generate uuid in task Manager as Kibana uuid may not yet have been initialised [Code] Embedded Code Snippet Component (elastic#47183) Revert "Add pipeline for flaky test runner job (elastic#46740)" SearchSource: fix docvalue_fields and fields intersection logic (elastic#46724) ...

* Add CodeIntegrator component * Abstracts shared ImportModal component * Uses placeholder data and callbacks in lieu of real integration

rylnd added Team:Code release_note:skip Skip the PR/issue when compiling release notes v7.6.0 labels Oct 2, 2019

rylnd requested review from spacedragon, daveyholler and mw-ding October 2, 2019 23:52

rylnd requested a review from a team as a code owner October 2, 2019 23:52

rylnd mentioned this pull request Oct 3, 2019

[Code] APM/Code Integration POC #46402

Closed

rylnd changed the title ~~[Code] Code integrator Component~~ [Code] Code Integrator Component Oct 3, 2019

rylnd mentioned this pull request Oct 3, 2019

[Code] Embedded Code Snippet Component #47183

Merged

7 tasks

mw-ding reviewed Oct 3, 2019

View reviewed changes

rylnd force-pushed the code-integrator branch from e7432d2 to ccd79ca Compare October 4, 2019 03:06

mw-ding approved these changes Oct 4, 2019

View reviewed changes

daveyholler requested changes Oct 4, 2019

View reviewed changes

x-pack/legacy/plugins/code/public/components/integrations/integrations.scss Outdated Show resolved Hide resolved

rylnd force-pushed the code-integrator branch from ccd79ca to 53dd167 Compare October 4, 2019 21:20

rylnd added 3 commits October 4, 2019 19:04

Add CodeIntegrator component

d4b2b0b

* Abstracts shared ImportModal component * Uses placeholder data and callbacks in lieu of real integration

Use more specific prefix for our BEM classes

0cf539b

Integrations is too generic.

Actually use our CodeIntegrator component

0bd656b

This got lost in the rebase, whoops.

rylnd force-pushed the code-integrator branch from 08cb5a1 to 0bd656b Compare October 5, 2019 00:05

daveyholler self-requested a review October 5, 2019 01:25

daveyholler approved these changes Oct 5, 2019

View reviewed changes

rylnd merged commit 67d026e into elastic:master Oct 5, 2019

rylnd deleted the code-integrator branch October 5, 2019 01:27

rylnd mentioned this pull request Oct 7, 2019

[7.x] [Code] Code Integrator Component (#47180) #47521

Merged

rylnd added a commit to rylnd/kibana that referenced this pull request Oct 7, 2019

[Code] Code Integrator Component (elastic#47180)

3239709

* Add CodeIntegrator component * Abstracts shared ImportModal component * Uses placeholder data and callbacks in lieu of real integration

rylnd added a commit that referenced this pull request Oct 7, 2019

[Code] Code Integrator Component (#47180) (#47521)

8f3a683

* Add CodeIntegrator component * Abstracts shared ImportModal component * Uses placeholder data and callbacks in lieu of real integration

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Code] Code Integrator Component #47180

[Code] Code Integrator Component #47180

rylnd commented Oct 2, 2019 •

edited

Loading

elasticmachine commented Oct 2, 2019

rylnd commented Oct 3, 2019

elasticmachine commented Oct 3, 2019

mw-ding Oct 3, 2019

rylnd Oct 4, 2019

elasticmachine commented Oct 4, 2019

mw-ding commented Oct 4, 2019

mw-ding left a comment •

edited

Loading

elasticmachine commented Oct 4, 2019

elasticmachine commented Oct 4, 2019

elasticmachine commented Oct 5, 2019

[Code] Code Integrator Component #47180

[Code] Code Integrator Component #47180

Conversation

rylnd commented Oct 2, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Oct 2, 2019

rylnd commented Oct 3, 2019

elasticmachine commented Oct 3, 2019

💚 Build Succeeded

mw-ding Oct 3, 2019

Choose a reason for hiding this comment

rylnd Oct 4, 2019

Choose a reason for hiding this comment

elasticmachine commented Oct 4, 2019

💚 Build Succeeded

mw-ding commented Oct 4, 2019

mw-ding left a comment • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Oct 4, 2019

💚 Build Succeeded

elasticmachine commented Oct 4, 2019

💚 Build Succeeded

elasticmachine commented Oct 5, 2019

💚 Build Succeeded

rylnd commented Oct 2, 2019 •

edited

Loading

mw-ding left a comment •

edited

Loading