Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[App Search] Misc credentials key UI enhancements #81817

Merged
merged 4 commits into from
Dec 23, 2020

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Oct 27, 2020

Summary

When I was doing a final QA pass of the credentials view, I noticed some minor UI/UX things that were bugging me a little, so I tackled them in a separate commit 😅 Screencaps will be listed below on individual commits.

This is a Draft PR because the last commit is still waiting to use a recent EUI change. I'll un-draft the PR once Kibana updates to it. @JasonStoltz I'm assigning to you mostly as an FYI and to get your early eyes on it in case you have any thoughts!

Checklist

@cee-chen cee-chen added Feature:Plugins release_note:skip Skip the PR/issue when compiling release notes v7.11 labels Oct 27, 2020
@@ -40,6 +40,7 @@ export const CredentialsList: React.FC = () => {
{
name: 'Key',
width: '36%',
className: 'eui-textBreakAll',
Copy link
Member Author

Choose a reason for hiding this comment

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

Before:

_before2 _before1

After:

_after2 _after1

Comment on lines 64 to 67
mobileOptions: {
width: '100%',
},
Copy link
Member Author

Choose a reason for hiding this comment

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

Ideally this produces this (much nicer) mobile UI layout:

_idealworld

However - this API isn't in yet. See elastic/eui#4168 as to why the fullWidth: true prop doesn't work.

I'll undraft this PR once elastic/eui#4169 is in Kibana.

Copy link
Member

Choose a reason for hiding this comment

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

Awesome!

@timroes timroes added v7.11.0 and removed v7.11 labels Oct 29, 2020
@@ -25,7 +25,9 @@ export const HiddenText: React.FC<IProps> = ({ text, children }) => {
defaultMessage: 'Hidden text',
});
const hiddenText = isHidden ? (
<span aria-label={hiddenLabel}>{text.replace(/./g, '•')}</span>
<span aria-label={hiddenLabel}>
Copy link
Member

Choose a reason for hiding this comment

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

🤦

Copy link
Member

@JasonStoltz JasonStoltz left a comment

Choose a reason for hiding this comment

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

This looks great. Thank you for your attention to detail.

@cee-chen cee-chen force-pushed the credential-table-enhancements branch 2 times, most recently from 5d17432 to e892487 Compare December 22, 2020 19:52
@cee-chen cee-chen marked this pull request as ready for review December 22, 2020 19:52
@cee-chen cee-chen requested review from a team December 22, 2020 19:52
@cee-chen cee-chen added v7.12.0 and removed v7.11.0 labels Dec 22, 2020
@cee-chen cee-chen force-pushed the credential-table-enhancements branch from e892487 to b8a97e3 Compare December 22, 2020 20:49
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
enterpriseSearch 1.8MB 1.8MB +169.0B

Distributable file count

id before after diff
default 47260 48020 +760

History

  • 💔 Build #96060 failed e89248747ef8fe813efedb82c631ee847e99bc06
  • 💔 Build #96053 failed 5d17432a230c056917098f3f659592c9ed6fa53d
  • 💔 Build #84032 failed a0063435a7e4f0a8f1442dc811e547520f74b88e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@cee-chen cee-chen merged commit e389605 into elastic:master Dec 23, 2020
@cee-chen cee-chen deleted the credential-table-enhancements branch December 23, 2020 01:53
cee-chen pushed a commit that referenced this pull request Dec 23, 2020
* Fix screen reader still reading out bullet bullet bullet

* Even out horizontal spacing

* Break long password text

* Make EUI table cell full width on mobile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Plugins release_note:skip Skip the PR/issue when compiling release notes v7.12.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants