De-angularize DocViewer table layout #43240

kertal · 2019-08-14T05:09:59Z

Summary

Replaces Angular of the Table Tab that's displayed when you unfold a list entry at Discover, at Discover's Context and Discover's Doc view.

Part of #38646

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

…e-collapse

…/kibana into aaronoah-discover-table-collapse

…e-collapse

- to get rid of angular markup

…r-doc-table

- will be replaced with jest

…wer-table

elasticmachine · 2019-08-26T07:32:00Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

flash1293

LGTM, left some smallish comments but nothing really important. Tested in Chrome

flash1293 · 2019-08-26T07:26:03Z

src/legacy/core_plugins/kbn_doc_views/public/views/table/table.test.tsx

+import { flattenHitWrapper } from '../../../../data/public/index_patterns/index_patterns/flatten_hit';
+import { DocViewTable } from './table';
+
+// @ts-ignore


nit: Not sure what's preferable, but you can achieve the same thing with } as unknown as IndexPattern

when I'm using unknown, i get a typescript complaint the next line:

indexPattern.flattenHit

doing it the right way, would mean I'd to add more than 40 props. I've chosen the pragmatic way, but I'm open for improvements :)

src/legacy/core_plugins/kbn_doc_views/public/views/table/table.test.tsx

src/legacy/core_plugins/kbn_doc_views/public/views/table/table_helper.tsx

flash1293 · 2019-08-26T07:44:52Z

src/legacy/core_plugins/kibana/public/doc_viewer/_doc_viewer.scss

