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.

Sign up for GitHub

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

Jump to bottom

[Graph] Empty workspace overlay #45547

Merged
merged 202 commits into from
Oct 3, 2019
Merged

[Graph] Empty workspace overlay #45547

merged 202 commits into from
Oct 3, 2019

Conversation

flash1293
Copy link
Contributor

@flash1293 flash1293 commented Sep 12, 2019 •
edited
Loading

Have overlays to guide the user to get something on the screen.

Adds a function to fetch the most common terms of the selected fields and prepopulate the workspace like that.

Screenshot 2019-09-24 at 15 26 14

cc @cchaos @shaunmcgough

@flash1293
create graph listing page
067158a
@flash1293
clean up app folder
5fddc10
@flash1293
remove inline loading menu
95f003b
@flash1293
also add badge to workspace route
ae44388
@flash1293
fix tests
2f1056f
@flash1293
fix graph spaces functional test
5d637f5
@flash1293
generate documentation for new breadcrumb property
9d17862
@flash1293
fix test subject names
db1d740
@flash1293
remove unused translations
e09b70d
@flash1293
start implementing save modal flow for Graph
2dab994
@flash1293
fix spaces functional test
c34d845
@flash1293
wip save modal
2d775e6
@flash1293
wip save modal
ebe80d1
@flash1293
add and style save modal
fab1577
@flash1293
add placeholder to description field
a9d31c8
@flash1293
Merge remote-tracking branch 'upstream/master' into graph/listing-page
9d2822e
@flash1293
Merge remote-tracking branch 'upstream/master' into graph/listing-page
d0b9247
@flash1293
disable dirty check on breadcrumb navigation and fix delete function
d187eae
@flash1293
Merge branch 'graph/listing-page' into graph/savemodal
21ba056
@flash1293
reactify most of settings
5d87a6a
@flash1293
improve onClick typing on breadcrumb
a289d7d
@flash1293
Merge branch 'graph/listing-page' into graph/savemodal
989481c
@flash1293
fix newline error and use new types in dashboard app controller
be1e59a
@flash1293
Merge branch 'graph/savemodal' into graph/settings
6ba958b
@flash1293
EUIify drilldown
4057edb
@flash1293
EUIify drilldown
611214e
@flash1293
fix translation errors
c5ac49b
@flash1293
fix i18n translation for real
8d6cec1
@flash1293
Merge remote-tracking branch 'upstream/master' into graph/savemodal
0472505
@flash1293
Merge branch 'graph/savemodal' into graph/settings
8012ac8
@flash1293
Copy link
Contributor Author

Thanks for your feedback. What about this version?

Screenshot 2019-09-30 at 14 26 14

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@miukimiu
Copy link
Contributor

Hi @flash1293,

I've been changing the design a little based on @timroes comments. Instead of using an opacity the text is now grayed out.

I would use a checkmark to help visualize where we are and once the task is done the check icon changes to a green checkInCircleFilled icon.

Here's the link to the updated prototype:
https://www.figma.com/proto/rDcLVEfYMNah0nVvfZz2w9/Graph-Let-s-get-started-2?node-id=46%3A79&viewport=-2080%2C365%2C0.5&scaling=min-zoom

@ryankeairns
Copy link
Contributor

@miukimiu for accessibility purposes (color contrast) the disabled text will need to be darker. That makes this more challenging of a problem to solve, but the light gray won't be readable.

The lightest gray we can use (which is not light 😏) is euiColorDarkShade. For reference, you can check the Colors page on the EUI docs site: https://elastic.github.io/eui/#/guidelines/colors

@miukimiu
Copy link
Contributor

Thanks @ryankeairns! My bad! I copied the color from the disabled button 😛. The prototype is now updated and using theeuiColorDarkShade.

@cchaos
Copy link
Contributor

cchaos commented Sep 30, 2019

An alternate suggestion for the current task icon is to use the sortRight arrow, so that it's pointing to the current step. I think the checkmark is still confusing as no matter what you pair next to it will always looks complete.

@flash1293
Copy link
Contributor Author

Thanks for all of your suggestions - this is getting a real team work :)

Screenshot 2019-09-30 at 19 32 53

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

snide
snide reviewed Oct 1, 2019
View reviewed changes
x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx Outdated
<EuiIcon type={state === 'active' ? 'sortRight' : 'check'} />
</span>
)}
{children}
Copy link
Contributor

Choose a reason for hiding this comment

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

Just to add to your review soup, wrap this in <EuiText/> to fix your text line heights.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@flash1293 flash1293 merged commit 127eab0 into elastic:master Oct 3, 2019
@flash1293 flash1293 deleted the graph/call-to-action branch October 3, 2019 09:13
flash1293 added a commit to flash1293/kibana that referenced this pull request Oct 3, 2019
@flash1293
[Graph] Empty workspace overlay (elastic#45547)
6006299
@flash1293 flash1293 mentioned this pull request Oct 3, 2019
Merged
jloleysens added a commit to jloleysens/kibana that referenced this pull request Oct 3, 2019
@jloleysens
Merge branch 'console-fix-menu-actions-alignment' of github.com:jlole…
db42ef0 
…ysens/kibana into console-fix-menu-actions-alignment

* 'console-fix-menu-actions-alignment' of github.com:jloleysens/kibana: (59 commits)
  [Canvas] i18n for page manager, page preview, and shape preview (elastic#46865)
  [SIEM] hide siem data on empty string or _all (elastic#47166)
  [Uptime] Shim UI exports for new platform (elastic#44722)
  [Monitoring] Metricbeat Migration Wizard Tests (elastic#47139)
  [Logs UI] Support partitioned log rate results in API (elastic#46751)
  [APM] Remove beta badge from transaction breakdown (elastic#47163)
  test: 💍 convert Interpreter font function tests to Jest (elastic#47193)
  visualizations 👉 NP-ready (elastic#47142)
  [Uptime] Update pings chart colors (elastic#46780)
  Add scroll into view to avoid tooltip overlap (elastic#47106)
  Variety of quick a11y fixes (elastic#46569)
  [Graph] Empty workspace overlay (elastic#45547)
  [ML] Converts index and saved search selection to React (elastic#47117)
  [Uptime] Change default status filter in ping list to all on monitor page  (elastic#47108)
  refactor: 💡 convert Interpreter .js -> .ts (elastic#44545)
  Add TypeScript rules to STYLEGUIDE [skip ci] (elastic#47125)
  chore(NA): fix logic behind cleaning x-pack node modules on build (elastic#47091)
  [SIEM] Update Settings Text (elastic#47147)
  Add KQL functionality in the find function of the saved objects (elastic#41136)
  [Maps] Add 'InjectedData' class and revise so File Upload Features are assigned to new InjectedData instances (elastic#46381)
  ...
flash1293 added a commit that referenced this pull request Oct 4, 2019
@flash1293
[Graph] Empty workspace overlay (#45547) (#47198)
7fe079d
@flash1293 flash1293 mentioned this pull request Oct 7, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@snide snide snide left review comments

@myasonik myasonik myasonik left review comments

@kertal kertal kertal approved these changes

@miukimiu miukimiu miukimiu approved these changes

@monfera monfera Awaiting requested review from monfera

@cchaos cchaos Awaiting requested review from cchaos

Assignees
No one assigned
Labels
Feature:Graph Graph application feature release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.5.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet