Ui Actions explorer example

examples/ui_action_examples/README.md

@@ -0,0 +1,8 @@
+## Ui actions examples
+
+These ui actions examples shows how to:
+ - Register new actions
+ - Register custom triggers
+ - Attach an action to a trigger
+
+To run this example, use the command `yarn start --run-examples`.

examples/ui_action_examples/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "uiActionsExamples",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["ui_actions_examples"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["uiActions"],
+  "optionalPlugins": []
+}

examples/ui_action_examples/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "ui_actions_examples",
+  "version": "1.0.0",
+  "main": "target/examples/ui_actions_examples",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.5.3"
+  }
+}

examples/ui_action_examples/public/hello_world_action.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+import { EuiText, EuiModalBody, EuiButton } from '@elastic/eui';
+import { OverlayStart } from '../../../src/core/public';
+import { createAction } from '../../../src/plugins/ui_actions/public';
+import { toMountPoint } from '../../../src/plugins/kibana_react/public';
+
+export const HELLO_WORLD_ACTION_TYPE = 'HELLO_WORLD_ACTION_TYPE';
+
+export const createHelloWorldAction = (openModal: OverlayStart['openModal']) =>
+  createAction<{}>({
+    type: HELLO_WORLD_ACTION_TYPE,
+    getDisplayName: () => 'Hello World!',
+    execute: async () => {
+      const overlay = openModal(
+        toMountPoint(
+          <EuiModalBody>
+            <EuiText data-test-subj="helloWorldActionText">Hello world!</EuiText>
+            <EuiButton data-test-subj="closeModal" onClick={() => overlay.close()}>
+              Close
+            </EuiButton>
+          </EuiModalBody>
+        )
+      );
+    },
+  });

examples/ui_action_examples/public/hello_world_trigger.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { Trigger } from '../../../src/plugins/ui_actions/public';
+import { HELLO_WORLD_ACTION_TYPE } from './hello_world_action';
+
+export const HELLO_WORLD_TRIGGER_ID = 'HELLO_WORLD_TRIGGER_ID';
+
+export const helloWorldTrigger: Trigger = {
+  id: HELLO_WORLD_TRIGGER_ID,
+  actionIds: [HELLO_WORLD_ACTION_TYPE],
+};

examples/ui_action_examples/public/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { UiActionExamplesPlugin } from './plugin';
+import { PluginInitializer } from '../../../src/core/public';
+
+export const plugin: PluginInitializer<void, void> = () => new UiActionExamplesPlugin();
+
+export { HELLO_WORLD_TRIGGER_ID } from './hello_world_trigger';
+export { HELLO_WORLD_ACTION_TYPE } from './hello_world_action';

examples/ui_action_examples/public/plugin.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { Plugin, CoreSetup, CoreStart } from '../../../src/core/public';
+import { UiActionsSetup, UiActionsStart } from '../../../src/plugins/ui_actions/public';
+import { createHelloWorldAction } from './hello_world_action';
+import { helloWorldTrigger } from './hello_world_trigger';
+
+interface UiActionExamplesSetupDependencies {
+  uiActions: UiActionsSetup;
+}
+
+interface UiActionExamplesStartDependencies {
+  uiActions: UiActionsStart;
+}
+
+export class UiActionExamplesPlugin
+  implements
+    Plugin<void, void, UiActionExamplesSetupDependencies, UiActionExamplesStartDependencies> {
+  public setup(core: CoreSetup, deps: UiActionExamplesSetupDependencies) {
+    deps.uiActions.registerTrigger(helloWorldTrigger);
+  }
+
+  public start(coreStart: CoreStart, deps: UiActionExamplesStartDependencies) {
+    deps.uiActions.registerAction(createHelloWorldAction(coreStart.overlays.openModal));
+  }
+
+  public stop() {}
+}

examples/ui_action_examples/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*",
+  ],
+  "exclude": []
+}

examples/ui_actions_explorer/README.md

@@ -0,0 +1,8 @@
+## Ui actions explorer
+
+This example ui actions explorer app shows how to:
+ - Add custom ui actions to existing triggers
+ - Add custom triggers
+
+
+To run this example, use the command `yarn start --run-examples`.

examples/ui_actions_explorer/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "uiActionsExplorer",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["ui_actions_explorer"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["uiActions", "uiActionsExamples"],
+  "optionalPlugins": []
+}

examples/ui_actions_explorer/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "ui_actions_explorer",
+  "version": "1.0.0",
+  "main": "target/examples/ui_actions_explorer",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.5.3"
+  }
+}

