From c2395d2b611590b1964f72462acbff35b5eef72f Mon Sep 17 00:00:00 2001
From: Sergi Romeu <sergi.romeu@elastic.co>
Date: Tue, 22 Oct 2024 16:43:52 +0200
Subject: [PATCH] [APM] Use subfeature permissions for Labs settings (#197092)

## Summary

Closes https://github.com/elastic/kibana/issues/197091

This PR uses the previously created
(https://github.com/elastic/kibana/pull/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 68b328d36ba6a178c27744c249b0cea7f4eaa00b)
---
 .../labs/labs_flyout.tsx                      | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
index 7eea2faf9f62c..bda1c7e4ee022 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
+++ b/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>