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

De-angularize and EUI-ficate Discover Context control elements #44474

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
031fcd5
Convert context loading button to react
kertal Aug 29, 2019
45cf0e8
Use react component, remove angular code
kertal Aug 29, 2019
1017a98
Create SizePicker react component
kertal Aug 30, 2019
44ace83
Add more Eui components
kertal Aug 30, 2019
c2b535c
Merge branch 'kertal-pr-convert-context-loading-button-to-react' into…
kertal Sep 2, 2019
b12b5c2
Merge LoadingButton and SizePicker to ActionBar
kertal Sep 2, 2019
2b9a38f
Merge remote-tracking branch 'upstream/master' into kertal-pr-convert…
kertal Sep 2, 2019
db36c16
Merge remote-tracking branch 'upstream/master' into kertal-pr-convert…
kertal Sep 3, 2019
6e7c45d
Rename scss + fix unused path
kertal Sep 3, 2019
923c481
Fix wrong scss import
kertal Sep 3, 2019
e8235b8
Adapt notes
kertal Sep 3, 2019
0996392
Adapt warning messages
kertal Sep 4, 2019
14ad456
Adapt older documents warning
kertal Sep 4, 2019
2db71e7
Add jest tests
kertal Sep 4, 2019
affb021
Merge remote-tracking branch 'upstream/master' into kertal-pr-convert…
kertal Sep 4, 2019
5ecc2c3
Visual and Textual changes
kertal Sep 5, 2019
283dced
Adapt Load button
kertal Sep 5, 2019
354b29a
vertical alignment and copy changes
ryankeairns Sep 5, 2019
5bbad0d
Merge pull request #1 from ryankeairns/kertal-pr-convert-context-size…
kertal Sep 5, 2019
7d1bc5f
Extract warnings to component
kertal Sep 6, 2019
766acec
Merge branch 'kertal-pr-convert-context-size-picker-to-react' of gith…
kertal Sep 6, 2019
582cf91
Fix invalid warningDocCount assignment
kertal Sep 6, 2019
ca2f0f7
Fix translations, add comments
kertal Sep 6, 2019
919a616
Switch older / younger warnings
kertal Sep 6, 2019
ce441dd
Remove step size of input and defaultStepSize
kertal Sep 6, 2019
b1c38ae
Merge remote-tracking branch 'upstream/master' into kertal-pr-convert…
kertal Sep 6, 2019
9534a11
Replace ActionBarType with SurrDocType + depended adaptions
kertal Sep 6, 2019
b130215
Use valueAsNumber instead of Number(value)
kertal Sep 6, 2019
9be7528
Add comment about CSS number input
kertal Sep 6, 2019
42c0ae5
Fix types in app.html
kertal Sep 6, 2019
0e3a0b5
Debounce input
kertal Sep 7, 2019
1f71e88
Migrate constants + state to typescript
kertal Sep 9, 2019
59ecff6
Merge remote-tracking branch 'upstream/master' into kertal-pr-convert…
kertal Sep 9, 2019
b72f197
Implement original behavior of input
kertal Sep 9, 2019
81aeb3b
Remove unused increaseCount functions + tests
kertal Sep 9, 2019
4070444
Improve check of valid inputs in the range of (MIN|MAX)_CONTEXT_SIZE
kertal Sep 10, 2019
3e2facb
Improve tests
kertal Sep 10, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions src/legacy/core_plugins/kibana/public/context/NOTES.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,9 @@ query status and results.
**query_parameters**: Exports the actions, reducers and selectors related to
the parameters used to construct the query.

**components/loading_button**: Defines the `<context-loading-button>`
**components/action_bar**: Defines the `<context-action-bar>`
directive including its respective styles.

**components/size_picker**: Defines the `<context-size-picker>`
directive including its respective styles.

**api/anchor.js**: Exports `fetchAnchor()` that creates and executes the
query for the anchor document.
Expand Down
2 changes: 1 addition & 1 deletion src/legacy/core_plugins/kibana/public/context/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
// cxtChart__legend--small
// cxtChart__legend-isLoading

@import 'components/size_picker/index';
@import 'components/action_bar/index';
103 changes: 22 additions & 81 deletions src/legacy/core_plugins/kibana/public/context/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,48 +62,19 @@
ng-if="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.FAILED"
>
<!-- Controls -->
<div class="kuiBar kuiVerticalRhythm">
<div class="kuiBarSection">
<context-loading-button
data-test-subj="predecessorLoadMoreButton"
is-disabled="![
contextApp.constants.LOADING_STATUS.LOADED,
contextApp.constants.LOADING_STATUS.FAILED,
].includes(contextApp.state.loadingStatus.predecessors.status)"
icon="'fa-chevron-up'"
ng-click="contextApp.actions.fetchMorePredecessorRows()"
>
<span
i18n-id="kbn.context.loadMoreDescription"
i18n-default-message="Load {defaultStepSize} more"
i18n-values="{
defaultStepSize: contextApp.state.queryParameters.defaultStepSize
}"
></span>
</context-loading-button>
<context-size-picker
count="contextApp.state.queryParameters.predecessorCount"
data-test-subj="predecessorCountPicker"
<context-action-bar
Copy link
Contributor

Choose a reason for hiding this comment

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

Not super important and I might be wrong about that, but isn't predecessors and successors used the wrong way? A predecessor is a thing that has been followed or replaced by another., so this should be the older documents, right? But here it is fetching the newer ones.

Copy link
Member Author

Choose a reason for hiding this comment

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

exactly, here predecessor are the docs that are displayed before the anchor, but I also do agree. I'd go with e.g. newer, older, I think then there are no more questions open. However, there's much more to refactor in this case, functions etc.
that's why I kept this heritage for now (but I'd like to change it in a future refactoring)

