[Serverless Search] FTR tests for Getting Started page (elastic#169572)

## Summary

Added tests for the getting started pages language clients & api key
creation

x-pack/plugins/serverless_search/public/application/components/api_key/api_key.tsx

@@ -53,7 +53,7 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
         />
       )}
       {apiKey ? (
-        <EuiPanel className="apiKeySuccessPanel">
+        <EuiPanel className="apiKeySuccessPanel" data-test-subj="api-key-create-success-panel">
           <EuiStep
             css={css`
               .euiStep__content {
@@ -74,7 +74,9 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
               })}
             </EuiText>
             <EuiSpacer size="s" />
-            <EuiCodeBlock isCopyable>{JSON.stringify(apiKey, undefined, 2)}</EuiCodeBlock>
+            <EuiCodeBlock isCopyable data-test-subj="api-key-created-key-codeblock">
+              {JSON.stringify(apiKey, undefined, 2)}
+            </EuiCodeBlock>
           </EuiStep>
         </EuiPanel>
       ) : (
@@ -104,6 +106,7 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
                       size="s"
                       fill
                       onClick={() => setIsFlyoutOpen(true)}
+                      data-test-subj="new-api-key-button"
                     >
                       <EuiText size="s">
                         {i18n.translate('xpack.serverlessSearch.apiKey.newButtonLabel', {
@@ -120,6 +123,7 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
                       size="s"
                       href={http.basePath.prepend(MANAGEMENT_API_KEYS)}
                       target="_blank"
+                      data-test-subj="manage-api-keys-button"
                     >
                       {i18n.translate('xpack.serverlessSearch.apiKey.manageLabel', {
                         defaultMessage: 'Manage',
@@ -142,7 +146,10 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
                         defaultMessage="You have {number} active keys."
                         values={{
                           number: (
-                            <EuiBadge color={data.apiKeys.length > 0 ? 'success' : 'warning'}>
+                            <EuiBadge
+                              color={data.apiKeys.length > 0 ? 'success' : 'warning'}
+                              data-test-subj="api-keys-count-badge"
+                            >
                               {data.apiKeys.length}
                             </EuiBadge>
                           ),

x-pack/plugins/serverless_search/public/application/components/api_key/basic_setup_form.tsx

@@ -60,6 +60,7 @@ export const BasicSetupForm: React.FC<BasicSetupFormProps> = ({
           isLoading={isLoading}
           value={name}
           onChange={(e) => onChangeName(e.currentTarget.value)}
+          data-test-subj="create-api-key-name"
         />
       </EuiFormRow>
       <EuiFormRow
@@ -71,12 +72,7 @@ export const BasicSetupForm: React.FC<BasicSetupFormProps> = ({
           defaultMessage: 'User',
         })}
       >
-        <EuiFieldText
-          fullWidth
-          disabled={true}
-          value={user}
-          onChange={(e) => onChangeName(e.currentTarget.value)}
-        />
+        <EuiFieldText fullWidth disabled={true} value={user} onChange={() => {}} />
       </EuiFormRow>
       <EuiFormRow
         fullWidth
@@ -105,16 +101,19 @@ export const BasicSetupForm: React.FC<BasicSetupFormProps> = ({
               label: i18n.translate('xpack.serverlessSearch.apiKey.expiresField.neverLabel', {
                 defaultMessage: 'Never',
               }),
+              'data-test-subj': 'create-api-key-expires-never-radio',
             },
             {
               id: 'days',
               label: i18n.translate('xpack.serverlessSearch.apiKey.expiresField.daysLabel', {
                 defaultMessage: 'in days',
               }),
+              'data-test-subj': 'create-api-key-expires-days-radio',
             },
           ]}
           idSelected={expires === null ? 'never' : 'days'}
           onChange={(id) => onChangeExpires(id === 'never' ? null : DEFAULT_EXPIRES_VALUE)}
+          data-test-subj="create-api-key-expires-radio"
         />
       </EuiFormRow>
       {expires !== null && (
@@ -149,6 +148,7 @@ export const BasicSetupForm: React.FC<BasicSetupFormProps> = ({
             defaultValue={expires}
             min={1}
             onChange={(e) => onChangeExpires(e.currentTarget.value)}
+            data-test-subj="create-api-key-expires-days-number-field"
           />
         </EuiFormRow>
       )}

x-pack/plugins/serverless_search/public/application/components/api_key/create_api_key_flyout.tsx

@@ -171,6 +171,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({
             title={i18n.translate('xpack.serverlessSearch.apiKey.flyout.errorTitle', {
               defaultMessage: 'Error creating API key',
             })}
+            data-test-subj="create-api-key-error-callout"
           >
             {createError}
           </EuiCallOut>
@@ -256,6 +257,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({
                 label={privilegesEnabled ? ENABLED_LABEL : DISABLED_LABEL}
                 checked={privilegesEnabled}
                 onChange={togglePrivileges}
+                data-test-subj="create-api-role-descriptors-switch"
               />
             }
             forceState={privilegesOpen}
@@ -310,6 +312,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({
                 label={metadataEnabled ? ENABLED_LABEL : DISABLED_LABEL}
                 checked={metadataEnabled}
                 onChange={toggleMetadata}
+                data-test-subj="create-api-metadata-switch"
               />
             }
             forceState={metadataOpen}
@@ -331,14 +334,24 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty isDisabled={isLoading} onClick={onClose}>
+            <EuiButtonEmpty
+              isDisabled={isLoading}
+              onClick={onClose}
+              data-test-subj="create-api-key-cancel"
+            >
               {CANCEL_LABEL}
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup justifyContent="flexEnd">
               <EuiFlexItem>
-                <EuiButton fill disabled={!name} isLoading={isLoading} onClick={onCreateClick}>
+                <EuiButton
+                  fill
+                  disabled={!name}
+                  isLoading={isLoading}
+                  onClick={onCreateClick}
+                  data-test-subj="create-api-key-submit"
+                >
                   {i18n.translate('xpack.serverlessSearch.apiKey.flyOutCreateLabel', {
                     defaultMessage: 'Create API Key',
                   })}

x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx

@@ -23,7 +23,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
   error,
 }) => {
   return (
-    <>
+    <div data-test-subj="create-api-metadata-code-editor-container">
       <EuiLink href={docLinks.metadata} target="_blank">
         {i18n.translate('xpack.serverlessSearch.apiKey.metadataLinkLabel', {
           defaultMessage: 'Learn how to structure role metadata',
@@ -44,6 +44,6 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
         onChange={(e) => onChangeMetadata(e)}
         value={metadata}
       />
-    </>
+    </div>
   );
 };

x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx

@@ -23,7 +23,7 @@ export const SecurityPrivilegesForm: React.FC<SecurityPrivilegesFormProps> = ({
   error,
 }) => {
   return (
-    <>
+    <div data-test-subj="create-api-role-descriptors-code-editor-container">
       <EuiLink href={docLinks.roleDescriptors} target="_blank">
         {i18n.translate('xpack.serverlessSearch.apiKey.roleDescriptorsLinkLabel', {
           defaultMessage: 'Learn how to structure role descriptors',
@@ -44,6 +44,6 @@ export const SecurityPrivilegesForm: React.FC<SecurityPrivilegesFormProps> = ({
         onChange={(e) => onChangeRoleDescriptors(e)}
         value={roleDescriptors}
       />
-    </>
+    </div>
   );
 };

x-pack/plugins/serverless_search/public/application/components/languages/language_grid.tsx

@@ -38,7 +38,7 @@ export const LanguageGrid: React.FC<LanguageGridProps> = ({
   const columns = isXLarge ? 3 : isLarge ? 2 : 1;
 
   return (
-    <EuiFlexGrid columns={columns} gutterSize="s">
+    <EuiFlexGrid columns={columns} gutterSize="s" data-test-subj="client-select-container">
       {languages.map((language) => (
         <EuiFlexItem key={language.id}>
           <EuiPanel
@@ -51,6 +51,7 @@ export const LanguageGrid: React.FC<LanguageGridProps> = ({
             }
             onClick={() => setSelectedLanguage(language)}
             color={language.id === selectedLanguage ? 'primary' : 'plain'}
+            data-test-subj={`${language.id}-client-panel`}
           >
             <EuiFlexGroup justifyContent="flexStart" responsive={false}>
               <EuiFlexItem grow={false}>

x-pack/plugins/serverless_search/public/application/components/overview.tsx

@@ -84,7 +84,11 @@ export const ElasticsearchOverview = () => {
           <WelcomeBanner user={user} assetBasePath={assetBasePath} />
         </EuiText>
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="select-client-section"
+      >
         <SelectClientPanel docLinks={docLinks} http={http}>
           <EuiFlexItem>
             <LanguageGrid
@@ -97,7 +101,11 @@ export const ElasticsearchOverview = () => {
         </SelectClientPanel>
       </EuiPageTemplate.Section>
 
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="install-client-section"
+      >
         <InstallClientPanel
           codeSnippet={getLanguageDefinitionCodeSnippet(
             selectedLanguage,
@@ -113,7 +121,11 @@ export const ElasticsearchOverview = () => {
           sharePlugin={share}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="api-keys-section"
+      >
         <OverviewPanel
           description={i18n.translate('xpack.serverlessSearch.apiKey.description', {
             defaultMessage:
@@ -126,7 +138,11 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="cloud-details-section"
+      >
         <OverviewPanel
           description={i18n.translate('xpack.serverlessSearch.cloudIdDetails.description', {
             defaultMessage:
@@ -185,7 +201,11 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="configure-client-section"
+      >
         <OverviewPanel
           description={i18n.translate('xpack.serverlessSearch.configureClient.description', {
             defaultMessage: 'Initialize your client with your unique API key and Cloud ID',
@@ -226,7 +246,11 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="test-client-section"
+      >
         <OverviewPanel
           description={i18n.translate('xpack.serverlessSearch.testConnection.description', {
             defaultMessage:
@@ -254,7 +278,11 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="ingest-client-section"
+      >
         <IngestData
           codeSnippet={getLanguageDefinitionCodeSnippet(
             selectedLanguage,
@@ -271,7 +299,11 @@ export const ElasticsearchOverview = () => {
           sharePlugin={share}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+      <EuiPageTemplate.Section
+        color="subdued"
+        bottomBorder="extended"
+        data-test-subj="search-client-section"
+      >
         <OverviewPanel
           description={i18n.translate('xpack.serverlessSearch.searchQuery.description', {
             defaultMessage:
@@ -299,7 +331,11 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section alignment="top" className="serverlessSearchOverviewFooterSection">
+      <EuiPageTemplate.Section
+        alignment="top"
+        className="serverlessSearchOverviewFooterSection"
+        data-test-subj="footer-section"
+      >
         <OverviewPanel
           title={i18n.translate('xpack.serverlessSearch.overview.footer.title', {
             defaultMessage: 'Do more with your data',

x-pack/test/functional/page_objects/index_management_page.ts

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import expect from '@kbn/expect';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export function IndexManagementPageProvider({ getService }: FtrProviderContext) {
@@ -134,5 +134,28 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
         });
       },
     },
+    async clickCreateIndexButton() {
+      await testSubjects.click('createIndexButton');
+      await testSubjects.existOrFail('createIndexSaveButton');
+    },
+    async setCreateIndexName(value: string) {
+      await testSubjects.existOrFail('createIndexNameFieldText');
+      await testSubjects.setValue('createIndexNameFieldText', value);
+    },
+    async clickCreateIndexSaveButton() {
+      await testSubjects.click('createIndexSaveButton');
+      // Wait for modal to close
+      await testSubjects.missingOrFail('createIndexSaveButton');
+    },
+    async expectIndexToExist(indexName: string) {
+      const table = await find.byCssSelector('table');
+      const rows = await table.findAllByTestSubject('indexTableRow');
+      const indexNames: string[] = await Promise.all(
+        rows.map(async (row) => {
+          return await (await row.findByTestSubject('indexTableIndexNameLink')).getVisibleText();
+        })
+      );
+      expect(indexNames.some((i) => i === indexName)).to.be(true);
+    },
   };
 }