<FlyoutDrilldownWizard>

elastic · Mar 5, 2020 · 9f0da1c · 9f0da1c
1 parent 765f962
commit 9f0da1c
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 12 deletions.
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
@@ -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/...ns/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx b/...ns/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
@@ -15,20 +15,19 @@ 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>
     );
   })
   .add('open in flyout - edit', () => {
     return (
       <EuiFlyout onClose={() => {}}>
         <FlyoutDrilldownWizard
-          context={{} as any}
           onClose={() => {}}
           initialDrilldownWizardConfig={{
             name: 'My fancy drilldown',

diff --git a/.../plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx b/.../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
@@ -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
@@ -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
@@ -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/.../drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.story.tsx b/.../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/...lugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx b/...lugins/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
@@ -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',
+  }
+);