default-step-size="contextApp.state.queryParameters.defaultStepSize"
doc-count="contextApp.state.queryParameters.predecessorCount"
doc-count-available="contextApp.state.rows.predecessors.length"
is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
is-loading="![
contextApp.constants.LOADING_STATUS.LOADED,
contextApp.constants.LOADING_STATUS.FAILED,
].includes(contextApp.state.loadingStatus.predecessors.status)"
on-change-count="contextApp.actions.fetchGivenPredecessorRows"
></context-size-picker>
<span
i18n-id="kbn.context.newerDocumentsDescription"
i18n-default-message="newer documents"
></span>
<span
class="kuiStatusText kuiStatusText--warning"
ng-if="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
&& (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
>
<span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
<span ng-bind-template="Only {{ contextApp.state.rows.predecessors.length }} documents newer than the anchor could be found."></span>
</span>
</div>
type="'predecessors'"
></context-action-bar>

<div class="kuiBarSection">
</div>
</div>

<!-- Loading feedback -->
<div
Expand Down Expand Up @@ -139,46 +110,16 @@
</div>

<!-- Controls -->
<div class="kuiBar kuiVerticalRhythm">
<div class="kuiBarSection">
<context-loading-button
data-test-subj="successorLoadMoreButton"
is-disabled="![
contextApp.constants.LOADING_STATUS.LOADED,
contextApp.constants.LOADING_STATUS.FAILED,
].includes(contextApp.state.loadingStatus.successors.status)"
icon="'fa-chevron-down'"
ng-click="contextApp.actions.fetchMoreSuccessorRows()"
>
<span
i18n-id="kbn.context.loadMoreDescription"
i18n-default-message="Load {defaultStepSize} more"
i18n-values="{
defaultStepSize: contextApp.state.queryParameters.defaultStepSize
}"
></span>
</context-loading-button>
<context-size-picker
count="contextApp.state.queryParameters.successorCount"
data-test-subj="successorCountPicker"
is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
on-change-count="contextApp.actions.fetchGivenSuccessorRows"
></context-size-picker>
<div
i18n-id="kbn.context.olderDocumentsDescription"
i18n-default-message="older documents"
></div>
<span
class="kuiStatusText kuiStatusText--warning"
ng-if="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
&& (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
>
<span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
<span ng-bind-template="Only {{ contextApp.state.rows.successors.length }} documents older than the anchor could be found."></span>
</span>
</div>

<div class="kuiBarSection">
</div>
</div>
<context-action-bar
default-step-size="contextApp.state.queryParameters.defaultStepSize"
doc-count="contextApp.state.queryParameters.successorCount"
doc-count-available="contextApp.state.rows.successors.length"
is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
is-loading="![
contextApp.constants.LOADING_STATUS.LOADED,
contextApp.constants.LOADING_STATUS.FAILED,
].includes(contextApp.state.loadingStatus.successors.status)"
on-change-count="contextApp.actions.fetchGivenSuccessorRows"
type="'successors'"
></context-action-bar>
</main>
3 changes: 1 addition & 2 deletions src/legacy/core_plugins/kibana/public/context/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ import _ from 'lodash';
import { callAfterBindingsWorkaround } from 'ui/compat';
import { uiModules } from 'ui/modules';
import contextAppTemplate from './app.html';
import './components/loading_button';
import './components/size_picker/size_picker';
import './components/action_bar';
import { getFirstSortableField } from './api/utils/sorting';
import {
createInitialQueryParametersState,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.cxtSizePicker {
text-align: center;
width: $euiSize * 5;

&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none; // Hide increment and decrement buttons for type="number" input.
margin: 0;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import './action_bar';
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
import { ActionBar, ActionBarProps } from './action_bar';
// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';

describe('Test Discover Context ActionBar for successor | predecessor records', () => {
['successors', 'predecessors'].forEach(type => {
const onChangeCount = jest.fn();
const props = {
defaultStepSize: 5,
docCount: 20,
docCountAvailable: 0,
isDisabled: false,
isLoading: false,
onChangeCount,
type,
} as ActionBarProps;
const wrapper = mountWithIntl(<ActionBar {...props} />);

const input = findTestSubject(wrapper, `${type}CountPicker`);
const btn = findTestSubject(wrapper, `${type}LoadMoreButton`);

test(`${type}: Load button click`, () => {
btn.simulate('click');
expect(onChangeCount).toHaveBeenCalledWith(25);
});

test(`${type}: Load button click doesnt submit when MAX_CONTEXT_SIZE was reached`, () => {
onChangeCount.mockClear();
input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE } });
btn.simulate('click');
expect(onChangeCount).toHaveBeenCalledTimes(0);
});

test(`${type}: Count input change submits on blur`, () => {
input.simulate('change', { target: { valueAsNumber: 123 } });
input.simulate('blur');
expect(onChangeCount).toHaveBeenCalledWith(123);
});

test(`${type}: Count input change submits on return`, () => {
input.simulate('change', { target: { valueAsNumber: 124 } });
input.simulate('submit');
expect(onChangeCount).toHaveBeenCalledWith(124);
});

test(`${type}: Count input doesnt submits values higher than MAX_CONTEXT_SIZE `, () => {
onChangeCount.mockClear();
input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE + 1 } });
input.simulate('submit');
expect(onChangeCount).toHaveBeenCalledTimes(0);
});

test(`${type}: Count input doesnt submits values lower than MIN_CONTEXT_SIZE `, () => {
onChangeCount.mockClear();
input.simulate('change', { target: { valueAsNumber: MIN_CONTEXT_SIZE - 1 } });
input.simulate('submit');
expect(onChangeCount).toHaveBeenCalledTimes(0);
});

test(`${type}: Warning about limitation of additional records`, () => {
if (type === 'predecessors') {
expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
'No documents newer than the anchor could be found.'
);
} else {
expect(findTestSubject(wrapper, 'successorsWarningMsg').text()).toBe(
'No documents older than the anchor could be found.'
);
}
});
});
});
Loading