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

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Synthetics] When creating a rule the details button is disabled if
inspect es queries is disabled
(#216824)](https://github.com/elastic/kibana/pull/216824)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Francesco
Fagnani","email":"fagnani.francesco@gmail.com"},"sourceCommit":{"committedDate":"2025-04-03T14:41:18Z","message":"[Synthetics]
When creating a rule the details button is disabled if inspect es
queries is disabled (#216824)\n\nThis PR closes #212789 by disabling the
details button when the user has\nthe inspect es queries flag disabled.
When the button is disabled a\ntooltip is
shown.\n\n\n\nhttps://github.com/user-attachments/assets/d45d12ac-af03-4eda-8e3d-3dd693839520","sha":"467855caea880451f737de415ee21904e832390a","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0","v8.18.1","v9.0.1","v8.17.5"],"title":"[Synthetics]
When creating a rule the details button is disabled if inspect es
queries is
disabled","number":216824,"url":"https://github.com/elastic/kibana/pull/216824","mergeCommit":{"message":"[Synthetics]
When creating a rule the details button is disabled if inspect es
queries is disabled (#216824)\n\nThis PR closes #212789 by disabling the
details button when the user has\nthe inspect es queries flag disabled.
When the button is disabled a\ntooltip is
shown.\n\n\n\nhttps://github.com/user-attachments/assets/d45d12ac-af03-4eda-8e3d-3dd693839520","sha":"467855caea880451f737de415ee21904e832390a"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","9.0","8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216824","number":216824,"mergeCommit":{"message":"[Synthetics]
When creating a rule the details button is disabled if inspect es
queries is disabled (#216824)\n\nThis PR closes #212789 by disabling the
details button when the user has\nthe inspect es queries flag disabled.
When the button is disabled a\ntooltip is
shown.\n\n\n\nhttps://github.com/user-attachments/assets/d45d12ac-af03-4eda-8e3d-3dd693839520","sha":"467855caea880451f737de415ee21904e832390a"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/217041","number":217041,"state":"OPEN"},{"branch":"8.18","label":"v8.18.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

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

@@ -15,11 +15,13 @@ 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 { enableInspectEsQueries } from '@kbn/observability-plugin/common';
 import { RuleMonitorsTable } from './rule_monitors_table';
 import { apiService } from '../../../../utils/api_service';
 import { inspectStatusRuleAction } from '../../state/alert_rules';
@@ -35,13 +37,15 @@ export const StatusRuleViz = ({
   const { data, loading } = useSelector(selectInspectStatusRule);
   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);
   };
@@ -56,6 +60,19 @@ export const StatusRuleViz = ({
     dispatch(inspectStatusRuleAction.get(ruleParams));
   }, [ruleParams, dispatch, inspectorAdapters?.requests]);
 
+  const detailsButton = (
+    <EuiButtonEmpty
+      data-test-subj="syntheticsStatusRuleVizInspectButton"
+      onClick={inspect}
+      iconType="inspect"
+      size="xs"
+    >
+      {i18n.translate('xpack.synthetics.rules.details', {
+        defaultMessage: 'Details',
+      })}
+    </EuiButtonEmpty>
+  );
+
   return (
     <EuiCallOut iconType="search" size="s">
       <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -104,18 +121,17 @@ export const StatusRuleViz = ({
         {/* to push detail button to end*/}
         <EuiFlexItem />
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            data-test-subj="syntheticsStatusRuleVizInspectButton"
-            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',
+});