Skip to content

Add Snackbar for Invalid Links.#912

Merged
swissspidy merged 5 commits intomasterfrom
bug/806-snackbar-if-link-is-invalid
Apr 1, 2020
Merged

Add Snackbar for Invalid Links.#912
swissspidy merged 5 commits intomasterfrom
bug/806-snackbar-if-link-is-invalid

Conversation

@obetomuniz
Copy link
Copy Markdown
Contributor

@obetomuniz obetomuniz commented Mar 31, 2020

Fixes #806

Kapture-2020-03-31-at-16 36 37

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 31, 2020

Size Change: +3.19 kB (0%)

Total Size: 510 kB

Filename Size Change
assets/js/edit-story.js 440 kB +3.19 kB (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 3.01 kB 0 B
assets/css/stories-dashboard.css 206 B 0 B
assets/js/stories-dashboard.js 67.3 kB 0 B

compressed-size-action

@wassgha
Copy link
Copy Markdown
Contributor

wassgha commented Mar 31, 2020

/cc @samitron7

Copy link
Copy Markdown
Contributor

@barklund barklund left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few comments.

if (!isValidUrl(urlWithProtocol)) {
return;
}
const invalidLinkMessage = __('This is an invalid link!', 'web-stories');
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just "This"? Maybe we should show the url in the snackbar too?

    const invalidLinkMessage = __('The following is not a valid link: %s', 'web-stories');

And then:

          showSnackbar({
            message: sprintf(invalidLinkMessage, url),
          });

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure! I will update.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it the expected result @barklund ? What about that blank space?

Kapture 2020-03-31 at 18 16 43

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, but perhaps validate with @pbakaus or @samitron7.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really like the URL there tbh, feels uncessary and makes the tooltip bigger than it should be

@obetomuniz obetomuniz added Type: Bug Something isn't working Type: Enhancement New feature or improvement of an existing feature labels Apr 1, 2020
@googlebot
Copy link
Copy Markdown

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

@googlebot googlebot added cla: no and removed cla: yes labels Apr 1, 2020
@miina
Copy link
Copy Markdown
Contributor

miina commented Apr 1, 2020

@googlebot I consent.

@googlebot
Copy link
Copy Markdown

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

@googlebot googlebot added cla: yes and removed cla: no labels Apr 1, 2020
@miina
Copy link
Copy Markdown
Contributor

miina commented Apr 1, 2020

One note: with the dark theme that we have in the editor, I didn't even notice the Snackbar message at all until I started looking for it specifically since I knew it had to come with the PR.

UX question: Could the Snackbar message perhaps be closer to the link or be with a different color to stand out from the dark theme?

The location of the Snackbar is a bit risky since it's on top of Media (at least on my screen) and the images below that could disguise it well -- that's not in our control what kind of images the user has.

Not sure the current messaging is accessible in terms of being visually well noticeable especially while the focus of the user is on the link area of the editor (the opposite side). Thoughts?
Screenshot 2020-04-01 at 17 11 35

cc @pbakaus @samitron7

@miina
Copy link
Copy Markdown
Contributor

miina commented Apr 1, 2020

@obetomuniz The PHP tests seem to need an update as well. Can do that in a bit.

@swissspidy swissspidy merged commit 2f040b1 into master Apr 1, 2020
@swissspidy swissspidy deleted the bug/806-snackbar-if-link-is-invalid branch April 1, 2020 18:00
obetomuniz added a commit that referenced this pull request Apr 1, 2020
* master: (56 commits)
  Add Snackbar for Invalid Links. (#912)
  Renamed files to make more sense, updated aria-label.
  Finished initial pass on Dashboard My Stories Page UI Grid View
  Update react-moveable and disable snap digits again (#941)
  Template Animation: Added move and repeater animation (#618) (#881)
  Fix storybook hierarchy (#939)
  Fix spinner / progress bar when saving (#937)
  Change placeholder text for pre-publish panel (#934)
  Bump @ampproject/toolbox-optimizer from 2.0.1 to 2.1.0 (#931)
  Bump eslint-plugin-testing-library from 3.0.1 to 3.0.2 (#932)
  Fix Document panel crashing (#930)
  Fix deployment (#928)
  Update URL when publishing post. (#836)
  Fix multiple warnings and proptype issues (#929)
  Added scroll behavior to layer panel when reordering by mouse (#551)
  Fix forms events in Firefox (#875)
  Add save story error message (#888)
  lints
  fixed tests
  font size calculations fixed
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Bug Something isn't working Type: Enhancement New feature or improvement of an existing feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show error if chosen Link has errored on the server-side

8 participants