examples/ui_actions_explorer/public/actions/actions.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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 React from 'react';
+import { OverlayStart } from 'kibana/public';
+import { EuiFieldText, EuiModalBody, EuiButton } from '@elastic/eui';
+import { useState } from 'react';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { createAction, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
+
+export const USER_TRIGGER = 'USER_TRIGGER';
+export const COUNTRY_TRIGGER = 'COUNTRY_TRIGGER';
+export const PHONE_TRIGGER = 'PHONE_TRIGGER';
+
+export const VIEW_IN_MAPS_ACTION = 'VIEW_IN_MAPS_ACTION';
+export const TRAVEL_GUIDE_ACTION = 'TRAVEL_GUIDE_ACTION';
+export const CALL_PHONE_NUMBER_ACTION = 'CALL_PHONE_NUMBER_ACTION';
+export const EDIT_USER_ACTION = 'EDIT_USER_ACTION';
+export const PHONE_USER_ACTION = 'PHONE_USER_ACTION';
+export const SHOWCASE_PLUGGABILITY_ACTION = 'SHOWCASE_PLUGGABILITY_ACTION';
+
+export const showcasePluggability = createAction<{}>({
+  type: SHOWCASE_PLUGGABILITY_ACTION,
+  getDisplayName: () => 'This is pluggable! Any plugin can inject their actions here.',
+  execute: async ({}) => alert("Isn't that cool?!"),
+});
+
+export const makePhoneCallAction = createAction<{ phone: string }>({
+  type: CALL_PHONE_NUMBER_ACTION,
+  getDisplayName: () => 'Call phone number',
+  execute: async ({ phone }) => alert(`Pretend calling ${phone}...`),
+});
+
+export const lookUpWeatherAction = createAction<{ country: string }>({
+  type: TRAVEL_GUIDE_ACTION,
+  getIconType: () => 'popout',
+  getDisplayName: () => 'View travel guide',
+  execute: async ({ country }) => {
+    window.open(`https://www.worldtravelguide.net/?s=${country},`, '_blank');
+  },
+});
+
+export const viewInMapsAction = createAction<{ country: string }>({
+  type: VIEW_IN_MAPS_ACTION,
+  getIconType: () => 'popout',
+  getDisplayName: () => 'View in maps',
+  execute: async ({ country }) => {
+    window.open(`https://www.google.com/maps/place/${country}`, '_blank');
+  },
+});
+
+export interface User {
+  phone?: string;
+  countryOfResidence: string;
+  name: string;
+}
+
+function EditUserModal({
+  user,
+  update,
+  close,
+}: {
+  user: User;
+  update: (user: User) => void;
+  close: () => void;
+}) {
+  const [name, setName] = useState(user.name);
+  return (
+    <EuiModalBody>
+      <EuiFieldText prepend="Name" value={name} onChange={e => setName(e.target.value)} />
+      <EuiButton
+        onClick={() => {
+          update({ ...user, name });
+          close();
+        }}
+      >
+        Update
+      </EuiButton>
+    </EuiModalBody>
+  );
+}
+
+export const createEditUserAction = (getOpenModal: () => Promise<OverlayStart['openModal']>) =>
+  createAction<{
+    user: User;
+    update: (user: User) => void;
+  }>({
+    type: EDIT_USER_ACTION,
+    getIconType: () => 'pencil',
+    getDisplayName: () => 'Edit user',
+    execute: async ({ user, update }) => {
+      const overlay = (await getOpenModal())(
+        toMountPoint(<EditUserModal user={user} update={update} close={() => overlay.close()} />)
+      );
+    },
+  });
+
+export const createPhoneUserAction = (getUiActionsApi: () => Promise<UiActionsStart>) =>
+  createAction<{
+    user: User;
+    update: (user: User) => void;
+  }>({
+    type: PHONE_USER_ACTION,
+    getDisplayName: () => 'Call phone number',
+    isCompatible: async ({ user }) => user.phone !== undefined,
+    execute: async ({ user }) => {
+      // One option - execute the more specific action directly.
+      // makePhoneCallAction.execute({ phone: user.phone });
+
+      // Another option - emit the trigger and automatically get *all* the actions attached
+      // to the phone number trigger.
+      // TODO: we need to figure out the best way to handle these nested actions however, since
+      // we don't want multiple context menu's to pop up.
+      (await getUiActionsApi()).executeTriggerActions(PHONE_TRIGGER, { phone: user.phone });
+    },
+  });