[8.16] [API keys] Improve functional tests for API keys management page (#200110)

x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx

@@ -274,6 +274,7 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
         <EuiSearchBar
           query={query}
           box={{
+            'data-test-subj': 'apiKeysSearchBar',
             incremental: true,
             schema: {
               strict: true,
@@ -393,6 +394,7 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
             onFilterChange({ ...filters, type: filters.type === 'rest' ? undefined : 'rest' });
           }}
           withNext={types.includes('cross_cluster') || types.includes('managed')}
+          data-test-subj="personalFilterButton"
         >
           <FormattedMessage
             id="xpack.security.accountManagement.apiKeyBadge.restTitle"
@@ -412,6 +414,7 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
             });
           }}
           withNext={types.includes('managed')}
+          data-test-subj="crossClusterFilterButton"
         >
           <FormattedMessage
             id="xpack.security.accountManagement.apiKeyBadge.crossClusterLabel"
@@ -430,6 +433,7 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
               type: filters.type === 'managed' ? undefined : 'managed',
             });
           }}
+          data-test-subj="managedFilterButton"
         >
           <FormattedMessage
             id="xpack.security.accountManagement.apiKeyBadge.managedTitle"
@@ -463,6 +467,7 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
           }
         }}
         withNext={true}
+        data-test-subj="activeFilterButton"
       >
         <FormattedMessage
           id="xpack.security.management.apiKeys.table.activeFilter"
@@ -478,6 +483,7 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
             onFilterChange({ ...filters, expired: true });
           }
         }}
+        data-test-subj="expiredFilterButton"
       >
         <FormattedMessage
           id="xpack.security.management.apiKeys.table.expiredFilter"
@@ -520,6 +526,7 @@ export const UsersFilterButton: FunctionComponent<CustomComponentProps> = ({ que
           numFilters={usernames.length}
           hasActiveFilters={numActiveFilters ? true : false}
           numActiveFilters={numActiveFilters}
+          data-test-subj="ownerFilterButton"
         >
           <FormattedMessage
             id="xpack.security.management.apiKeys.table.ownerFilter"

x-pack/test/functional/apps/api_keys/home_page.ts

@@ -419,5 +419,134 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         );
       });
     });
+
+    describe('querying API keys', function () {
+      before(async () => {
+        await clearAllApiKeys(es, log);
+        await security.testUser.setRoles(['kibana_admin', 'test_api_keys']);
+
+        await es.transport.request({
+          method: 'POST',
+          path: '/_security/cross_cluster/api_key',
+          body: {
+            name: 'test_cross_cluster',
+            expiration: '1d',
+            access: {
+              search: [
+                {
+                  names: ['*'],
+                },
+              ],
+              replication: [
+                {
+                  names: ['*'],
+                },
+              ],
+            },
+          },
+        });
+
+        await es.security.createApiKey({
+          name: 'my api key',
+          expiration: '1d',
+          role_descriptors: {
+            role_1: {},
+          },
+          metadata: {
+            managed: true,
+          },
+        });
+
+        await es.security.createApiKey({
+          name: 'Alerting: Managed',
+          expiration: '1d',
+          role_descriptors: {
+            role_1: {},
+          },
+        });
+
+        await es.security.createApiKey({
+          name: 'test_api_key',
+          expiration: '1s',
+          role_descriptors: {
+            role_1: {},
+          },
+        });
+
+        await es.security.grantApiKey({
+          api_key: {
+            name: 'test_user_api_key',
+            expiration: '1d',
+          },
+          grant_type: 'password',
+          run_as: 'test_user',
+          username: 'elastic',
+          password: 'changeme',
+        });
+
+        await pageObjects.common.navigateToApp('apiKeys');
+      });
+
+      after(async () => {
+        await security.testUser.restoreDefaults();
+        await clearAllApiKeys(es, log);
+      });
+
+      it('active/expired filter buttons work as expected', async () => {
+        await pageObjects.apiKeys.clickExpiryFilters('active');
+        await ensureApiKeysExist(['my api key', 'Alerting: Managed', 'test_cross_cluster']);
+        expect(await pageObjects.apiKeys.doesApiKeyExist('test_api_key')).to.be(false);
+
+        await pageObjects.apiKeys.clickExpiryFilters('expired');
+        await ensureApiKeysExist(['test_api_key']);
+        expect(await pageObjects.apiKeys.doesApiKeyExist('my api key')).to.be(false);
+
+        // reset filter buttons
+        await pageObjects.apiKeys.clickExpiryFilters('expired');
+      });
+
+      it('api key type filter buttons work as expected', async () => {
+        await pageObjects.apiKeys.clickTypeFilters('personal');
+
+        await ensureApiKeysExist(['test_api_key']);
+
+        await pageObjects.apiKeys.clickTypeFilters('cross_cluster');
+
+        await ensureApiKeysExist(['test_cross_cluster']);
+
+        await pageObjects.apiKeys.clickTypeFilters('managed');
+
+        await ensureApiKeysExist(['my api key', 'Alerting: Managed']);
+
+        // reset filters by simulate clicking the managed filter button again
+        await pageObjects.apiKeys.clickTypeFilters('managed');
+      });
+
+      it('username filter buttons work as expected', async () => {
+        await pageObjects.apiKeys.clickUserNameDropdown();
+        expect(
+          await testSubjects.exists('userProfileSelectableOption-system_indices_superuser')
+        ).to.be(true);
+        expect(await testSubjects.exists('userProfileSelectableOption-test_user')).to.be(true);
+
+        await testSubjects.click('userProfileSelectableOption-test_user');
+
+        await ensureApiKeysExist(['test_user_api_key']);
+        await testSubjects.click('userProfileSelectableOption-test_user');
+
+        await testSubjects.click('userProfileSelectableOption-system_indices_superuser');
+
+        await ensureApiKeysExist(['my api key', 'Alerting: Managed', 'test_cross_cluster']);
+      });
+
+      it.skip('search bar works as expected', async () => {
+        await pageObjects.apiKeys.setSearchBarValue('test_user_api_key');
+
+        await ensureApiKeysExist(['test_user_api_key']);
+
+        await pageObjects.apiKeys.setSearchBarValue('"my api key"');
+        await ensureApiKeysExist(['my api key']);
+      });
+    });
   });
 };

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

@@ -157,5 +157,34 @@ export function ApiKeysPageProvider({ getService }: FtrProviderContext) {
       const toast = await testSubjects.find('updateApiKeySuccessToast');
       return toast.getVisibleText();
     },
+
+    async clickExpiryFilters(type: 'active' | 'expired') {
+      const button = await testSubjects.find(
+        type === 'active' ? 'activeFilterButton' : 'expiredFilterButton'
+      );
+      return button.click();
+    },
+
+    async clickTypeFilters(type: 'personal' | 'managed' | 'cross_cluster') {
+      const buttonMap = {
+        personal: 'personalFilterButton',
+        managed: 'managedFilterButton',
+        cross_cluster: 'crossClusterFilterButton',
+      };
+
+      const button = await testSubjects.find(buttonMap[type]);
+      return button.click();
+    },
+
+    async clickUserNameDropdown() {
+      const button = await testSubjects.find('ownerFilterButton');
+      return button.click();
+    },
+
+    async setSearchBarValue(query: string) {
+      const searchBar = await testSubjects.find('apiKeysSearchBar');
+      await searchBar.clearValue();
+      return searchBar.type(query);
+    },
   };
 }