+
+.kbnDocViewer__field {
+  width: 160px;
+}

 .kbnDocViewer__actionButton {


Really small thing, but the way the buttons are hidden is causing them to "stay" when you have clicked one and navigate away with the mouse which looks kinda strange:

I filtered for present on continent name and then navigated away to the gender row, but the present filter stays focussed and thus visible. Initially I thought this happened on purpose and was some kind of state (if the filter is active, the button is shown all the time() and was confused it disappeared when doing something else.

agreed, removed the opacity:1 of the elements focus state
FYI: @cchaos & @ryankeairns

src/legacy/core_plugins/kbn_doc_views/public/views/table/table_row.tsx

flash1293 · 2019-08-26T07:49:02Z

src/legacy/core_plugins/kbn_doc_views/public/views/table/table_row_icon_underscore.tsx

+        />
+      }
+    >
+      <i


Maybe use IconTip here instead? https://elastic.github.io/eui/#/display/tooltip

good catch, another font awesome usage dependency removed:

src/legacy/core_plugins/kbn_doc_views/public/views/table/table_helper.tsx

elasticmachine · 2019-08-26T11:24:23Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-26T15:30:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

kertal · 2019-08-26T15:40:10Z

src/legacy/core_plugins/kbn_doc_views/public/views/table/table_helper.test.ts

+      </React.Fragment>
+    `);
+  });
+});


FYI @flash1293 Additionally to the changes you suggested, I've added Jest tests for the helper functions

elasticmachine · 2019-08-26T17:04:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns

👍 The new icons looks good! Thanks for removing the fontawesome icons :)

kertal · 2019-08-26T17:26:05Z

@cchaos are there more changes to be done? got still the _1 change requested_state. thx!

* Convert component to React * EUI-ficate buttons, warnings and collapse button * Add jest tests

aaronoah and others added 30 commits February 21, 2019 20:30

Add large field collapse for doc viewer table rows in Discover

972203e

remove extra collapse button wrapper

79d9a1b

Merge branch 'master' of github.com:elastic/kibana into discover-tabl…

3aae380

…e-collapse

Merge branch 'discover-table-collapse' of https://github.com/aaronoah…

71e35a6

…/kibana into aaronoah-discover-table-collapse

Merge branch 'master' of github.com:elastic/kibana into discover-tabl…

2b83ecd

…e-collapse

Reposition toggle button, remove Array warning

6f96c08

Merge branch 'master' of github.com:elastic/kibana into discover-tabl…

0a9193d

…e-collapse

Merge branch 'master' into aaronoah-discover-table-collapse

2f135c8

Merge branch 'master' of github.com:elastic/kibana into discover-tabl…

9cbd9b5

…e-collapse

Initial Commit

1f8f678

Extend formatHitProvider to format type 'text'

62add87

- to get rid of angular markup

Add FieldName React Component

9f18984

Merge remote-tracking branch 'upstream/master' into kertal-pr-discove…

ab9d37f

…r-doc-table

Add angular tab

045957e

Add render tab

f63c2ff

Refactore docViewer directive

cf06aec

Migrate DocViewerAngularTab to typescript

4d8ecb7

Move data-test-subj in htmls

5144985

Add component property for DocViewer tab

d621799

JSON tab adaption to use component prop

996cb48

Refactor Table tab to compile and render angular

65ab0f2

Adaption of tests

8933e30

Remove unused variable

29a37f3

Move angular helper function to seperate file

1e57bed

Convert to typescript

479f711

Refactor DocViewsRegistryProvider -> slim version

93ebaf4

Fix merge conflict

bf8844e

Remove doc_viewer browser tests

96fcf0a

- will be replaced with jest

Remove browser test to be replaced by jest

cd7e6c5

Convert more files to TypeScript, refactor types

f14523a

kertal added 3 commits August 23, 2019 22:30

Merge remote-tracking branch 'upstream/master' into kertal-pr-doc_vie…

e4f20a1

…wer-table

Improve action buttons

d13c6f1

Merge remote-tracking branch 'upstream/master' into kertal-pr-doc_vie…

9f31c9a

…wer-table

elastic deleted a comment from elasticmachine Aug 26, 2019

kertal requested review from ryankeairns and cchaos August 26, 2019 06:17

flash1293 approved these changes Aug 26, 2019

View reviewed changes

kertal added 5 commits August 26, 2019 10:31

Add jest tests for helper functions

9756d3f

Typescript improvements

2a55976

Remove focus opacity 1 of action buttons

b759b3f

Convert warnings to use EuiIconTip

15768db

Remove redundant code duplication

00d889f

Fix test for fields with no mapping

81e9a7c

kertal commented Aug 26, 2019

View reviewed changes

ryankeairns approved these changes Aug 26, 2019

View reviewed changes

cchaos approved these changes Aug 26, 2019

View reviewed changes

kertal merged commit b7bba21 into elastic:master Aug 27, 2019

kertal added a commit to kertal/kibana that referenced this pull request Aug 27, 2019

De-angularize DocViewer table layout (elastic#43240)

ed2d500

* Convert component to React * EUI-ficate buttons, warnings and collapse button * Add jest tests

kertal mentioned this pull request Aug 27, 2019

[7.x] De-angularize DocViewer table layout (#43240) #44065

Merged

kertal added a commit that referenced this pull request Aug 27, 2019

De-angularize DocViewer table layout (#43240) (#44065)

bb6fdf5

* Convert component to React * EUI-ficate buttons, warnings and collapse button * Add jest tests

simianhacker pushed a commit to simianhacker/kibana that referenced this pull request Aug 27, 2019

De-angularize DocViewer table layout (elastic#43240)

e8c7406

* Convert component to React * EUI-ficate buttons, warnings and collapse button * Add jest tests

cchaos mentioned this pull request Aug 27, 2019

Tooltip partially hidden #42535

Closed

alexwizp mentioned this pull request Oct 22, 2019

Set values as html to table rows #48911

Merged

7 tasks

kertal mentioned this pull request Oct 25, 2019

Fix missing html formatting in Doc_Viewer #49326

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

De-angularize DocViewer table layout #43240

De-angularize DocViewer table layout #43240

kertal commented Aug 14, 2019 •

edited

Loading

elasticmachine commented Aug 26, 2019

flash1293 left a comment

flash1293 Aug 26, 2019

kertal Aug 26, 2019

flash1293 Aug 26, 2019

kertal Aug 26, 2019

flash1293 Aug 26, 2019

kertal Aug 26, 2019

elasticmachine commented Aug 26, 2019

elasticmachine commented Aug 26, 2019

kertal Aug 26, 2019

elasticmachine commented Aug 26, 2019

ryankeairns left a comment

kertal commented Aug 26, 2019

De-angularize DocViewer table layout #43240

De-angularize DocViewer table layout #43240

Conversation

kertal commented Aug 14, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Aug 26, 2019

💚 Build Succeeded

flash1293 left a comment

Choose a reason for hiding this comment

flash1293 Aug 26, 2019

Choose a reason for hiding this comment

kertal Aug 26, 2019

Choose a reason for hiding this comment

flash1293 Aug 26, 2019

Choose a reason for hiding this comment

kertal Aug 26, 2019

Choose a reason for hiding this comment

flash1293 Aug 26, 2019

Choose a reason for hiding this comment

kertal Aug 26, 2019

Choose a reason for hiding this comment

elasticmachine commented Aug 26, 2019

💔 Build Failed

elasticmachine commented Aug 26, 2019

💔 Build Failed

kertal Aug 26, 2019

Choose a reason for hiding this comment

elasticmachine commented Aug 26, 2019

💚 Build Succeeded

ryankeairns left a comment

Choose a reason for hiding this comment

kertal commented Aug 26, 2019

kertal commented Aug 14, 2019 •

edited

Loading