[Enterprise Search] Rename React Router helpers (#83718) (#83745)

* Rename EUI React Router components - Instead of bogarting the EUI component names, use EuiLinkTo instead of EuiLink Other misc renaming - eui_link.tsx to eui_components.tsx for clearer file name - EuiReactRouterHelper to ReactRouterHelper, to make the distinction between EUI and React Router clearer (in theory you could use this helper for non-EUI components) - other misc type renaming * Update simple instances of previous EUI RR components to Eui*To * Clean up complex/renamed instances of Eui*To (hopefully much more straightforward now) - unfortunately side_nav requires an eslint disable
elastic · Nov 19, 2020 · 9545c79 · 9545c79
1 parent 985b405
commit 9545c79
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 91 deletions.
diff --git a/...nterprise_search/public/applications/app_search/components/engines/engines_table.test.tsx b/...nterprise_search/public/applications/app_search/components/engines/engines_table.test.tsx
@@ -10,7 +10,7 @@ import { mockTelemetryActions, mountWithIntl } from '../../../__mocks__/';
 
 import React from 'react';
 import { EuiBasicTable, EuiPagination, EuiButtonEmpty } from '@elastic/eui';
-import { EuiLink } from '../../../shared/react_router_helpers';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
 
 import { EnginesTable } from './engines_table';
 
@@ -50,7 +50,7 @@ describe('EnginesTable', () => {
   });
 
   it('contains engine links which send telemetry', () => {
-    const engineLinks = wrapper.find(EuiLink);
+    const engineLinks = wrapper.find(EuiLinkTo);
 
     engineLinks.forEach((link) => {
       expect(link.prop('to')).toEqual('/engines/test-engine');

diff --git a/...ins/enterprise_search/public/applications/app_search/components/engines/engines_table.tsx b/...ins/enterprise_search/public/applications/app_search/components/engines/engines_table.tsx
@@ -11,7 +11,7 @@ import { FormattedMessage, FormattedDate, FormattedNumber } from '@kbn/i18n/reac
 import { i18n } from '@kbn/i18n';
 
 import { TelemetryLogic } from '../../../shared/telemetry';
-import { EuiLink } from '../../../shared/react_router_helpers';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
 import { getEngineRoute } from '../../routes';
 
 import { ENGINES_PAGE_SIZE } from '../../../../../common/constants';
@@ -59,9 +59,9 @@ export const EnginesTable: React.FC<EnginesTableProps> = ({
         defaultMessage: 'Name',
       }),
       render: (name: string) => (
-        <EuiLink data-test-subj="engineNameLink" {...engineLinkProps(name)}>
+        <EuiLinkTo data-test-subj="engineNameLink" {...engineLinkProps(name)}>
           {name}
-        </EuiLink>
+        </EuiLinkTo>
       ),
       width: '30%',
       truncateText: true,
@@ -122,12 +122,12 @@ export const EnginesTable: React.FC<EnginesTableProps> = ({
       ),
       dataType: 'string',
       render: (name: string) => (
-        <EuiLink {...engineLinkProps(name)}>
+        <EuiLinkTo {...engineLinkProps(name)}>
           <FormattedMessage
             id="xpack.enterpriseSearch.appSearch.enginesOverview.table.action.manage"
             defaultMessage="Manage"
           />
-        </EuiLink>
+        </EuiLinkTo>
       ),
       align: 'right',
       width: '100px',

diff --git a/...earch/public/applications/enterprise_search/components/product_card/product_card.test.tsx b/...earch/public/applications/enterprise_search/components/product_card/product_card.test.tsx
@@ -12,7 +12,7 @@ import { useValues } from 'kea';
 import { shallow } from 'enzyme';
 
 import { EuiCard } from '@elastic/eui';
-import { EuiButton } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 
 import { ProductCard } from './';
@@ -29,7 +29,7 @@ describe('ProductCard', () => {
     expect(card.find('h2').text()).toEqual('Elastic App Search');
     expect(card.find('.productCard__image').prop('src')).toEqual('as.jpg');
 
-    const button = card.find(EuiButton);
+    const button = card.find(EuiButtonTo);
     expect(button.prop('to')).toEqual('/app/enterprise_search/app_search');
     expect(button.prop('children')).toEqual('Launch App Search');
 
@@ -47,7 +47,7 @@ describe('ProductCard', () => {
     expect(card.find('h2').text()).toEqual('Elastic Workplace Search');
     expect(card.find('.productCard__image').prop('src')).toEqual('ws.jpg');
 
-    const button = card.find(EuiButton);
+    const button = card.find(EuiButtonTo);
     expect(button.prop('to')).toEqual('/app/enterprise_search/workplace_search');
     expect(button.prop('children')).toEqual('Launch Workplace Search');
 
@@ -63,7 +63,7 @@ describe('ProductCard', () => {
 
     const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
-    const button = card.find(EuiButton);
+    const button = card.find(EuiButtonTo);
 
     expect(button.prop('children')).toEqual('Setup Workplace Search');
   });

diff --git a/...ise_search/public/applications/enterprise_search/components/product_card/product_card.tsx b/...ise_search/public/applications/enterprise_search/components/product_card/product_card.tsx
@@ -10,7 +10,7 @@ import { snakeCase } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EuiCard, EuiTextColor } from '@elastic/eui';
 
-import { EuiButton } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../shared/telemetry';
 import { KibanaLogic } from '../../../shared/kibana';
 
@@ -63,7 +63,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, image }) => {
       paddingSize="l"
       description={<EuiTextColor color="subdued">{product.CARD_DESCRIPTION}</EuiTextColor>}
       footer={
-        <EuiButton
+        <EuiButtonTo
           fill
           to={product.URL}
           shouldNotCreateHref={true}
@@ -75,7 +75,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, image }) => {
           }
         >
           {config.host ? LAUNCH_BUTTON_TEXT : SETUP_BUTTON_TEXT}
-        </EuiButton>
+        </EuiButtonTo>
       }
     />
   );

diff --git a/...e_search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.tsx b/...e_search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.tsx
@@ -7,13 +7,13 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
-import { EuiPanel } from '../../../shared/react_router_helpers';
+import { EuiPanelTo } from '../../../shared/react_router_helpers';
 
 import CtaImage from './assets/getting_started.png';
 import './setup_guide_cta.scss';
 
 export const SetupGuideCta: React.FC = () => (
-  <EuiPanel to="/setup_guide" paddingSize="l" className="enterpriseSearchSetupCta">
+  <EuiPanelTo to="/setup_guide" paddingSize="l" className="enterpriseSearchSetupCta">
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
       <EuiFlexItem className="enterpriseSearchSetupCta__text">
         <EuiTitle size="s">
@@ -34,5 +34,5 @@ export const SetupGuideCta: React.FC = () => (
         <img src={CtaImage} alt="" className="enterpriseSearchSetupCta__image" />
       </EuiFlexItem>
     </EuiFlexGroup>
-  </EuiPanel>
+  </EuiPanelTo>
 );
diff --git a/...k/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx b/...k/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx
@@ -9,7 +9,7 @@ import { useValues } from 'kea';
 import { EuiEmptyPrompt, EuiCode } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiButton } from '../react_router_helpers';
+import { EuiButtonTo } from '../react_router_helpers';
 import { KibanaLogic } from '../../shared/kibana';
 
 import './error_state_prompt.scss';
@@ -90,12 +90,12 @@ export const ErrorStatePrompt: React.FC = () => {
         </>
       }
       actions={
-        <EuiButton iconType="help" fill to="/setup_guide">
+        <EuiButtonTo iconType="help" fill to="/setup_guide">
           <FormattedMessage
             id="xpack.enterpriseSearch.errorConnectingState.setupGuideCta"
             defaultMessage="Review setup guide"
           />
-        </EuiButton>
+        </EuiButtonTo>
       }
     />
   );

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx
@@ -10,8 +10,8 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { shallow } from 'enzyme';
 
-import { EuiLink as EuiLinkExternal } from '@elastic/eui';
-import { EuiLink } from '../react_router_helpers';
+import { EuiLink } from '@elastic/eui';
+import { EuiLinkTo } from '../react_router_helpers';
 import { ENTERPRISE_SEARCH_PLUGIN, APP_SEARCH_PLUGIN } from '../../../../common/constants';
 
 import { SideNav, SideNavLink, SideNavItem } from './';
@@ -42,7 +42,7 @@ describe('SideNavLink', () => {
     const wrapper = shallow(<SideNavLink to="/">Link</SideNavLink>);
 
     expect(wrapper.type()).toEqual('li');
-    expect(wrapper.find(EuiLink)).toHaveLength(1);
+    expect(wrapper.find(EuiLinkTo)).toHaveLength(1);
     expect(wrapper.find('.enterpriseSearchNavLinks__item')).toHaveLength(1);
   });
 
@@ -52,7 +52,7 @@ describe('SideNavLink', () => {
         Link
       </SideNavLink>
     );
-    const externalLink = wrapper.find(EuiLinkExternal);
+    const externalLink = wrapper.find(EuiLink);
 
     expect(externalLink).toHaveLength(1);
     expect(externalLink.prop('href')).toEqual('http://website.com');

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
@@ -9,8 +9,8 @@ import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { i18n } from '@kbn/i18n';
-import { EuiIcon, EuiTitle, EuiText, EuiLink as EuiLinkExternal } from '@elastic/eui'; // TODO: Remove EuiLinkExternal after full Kibana transition
-import { EuiLink } from '../react_router_helpers';
+import { EuiIcon, EuiTitle, EuiText, EuiLink } from '@elastic/eui'; // TODO: Remove EuiLink after full Kibana transition
+import { EuiLinkTo } from '../react_router_helpers';
 
 import { ENTERPRISE_SEARCH_PLUGIN } from '../../../../common/constants';
 import { stripTrailingSlash } from '../../../../common/strip_slashes';
@@ -96,19 +96,14 @@ export const SideNavLink: React.FC<SideNavLinkProps> = ({
   return (
     <li>
       {isExternal ? (
-        <EuiLinkExternal
-          {...rest}
-          className={classes}
-          href={to}
-          target="_blank"
-          onClick={closeNavigation}
-        >
+        // eslint-disable-next-line @elastic/eui/href-or-on-click
+        <EuiLink {...rest} className={classes} href={to} target="_blank" onClick={closeNavigation}>
           {children}
-        </EuiLinkExternal>
+        </EuiLink>
       ) : (
-        <EuiLink {...rest} className={classes} to={to} onClick={closeNavigation}>
+        <EuiLinkTo {...rest} className={classes} to={to} onClick={closeNavigation}>
           {children}
-        </EuiLink>
+        </EuiLinkTo>
       )}
       {subNav && <ul className="enterpriseSearchNavLinks__subNav">{subNav}</ul>}
     </li>

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/not_found/not_found.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/not_found/not_found.tsx
@@ -13,7 +13,7 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton as EuiButtonExternal,
+  EuiButton,
 } from '@elastic/eui';
 
 import {
@@ -22,7 +22,7 @@ import {
   LICENSED_SUPPORT_URL,
 } from '../../../../common/constants';
 
-import { EuiButton } from '../react_router_helpers';
+import { EuiButtonTo } from '../react_router_helpers';
 import { SetAppSearchChrome, SetWorkplaceSearchChrome } from '../kibana_chrome';
 import { SendAppSearchTelemetry, SendWorkplaceSearchTelemetry } from '../telemetry';
 import { LicensingLogic } from '../licensing';
@@ -89,18 +89,18 @@ export const NotFound: React.FC<NotFoundProps> = ({ product = {} }) => {
           actions={
             <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiButton to="/" color="primary" fill>
+                <EuiButtonTo to="/" color="primary" fill>
                   {i18n.translate('xpack.enterpriseSearch.notFound.action1', {
                     defaultMessage: 'Back to your dashboard',
                   })}
-                </EuiButton>
+                </EuiButtonTo>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiButtonExternal href={supportUrl} target="_blank">
+                <EuiButton href={supportUrl} target="_blank">
                   {i18n.translate('xpack.enterpriseSearch.notFound.action2', {
                     defaultMessage: 'Contact support',
                   })}
-                </EuiButtonExternal>
+                </EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           }

diff --git a/...ed/react_router_helpers/eui_link.test.tsx → ...ct_router_helpers/eui_components.test.tsx b/...ed/react_router_helpers/eui_link.test.tsx → ...ct_router_helpers/eui_components.test.tsx
@@ -12,42 +12,42 @@ import { EuiLink, EuiButton, EuiPanel } from '@elastic/eui';
 
 import { mockKibanaValues, mockHistory } from '../../__mocks__';
 
-import { EuiReactRouterLink, EuiReactRouterButton, EuiReactRouterPanel } from './eui_link';
+import { EuiLinkTo, EuiButtonTo, EuiPanelTo } from './eui_components';
 
 describe('EUI & React Router Component Helpers', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders an EuiLink', () => {
-    const wrapper = shallow(<EuiReactRouterLink to="/" />);
+    const wrapper = shallow(<EuiLinkTo to="/" />);
 
     expect(wrapper.find(EuiLink)).toHaveLength(1);
   });
 
   it('renders an EuiButton', () => {
-    const wrapper = shallow(<EuiReactRouterButton to="/" />);
+    const wrapper = shallow(<EuiButtonTo to="/" />);
 
     expect(wrapper.find(EuiButton)).toHaveLength(1);
   });
 
   it('renders an EuiPanel', () => {
-    const wrapper = shallow(<EuiReactRouterPanel to="/" paddingSize="l" />);
+    const wrapper = shallow(<EuiPanelTo to="/" paddingSize="l" />);
 
     expect(wrapper.find(EuiPanel)).toHaveLength(1);
     expect(wrapper.find(EuiPanel).prop('paddingSize')).toEqual('l');
   });
 
   it('passes down all ...rest props', () => {
-    const wrapper = shallow(<EuiReactRouterLink to="/" data-test-subj="foo" external={true} />);
+    const wrapper = shallow(<EuiLinkTo to="/" data-test-subj="foo" external={true} />);
     const link = wrapper.find(EuiLink);
 
     expect(link.prop('external')).toEqual(true);
     expect(link.prop('data-test-subj')).toEqual('foo');
   });
 
   it('renders with the correct href and onClick props', () => {
-    const wrapper = mount(<EuiReactRouterLink to="/foo/bar" />);
+    const wrapper = mount(<EuiLinkTo to="/foo/bar" />);
     const link = wrapper.find(EuiLink);
 
     expect(link.prop('onClick')).toBeInstanceOf(Function);
@@ -56,7 +56,7 @@ describe('EUI & React Router Component Helpers', () => {
   });
 
   it('renders with the correct non-basenamed href when shouldNotCreateHref is passed', () => {
-    const wrapper = mount(<EuiReactRouterLink to="/foo/bar" shouldNotCreateHref />);
+    const wrapper = mount(<EuiLinkTo to="/foo/bar" shouldNotCreateHref />);
     const link = wrapper.find(EuiLink);
 
     expect(link.prop('href')).toEqual('/foo/bar');
@@ -65,7 +65,7 @@ describe('EUI & React Router Component Helpers', () => {
 
   describe('onClick', () => {
     it('prevents default navigation and uses React Router history', () => {
-      const wrapper = mount(<EuiReactRouterLink to="/bar/baz" />);
+      const wrapper = mount(<EuiLinkTo to="/bar/baz" />);
 
       const simulatedEvent = {
         button: 0,
@@ -79,7 +79,7 @@ describe('EUI & React Router Component Helpers', () => {
     });
 
     it('does not prevent default browser behavior on new tab/window clicks', () => {
-      const wrapper = mount(<EuiReactRouterLink to="/bar/baz" />);
+      const wrapper = mount(<EuiLinkTo to="/bar/baz" />);
 
       const simulatedEvent = {
         shiftKey: true,
@@ -92,7 +92,7 @@ describe('EUI & React Router Component Helpers', () => {
 
     it('calls inherited onClick actions in addition to default navigation', () => {
       const customOnClick = jest.fn(); // Can be anything from telemetry to a state reset
-      const wrapper = mount(<EuiReactRouterLink to="/narnia" onClick={customOnClick} />);
+      const wrapper = mount(<EuiLinkTo to="/narnia" onClick={customOnClick} />);
 
       wrapper.find(EuiLink).simulate('click', { shiftKey: true });