test: add E2E tests for plugin metadata resource (#3247)

* test(plugin_metadata): add E2E tests for plugin metadata resource

- Add POM (Page Object Model) for plugin metadata pages
- Implement list page tests for navigation and search functionality
- Implement CRUD tests with required fields only (simple metadata)
- Implement CRUD tests with all fields (comprehensive metadata)
- Tests verify add, edit, and delete operations
- All 4 tests passing

Closes #3089

* test(e2e): add verification after editing plugin metadata

- Add API verification to confirm configuration changes persist
- Verify updated fields (time_iso8601, http_user_agent) appear in saved metadata
- Address review feedback requesting verification of configuration changes

* test(e2e): enhance plugin metadata dialog interactions with helper functions

Author: DSingh0304

e2e/pom/plugin_metadata.ts

@@ -0,0 +1,45 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { uiGoto } from '@e2e/utils/ui';
+import { expect, type Page } from '@playwright/test';
+
+const locator = {
+  getPluginMetadataNavBtn: (page: Page) =>
+    page.getByRole('link', { name: 'Plugin Metadata', exact: true }),
+  getSelectPluginsBtn: (page: Page) =>
+    page.getByRole('button', { name: 'Select Plugins' }),
+};
+
+const assert = {
+  isIndexPage: async (page: Page) => {
+    await expect(page).toHaveURL((url) =>
+      url.pathname.endsWith('/plugin_metadata')
+    );
+    const title = page.getByRole('heading', { name: 'Plugin Metadata' });
+    await expect(title).toBeVisible();
+  },
+};
+
+const goto = {
+  toIndex: (page: Page) => uiGoto(page, '/plugin_metadata'),
+};
+
+export const pluginMetadataPom = {
+  ...locator,
+  ...assert,
+  ...goto,
+};

e2e/tests/plugin_metadata.crud-all-fields.spec.ts

@@ -0,0 +1,222 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { pluginMetadataPom } from '@e2e/pom/plugin_metadata';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import {
+  uiFillMonacoEditor,
+  uiGetMonacoEditor,
+  uiHasToastMsg,
+} from '@e2e/utils/ui';
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { API_PLUGIN_METADATA } from '@/config/constant';
+
+// Helper function to delete plugin metadata
+const deletePluginMetadata = async (req: typeof e2eReq, name: string) => {
+  await req.delete(`${API_PLUGIN_METADATA}/${name}`).catch(() => {
+    // Ignore errors if metadata doesn't exist
+  });
+};
+const getMonacoEditorValue = async (editPluginDialog: Locator) => {
+  let editorValue = '';
+  const textarea = editPluginDialog.locator('textarea');
+  if (await textarea.count() > 0) {
+    editorValue = await textarea.inputValue();
+  }
+  if (!editorValue || editorValue.trim() === '{') {
+    const lines = await editPluginDialog.locator('.view-line').allTextContents();
+    editorValue = lines.join('\n').replace(/\s+/g, ' ');
+  }
+  if (!editorValue || editorValue.trim() === '{') {
+    const allText = await editPluginDialog.textContent();
+    console.log('DEBUG: editorValue fallback failed, dialog text:', allText);
+  }
+  return editorValue;
+};
+
+// Helper function to close edit dialog
+const closeEditDialog = async (editPluginDialog: Locator) => {
+  const buttons = await editPluginDialog.locator('button').allTextContents();
+  console.log('DEBUG: Edit Plugin dialog buttons:', buttons);
+  let closed = false;
+  for (const [i, name] of buttons.entries()) {
+    if (name.trim().toLowerCase() === 'cancel') {
+      await editPluginDialog.locator('button').nth(i).click();
+      closed = true;
+      break;
+    }
+  }
+  if (!closed && buttons.length > 0) {
+    await editPluginDialog.locator('button').first().click();
+  }
+};
+
+test.beforeAll(async () => {
+  await deletePluginMetadata(e2eReq, 'http-logger');
+});
+
+test.afterAll(async () => {
+  await deletePluginMetadata(e2eReq, 'http-logger');
+});
+
+test('should CRUD plugin metadata with all fields', async ({ page }) => {
+  await pluginMetadataPom.toIndex(page);
+  await pluginMetadataPom.isIndexPage(page);
+
+  await test.step('add plugin metadata with comprehensive configuration', async () => {
+    // Click Select Plugins button
+    await pluginMetadataPom.getSelectPluginsBtn(page).click();
+
+    // Select Plugins dialog should appear
+    const selectPluginsDialog = page.getByRole('dialog', {
+      name: 'Select Plugins',
+    });
+    await expect(selectPluginsDialog).toBeVisible();
+
+    // Search for http-logger plugin
+    const searchInput = selectPluginsDialog.getByPlaceholder('Search');
+    await searchInput.fill('http-logger');
+
+    // Click Add button for http-logger
+    await selectPluginsDialog
+      .getByTestId('plugin-http-logger')
+      .getByRole('button', { name: 'Add' })
+      .click();
+
+    // Add Plugin dialog should appear
+    const addPluginDialog = page.getByRole('dialog', { name: 'Add Plugin' });
+    await expect(addPluginDialog).toBeVisible();
+
+    // Fill in comprehensive configuration with all available fields
+    const pluginEditor = await uiGetMonacoEditor(page, addPluginDialog);
+    await uiFillMonacoEditor(
+      page,
+      pluginEditor,
+      JSON.stringify({
+        log_format: {
+          host: '$host',
+          client_ip: '$remote_addr',
+          request_method: '$request_method',
+          request_uri: '$request_uri',
+          status: '$status',
+          body_bytes_sent: '$body_bytes_sent',
+          request_time: '$request_time',
+          upstream_response_time: '$upstream_response_time',
+        },
+      })
+    );
+
+    // Click Add button
+    await addPluginDialog.getByRole('button', { name: 'Add' }).click();
+
+    // Should show success message
+    await uiHasToastMsg(page, {
+      hasText: 'success',
+    });
+
+    // Dialog should close
+    await expect(addPluginDialog).toBeHidden();
+
+    // Plugin card should now be visible
+    const httpLoggerCard = page.getByTestId('plugin-http-logger');
+    await expect(httpLoggerCard).toBeVisible();
+  });
+
+  await test.step('edit plugin metadata with extended fields', async () => {
+    // Find the http-logger card
+    const httpLoggerCard = page.getByTestId('plugin-http-logger');
+
+    // Click Edit button
+    await httpLoggerCard.getByRole('button', { name: 'Edit' }).click();
+
+    // Edit Plugin dialog should appear
+    const editPluginDialog = page.getByRole('dialog', { name: 'Edit Plugin' });
+    await expect(editPluginDialog).toBeVisible();
+
+    // Verify existing configuration is shown
+    await expect(editPluginDialog.getByText('log_format')).toBeVisible();
+
+    // Update the configuration with additional fields
+    const pluginEditor = await uiGetMonacoEditor(page, editPluginDialog);
+    await uiFillMonacoEditor(
+      page,
+      pluginEditor,
+      JSON.stringify({
+        log_format: {
+          host: '$host',
+          client_ip: '$remote_addr',
+          request_method: '$request_method',
+          request_uri: '$request_uri',
+          status: '$status',
+          body_bytes_sent: '$body_bytes_sent',
+          request_time: '$request_time',
+          upstream_response_time: '$upstream_response_time',
+          time: '$time_iso8601',
+          user_agent: '$http_user_agent',
+        },
+      })
+    );
+
+    // Click Save button
+    await editPluginDialog.getByRole('button', { name: 'Save' }).click();
+
+    // Should show success message
+    await uiHasToastMsg(page, {
+      hasText: 'success',
+    });
+
+    // Dialog should close
+    await expect(editPluginDialog).toBeHidden();
+  });
+
+  await test.step('verify configuration changes were saved', async () => {
+    // Re-open the edit dialog via UI
+    const httpLoggerCard = page.getByTestId('plugin-http-logger');
+    await httpLoggerCard.getByRole('button', { name: 'Edit' }).click();
+    const editPluginDialog = page.getByRole('dialog', { name: 'Edit Plugin' });
+    await expect(editPluginDialog).toBeVisible();
+
+    // Get Monaco editor value using helper
+    const editorValue = await getMonacoEditorValue(editPluginDialog);
+    expect(editorValue).toMatch(/"time"\s*:\s*"\$time_iso8601"/);
+    expect(editorValue).toMatch(/"user_agent"\s*:\s*"\$http_user_agent"/);
+    expect(editorValue).toMatch(/"host"\s*:\s*"\$host"/);
+    expect(editorValue).toMatch(/"client_ip"\s*:\s*"\$remote_addr"/);
+
+    // Close the dialog using helper
+    await closeEditDialog(editPluginDialog);
+    await expect(editPluginDialog).toBeHidden();
+  });
+
+  await test.step('delete plugin metadata', async () => {
+    // Find the http-logger card
+    const httpLoggerCard = page.getByTestId('plugin-http-logger');
+
+    // Click Delete button
+    await httpLoggerCard.getByRole('button', { name: 'Delete' }).click();
+
+    // Should show success message
+    await uiHasToastMsg(page, {
+      hasText: 'success',
+    });
+
+    // Card should be removed
+    await expect(httpLoggerCard).toBeHidden();
+  });
+});