From 9f0da1cc01c50f84973e92793cd7da278650933c Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 5 Mar 2020 18:55:18 +0100
Subject: [PATCH] <FlyoutDrilldownWizard>

---
 .../actions/flyout_create_drilldown/index.tsx |  2 +-
 .../flyout_drilldown_wizard.story.tsx         |  5 +-
 .../flyout_drilldown_wizard.tsx               |  8 +--
 .../flyout_frame/flyout_frame.story.tsx       |  7 ++
 .../components/flyout_frame/flyout_frame.tsx  | 37 ++++++++++-
 .../public/components/flyout_frame/i18n.ts    |  6 +-
 .../flyout_manage_drilldowns.story.tsx        | 17 +++++
 .../flyout_manage_drilldowns.tsx              | 64 +++++++++++++++++++
 .../flyout_manage_drilldowns/i18n.ts          | 14 ++++
 9 files changed, 148 insertions(+), 12 deletions(-)
 create mode 100644 x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.story.tsx
 create mode 100644 x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx
 create mode 100644 x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/i18n.ts

diff --git a/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx b/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx
index b0615b3ee9c01..0d534d8b7e95c 100644
--- a/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx
+++ b/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx
@@ -46,7 +46,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
   public async execute(context: FlyoutCreateDrilldownActionContext) {
     const overlays = await this.params.overlays();
     const handle = overlays.openFlyout(
-      toMountPoint(<FlyoutDrilldownWizard context={context} onClose={() => handle.close()} />)
+      toMountPoint(<FlyoutDrilldownWizard onClose={() => handle.close()} />)
     );
   }
 }
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx b/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
index 8a67c793361cd..a6395db54560c 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
+++ b/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
@@ -15,12 +15,12 @@ import { urlDrilldownActionFactory } from '../../../../advanced_ui_actions/publi
 
 storiesOf('components/FlyoutDrilldownWizard', module)
   .add('default', () => {
-    return <FlyoutDrilldownWizard context={{} as any} />;
+    return <FlyoutDrilldownWizard />;
   })
   .add('open in flyout - create', () => {
     return (
       <EuiFlyout onClose={() => {}}>
-        <FlyoutDrilldownWizard context={{} as any} onClose={() => {}} />
+        <FlyoutDrilldownWizard onClose={() => {}} />
       </EuiFlyout>
     );
   })
