Refactor Watcher UI sections and components for clarity (#137601)

* Refactor Watch Status page and its panels for clarity. * Refactor Watch List Page for clarity. * Refactor Simulate Watch Results Flyout for clarity. * Refactor Watch Edit Page for clarity. * Add barrel file for sections and refine tab selection on Watch Status Page. * Update test and test helper files, description names, and variable names to match.
elastic · Aug 8, 2022 · 47dc987 · 47dc987
1 parent 2b2b92e
commit 47dc987
Show file tree

Hide file tree

Showing 48 changed files with 153 additions and 100 deletions.
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/watcher/__jest__/client_integration/helpers/index.ts
@@ -5,20 +5,20 @@
  * 2.0.
  */
 
-import { setup as watchListSetup } from './watch_list.helpers';
-import { setup as watchStatusSetup } from './watch_status.helpers';
-import { setup as watchCreateJsonSetup } from './watch_create_json.helpers';
-import { setup as watchCreateThresholdSetup } from './watch_create_threshold.helpers';
-import { setup as watchEditSetup } from './watch_edit.helpers';
+import { setup as watchListPageSetup } from './watch_list_page.helpers';
+import { setup as watchStatusPageSetup } from './watch_status_page.helpers';
+import { setup as watchCreateJsonPageSetup } from './watch_create_json_page.helpers';
+import { setup as watchCreateThresholdPageSetup } from './watch_create_threshold_page.helpers';
+import { setup as watchEditPageSetup } from './watch_edit_page.helpers';
 
 export type { TestBed } from '@kbn/test-jest-helpers';
 export { getRandomString, findTestSubject } from '@kbn/test-jest-helpers';
 export { setupEnvironment } from './setup_environment';
 
 export const pageHelpers = {
-  watchList: { setup: watchListSetup },
-  watchStatus: { setup: watchStatusSetup },
-  watchCreateJson: { setup: watchCreateJsonSetup },
-  watchCreateThreshold: { setup: watchCreateThresholdSetup },
-  watchEdit: { setup: watchEditSetup },
+  watchListPage: { setup: watchListPageSetup },
+  watchStatusPage: { setup: watchStatusPageSetup },
+  watchCreateJsonPage: { setup: watchCreateJsonPageSetup },
+  watchCreateThresholdPage: { setup: watchCreateThresholdPageSetup },
+  watchEditPage: { setup: watchEditPageSetup },
 };
diff --git a/...tion/helpers/watch_create_json.helpers.ts → ...helpers/watch_create_json_page.helpers.ts b/...tion/helpers/watch_create_json.helpers.ts → ...helpers/watch_create_json_page.helpers.ts
@@ -8,7 +8,7 @@
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 
-import { WatchEdit } from '../../../public/application/sections/watch_edit/components/watch_edit';
+import { WatchEditPage } from '../../../public/application/sections/watch_edit_page';
 import { registerRouter } from '../../../public/application/lib/navigation';
 import { ROUTES, WATCH_TYPES } from '../../../common/constants';
 import { WithAppDependencies } from './setup_environment';
@@ -31,7 +31,7 @@ export interface WatchCreateJsonTestBed extends TestBed<WatchCreateJsonTestSubje
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchCreateJsonTestBed> => {
-  const initTestBed = registerTestBed(WithAppDependencies(WatchEdit, httpSetup), testBedConfig);
+  const initTestBed = registerTestBed(WithAppDependencies(WatchEditPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
 
   /**

diff --git a/...helpers/watch_create_threshold.helpers.ts → ...rs/watch_create_threshold_page.helpers.ts b/...helpers/watch_create_threshold.helpers.ts → ...rs/watch_create_threshold_page.helpers.ts
@@ -8,7 +8,7 @@
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 
-import { WatchEdit } from '../../../public/application/sections/watch_edit/components/watch_edit';
+import { WatchEditPage } from '../../../public/application/sections/watch_edit_page';
 import { registerRouter } from '../../../public/application/lib/navigation';
 import { ROUTES, WATCH_TYPES } from '../../../common/constants';
 import { WithAppDependencies } from './setup_environment';
@@ -34,7 +34,7 @@ export interface WatchCreateThresholdTestBed extends TestBed<WatchCreateThreshol
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchCreateThresholdTestBed> => {
-  const initTestBed = registerTestBed(WithAppDependencies(WatchEdit, httpSetup), testBedConfig);
+  const initTestBed = registerTestBed(WithAppDependencies(WatchEditPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
 
   /**

diff --git a/...integration/helpers/watch_edit.helpers.ts → ...ration/helpers/watch_edit_page.helpers.ts b/...integration/helpers/watch_edit.helpers.ts → ...ration/helpers/watch_edit_page.helpers.ts
@@ -8,7 +8,7 @@
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 
-import { WatchEdit } from '../../../public/application/sections/watch_edit/components/watch_edit';
+import { WatchEditPage } from '../../../public/application/sections/watch_edit_page';
 import { registerRouter } from '../../../public/application/lib/navigation';
 import { ROUTES } from '../../../common/constants';
 import { WATCH_ID } from './jest_constants';
@@ -30,7 +30,7 @@ export interface WatchEditTestBed extends TestBed<WatchEditSubjects> {
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchEditTestBed> => {
-  const initTestBed = registerTestBed(WithAppDependencies(WatchEdit, httpSetup), testBedConfig);
+  const initTestBed = registerTestBed(WithAppDependencies(WatchEditPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
 
   /**

diff --git a/...integration/helpers/watch_list.helpers.ts → ...ration/helpers/watch_list_page.helpers.ts b/...integration/helpers/watch_list.helpers.ts → ...ration/helpers/watch_list_page.helpers.ts
@@ -14,7 +14,7 @@ import {
   AsyncTestBedConfig,
 } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
-import { WatchList } from '../../../public/application/sections/watch_list/components/watch_list';
+import { WatchListPage } from '../../../public/application/sections/watch_list_page';
 import { ROUTES, REFRESH_INTERVALS } from '../../../common/constants';
 import { WithAppDependencies } from './setup_environment';
 
@@ -35,7 +35,7 @@ export interface WatchListTestBed extends TestBed<WatchListTestSubjects> {
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchListTestBed> => {
-  const initTestBed = registerTestBed(WithAppDependencies(WatchList, httpSetup), testBedConfig);
+  const initTestBed = registerTestBed(WithAppDependencies(WatchListPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
 
   /**

diff --git a/...tegration/helpers/watch_status.helpers.ts → ...tion/helpers/watch_status_page.helpers.ts b/...tegration/helpers/watch_status.helpers.ts → ...tion/helpers/watch_status_page.helpers.ts
@@ -16,7 +16,7 @@ import {
 import { HttpSetup } from '@kbn/core/public';
 
 import { registerRouter } from '../../../public/application/lib/navigation';
-import { WatchStatus } from '../../../public/application/sections/watch_status/components/watch_status';
+import { WatchStatusPage } from '../../../public/application/sections/watch_status_page';
 import { ROUTES } from '../../../common/constants';
 import { WATCH_ID } from './jest_constants';
 import { WithAppDependencies } from './setup_environment';
@@ -41,7 +41,10 @@ export interface WatchStatusTestBed extends TestBed<WatchStatusTestSubjects> {
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchStatusTestBed> => {
-  const initTestBed = registerTestBed(WithAppDependencies(WatchStatus, httpSetup), testBedConfig);
+  const initTestBed = registerTestBed(
+    WithAppDependencies(WatchStatusPage, httpSetup),
+    testBedConfig
+  );
   const testBed = await initTestBed();
 
   /**

diff --git a/...ent_integration/watch_create_json.test.ts → ...ntegration/watch_create_json_page.test.ts b/...ent_integration/watch_create_json.test.ts → ...ntegration/watch_create_json_page.test.ts
@@ -11,12 +11,12 @@ import { getExecuteDetails } from '../../__fixtures__';
 import { API_BASE_PATH } from '../../common/constants';
 import { defaultWatch } from '../../public/application/models/watch';
 import { setupEnvironment, pageHelpers } from './helpers';
-import { WatchCreateJsonTestBed } from './helpers/watch_create_json.helpers';
+import type { WatchCreateJsonTestBed } from './helpers/watch_create_json_page.helpers';
 import { WATCH } from './helpers/jest_constants';
 
-const { setup } = pageHelpers.watchCreateJson;
+const { setup } = pageHelpers.watchCreateJsonPage;
 
-describe('<JsonWatchEdit /> create route', () => {
+describe('<JsonWatchEditPage /> create route', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchCreateJsonTestBed;
 

diff --git a/...tegration/watch_create_threshold.test.tsx → ...tion/watch_create_threshold_page.test.tsx b/...tegration/watch_create_threshold.test.tsx → ...tion/watch_create_threshold_page.test.tsx
@@ -13,7 +13,7 @@ import { WATCH_ID } from './helpers/jest_constants';
 import { getExecuteDetails } from '../../__fixtures__';
 import { WATCH_TYPES, API_BASE_PATH } from '../../common/constants';
 import { setupEnvironment, pageHelpers } from './helpers';
-import { WatchCreateThresholdTestBed } from './helpers/watch_create_threshold.helpers';
+import type { WatchCreateThresholdTestBed } from './helpers/watch_create_threshold_page.helpers';
 
 const WATCH_NAME = 'my_test_watch';
 
@@ -77,9 +77,9 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-const { setup } = pageHelpers.watchCreateThreshold;
+const { setup } = pageHelpers.watchCreateThresholdPage;
 
-describe('<ThresholdWatchEdit /> create route', () => {
+describe('<ThresholdWatchEditPage /> create route', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchCreateThresholdTestBed;
 

diff --git a/...t__/client_integration/watch_edit.test.ts → ...lient_integration/watch_edit_page.test.ts b/...t__/client_integration/watch_edit.test.ts → ...lient_integration/watch_edit_page.test.ts
@@ -10,13 +10,13 @@ import { act } from 'react-dom/test-utils';
 import { getWatch } from '../../__fixtures__';
 import { defaultWatch } from '../../public/application/models/watch';
 import { setupEnvironment, pageHelpers } from './helpers';
-import { WatchEditTestBed } from './helpers/watch_edit.helpers';
+import type { WatchEditTestBed } from './helpers/watch_edit_page.helpers';
 import { WATCH, WATCH_ID } from './helpers/jest_constants';
 import { API_BASE_PATH } from '../../common/constants';
 
-const { setup } = pageHelpers.watchEdit;
+const { setup } = pageHelpers.watchEditPage;
 
-describe('<WatchEdit />', () => {
+describe('<WatchEditPage />', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchEditTestBed;
 

diff --git a/...t__/client_integration/watch_list.test.ts → ...lient_integration/watch_list_page.test.ts b/...t__/client_integration/watch_list.test.ts → ...lient_integration/watch_list_page.test.ts
@@ -8,12 +8,12 @@
 import { act } from 'react-dom/test-utils';
 import * as fixtures from '../../__fixtures__';
 import { setupEnvironment, pageHelpers, getRandomString, findTestSubject } from './helpers';
-import { WatchListTestBed } from './helpers/watch_list.helpers';
+import type { WatchListTestBed } from './helpers/watch_list_page.helpers';
 import { API_BASE_PATH } from '../../common/constants';
 
-const { setup } = pageHelpers.watchList;
+const { setup } = pageHelpers.watchListPage;
 
-describe('<WatchList />', () => {
+describe('<WatchListPage />', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchListTestBed;
 

diff --git a/..._/client_integration/watch_status.test.ts → ...ent_integration/watch_status_page.test.ts b/..._/client_integration/watch_status.test.ts → ...ent_integration/watch_status_page.test.ts
@@ -10,11 +10,11 @@ import moment from 'moment';
 import { getWatchHistory } from '../../__fixtures__';
 import { WATCH_STATES, ACTION_STATES } from '../../common/constants';
 import { setupEnvironment, pageHelpers } from './helpers';
-import { WatchStatusTestBed } from './helpers/watch_status.helpers';
+import type { WatchStatusTestBed } from './helpers/watch_status_page.helpers';
 import { WATCH, WATCH_ID } from './helpers/jest_constants';
 import { API_BASE_PATH } from '../../common/constants';
 
-const { setup } = pageHelpers.watchStatus;
+const { setup } = pageHelpers.watchStatusPage;
 
 const watchHistory1 = getWatchHistory({ startTime: '2019-06-04T01:11:11.294' });
 const watchHistory2 = getWatchHistory({ startTime: '2019-06-04T01:10:10.987Z' });
@@ -38,7 +38,7 @@ const watch = {
   },
 };
 
-describe('<WatchStatus />', () => {
+describe('<WatchStatusPage />', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchStatusTestBed;
 

diff --git a/x-pack/plugins/watcher/public/application/app.tsx b/x-pack/plugins/watcher/public/application/app.tsx
@@ -26,9 +26,7 @@ import { RegisterManagementAppArgs, ManagementAppMountParams } from '@kbn/manage
 
 import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
 import { LicenseStatus } from '../../common/types/license_status';
-import { WatchStatus } from './sections/watch_status/components/watch_status';
-import { WatchEdit } from './sections/watch_edit/components/watch_edit';
-import { WatchList } from './sections/watch_list/components/watch_list';
+import { WatchListPage, WatchEditPage, WatchStatusPage } from './sections';
 import { registerRouter } from './lib/navigation';
 import { AppContextProvider } from './app_context';
 import { useExecutionContext } from './shared_imports';
@@ -107,10 +105,10 @@ export const App = (deps: AppDeps) => {
 // Export this so we can test it with a different router.
 export const AppWithoutRouter = () => (
   <Switch>
-    <Route exact path="/watches" component={WatchList} />
-    <Route exact path="/watches/watch/:id/status" component={WatchStatus} />
-    <Route exact path="/watches/watch/:id/edit" component={WatchEdit} />
-    <Route exact path="/watches/new-watch/:type(json|threshold)" component={WatchEdit} />
+    <Route exact path="/watches" component={WatchListPage} />
+    <Route exact path="/watches/watch/:id/status" component={WatchStatusPage} />
+    <Route exact path="/watches/watch/:id/edit" component={WatchEditPage} />
+    <Route exact path="/watches/new-watch/:type(json|threshold)" component={WatchEditPage} />
     <Redirect exact from="/" to="/watches" />
     <Redirect exact from="" to="/watches" />
   </Switch>

diff --git a/x-pack/plugins/watcher/public/application/sections/index.ts b/x-pack/plugins/watcher/public/application/sections/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { WatchStatusPage } from './watch_status_page';
+export { WatchEditPage } from './watch_edit_page';
+export { WatchListPage } from './watch_list_page';
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/index.ts b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { JsonWatchEdit } from './json_watch_edit';
+export { MonitoringWatchEdit } from './monitoring_watch_edit';
+export { ThresholdWatchEdit } from './threshold_watch_edit';
diff --git a/..._edit/components/json_watch_edit/index.ts → ..._page/components/json_watch_edit/index.ts b/..._edit/components/json_watch_edit/index.ts → ..._page/components/json_watch_edit/index.ts
diff --git a/...nents/json_watch_edit/json_watch_edit.tsx → ...nents/json_watch_edit/json_watch_edit.tsx b/...nents/json_watch_edit/json_watch_edit.tsx → ...nents/json_watch_edit/json_watch_edit.tsx
diff --git a/.../json_watch_edit/json_watch_edit_form.tsx → .../json_watch_edit/json_watch_edit_form.tsx b/.../json_watch_edit/json_watch_edit_form.tsx → .../json_watch_edit/json_watch_edit_form.tsx
diff --git a/...n_watch_edit/json_watch_edit_simulate.tsx → ...n_watch_edit/json_watch_edit_simulate.tsx b/...n_watch_edit/json_watch_edit_simulate.tsx → ...n_watch_edit/json_watch_edit_simulate.tsx
@@ -39,7 +39,7 @@ import {
 import { ErrableFormRow } from '../../../../components';
 import { executeWatch } from '../../../../lib/api';
 import { WatchContext } from '../../watch_context';
-import { JsonWatchEditSimulateResults } from './json_watch_edit_simulate_results';
+import { SimulateWatchResultsFlyout } from './simulate_watch_results_flyout';
 import { getTimeUnitLabel } from '../../../../lib/get_time_unit_label';
 import { useAppContext } from '../../../../app_context';
 
@@ -150,15 +150,6 @@ export const JsonWatchEditSimulate = ({
 
   return (
     <Fragment>
-      <JsonWatchEditSimulateResults
-        executeResults={executeResults}
-        executeDetails={executeDetails}
-        error={executeResultsError}
-        onCloseFlyout={() => {
-          setExecuteResults(null);
-          setExecuteResultsError(null);
-        }}
-      />
       <EuiText>
         <p>
           {i18n.translate('xpack.watcher.sections.watchEdit.simulate.pageDescription', {
@@ -429,6 +420,16 @@ export const JsonWatchEditSimulate = ({
           })}
         </EuiButton>
       </EuiForm>
+
+      <SimulateWatchResultsFlyout
+        executeResults={executeResults}
+        executeDetails={executeDetails}
+        error={executeResultsError}
+        onCloseFlyout={() => {
+          setExecuteResults(null);
+          setExecuteResultsError(null);
+        }}
+      />
     </Fragment>
   );
 };
diff --git a/...edit/json_watch_edit_simulate_results.tsx → ...ch_edit/simulate_watch_results_flyout.tsx b/...edit/json_watch_edit_simulate_results.tsx → ...ch_edit/simulate_watch_results_flyout.tsx
@@ -27,7 +27,7 @@ import { getTypeFromAction } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
 import { WatchStatus, SectionError } from '../../../../components';
 
-export const JsonWatchEditSimulateResults = ({
+export const SimulateWatchResultsFlyout = ({
   executeResults,
   executeDetails,
   onCloseFlyout,

diff --git a/...components/monitoring_watch_edit/index.ts → ...components/monitoring_watch_edit/index.ts b/...components/monitoring_watch_edit/index.ts → ...components/monitoring_watch_edit/index.ts
diff --git a/...ring_watch_edit/monitoring_watch_edit.tsx → ...ring_watch_edit/monitoring_watch_edit.tsx b/...ring_watch_edit/monitoring_watch_edit.tsx → ...ring_watch_edit/monitoring_watch_edit.tsx
diff --git a/.../watch_edit/components/request_flyout.tsx → ...h_edit_page/components/request_flyout.tsx b/.../watch_edit/components/request_flyout.tsx → ...h_edit_page/components/request_flyout.tsx
diff --git a/...dit/action_fields/email_action_fields.tsx → ...dit/action_fields/email_action_fields.tsx b/...dit/action_fields/email_action_fields.tsx → ...dit/action_fields/email_action_fields.tsx
diff --git a/...reshold_watch_edit/action_fields/index.ts → ...reshold_watch_edit/action_fields/index.ts b/...reshold_watch_edit/action_fields/index.ts → ...reshold_watch_edit/action_fields/index.ts
diff --git a/...dit/action_fields/index_action_fields.tsx → ...dit/action_fields/index_action_fields.tsx b/...dit/action_fields/index_action_fields.tsx → ...dit/action_fields/index_action_fields.tsx
diff --git a/...edit/action_fields/jira_action_fields.tsx → ...edit/action_fields/jira_action_fields.tsx b/...edit/action_fields/jira_action_fields.tsx → ...edit/action_fields/jira_action_fields.tsx
diff --git a/...t/action_fields/logging_action_fields.tsx → ...t/action_fields/logging_action_fields.tsx b/...t/action_fields/logging_action_fields.tsx → ...t/action_fields/logging_action_fields.tsx
diff --git a/...action_fields/pagerduty_action_fields.tsx → ...action_fields/pagerduty_action_fields.tsx b/...action_fields/pagerduty_action_fields.tsx → ...action_fields/pagerduty_action_fields.tsx
diff --git a/...dit/action_fields/slack_action_fields.tsx → ...dit/action_fields/slack_action_fields.tsx b/...dit/action_fields/slack_action_fields.tsx → ...dit/action_fields/slack_action_fields.tsx
diff --git a/...t/action_fields/webhook_action_fields.tsx → ...t/action_fields/webhook_action_fields.tsx b/...t/action_fields/webhook_action_fields.tsx → ...t/action_fields/webhook_action_fields.tsx
diff --git a/.../components/threshold_watch_edit/index.ts → .../components/threshold_watch_edit/index.ts b/.../components/threshold_watch_edit/index.ts → .../components/threshold_watch_edit/index.ts
diff --git a/...edit/threshold_watch_action_accordion.tsx → ...edit/threshold_watch_action_accordion.tsx b/...edit/threshold_watch_action_accordion.tsx → ...edit/threshold_watch_action_accordion.tsx
diff --git a/..._edit/threshold_watch_action_dropdown.tsx → ..._edit/threshold_watch_action_dropdown.tsx b/..._edit/threshold_watch_action_dropdown.tsx → ..._edit/threshold_watch_action_dropdown.tsx
diff --git a/...tch_edit/threshold_watch_action_panel.tsx → ...tch_edit/threshold_watch_action_panel.tsx b/...tch_edit/threshold_watch_action_panel.tsx → ...tch_edit/threshold_watch_action_panel.tsx
diff --git a/...shold_watch_edit/threshold_watch_edit.tsx → ...shold_watch_edit/threshold_watch_edit.tsx b/...shold_watch_edit/threshold_watch_edit.tsx → ...shold_watch_edit/threshold_watch_edit.tsx
diff --git a/...eshold_watch_edit/watch_visualization.tsx → ...eshold_watch_edit/watch_visualization.tsx b/...eshold_watch_edit/watch_visualization.tsx → ...eshold_watch_edit/watch_visualization.tsx
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/index.ts b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { WatchEditPage } from './watch_edit_page';
diff --git a/...tion/sections/watch_edit/watch_context.ts → ...sections/watch_edit_page/watch_context.ts b/...tion/sections/watch_edit/watch_context.ts → ...sections/watch_edit_page/watch_context.ts
diff --git a/...sections/watch_edit/watch_edit_actions.ts → ...ons/watch_edit_page/watch_edit_actions.ts b/...sections/watch_edit/watch_edit_actions.ts → ...ons/watch_edit_page/watch_edit_actions.ts
diff --git a/...ions/watch_edit/components/watch_edit.tsx → ...tions/watch_edit_page/watch_edit_page.tsx b/...ions/watch_edit/components/watch_edit.tsx → ...tions/watch_edit_page/watch_edit_page.tsx
@@ -12,18 +12,16 @@ import { EuiPageContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { WATCH_TYPES } from '../../../../../common/constants';
-import { BaseWatch } from '../../../../../common/types/watch_types';
-import { getPageErrorCode, PageError, SectionLoading } from '../../../components';
-import { loadWatch } from '../../../lib/api';
-import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../../lib/breadcrumbs';
-import { useAppContext } from '../../../app_context';
-import { Watch } from '../../../models/watch';
-import { PageError as GenericPageError } from '../../../shared_imports';
-import { WatchContext } from '../watch_context';
-import { JsonWatchEdit } from './json_watch_edit';
-import { ThresholdWatchEdit } from './threshold_watch_edit';
-import { MonitoringWatchEdit } from './monitoring_watch_edit';
+import { WATCH_TYPES } from '../../../../common/constants';
+import { BaseWatch } from '../../../../common/types/watch_types';
+import { getPageErrorCode, PageError, SectionLoading } from '../../components';
+import { loadWatch } from '../../lib/api';
+import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../lib/breadcrumbs';
+import { useAppContext } from '../../app_context';
+import { Watch } from '../../models/watch';
+import { PageError as GenericPageError } from '../../shared_imports';
+import { WatchContext } from './watch_context';
+import { JsonWatchEdit, ThresholdWatchEdit, MonitoringWatchEdit } from './components';
 
 const getTitle = (watch: BaseWatch) => {
   if (watch.isNew) {
@@ -85,7 +83,7 @@ const watchReducer = (state: any, action: any) => {
   }
 };
 
-export const WatchEdit = ({
+export const WatchEditPage = ({
   match: {
     params: { id, type },
   },

diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/index.ts b/x-pack/plugins/watcher/public/application/sections/watch_list_page/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { WatchListPage } from './watch_list_page';