[App Search] Misc naming tech debt

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts

@@ -3,8 +3,14 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import { i18n } from '@kbn/i18n';
 
+export const CREDENTIALS_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.credentials.title',
+  { defaultMessage: 'Credentials' }
+);
+
 export enum ApiTokenTypes {
   Admin = 'admin',
   Private = 'private',

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx

@@ -28,6 +28,7 @@ import { FlashMessages } from '../../../shared/flash_messages';
 
 import { CredentialsLogic } from './credentials_logic';
 import { externalUrl } from '../../../shared/enterprise_search_url/external_url';
+import { CREDENTIALS_TITLE } from './constants';
 import { CredentialsList } from './credentials_list';
 import { CredentialsFlyout } from './credentials_flyout';
 
@@ -47,21 +48,11 @@ export const Credentials: React.FC = () => {
 
   return (
     <>
-      <SetPageChrome
-        trail={[
-          i18n.translate('xpack.enterpriseSearch.appSearch.credentials.title', {
-            defaultMessage: 'Credentials',
-          }),
-        ]}
-      />
+      <SetPageChrome trail={[CREDENTIALS_TITLE]} />
       <EuiPageHeader>
         <EuiPageHeaderSection>
           <EuiTitle size="l">
-            <h1>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.title', {
-                defaultMessage: 'Credentials',
-              })}
-            </h1>
+            <h1>{CREDENTIALS_TITLE}</h1>
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/index.ts

@@ -5,3 +5,4 @@
  */
 
 export { Credentials } from './credentials';
+export { CREDENTIALS_TITLE } from './constants';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/constants.ts

@@ -9,10 +9,6 @@ import { i18n } from '@kbn/i18n';
 // TODO: It's very likely that we'll move these i18n constants to their respective component
 // folders once those are migrated over. This is a temporary way of DRYing them out for now.
 
-export const ENGINES_TITLE = i18n.translate('xpack.enterpriseSearch.appSearch.engines.title', {
-  defaultMessage: 'Engines',
-});
-
 export const OVERVIEW_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.overview.title',
   { defaultMessage: 'Overview' }

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx

@@ -30,8 +30,8 @@ import {
   ENGINE_API_LOGS_PATH,
 } from '../../routes';
 import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