@@ -28,7 +28,6 @@ storiesOf('components/FlyoutDrilldownWizard', module)
     return (
       <EuiFlyout onClose={() => {}}>
         <FlyoutDrilldownWizard
-          context={{} as any}
           onClose={() => {}}
           initialDrilldownWizardConfig={{
             name: 'My fancy drilldown',
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx b/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
index de5042879bf1f..8f64a69f42227 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
+++ b/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
@@ -15,8 +15,7 @@ import {
   txtEditDrilldownButtonLabel,
   txtEditDrilldownTitle,
 } from './i18n';
-import { FlyoutCreateDrilldownActionContext } from '../../actions';
-import { ActionFactory, ActionBaseConfig } from '../../../../advanced_ui_actions/public';
+import { ActionBaseConfig, ActionFactory } from '../../../../advanced_ui_actions/public';
 import {
   dashboardDrilldownActionFactory,
   urlDrilldownActionFactory,
@@ -32,10 +31,10 @@ export interface DrilldownWizardConfig<ActionConfig extends ActionBaseConfig = A
 export interface FlyoutDrilldownWizardProps<
   CurrentActionConfig extends ActionBaseConfig = ActionBaseConfig
 > {
-  context: FlyoutCreateDrilldownActionContext;
   onSubmit?: (drilldownWizardConfig: DrilldownWizardConfig) => void;
   onDelete?: () => void;
   onClose?: () => void;
+  onBack?: () => void;
 
   mode?: 'create' | 'edit';
   initialDrilldownWizardConfig?: DrilldownWizardConfig<CurrentActionConfig>;
@@ -44,8 +43,8 @@ export interface FlyoutDrilldownWizardProps<
 export function FlyoutDrilldownWizard<
   CurrentActionConfig extends ActionBaseConfig = ActionBaseConfig
 >({
-  context,
   onClose,
+  onBack,
   onSubmit = () => {},
   initialDrilldownWizardConfig,
   mode = 'create',
@@ -84,6 +83,7 @@ export function FlyoutDrilldownWizard<
       title={mode === 'edit' ? txtEditDrilldownTitle : txtCreateDrilldownTitle}
       footer={footer}
       onClose={onClose}
+      onBack={onBack}
     >
       <FormDrilldownWizard
         name={wizardConfig.name}
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx b/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx
index 2715637f6392f..cb223db556f56 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx
+++ b/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx
@@ -21,6 +21,13 @@ storiesOf('components/FlyoutFrame', module)
   .add('with onClose', () => {
     return <FlyoutFrame onClose={() => console.log('onClose')}>test</FlyoutFrame>;
   })
+  .add('with onBack', () => {
+    return (
+      <FlyoutFrame onBack={() => console.log('onClose')} title={'Title'}>
+        test
+      </FlyoutFrame>
+    );
+  })
   .add('custom footer', () => {
     return <FlyoutFrame footer={<button>click me!</button>}>test</FlyoutFrame>;
   })
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx b/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx
index 9c1c51d3a0d9d..cd9916bf0dbe4 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx
+++ b/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx
@@ -13,13 +13,15 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
+  EuiButtonIcon,
 } from '@elastic/eui';
-import { txtClose } from './i18n';
+import { txtClose, txtBack } from './i18n';
 
 export interface FlyoutFrameProps {
   title?: React.ReactNode;
   footer?: React.ReactNode;
   onClose?: () => void;
+  onBack?: () => void;
 }
 
 /**
@@ -30,11 +32,40 @@ export const FlyoutFrame: React.FC<FlyoutFrameProps> = ({
   footer,
   onClose,
   children,
+  onBack,
 }) => {
-  const headerFragment = title && (
+  const headerFragment = (title || onBack) && (
     <EuiFlyoutHeader hasBorder>
       <EuiTitle size="m">
-        <h1>{title}</h1>
+        <>
+          {/* just title */}
+          {title && !onBack && <h1>{title}</h1>}
+          {/* just back button */}
+          {!title && onBack && (
+            <EuiButtonIcon
+              color={'subdued'}
+              onClick={onBack}
+              iconType="arrowLeft"
+              aria-label={txtBack}
+            />
+          )}
+          {/* back button && title */}
+          {title && onBack && (
+            <EuiFlexGroup alignItems="center" gutterSize={'s'}>
+              <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                  color={'subdued'}
+                  onClick={onBack}
+                  iconType="arrowLeft"
+                  aria-label={txtBack}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={true}>
+                <h1>{title}</h1>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+        </>
       </EuiTitle>
     </EuiFlyoutHeader>
   );
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts b/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
index 257d7d36dbee1..23af89ebf9bc7 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
+++ b/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
@@ -6,6 +6,10 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const txtClose = i18n.translate('xpack.drilldowns.components.FlyoutFrame.Close', {
+export const txtClose = i18n.translate('xpack.drilldowns.components.FlyoutFrame.CloseButtonLabel', {
   defaultMessage: 'Close',
 });
+
+export const txtBack = i18n.translate('xpack.drilldowns.components.FlyoutFrame.BackButtonLabel', {
+  defaultMessage: 'Back',
+});
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.story.tsx b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.story.tsx
new file mode 100644
index 0000000000000..33feea11c4f29
--- /dev/null
+++ b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.story.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { EuiFlyout } from '@elastic/eui';
+import { storiesOf } from '@storybook/react';
+import { FlyoutManageDrilldowns } from './flyout_manage_drilldowns';
+import { drilldowns } from '../list_manage_drilldowns/test_data';
+
+storiesOf('components/FlyoutManageDrilldowns', module).add('default', () => (
+  <EuiFlyout onClose={() => {}}>
+    <FlyoutManageDrilldowns drilldowns={drilldowns} />
+  </EuiFlyout>
+));
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx
new file mode 100644
index 0000000000000..6ac5ce7bc2b5a
--- /dev/null
+++ b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { FlyoutFrame } from '../flyout_frame';
+import { DrilldownListItem, ListManageDrilldowns } from '../list_manage_drilldowns';
+import { FlyoutDrilldownWizard } from '../flyout_drilldown_wizard';
+import { txtManageDrilldowns } from './i18n';
+
+export interface FlyoutManageDrilldownsProps {
+  drilldowns: DrilldownListItem[];
+  onClose?: () => void;
+}
+
+enum ViewState {
+  List,
+  Create,
+  Edit,
+}
+
+export function FlyoutManageDrilldowns({
+  drilldowns,
+  onClose = () => {},
+}: FlyoutManageDrilldownsProps) {
+  const [viewState, setViewState] = useState<ViewState>(ViewState.List);
+
+  switch (viewState) {
+    case ViewState.Create:
+    case ViewState.Edit:
+      return (
+        <FlyoutDrilldownWizard
+          mode={viewState === ViewState.Create ? 'create' : 'edit'}
+          onSubmit={() => setViewState(ViewState.List)}
+          onDelete={() => {
+            setViewState(ViewState.List);
+          }}
+          onClose={() => {
+            onClose();
+          }}
+          onBack={() => {
+            setViewState(ViewState.List);
+          }}
+        />
+      );
+    case ViewState.List:
+    default:
+      return (
+        <FlyoutFrame title={txtManageDrilldowns} onClose={onClose}>
+          <ListManageDrilldowns
+            drilldowns={drilldowns}
+            onCreate={() => {
+              setViewState(ViewState.Create);
+            }}
+            onEdit={() => {
+              setViewState(ViewState.Edit);
+            }}
+          />
+        </FlyoutFrame>
+      );
+  }
+}
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/i18n.ts b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/i18n.ts
new file mode 100644
index 0000000000000..460fcf2e06c0e
--- /dev/null
+++ b/x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/i18n.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtManageDrilldowns = i18n.translate(
+  'xpack.drilldowns.components.FlyoutManageDrilldowns.manageDrilldownsTitle',
+  {
+    defaultMessage: 'Manage Drilldowns',
+  }
+);