diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index f0a311e62e3..81da7aa128c 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -63,7 +63,7 @@ export class Aggregations extends React.Component<Props, State> {
     const { templateSrv, onChange, crossSeriesReducer } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
@@ -79,15 +79,15 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
               <a onClick={() => this.handleToggleDisplayAdvanced()}>
-                <React.Fragment>
+                <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
-                </React.Fragment>
+                </>
               </a>
             </label>
           </div>
         </div>
         {this.props.children(this.state.displayAdvancedOptions)}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
index 486a051fdc1..5b0ef2c7d8f 100644
--- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
@@ -39,7 +39,7 @@ export class AliasBy extends Component<Props, State> {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -54,7 +54,7 @@ export class AliasBy extends Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
index da2057bcabd..b5abb6f3cb6 100644
--- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx
@@ -12,7 +12,7 @@ export interface Props {
 
 export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
   return (
-    <React.Fragment>
+    <>
       <div className="gf-form-inline">
         <div className="gf-form">
           <label className="gf-form-label query-keyword width-9">Alignment Period</label>
@@ -35,6 +35,6 @@ export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onC
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
index b377b432e44..e72cafaf808 100644
--- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx
@@ -12,7 +12,7 @@ export interface Props {
 
 export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange, alignOptions }) => {
   return (
-    <React.Fragment>
+    <>
       <div className="gf-form-group">
         <div className="gf-form offset-width-9">
           <label className="gf-form-label query-keyword width-15">Aligner</label>
@@ -26,6 +26,6 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
index 48add7d584d..52a08abfbcd 100644
--- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
@@ -62,7 +62,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     const { datasource } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
@@ -71,7 +71,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           onChange={value => this.handleMetricTypeChange(value)}
         >
           {metric => (
-            <React.Fragment>
+            <>
               <Filter
                 filtersChanged={value => this.handleChange('filters', value)}
                 filters={filters}
@@ -81,7 +81,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
-            </React.Fragment>
+            </>
           )}
         </Metrics>
         <div className="gf-form gf-form-inline">
@@ -109,7 +109,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         </div>
 
         <AnnotationsHelp />
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index e865d1f4046..194f367d230 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -35,7 +35,7 @@ export class Help extends React.Component<Props, State> {
     const { datasource, rawQuery, lastQueryError } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
           <div className="gf-form" onClick={() => this.handleHelpClicked()}>
@@ -106,7 +106,7 @@ export class Help extends React.Component<Props, State> {
             <pre className="gf-form-pre alert alert-error">{lastQueryError}</pre>
           </div>
         )}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
index c2993e30bee..9c5dfc88739 100644
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
@@ -146,7 +146,7 @@ export class Metrics extends React.Component<Props, State> {
     const { metricType, templateSrv } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="gf-form-inline">
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Service</span>
@@ -186,7 +186,7 @@ export class Metrics extends React.Component<Props, State> {
           </div>
         </div>
         {this.props.children(this.state.metricDescriptor)}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index d639cd821f5..b7a4b98823b 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -138,7 +138,7 @@ export class QueryEditor extends React.Component<Props, State> {
     const { datasource } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
@@ -147,7 +147,7 @@ export class QueryEditor extends React.Component<Props, State> {
           onChange={value => this.handleMetricTypeChange(value)}
         >
           {metric => (
-            <React.Fragment>
+            <>
               <Filter
                 filtersChanged={value => this.handleChange('filters', value)}
                 groupBysChanged={value => this.handleChange('groupBys', value)}
@@ -184,10 +184,10 @@ export class QueryEditor extends React.Component<Props, State> {
                 onChange={value => this.handleChange('alignmentPeriod', value)}
               />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
-            </React.Fragment>
+            </>
           )}
         </Metrics>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
index 1f349ccab59..60f618c8504 100644
--- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
@@ -134,7 +134,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       case MetricFindQueryTypes.LabelValues:
       case MetricFindQueryTypes.ResourceTypes:
         return (
-          <React.Fragment>
+          <>
             <SimpleSelect
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
@@ -155,12 +155,12 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
                 label="Label Key"
               />
             )}
-          </React.Fragment>
+          </>
         );
       case MetricFindQueryTypes.Aligners:
       case MetricFindQueryTypes.Aggregations:
         return (
-          <React.Fragment>
+          <>
             <SimpleSelect
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
@@ -173,7 +173,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               onValueChange={e => this.onMetricTypeChange(e)}
               label="Metric Type"
             />
-          </React.Fragment>
+          </>
         );
       default:
         return '';
@@ -182,7 +182,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <SimpleSelect
           value={this.state.selectedQueryType}
           options={this.queryTypes}
@@ -190,7 +190,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
-      </React.Fragment>
+      </>
     );
   }
 }