Fix overlapping buttons and clean up data-loading styles

Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>
influxdata · Feb 13, 2019 · 960d5d9 · 960d5d9
1 parent 007f505
commit 960d5d9
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 197 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### Bug Fixes
 1. [11819](https://github.com/influxdata/influxdb/pull/11819): Update the inline edit for resource names to guard for empty strings
+1. [11848](https://github.com/influxdata/influxdb/pull/11848): Fix overlapping buttons in the telegrafs verify data step
+
 ### UI Improvements
 1. [11764](https://github.com/influxdata/influxdb/pull/11764): Move the download telegraf config button to view config overlay
 

diff --git a/ui/src/clockface/components/wizard/WizardOverlay.scss b/ui/src/clockface/components/wizard/WizardOverlay.scss
@@ -35,18 +35,4 @@
   }
 }
 
-.wizard--columns {
-  .wizard-step--scroll-content {
-    margin: 0;
-    padding: $ix-marg-d;
-  }
-}
-
-.wizard--column-panel {
-  background-color: $g3-castle;
-  border-radius: 0 $radius $radius 0;
-}
 
-.wizard-step--scroll-area.plugins {
-  height: calc(100% - 232px);
-}
diff --git a/ui/src/clockface/components/wizard/WizardOverlay.tsx b/ui/src/clockface/components/wizard/WizardOverlay.tsx
@@ -31,7 +31,7 @@ class WizardOverlay extends PureComponent<Props> {
         <OverlayContainer maxWidth={maxWidth}>
           <OverlayHeading title={title} onDismiss={onDismiss} />
           <OverlayBody>
-            <div className="wizard-overlay">{children}</div>
+            <div className="data-loading--overlay">{children}</div>
           </OverlayBody>
         </OverlayContainer>
       </OverlayTechnology>

diff --git a/ui/src/dataLoaders/components/DataLoadersOverlay.scss b/ui/src/dataLoaders/components/DataLoadersOverlay.scss
@@ -0,0 +1,46 @@
+/*
+  Data Loading Overlay Styles
+*/
+
+@import 'src/style/modules';
+
+.data-loading--overlay {
+  height: calc(90vh - 140px);
+  display: flex;
+  flex-direction: column;
+
+  .data-loading--form {
+    flex-grow: 1;
+    display: inline-flex;
+    flex-direction: column;
+
+    .data-loading--scroll-content {
+      flex-grow: 1;
+      text-align: center;
+      display: inline-flex;
+      flex-direction: column;
+
+      .data-loading--columns {
+        display: flex;
+        // align-items: stretch;
+        flex-direction: row;
+        flex-grow: 1;
+      }
+    }
+
+    .data-loading--button-container {
+      position: relative;
+      display: inline-flex;
+      align-content: center;
+      justify-content: center;
+      padding: 15px;
+    }
+  }
+}
+
+.data-loading--column-panel {
+  background-color: $g3-castle;
+  border-radius: 0 $radius $radius 0;
+  flex: 1 0 auto;
+  padding: $ix-marg-d;
+}
diff --git a/ui/src/dataLoaders/components/DataLoadersWizard.tsx b/ui/src/dataLoaders/components/DataLoadersWizard.tsx
@@ -110,19 +110,15 @@ class DataLoadersWizard extends PureComponent<Props> {
         title={'Data Loading'}
         onDismiss={this.handleDismiss}
       >
-        <div className="wizard-contents">
-          <div className="wizard-step--container">
-            <StepSwitcher
-              currentStepIndex={currentStepIndex}
-              onboardingStepProps={this.stepProps}
-              bucketName={bucket}
-              onSetBucketInfo={onSetBucketInfo}
-              type={type}
-              org={org}
-              buckets={buckets}
-            />
-          </div>
-        </div>
+        <StepSwitcher
+          currentStepIndex={currentStepIndex}
+          onboardingStepProps={this.stepProps}
+          bucketName={bucket}
+          onSetBucketInfo={onSetBucketInfo}
+          type={type}
+          org={org}
+          buckets={buckets}
+        />
       </WizardOverlay>
     )
   }

diff --git a/ui/src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher.tsx b/ui/src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher.tsx
@@ -27,11 +27,7 @@ class StepSwitcher extends PureComponent<Props> {
       case CollectorsStep.Select:
         return <SelectCollectorsStep {...stepProps} buckets={buckets} />
       case CollectorsStep.Configure:
-        return (
-          <div className="onboarding-step">
-            <PluginConfigSwitcher />
-          </div>
-        )
+        return <PluginConfigSwitcher />
       case CollectorsStep.Verify:
         return <VerifyCollectorsStep {...stepProps} />
       default:

diff --git a/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx b/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
@@ -24,6 +24,9 @@ import {
   setPluginConfiguration,
 } from 'src/dataLoaders/actions/dataLoaders'
 
+// Styles
+import 'src/dataLoaders/components/DataLoadersOverlay.scss'
+
 // Types
 import {Links} from 'src/types/v2/links'
 import {Substep, TelegrafPlugin} from 'src/types/v2/dataLoaders'
@@ -94,14 +97,7 @@ class CollectorsWizard extends PureComponent<Props> {
         title={'Create a Telegraf Config'}
         onDismiss={this.handleDismiss}
       >
-        <div className="wizard-contents">
-          <div className="wizard-step--container">
-            <CollectorsStepSwitcher
-              stepProps={this.stepProps}
-              buckets={buckets}
-            />
-          </div>
-        </div>
+        <CollectorsStepSwitcher stepProps={this.stepProps} buckets={buckets} />
       </WizardOverlay>
     )
   }

diff --git a/ui/src/dataLoaders/components/collectorsWizard/configure/ConfigFieldHandler.tsx b/ui/src/dataLoaders/components/collectorsWizard/configure/ConfigFieldHandler.tsx
@@ -37,7 +37,7 @@ type Props = OwnProps & DispatchProps
 
 export class ConfigFieldHandler extends PureComponent<Props> {
   public render() {
-    return <>{this.formFields}</>
+    return <div>{this.formFields}</div>
   }
 
   private get formFields(): JSX.Element[] | JSX.Element {

diff --git a/ui/src/dataLoaders/components/collectorsWizard/configure/PluginConfigForm.tsx b/ui/src/dataLoaders/components/collectorsWizard/configure/PluginConfigForm.tsx
@@ -39,35 +39,37 @@ export class PluginConfigForm extends PureComponent<Props> {
   public render() {
     const {configFields, telegrafPlugin} = this.props
     return (
-      <Form onSubmit={this.handleSubmitForm}>
-        <div className="wizard-step--scroll-area">
-          <FancyScrollbar autoHide={false}>
-            <div className="wizard-step--scroll-content">
-              <h3 className="wizard-step--title">
-                {_.startCase(telegrafPlugin.name)}
-              </h3>
-              <h5 className="wizard-step--sub-title">
-                For more information about this plugin, see{' '}
-                <a
-                  target="_blank"
-                  data-test="docs-link"
-                  href={`https://github.com/influxdata/telegraf/tree/master/plugins/inputs/${
-                    telegrafPlugin.name
-                  }`}
-                >
-                  Documentation
-                </a>
-              </h5>
-              <ConfigFieldHandler
-                configFields={configFields}
-                telegrafPlugin={telegrafPlugin}
-              />
-            </div>
-          </FancyScrollbar>
-        </div>
+      <Form onSubmit={this.handleSubmitForm} className="data-loading--form">
+        <FancyScrollbar
+          autoHide={false}
+          className="data-loading--scroll-content"
+        >
+          <div>
+            <h3 className="wizard-step--title">
+              {_.startCase(telegrafPlugin.name)}
+            </h3>
+            <h5 className="wizard-step--sub-title">
+              For more information about this plugin, see{' '}
+              <a
+                target="_blank"
+                data-test="docs-link"
+                href={`https://github.com/influxdata/telegraf/tree/master/plugins/inputs/${
+                  telegrafPlugin.name
+                }`}
+              >
+                Documentation
+              </a>
+            </h5>
+          </div>
+          <ConfigFieldHandler
+            configFields={configFields}
+            telegrafPlugin={telegrafPlugin}
+          />
+        </FancyScrollbar>
         <OnboardingButtons
           autoFocusNext={this.autoFocus}
           nextButtonText={'Done'}
+          className="data-loading--button-container"
         />
       </Form>
     )

diff --git a/ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx b/ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx
@@ -47,44 +47,48 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
       onIncrementStep,
     } = this.props
     return (
-      <>
-        <h3 className="wizard-step--title">Configure Plugins</h3>
-        <h5 className="wizard-step--sub-title">
-          Configure each plugin from the menu on the left. Some plugins do not
-          require any configuration.
-        </h5>
-        <Form onSubmit={onIncrementStep}>
-          <div className="wizard-step--scroll-area plugins">
-            <div className="wizard--columns">
-              <PluginsSideBar
-                telegrafPlugins={telegrafPlugins}
-                onTabClick={this.handleClickSideBarTab}
-                title="Plugins"
-                visible={this.sideBarVisible}
-              />
-              <FancyScrollbar autoHide={false} className="wizard--column-panel">
-                <div className="wizard-step--scroll-content">
-                  <Form.Element label="Telegraf Configuration Name">
-                    <Input
-                      type={InputType.Text}
-                      value={telegrafConfigName}
-                      onChange={this.handleNameInput}
-                      titleText="Telegraf Configuration Name"
-                      size={ComponentSize.Medium}
-                      autoFocus={true}
-                    />
-                  </Form.Element>
-                </div>
+      <Form onSubmit={onIncrementStep} className="data-loading--form">
+        <div className="data-loading--scroll-content">
+          <div>
+            <h3 className="wizard-step--title">Configure Plugins</h3>
+            <h5 className="wizard-step--sub-title">
+              Configure each plugin from the menu on the left. Some plugins do
+              not require any configuration.
+            </h5>
+          </div>
+          <div className="data-loading--columns">
+            <PluginsSideBar
+              telegrafPlugins={telegrafPlugins}
+              onTabClick={this.handleClickSideBarTab}
+              title="Plugins"
+              visible={this.sideBarVisible}
+            />
+            <div className="data-loading--column-panel">
+              <FancyScrollbar
+                autoHide={false}
+                className="data-loading--scroll-content"
+              >
+                <Form.Element label="Telegraf Configuration Name">
+                  <Input
+                    type={InputType.Text}
+                    value={telegrafConfigName}
+                    onChange={this.handleNameInput}
+                    titleText="Telegraf Configuration Name"
+                    size={ComponentSize.Medium}
+                    autoFocus={true}
+                  />
+                </Form.Element>
               </FancyScrollbar>
             </div>
           </div>
-
-          <OnboardingButtons
-            onClickBack={onDecrementStep}
-            nextButtonText={'Create and Verify'}
-          />
-        </Form>
-      </>
+        </div>
+
+        <OnboardingButtons
+          onClickBack={onDecrementStep}
+          nextButtonText={'Create and Verify'}
+          className="data-loading--button-container"
+        />
+      </Form>
     )
   }
 

diff --git a/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx b/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx
@@ -45,33 +45,36 @@ type Props = OwnProps & StateProps & DispatchProps
 export class SelectCollectorsStep extends PureComponent<Props> {
   public render() {
     return (
-      <div className="onboarding-step">
-        <h3 className="wizard-step--title">What do you want to monitor?</h3>
-        <h5 className="wizard-step--sub-title">
-          Telegraf is a plugin-based data collection agent which writes metrics
-          to a bucket in InfluxDB
-        </h5>
-        <Form onSubmit={this.props.onIncrementCurrentStepIndex}>
-          <div className="wizard-step--scroll-area">
-            <FancyScrollbar autoHide={false}>
-              <div className="wizard-step--scroll-content">
-                <StreamingSelector
-                  pluginBundles={this.props.pluginBundles}
-                  telegrafPlugins={this.props.telegrafPlugins}
-                  onTogglePluginBundle={this.handleTogglePluginBundle}
-                  buckets={this.props.buckets}
-                  bucket={this.props.bucket}
-                  onSelectBucket={this.handleSelectBucket}
-                />
-              </div>
-            </FancyScrollbar>
+      <Form
+        onSubmit={this.props.onIncrementCurrentStepIndex}
+        className="data-loading--form"
+      >
+        <FancyScrollbar
+          autoHide={false}
+          className="data-loading--scroll-content"
+        >
+          <div>
+            <h3 className="wizard-step--title">What do you want to monitor?</h3>
+            <h5 className="wizard-step--sub-title">
+              Telegraf is a plugin-based data collection agent which writes
+              metrics to a bucket in InfluxDB
+            </h5>
           </div>
-          <OnboardingButtons
-            autoFocusNext={true}
-            nextButtonStatus={this.nextButtonStatus}
+          <StreamingSelector
+            pluginBundles={this.props.pluginBundles}
+            telegrafPlugins={this.props.telegrafPlugins}
+            onTogglePluginBundle={this.handleTogglePluginBundle}
+            buckets={this.props.buckets}
+            bucket={this.props.bucket}
+            onSelectBucket={this.handleSelectBucket}
           />
-        </Form>
-      </div>
+        </FancyScrollbar>
+        <OnboardingButtons
+          autoFocusNext={true}
+          nextButtonStatus={this.nextButtonStatus}
+          className="data-loading--button-container"
+        />
+      </Form>
     )
   }