Change color of Run button for native queries (apache#10170) (#149)

* Change color of Run button for native queries

When a user tries to run a native query, change the color of the button to
Druid's secondary color to indicate that the user is not running a SQL query.

Before this change, the web-console would indicate this by changing the text
of the button from Run (SQL queries) to Rune (native queries). Rune could be
confusing to users as this appears to be a typo.

* Update web-console/src/views/query-view/run-button/run-button.scss

* Update web-console/src/views/query-view/run-button/run-button.scss

* Update web-console/src/views/query-view/run-button/run-button.scss

* code review

web-console/src/views/query-view/run-button/run-button.scss

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.run-button {
+  .rune-button {
+    background-color: #2ca89e !important;
+  }
+}

web-console/src/views/query-view/run-button/run-button.tsx

@@ -45,6 +45,8 @@ import {
   setUseCache,
 } from '../../../utils/query-context';
 
+import './run-button.scss';
+
 export interface RunButtonProps {
   runeMode: boolean;
   queryContext: QueryContext;
@@ -151,25 +153,34 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
 
   render(): JSX.Element {
     const { runeMode, onRun, loading } = this.props;
-    const runButtonText = 'Run' + (runeMode ? 'e' : '');
 
     return (
       <ButtonGroup className="run-button">
         {onRun ? (
           <Tooltip content="Control + Enter" hoverOpenDelay={900}>
             <Button
+              className={runeMode ? 'rune-button' : undefined}
               disabled={loading}
               icon={IconNames.CARET_RIGHT}
               onClick={this.handleRun}
-              text={runButtonText}
+              text="Run"
               intent={Intent.PRIMARY}
             />
           </Tooltip>
         ) : (
-          <Button icon={IconNames.CARET_RIGHT} text={runButtonText} disabled />
+          <Button
+            className={runeMode ? 'rune-button' : undefined}
+            icon={IconNames.CARET_RIGHT}
+            text="Run"
+            disabled
+          />
         )}
         <Popover position={Position.BOTTOM_LEFT} content={this.renderExtraMenu()}>
-          <Button icon={IconNames.MORE} intent={onRun ? Intent.PRIMARY : undefined} />
+          <Button
+            className={runeMode ? 'rune-button' : undefined}
+            icon={IconNames.MORE}
+            intent={onRun ? Intent.PRIMARY : undefined}
+          />
         </Popover>
       </ButtonGroup>
     );