Drilldown ui stubs

src/plugins/embeddable/public/components/embeddable_panel/index.tsx → src/plugins/embeddable/public/components/drilldown_hello_bar/__examples__/drilldown_hello_bar.examples.tsx

@@ -17,13 +17,10 @@
  * under the License.
  */
 
-import { EuiPanel } from '@elastic/eui';
 import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { DrilldownHelloBar } from '..';
 
-export const EmbeddablePanel = () => {
-  return (
-    <EuiPanel data-test-subj="embeddablePanel" paddingSize="none" role="figure">
-      Hello world
-    </EuiPanel>
-  );
-};
+storiesOf('components/DrilldownHelloBar', module).add('default', () => {
+  return <DrilldownHelloBar />;
+});

src/plugins/embeddable/public/components/drilldown_hello_bar/index.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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';
+
+export interface DrilldownHelloBarProps {
+  docsLink?: string;
+}
+
+export const DrilldownHelloBar: React.FC<DrilldownHelloBarProps> = ({ docsLink }) => {
+  return (
+    <div>
+      <p>
+        Drilldowns provide the ability to define a new behavior when interacting with a panel. You
+        can add multiple options or simply override the default filtering behavior.
+      </p>
+      <a href={docsLink}>View docs</a>
+      <img
+        src="https://user-images.githubusercontent.com/9773803/72729009-e5803180-3b8e-11ea-8330-b86089bf5f0a.png"
+        alt=""
+      />
+    </div>
+  );
+};

src/plugins/embeddable/public/components/embeddable_panel/__examples__/embeddable_panel.examples.tsx → src/plugins/embeddable/public/components/drilldown_picker/__examples__/drilldown_picker.examples.tsx

@@ -19,6 +19,8 @@
 
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { EmbeddablePanel } from '..';
+import { DrilldownPicker } from '..';
 
-storiesOf('components/EmbeddablePanel', module).add('default', () => <EmbeddablePanel />);
+storiesOf('components/DrilldownPicker', module).add('default', () => {
+  return <DrilldownPicker />;
+});

src/plugins/embeddable/public/components/drilldown_picker/index.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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';
+
+// eslint-disable-next-line
+export interface DrilldownPickerProps {}
+
+export const DrilldownPicker: React.FC<DrilldownPickerProps> = () => {
+  return (
+    <img
+      src={
+        'https://user-images.githubusercontent.com/9773803/72725665-9e8e3e00-3b86-11ea-9314-8724c521b41f.png'
+      }
+      alt=""
+    />
+  );
+};

src/plugins/embeddable/public/components/form_create_drilldown/__examples__/form_create_drilldown.examples.tsx

@@ -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 * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { FormCreateDrilldown } from '..';
+
+storiesOf('components/FormCreateDrilldown', module).add('default', () => {
+  return <FormCreateDrilldown />;
+});

src/plugins/embeddable/public/components/form_create_drilldown/i18n.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const txtNameOfDrilldown = i18n.translate(
+  'embeddableApi.components.form_create_drilldown.nameOfDrilldown',
+  {
+    defaultMessage: 'Name of drilldown',
+  }
+);
+
+export const txtUntitledDrilldown = i18n.translate(
+  'embeddableApi.components.form_create_drilldown.untitledDrilldown',
+  {
+    defaultMessage: 'Untitled drilldown',
+  }
+);
+
+export const txtDrilldownAction = i18n.translate(
+  'embeddableApi.components.form_create_drilldown.drilldownAction',
+  {
+    defaultMessage: 'Drilldown action',
+  }
+);

src/plugins/embeddable/public/components/form_create_drilldown/index.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 { EuiForm, EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { DrilldownHelloBar } from '../drilldown_hello_bar';
+import { txtNameOfDrilldown, txtUntitledDrilldown, txtDrilldownAction } from './i18n';
+import { DrilldownPicker } from '../drilldown_picker';
+
+// eslint-disable-next-line
+export interface FormCreateDrilldownProps {}
+
+export const FormCreateDrilldown: React.FC<FormCreateDrilldownProps> = () => {
+  return (
+    <div>
+      <DrilldownHelloBar />
+      <EuiForm>
+        <EuiFormRow label={txtNameOfDrilldown}>
+          <EuiFieldText name="drilldown_name" placeholder={txtUntitledDrilldown} />
+        </EuiFormRow>
+        <EuiFormRow label={txtDrilldownAction}>
+          <DrilldownPicker />
+        </EuiFormRow>
+      </EuiForm>
+    </div>
+  );
+};

src/plugins/embeddable/public/components/panel_options_menu/__examples__/panel_options_menu.examples.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { PanelOptionsMenu } from '..';
+
+const euiContextDescriptors = {
+  id: 'mainMenu',
+  title: 'Options',
+  items: [
+    {
+      name: 'Inspect',
+      icon: 'inspect',
+      onClick: action('onClick(inspect)'),
+    },
+    {
+      name: 'Full screen',
+      icon: 'expand',
+      onClick: action('onClick(expand)'),
+    },
+  ],
+};
+
+storiesOf('components/PanelOptionsMenu', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const isViewMode = boolean('isViewMode', false);
+
+    return (
+      <div style={{ height: 150 }}>
+        <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />
+      </div>
+    );
+  });

src/plugins/embeddable/public/components/panel_options_menu/index.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import React, { useState, useEffect } from 'react';
+import {
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiPopover,
+} from '@elastic/eui';
+
+export interface PanelOptionsMenuProps {
+  panelDescriptor?: EuiContextMenuPanelDescriptor;
+  close?: boolean;
+  isViewMode?: boolean;
+  title?: string;
+}
+
+export const PanelOptionsMenu: React.FC<PanelOptionsMenuProps> = ({
+  panelDescriptor,
+  close,
+  isViewMode,
+  title,
+}) => {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!close) setOpen(false);
+  }, [close]);
+
+  const handleContextMenuClick = () => {
+    setOpen(isOpen => !isOpen);
+  };
+
+  const handlePopoverClose = () => {
+    setOpen(false);
+  };
+
+  const enhancedAriaLabel = i18n.translate(
+    'embeddableApi.panel.optionsMenu.panelOptionsButtonEnhancedAriaLabel',
+    {
+      defaultMessage: 'Panel options for {title}',
+      values: { title },
+    }
+  );
+  const ariaLabelWithoutTitle = i18n.translate(
+    'embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel',
+    {
+      defaultMessage: 'Panel options',
+    }
+  );
+
+  const button = (
+    <EuiButtonIcon
+      iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
+      color="text"
+      className="embPanel__optionsMenuButton"
+      aria-label={title ? enhancedAriaLabel : ariaLabelWithoutTitle}
+      data-test-subj="embeddablePanelToggleMenuIcon"
+      onClick={handleContextMenuClick}
+    />
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={open}
+      closePopover={handlePopoverClose}
+      panelPaddingSize="none"
+      anchorPosition="downRight"
+      data-test-subj={open ? 'embeddablePanelContextMenuOpen' : 'embeddablePanelContextMenuClosed'}
+      withTitle
+    >
+      <EuiContextMenu initialPanelId="mainMenu" panels={panelDescriptor ? [panelDescriptor] : []} />
+    </EuiPopover>
+  );
+};

src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss

@@ -100,7 +100,6 @@
   }
 }
 
-.embPanel__optionsMenuPopover[class*='-isOpen'],
 .embPanel:hover {
   .embPanel__optionsMenuButton {
     opacity: 1;

src/plugins/embeddable/public/lib/panel/actions/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export * from './open_flyout_add_drilldown';