cleaning up embeddable types (#75560)

examples/embeddable_examples/public/book/edit_book_action.tsx

@@ -65,8 +65,8 @@ export const createEditBookAction = (getStartServices: () => Promise<StartServic
       const onSave = async (attributes: BookSavedObjectAttributes, useRefType: boolean) => {
         const newInput = await attributeService.wrapAttributes(attributes, useRefType, embeddable);
         if (!useRefType && (embeddable.getInput() as SavedObjectEmbeddableInput).savedObjectId) {
-          // Remove the savedObejctId when un-linking
-          newInput.savedObjectId = null;
+          // Set the saved object ID to null so that update input will remove the existing savedObjectId...
+          (newInput as BookByValueInput & { savedObjectId: unknown }).savedObjectId = null;
         }
         embeddable.updateInput(newInput);
         if (useRefType) {

examples/embeddable_explorer/public/list_container_example.tsx

@@ -29,11 +29,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import {
-  EmbeddableInput,
-  EmbeddableRenderer,
-  ViewMode,
-} from '../../../src/plugins/embeddable/public';
+import { EmbeddableRenderer, ViewMode } from '../../../src/plugins/embeddable/public';
 import {
   HELLO_WORLD_EMBEDDABLE,
   MULTI_TASK_TODO_EMBEDDABLE,
@@ -41,6 +37,9 @@ import {
   ListContainerFactory,
   SearchableListContainerFactory,
 } from '../../embeddable_examples/public';
+import { SearchableContainerInput } from '../../embeddable_examples/public/searchable_list_container/searchable_list_container';
+import { TodoInput } from '../../embeddable_examples/public/todo';
+import { MultiTaskTodoInput } from '../../embeddable_examples/public/multi_task_todo';
 
 interface Props {
   listContainerEmbeddableFactory: ListContainerFactory;
@@ -51,7 +50,7 @@ export function ListContainerExample({
   listContainerEmbeddableFactory,
   searchableListContainerEmbeddableFactory,
 }: Props) {
-  const listInput: EmbeddableInput = {
+  const listInput: SearchableContainerInput = {
     id: 'hello',
     title: 'My todo list',
     viewMode: ViewMode.VIEW,
@@ -69,7 +68,7 @@ export function ListContainerExample({
           task: 'Goes out on Wednesdays!',
           icon: 'broom',
           title: 'Take out the trash',
-        },
+        } as TodoInput,
       },
       '3': {
         type: TODO_EMBEDDABLE,
@@ -77,12 +76,12 @@ export function ListContainerExample({
           id: '3',
           icon: 'broom',
           title: 'Vaccum the floor',
-        },
+        } as TodoInput,
       },
     },
   };
 
-  const searchableInput: EmbeddableInput = {
+  const searchableInput: SearchableContainerInput = {
     id: '1',
     title: 'My searchable todo list',
     viewMode: ViewMode.VIEW,
@@ -101,7 +100,7 @@ export function ListContainerExample({
           task: 'Goes out on Wednesdays!',
           icon: 'broom',
           title: 'Take out the trash',
-        },
+        } as TodoInput,
       },
       '3': {
         type: MULTI_TASK_TODO_EMBEDDABLE,
@@ -110,7 +109,7 @@ export function ListContainerExample({
           icon: 'searchProfilerApp',
           title: 'Learn more',
           tasks: ['Go to school', 'Watch planet earth', 'Read the encyclopedia'],
-        },
+        } as MultiTaskTodoInput,
       },
     },
   };

src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isErrorEmbeddable, IContainer, ReferenceOrValueEmbeddable } from '../../embeddable_plugin';
+import {
+  isErrorEmbeddable,
+  IContainer,
+  ReferenceOrValueEmbeddable,
+  EmbeddableInput,
+} from '../../embeddable_plugin';
 import { DashboardContainer } from '../embeddable';
 import { getSampleDashboardInput } from '../test_helpers';
 import {
@@ -145,7 +150,7 @@ test('Add to library returns reference type input', async () => {
 
   embeddable = embeddablePluginMock.mockRefOrValEmbeddable<ContactCardEmbeddable>(embeddable, {
     mockedByReferenceInput: { savedObjectId: 'testSavedObjectId', id: embeddable.id },
-    mockedByValueInput: { attributes: complicatedAttributes, id: embeddable.id },
+    mockedByValueInput: { attributes: complicatedAttributes, id: embeddable.id } as EmbeddableInput,
   });
   const dashboard = embeddable.getRoot() as IContainer;
   const originalPanelKeySet = new Set(Object.keys(dashboard.getInput().panels));

src/plugins/dashboard/public/application/actions/clone_panel_action.tsx

@@ -24,7 +24,11 @@ import _ from 'lodash';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
 import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
 import { SavedObject } from '../../../../saved_objects/public';
-import { PanelNotFoundError, EmbeddableInput } from '../../../../embeddable/public';
+import {
+  PanelNotFoundError,
+  EmbeddableInput,
+  SavedObjectEmbeddableInput,
+} from '../../../../embeddable/public';
 import {
   placePanelBeside,
   IPanelPlacementBesideArgs,
@@ -143,7 +147,7 @@ export class ClonePanelAction implements ActionByType<typeof ACTION_CLONE_PANEL>
         },
         { references: _.cloneDeep(savedObjectToClone.references) }
       );
-      panelState.explicitInput.savedObjectId = clonedSavedObject.id;
+      (panelState.explicitInput as SavedObjectEmbeddableInput).savedObjectId = clonedSavedObject.id;
     }
     this.core.notifications.toasts.addSuccess({
       title: i18n.translate('dashboard.panel.clonedToast', {

src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx

@@ -30,7 +30,7 @@ import { coreMock } from '../../../../../core/public/mocks';
 import { CoreStart } from 'kibana/public';
 import { UnlinkFromLibraryAction } from '.';
 import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
-import { ViewMode } from '../../../../embeddable/public';
+import { ViewMode, SavedObjectEmbeddableInput } from '../../../../embeddable/public';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -142,7 +142,11 @@ test('Unlink unwraps all attributes from savedObject', async () => {
     attribute4: { nestedattribute: 'hello from the nest' },
   };
 
-  embeddable = embeddablePluginMock.mockRefOrValEmbeddable<ContactCardEmbeddable>(embeddable, {
+  embeddable = embeddablePluginMock.mockRefOrValEmbeddable<
+    ContactCardEmbeddable,
+    { attributes: unknown; id: string },
+    SavedObjectEmbeddableInput
+  >(embeddable, {
     mockedByReferenceInput: { savedObjectId: 'testSavedObjectId', id: embeddable.id },
     mockedByValueInput: { attributes: complicatedAttributes, id: embeddable.id },
   });

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -474,7 +474,8 @@ export class DashboardAppController {
                     : undefined;
                 container.addOrUpdateEmbeddable<EmbeddableInput>(
                   incomingEmbeddable.type,
-                  explicitInput,
+                  // This ugly solution is temporary - https://github.com/elastic/kibana/pull/70272 fixes this whole section
+                  (explicitInput as unknown) as EmbeddableInput,
                   embeddableId
                 );
               }

src/plugins/dashboard/public/application/lib/embeddable_saved_object_converters.test.ts

@@ -23,6 +23,7 @@ import {
 } from './embeddable_saved_object_converters';
 import { SavedDashboardPanel } from '../../types';
 import { DashboardPanelState } from '../embeddable';
+import { EmbeddableInput } from '../../../../embeddable/public';
 
 test('convertSavedDashboardPanelToPanelState', () => {
   const savedDashboardPanel: SavedDashboardPanel = {
@@ -93,7 +94,7 @@ test('convertPanelStateToSavedDashboardPanel', () => {
       something: 'hi!',
       id: '123',
       savedObjectId: 'savedObjectId',
-    },
+    } as EmbeddableInput,
     type: 'search',
   };
 
@@ -127,7 +128,7 @@ test('convertPanelStateToSavedDashboardPanel will not add an undefined id when n
     explicitInput: {
       id: '123',
       something: 'hi!',
-    },
+    } as EmbeddableInput,
     type: 'search',
   };
 

src/plugins/embeddable/public/lib/containers/i_container.ts

@@ -25,7 +25,7 @@ import {
   IEmbeddable,
 } from '../embeddables';
 
-export interface PanelState<E extends { id: string; [key: string]: unknown } = { id: string }> {
+export interface PanelState<E extends EmbeddableInput & { id: string } = { id: string }> {
   // The type of embeddable in this panel. Will be used to find the factory in which to
   // load the embeddable.
   type: string;
@@ -43,7 +43,7 @@ export interface ContainerOutput extends EmbeddableOutput {
 export interface ContainerInput<PanelExplicitInput = {}> extends EmbeddableInput {
   hidePanelTitles?: boolean;
   panels: {
-    [key: string]: PanelState<PanelExplicitInput & { [id: string]: unknown } & { id: string }>;
+    [key: string]: PanelState<PanelExplicitInput & EmbeddableInput & { id: string }>;
   };
 }
 

src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts

@@ -70,8 +70,6 @@ export interface EmbeddableInput {
    * Visualization filters used to narrow down results.
    */
   filters?: Filter[];
-
-  [key: string]: unknown;
 }
 
 export interface EmbeddableOutput {

src/plugins/embeddable/public/tests/container.test.ts

@@ -19,7 +19,13 @@
 
 import * as Rx from 'rxjs';
 import { skip } from 'rxjs/operators';
-import { isErrorEmbeddable, EmbeddableOutput, ContainerInput, ViewMode } from '../lib';
+import {
+  isErrorEmbeddable,
+  EmbeddableOutput,
+  ContainerInput,
+  ViewMode,
+  SavedObjectEmbeddableInput,
+} from '../lib';
 import {
   FilterableEmbeddableInput,
   FilterableEmbeddable,
@@ -648,7 +654,7 @@ test('container stores ErrorEmbeddables when a saved object cannot be found', as
     panels: {
       '123': {
         type: 'vis',
-        explicitInput: { id: '123', savedObjectId: '456' },
+        explicitInput: { id: '123', savedObjectId: '456' } as SavedObjectEmbeddableInput,
       },
     },
     viewMode: ViewMode.EDIT,
@@ -669,7 +675,7 @@ test('ErrorEmbeddables get updated when parent does', async (done) => {
     panels: {
       '123': {
         type: 'vis',
-        explicitInput: { id: '123', savedObjectId: '456' },
+        explicitInput: { id: '123', savedObjectId: '456' } as SavedObjectEmbeddableInput,
       },
     },
     viewMode: ViewMode.EDIT,

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -42,7 +42,7 @@ import {
   ExpressionRenderError,
 } from '../../../../plugins/expressions/public';
 import { buildPipeline } from '../legacy/build_pipeline';
-import { Vis } from '../vis';
+import { Vis, SerializedVis } from '../vis';
 import { getExpressions, getUiActions } from '../services';
 import { VIS_EVENT_TO_TRIGGER } from './events';
 import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
@@ -63,6 +63,7 @@ export interface VisualizeInput extends EmbeddableInput {
   vis?: {
     colors?: { [key: string]: string };
   };
+  savedVis?: SerializedVis;
   table?: unknown;
 }
 

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx

@@ -25,6 +25,7 @@ import {
 import { StartServicesGetter } from '../../../../../../../src/plugins/kibana_utils/public';
 import { StartDependencies } from '../../../plugin';
 import { Config, FactoryContext } from './types';
+import { SearchInput } from '../../../../../../../src/plugins/discover/public';
 
 export interface Params {
   start: StartServicesGetter<Pick<StartDependencies, 'data' | 'uiActionsEnhanced'>>;
@@ -89,7 +90,7 @@ export class DashboardToDashboardDrilldown
     };
 
     if (context.embeddable) {
-      const input = context.embeddable.getInput();
+      const input = context.embeddable.getInput() as Readonly<SearchInput>;
       if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query;
 
       // if useCurrentDashboardDataRange is enabled, then preserve current time range

x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts

@@ -5,7 +5,10 @@
  */
 
 import { Action } from '../../../../../../src/plugins/ui_actions/public';
-import { DiscoverUrlGeneratorState } from '../../../../../../src/plugins/discover/public';
+import {
+  DiscoverUrlGeneratorState,
+  SearchInput,
+} from '../../../../../../src/plugins/discover/public';
 import {
   ApplyGlobalFilterActionContext,
   esFilters,
@@ -59,7 +62,7 @@ export class ExploreDataChartAction extends AbstractExploreDataAction<ExploreDat
     if (embeddable) {
       state.indexPatternId = shared.getIndexPatterns(embeddable)[0] || undefined;
 
-      const input = embeddable.getInput();
+      const input = embeddable.getInput() as Readonly<SearchInput>;
 
       if (input.timeRange && !state.timeRange) state.timeRange = input.timeRange;
       if (input.query) state.query = input.query;