[7.x] [Runtime fields] Add support in index template (#84184) (#84928)

src/plugins/es_ui_shared/__packages_do_not_import__/errors/es_error_parser.test.ts

@@ -0,0 +1,42 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { parseEsError } from './es_error_parser';
+
+describe('ES error parser', () => {
+  test('should return all the cause of the error', () => {
+    const esError = `{
+      "error": {
+        "reason": "Houston we got a problem",
+        "caused_by": {
+          "reason": "First reason",
+          "caused_by": {
+            "reason": "Second reason",
+            "caused_by": {
+              "reason": "Third reason"
+            }
+          }
+        }
+      }
+    }`;
+
+    const parsedError = parseEsError(esError);
+    expect(parsedError.message).toEqual('Houston we got a problem');
+    expect(parsedError.cause).toEqual(['First reason', 'Second reason', 'Third reason']);
+  });
+});

src/plugins/es_ui_shared/__packages_do_not_import__/errors/es_error_parser.ts

@@ -0,0 +1,52 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+interface ParsedError {
+  message: string;
+  cause: string[];
+}
+
+const getCause = (obj: any = {}, causes: string[] = []): string[] => {
+  const updated = [...causes];
+
+  if (obj.caused_by) {
+    updated.push(obj.caused_by.reason);
+
+    // Recursively find all the "caused by" reasons
+    return getCause(obj.caused_by, updated);
+  }
+
+  return updated.filter(Boolean);
+};
+
+export const parseEsError = (err: string): ParsedError => {
+  try {
+    const { error } = JSON.parse(err);
+    const cause = getCause(error);
+    return {
+      message: error.reason,
+      cause,
+    };
+  } catch (e) {
+    return {
+      message: err,
+      cause: [],
+    };
+  }
+};

src/plugins/es_ui_shared/__packages_do_not_import__/errors/index.ts

@@ -19,3 +19,4 @@
 
 export { isEsError } from './is_es_error';
 export { handleEsError } from './handle_es_error';
+export { parseEsError } from './es_error_parser';

src/plugins/es_ui_shared/__packages_do_not_import__/global_flyout/global_flyout.tsx

@@ -54,7 +54,7 @@ export const GlobalFlyoutProvider: React.FC = ({ children }) => {
   const [showFlyout, setShowFlyout] = useState(false);
   const [activeContent, setActiveContent] = useState<Content<any> | undefined>(undefined);
 
-  const { id, Component, props, flyoutProps } = activeContent ?? {};
+  const { id, Component, props, flyoutProps, cleanUpFunc } = activeContent ?? {};
 
   const addContent: Context['addContent'] = useCallback((content) => {
     setActiveContent((prev) => {
@@ -77,11 +77,19 @@ export const GlobalFlyoutProvider: React.FC = ({ children }) => {
 
   const removeContent: Context['removeContent'] = useCallback(
     (contentId: string) => {
+      // Note: when we will actually deal with multi content then
+      // there will be more logic here! :)
       if (contentId === id) {
+        setActiveContent(undefined);
+
+        if (cleanUpFunc) {
+          cleanUpFunc();
+        }
+
         closeFlyout();
       }
     },
-    [id, closeFlyout]
+    [id, closeFlyout, cleanUpFunc]
   );
 
   const mergedFlyoutProps = useMemo(() => {
@@ -130,14 +138,6 @@ export const useGlobalFlyout = () => {
   const contents = useRef<Set<string> | undefined>(undefined);
   const { removeContent, addContent: addContentToContext } = ctx;
 
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
   const getContents = useCallback(() => {
     if (contents.current === undefined) {
       contents.current = new Set();
@@ -153,6 +153,14 @@ export const useGlobalFlyout = () => {
     [getContents, addContentToContext]
   );
 
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     return () => {
       if (!isMounted.current) {

src/plugins/es_ui_shared/server/errors/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { isEsError, handleEsError } from '../../__packages_do_not_import__/errors';
+export { isEsError, handleEsError, parseEsError } from '../../__packages_do_not_import__/errors';

src/plugins/es_ui_shared/server/index.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export { isEsError, handleEsError } from './errors';
+export { isEsError, handleEsError, parseEsError } from './errors';
 
 /** dummy plugin*/
 export function plugin() {

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -37,6 +37,7 @@ export interface AppDependencies {
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
   uiSettings: CoreSetup['uiSettings'];
   urlGenerators: SharePluginStart['urlGenerators'];
+  docLinks: CoreStart['docLinks'];
 }
 
 export const AppContextProvider = ({

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/index.ts

@@ -9,7 +9,7 @@ import { setup as componentTemplateDetailsSetup } from './component_template_det
 
 export { nextTick, getRandomString, findTestSubject } from '@kbn/test/jest';
 
-export { setupEnvironment, appDependencies } from './setup_environment';
+export { setupEnvironment, componentTemplatesDependencies } from './setup_environment';
 
 export const pageHelpers = {
   componentTemplateList: { setup: componentTemplatesListSetup },

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/setup_environment.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../../../../../../../../src/core/public/mocks';
 
 import { GlobalFlyout } from '../../../../../../../../../../src/plugins/es_ui_shared/public';
+import { AppContextProvider } from '../../../../../app_context';
 import { MappingsEditorProvider } from '../../../../mappings_editor';
 import { ComponentTemplatesProvider } from '../../../component_templates_context';
 
@@ -24,7 +25,12 @@ import { API_BASE_PATH } from './constants';
 const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
 const { GlobalFlyoutProvider } = GlobalFlyout;
 
-export const appDependencies = {
+// We provide the minimum deps required to make the tests pass
+const appDependencies = {
+  docLinks: {} as any,
+} as any;
+
+export const componentTemplatesDependencies = {
   httpClient: (mockHttpClient as unknown) as HttpSetup,
   apiBasePath: API_BASE_PATH,
   trackMetric: () => {},
@@ -44,11 +50,14 @@ export const setupEnvironment = () => {
 };
 
 export const WithAppDependencies = (Comp: any) => (props: any) => (
-  <MappingsEditorProvider>
-    <ComponentTemplatesProvider value={appDependencies}>
-      <GlobalFlyoutProvider>
-        <Comp {...props} />
-      </GlobalFlyoutProvider>
-    </ComponentTemplatesProvider>
-  </MappingsEditorProvider>
+  <AppContextProvider value={appDependencies}>
+    <MappingsEditorProvider>
+      <ComponentTemplatesProvider value={componentTemplatesDependencies}>
+        <GlobalFlyoutProvider>
+          <Comp {...props} />
+        </GlobalFlyoutProvider>
+      </ComponentTemplatesProvider>
+    </MappingsEditorProvider>
+    /
+  </AppContextProvider>
 );

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { appDependencies as componentTemplatesMockDependencies } from './client_integration/helpers';
+export { componentTemplatesDependencies as componentTemplatesMockDependencies } from './client_integration/helpers';