replace fragment with empty jsx tags

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 };

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>
+    </>
   );
 };

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }