disabling create/edit button when user does not have write permission

Author: cauemarcondes

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx

@@ -41,6 +41,7 @@ interface Props {
 
 export function AgentConfigurationList({ status, data, refetch }: Props) {
   const { core } = useApmPluginContext();
+  const canSave = core.application.capabilities.apm.save;
   const { basePath } = core.http;
   const { search } = useLocation();
   const theme = useTheme();
@@ -180,28 +181,36 @@ export function AgentConfigurationList({ status, data, refetch }: Props) {
         <TimestampTooltip time={value} timeUnit="minutes" />
       ),
     },
-    {
-      width: px(units.double),
-      name: '',
-      render: (config: Config) => (
-        <EuiButtonIcon
-          aria-label="Edit"
-          iconType="pencil"
-          href={editAgentConfigurationHref(config.service, search, basePath)}
-        />
-      ),
-    },
-    {
-      width: px(units.double),
-      name: '',
-      render: (config: Config) => (
-        <EuiButtonIcon
-          aria-label="Delete"
-          iconType="trash"
-          onClick={() => setConfigToBeDeleted(config)}
-        />
-      ),
-    },
+    ...(canSave
+      ? [
+          {
+            width: px(units.double),
+            name: '',
+            render: (config: Config) => (
+              <EuiButtonIcon
+                aria-label="Edit"
+                iconType="pencil"
+                href={editAgentConfigurationHref(
+                  config.service,
+                  search,
+                  basePath
+                )}
+              />
+            ),
+          },
+          {
+            width: px(units.double),
+            name: '',
+            render: (config: Config) => (
+              <EuiButtonIcon
+                aria-label="Delete"
+                iconType="trash"
+                onClick={() => setConfigToBeDeleted(config)}
+              />
+            ),
+          },
+        ]
+      : []),
   ];
 
   return (

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx

@@ -73,11 +73,18 @@ function CreateConfigurationButton() {
   const { basePath } = core.http;
   const { search } = useLocation();
   const href = createAgentConfigurationHref(search, basePath);
+  const canSave = core.application.capabilities.apm.save;
   return (
     <EuiFlexItem>
       <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
-          <EuiButton color="primary" fill iconType="plusInCircle" href={href}>
+          <EuiButton
+            color="primary"
+            fill
+            iconType="plusInCircle"
+            href={href}
+            isDisabled={!canSave}
+          >
             {i18n.translate('xpack.apm.agentConfig.createConfigButtonLabel', {
               defaultMessage: 'Create configuration',
             })}