[Synthetics] introduce new spaces field for synthetics api keys

x-pack/solutions/observability/plugins/synthetics/common/runtime_types/settings/api_key.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 * as t from 'io-ts';
+
+export const APIKeyCodec = t.type({
+  spaces: t.array(t.string),
+});
+
+export type SyntheticsProjectAPIKey = t.TypeOf<typeof APIKeyCodec>;

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/settings/components/spaces_select.tsx

@@ -9,24 +9,28 @@ import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { EuiComboBox, EuiFormRow } from '@elastic/eui';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, FieldValues, Path, useFormContext } from 'react-hook-form';
 import { ALL_SPACES_ID } from '@kbn/security-plugin/public';
 
 import { ClientPluginsStart } from '../../../../../plugin';
-import { PrivateLocation } from '../../../../../../common/runtime_types';
 
-export const NAMESPACES_NAME = 'spaces';
+interface SpaceSelectorProps {
+  module: 'location' | 'apiKey';
+}
 
-export const SpaceSelector: React.FC = () => {
+export const SpaceSelector = <T extends FieldValues>({ module }: SpaceSelectorProps) => {
+  const NAMESPACES_NAME = 'spaces' as Path<T>;
   const { services } = useKibana<ClientPluginsStart>();
   const [spacesList, setSpacesList] = React.useState<Array<{ id: string; label: string }>>([]);
   const data = services.spaces?.ui.useSpaces();
 
+  const HELP_TEXT = module === 'location' ? LOCATION_HELP_TEXT : API_KEY_HELP_TEXT;
+
   const {
     control,
     formState: { isSubmitted },
     trigger,
-  } = useFormContext<PrivateLocation>();
+  } = useFormContext<T>();
   const { isTouched, error } = control.getFieldState(NAMESPACES_NAME);
 
   const showFieldInvalid = (isSubmitted || isTouched) && !!error;
@@ -122,6 +126,13 @@ const SPACES_LABEL = i18n.translate('xpack.synthetics.privateLocation.spacesLabe
   defaultMessage: 'Spaces ',
 });
 
