[Uptime] Fix/host connected components (elastic#56969)

* added test for pages

* fixed types

* moved redux logic to connected

* comment

* update type

* type fix

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -10,3 +10,5 @@ export { KueryBar } from './kuerybar/kuery_bar_container';
 export { FilterGroup } from './filter_group/filter_group_container';
 export { MonitorStatusDetails } from './monitor/status_details_container';
 export { MonitorStatusBar } from './monitor/status_bar_container';
+export { MonitorListDrawer } from './monitor/list_drawer_container';
+export { MonitorListActionsPopover } from './monitor/drawer_popover_container';

x-pack/legacy/plugins/uptime/public/components/connected/monitor/drawer_popover_container.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { AppState } from '../../../state';
+import { isIntegrationsPopupOpen } from '../../../state/selectors';
+import { PopoverState, toggleIntegrationsPopover } from '../../../state/actions';
+import { MonitorListActionsPopoverComponent } from '../../functional/monitor_list/monitor_list_drawer';
+
+const mapStateToProps = (state: AppState) => ({
+  popoverState: isIntegrationsPopupOpen(state),
+});
+
+const mapDispatchToProps = (dispatch: any) => ({
+  togglePopoverIsVisible: (popoverState: PopoverState) => {
+    return dispatch(toggleIntegrationsPopover(popoverState));
+  },
+});
+
+export const MonitorListActionsPopover = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MonitorListActionsPopoverComponent);

x-pack/legacy/plugins/uptime/public/components/connected/monitor/list_drawer_container.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { AppState } from '../../../state';
+import { getMonitorDetails } from '../../../state/selectors';
+import { MonitorDetailsActionPayload } from '../../../state/actions/types';
+import { fetchMonitorDetails } from '../../../state/actions/monitor';
+import { MonitorListDrawerComponent } from '../../functional/monitor_list/monitor_list_drawer/monitor_list_drawer';
+import { useUrlParams } from '../../../hooks';
+import { MonitorSummary } from '../../../../common/graphql/types';
+import { MonitorDetails } from '../../../../common/runtime_types/monitor';
+
+interface ContainerProps {
+  summary: MonitorSummary;
+  monitorDetails: MonitorDetails;
+  loadMonitorDetails: typeof fetchMonitorDetails;
+}
+
+const Container: React.FC<ContainerProps> = ({ summary, loadMonitorDetails, monitorDetails }) => {
+  const monitorId = summary?.monitor_id;
+
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
+
+  useEffect(() => {
+    loadMonitorDetails({
+      dateStart,
+      dateEnd,
+      monitorId,
+    });
+  }, [dateStart, dateEnd, monitorId, loadMonitorDetails]);
+  return <MonitorListDrawerComponent monitorDetails={monitorDetails} summary={summary} />;
+};
+
+const mapStateToProps = (state: AppState, { summary }: any) => ({
+  monitorDetails: getMonitorDetails(state, summary),
+});
+
+const mapDispatchToProps = (dispatch: any) => ({
+  loadMonitorDetails: (actionPayload: MonitorDetailsActionPayload) =>
+    dispatch(fetchMonitorDetails(actionPayload)),
+});
+
+export const MonitorListDrawer = connect(mapStateToProps, mapDispatchToProps)(Container);

x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx

