improve

x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx

@@ -41,6 +41,7 @@ export interface FlyoutDrilldownWizardProps<
   initialDrilldownWizardConfig?: DrilldownWizardConfig<CurrentActionConfig>;
 
   showWelcomeMessage?: boolean;
+  onWelcomeHideClick?: () => void;
 }
 
 export function FlyoutDrilldownWizard<
@@ -53,6 +54,7 @@ export function FlyoutDrilldownWizard<
   mode = 'create',
   onDelete = () => {},
   showWelcomeMessage = false,
+  onWelcomeHideClick,
 }: FlyoutDrilldownWizardProps<CurrentActionConfig>) {
   const [wizardConfig, setWizardConfig] = useState<DrilldownWizardConfig>(
     () =>
@@ -89,15 +91,7 @@ export function FlyoutDrilldownWizard<
       footer={footer}
       onClose={onClose}
       onBack={onBack}
-      banner={
-        showWelcomeMessage && (
-          <DrilldownHelloBar
-            onHideClick={() => {
-              // TODO:
-            }}
-          />
-        )
-      }
+      banner={showWelcomeMessage && <DrilldownHelloBar onHideClick={onWelcomeHideClick} />}
     >
       <FormDrilldownWizard
         name={wizardConfig.name}

x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_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 { FlyoutListManageDrilldowns } from './flyout_list_manage_drilldowns';
+import { drilldowns } from '../list_manage_drilldowns/test_data';
+
+storiesOf('components/FlyoutListManageDrilldowns', module).add('default', () => (
+  <EuiFlyout onClose={() => {}}>
+    <FlyoutListManageDrilldowns drilldowns={drilldowns} />
+  </EuiFlyout>
+));

x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 from 'react';
+import { FlyoutFrame } from '../flyout_frame';
+import { DrilldownListItem, ListManageDrilldowns } from '../list_manage_drilldowns';
+import { txtManageDrilldowns } from './i18n';
+import { DrilldownHelloBar } from '../drilldown_hello_bar';
+
+export interface FlyoutListManageDrilldownsProps {
+  drilldowns: DrilldownListItem[];
+  onClose?: () => void;
+  onCreate?: () => void;
+  onEdit?: (drilldownId: string) => void;
+  onDelete?: (drilldownIds: string[]) => void;
+  showWelcomeMessage?: boolean;
+  onWelcomeHideClick?: () => void;
+}
+
+export function FlyoutListManageDrilldowns({
+  drilldowns,
+  onClose = () => {},
+  onCreate,
+  onDelete,
+  onEdit,
+  showWelcomeMessage = true,
+  onWelcomeHideClick,
+}: FlyoutListManageDrilldownsProps) {
+  return (
+    <FlyoutFrame
+      title={txtManageDrilldowns}
+      onClose={onClose}
+      banner={showWelcomeMessage && <DrilldownHelloBar onHideClick={onWelcomeHideClick} />}
+    >
+      <ListManageDrilldowns
+        drilldowns={drilldowns}
+        onCreate={onCreate}
+        onEdit={onEdit}
+        onDelete={onDelete}
+      />
+    </FlyoutFrame>
+  );
+}

x-pack/plugins/drilldowns/public/components/flyout_list_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.FlyoutListManageDrilldowns.manageDrilldownsTitle',
+  {
+    defaultMessage: 'Manage Drilldowns',
+  }
+);

x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/index.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './flyout_list_manage_drilldowns';

x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/flyout_manage_drilldowns.tsx

@@ -5,31 +5,33 @@
  */
 
 import React, { useState } from 'react';
-import { FlyoutFrame } from '../flyout_frame';
-import { DrilldownListItem, ListManageDrilldowns } from '../list_manage_drilldowns';
+import { DrilldownListItem } from '../list_manage_drilldowns';
 import { FlyoutDrilldownWizard } from '../flyout_drilldown_wizard';
-import { txtManageDrilldowns } from './i18n';
-import { DrilldownHelloBar } from '../drilldown_hello_bar';
+import { FlyoutListManageDrilldowns } from '../flyout_list_manage_drilldowns';
 
 export interface FlyoutManageDrilldownsProps {
   drilldowns: DrilldownListItem[];
   onClose?: () => void;
   showWelcomeMessage?: boolean;
+  onHideWelcomeMessage?: () => void;
 }
 
 enum ViewState {
-  List,
-  Create,
-  Edit,
+  List = 'list',
+  Create = 'create',
+  Edit = 'edit',
 }
 
 export function FlyoutManageDrilldowns({
   drilldowns,
   onClose = () => {},
   showWelcomeMessage = true,
+  onHideWelcomeMessage,
 }: FlyoutManageDrilldownsProps) {
   const [viewState, setViewState] = useState<ViewState>(ViewState.List);
 
+  // TODO: apparently this will be the component with all the state management and data fetching
+
   switch (viewState) {
     case ViewState.Create:
     case ViewState.Edit:
@@ -47,34 +49,25 @@ export function FlyoutManageDrilldowns({
             setViewState(ViewState.List);
           }}
           showWelcomeMessage={showWelcomeMessage}
+          onWelcomeHideClick={onHideWelcomeMessage}
         />
       );
     case ViewState.List:
     default:
       return (
-        <FlyoutFrame
-          title={txtManageDrilldowns}
+        <FlyoutListManageDrilldowns
+          drilldowns={drilldowns}
           onClose={onClose}
-          banner={
-            showWelcomeMessage && (
-              <DrilldownHelloBar
-                onHideClick={() => {
-                  // TODO:
-                }}
-              />
-            )
-          }
-        >
-          <ListManageDrilldowns
-            drilldowns={drilldowns}
-            onCreate={() => {
-              setViewState(ViewState.Create);
-            }}
-            onEdit={() => {
-              setViewState(ViewState.Edit);
-            }}
-          />
-        </FlyoutFrame>
+          showWelcomeMessage={showWelcomeMessage}
+          onWelcomeHideClick={onHideWelcomeMessage}
+          onCreate={() => {
+            setViewState(ViewState.Create);
+          }}
+          onEdit={() => {
+            setViewState(ViewState.Edit);
+          }}
+          onDelete={() => {}}
+        />
       );
   }
 }

x-pack/plugins/drilldowns/public/components/flyout_manage_drilldowns/index.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './flyout_manage_drilldowns';