Merge pull request #14887 from influxdata/fix/no-buckets-alert

fix(ui): Polish no buckets warning in telegraf tab

CHANGELOG.md

@@ -14,6 +14,7 @@
 1. [14889](https://github.com/influxdata/influxdb/pull/14889): Make adding data to buckets more discoverable
 1. [14709](https://github.com/influxdata/influxdb/pull/14709): Move Buckets, Telgrafs, and Scrapers pages into a tab called "Load Data" for ease of discovery
 1. [14846](https://github.com/influxdata/influxdb/pull/14846): Standardize formatting of "updated at" timestamp in all resource cards
+1. [14887](https://github.com/influxdata/influxdb/pull/14887): Move no buckets warning in telegraf tab above the search box
 
 ### Bug Fixes
 

ui/src/buckets/components/NoBucketsWarning.scss

@@ -0,0 +1,3 @@
+.no-buckets-warning {
+  margin-bottom: $ix-marg-c;
+}

ui/src/buckets/components/NoBucketsWarning.tsx

@@ -12,12 +12,14 @@ interface Props {
 const NoBucketsWarning: SFC<Props> = ({visible, resourceName}) => {
   return (
     visible && (
-      <Alert color={ComponentColor.Primary} icon={IconFont.AlertTriangle}>
-        <p>
-          You don't currently have any buckets. Any{' '}
-          <strong>{resourceName}</strong> you have will not be able to write
-          data until a bucket is created and they are directed to that bucket.
-        </p>
+      <Alert
+        color={ComponentColor.Primary}
+        icon={IconFont.AlertTriangle}
+        className="no-buckets-warning"
+      >
+        You don't currently have any buckets. Any{' '}
+        <strong>{resourceName}</strong> you have will not be able to write data
+        until a bucket is created and they are directed to that bucket.
       </Alert>
     )
   )

ui/src/style/chronograf.scss

@@ -57,6 +57,7 @@
 @import 'src/shared/components/CodeSnippet.scss';
 @import 'src/buckets/components/Retention.scss';
 @import 'src/buckets/components/BucketAddDataButton.scss';
+@import 'src/buckets/components/NoBucketsWarning.scss';
 @import 'src/telegrafs/components/TelegrafConfigOverlay.scss';
 @import 'src/variables/components/CreateVariableOverlay.scss';
 @import 'src/authorizations/components/BucketsSelector.scss';

ui/src/telegrafs/components/Collectors.tsx

@@ -92,6 +92,11 @@ class Collectors extends PureComponent<Props, State> {
 
     return (
       <>
+        <NoBucketsWarning
+          visible={this.hasNoBuckets}
+          resourceName="Telegraf Configurations"
+        />
+
         <SettingsTabbedPageHeader>
           <SearchWidget
             placeholderText="Filter telegraf configurations..."
@@ -107,10 +112,6 @@ class Collectors extends PureComponent<Props, State> {
               widthSM={Columns.Eight}
               widthMD={Columns.Ten}
             >
-              <NoBucketsWarning
-                visible={this.hasNoBuckets}
-                resourceName="Telegraf Configurations"
-              />
               <GetResources resource={ResourceTypes.Labels}>
                 <FilterList<Telegraf>
                   searchTerm={searchTerm}