add KibanaThemeProvider support for kibana-app-services (#122370)

add KibanaThemeProvider support for kibana-app-services

x-pack/plugins/runtime_fields/README.md

@@ -72,7 +72,7 @@ interface RuntimeField {
   type: RuntimeType; // 'long' | 'boolean' ...
   script: {
     source: string;
-  }
+  };
 }
 ```
 
@@ -103,8 +103,8 @@ interface Context {
 
 The runtime field editor is also exported as static React component that you can import into your components. The editor is exported in 2 flavours:
 
-* As the content of a `<EuiFlyout />` (it contains a flyout header and footer)
-* As a standalone component that you can inline anywhere
+- As the content of a `<EuiFlyout />` (it contains a flyout header and footer)
+- As a standalone component that you can inline anywhere
 
 **Note:** The runtime field editor uses the `<CodeEditor />` that has a dependency on the `Provider` from the `"kibana_react"` plugin. If your app is not already wrapped by this provider you will need to add it at least around the runtime field editor. You can see an example in the ["Using the core.overlays.openFlyout()"](#using-the-coreoverlaysopenflyout) example below.
 
@@ -118,7 +118,7 @@ import { RuntimeFieldEditorFlyoutContent, RuntimeField } from '../runtime_fields
 const MyComponent = () => {
   const { docLinksStart } = useCoreContext(); // access the core start service
   const [isFlyoutVisilbe, setIsFlyoutVisible] = useState(false);
- 
+
   const saveRuntimeField = useCallback((field: RuntimeField) => {
     // Do something with the field
   }, []);
@@ -139,7 +139,7 @@ const MyComponent = () => {
         </EuiFlyout>
       )}
     </>
-  ) 
+  )
 }
 ```
 
@@ -157,11 +157,11 @@ import { RuntimeFieldEditorFlyoutContent, RuntimeField } from '../runtime_fields
 
 const MyComponent = () => {
   // Access the core start service
-  const { docLinksStart, overlays, uiSettings } = useCoreContext();
+  const { docLinksStart, theme, overlays, uiSettings } = useCoreContext();
   const flyoutEditor = useRef<OverlayRef | null>(null);
 
   const { openFlyout } = overlays;
- 
+
   const saveRuntimeField = useCallback((field: RuntimeField) => {
     // Do something with the field
   }, []);
@@ -179,7 +179,8 @@ const MyComponent = () => {
             defaultValue={defaultRuntimeField}
             ctx={/*optional context object -- see section above*/}
           />
-        </KibanaReactContextProvider>
+        </KibanaReactContextProvider>,
+        { theme$: theme.theme$ }
       )
     );
   }, [openFlyout, saveRuntimeField, uiSettings]);
@@ -188,7 +189,7 @@ const MyComponent = () => {
     <>
       <EuiButton onClick={openRuntimeFieldEditor}>Create field</EuiButton>
     </>
-  ) 
+  )
 }
 ```
 
@@ -208,7 +209,7 @@ const MyComponent = () => {
   });
 
   const { submit, isValid: isFormValid, isSubmitted } = runtimeFieldFormState;
- 
+
   const saveRuntimeField = useCallback(async () => {
     const { isValid, data } = await submit();
     if (isValid) {
@@ -233,6 +234,6 @@ const MyComponent = () => {
         Save field
       </EuiButton>
     </>
-  ) 
+  )
 }
-```
+```

x-pack/plugins/runtime_fields/public/load_editor.tsx

@@ -22,7 +22,7 @@ export const getRuntimeFieldEditorLoader =
   (coreSetup: CoreSetup) => async (): Promise<LoadEditorResponse> => {
     const { RuntimeFieldEditorFlyoutContent } = await import('./components');
     const [core] = await coreSetup.getStartServices();
-    const { uiSettings, overlays, docLinks } = core;
+    const { uiSettings, theme, overlays, docLinks } = core;
     const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings });
 
     let overlayRef: OverlayRef | null = null;
@@ -50,7 +50,8 @@ export const getRuntimeFieldEditorLoader =
               defaultValue={defaultValue}
               ctx={ctx}
             />
-          </KibanaReactContextProvider>
+          </KibanaReactContextProvider>,
+          { theme$: theme.theme$ }
         )
       );
 

x-pack/plugins/runtime_fields/public/plugin.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { CoreSetup } from 'src/core/public';
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 
 jest.mock('../../../../src/plugins/kibana_react/public', () => {
   const original = jest.requireActual('../../../../src/plugins/kibana_react/public');
@@ -52,6 +52,7 @@ describe('RuntimeFieldsPlugin', () => {
         openFlyout,
       },
       uiSettings: {},
+      theme: themeServiceMock.createStartContract(),
     };
     coreSetup.getStartServices = async () => [mockCore] as any;
     const setupApi = await plugin.setup(coreSetup, {});