Skip to content

Commit

Permalink
Remove injectI18n in dashboard plugin. (#44580) (#44919)
Browse files Browse the repository at this point in the history 
* Removed injectI18n from dashboard listing

* Added helpers for I18nProvider

* Remove intl from DashboardCloneModal

* Remove intl from options.tsx

* Remove intl from DashboardSaveModal
  • Loading branch information
@stacey-gammon
stacey-gammon authored Sep 5, 2019
1 parent b4d200c commit 65850c7
Show file tree
Hide file tree
Showing 8 changed files with 159 additions and 162 deletions.
50 changes: 18 additions & 32 deletions src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,10 @@

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';

import {
EuiLink,
EuiButton,
EuiEmptyPrompt,
} from '@elastic/eui';
import { EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';

import { TableListView } from './../../table_list_view';

Expand All @@ -37,8 +33,7 @@ export const EMPTY_FILTER = '';
// and not supporting server-side paging.
// This component does not try to tackle these problems (yet) and is just feature matching the legacy component
// TODO support server side sorting/paging once title and description are sortable on the server.
class DashboardListingUi extends React.Component {

export class DashboardListing extends React.Component {
constructor(props) {
super(props);
}
Expand All @@ -54,21 +49,15 @@ class DashboardListingUi extends React.Component {
listingLimit={this.props.listingLimit}
initialFilter={this.props.initialFilter}
noItemsFragment={this.getNoItemsMessage()}
entityName={
i18n.translate('kbn.dashboard.listing.table.entityName', {
defaultMessage: 'dashboard'
})
}
entityNamePlural={
i18n.translate('kbn.dashboard.listing.table.entityNamePlural', {
defaultMessage: 'dashboards'
})
}
tableListTitle={
i18n.translate('kbn.dashboard.listing.dashboardsTitle', {
defaultMessage: 'Dashboards'
})
}
entityName={i18n.translate('kbn.dashboard.listing.table.entityName', {
defaultMessage: 'dashboard',
})}
entityNamePlural={i18n.translate('kbn.dashboard.listing.table.entityNamePlural', {
defaultMessage: 'dashboards',
})}
tableListTitle={i18n.translate('kbn.dashboard.listing.dashboardsTitle', {
defaultMessage: 'Dashboards',
})}
/>
);
}
Expand Down Expand Up @@ -146,15 +135,14 @@ class DashboardListingUi extends React.Component {
/>
</div>
);

}

getTableColumns() {
const tableColumns = [
{
field: 'title',
name: i18n.translate('kbn.dashboard.listing.table.titleColumnName', {
defaultMessage: 'Title'
defaultMessage: 'Title',
}),
sortable: true,
render: (field, record) => (
Expand All @@ -164,22 +152,22 @@ class DashboardListingUi extends React.Component {
>
{field}
</EuiLink>
)
),
},
{
field: 'description',
name: i18n.translate('kbn.dashboard.listing.table.descriptionColumnName', {
defaultMessage: 'Description'
defaultMessage: 'Description',
}),
dataType: 'string',
sortable: true,
}
},
];
return tableColumns;
}
}

DashboardListingUi.propTypes = {
DashboardListing.propTypes = {
createItem: PropTypes.func.isRequired,
findItems: PropTypes.func.isRequired,
deleteItems: PropTypes.func.isRequired,
Expand All @@ -190,8 +178,6 @@ DashboardListingUi.propTypes = {
initialFilter: PropTypes.string,
};

DashboardListingUi.defaultProps = {
DashboardListing.defaultProps = {
initialFilter: EMPTY_FILTER,
};

export const DashboardListing = injectI18n(DashboardListingUi);
150 changes: 83 additions & 67 deletions src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,72 +17,80 @@
* under the License.
*/

jest.mock('ui/notify',
jest.mock(
'ui/notify',
() => ({
toastNotifications: {
addWarning: () => {},
}
}), { virtual: true });
},
}),
{ virtual: true }
);

jest.mock('lodash',
jest.mock(
'lodash',
() => ({
...require.requireActual('lodash'),
// mock debounce to fire immediately with no internal timer
debounce: function (func) {
debounce: func => {
function debounced(...args) {
return func.apply(this, args);
}
return debounced;
}
}), { virtual: true });
},
}),
{ virtual: true }
);

import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallow } from 'enzyme';

import {
DashboardListing,
} from './dashboard_listing';
import { DashboardListing } from './dashboard_listing';

const find = (num) => {
const find = num => {
const hits = [];
for (let i = 0; i < num; i++) {
hits.push({
id: `dashboard${i}`,
title: `dashboard${i} title`,
description: `dashboard${i} desc`
description: `dashboard${i} desc`,
});
}
return Promise.resolve({
total: num,
hits: hits
hits: hits,
});
};

test('renders empty page in before initial fetch to avoid flickering', () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1000}
hideWriteControls={false}
/>);
expect(component).toMatchSnapshot();
});

describe('after fetch', () => {
test('initialFilter', async () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
const component = shallow(
<DashboardListing
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1000}
hideWriteControls={false}
initialFilter="my dashboard"
/>);
/>
);
expect(component).toMatchSnapshot();
});

describe('after fetch', () => {
test('initialFilter', async () => {
const component = shallow(
<DashboardListing
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1000}
hideWriteControls={false}
initialFilter="my dashboard"
/>
);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
Expand All @@ -93,15 +101,17 @@ describe('after fetch', () => {
});

test('renders table rows', async () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1000}
hideWriteControls={false}
/>);
const component = shallow(
<DashboardListing
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1000}
hideWriteControls={false}
/>
);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
Expand All @@ -112,15 +122,17 @@ describe('after fetch', () => {
});

test('renders call to action when no dashboards exist', async () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
findItems={find.bind(null, 0)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={false}
/>);
const component = shallow(
<DashboardListing
findItems={find.bind(null, 0)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={false}
/>
);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
Expand All @@ -131,15 +143,17 @@ describe('after fetch', () => {
});

test('hideWriteControls', async () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
findItems={find.bind(null, 0)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={true}
/>);
const component = shallow(
<DashboardListing
findItems={find.bind(null, 0)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={true}
/>
);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
Expand All @@ -150,15 +164,17 @@ describe('after fetch', () => {
});

test('renders warning when listingLimit is exceeded', async () => {
const component = shallowWithIntl(<DashboardListing.WrappedComponent
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={false}
/>);
const component = shallow(
<DashboardListing
findItems={find.bind(null, 2)}
deleteItems={() => {}}
createItem={() => {}}
editItem={() => {}}
getViewUrl={() => {}}
listingLimit={1}
hideWriteControls={false}
/>
);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
Expand Down
Loading

0 comments on commit 65850c7

Please sign in to comment.