initial commit

package.json

@@ -725,6 +725,7 @@
     "@kbn/session-view-plugin": "link:x-pack/plugins/session_view",
     "@kbn/set-map": "link:packages/kbn-set-map",
     "@kbn/share-examples-plugin": "link:examples/share_examples",
+    "@kbn/share-modal": "link:packages/kbn-share-modal",
     "@kbn/share-plugin": "link:src/plugins/share",
     "@kbn/shared-svg": "link:packages/kbn-shared-svg",
     "@kbn/shared-ux-avatar-solution": "link:packages/shared-ux/avatar/solution",

packages/kbn-share-modal/ tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+      "outDir": "target/types",
+      "types": [
+        "jest",
+        "node"
+      ]
+    },
+    "include": [
+      "**/*.ts"
+    ],
+    "exclude": [
+      "target/**/*"
+    ],
+    "kbn_references": []
+  }

packages/kbn-share-modal/README.md

@@ -0,0 +1,3 @@
+# @kbn/share-modal
+
+Empty package generated by @kbn/generate

packages/kbn-share-modal/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { ShareModal } from './modal';
+export type { ModalProps } from './modal';

packages/kbn-share-modal/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-share-modal'],
+};

packages/kbn-share-modal/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+    "type": "shared-common",
+    "id": "@kbn/share-modal",
+    "owner": "@elastic/appex-sharedux"
+  }

packages/kbn-share-modal/modal.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState, useMemo, ReactElement } from 'react';
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiTab,
+  EuiTabs,
+  EuiForm,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export interface ModalProps {
+  objectType: string;
+  onClose: () => void;
+  tabs: Array<{ id: string; name: string; content: ReactElement }>;
+  modalBodyDescriptions: Array<{ id: string; description: any }>;
+}
+
+/**
+ * <ShareModal objectType={} />
+ */
+
+export const ShareModal = ({ onClose, objectType, tabs, modalBodyDescriptions }: ModalProps) => {
+  const [selectedTabId, setSelectedTabId] = useState('link');
+
+  const onSelectedTabChanged = (id: string) => {
+    setSelectedTabId(id);
+  };
+
+  const selectedTabContent = useMemo(() => {
+    return tabs.find((obj) => obj.id === selectedTabId)?.content;
+  }, [selectedTabId, tabs]);
+
+  const renderTabs = () => {
+    return tabs.map((tab, index) => (
+      <EuiTab
+        key={index}
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  };
+
+  const renderButtons = (id: string) => {
+    if (id === 'link') {
+      return (
+        <EuiButton fill data-test-subj="copyShareUrlButton">
+          <FormattedMessage id="share.link.copyLinkButton" defaultMessage="Copy link" />
+        </EuiButton>
+      );
+    } else if (id === 'embed') {
+      return (
+        <EuiButton fill data-test-subj="copyShareUrlButton">
+          <FormattedMessage id="share.link.copyEmbedCodeButton" defaultMessage="Copy Embed code" />
+        </EuiButton>
+      );
+    } else {
+      return (
+        <EuiButton fill data-test-subj="copyShareUrlButton">
+          <FormattedMessage id="share.link.generateExportButton" defaultMessage="Generate export" />
+        </EuiButton>
+      );
+    }
+  };
+
+  const renderTitle = () => (
+    <FormattedMessage
+      id="share.modalTitle"
+      defaultMessage="Share this {objectType}"
+      values={{ objectType }}
+    />
+  );
+
+  return (
+    // @ts-ignore
+    <EuiModal css={{ width: '500px' }} onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>{renderTitle()}</EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiTabs>{renderTabs()}</EuiTabs>
+        <EuiForm>{selectedTabContent}</EuiForm>
+      </EuiModalBody>
+      <EuiModalFooter>{renderButtons(selectedTabId)}</EuiModalFooter>
+    </EuiModal>
+  );
+};

packages/kbn-share-modal/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@kbn/share-modal",
+    "private": true,
+    "version": "1.0.0",
+    "license": "SSPL-1.0 OR Elastic License 2.0"
+  }

packages/shared-ux/share_modal/impl/src/share_modal.stories.tsx

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */

packages/shared-ux/share_modal/mocks/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { StorybookMock as ShareModalStorybookMock } from './src/storybook';
+export type { Params as ShareModalStorybookParams } from './src/storybook';

packages/shared-ux/share_modal/mocks/src/storybook.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { AbstractStorybookMock, ArgumentParams } from '@kbn/shared-ux-storybook-mock';
+import { ModalProps as ShareModalProps } from '@kbn/share-modal';
+
+import { ArgTypes } from '@storybook/react';
+import { ShareModalStorybookMock } from '..';
+
+type PropArguments = Pick<ShareModalProps, 'objectType' | 'tabs' | 'modalBodyDescriptions'>;
+type Arguments = PropArguments;
+
+/**
+ * Storybook parameters provided from the controls addon.
+ */
+export type Params = Record<keyof Arguments, any>;
+
+const redirectMock = new ShareModalStorybookMock();
+
+export class StorybookMock extends AbstractStorybookMock<ShareModalProps, {}, PropArguments, {}> {
+  serviceArguments: ArgTypes<{}>;
+  getServices(params?: ArgumentParams<PropArguments, {}> | undefined): {} {
+    throw new Error('Method not implemented.');
+  }
+  propArguments = {
+    objectType: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: '',
+    },
+    modalBodyDescriptions: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: '',
+    },
+    tabs: {},
+  };
+
+  dependencies = [];
+
+  getProps(params?: Params): ShareModalProps {
+    return {
+      modalBodyDescriptions: this.getArgumentValue('description', params),
+      objectType: this.getArgumentValue('objectType', params),
+      tabs: this.getArgumentValue('tabs', params),
+    };
+  }
+}

