[7.x] [ML] Fix appState/globalState (#52987)

x-pack/legacy/plugins/ml/common/types/jobs.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Moment } from 'moment';
+
 // TS TODO: This is not yet a fully fledged representation of the job data structure,
 // but it fulfills some basic TypeScript related needs.
 export interface MlJob {
@@ -63,6 +65,20 @@ export interface MlSummaryJob {
 
 export type MlSummaryJobs = MlSummaryJob[];
 
+export interface MlJobWithTimeRange extends MlJob {
+  groups: string[];
+  timeRange: {
+    from: number;
+    to: number;
+    fromPx: number;
+    toPx: number;
+    fromMoment: Moment;
+    toMoment: Moment;
+    widthPx: number;
+    label: string;
+  };
+}
+
 export function isMlJob(arg: any): arg is MlJob {
   return typeof arg.job_id === 'string';
 }

x-pack/legacy/plugins/ml/public/application/components/annotations/annotation_flyout/index.test.tsx

@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { injectObservablesAsProps } from '../../../util/observable_utils';
+import useObservable from 'react-use/lib/useObservable';
+
 import mockAnnotations from '../annotations_table/__mocks__/mock_annotations.json';
 
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { Annotation } from '../../../../../common/types/annotations';
@@ -25,11 +26,14 @@ describe('AnnotationFlyout', () => {
     const annotation = mockAnnotations[1] as Annotation;
     annotation$.next(annotation);
 
-    // injectObservablesAsProps wraps the observable in a new component
-    const ObservableComponent = injectObservablesAsProps(
-      { annotation: annotation$ },
-      (AnnotationFlyout as any) as ComponentType
-    );
+    // useObservable wraps the observable in a new component
+    const ObservableComponent = (props: any) => {
+      const annotationProp = useObservable(annotation$);
+      if (annotationProp === undefined) {
+        return null;
+      }
+      return <AnnotationFlyout annotation={annotationProp} {...props} />;
+    };
 
     const wrapper = mountWithIntl(<ObservableComponent />);
     const updateBtn = wrapper.find('EuiButton').first();
@@ -40,11 +44,14 @@ describe('AnnotationFlyout', () => {
     const annotation = mockAnnotations[2] as Annotation;
     annotation$.next(annotation);
 
-    // injectObservablesAsProps wraps the observable in a new component
-    const ObservableComponent = injectObservablesAsProps(
-      { annotation: annotation$ },
-      (AnnotationFlyout as any) as ComponentType
-    );
+    // useObservable wraps the observable in a new component
+    const ObservableComponent = (props: any) => {
+      const annotationProp = useObservable(annotation$);
+      if (annotationProp === undefined) {
+        return null;
+      }
+      return <AnnotationFlyout annotation={annotationProp} {...props} />;
+    };
 
     const wrapper = mountWithIntl(<ObservableComponent />);
     const updateBtn = wrapper.find('EuiButton').first();