Explore: Fixed query status issue (#18791)

* Explore: Fixed query status issue, fixes #18778

* Added test for QueryStatus

public/app/features/explore/QueryStatus.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { LoadingState } from '@grafana/data';
+import { PanelData } from '@grafana/ui';
+
+import QueryStatus from './QueryStatus';
+
+describe('<QueryStatus />', () => {
+  it('should render with a latency', () => {
+    const res: PanelData = { series: [], state: LoadingState.Done };
+    const wrapper = shallow(<QueryStatus latency={0} queryResponse={res} />);
+    expect(wrapper.find('div').exists()).toBeTruthy();
+  });
+  it('should not render when query has not started', () => {
+    const res: PanelData = { series: [], state: LoadingState.NotStarted };
+    const wrapper = shallow(<QueryStatus latency={0} queryResponse={res} />);
+    expect(wrapper.getElement()).toBe(null);
+  });
+});

public/app/features/explore/QueryStatus.tsx

@@ -39,9 +39,14 @@ interface QueryStatusProps {
 export default class QueryStatus extends PureComponent<QueryStatusProps> {
 export default class QueryStatus extends PureComponent<QueryStatusProps> {
   render() {
   render() {
     const { queryResponse, latency } = this.props;
     const { queryResponse, latency } = this.props;
+
+    if (queryResponse.state === LoadingState.NotStarted) {
+      return null;
+    }
+
     return (
     return (
       <div className="query-transactions">
       <div className="query-transactions">
-        {queryResponse && <QueryStatusItem queryResponse={queryResponse} latency={latency} />}
+        <QueryStatusItem queryResponse={queryResponse} latency={latency} />
       </div>
       </div>
     );
     );
   }
   }

public/sass/pages/_explore.scss

@@ -213,7 +213,7 @@
 
 
 .query-transaction {
 .query-transaction {
   display: table-row;
   display: table-row;
-  color: $text-color-faint;
+  color: $text-color-weak;
   line-height: 1.44;
   line-height: 1.44;
 }
 }