Introduce Clone feature in view mode #10925

stacey-gammon · 2017-03-29T14:07:21Z

Summary: Introducing the ability to easily clone dashboards in view mode. Just click the new button in the top navigation, and enter in a new dashboard name.

Fixes #10621

cc @alexfrancoeur

stacey-gammon · 2017-04-06T17:10:11Z

@cjcenizal Removing you from review, but feel free to comment on functionality if you prefer. @archanid I heard you'd like to review more stuff, so tagging you, hope you don't mind! 🥇

@alexfrancoeur Likewise, feel free to check out the functionality and comment if you like. You seemed partial to the previous clone functionality that got taken away. :)

alexfrancoeur · 2017-04-06T19:06:54Z

@stacey-gammon you are correct, I love the clone concept :-) Functionally it works perfectly ++

My initial reaction was that I'd like to rename it immediately. What are your thoughts around providing similar functionality that Save has? Naming, storing time with dashboard, etc. Or is that something you were thinking should stay specific to Save in edit mode?

stacey-gammon · 2017-04-06T19:47:57Z

Yea, good point @alexfrancoeur - renaming is a natural step immediately before or after a clone command. But we want the save panel to eventually go away and be a "one click save", so I don't know if adding another similar panel will be good in the long run.

We just really need an easier way to rename the dashboard without having to save it. :(

alexfrancoeur · 2017-04-06T20:29:57Z

I agree and am certainly all for one click saving and inline dashboard naming. While we don't have those features, should we keep the "saving" of a dashboard consistent?

stacey-gammon · 2017-04-06T20:32:44Z

@snide @cjcenizal Any perspective from the design team here? One click clone vs the same experience for save, vs... something we haven't thought of?

kobelb · 2017-04-07T14:11:44Z

@stacey-gammon from a technical perspective, this LGTM. Though, I'm holding off on approving it until we get some design input.

stacey-gammon · 2017-04-07T17:50:33Z

Chatted with the design team and we decided to go with a pop up modal that provides an input field where the name can be changed, along with cancel and confirm clone buttons.

Given that, I expect this will get pushed to 5.5.

cc @cjcenizal @snide

alexfrancoeur · 2017-04-10T10:02:27Z

Sounds good @stacey-gammon. No need to rush, users still can save as new under edit mode. This functionality will be much more important when we begin to introduce more granular access control in the future.

@cjcenizal @snide I don't want to increase the scope of this PR by any means but I have a question about the proposed approach. If we introduce modals here for saving confirmation, do we need to keep that consistent across the board? Saving a visualization, saving a dashboard, etc. Or is cloning unique in this situation?

cjcenizal · 2017-04-10T16:13:43Z

@alexfrancoeur I don't think the answer is as clearcut as "All 'saving' actions require modals" or "Only cloning needs a modal." I think surfacing a modal for cloning is a strong UX, and is an improvement worth introducing even as a standalone change. As for the rest of the header, we know it needs an overall redesign, and on a more granular level we know we want to improve the saving UX. I'd say we can move forward with the cloning modal now, and figure out the other saving UX improvements later (which may or may not involve modals).

alexfrancoeur · 2017-04-11T20:25:52Z

@cjcenizal I agree that the the modal is a better UX than what we have now. However, I also know how important consistency is for UX. My concern is that introducing different ways to save items is confusing to a user. This was part of the reason why we had to revert back to the original saving approach for edit mode. It was too different from visualize, saved searches, etc. If design does not believe this will be a poor user experience, I'm all for introducing the modal. Otherwise, I don't see why wouldn't just keep them the same.

cjcenizal · 2017-04-12T03:52:21Z

@snide What are your thoughts on @alexfrancoeur's points about preserving UX consistency, above?

stacey-gammon · 2017-05-16T10:56:56Z

@nreese and @kobelb this is now ready to be reviewed. Design team said the nested modals were not great but good enough for now.

nreese · 2017-05-16T13:43:18Z

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

+    super(props);
+
+    this.state = {
+      newDashboardName: props.title


Do you want the default value to cause a name collision with the existing dashboard title? Maybe Clone should be appended to the title or something like that, or maybe the default value is blank?

Yea, I originally had it with 'Copy' appended, wasn't sure which version I liked better. I can bring that back.

nreese · 2017-05-16T13:43:47Z

src/core_plugins/kibana/public/dashboard/dashboard.js

+  const kbnUrl = $injector.get('kbnUrl');
+  const confirmModal = $injector.get('confirmModal');
+  const Private = $injector.get('Private');
+


Why the switch to $injector.get()?

@spalger's preference for injector over multiline argument lists. :)

nreese · 2017-05-16T13:45:29Z

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

+              className="kuiTextInput kuiTextInput--large"
+              value={ this.state.newDashboardName }
+              onChange={ this.onInputChange } />
+          </KuiModalBodyText>


Should the model also let the user update the dashboard description for the clone? I could see a user cloning a dashboard and wanting to describe what the clone is going to be used for. Might be nice to complete this action in a single screen.

Yea, I could see that being helpful. Mind if I make that a separate enhancement/PR though so it doesn't hold this PR up?

Filed: #11817

kobelb

Nice job, really excited to see us using React for this!!
Just a few minor comments, nothing mission/critical or worth blocking this PR.

kobelb · 2017-05-16T12:45:43Z

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

+            type="primary"
+            data-test-subj="cloneConfirmButton"
+            onClick={ this.cloneDashboard }
+            ref={ (button) => { this.confirmButton = button; } }


It looks like you can use the autoFocus attribute to do the same without having to use the ref.

Also, do we want the confirm button to be focused when the modal pops up? It seems like we'd want the textbox with the name to be focused, and make the enter key for that textbox trigger the Save.

kobelb · 2017-05-16T12:48:50Z

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

+  };
+
+  onKeyDown = (event) => {
+    if (event.keyCode === 27) {


Can we add a comment to denote what keyCode 27 is? I had to look it up to figure out what this was intended to do.

I really like this behavior, and wonder whether we should see if the design-team would like to introduce it for all modals.

We have it for all the confirm modals currently. Or at least, it should be working for our confirm modals.... if it's not it's a bug.

kobelb · 2017-05-16T14:25:38Z

src/core_plugins/kibana/public/dashboard/dashboard.js

 ]);

+app.directive('dashboardCloneModal', function (reactDirective) {


We should be able to remove this as the showCloneModal is using the React component directly as opposed to via ng-react.

kobelb · 2017-05-16T14:27:24Z

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

+  }
+
+  componentDidMount() {
+    this.confirmButton.focus();


I haven't used it myself yet, but it looks like there is an autoFocus attribute that we can add to the button itself to make this work.

Tangentially, what made you choose to have the confirm button focused by default. From my naive perspective, we'd want the user to change the name of the Dashboard so there isn't a naming collision, so defaulting the focus to the textbox for them to make the changes would make more sense. This point might no longer be valid now that we're appending "Copy" to the name of the title with the most recent changes.

I didn't use autoFocus because it's not supported by all browsers here: http://caniuse.com/#feat=autofocus

Though honestly, I thought it wasn't supported on Safari, but a closer look reveals it's "IOS" safari, so the phone browser, and Opera Mini. So maybe it's okay? Since they are touch screen devices, you wouldn't be pressing enter anyway, but touching one of the buttons.

@epixa, do we have a set of browsers we have to support?

We officially support these browsers: https://www.elastic.co/support/matrix#show_browsers

No need to optimize for mobile browsers, though Kibana should really still function in those browsers, ideally.

In that case, I'll switch over to using autoFocus, it's a lot simpler of an implementation and Kibana will still function in those mobile browsers.

Unfortunately can’t run jest tests outside of the ui_framework at this time.

It’ll cause failures for the normal unit test runs

…'t clash

* Introduce Clone feature in view mode * Use a new react modal for cloning dashboards * Fix focus issues and tests Unfortunately can’t run jest tests outside of the ui_framework at this time. * Add tests for dashboard clone modal * move the jest tests out of the __tests__ directory It’ll cause failures for the normal unit test runs * use react instead of angular for overlay and loading of dom element * Append 'Copy' to the title in the clone dialog so by default it doesn't clash * address code comments

stacey-gammon force-pushed the clone-dashboard-feature branch 3 times, most recently from 6f9a604 to b2b47b0 Compare March 29, 2017 19:38

stacey-gammon requested a review from cjcenizal March 30, 2017 12:43

stacey-gammon added Feature:Dashboard Dashboard related features :Sharing review v5.4.0 labels Mar 30, 2017

stacey-gammon requested a review from kobelb March 30, 2017 14:07

stacey-gammon force-pushed the clone-dashboard-feature branch from b2b47b0 to af95ec3 Compare April 6, 2017 17:04

stacey-gammon requested review from rhoboat and removed request for kobelb and cjcenizal April 6, 2017 17:07

kobelb self-requested a review April 7, 2017 14:11

stacey-gammon added v5.5.0 and removed v5.4.0 labels Apr 7, 2017

This was referenced Apr 11, 2017

Expand and clean up custom modal service #10104

Closed

Move modals into the ui_framework in react #11158

Closed

stacey-gammon added the blocked label Apr 24, 2017

stacey-gammon added the release_note:enhancement label May 16, 2017

nreese reviewed May 16, 2017

View reviewed changes

stacey-gammon force-pushed the clone-dashboard-feature branch from eb015c5 to 2337cd0 Compare May 16, 2017 13:51

nreese approved these changes May 16, 2017

View reviewed changes

stacey-gammon mentioned this pull request May 16, 2017

Add description input to dashboard clone dialog #11817

Closed

kobelb approved these changes May 16, 2017

View reviewed changes

This was referenced May 16, 2017

Fix modals in react #11714

Merged

Accessibility: Modals #11823

Closed

stacey-gammon force-pushed the clone-dashboard-feature branch from 98a4061 to f85070f Compare May 17, 2017 16:54

stacey-gammon added 8 commits May 17, 2017 12:55

Introduce Clone feature in view mode

45a2aa6

Use a new react modal for cloning dashboards

09da364

Fix focus issues and tests

ee4d32e

Unfortunately can’t run jest tests outside of the ui_framework at this time.

Add tests for dashboard clone modal

a73c4f5

move the jest tests out of the __tests__ directory

dc601c4

It’ll cause failures for the normal unit test runs

use react instead of angular for overlay and loading of dom element

a7256da

Append 'Copy' to the title in the clone dialog so by default it doesn…

3bbd73b

…'t clash

address code comments

694c5bf

stacey-gammon force-pushed the clone-dashboard-feature branch from f85070f to 694c5bf Compare May 17, 2017 16:56

stacey-gammon merged commit 3caf5d7 into elastic:master May 19, 2017

stacey-gammon mentioned this pull request May 19, 2017

[5.x] Introduce Clone feature in view mode (#10925) #11923

Merged

stacey-gammon deleted the clone-dashboard-feature branch May 19, 2017 15:11

stacey-gammon added the v6.0.0-alpha2 label May 24, 2017

cjcenizal mentioned this pull request May 26, 2017

Fix use of KuiButtons in Clone Modal. #12050

Merged

alexfrancoeur mentioned this pull request May 30, 2017

Revert or improve disabling of save button when creating a visualization #12082

Closed

jimgoodwin added roadmap and removed release_note:enhancement labels Jun 22, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce Clone feature in view mode #10925

Introduce Clone feature in view mode #10925

stacey-gammon commented Mar 29, 2017 •

edited

Loading

stacey-gammon commented Apr 6, 2017

alexfrancoeur commented Apr 6, 2017

stacey-gammon commented Apr 6, 2017

alexfrancoeur commented Apr 6, 2017

stacey-gammon commented Apr 6, 2017

kobelb commented Apr 7, 2017

stacey-gammon commented Apr 7, 2017

alexfrancoeur commented Apr 10, 2017

cjcenizal commented Apr 10, 2017

alexfrancoeur commented Apr 11, 2017

cjcenizal commented Apr 12, 2017

stacey-gammon commented May 16, 2017

nreese May 16, 2017

stacey-gammon May 16, 2017

nreese May 16, 2017

stacey-gammon May 16, 2017

spalger May 17, 2017

nreese May 16, 2017

stacey-gammon May 16, 2017

nreese May 16, 2017

stacey-gammon May 16, 2017

kobelb left a comment

kobelb May 16, 2017

kobelb May 16, 2017

kobelb May 16, 2017

stacey-gammon May 16, 2017

kobelb May 16, 2017

kobelb May 16, 2017

stacey-gammon May 16, 2017

epixa May 16, 2017

stacey-gammon May 16, 2017

		]);

		app.directive('dashboardCloneModal', function (reactDirective) {

Introduce Clone feature in view mode #10925

Introduce Clone feature in view mode #10925

Conversation

stacey-gammon commented Mar 29, 2017 • edited Loading

stacey-gammon commented Apr 6, 2017

alexfrancoeur commented Apr 6, 2017

stacey-gammon commented Apr 6, 2017

alexfrancoeur commented Apr 6, 2017

stacey-gammon commented Apr 6, 2017

kobelb commented Apr 7, 2017

stacey-gammon commented Apr 7, 2017

alexfrancoeur commented Apr 10, 2017

cjcenizal commented Apr 10, 2017

alexfrancoeur commented Apr 11, 2017

cjcenizal commented Apr 12, 2017

stacey-gammon commented May 16, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kobelb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacey-gammon commented Mar 29, 2017 •

edited

Loading