Embeddable API V2: Infrastructure changes necessary to support actions

src/dev/jest/config.js

@@ -37,17 +37,25 @@ export default {
     '<rootDir>/src/test_utils',
     '<rootDir>/test/functional/services/remote',
   ],
+
   collectCoverageFrom: [
     'packages/kbn-ui-framework/src/components/**/*.js',
     '!packages/kbn-ui-framework/src/components/index.js',
     '!packages/kbn-ui-framework/src/components/**/*/index.js',
     'packages/kbn-ui-framework/src/services/**/*.js',
     '!packages/kbn-ui-framework/src/services/index.js',
     '!packages/kbn-ui-framework/src/services/**/*/index.js',
-    'src/legacy/core_plugins/metrics/**/*.js'
+    'src/legacy/core_plugins/**/*.js',
+    'src/legacy/core_plugins/**/*.jsx',
+    'src/legacy/core_plugins/**/*.ts',
+    'src/legacy/core_plugins/**/*.tsx',
+    '!src/legacy/core_plugins/**/__test__/**/*',
+    '!src/legacy/core_plugins/**/__snapshots__/**/*',
   ],
+
   moduleNameMapper: {
     '^plugins/([^\/.]*)/(.*)': '<rootDir>/src/legacy/core_plugins/$1/public/$2',
+    '^plugins/([^\/.]*)': '<rootDir>/src/legacy/core_plugins/$1/public',
     '^ui/(.*)': '<rootDir>/src/legacy/ui/public/$1',
     '^uiExports/(.*)': '<rootDir>/src/dev/jest/mocks/file_mock.js',
     '^test_utils/(.*)': '<rootDir>/src/test_utils/public/$1',

src/legacy/core_plugins/dashboard_embeddable/index.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { resolve } from 'path';
+
+// eslint-disable-next-line import/no-default-export
+export default function(kibana: any) {
+  return new kibana.Plugin({
+    uiExports: {
+      embeddableActions: ['plugins/dashboard_embeddable/actions/expand_panel_action'],
+      embeddableFactories: ['plugins/dashboard_embeddable/embeddable/dashboard_container_factory'],
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+    },
+  });
+}

src/legacy/core_plugins/dashboard_embeddable/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "dashboard_embeddable",
+  "version": "kibana"
+}

src/legacy/core_plugins/dashboard_embeddable/public/__test__/get_sample_dashboard_input.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 { QueryLanguageType, ViewMode, EmbeddableInput } from 'plugins/embeddable_api';
+import { DashboardContainerInput, DashboardPanelState } from '../embeddable';
+
+export function getSampleDashboardInput(
+  overrides?: Partial<DashboardContainerInput>
+): DashboardContainerInput {
+  return {
+    id: '123',
+    filters: [],
+    useMargins: false,
+    isFullScreenMode: false,
+    title: 'My Dashboard',
+    query: {
+      language: QueryLanguageType.KUERY,
+      query: 'hi',
+    },
+    timeRange: {
+      to: 'now',
+      from: 'now-15m',
+    },
+    viewMode: ViewMode.VIEW,
+    panels: {},
+    ...overrides,
+  };
+}
+
+export function getSampleDashboardPanel<TEmbeddableInput extends EmbeddableInput = EmbeddableInput>(
+  overrides: Partial<DashboardPanelState<TEmbeddableInput>> & { embeddableId: string; type: string }
+): DashboardPanelState {
+  return {
+    gridData: {
+      h: 15,
+      w: 15,
+      x: 0,
+      y: 0,
+      i: overrides.embeddableId,
+    },
+    embeddableId: overrides.embeddableId,
+    type: overrides.type,
+    explicitInput: overrides.explicitInput || {},
+    ...overrides,
+  };
+}

src/legacy/core_plugins/kibana/public/dashboard/grid/index.ts → src/legacy/core_plugins/dashboard_embeddable/public/__test__/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { DashboardGridContainer as DashboardGrid } from './dashboard_grid_container';
+export { getSampleDashboardInput, getSampleDashboardPanel } from './get_sample_dashboard_input';

