[Uptime] Shim UI exports for new platform (#44722) (#47218)

* Remove depdency on legacy interface.

* Remove custom interface, use common breadcrumb type.

* Add HTML template for app react entry point.

* Update app props.

* Add constant for react app entry point.

* Remove dependency on legacy capabilities provider.

* Delete legacy kibana framework adapter.

* Add New Platform adapter, reference in startup code.

* Remove dependency on legacy capabilities function.

* Delete reference to obsolete interface.

* Fix busted types in new adapter.

* Add new plugin class, delete old bootstrap code.

* Provide default for potentially-undefined value.

* Delete obsolete file.

* Update plugin constructor and start interfaces.

* Add @ts-ignore for unused constructor parameter.

* Import autocomplete provider from new platform.

x-pack/legacy/plugins/uptime/common/constants/plugin.ts

@@ -5,6 +5,7 @@
  */
 
 export const PLUGIN = {
+  APP_ROOT_ID: 'react-uptime-root',
   ID: 'uptime',
   ROUTER_BASE_NAME: '/app/uptime#/',
   LOCAL_STORAGE_KEY: 'xpack.uptime',

x-pack/legacy/plugins/uptime/public/app.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './apps/kibana_app';
+import './apps/index';

x-pack/legacy/plugins/uptime/public/apps/kibana_app.ts → x-pack/legacy/plugins/uptime/public/apps/index.ts

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose } from '../lib/compose/kibana_compose';
-import { startApp } from './start_app';
+import chrome from 'ui/chrome';
+import { npStart } from 'ui/new_platform';
+import { Plugin } from './plugin';
 
-startApp(compose());
+new Plugin({ opaqueId: Symbol('uptime') }, chrome).start(npStart);

x-pack/legacy/plugins/uptime/public/apps/plugin.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { LegacyCoreStart, PluginInitializerContext } from 'src/core/public';
+import { PluginsStart } from 'ui/new_platform/new_platform';
+import { Chrome } from 'ui/chrome';
+import { UMFrontendLibs } from '../lib/lib';
+import { PLUGIN } from '../../common/constants';
+import { getKibanaFrameworkAdapter } from '../lib/adapters/framework/new_platform_adapter';
+import template from './template.html';
+import { UptimeApp } from '../uptime_app';
+import { createApolloClient } from '../lib/adapters/framework/apollo_client_adapter';
+
+export interface StartObject {
+  core: LegacyCoreStart;
+  plugins: PluginsStart;
+}
+
+export class Plugin {
+  constructor(
+    // @ts-ignore this is added to satisfy the New Platform typing constraint,
+    // but we're not leveraging any of its functionality yet.
+    private readonly initializerContext: PluginInitializerContext,
+    private readonly chrome: Chrome
+  ) {
+    this.chrome = chrome;
+  }
+
+  public start(start: StartObject): void {
+    const {
+      core,
+      plugins: {
+        data: { autocomplete },
+      },
+    } = start;
+    const libs: UMFrontendLibs = {
+      framework: getKibanaFrameworkAdapter(core, autocomplete),
+    };
+    // @ts-ignore improper type description
+    this.chrome.setRootTemplate(template);
+    const checkForRoot = () => {
+      return new Promise(resolve => {
+        const ready = !!document.getElementById(PLUGIN.APP_ROOT_ID);
+        if (ready) {
+          resolve();
+        } else {
+          setTimeout(() => resolve(checkForRoot()), 10);
+        }
+      });
+    };
+    checkForRoot().then(() => {
+      libs.framework.render(UptimeApp, createApolloClient);
+    });
+  }
+}

x-pack/legacy/plugins/uptime/public/apps/template.html

@@ -0,0 +1 @@
+<div id="react-uptime-root"></div>

x-pack/legacy/plugins/uptime/public/badge.ts

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Badge } from 'ui/chrome/api/badge';
-export type UMBadge = Badge | undefined;
+import { ChromeBadge } from 'src/core/public';
+export type UMBadge = ChromeBadge | undefined;

x-pack/legacy/plugins/uptime/public/breadcrumbs.ts

@@ -5,24 +5,20 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { ChromeBreadcrumb } from 'src/core/public';
 
