"Create drilldown" flyout - design cleanup (#60309)

* create drilldown flyout cleanup * remove border from selectedActionFactoryContainer * adjust callout in DrilldownHello * update form labels * remove unused file * fix type error Co-authored-by: Anton Dosov <[email protected]>
elastic · Mar 17, 2020 · 5418305 · 5418305
1 parent 7a7beeb
commit 5418305
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 18 deletions.
diff --git a/packages/kbn-storybook/storybook_config/webpack.config.js b/packages/kbn-storybook/storybook_config/webpack.config.js
@@ -66,7 +66,8 @@ module.exports = async ({ config }) => {
   config.module.rules.push({
     test: /\.tsx$/,
     // Exclude example files, as we don't display props info for them
-    exclude: /\.examples.tsx$/,
+    // TODO: validated_dual_range throws: https://github.com/elastic/kibana/issues/60356
+    exclude: /\.examples.tsx$|validated_dual_range.tsx$/,
     use: [
       // Parse TS comments to create Props tables in the UI
       require.resolve('react-docgen-typescript-loader'),

diff --git a/x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.scss b/x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.scss
@@ -1,9 +1,3 @@
-.auaActionWizard__selectedActionFactoryContainer {
-  background-color: $euiColorLightestShade;
-  padding: $euiSize;
-  border-radius: $euiBorderRadius;
-}
-
 .auaActionWizard__actionFactoryItem {
   .euiKeyPadMenuItem__label {
     height: #{$euiSizeXL};

diff --git a/x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.tsx b/x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.tsx
@@ -134,7 +134,7 @@ const SelectedActionFactory: React.FC<SelectedActionFactoryProps> = ({
           </EuiFlexItem>
           {showDeselect && (
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size="s" onClick={() => onDeselect()}>
+              <EuiButtonEmpty size="xs" onClick={() => onDeselect()}>
                 {txtChangeButton}
               </EuiButtonEmpty>
             </EuiFlexItem>

diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.scss b/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.scss
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx b/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx
@@ -10,11 +10,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTextColor,
+  EuiText,
   EuiLink,
   EuiSpacer,
   EuiButtonEmpty,
+  EuiIcon,
 } from '@elastic/eui';
-import './drilldown_hello_bar.scss';
 import { txtHideHelpButtonLabel, txtHelpText, txtViewDocsLinkLabel } from './i18n';
 
 export interface DrilldownHelloBarProps {
@@ -30,12 +31,16 @@ export const DrilldownHelloBar: React.FC<DrilldownHelloBarProps> = ({
 }) => {
   return (
     <EuiCallOut
-      iconType="help"
       data-test-subj={WELCOME_MESSAGE_TEST_SUBJ}
       title={
         <EuiFlexGroup className="drdHelloBar__content">
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="help" />
+          </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <EuiTextColor color="subdued">{txtHelpText}</EuiTextColor>
+            <EuiText size={'s'}>
+              <EuiTextColor color="subdued">{txtHelpText}</EuiTextColor>
+            </EuiText>
             {docsLink && (
               <>
                 <EuiSpacer size={'xs'} />
@@ -45,7 +50,7 @@ export const DrilldownHelloBar: React.FC<DrilldownHelloBarProps> = ({
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty size="xs" onClick={onHideClick}>
-              <EuiTextColor color="subdued">{txtHideHelpButtonLabel}</EuiTextColor>
+              {txtHideHelpButtonLabel}
             </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>

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
@@ -48,4 +48,23 @@ storiesOf('components/FlyoutDrilldownWizard', module)
         />
       </EuiFlyout>
     );
+  })
+  .add('open in flyout - edit, just 1 action type', () => {
+    return (
+      <EuiFlyout onClose={() => {}}>
+        <FlyoutDrilldownWizard
+          onClose={() => {}}
+          drilldownActionFactories={[dashboardFactory]}
+          initialDrilldownWizardConfig={{
+            name: 'My fancy drilldown',
+            actionFactory: urlFactory as any,
+            actionConfig: {
+              url: 'https://elastic.co',
+              openInNewTab: true,
+            },
+          }}
+          mode={'edit'}
+        />
+      </EuiFlyout>
+    );
   });
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.tsx b/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.tsx
@@ -54,7 +54,7 @@ export const FormDrilldownWizard: React.FC<FormDrilldownWizardProps> = ({
 
   const actionWizard = (
     <EuiFormRow
-      label={txtDrilldownAction}
+      label={actionFactories?.length > 1 ? txtDrilldownAction : undefined}
       fullWidth={true}
       className="drdFormDrilldownWizard__formRow"
     >

diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/i18n.ts b/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/i18n.ts
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 export const txtNameOfDrilldown = i18n.translate(
   'xpack.drilldowns.components.FormCreateDrilldown.nameOfDrilldown',
   {
-    defaultMessage: 'Name of drilldown:',
+    defaultMessage: 'Name',
   }
 );
 
@@ -23,6 +23,6 @@ export const txtUntitledDrilldown = i18n.translate(
 export const txtDrilldownAction = i18n.translate(
   'xpack.drilldowns.components.FormCreateDrilldown.drilldownAction',
   {
-    defaultMessage: 'Drilldown action:',
+    defaultMessage: 'Action',
   }
 );