Adjust UX in new folder/file creation dialog by PVince81 · Pull Request #1938 · owncloud/web

PVince81 · 2019-09-09T10:14:35Z

Description

empty name now shows an error
added default value
added placeholder text

Related Issue

Fixes [IE11-QA] Missing warning message when File name is empty #1231

Motivation and Context

See ticket

How Has This Been Tested?

Manual test:

TEST: empty file shows error message
TEST: empty file shows placeholder
TEST: initial file name is set
TEST: empty folder shows error message
TEST: empty folder shows placeholder
TEST: initial folder name is set

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Technical debt
Tests

Checklist:

Code changes
Unit tests added
Acceptance tests added
Documentation ticket raised:

Open tasks:

TODO: fix default file/folder name issue
TODO: update acceptance tests

PVince81 · 2019-09-09T10:15:54Z

@LukasHirt I'll need your help to debug the value/input value issue.

I tried passing in a default value for the text using either :value or :inputValue but it seems it's not getting set in the dialog. It's always empty. I wonder if there is a mix up between property name and data name.

PVince81 · 2019-09-09T15:43:00Z

I've added automated tests

ownclouders · 2019-09-09T15:46:20Z

💥 Acceptance tests webUITrashbin failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5041/

ownclouders · 2019-09-09T15:50:17Z

💥 Acceptance tests failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5041/

ownclouders · 2019-09-09T15:50:24Z

💥 Acceptance tests failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5041/

ownclouders · 2019-09-09T15:53:30Z

💥 Acceptance tests webUIRenameFiles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5041/

ownclouders · 2019-09-09T16:06:55Z

💥 Acceptance tests webUIFiles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5041/

ownclouders · 2019-09-09T16:10:49Z

💥 Acceptance tests webUIFiles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5042/

ownclouders · 2019-09-09T16:17:04Z

💥 Acceptance tests webUIRenameFiles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5042/

PVince81 · 2019-09-10T07:18:05Z

but the screenshot does show the alert box ?!

LukasHirt · 2019-09-10T08:42:07Z

I'll need your help to debug the value/input value issue.

I'll take a look.

LukasHirt · 2019-09-10T08:47:45Z

@PVince81 The problem with the value is that it's not passed as a prop. If you use only :value then you are assigning the value to the dialog container. To assign it to the input you need to create a value prop and then pass it into the input.

PVince81 · 2019-09-10T08:52:07Z

create a value prop

@LukasHirt there is already a property called "value". Or do you mean I need to pass it as "value=xxx" without the colon ?

PVince81 · 2019-09-10T08:52:35Z

or is the property passing around missing inside the oc dialog prompt maybe ?

PVince81 · 2019-09-10T09:37:34Z

raise issue for "+ new" button randomly failing to be found because there are two elements with the same id in the DOM

LukasHirt · 2019-09-10T09:37:53Z

value=xxx

With this you'd lose the variable and it would write the string directly without translations

or is the property passing around missing inside the oc dialog prompt maybe ?

Yes, the value is in the oc-text-input component but is not being assigned in the dialog component. The input then doesn't know about the value.

PVince81 · 2019-09-10T09:42:33Z

@LukasHirt but the "oc-text-input" is using "inputValue" as model and I see it being copied around in the code below the template. I tried evaluating both and none is set from outside despite :value='xxx'

PVince81 · 2019-09-10T09:45:36Z

according to https://github.com/owncloud/phoenix/blob/newfiledialog-adjust-ux/apps/files/src/components/ocDialogPrompt.vue#L73 this would copy value to inputValue.

However for some reason this.value is empty despite it being listed as property. This is the part I don't understand well. Maybe setting with ":value" is not the correct way ?

LukasHirt · 2019-09-10T09:50:30Z

but the "oc-text-input" is using "inputValue" as model

But since inputValue is not a prop but data you can't the value inside from different component. Unless you'd use mixin which would need changes and wouldn't make much sense to be used here.

PVince81 · 2019-09-10T09:51:49Z

@LukasHirt see my last comment. The value is being copied from this.value but this.value is always empty for some reason.

PVince81 · 2019-09-10T10:02:25Z

From what I see the rename dialog is receiving a value and it works. I'll check how that one is doing it. Apparently it doesn't use the "value" property directly in the markup.

PVince81 · 2019-09-10T10:17:53Z

Default value is now fixed using the same approach as rename dialog.

ownclouders · 2019-09-10T10:39:21Z

💥 Acceptance tests failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5047/

ownclouders · 2019-09-10T10:42:23Z

