Standardizing IconField implementation across the app #47196

majagrubic · 2019-10-03T09:46:17Z

Summary

Related to: #46450.
This PR:

adds a new FieldIcon component based on the previous FieldNameIcon component to be used across the app
creates a new LensFieldIcon component as a lightweight wrapper around the component around the FieldIcon created in previous step
makes use of the new LensFieldIcon component in Lens components
makes use of the new FieldIcon component in other components

Cleanup of the old components is not done here and will be addressed in the subsequent PR.

Some screenshots with the new icon:

Lens

Before:

After:

Discover

Before:

After:

Graph

Before:

After:

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
~~[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~[ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

…bana_react directory

…ed in Lens components

elasticmachine · 2019-10-03T10:19:01Z

Pinging @elastic/kibana-app (Team:KibanaApp)

elasticmachine · 2019-10-03T11:22:21Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 7364649

flash1293

This looks mostly good to me, had some smaller comments that you could look into.

x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx

flash1293 · 2019-10-03T12:04:54Z

x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx

+import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
+import { DataType } from '../types';
+
+function stringToNum(s: string) {


I would like to get ride of this complete logic - the typeToEuiIconMap in src/plugins/kibana_react/public/icon/field_icon.tsx should provide the same information so we don't have to do this workaround here anymore with looking up an icon from a field type and then using it as an index for the color palette.

This is used in FieldItem to determine the color for BarSeries:

kibana/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

Line 364 in 2b03cf7

const expectedColor = getColorForDataType(field.type);

I think leaving the function inside lens_field_icon makes sense, but just change it so that it uses typeToEuiIconMap internally.

flash1293 · 2019-10-03T12:06:15Z

x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx

+export function LensFieldIcon({ type }: { type: DataType }) {
+  const classes = classNames(
+    'lnsFieldListPanel__fieldIcon',
+    `lnsFieldListPanel__fieldIcon--${type}`


I know this didn't change in this PR but the lnsFieldListPanel__fieldIcon--${type} class name is not referenced anywhere (only in tests), so it makes sense to remove it.

flash1293 · 2019-10-03T12:07:45Z

src/plugins/kibana_react/public/icon/field_icon.tsx

@@ -24,7 +24,7 @@ interface IconMapEntry {
  icon: string;
  color: string;
 }
-interface FieldNameIconProps {
+interface FieldIconProps {


can we also call the folder field_icon together with the component? I'm sure it's not done consistently across the app but if the folder mainly exports a single component it should be called like the component

elasticmachine · 2019-10-03T12:36:01Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3d87a04

elasticmachine · 2019-10-03T15:29:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 8015ae3

flash1293

LGTM, great work 👍

elasticmachine · 2019-10-04T15:42:13Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 347948e

* Moving FieldNameIcon implementation to FieldIcon implementation in kibana_react directory * Adding LensFieldIcon implementation around the new FieldIcon to be used in Lens components * Applying new LensFieldIcon in the Lens components * Applying new FieldIcon component in Graph components * Applying new FieldIcon component in the rest of the components * Adding missing type to lens field icon * adding missing type * Addressing PR comments

… into console-token-iterator * 'console-token-iterator' of github.com:jloleysens/kibana: (184 commits) [functional/services] update webdriver lib and types (elastic#47381) Standardizing IconField implementation across the app (elastic#47196) Move ui/value_suggestions ⇒ NP data plugin (elastic#45762) Remove ui/persisted_log - Part 2 (elastic#47236) Update gulp related packages (elastic#47421) Update dependency idx to ^2.5.6 (elastic#47399) try running fewer jobs in parallel on the same worker (elastic#47403) Update webpack related packages (elastic#47402) Update jsonwebtoken related packages (elastic#47400) Update gulp related packages (major) (elastic#46665) Update dependency prettier to ^1.18.2 (elastic#47340) Update dependency @types/puppeteer to ^1.20.1 (elastic#47339) Update dependency @elastic/elasticsearch to ^7.4.0 (elastic#47338) Update dependency tar-fs to ^1.16.3 (elastic#47341) [Code] Code Integrator Component (elastic#47180) [Canvas][i18n] Sidebar (elastic#46090) Generate uuid in task Manager as Kibana uuid may not yet have been initialised [Code] Embedded Code Snippet Component (elastic#47183) Revert "Add pipeline for flaky test runner job (elastic#46740)" SearchSource: fix docvalue_fields and fields intersection logic (elastic#46724) ...

majagrubic requested a review from a team October 3, 2019 09:46

majagrubic requested a review from a team as a code owner October 3, 2019 09:46

majagrubic changed the title ~~Maja/fix 46450~~ Standardizing IconField implementation across the app Oct 3, 2019

flash1293 self-requested a review October 3, 2019 10:01

Maja Grubic added 5 commits October 3, 2019 11:04

Moving FieldNameIcon implementation to FieldIcon implementation in ki…

c8e9f88

…bana_react directory

Adding LensFieldIcon implementation around the new FieldIcon to be us…

eefc57f

…ed in Lens components

Applying new LensFieldIcon in the Lens components

1815fc2

Applying new FieldIcon component in Graph components

22df74a

Applying new FieldIcon component in the rest of the components

7364649

majagrubic force-pushed the maja/fix-46450 branch from c6f3da0 to 7364649 Compare October 3, 2019 10:06

majagrubic added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label Oct 3, 2019

majagrubic added Feature:Lens release_note:skip Skip the PR/issue when compiling release notes v7.5.0 v8.0.0 labels Oct 3, 2019

Maja Grubic added 2 commits October 3, 2019 11:58

Adding missing type to lens field icon

2b03cf7

adding missing type

3d87a04

flash1293 reviewed Oct 3, 2019

View reviewed changes

Maja Grubic added 2 commits October 3, 2019 15:16

Addressing PR comments

8015ae3

Merge branch 'master' into maja/fix-46450

f01e70f

nreese mentioned this pull request Oct 3, 2019

[Maps] provide drag-n-drop support to order tooltip properties #46631

Merged

flash1293 approved these changes Oct 4, 2019

View reviewed changes

Maja Grubic added 2 commits October 4, 2019 15:17

Merge branch 'master' into maja/fix-46450

83d6808

Fixing merge conflict

347948e

mattkime approved these changes Oct 4, 2019

View reviewed changes

majagrubic merged commit 79b63e0 into elastic:master Oct 7, 2019

majagrubic deleted the maja/fix-46450 branch October 7, 2019 08:36

majagrubic mentioned this pull request Oct 7, 2019

[7.x] Standardizing IconField implementation across the app (#47196) #47441

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Standardizing IconField implementation across the app #47196

Standardizing IconField implementation across the app #47196

majagrubic commented Oct 3, 2019 •

edited

Loading

elasticmachine commented Oct 3, 2019

elasticmachine commented Oct 3, 2019

flash1293 left a comment

flash1293 Oct 3, 2019

majagrubic Oct 3, 2019

flash1293 Oct 3, 2019

flash1293 Oct 3, 2019

elasticmachine commented Oct 3, 2019

elasticmachine commented Oct 3, 2019

flash1293 left a comment

elasticmachine commented Oct 4, 2019

Standardizing IconField implementation across the app #47196

Standardizing IconField implementation across the app #47196

Conversation

majagrubic commented Oct 3, 2019 • edited Loading

Summary

Lens

Discover

Graph

Checklist

For maintainers

elasticmachine commented Oct 3, 2019

elasticmachine commented Oct 3, 2019

💔 Build Failed

flash1293 left a comment

Choose a reason for hiding this comment

flash1293 Oct 3, 2019

Choose a reason for hiding this comment

majagrubic Oct 3, 2019

Choose a reason for hiding this comment

flash1293 Oct 3, 2019

Choose a reason for hiding this comment

flash1293 Oct 3, 2019

Choose a reason for hiding this comment

elasticmachine commented Oct 3, 2019

💚 Build Succeeded

elasticmachine commented Oct 3, 2019

💚 Build Succeeded

flash1293 left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 4, 2019

💚 Build Succeeded

majagrubic commented Oct 3, 2019 •

edited

Loading