COMPASS-558 Add DDL buttons #745

pzrq · 2017-01-16T07:09:18Z

Design Mock Up

https://mongodb.invisionapp.com/share/6E9XJUCKW#/screens/213327470

Screenshots

NOTE: Expect some changes in style pass ticket COMPASS-705.

New 5 buttons (enabled, e.g. primary, mongos)

New 5 buttons (disabled, e.g. secondary, arbiter)

Tasks Done

Other bugs and refactoring blocking this PR:

Please feel welcome to push commits, test, review and add or check off these TODOs:

(Possibly related) Code smell from relative imports, e.g. const CollectionsActions = require('../../../database/lib/actions/collections-actions');
Do the z-index removals have any detectable side-effects or were they no-ops? (N/A after rebase on COMPASS 685: fix flexbox redesign #749)
Enzyme tests - added for tooltips and click events
Functional tests (N/A, enzyme is enough)
Is Writable!

From Sam:

The + and trashcan icons need more highlight when mousing over the items in the side bar. They seem too dark at the moment unless you actually mouse over the icons themselves. (Moved to COMPASS-705)
The create database button at the bottom of the side bar as illustrated in the design mockups is missing.

From Sam & Thomas:

Additionally, the newly created db/collection should be selected after creation (just as if the user clicked on it in the sidebar) so the user can instantly start working with this new collection.

satyasinha · 2017-01-16T11:11:38Z

Design wise it makes sense if on clicking the create database/collection modal it also opened the databases/collections table in the background. So that you can see the new entry being created.

If that makes it any easier....

samweaver-zz · 2017-01-16T14:47:02Z

I agree with you that only having the action available when in the right place is a bit odd. Adding some ToDo's:

The + and trashcan icons need more highlight when mousing over the items in the side bar. They seem too dark at the moment unless you actually mouse over the icons themselves.
The create database button at the bottom of the side bar as illustrated in the design mockups is missing.

rueckstiess · 2017-01-17T00:47:10Z

If you use the keyboard Enter key to submit, modals refresh the whole page

should be fixable with an onSubmit() handler and a evt.preventDefault(). Can probably done quickly in this PR.

(Possibly related) Code smell from relative imports, e.g. const CollectionsActions = require('../../../database/lib/actions/collections-actions');

should use app.appRegistry.getActions(...). Can probably also be handled right now.

Buttons do not work if you are not in the right place, i.e.

That needs to be changed. I see two possibilities:

Open modal regardless where you are.
Navigate to the respective screen (e.g. instance level for add database) and open the modal there

My preference is for 1. because they are shortcuts. Additionally, the newly created db/collection should be selected after creation (just as if the user clicked on it in the sidebar) so the user can instantly start working with this new collection.

In order to make this work, it may be necessary to move the modal definitions to the "Home" level, so that they can be opened on any screen after connecting.

@pzrq Can you make tickets in the DDL Manipulation epic for the outstanding issues? The refactor to open the modals from anywhere seems like the most pressing one. Maybe you can start working on that, and we put COMPASS-558 in Blocked state in the mean time. It will probably roll over into the new sprint.

samweaver-zz · 2017-01-17T00:56:24Z

I prefer #1 too.

…

On 16 January 2017 at 19:47, Thomas Rückstieß ***@***.***> wrote: If you use the keyboard Enter key to submit, modals refresh the whole page should be fixable with an onSubmit() handler and a evt.preventDefault(). Can probably done quickly in this PR. (Possibly related) Code smell from relative imports, e.g. const CollectionsActions = require('../../../database/lib/actions/collections- actions'); should use app.appRegistry.getActions(...). Can probably also be handled right now. Buttons do not work if you are not in the right place, i.e. That needs to be changed. I see two possibilities: 1. Open modal regardless where you are. 2. Navigate to the respective screen (e.g. instance level for add database) and open the modal there My preference is for 1. because they are shortcuts. Additionally, the newly created db/collection should be selected after creation (just as if the user clicked on it in the sidebar) so the user can instantly start working with this new collection. In order to make this work, it may be necessary to move the modal definitions to the "Home" level, so that they can be opened on any screen after connecting. @pzrq <https://github.com/pzrq> Can you make tickets in the *DDL Manipulation* epic for the outstanding issues? The refactor to open the modals from anywhere seems like the most pressing one. Maybe you can start working on that, and we put COMPASS-558 in Blocked state in the mean time. It will probably roll over into the new sprint. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#745 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-E-_1p-wyuY54V8WJEBeEk4qogVYnIks5rTA-OgaJpZM4LkPTr> .

-- *{* name : "*Sam Weaver*", title : "Product Manager", phone : "+447549938422", location : ["New York City, NY", "London, UK"], twitter : ["@Samuel_Weaver <https://www.twitter.com/samuel_weaver>", " @mongodb <https://www.twitter.com/mongodb>"], facebook : "MongoDB <https://www.facebook.com/mongodb>" *}*

fredtruman · 2017-01-24T02:49:16Z

Depending on your preference, I'm happy to handle any and all style on this after its merged, Peter.
Feel free to punt on anything and just file a quick cleanup ticket for me if need be 💄 🐷

pzrq · 2017-01-24T02:57:07Z

Thanks @fredtruman will take you up on that, definitely at least for @samweaver's request:

The + and trashcan icons need more highlight when mousing over the items in the side bar. They seem too dark at the moment unless you actually mouse over the icons themselves.

EDIT: COMPASS-705

Implementing: https://mongodb.invisionapp.com/share/6E9XJUCKW#/screens/213327458 The arrow needs to be moved to the left side of the menu to replace it in a future commit.

Designers can style pass later, e.g. not sure how to do the fade gradient in the top right instance area, the active parent child thing more cleanly or the specific circled plus icon inside another circle from: https://mongodb.invisionapp.com/share/6E9XJUCKW#/screens/213327444

Took me an hour with console.log() and console.trace() to finally realise what was really going on here.

…ests

pzrq · 2017-01-24T14:51:06Z

After fighting COMPASS-635, COMPASS-690, COMPASS-706 and COMPASS-707 for the last hour, going to just give in, set this ready for review and hope I am lucky later today.

This PR can be reviewed independently of the Travis issues above, and can be merged by Compass adminstrators (or we could stoop to restarting individual builds too).

satyasinha

LGTM, could use a style pass to move the create database icon to the bottom of the sidebar.

pzrq · 2017-01-24T23:45:01Z

could use a style pass to move the create database icon to the bottom of the sidebar.

@KeyboardTsundoku Please let @fredtruman know on COMPASS-705 👍

rueckstiess

Very nice, and unobtrusive (I feared it would be cluttered but the fact that the symbols only show on the hovered row avoids that).

Some small changes (I added the styling ones to COMPASS-705):

Require code changes:

Add a -is-disabled BEM class for all icons/button so that the styling can be different for disabled items.
Some tooltips include the database/collection name, some don't. I think it's pretty clear which database/collection is meant (it's the highlighted row, and you get another confirmation in the modal), so I would suggest to remove all database/collection names from tooltips and keep them very short and concise:
- Create Collection
- Drop Collection
- Drop Database
- The tooltip on the big "Create Database" button on the bottom is unnecessary, it just repeats what the button says.

Styling:

The tooltips should not be translucent, they should be opaque like all other tooltips.
The contrast is a little low on non-active rows (darker gray). The icons are barely visible.
For the create database icon in the "Instance Details View" at the top, I did not see that at all (contrast = 0). I only noticed it when going through the code :-)
on secondaries, the icons should not light up when hovering. The user should get the impression the icons are disabled.
on secondaries, the "Create Database" button should somehow be muted to indicate it's not active (disabled).

rueckstiess · 2017-01-25T00:17:49Z

src/internal-packages/sidebar/lib/components/sidebar-database.jsx

+          />
+          <ReactTooltip id={TOOLTIP_IDS.CREATE_COLLECTION} />
+          <i
+            className="compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o"


Let's pass in an additional BEM modifier class compass-sidebar-icon-is-disabled or similar when on secondary nodes so that @fredtruman can style disabled items differently.

This should be done on all create/drop icons and the big create database button

rueckstiess · 2017-01-25T00:21:56Z

src/internal-packages/sidebar/lib/components/sidebar.jsx

+  renderCreateDatabaseButton() {
+    const isWritable = app.dataService.isWritable();
+    const tooltipText = isWritable ?
+      'Create database' :


Big button does not need a tooltip "Create Database", because it just repeats what is on the button already. Only show the "...is not available..." tooltip when secondary.

rueckstiess · 2017-01-25T00:23:07Z

src/internal-packages/sidebar/lib/components/sidebar-collection.jsx

    const collectionName = this.getCollectionName();
+    const isWritable = app.dataService.isWritable();
+    const tooltipText = isWritable ?
+      `Drop ${this.props.database}.${collectionName} collection` :


Just "Drop Collection"

rueckstiess · 2017-01-25T00:23:25Z

src/internal-packages/sidebar/lib/components/sidebar-database.jsx

+      'data-tip': createTooltipText
+    };
+    const dropTooltipText = isWritable ?
+      `Drop ${this.props._id} database` :


Just "Drop Database"

Also disambiguate other tooltip parameters.

…tips

rueckstiess · 2017-01-25T04:37:47Z

Looks good, nice job!

pzrq · 2017-01-25T04:54:52Z

Awesome, merging.

Thanks @rueckstiess @KeyboardTsundoku @fredtruman @samweaver 👍

pzrq added the work in progress label Jan 16, 2017

pzrq force-pushed the COMPASS-558-ddl-buttons branch from b01eee6 to 08b7485 Compare January 16, 2017 07:19

pzrq force-pushed the COMPASS-558-ddl-buttons branch from 08b7485 to 6cfb4d7 Compare January 17, 2017 00:50

pzrq changed the title ~~COMPASS-558 Add DDL buttons~~ [WIP] COMPASS-558 Add DDL buttons Jan 17, 2017

pzrq force-pushed the COMPASS-558-ddl-buttons branch 4 times, most recently from 7e21e43 to 694c66e Compare January 20, 2017 05:50

pzrq mentioned this pull request Jan 20, 2017

COMPASS-665 Decouple DDL into new package #752

Merged

pzrq force-pushed the COMPASS-558-ddl-buttons branch from 694c66e to 2017b08 Compare January 20, 2017 06:50

pzrq mentioned this pull request Jan 21, 2017

COMPASS 685: fix flexbox redesign #749

Merged

pzrq force-pushed the COMPASS-558-ddl-buttons branch 3 times, most recently from d1d1e9f to 87030c0 Compare January 24, 2017 02:31

pzrq added 5 commits January 24, 2017 14:33

Sidebar: Remove DB icon

50bb314

Implementing: https://mongodb.invisionapp.com/share/6E9XJUCKW#/screens/213327458 The arrow needs to be moved to the left side of the menu to replace it in a future commit.

Sidebar: Move clickable arrow to left side

d1237e2

Add create/drop tooltips

c1b8b08

Implement handleCreateDatabaseClick

94bf01b

pzrq force-pushed the COMPASS-558-ddl-buttons branch from 87030c0 to 4195fb8 Compare January 24, 2017 03:33

pzrq added 4 commits January 24, 2017 16:32

Resolve import vs run time issue by using beforeEach

88f5b84

Took me an hour with console.log() and console.trace() to finally realise what was really going on here.

Fix failing enzyme tests by mocking the AppRegistry

3b3dd3c

Implement handleCreateCollectionClick

de759b4

Implement handleDropDBClick

e4a2fa5

pzrq added 2 commits January 25, 2017 00:23

CreateDBButton: Add tooltip and handle secondaries/arbiters + tests

1d9a4c0

DropCollectionIcon: Handle secondaries/arbiters + tests

b71989d

pzrq force-pushed the COMPASS-558-ddl-buttons branch 5 times, most recently from bf395ca to 664ca29 Compare January 24, 2017 14:46

AddCollectionIcon & DropDatabaseIcon: Handle secondaries/arbiters + t…

5da030e

…ests

pzrq force-pushed the COMPASS-558-ddl-buttons branch from 664ca29 to 5da030e Compare January 24, 2017 14:48

pzrq changed the title ~~[WIP] COMPASS-558 Add DDL buttons~~ COMPASS-558 Add DDL buttons Jan 24, 2017

pzrq added ready for review and removed work in progress labels Jan 24, 2017

pzrq requested review from rueckstiess and satyasinha January 24, 2017 14:53

fredtruman mentioned this pull request Jan 24, 2017

Compass-588 & COMPASS-683: Custom Scrollbars + Collapsed Sidebar Update #763

Merged

satyasinha approved these changes Jan 24, 2017

View reviewed changes

rueckstiess suggested changes Jan 25, 2017

View reviewed changes

pzrq added 6 commits January 25, 2017 11:49

Remove db/collection names from tooltips

2325d8d

Only show Create Database Button tooltip when connected to a secondary

5588c88

Add compass-sidebar-icon-is-disabled CSS classes for secondary tooltips

0c25d47

Also disambiguate other tooltip parameters.

Add compass-sidebar-button-is-disabled CSS classes for secondary tool…

a6d0223

…tips

👕

d1c0502

Remove unnecessary tooltip CSS class

30cdf9b

rueckstiess approved these changes Jan 25, 2017

View reviewed changes

pzrq merged commit bfc2e50 into master Jan 25, 2017

pzrq deleted the COMPASS-558-ddl-buttons branch January 25, 2017 04:54

COMPASS-558 Add DDL buttons #745

COMPASS-558 Add DDL buttons #745

Uh oh!

Conversation

pzrq commented Jan 16, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Mock Up

Screenshots

Tasks Done

Uh oh!

satyasinha commented Jan 16, 2017

Uh oh!

samweaver-zz commented Jan 16, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rueckstiess commented Jan 17, 2017

Uh oh!

samweaver-zz commented Jan 17, 2017 via email

Uh oh!

fredtruman commented Jan 24, 2017

Uh oh!

pzrq commented Jan 24, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pzrq commented Jan 24, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

satyasinha left a comment

Choose a reason for hiding this comment

Uh oh!

pzrq commented Jan 24, 2017

Uh oh!

rueckstiess left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rueckstiess Jan 25, 2017

Choose a reason for hiding this comment

Uh oh!

rueckstiess Jan 25, 2017

Choose a reason for hiding this comment

Uh oh!

rueckstiess Jan 25, 2017

Choose a reason for hiding this comment

Uh oh!

rueckstiess Jan 25, 2017

Choose a reason for hiding this comment

Uh oh!

rueckstiess commented Jan 25, 2017

Uh oh!

pzrq commented Jan 25, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

pzrq commented Jan 16, 2017 •

edited

Loading

samweaver-zz commented Jan 16, 2017 •

edited

Loading

pzrq commented Jan 24, 2017 •

edited

Loading

pzrq commented Jan 24, 2017 •

edited

Loading

rueckstiess left a comment •

edited

Loading