src/legacy/core_plugins/dashboard_embeddable/public/actions/expand_panel_action.test.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+
+jest.mock('ui/metadata', () => ({
+  metadata: {
+    branch: 'my-metadata-branch',
+    version: 'my-metadata-version',
+  },
+}));
+
+jest.mock('ui/capabilities', () => ({
+  uiCapabilities: {
+    visualize: {
+      save: true,
+    },
+  },
+}));
+
+import { EmbeddableFactoryRegistry, isErrorEmbeddable } from '../../../embeddable_api/public';
+import { ExpandPanelAction } from './expand_panel_action';
+import {
+  ContactCardEmbeddable,
+  CONTACT_CARD_EMBEDDABLE,
+  ContactCardEmbeddableInput,
+  ContactCardEmbeddableOutput,
+  ContactCardEmbeddableFactory,
+} from '../../../embeddable_api/public/__test__/index';
+import { DashboardContainer } from '../embeddable';
+import { getSampleDashboardInput, getSampleDashboardPanel } from '../__test__';
+
+const embeddableFactories = new EmbeddableFactoryRegistry();
+embeddableFactories.registerFactory(new ContactCardEmbeddableFactory());
+
+let container: DashboardContainer;
+let embeddable: ContactCardEmbeddable;
+
+beforeEach(async () => {
+  container = new DashboardContainer(
+    getSampleDashboardInput({
+      panels: {
+        '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
+          embeddableId: '123',
+          explicitInput: { firstName: 'Sam' },
+          type: CONTACT_CARD_EMBEDDABLE,
+        }),
+      },
+    }),
+    embeddableFactories
+  );
+
+  const contactCardEmbeddable = await container.addNewEmbeddable<
+    ContactCardEmbeddableInput,
+    ContactCardEmbeddableOutput,
+    ContactCardEmbeddable
+  >(CONTACT_CARD_EMBEDDABLE, {
+    firstName: 'Kibana',
+  });
+
+  if (isErrorEmbeddable(contactCardEmbeddable)) {
+    throw new Error('Failed to create embeddable');
+  } else {
+    embeddable = contactCardEmbeddable;
+  }
+});
+
+test('Sets the embeddable expanded panel id on the parent', async () => {
+  const expandPanelAction = new ExpandPanelAction();
+
+  expect(container.getInput().expandedPanelId).toBeUndefined();
+
+  expandPanelAction.execute({ embeddable });
+
+  expect(container.getInput().expandedPanelId).toBe(embeddable.id);
+});
+
+test('Is not compatible when embeddable is not in a dashboard container', async () => {
+  const action = new ExpandPanelAction();
+  expect(
+    await action.isCompatible({
+      embeddable: new ContactCardEmbeddable({ firstName: 'sue', id: '123' }),
+    })
+  ).toBe(false);
+});
+
+test('Execute throws an error when called with an embeddable not in a parent', async () => {
+  const action = new ExpandPanelAction();
+  async function check() {
+    await action.execute({ embeddable: container });
+  }
+  await expect(check()).rejects.toThrow(Error);
+});
+
+test('Returns title', async () => {
+  const action = new ExpandPanelAction();
+  expect(action.getDisplayName({ embeddable })).toBeDefined();
+});
+
+test('Returns an icon', async () => {
+  const action = new ExpandPanelAction();
+  expect(action.getIcon({ embeddable })).toBeDefined();
+});

src/legacy/core_plugins/dashboard_embeddable/public/actions/expand_panel_action.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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 { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import {
+  Action,
+  actionRegistry,
+  IEmbeddable,
+  CONTEXT_MENU_TRIGGER,
+  triggerRegistry,
+  ActionContext,
+  attachAction,
+  IncompatibleActionError,
+} from 'plugins/embeddable_api';
+import React from 'react';
+import { DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '../embeddable';
+
+export const EXPAND_PANEL_ACTION = 'togglePanel';
+
+function isDashboard(
+  embeddable: IEmbeddable | DashboardContainer
+): embeddable is DashboardContainer {
+  return (embeddable as DashboardContainer).type === DASHBOARD_CONTAINER_TYPE;
+}
+
+function isExpanded(embeddable: IEmbeddable) {
+  if (!embeddable.parent || !isDashboard(embeddable.parent)) {
+    throw new IncompatibleActionError();
+  }
+
+  return embeddable.id === embeddable.parent.getInput().expandedPanelId;
+}
+
+export class ExpandPanelAction extends Action {
+  public readonly type = EXPAND_PANEL_ACTION;
+
+  constructor() {
+    super(EXPAND_PANEL_ACTION);
+    this.order = 7;
+  }
+
+  public getDisplayName({ embeddable }: ActionContext) {
+    if (!embeddable.parent || !isDashboard(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+
+    return isExpanded(embeddable)
+      ? i18n.translate('kbn.embeddable.actions.toggleExpandPanel.expandedDisplayName', {
+          defaultMessage: 'Minimize',
+        })
+      : i18n.translate('kbn.embeddable.actions.toggleExpandPanel.notExpandedDisplayName', {
+          defaultMessage: 'Full screen',
+        });
+  }
+
+  public getIcon({ embeddable }: ActionContext) {
+    if (!embeddable.parent || !isDashboard(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+    // TODO: use 'minimize' when an eui-icon of such is available.
+    return <EuiIcon type={isExpanded(embeddable) ? 'expand' : 'expand'} />;
+  }
+
+  public async isCompatible({ embeddable }: ActionContext) {
+    return Boolean(embeddable.parent && isDashboard(embeddable.parent));
+  }
+
+  public execute({ embeddable }: ActionContext) {
+    if (!embeddable.parent || !isDashboard(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+    const newValue = isExpanded(embeddable) ? undefined : embeddable.id;
+    embeddable.parent.updateInput({
+      expandedPanelId: newValue,
+    });
+  }
+}
+
+actionRegistry.set(EXPAND_PANEL_ACTION, new ExpandPanelAction());
+
+attachAction(triggerRegistry, {
+  triggerId: CONTEXT_MENU_TRIGGER,
+  actionId: EXPAND_PANEL_ACTION,
+});

src/legacy/core_plugins/dashboard_embeddable/public/actions/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */

src/legacy/core_plugins/dashboard_embeddable/public/embeddable/_index.scss

@@ -0,0 +1,3 @@
+@import './viewport/index';
+@import './panel/index';
+@import './grid/index';