From f1bd3cac13767c7f1b1da62627d005c9bcfd94b6 Mon Sep 17 00:00:00 2001
From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
Date: Thu, 1 Feb 2024 16:33:07 +0000
Subject: [PATCH] [Profiling] Add validations to settings (#175972)

## Summary

In https://github.com/elastic/kibana/pull/174712, we integrated the new
settings field component into the Universal profiling settings. The new
setting field supports validation on the user input, based on the schema
of the given setting.

Since some of the Universal profiling settings have schema with
specified restrictions, which were not enforced in the UI before, this
PR adds schema validation so that they are enforced.

**Settings with `schema` restrictions:**

[observability:profilingCo2PerKWH](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L492):
>= 0

[observability:profilingDatacenterPUE](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L469):
>=0

[observability:profilingPerVCPUWattX86](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L425):
>=0

[observability:profilingPervCPUWattArm64](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L440):
>=0

[observability:profilingAWSCostDiscountRate](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L501):
>=0 and <=100

[observability:profilingCostPervCPUPerHour](https://github.com/elastic/kibana/blob/9ee7b79d20e982eaae96c0b803ff2d17f98bbfcc/x-pack/plugins/observability/server/ui_settings.ts#L523):
>=0 and <=100

<img width="1147" alt="Screenshot 2024-01-31 at 14 08 10"
src="https://github.com/elastic/kibana/assets/59341489/ace8da2e-ae0b-4d94-997b-bec3534a4bfe">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../views/settings/bottom_bar_actions.tsx     | 34 ++++++++++++++-----
 .../profiling/public/views/settings/index.tsx | 13 +++----
 x-pack/plugins/profiling/tsconfig.json        |  1 -
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/profiling/public/views/settings/bottom_bar_actions.tsx b/x-pack/plugins/profiling/public/views/settings/bottom_bar_actions.tsx
index c55ed07b590e0..6aa8ac17d115c 100644
--- a/x-pack/plugins/profiling/public/views/settings/bottom_bar_actions.tsx
+++ b/x-pack/plugins/profiling/public/views/settings/bottom_bar_actions.tsx
@@ -12,6 +12,7 @@ import {
   EuiFlexItem,
   EuiHealth,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
@@ -22,6 +23,7 @@ interface Props {
   onDiscardChanges: () => void;
   onSave: () => void;
   saveLabel: string;
+  areChangesInvalid?: boolean;
 }
 
 export function BottomBarActions({
@@ -30,6 +32,7 @@ export function BottomBarActions({
   onSave,
   unsavedChangesCount,
   saveLabel,
+  areChangesInvalid = false,
 }: Props) {
   return (
     <EuiBottomBar paddingSize="s" data-test-subj="profilingBottomBarActions">
@@ -64,16 +67,29 @@ export function BottomBarActions({
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
-                data-test-subj="profilingBottomBarActionsButton"
-                onClick={onSave}
-                fill
-                isLoading={isLoading}
-                color="success"
-                iconType="check"
+              <EuiToolTip
+                content={
+                  areChangesInvalid &&
+                  i18n.translate(
+                    'xpack.profiling.bottomBarActions.saveButtonTooltipWithInvalidChanges',
+                    {
+                      defaultMessage: 'Fix invalid settings before saving.',
+                    }
+                  )
+                }
               >
-                {saveLabel}
-              </EuiButton>
+                <EuiButton
+                  disabled={areChangesInvalid}
+                  data-test-subj="profilingBottomBarActionsButton"
+                  onClick={onSave}
+                  fill
+                  isLoading={isLoading}
+                  color="success"
+                  iconType="check"
+                >
+                  {saveLabel}
+                </EuiButton>
+              </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/x-pack/plugins/profiling/public/views/settings/index.tsx b/x-pack/plugins/profiling/public/views/settings/index.tsx
index 1d00e9f2410e2..400a312e6f6be 100644
--- a/x-pack/plugins/profiling/public/views/settings/index.tsx
+++ b/x-pack/plugins/profiling/public/views/settings/index.tsx
@@ -29,7 +29,6 @@ import {
 import { useEditableSettings, useUiTracker } from '@kbn/observability-shared-plugin/public';
 import { isEmpty } from 'lodash';
 import React from 'react';
-import { ValueValidation } from '@kbn/core-ui-settings-browser/src/types';
 import { FieldRowProvider } from '@kbn/management-settings-components-field-row';
 import { useProfilingDependencies } from '../../components/contexts/profiling_dependencies/use_profiling_dependencies';
 import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_template';
@@ -53,7 +52,7 @@ export function Settings() {
   const trackProfilingEvent = useUiTracker({ app: 'profiling' });
   const {
     start: {
-      core: { docLinks, notifications },
+      core: { docLinks, notifications, settings },
     },
   } = useProfilingDependencies();
 
@@ -81,11 +80,7 @@ export function Settings() {
     }
   }
 
-  // We don't validate the user input on these settings
-  const settingsValidationResponse: ValueValidation = {
-    successfulValidation: true,
-    valid: true,
-  };
+  const hasInvalidChanges = Object.values(unsavedChanges).some(({ isInvalid }) => isInvalid);
 
   return (
     <ProfilingAppPageTemplate hideSearchBar>
@@ -215,7 +210,8 @@ export function Settings() {
                       {...{
                         links: docLinks.links.management,
                         showDanger: (message: string) => notifications.toasts.addDanger(message),
-                        validateChange: async () => settingsValidationResponse,
+                        validateChange: (key: string, value: any) =>
+                          settings.client.validateValue(key, value),
                       }}
                     >
                       <FieldRow
@@ -242,6 +238,7 @@ export function Settings() {
               defaultMessage: 'Save changes',
             })}
             unsavedChangesCount={Object.keys(unsavedChanges).length}
+            areChangesInvalid={hasInvalidChanges}
           />
         )}
       </>
diff --git a/x-pack/plugins/profiling/tsconfig.json b/x-pack/plugins/profiling/tsconfig.json
index 78749609e199d..2bd2219af39d6 100644
--- a/x-pack/plugins/profiling/tsconfig.json
+++ b/x-pack/plugins/profiling/tsconfig.json
@@ -52,7 +52,6 @@
     "@kbn/profiling-utils",
     "@kbn/security-plugin",
     "@kbn/shared-ux-utility",
-    "@kbn/core-ui-settings-browser",
     "@kbn/management-settings-components-field-row"
     // add references to other TypeScript projects the plugin depends on