Ui/replication merge cleanup #9188

Monkeychip · 2020-06-10T17:06:27Z

This PR address a couple of minor fixes I noticed after the merge. These fixes are not related to the merge, but just things I came across while double-checking.

Fixes in PR:

replace with replicationModeForDisplay
fix a refresh issue on the primary_cluster_addr that was due to a spelling error and add in default. Confirmed with design.
remove extra div with box class per Chelsea's comment
change manage link on known secondaries card to take you to the secondaries manage and not the cluster manage page.
fix some overflow scroll issues on the sticky-header class, still working on this as I add in the empty state and do some QA on it.
Capture escape and enter keyboard actions. Note: for the modal's (disable and demote) where you have to type the mode (e.g. Performance or Disaster Recovery) the escape is captured only on the modal level. This means that escape only closes the modal if you have clicked on the input. I only handle it on the modal, because if I handle the keypress outside these models, I don't know if the confirmText and confirmationText are the same. It gets super complicated handling the submit action after that. The only way I could see to get it to work (if I was actually able to do it) added way more complexity than it was worth.

Here is a gif of the modal actions. I am not using my mouse in any of these, I'm just using the keyboard. If you wanted to test this yourself, make sure to not only hit enter and escape but other keys and try to use your mouse as well. I've tested this pretty extensively, but more testing wouldn't hurt.

Note: There is an error currently when you demote to a DR secondary. Chelsea is fixing that in another PR.

… when Not defined

…in the known secondaries card

noelledaley · 2020-06-10T17:51:41Z

ui/lib/core/addon/components/replication-table-rows.js