💥 Acceptance tests failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5047/

ownclouders · 2019-09-10T10:51:50Z

💥 Acceptance tests webUIFiles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/5047/

LukasHirt · 2019-09-10T12:01:13Z

From what I see the rename dialog is receiving a value and it works. I'll check how that one is doing it. Apparently it doesn't use the "value" property directly in the markup.

It takes v-model as a value. If you would want to write directly value without the prop it would need to have input as the root node. Sorry for not mentioning this earlier. It completely slipped my mind.

- empty name now shows an error - added default value - added placeholder text

Use class name instead of id for the oc-dialog alert prompt element, because Selenium would not see the element if there are multiple elements with the same id, even if the others are invisible.

When calling clearValue(), Vue's v-model do not detect any change events so the "empty folder name" validation fails to trigger. This adds a workaround with a new custom command clearValueWithEvent() that will simulate clearing the field with keyboard keys instead of programmatically.

Tests fail randomly when the test runner would click on the "+ new" file menu before it becomes enabled. This extends the selector to wait for an enabled button to appear before clicking.

PVince81 · 2019-09-10T13:33:00Z

What an adventure! Just dealt with random failures which are fixed now:

there was an issue with clearValue() not triggering events, see .setValue not working after .clearValue nightwatchjs/nightwatch#1132
also there was an issue with the "+ new" button that was not always enabled when the test runner clicked it, so it was sometimes waiting forever for the dropdown to open

PVince81 · 2019-09-12T07:51:01Z

This is ready for review

LukasHirt

Looks good 👍

PVince81 · 2019-09-12T10:24:14Z

I'd also like to know if my additions to the testing code are ok @individual-it

PVince81 requested a review from LukasHirt September 9, 2019 10:14

PVince81 self-assigned this Sep 9, 2019

PVince81 mentioned this pull request Sep 9, 2019

[IE11-QA] Missing warning message when File name is empty #1231

Closed

PVince81 force-pushed the newfiledialog-adjust-ux branch from 7d60057 to 0d072ab Compare September 9, 2019 15:42

PVince81 force-pushed the newfiledialog-adjust-ux branch from 5fd395a to 9739443 Compare September 10, 2019 10:17

PVince81 marked this pull request as ready for review September 10, 2019 10:18

PVince81 requested a review from DeepDiver1975 as a code owner September 10, 2019 10:18

Vincent Petry added 4 commits September 10, 2019 15:31

Adjust UX in new folder/file creation dialog

a1df595

- empty name now shows an error - added default value - added placeholder text

Make sure the oc-dialog alert prompt can be found

cba338d

Use class name instead of id for the oc-dialog alert prompt element, because Selenium would not see the element if there are multiple elements with the same id, even if the others are invisible.

Wait for new file menu to be enabled before clicking

e300128

Tests fail randomly when the test runner would click on the "+ new" file menu before it becomes enabled. This extends the selector to wait for an enabled button to appear before clicking.

PVince81 force-pushed the newfiledialog-adjust-ux branch from f6d5115 to e300128 Compare September 10, 2019 13:32

PVince81 requested a review from individual-it September 10, 2019 13:36

LukasHirt approved these changes Sep 12, 2019

View reviewed changes

individual-it approved these changes Sep 12, 2019

View reviewed changes

PVince81 merged commit ccc819e into master Sep 12, 2019

delete-merged-branch Bot deleted the newfiledialog-adjust-ux branch September 12, 2019 10:56

Uh oh!

Conversation

PVince81 commented Sep 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Open tasks:

Uh oh!

PVince81 commented Sep 9, 2019

Uh oh!

PVince81 commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

ownclouders commented Sep 9, 2019

Uh oh!

PVince81 commented Sep 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LukasHirt commented Sep 10, 2019

Uh oh!

LukasHirt commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

LukasHirt commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

LukasHirt commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

ownclouders commented Sep 10, 2019

Uh oh!

ownclouders commented Sep 10, 2019

Uh oh!

ownclouders commented Sep 10, 2019

Uh oh!

LukasHirt commented Sep 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PVince81 commented Sep 10, 2019

Uh oh!

PVince81 commented Sep 12, 2019

Uh oh!

LukasHirt left a comment

Choose a reason for hiding this comment

Uh oh!

PVince81 commented Sep 12, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

PVince81 commented Sep 9, 2019 •

edited

Loading

PVince81 commented Sep 10, 2019 •

edited

Loading

LukasHirt commented Sep 10, 2019 •

edited

Loading