[D&D] Refactor and cleanup embeddables

General plugin updates (#1939):
- add start service getters/setters to plugin service
- move setters from setup to start so they're available to embeddable

Embeddable updates:
- use getters instead of depending on start services in constructor
- remove wizard from add panel "create" list
- add correct edit paths/URLs for linking to wizard #1940
- add basic error embeddable rendering
- render via ExpressionLoader instead of wizard_component #1920
- wizard_component no longer used, but updated for future use
- add subscription handling for query, filter, timerange changes #1937
- fix clone/replace panel actions #1943, #1944
- fix title/description panel rendering #1921
- add inspection panel action #1936

Asset updates:
- Update empty workspace illustration
- Add secondary fill icon version to match new visualization icons

fixes #1936, #1920, #1937, #1940, #1921, #1939, #1941, #1943, #1944

Signed-off-by: Josh Romero <rmerqg@amazon.com>

src/plugins/wizard/public/embeddable/wizard_component.tsx

@@ -3,66 +3,32 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { SavedObjectEmbeddableInput, withEmbeddableSubscription } from '../../../embeddable/public';
 import { WizardEmbeddable, WizardOutput } from './wizard_embeddable';
-import { validateSchemaState } from '../application/utils/validate_schema_state';
+import { getReactExpressionRenderer } from '../plugin_services';
 
 interface Props {
   embeddable: WizardEmbeddable;
   input: SavedObjectEmbeddableInput;
   output: WizardOutput;
 }
 
-function WizardEmbeddableComponentInner({
-  embeddable,
-  input: {},
-  output: { savedAttributes },
-}: Props) {
-  const { ReactExpressionRenderer, toasts, types, indexPatterns, aggs } = embeddable;
-  const [expression, setExpression] = useState<string>();
-
-  useEffect(() => {
-    const { visualizationState: visualization, styleState: style } = savedAttributes || {};
-    if (savedAttributes === undefined || visualization === undefined || style === undefined) {
-      return;
-    }
-
-    const rootState = {
-      visualization: JSON.parse(visualization),
-      style: JSON.parse(style),
-    };
-
-    const visualizationType = types.get(rootState.visualization?.activeVisualization?.name ?? '');
-    if (!visualizationType) {
-      throw new Error(`Invalid visualization type ${visualizationType}`);
-    }
-    const { toExpression, ui } = visualizationType;
-
-    async function loadExpression() {
-      const schemas = ui.containerConfig.data.schemas;
-      const [valid, errorMsg] = validateSchemaState(schemas, rootState);
-
-      if (!valid) {
-        if (errorMsg) {
-          toasts.addWarning(errorMsg);
-        }
-        setExpression(undefined);
-        return;
-      }
-      const exp = await toExpression(rootState, indexPatterns, aggs);
-      setExpression(exp);
-    }
-
-    if (savedAttributes !== undefined) {
-      loadExpression();
-    }
-  }, [aggs, indexPatterns, savedAttributes, toasts, types]);
-
-  return <ReactExpressionRenderer expression={expression ?? ''} />;
-
-  // TODO: add correct loading and error states
+function WizardEmbeddableComponentInner({ embeddable, input: {}, output: { error } }: Props) {
+  const { expression } = embeddable;
+  const ReactExpressionRenderer = getReactExpressionRenderer();
+
+  return (
+    <>
+      {error?.message ? (
+        // TODO: add correct loading and error states
+        <div>{error.message}</div>
+      ) : (
+        <ReactExpressionRenderer expression={expression ?? ''} />
+      )}
+    </>
+  );
 }
 
 export const WizardEmbeddableComponent = withEmbeddableSubscription<