@@ -31,7 +31,7 @@ interface OwnProps {
 
 type Props = OwnProps & StateProps & DispatchProps;
 
-export const Container: React.FC<Props> = ({
+const Container: React.FC<Props> = ({
   loadMonitorStatus,
   monitorId,
   monitorStatus,

x-pack/legacy/plugins/uptime/public/components/functional/index.ts

@@ -6,7 +6,6 @@
 
 export { DonutChart } from './charts/donut_chart';
 export { EmptyState } from './empty_state';
-export { IntegrationLink } from './integration_link';
 export { KueryBarComponent } from './kuery_bar/kuery_bar';
 export { MonitorCharts } from './monitor_charts';
 export { MonitorList } from './monitor_list';

x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx

@@ -15,7 +15,7 @@ import {
   esKuery,
   IIndexPattern,
   QuerySuggestion,
-  DataPublicPluginStart,
+  DataPublicPluginSetup,
 } from '../../../../../../../../src/plugins/data/public';
 
 const Container = styled.div`
@@ -33,7 +33,7 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
 }
 
 interface Props {
-  autocomplete: DataPublicPluginStart['autocomplete'];
+  autocomplete: DataPublicPluginSetup['autocomplete'];
   loadIndexPattern: any;
   indexPattern: any;
 }

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx

@@ -28,11 +28,11 @@ import {
 import { MonitorListStatusColumn } from './monitor_list_status_column';
 import { formatUptimeGraphQLErrorList } from '../../../lib/helper/format_error_list';
 import { ExpandedRowMap } from './types';
-import { MonitorListDrawer } from './monitor_list_drawer';
 import { MonitorBarSeries } from '../charts';
 import { MonitorPageLink } from './monitor_page_link';
 import { OverviewPageLink } from './overview_page_link';
 import * as labels from './translations';
+import { MonitorListDrawer } from '../../connected';
 
 interface MonitorListQueryResult {
   monitorStates?: MonitorSummaryResult;

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/integration_group.test.tsx → x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/integration_group.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { MonitorSummary } from '../../../../common/graphql/types';
+import { MonitorSummary } from '../../../../../../common/graphql/types';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { IntegrationGroup } from '../integration_group';
 
@@ -24,47 +24,17 @@ describe('IntegrationGroup', () => {
   });
 
   it('will not display APM links when APM is unavailable', () => {
-    const component = shallowWithIntl(
-      <IntegrationGroup
-        basePath="foo"
-        dateRangeStart="now-12m"
-        dateRangeEnd="now-1m"
-        isApmAvailable={false}
-        isInfraAvailable={true}
-        isLogsAvailable={true}
-        summary={summary}
-      />
-    );
+    const component = shallowWithIntl(<IntegrationGroup summary={summary} />);
     expect(component).toMatchSnapshot();
   });
 
   it('will not display infra links when infra is unavailable', () => {
-    const component = shallowWithIntl(
-      <IntegrationGroup
-        basePath="foo"
-        dateRangeStart="now-12m"
-        dateRangeEnd="now-1m"
-        isApmAvailable={true}
-        isInfraAvailable={false}
-        isLogsAvailable={true}
-        summary={summary}
-      />
-    );
+    const component = shallowWithIntl(<IntegrationGroup summary={summary} />);
     expect(component).toMatchSnapshot();
   });
 
   it('will not display logging links when logging is unavailable', () => {
-    const component = shallowWithIntl(
-      <IntegrationGroup
-        basePath="foo"
-        dateRangeStart="now-12m"
-        dateRangeEnd="now-1m"
-        isApmAvailable={true}
-        isInfraAvailable={true}
-        isLogsAvailable={false}
-        summary={summary}
-      />
-    );
+    const component = shallowWithIntl(<IntegrationGroup summary={summary} />);
     expect(component).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx

@@ -12,7 +12,6 @@ import { shallowWithRouter } from '../../../../../lib';
 
 describe('MonitorListDrawer component', () => {
   let summary: MonitorSummary;
-  let loadMonitorDetails: any;
   let monitorDetails: MonitorDetails;
 
   beforeEach(() => {
@@ -47,39 +46,26 @@ describe('MonitorListDrawer component', () => {
           'Get https://expired.badssl.com: x509: certificate has expired or is not yet valid',
       },
     };
-    loadMonitorDetails = () => null;
   });
 
   it('renders nothing when no summary data is present', () => {
     const component = shallowWithRouter(
-      <MonitorListDrawerComponent
-        loadMonitorDetails={loadMonitorDetails}
-        summary={summary}
-        monitorDetails={monitorDetails}
-      />
+      <MonitorListDrawerComponent summary={summary} monitorDetails={monitorDetails} />
     );
     expect(component).toEqual({});
   });
 
   it('renders nothing when no check data is present', () => {
     delete summary.state.checks;
     const component = shallowWithRouter(
-      <MonitorListDrawerComponent
-        summary={summary}
-        loadMonitorDetails={loadMonitorDetails}
-        monitorDetails={monitorDetails}
-      />
+      <MonitorListDrawerComponent summary={summary} monitorDetails={monitorDetails} />
     );
     expect(component).toEqual({});
   });
 
   it('renders a MonitorListDrawer when there is only one check', () => {
     const component = shallowWithRouter(
-      <MonitorListDrawerComponent
-        summary={summary}
-        loadMonitorDetails={loadMonitorDetails}
-        monitorDetails={monitorDetails}
-      />
+      <MonitorListDrawerComponent summary={summary} monitorDetails={monitorDetails} />
     );
     expect(component).toMatchSnapshot();
   });
@@ -110,11 +96,7 @@ describe('MonitorListDrawer component', () => {
     ];
     summary.state.checks = checks;
     const component = shallowWithRouter(
-      <MonitorListDrawerComponent
-        summary={summary}
-        loadMonitorDetails={loadMonitorDetails}
-        monitorDetails={monitorDetails}
-      />
+      <MonitorListDrawerComponent summary={summary} monitorDetails={monitorDetails} />
     );
     expect(component).toMatchSnapshot();
   });

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/index.ts

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { MonitorListDrawer } from './monitor_list_drawer';
 export { LocationLink } from './location_link';
+export { MonitorListActionsPopoverComponent } from './monitor_list_actions_popover';