[APM] Use subfeature permissions for Labs settings (elastic#197092)

## Summary

Closes elastic#197091

This PR uses the previously created
(elastic#194419) subfeature permissions
for APM to be able to modify settings inside Labs flyout.

## Screenshots for unauthorized user
| Before | After |

|-------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|

|![image](https://github.com/user-attachments/assets/a405c0c5-765d-4a18-a26a-55ba0df1d343)|![image](https://github.com/user-attachments/assets/a57e68c2-10c8-428b-9fce-31309b7a9d6e)|

## How to test
1. Go under Stack Management -> Roles and create a new custom role.
2. For Kibana, select All spaces for the space selector, and Customize,
you can get all the permissions you need.
3. Go into Observability and APM and User Experience.
4. Select Read and save the role.
5. Create a new user and assign that role and also the viewer role.
6. Login with an incognito / different browser into the new user.
7. Go into APM -> Settings, WARNING: if you are not able to see settings
is because you don't have data, run node scripts/synthtrace
many_services.ts --live --clean.
8. You should not be able to change the configuration on each tab.
9. Change the role privileges to have Read but with write access.
10. Test it, you should be able to modify the settings.
11. Do the same with All with and without the write permissions.

(cherry picked from commit 68b328d)

x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx

@@ -20,6 +20,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import { withSuspense } from '@kbn/shared-ux-utility';
 import { i18n } from '@kbn/i18n';
@@ -42,7 +43,11 @@ interface Props {
 
 export function LabsFlyout({ onClose }: Props) {
   const trackApmEvent = useUiTracker({ app: 'apm' });
-  const { docLinks, notifications } = useApmPluginContext().core;
+  const { docLinks, notifications, application } = useApmPluginContext().core;
+
+  const canSave =
+    application.capabilities.advancedSettings.save &&
+    (application.capabilities.apm['settings:save'] as boolean);
 
   const { data, status } = useFetcher(
     (callApmApi) => callApmApi('GET /internal/apm/settings/labs'),
@@ -152,7 +157,7 @@ export function LabsFlyout({ onClose }: Props) {
                   >
                     <FieldRow
                       field={field}
-                      isSavingEnabled={true}
+                      isSavingEnabled={canSave}
                       onFieldChange={handleFieldChange}
                       unsavedChange={unsavedChanges[settingKey]}
                     />
@@ -172,16 +177,27 @@ export function LabsFlyout({ onClose }: Props) {
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="apmLabsFlyoutReloadToApplyChangesButton"
-                  fill
-                  isLoading={isSaving}
-                  onClick={handleSave}
+                <EuiToolTip
+                  content={
+                    !canSave &&
+                    i18n.translate('xpack.apm.labs.noPermissionTooltipLabel', {
+                      defaultMessage:
+                        "Your user role doesn't have permissions to modify these settings",
+                    })
+                  }
                 >
-                  {i18n.translate('xpack.apm.labs.reload', {
-                    defaultMessage: 'Reload to apply changes',
-                  })}
-                </EuiButton>
+                  <EuiButton
+                    data-test-subj="apmLabsFlyoutReloadToApplyChangesButton"
+                    fill
+                    isLoading={isSaving}
+                    onClick={handleSave}
+                    isDisabled={!canSave}
+                  >
+                    {i18n.translate('xpack.apm.labs.reload', {
+                      defaultMessage: 'Reload to apply changes',
+                    })}
+                  </EuiButton>
+                </EuiToolTip>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlyoutFooter>