[8.x] [Synthetics] Fixes partial updates for params and params viewing (

#195866) (#197850) # Backport This will backport the following commits from `main` to `8.x`: - [[Synthetics] Fixes partial updates for params and params viewing (#195866)](#195866)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Shahzad <[email protected]>
elastic · Oct 25, 2024 · 4c22558 · 4c22558
1 parent 9f5ff83
commit 4c22558
Show file tree

Hide file tree

Showing 12 changed files with 355 additions and 110 deletions.
diff --git a/docs/api/synthetics/params/edit-param.asciidoc b/docs/api/synthetics/params/edit-param.asciidoc
@@ -26,13 +26,13 @@ You must have `all` privileges for the *Synthetics* feature in the *{observabili
 [[parameter-edit-request-body]]
 ==== Request body
 
-The request body should contain the following attributes:
+The request body can contain the following attributes, it can't be empty at least one attribute is required.:
 
 `key`::
-(Required, string) The key of the parameter.
+(Optional, string) The key of the parameter.
 
 `value`::
-(Required, string) The updated value associated with the parameter.
+(Optional, string) The updated value associated with the parameter.
 
 `description`::
 (Optional, string) The updated description of the parameter.

diff --git a/...ns/observability_solution/synthetics/e2e/synthetics/journeys/global_parameters.journey.ts b/...ns/observability_solution/synthetics/e2e/synthetics/journeys/global_parameters.journey.ts
@@ -76,8 +76,8 @@ journey(`GlobalParameters`, async ({ page, params }) => {
     await page.click('text=Delete ParameterEdit Parameter >> :nth-match(button, 2)');
     await page.click('[aria-label="Key"]');
     await page.fill('[aria-label="Key"]', 'username2');
-    await page.click('[aria-label="Value"]');
-    await page.fill('[aria-label="Value"]', 'elastic2');
+    await page.click('[aria-label="New value"]');
+    await page.fill('[aria-label="New value"]', 'elastic2');
     await page.click('.euiComboBox__inputWrap');
     await page.fill('[aria-label="Tags"]', 'staging');
     await page.press('[aria-label="Tags"]', 'Enter');

diff --git a/...lution/synthetics/public/apps/synthetics/components/settings/components/optional_text.tsx b/...lution/synthetics/public/apps/synthetics/components/settings/components/optional_text.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export function OptionalText() {
+  return (
+    <EuiText size="xs" color="subdued">
+      {i18n.translate('xpack.synthetics.sloEdit.optionalLabel', {
+        defaultMessage: 'Optional',
+      })}
+    </EuiText>
+  );
+}
diff --git a/.../synthetics/public/apps/synthetics/components/settings/global_params/add_param_flyout.tsx b/.../synthetics/public/apps/synthetics/components/settings/global_params/add_param_flyout.tsx
@@ -22,6 +22,7 @@ import { FormProvider } from 'react-hook-form';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
 import { NoPermissionsTooltip } from '../../common/components/permissions';
 import {
   addNewGlobalParamAction,
@@ -80,18 +81,29 @@ export const AddParamFlyout = ({
   const onSubmit = (formData: SyntheticsParams) => {
     const { namespaces, ...paramRequest } = formData;
     const shareAcrossSpaces = namespaces?.includes(ALL_SPACES_ID);
+    const newParamData = {
+      ...paramRequest,
+    };
+
+    if (isEditingItem && id) {
+      // omit value if it's empty
+      if (isEmpty(newParamData.value)) {
+        // @ts-ignore this is a valid check
+        delete newParamData.value;
+      }
+    }
 
     if (isEditingItem && id) {
       dispatch(
         editGlobalParamAction.get({
           id,
-          paramRequest: { ...paramRequest, share_across_spaces: shareAcrossSpaces },
+          paramRequest,
         })
       );
     } else {
       dispatch(
         addNewGlobalParamAction.get({
-          ...paramRequest,
+          ...newParamData,
           share_across_spaces: shareAcrossSpaces,
         })
       );

diff --git a/...on/synthetics/public/apps/synthetics/components/settings/global_params/add_param_form.tsx b/...on/synthetics/public/apps/synthetics/components/settings/global_params/add_param_form.tsx
@@ -6,16 +6,11 @@
  */
 import React from 'react';
 import { ALL_SPACES_ID } from '@kbn/security-plugin/public';
-import {
-  EuiCheckbox,
-  EuiComboBox,
-  EuiFieldText,
-  EuiForm,
-  EuiFormRow,
-  EuiTextArea,
-} from '@elastic/eui';
+import { EuiCheckbox, EuiComboBox, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Controller, useFormContext, useFormState } from 'react-hook-form';
+import { OptionalText } from '../components/optional_text';
+import { ParamValueField } from './param_value_field';
 import { SyntheticsParams } from '../../../../../../common/runtime_types';
 import { ListParamItem } from './params_list';
 
@@ -61,25 +56,8 @@ export const AddParamForm = ({
           })}
         />
       </EuiFormRow>
-      <EuiFormRow
-        fullWidth
-        label={VALUE_LABEL}
-        isInvalid={Boolean(errors?.value)}
-        error={errors?.value?.message}
-      >
-        <EuiTextArea
-          data-test-subj="syntheticsAddParamFormTextArea"
-          fullWidth
-          aria-label={VALUE_LABEL}
-          {...register('value', {
-            required: {
-              value: true,
-              message: VALUE_REQUIRED,
-            },
-          })}
-        />
-      </EuiFormRow>
-      <EuiFormRow fullWidth label={TAGS_LABEL}>
+      <ParamValueField isEditingItem={isEditingItem} />
+      <EuiFormRow fullWidth label={TAGS_LABEL} labelAppend={<OptionalText />}>
         <Controller
           control={control}
           name="tags"
@@ -102,7 +80,7 @@ export const AddParamForm = ({
           )}
         />
       </EuiFormRow>
-      <EuiFormRow fullWidth label={DESCRIPTION_LABEL}>
+      <EuiFormRow fullWidth label={DESCRIPTION_LABEL} labelAppend={<OptionalText />}>
         <EuiFieldText
           data-test-subj="syntheticsAddParamFormFieldText"
           fullWidth
@@ -173,6 +151,6 @@ const KEY_EXISTS = i18n.translate('xpack.synthetics.monitorManagement.param.keyE
   defaultMessage: 'Key already exists',
 });
 
-const VALUE_REQUIRED = i18n.translate('xpack.synthetics.monitorManagement.value.required', {
+export const VALUE_REQUIRED = i18n.translate('xpack.synthetics.monitorManagement.value.required', {
   defaultMessage: 'Value is required',
 });
diff --git a/...synthetics/public/apps/synthetics/components/settings/global_params/param_value_field.tsx b/...synthetics/public/apps/synthetics/components/settings/global_params/param_value_field.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiCallOut, EuiFormRow, EuiSpacer, EuiTextArea } from '@elastic/eui';
+import React from 'react';
+import { useFormContext, useFormState } from 'react-hook-form';
+import { i18n } from '@kbn/i18n';
+import { OptionalText } from '../components/optional_text';
+import { ListParamItem } from './params_list';
+import { SyntheticsParams } from '../../../../../../common/runtime_types';
+import { VALUE_LABEL, VALUE_REQUIRED } from './add_param_form';
+
+export const ParamValueField = ({ isEditingItem }: { isEditingItem: ListParamItem | null }) => {
+  const { register } = useFormContext<SyntheticsParams>();
+  const { errors } = useFormState<SyntheticsParams>();
+
+  if (isEditingItem) {
+    return (
+      <>
+        <EuiFormRow
+          fullWidth
+          label={NEW_VALUE_LABEL}
+          isInvalid={Boolean(errors?.value)}
+          error={errors?.value?.message}
+          labelAppend={<OptionalText />}
+        >
+          <EuiTextArea
+            data-test-subj="syntheticsAddParamFormTextArea"
+            fullWidth
+            aria-label={NEW_VALUE_LABEL}
+            {...register('value')}
+          />
+        </EuiFormRow>
+        <EuiSpacer size="xs" />
+        <EuiCallOut
+          size="s"
+          title={i18n.translate('xpack.synthetics.paramValueField.euiCallOut.newValue', {
+            defaultMessage:
+              'Assign a new value to update this parameter, or leave blank to keep the current value.',
+          })}
+          iconType="iInCircle"
+        />
+      </>
+    );
+  }
+
+  return (
+    <EuiFormRow
+      fullWidth
+      label={VALUE_LABEL}
+      isInvalid={Boolean(errors?.value)}
+      error={errors?.value?.message}
+    >
+      <EuiTextArea
+        data-test-subj="syntheticsAddParamFormTextArea"
+        fullWidth
+        aria-label={VALUE_LABEL}
+        {...register('value', {
+          required: {
+            value: true,
+            message: VALUE_REQUIRED,
+          },
+        })}
+      />
+    </EuiFormRow>
+  );
+};
+
+export const NEW_VALUE_LABEL = i18n.translate(
+  'xpack.synthetics.monitorManagement.paramForm.newValue',
+  {
+    defaultMessage: 'New value',
+  }
+);
diff --git a/...ugins/observability_solution/synthetics/public/apps/synthetics/state/global_params/api.ts b/...ugins/observability_solution/synthetics/public/apps/synthetics/state/global_params/api.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { isEmpty } from 'lodash';
 import { INITIAL_REST_VERSION, SYNTHETICS_API_URLS } from '../../../../../common/constants';
 import {
   DeleteParamsResponse,
@@ -35,16 +36,22 @@ export const editGlobalParam = async ({
   id,
 }: {
   id: string;
-  paramRequest: SyntheticsParamRequest;
-}): Promise<SyntheticsParams> =>
-  apiService.put<SyntheticsParams>(
+  paramRequest: Partial<SyntheticsParamRequest>;
+}): Promise<SyntheticsParams> => {
+  const data = paramRequest;
+  if (isEmpty(paramRequest.value)) {
+    // omit empty value
+    delete data.value;
+  }
+  return await apiService.put<SyntheticsParams>(
     SYNTHETICS_API_URLS.PARAMS + `/${id}`,
-    paramRequest,
+    data,
     SyntheticsParamsCodec,
     {
       version: INITIAL_REST_VERSION,
     }
   );
+};
 
 export const deleteGlobalParams = async (ids: string[]): Promise<DeleteParamsResponse[]> =>
   apiService.delete(

diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts
@@ -9,6 +9,7 @@ import { schema, TypeOf } from '@kbn/config-schema';
 import { SavedObjectsFindResponse } from '@kbn/core/server';
 import { isEmpty } from 'lodash';
 import { escapeQuotes } from '@kbn/es-query';
+import { DEFAULT_SPACE_ID } from '@kbn/spaces-plugin/common';
 import { RouteContext } from './types';
 import { MonitorSortFieldSchema } from '../../common/runtime_types/monitor_management/sort_field';
 import { getAllLocations } from '../synthetics_service/get_all_locations';
@@ -269,3 +270,26 @@ function parseMappingKey(key: string | undefined) {
       return key;
   }
 }
+
+export const validateRouteSpaceName = async (routeContext: RouteContext) => {
+  const { spaceId, server, request, response } = routeContext;
+  if (spaceId === DEFAULT_SPACE_ID) {
+    // default space is always valid
+    return { spaceId: DEFAULT_SPACE_ID };
+  }
+
+  try {
+    await server.spaces?.spacesService.getActiveSpace(request);
+  } catch (error) {
+    if (error.output?.statusCode === 404) {
+      return {
+        spaceId,
+        invalidResponse: response.notFound({
+          body: { message: `Kibana space '${spaceId}' does not exist` },
+        }),
+      };
+    }
+  }
+
+  return { invalidResponse: undefined };
+};
diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/settings/params/add_param.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/settings/params/add_param.ts
@@ -19,8 +19,12 @@ import { syntheticsParamType } from '../../../../common/types/saved_objects';
 import { SYNTHETICS_API_URLS } from '../../../../common/constants';
 
 const ParamsObjectSchema = schema.object({
-  key: schema.string(),
-  value: schema.string(),
+  key: schema.string({
+    minLength: 1,
+  }),
+  value: schema.string({
+    minLength: 1,
+  }),
   description: schema.maybe(schema.string()),
   tags: schema.maybe(schema.arrayOf(schema.string())),
   share_across_spaces: schema.maybe(schema.boolean()),