-  primaryClusterAddr: computed('replcationDetails.{primaryClusterAddr}', function() {
-    return this.replicationDetails.primaryClusterAddr;
+  primaryClusterAddr: computed('replicationDetails.{primaryClusterAddr}', function() {
+    return this.replicationDetails.primaryClusterAddr || 'Not defined';


i was wondering about whether to display a default value here too, but when i spoke to ivana about it yesterday we decided not the show the primary_cluster_addr if one wasn't explicitly set. this is because the primary_cluster_addr is an optional field. showing Not defined here is a little confusing because it almost sounds like an error -- like the user should have defined one but didn't, when in actuality they don't need to define one. what do you think?

Let's chat during sync or after. I also spoke with Ivana and that's where I came up with the text. Probably best to make sure we are all on the same page.

ui/lib/replication/addon/templates/components/known-secondaries-card.hbs

noelledaley · 2020-06-10T18:01:52Z

oh boy, i love a good cleanup PR. thanks so much for doing this!

✅ making the modal submit by pressing 'enter' sounds awesome
❓ i had one, non-blocking question regarding the default value for the primary cluster addr
❓ regarding the known_primary_cluster_addr -- would there ever be an empty state? i've always seen at least 1 value in there, which is the value of the main primary. when would that be missing?

other than that, the code looks good. let me know when you need a final 👁️ !

…e former deals with input on the modal footer, the later get's caught in replication actions.

Monkeychip · 2020-06-10T22:16:48Z

ui/lib/core/addon/templates/components/confirmation-modal.hbs

+        class="input has-margin-top"
+        autocomplete="off"
+        spellcheck="false"
+        enter=onConfirm


Handle enter on modals that have inputs (e.g. demote where you have to type in the mode to confirm).

Monkeychip · 2020-06-11T16:39:45Z

❓ regarding the known_primary_cluster_addr -- would there ever be an empty state? I've always seen at least 1 value in there, which is the value of the main primary. when would that be missing?

I get an empty state when I demote a primary. Here is the final empty state design. The wording and designed confirmed from Ivana and support.

Monkeychip · 2020-06-11T17:38:39Z

ui/lib/core/addon/components/replication-action-demote.js


 export default Actions.extend({
  layout,
+  onSubmit() {},


You'll see this added to each replicationAction component. The sole purpose of this is to handle the escape action. The only two modals that don't have this are the demote and disable modals, as they require you type in a confirmationText. If I try and handle the keypress value at this level, I don't know if they've confirmed the text or not, and thus can't handle it this high up. Instead, the escape action is handled on the ConfrimationModal level for these two components.

Monkeychip · 2020-06-11T17:41:57Z

ui/lib/core/addon/components/replication-action-recover.js


 export default Actions.extend({
  layout,
+  onSubmit() {},


You'll see this added to each replicationAction component. The sole purpose of this is to handle the escape action. The only two modals that don't have this are the demote and disable modals, as they require you type in a confirmationText. If I try and handle the keypress value at this level, I don't know if they've confirmed the text or not, and thus can't handle it this high up. Instead, the escape action is handled on the ConfrimationModal level for these two components.

Monkeychip · 2020-06-11T17:43:22Z

ui/lib/core/addon/templates/components/replication-action-promote.hbs

-      Promote this cluster to a {{replicationDisplayMode}} primary
-    </p>
-  </div>
+<div onkeyup={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}>


wrapping div on all replicationAction components (but disable and demote) so that they trigger the check on escape.

Monkeychip · 2020-06-11T17:44:14Z

ui/lib/core/addon/templates/components/replication-action-promote.hbs

+              id="primary_cluster_addr"
+              name="primary_cluster_addr"
+              value=primary_cluster_addr
+              enter=(action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force))


allowing the enter button to submit when you are in the input of the primary_cluster_addr

Monkeychip · 2020-06-11T17:45:53Z

ui/lib/core/addon/templates/components/replication-secondary-card.hbs

-        @header="cluster_addr"
-        @items={{knownPrimaryClusterAddrs}}
-      />
+      {{#if (is-empty knownPrimaryClusterAddrs)}}


Adding empty state. It looks like this:

Monkeychip · 2020-06-11T17:46:54Z

ui/lib/core/addon/templates/components/confirmation-modal.hbs

+        class="input has-margin-top"
+        autocomplete="off"
+        spellcheck="false"
+        enter=(if (eq confirmationInput confirmText) onConfirm)


handling enter and escape on the confirmation modal used by the replicationAction disable and demote.

Monkeychip · 2020-06-11T17:47:24Z

ui/lib/core/addon/templates/components/replication-action-recover.hbs

-      Attempt recovery if replication is in a bad state.
-    </p>
-  </div>
+<div onkeyup={{action "onSubmit" "recover"}}>


Another wrapping div to handle the escape

Monkeychip · 2020-06-11T17:47:33Z

ui/lib/core/addon/templates/components/replication-action-reindex.hbs

-    <p>
-      Reindex the local data storage
-    </p>
+<div onkeyup={{action 'onSubmit' 'reindex'}}>


Another wrapping div to handle the escape

Monkeychip · 2020-06-11T17:47:40Z

ui/lib/core/addon/templates/components/replication-action-update-primary.hbs

-      Change this secondary's assigned primary cluster
-    </p>
-  </div>
+<div onkeyup={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}>


Another wrapping div to handle the escape

Monkeychip · 2020-06-12T14:12:48Z

We removed the changes that were not the modal enter/escape changes and made a new PR. The modal enter/escape functionality is going to be a separate ticket/project that needs more consideration and research regarding accessibility.

Monkeychip added 5 commits June 10, 2020 09:50

replace with replicationModeForDisplay that is defined on the cluster

e526320

fix spelling on replication and confirmed with design for placeholder…

92d7f2a

… when Not defined

remove extra div with box class

f0866e4

change manage link to take you to the secondaries manage as it's with…

d5cc28a

…in the known secondaries card

fix scroll always showing by adding auto, and decreasing the height. WIP

20f6bbd

Monkeychip added the ui label Jun 10, 2020

noelledaley reviewed Jun 10, 2020

View reviewed changes

ui/lib/replication/addon/templates/components/known-secondaries-card.hbs Show resolved Hide resolved

Monkeychip added 2 commits June 10, 2020 13:01

add empty state to known_primary_cluster_addrs

bf6ff38

WIP enter on replication actions. Finished for demote and reindex, th…

c8dba74

…e former deals with input on the modal footer, the later get's caught in replication actions.

Monkeychip commented Jun 10, 2020

View reviewed changes

handle esc key

fc7b64e

fix escape and enter when confirmationText is needed

fc88890

Monkeychip commented Jun 11, 2020

View reviewed changes

Monkeychip marked this pull request as ready for review June 11, 2020 17:48

Monkeychip added 2 commits June 11, 2020 12:58

handle enter and escape on secondary token flow

0d6465b

clean up the clean up

11eed46

Monkeychip closed this Jun 12, 2020

Monkeychip deleted the ui/replication-merge-cleanup branch June 7, 2022 20:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ui/replication merge cleanup #9188

Ui/replication merge cleanup #9188

Monkeychip commented Jun 10, 2020 •

edited

noelledaley Jun 10, 2020

Monkeychip Jun 10, 2020

noelledaley commented Jun 10, 2020 •

edited

Monkeychip Jun 10, 2020

Monkeychip commented Jun 11, 2020

Monkeychip Jun 11, 2020 •

edited

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip Jun 11, 2020

Monkeychip commented Jun 12, 2020

Ui/replication merge cleanup #9188

Ui/replication merge cleanup #9188

Conversation

Monkeychip commented Jun 10, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noelledaley commented Jun 10, 2020 • edited

Choose a reason for hiding this comment

Monkeychip commented Jun 11, 2020

Monkeychip Jun 11, 2020 • edited

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

Monkeychip commented Jun 12, 2020

Monkeychip commented Jun 10, 2020 •

edited

noelledaley commented Jun 10, 2020 •

edited

Monkeychip Jun 11, 2020 •

edited