Explore: No longer changes run button red with "cancel" text when live tailing (#24106)

Closes #24079

public/app/features/explore/ExploreToolbar.tsx

@@ -324,6 +324,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
                 refreshInterval={refreshInterval}
                 refreshInterval={refreshInterval}
                 onChangeRefreshInterval={this.onChangeRefreshInterval}
                 onChangeRefreshInterval={this.onChangeRefreshInterval}
                 splitted={splitted}
                 splitted={splitted}
+                isLive={isLive}
                 loading={loading || (isLive && !isPaused)}
                 loading={loading || (isLive && !isPaused)}
                 onRun={this.onRunQuery}
                 onRun={this.onRunQuery}
                 showDropdown={!isLive}
                 showDropdown={!isLive}

public/app/features/explore/RunButton.tsx

@@ -21,6 +21,7 @@ const getStyles = memoizeOne(() => {
 type Props = {
 type Props = {
   splitted: boolean;
   splitted: boolean;
   loading: boolean;
   loading: boolean;
+  isLive: boolean;
   onRun: (loading: boolean) => void;
   onRun: (loading: boolean) => void;
   refreshInterval?: string;
   refreshInterval?: string;
   onChangeRefreshInterval: (interval: string) => void;
   onChangeRefreshInterval: (interval: string) => void;
@@ -28,17 +29,17 @@ type Props = {
 };
 };
 
 
 export function RunButton(props: Props) {
 export function RunButton(props: Props) {
-  const { splitted, loading, onRun, onChangeRefreshInterval, refreshInterval, showDropdown } = props;
+  const { splitted, loading, onRun, onChangeRefreshInterval, refreshInterval, showDropdown, isLive } = props;
   const styles = getStyles();
   const styles = getStyles();
 
 
   const runButton = (
   const runButton = (
     <ResponsiveButton
     <ResponsiveButton
       splitted={splitted}
       splitted={splitted}
-      title={loading ? 'Cancel' : 'Run Query'}
+      title={loading && !isLive ? 'Cancel' : 'Run Query'}
       onClick={() => onRun(loading)}
       onClick={() => onRun(loading)}
       buttonClassName={classNames({
       buttonClassName={classNames({
-        'navbar-button--primary': !loading,
-        'navbar-button--danger': loading,
+        'navbar-button--primary': isLive || !loading,
+        'navbar-button--danger': loading && !isLive,
         'btn--radius-right-0': showDropdown,
         'btn--radius-right-0': showDropdown,
       })}
       })}
       icon={loading ? 'fa fa-spinner' : 'sync'}
       icon={loading ? 'fa fa-spinner' : 'sync'}