[Synthetics] When creating a rule the details button is disabled if inspect es queries is disabled (#216824)

This PR closes #212789 by disabling the details button when the user has
the inspect es queries flag disabled. When the button is disabled a
tooltip is shown.



https://github.com/user-attachments/assets/d45d12ac-af03-4eda-8e3d-3dd693839520

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/alerts/rule_viz.tsx

@@ -15,12 +15,14 @@ import {
   EuiPopover,
   EuiPopoverTitle,
   EuiSpacer,
+  EuiToolTip,
 } from '@elastic/eui';
 import { useSelector, useDispatch } from 'react-redux';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { useInspectorContext } from '@kbn/observability-shared-plugin/public';
 import { PayloadAction } from '@reduxjs/toolkit';
+import { enableInspectEsQueries } from '@kbn/observability-plugin/common';
 import { RuleMonitorsTable } from './rule_monitors_table';
 import { apiService } from '../../../../utils/api_service';
 import { selectInspectRule } from '../../state/alert_rules/selectors';
@@ -30,13 +32,15 @@ export const RuleViz = ({ dispatchedAction }: { dispatchedAction: PayloadAction<
   const { data, loading } = useSelector(selectInspectRule);
   const dispatch = useDispatch();
   const {
-    services: { inspector },
+    services: { inspector, uiSettings },
   } = useKibana<ClientPluginsStart>();
 
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
 
   const { inspectorAdapters, addInspectorRequest } = useInspectorContext();
 
+  const isInspectorEnabled = uiSettings.get<boolean>(enableInspectEsQueries);
+
   const inspect = () => {
     inspector.open(inspectorAdapters);
   };
@@ -51,6 +55,20 @@ export const RuleViz = ({ dispatchedAction }: { dispatchedAction: PayloadAction<
     dispatch(dispatchedAction);
   }, [dispatchedAction, dispatch, inspectorAdapters?.requests]);
 
+  const detailsButton = (
+    <EuiButtonEmpty
+      data-test-subj="syntheticsRuleVizInspectButton"
+      onClick={inspect}
+      iconType="inspect"
+      size="xs"
+      disabled={!isInspectorEnabled}
+    >
+      {i18n.translate('xpack.synthetics.rules.details', {
+        defaultMessage: 'Details',
+      })}
+    </EuiButtonEmpty>
+  );
+
   return (
     <EuiCallOut iconType="search" size="s">
       <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -99,18 +117,17 @@ export const RuleViz = ({ dispatchedAction }: { dispatchedAction: PayloadAction<
         {/* to push detail button to end*/}
         <EuiFlexItem />
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            data-test-subj="syntheticsRuleVizInspectButton"
-            onClick={inspect}
-            iconType="inspect"
-            size="xs"
-          >
-            {i18n.translate('xpack.synthetics.rules.details', {
-              defaultMessage: 'Details',
-            })}
-          </EuiButtonEmpty>
+          {isInspectorEnabled ? (
+            detailsButton
+          ) : (
+            <EuiToolTip content={inspectorDisabledTooltip}>{detailsButton}</EuiToolTip>
+          )}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiCallOut>
   );
 };
+
+const inspectorDisabledTooltip = i18n.translate('xpack.synthetics.rules.inspectorDisabled', {
+  defaultMessage: 'Enable "Inspect ES queries" in Advanced Settings to see Details',
+});