feat: add disabled and hover tooltip to "Run" button when user has not selected a measurement (#5496)

Author: appletreeisyellow

src/dataExplorer/components/ResultsPane.tsx

@@ -88,8 +88,15 @@ const ResultsPane: FC = () => {
     setQuery,
     range,
     setRange,
+    selection,
   } = useContext(PersistanceContext)
 
+  const submitButtonDisabled = !text || !selection.measurement
+
+  const disabledTitleText = submitButtonDisabled
+    ? 'Select measurement before running script'
+    : ''
+
   const download = () => {
     event('CSV Download Initiated')
     basic(text, {
@@ -197,7 +204,8 @@ const ResultsPane: FC = () => {
                 className="submit-btn"
                 text="Run"
                 icon={IconFont.Play}
-                submitButtonDisabled={!text}
+                submitButtonDisabled={submitButtonDisabled}
+                disabledTitleText={disabledTitleText}
                 queryStatus={status}
                 onSubmit={submit}
                 onNotify={fakeNotify}

src/timeMachine/components/SubmitQueryButton.tsx

@@ -35,6 +35,7 @@ interface OwnProps {
   icon?: IconFont
   testID?: string
   className?: string
+  disabledTitleText?: string // Text to be displayed on hover tooltip when the button is disabled
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
@@ -86,7 +87,15 @@ class SubmitQueryButton extends PureComponent<Props> {
   }
 
   public render() {
-    const {color, text, queryStatus, icon, testID, className} = this.props
+    const {
+      color,
+      text,
+      queryStatus,
+      icon,
+      testID,
+      className,
+      disabledTitleText,
+    } = this.props
     if (queryStatus === RemoteDataState.Loading && this.state.timer) {
       return (
         <Button
@@ -112,6 +121,7 @@ class SubmitQueryButton extends PureComponent<Props> {
         color={color ?? ComponentColor.Primary}
         testID={testID}
         style={{minWidth: '100px'}}
+        disabledTitleText={disabledTitleText}
       />
     )
   }