-export interface UMBreadcrumb {
-  text: string;
-  href?: string;
-}
-
-const makeOverviewBreadcrumb = (search?: string): UMBreadcrumb => ({
+const makeOverviewBreadcrumb = (search?: string): ChromeBreadcrumb => ({
   text: i18n.translate('xpack.uptime.breadcrumbs.overviewBreadcrumbText', {
     defaultMessage: 'Uptime',
   }),
   href: `#/${search ? search : ''}`,
 });
 
-export const getOverviewPageBreadcrumbs = (search?: string): UMBreadcrumb[] => [
+export const getOverviewPageBreadcrumbs = (search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
 ];
 
-export const getMonitorPageBreadcrumb = (name: string, search?: string): UMBreadcrumb[] => [
+export const getMonitorPageBreadcrumb = (name: string, search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
   { text: name },
 ];

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

@@ -6,18 +6,17 @@
 
 import React, { useState, useEffect, useContext } from 'react';
 import { uniqueId, startsWith } from 'lodash';
-import { npStart } from 'ui/new_platform';
 import { EuiCallOut } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { StaticIndexPattern } from 'ui/index_patterns';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
+import { AutocompleteProviderRegister, AutocompleteSuggestion } from 'src/plugins/data/public';
+import { StaticIndexPattern } from 'src/legacy/core_plugins/data/public/index_patterns/index_patterns';
 import { Typeahead } from './typeahead';
 import { getIndexPattern } from '../../../lib/adapters/index_pattern';
 import { UptimeSettingsContext } from '../../../contexts';
 import { useUrlParams } from '../../../hooks';
 import { toStaticIndexPattern } from '../../../lib/helper';
-import { AutocompleteSuggestion } from '../../../../../../../../src/plugins/data/public';
 
 const Container = styled.div`
   margin-bottom: 10px;
@@ -28,20 +27,18 @@ interface State {
   isLoadingIndexPattern: boolean;
 }
 
-const getAutocompleteProvider = (language: string) =>
-  npStart.plugins.data.autocomplete.getProvider(language);
-
-function convertKueryToEsQuery(kuery: string, indexPattern: StaticIndexPattern) {
+function convertKueryToEsQuery(kuery: string, indexPattern: unknown) {
   const ast = fromKueryExpression(kuery);
   return toElasticsearchQuery(ast, indexPattern);
 }
 
 function getSuggestions(
   query: string,
   selectionStart: number,
-  apmIndexPattern: StaticIndexPattern
+  apmIndexPattern: StaticIndexPattern,
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>
 ) {
-  const autocompleteProvider = getAutocompleteProvider('kuery');
+  const autocompleteProvider = autocomplete.getProvider('kuery');
   if (!autocompleteProvider) {
     return [];
   }
@@ -62,7 +59,11 @@ function getSuggestions(
   return suggestions;
 }
 
-export function KueryBar() {
+interface Props {
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
+}
+
+export function KueryBar({ autocomplete }: Props) {
   const [state, setState] = useState<State>({
     suggestions: [],
     isLoadingIndexPattern: true,
@@ -94,7 +95,12 @@ export function KueryBar() {
     currentRequestCheck = currentRequest;
 
     try {
-      let suggestions = await getSuggestions(inputValue, selectionStart, indexPattern);
+      let suggestions = await getSuggestions(
+        inputValue,
+        selectionStart,
+        indexPattern,
+        autocomplete
+      );
       suggestions = suggestions
         .filter((suggestion: AutocompleteSuggestion) => !startsWith(suggestion.text, 'span.'))
         .slice(0, 15);

x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts

@@ -4,16 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { capabilities as uiCapabilities } from 'ui/capabilities';
-
 interface IntegratedAppsAvailability {
   [key: string]: boolean;
 }
 
 export const getIntegratedAppAvailability = (
+  capabilities: any,
   integratedApps: string[]
 ): IntegratedAppsAvailability => {
-  const capabilities = uiCapabilities.get();
   return integratedApps.reduce((supportedSolutions: IntegratedAppsAvailability, solutionName) => {
     supportedSolutions[solutionName] =
       capabilities[solutionName] && capabilities[solutionName].show === true;