packages/shared-ux/share_modal/types/index.d.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ModalProps } from '@kbn/share-modal';
+import { ReactElement } from 'react';
+
+/**
+ * Props for the `ShareModal` pure component.
+ */
+export type ShareModalComponentProps = Partial<
+  Pick<ModalProps, 'objectType' | 'modalBodyDescriptions' | 'tabs'>
+> & {
+  objectType: string;
+  modalBodyDescription: string;
+  tabs: Array<{ id: string; name: string; content: ReactElement }>;
+};
+
+export type ShareModalProps = ShareModalComponentProps;

src/plugins/share/public/components/embed_modal.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiForm, EuiFormHelpText, EuiFormRow, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { UrlParamExtension } from '../types';
+
+interface EmbedProps {
+  urlParamExtensions?: UrlParamExtension[];
+}
+
+export const EmbedModal = ({ urlParamExtensions }: EmbedProps) => {
+  const renderUrlParamExtensions = () => {
+    if (!urlParamExtensions) {
+      return;
+    }
+
+    const setParamValue =
+      (paramName: string) =>
+      (values: { [queryParam: string]: boolean } = {}): void => {
+        //   const stateUpdate = {
+        //     urlParams: {
+        //       ...this.state.urlParams,
+        //       [paramName]: {
+        //         ...values,
+        //       },
+        //     },
+        //   };
+        //   this.setState(stateUpdate, this.state.useShortUrl ? this.createShortUrl : this.setUrl);
+      };
+
+    return (
+      <React.Fragment>
+        {urlParamExtensions.map(({ paramName, component: UrlParamComponent }) => (
+          <EuiFormRow key={paramName}>
+            <UrlParamComponent setParamValue={setParamValue(paramName)} />
+          </EuiFormRow>
+        ))}
+      </React.Fragment>
+    );
+  };
+  return (
+    <EuiForm>
+      <EuiSpacer size="s" />
+      <EuiFormHelpText>
+        <FormattedMessage
+          id="share.embed.helpText"
+          defaultMessage="Embed this dashboard into another webpage. Select which items to include in the embeddable view."
+        />
+      </EuiFormHelpText>
+      <EuiSpacer />
+      {renderUrlParamExtensions()}
+    </EuiForm>
+  );
+};

src/plugins/share/public/components/link_modal.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiForm, EuiFormHelpText, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+interface LinkProps {
+  objectType: string;
+}
+
+export const LinkModal = ({ objectType }: LinkProps) => {
+  return (
+    <EuiForm>
+      <EuiSpacer size="s" />
+      <EuiFormHelpText>
+        <FormattedMessage
+          id="share.link.helpText"
+          defaultMessage="Share a direct link to this {objectType}."
+          values={{ objectType }}
+        />
+      </EuiFormHelpText>
+      <EuiSpacer />
+    </EuiForm>
+  );
+};