+import { ENGINES_TITLE } from '../engines';
 import {
-  ENGINES_TITLE,
   OVERVIEW_TITLE,
   ANALYTICS_TITLE,
   DOCUMENTS_TITLE,

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/empty_state.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx

@@ -14,7 +14,7 @@ import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { CREATE_ENGINES_PATH } from '../../../routes';
 
-import { EngineOverviewHeader } from './header';
+import { EnginesOverviewHeader } from './header';
 
 import './empty_state.scss';
 
@@ -34,7 +34,7 @@ export const EmptyState: React.FC = () => {
   return (
     <>
       <SetPageChrome />
-      <EngineOverviewHeader />
+      <EnginesOverviewHeader />
       <EuiPageContent className="emptyState">
         <EuiEmptyPrompt
           className="emptyState__prompt"

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/header.test.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx

@@ -11,16 +11,16 @@ import { mockTelemetryActions } from '../../../../__mocks__';
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { EngineOverviewHeader } from './';
+import { EnginesOverviewHeader } from './';
 
-describe('EngineOverviewHeader', () => {
+describe('EnginesOverviewHeader', () => {
   it('renders', () => {
-    const wrapper = shallow(<EngineOverviewHeader />);
+    const wrapper = shallow(<EnginesOverviewHeader />);
     expect(wrapper.find('h1')).toHaveLength(1);
   });
 
   it('renders a launch app search button that sends telemetry on click', () => {
-    const wrapper = shallow(<EngineOverviewHeader />);
+    const wrapper = shallow(<EnginesOverviewHeader />);
     const button = wrapper.find('[data-test-subj="launchButton"]');
 
     expect(button.prop('href')).toBe('http://localhost:3002/as');

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/header.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx

@@ -19,7 +19,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { TelemetryLogic } from '../../../../shared/telemetry';
 import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
 
-export const EngineOverviewHeader: React.FC = () => {
+export const EnginesOverviewHeader: React.FC = () => {
   const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
 
   const buttonProps = {
@@ -42,7 +42,7 @@ export const EngineOverviewHeader: React.FC = () => {
           <h1>
             <FormattedMessage
               id="xpack.enterpriseSearch.appSearch.enginesOverview.title"
-              defaultMessage="Engine Overview"
+              defaultMessage="Engines Overview"
             />
           </h1>
         </EuiTitle>

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/index.ts → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts

@@ -4,6 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { EngineOverviewHeader } from './header';
+export { EnginesOverviewHeader } from './header';
 export { LoadingState } from './loading_state';
 export { EmptyState } from './empty_state';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/loading_state.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx

@@ -8,13 +8,13 @@ import React from 'react';
 import { EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-import { EngineOverviewHeader } from './header';
+import { EnginesOverviewHeader } from './header';
 
 export const LoadingState: React.FC = () => {
   return (
     <>
       <SetPageChrome />
-      <EngineOverviewHeader />
+      <EnginesOverviewHeader />
       <EuiPageContent paddingSize="l">
         <EuiLoadingContent lines={5} />
         <EuiSpacer size="xxl" />

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ENGINES_TITLE = i18n.translate('xpack.enterpriseSearch.appSearch.engines.title', {
+  defaultMessage: 'Engines',
+});
+
+export const META_ENGINES_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.metaEngines.title',
+  { defaultMessage: 'Meta Engines' }
+);

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.scss

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-.engineOverview {
+.enginesOverview {
   padding: $euiSize;
 
   @include euiBreakpoint('m', 'l', 'xl') {

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.test.tsx

@@ -14,14 +14,14 @@ import { shallow, ReactWrapper } from 'enzyme';
 import { mountAsync, mockHttpValues, setMockValues } from '../../../__mocks__';
 
 import { LoadingState, EmptyState } from './components';
-import { EngineTable } from './engine_table';
+import { EnginesTable } from './engines_table';
 
-import { EngineOverview } from './';
+import { EnginesOverview } from './';
 
-describe('EngineOverview', () => {
+describe('EnginesOverview', () => {
   describe('non-happy-path states', () => {
     it('isLoading', () => {
-      const wrapper = shallow(<EngineOverview />);
+      const wrapper = shallow(<EnginesOverview />);
 
       expect(wrapper.find(LoadingState)).toHaveLength(1);
     });
@@ -36,7 +36,7 @@ describe('EngineOverview', () => {
           }),
         },
       });
-      const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
+      const wrapper = await mountAsync(<EnginesOverview />, { i18n: true });
 
       expect(wrapper.find(EmptyState)).toHaveLength(1);
     });
@@ -69,9 +69,9 @@ describe('EngineOverview', () => {
     });
 
     it('renders and calls the engines API', async () => {
-      const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
+      const wrapper = await mountAsync(<EnginesOverview />, { i18n: true });
 
-      expect(wrapper.find(EngineTable)).toHaveLength(1);
+      expect(wrapper.find(EnginesTable)).toHaveLength(1);
       expect(mockApi).toHaveBeenNthCalledWith(1, '/api/app_search/engines', {
         query: {
           type: 'indexed',
@@ -86,9 +86,9 @@ describe('EngineOverview', () => {
           hasPlatinumLicense: true,
           http: { ...mockHttpValues.http, get: mockApi },
         });
-        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
+        const wrapper = await mountAsync(<EnginesOverview />, { i18n: true });
 
-        expect(wrapper.find(EngineTable)).toHaveLength(2);
+        expect(wrapper.find(EnginesTable)).toHaveLength(2);
         expect(mockApi).toHaveBeenNthCalledWith(2, '/api/app_search/engines', {
           query: {
             type: 'meta',
@@ -100,18 +100,18 @@ describe('EngineOverview', () => {
 
     describe('pagination', () => {
       const getTablePagination = (wrapper: ReactWrapper) =>
-        wrapper.find(EngineTable).prop('pagination');
+        wrapper.find(EnginesTable).prop('pagination');
 
       it('passes down page data from the API', async () => {
-        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
+        const wrapper = await mountAsync(<EnginesOverview />, { i18n: true });
         const pagination = getTablePagination(wrapper);
 
         expect(pagination.totalEngines).toEqual(100);
         expect(pagination.pageIndex).toEqual(0);
       });
 
       it('re-polls the API on page change', async () => {
-        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
+        const wrapper = await mountAsync(<EnginesOverview />, { i18n: true });
         await act(async () => getTablePagination(wrapper).onPaginate(5));
         wrapper.update();
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx

@@ -13,7 +13,6 @@ import {
   EuiTitle,
   EuiSpacer,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
@@ -23,11 +22,11 @@ import { LicensingLogic } from '../../../shared/licensing';
 
 import { EngineIcon } from './assets/engine_icon';
 import { MetaEngineIcon } from './assets/meta_engine_icon';
+import { ENGINES_TITLE, META_ENGINES_TITLE } from './constants';
+import { EnginesOverviewHeader, LoadingState, EmptyState } from './components';
+import { EnginesTable } from './engines_table';
 
-import { EngineOverviewHeader, LoadingState, EmptyState } from './components';
-import { EngineTable } from './engine_table';
-
-import './engine_overview.scss';
+import './engines_overview.scss';
 
 interface IGetEnginesParams {
   type: string;
@@ -38,7 +37,7 @@ interface ISetEnginesCallbacks {
   setResultsTotal: React.Dispatch<React.SetStateAction<number>>;
 }
 
-export const EngineOverview: React.FC = () => {
+export const EnginesOverview: React.FC = () => {
   const { http } = useValues(HttpLogic);
   const { hasPlatinumLicense } = useValues(LicensingLogic);
 
@@ -88,21 +87,18 @@ export const EngineOverview: React.FC = () => {
       <SetPageChrome />
       <SendTelemetry action="viewed" metric="engines_overview" />
 
-      <EngineOverviewHeader />
-      <EuiPageContent panelPaddingSize="s" className="engineOverview">
+      <EnginesOverviewHeader />
+      <EuiPageContent panelPaddingSize="s" className="enginesOverview">
         <FlashMessages />
         <EuiPageContentHeader>
           <EuiTitle size="s">
             <h2>
-              <EngineIcon />
-              {i18n.translate('xpack.enterpriseSearch.appSearch.enginesOverview.engines', {
-                defaultMessage: 'Engines',
-              })}
+              <EngineIcon /> {ENGINES_TITLE}
             </h2>
           </EuiTitle>
         </EuiPageContentHeader>
         <EuiPageContentBody data-test-subj="appSearchEngines">
-          <EngineTable
+          <EnginesTable
             data={engines}
             pagination={{
               totalEngines: enginesTotal,
@@ -118,15 +114,12 @@ export const EngineOverview: React.FC = () => {
             <EuiPageContentHeader>
               <EuiTitle size="s">
                 <h2>
-                  <MetaEngineIcon />
-                  {i18n.translate('xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines', {
-                    defaultMessage: 'Meta Engines',
-                  })}
+                  <MetaEngineIcon /> {META_ENGINES_TITLE}
                 </h2>
               </EuiTitle>
             </EuiPageContentHeader>
             <EuiPageContentBody data-test-subj="appSearchMetaEngines">
-              <EngineTable
+              <EnginesTable
                 data={metaEngines}
                 pagination={{
                   totalEngines: metaEnginesTotal,

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.test.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_table.test.tsx

@@ -12,13 +12,13 @@ import React from 'react';
 import { EuiBasicTable, EuiPagination, EuiButtonEmpty } from '@elastic/eui';
 import { EuiLink } from '../../../shared/react_router_helpers';
 
-import { EngineTable } from './engine_table';
+import { EnginesTable } from './engines_table';
 
-describe('EngineTable', () => {
+describe('EnginesTable', () => {
   const onPaginate = jest.fn(); // onPaginate updates the engines API call upstream
 
   const wrapper = mountWithIntl(
-    <EngineTable
+    <EnginesTable
       data={[
         {
           name: 'test-engine',
@@ -71,7 +71,10 @@ describe('EngineTable', () => {
 
   it('handles empty data', () => {
     const emptyWrapper = mountWithIntl(
-      <EngineTable data={[]} pagination={{ totalEngines: 0, pageIndex: 0, onPaginate: () => {} }} />
+      <EnginesTable
+        data={[]}
+        pagination={{ totalEngines: 0, pageIndex: 0, onPaginate: () => {} }}
+      />
     );
     const emptyTable = emptyWrapper.find(EuiBasicTable);