-const HELP_TEXT = i18n.translate('xpack.synthetics.privateLocation.spacesHelpText', {
-  defaultMessage: 'Select the spaces where this location will be available.',
+const LOCATION_HELP_TEXT = i18n.translate(
+  'xpack.synthetics.privateLocation.locationSpacesHelpText',
+  {
+    defaultMessage: 'Select the spaces where this location will be available.',
+  }
+);
+
+const API_KEY_HELP_TEXT = i18n.translate('xpack.synthetics.privateLocation.apiKeySpacesHelpText', {
+  defaultMessage: 'Select the spaces where this API key will be available.',
 });

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/settings/private_locations/location_form.tsx

@@ -62,7 +62,7 @@ export const LocationForm = ({ privateLocations }: { privateLocations: PrivateLo
         <EuiSpacer />
         <BrowserMonitorCallout />
         <EuiSpacer />
-        <SpaceSelector />
+        <SpaceSelector module="location" />
       </EuiForm>
     </>
   );

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/settings/project_api_keys/project_api_keys.test.tsx

@@ -45,7 +45,6 @@ describe('<ProjectAPIKeys />', () => {
   });
 
   it('shows appropriate content when user does not have correct uptime save permissions', () => {
-    // const apiKey = 'sampleApiKey';
     render(<ProjectAPIKeys />, {
       state,
       core: makeUptimePermissionsCore({ save: false }),

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/settings/project_api_keys/project_api_keys.tsx

@@ -4,28 +4,53 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { EuiText, EuiLink, EuiEmptyPrompt, EuiSwitch, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiLink, EuiEmptyPrompt, EuiSwitch, EuiSpacer, EuiForm } from '@elastic/eui';
+import { SpacesContextProps } from '@kbn/spaces-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { useFetcher } from '@kbn/observability-shared-plugin/public';
 import { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser';
+import { ALL_SPACES_ID } from '@kbn/security-plugin/public';
+import { FormProvider } from 'react-hook-form';
 import { HelpCommands } from './help_commands';
 import { LoadingState } from '../../monitors_page/overview/overview/monitor_detail_flyout';
 import { fetchProjectAPIKey } from '../../../state/monitor_management/api';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { ApiKeyBtn } from './api_key_btn';
 import { useEnablement } from '../../../hooks';
+import { SpaceSelector } from '../components/spaces_select';
+import { useFormWrapped } from '../../../../../hooks/use_form_wrapped';
 
 const syntheticsTestRunDocsLink =
   'https://www.elastic.co/guide/en/observability/current/synthetic-run-tests.html';
 
+const getEmptyFunctionComponent: React.FC<SpacesContextProps> = ({ children }) => <>{children}</>;
+
 export const ProjectAPIKeys = () => {
   const { loading: enablementLoading, canManageApiKeys } = useEnablement();
   const [apiKey, setApiKey] = useState<string | undefined>(undefined);
   const [loadAPIKey, setLoadAPIKey] = useState(false);
   const [accessToElasticManagedLocations, setAccessToElasticManagedLocations] = useState(true);
 
+  const { spaces: spacesApi } = useKibana<ClientPluginsStart>().services;
+
+  const ContextWrapper = useMemo(
+    () =>
+      spacesApi ? spacesApi.ui.components.getSpacesContextProvider : getEmptyFunctionComponent,
+    [spacesApi]
+  );
+
+  const form = useFormWrapped({
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    shouldFocusError: true,
+    defaultValues: {
+      apiKey,
+      spaces: [ALL_SPACES_ID],
+    },
+  });
+
   const kServices = useKibana<ClientPluginsStart>().services;
   const canSaveIntegrations: boolean =
     !!kServices?.fleet?.authz.integrations.writeIntegrationPolicies;
@@ -35,7 +60,10 @@ export const ProjectAPIKeys = () => {
 
   const { data, loading, error } = useFetcher(async () => {
     if (loadAPIKey) {
-      return fetchProjectAPIKey(accessToElasticManagedLocations && Boolean(canUsePublicLocations));
+      return fetchProjectAPIKey(
+        accessToElasticManagedLocations && Boolean(canUsePublicLocations),
+        form.getValues()?.spaces
+      );
     }
     return null;
     // FIXME: Dario thinks there is a better way to do this but
@@ -69,64 +97,67 @@ export const ProjectAPIKeys = () => {
   }
 
   return (
-    <>
-      <EuiEmptyPrompt
-        style={{ maxWidth: '50%' }}
-        title={<h2>{GET_API_KEY_GENERATE}</h2>}
-        body={
-          canSave && canManageApiKeys ? (
-            <>
-              <EuiText>
-                {GET_API_KEY_LABEL_DESCRIPTION}{' '}
-                {!canSaveIntegrations ? `${API_KEY_DISCLAIMER} ` : ''}
-                <EuiLink
-                  data-test-subj="syntheticsProjectAPIKeysLink"
-                  href={syntheticsTestRunDocsLink}
-                  external
-                  target="_blank"
-                >
-                  {LEARN_MORE_LABEL}
-                </EuiLink>
-              </EuiText>
-              <EuiSpacer />
-              <EuiSwitch
-                label={i18n.translate('xpack.synthetics.features.elasticManagedLocations', {
-                  defaultMessage: 'Elastic managed locations enabled',
-                })}
-                checked={accessToElasticManagedLocations && Boolean(canUsePublicLocations)}
-                onChange={() => {
-                  setAccessToElasticManagedLocations(!accessToElasticManagedLocations);
-                }}
-                disabled={!canUsePublicLocations}
-              />
-            </>
-          ) : (
-            <>
-              <EuiText>
-                {GET_API_KEY_REDUCED_PERMISSIONS_LABEL}{' '}
-                <EuiLink
-                  data-test-subj="syntheticsProjectAPIKeysLink"
-                  href={syntheticsTestRunDocsLink}
-                  external
-                  target="_blank"
-                >
-                  {LEARN_MORE_LABEL}
-                </EuiLink>
-              </EuiText>
-            </>
-          )
-        }
-        actions={
-          <ApiKeyBtn
-            loading={loading}
-            setLoadAPIKey={setLoadAPIKey}
-            apiKey={apiKey}
-            isDisabled={!canSave || !canManageApiKeys}
-          />
-        }
-      />
-      {apiKey && <HelpCommands apiKey={apiKey} />}
-    </>
+    <ContextWrapper>
+      <FormProvider {...form}>
+        <EuiEmptyPrompt
+          style={{ maxWidth: '50%' }}
+          title={<h2>{GET_API_KEY_GENERATE}</h2>}
+          body={
+            canSave && canManageApiKeys ? (
+              <EuiForm component="form" noValidate>
+                <EuiText>
+                  {GET_API_KEY_LABEL_DESCRIPTION}{' '}
+                  {!canSaveIntegrations ? `${API_KEY_DISCLAIMER} ` : ''}
+                  <EuiLink
+                    data-test-subj="syntheticsProjectAPIKeysLink"
+                    href={syntheticsTestRunDocsLink}
+                    external
+                    target="_blank"
+                  >
+                    {LEARN_MORE_LABEL}
+                  </EuiLink>
+                </EuiText>
+                <EuiSpacer />
+                <EuiSwitch
+                  label={i18n.translate('xpack.synthetics.features.elasticManagedLocations', {
+                    defaultMessage: 'Elastic managed locations enabled',
+                  })}
+                  checked={accessToElasticManagedLocations && Boolean(canUsePublicLocations)}
+                  onChange={() => {
+                    setAccessToElasticManagedLocations(!accessToElasticManagedLocations);
+                  }}
+                  disabled={!canUsePublicLocations}
+                />
+                <SpaceSelector module="apiKey" />
+              </EuiForm>
+            ) : (
+              <>
+                <EuiText>
+                  {GET_API_KEY_REDUCED_PERMISSIONS_LABEL}{' '}
+                  <EuiLink
+                    data-test-subj="syntheticsProjectAPIKeysLink"
+                    href={syntheticsTestRunDocsLink}
+                    external
+                    target="_blank"
+                  >
+                    {LEARN_MORE_LABEL}
+                  </EuiLink>
+                </EuiText>
+              </>
+            )
+          }
+          actions={
+            <ApiKeyBtn
+              loading={loading}
+              setLoadAPIKey={setLoadAPIKey}
+              apiKey={apiKey}
+              isDisabled={!canSave || !canManageApiKeys}
+            />
+          }
+        />
+        {apiKey && <HelpCommands apiKey={apiKey} />}
+      </FormProvider>
+    </ContextWrapper>
   );
 };
 

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/state/monitor_management/api.ts

@@ -63,10 +63,12 @@ export const updateMonitorAPI = async ({
 };
 
 export const fetchProjectAPIKey = async (
-  accessToElasticManagedLocations: boolean
+  accessToElasticManagedLocations: boolean,
+  spaces: string[]
 ): Promise<ProjectAPIKeyResponse> => {
   return await apiService.get(SYNTHETICS_API_URLS.SYNTHETICS_PROJECT_APIKEY, {
     accessToElasticManagedLocations,
+    spaces,
   });
 };
 

x-pack/solutions/observability/plugins/synthetics/public/utils/api_service/api_service.ts

@@ -88,7 +88,10 @@ class ApiService {
     const { version, spaceId, ...queryParams } = params;
     const response = await this._http!.fetch<T>({
       path: this.parseApiUrl(apiUrl, spaceId),
-      query: queryParams,
+      query: {
+        ...queryParams,
+        spaces: queryParams.spaces ? JSON.stringify(queryParams.spaces) : undefined,
+      },
       version,
       ...(options ?? {}),
       ...(spaceId ? { prependBasePath: false } : {}),

x-pack/solutions/observability/plugins/synthetics/server/routes/monitor_cruds/get_api_key.ts

@@ -21,6 +21,7 @@ export const getAPIKeySyntheticsRoute: SyntheticsRestApiRouteFactory = () => ({
   path: SYNTHETICS_API_URLS.SYNTHETICS_PROJECT_APIKEY,
   validate: {
     query: schema.object({
+      spaces: schema.maybe(schema.arrayOf(schema.string())),
       accessToElasticManagedLocations: schema.maybe(schema.boolean()),
     }),
   },
@@ -29,7 +30,7 @@ export const getAPIKeySyntheticsRoute: SyntheticsRestApiRouteFactory = () => ({
     server,
     response,
   }): Promise<ProjectAPIKeyResponse | IKibanaResponse> => {
-    const { accessToElasticManagedLocations } = request.query;
+    const { accessToElasticManagedLocations, spaces } = request.query;
 
     if (accessToElasticManagedLocations) {
       const elasticManagedLocationsEnabled =
@@ -52,6 +53,7 @@ export const getAPIKeySyntheticsRoute: SyntheticsRestApiRouteFactory = () => ({
       request,
       server,
       accessToElasticManagedLocations,
+      spaces,
     });
 
     return { apiKey };

x-pack/solutions/observability/plugins/synthetics/server/synthetics_service/get_api_key.ts

@@ -117,10 +117,12 @@ export const generateProjectAPIKey = async ({
   server,
   request,
   accessToElasticManagedLocations = true,
+  spaces = [ALL_SPACES_ID],
 }: {
   server: SyntheticsServerSetup;
   request: KibanaRequest;
   accessToElasticManagedLocations?: boolean;
+  spaces?: string[];
 }): Promise<SecurityCreateApiKeyResponse | null> => {
   const { security } = server;
   const isApiKeysEnabled = await security.authc.apiKeys?.areAPIKeysEnabled();
@@ -138,7 +140,7 @@ export const generateProjectAPIKey = async ({
         kibana: [
           {
             base: [],
-            spaces: [ALL_SPACES_ID],
+            spaces,
             feature: {
               uptime: [accessToElasticManagedLocations ? 'all' : 'minimal_all'],
             },