Remove injectI18n in dashboard plugin. (#44580)

* Removed injectI18n from dashboard listing * Added helpers for I18nProvider * Remove intl from DashboardCloneModal * Remove intl from options.tsx * Remove intl from DashboardSaveModal
elastic · Sep 5, 2019 · 8c44e89 · 8c44e89
1 parent f080218
commit 8c44e89
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 162 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -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';
 
@@ -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);
   }
@@ -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',
+        })}
       />
     );
   }
@@ -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) => (
@@ -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,
@@ -190,8 +178,6 @@ DashboardListingUi.propTypes = {
   initialFilter: PropTypes.string,
 };
 
-DashboardListingUi.defaultProps = {
+DashboardListing.defaultProps = {
   initialFilter: EMPTY_FILTER,
 };
-
-export const DashboardListing = injectI18n(DashboardListingUi);
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js
@@ -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));
@@ -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));
@@ -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));
@@ -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));
@@ -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));