fix: support edit and show vars (#3152)

Author: SkyeYoung

e2e/tests/hot-path.upstream-service-route.spec.ts

@@ -20,7 +20,11 @@ import { upstreamsPom } from '@e2e/pom/upstreams';
 import { randomId } from '@e2e/utils/common';
 import { e2eReq } from '@e2e/utils/req';
 import { test } from '@e2e/utils/test';
-import { uiClearEditor, uiHasToastMsg } from '@e2e/utils/ui';
+import {
+  uiFillMonacoEditor,
+  uiGetMonacoEditor,
+  uiHasToastMsg,
+} from '@e2e/utils/ui';
 import { expect } from '@playwright/test';
 
 import { deleteAllRoutes } from '@/apis/routes';
@@ -139,7 +143,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
    * Plugins: Enable limit-count with custom configuration
    */
   const servicePluginName = 'limit-count';
-  const service: Partial<APISIXType['Service']> = {
+  const service = {
     // will be set in test
     id: undefined,
     name: randomId('HTTPBIN Service'),
@@ -150,9 +154,10 @@ test('can create upstream -> service -> route', async ({ page }) => {
         time_window: 60,
         rejected_code: 429,
         key: 'remote_addr',
+        policy: 'local',
       },
     },
-  };
+  } satisfies Partial<APISIXType['Service']>;
   await test.step('create service', async () => {
     // upstream id should be set
     expect(service.upstream_id).not.toBeUndefined();
@@ -197,15 +202,14 @@ test('can create upstream -> service -> route', async ({ page }) => {
 
     // Configure the plugin
     const addPluginDialog = page.getByRole('dialog', { name: 'Add Plugin' });
-    const editorLoading = addPluginDialog.getByTestId('editor-loading');
-    await expect(editorLoading).toBeHidden();
-
-    // Clear the editor and add custom configuration
-    const editor = addPluginDialog.getByRole('code').getByRole('textbox');
-    await uiClearEditor(page);
+    const pluginEditor = await uiGetMonacoEditor(page, addPluginDialog);
 
     // Add plugin configuration
-    await editor.fill(JSON.stringify(service.plugins?.[servicePluginName]));
+    await uiFillMonacoEditor(
+      page,
+      pluginEditor,
+      JSON.stringify(service.plugins?.[servicePluginName])
+    );
 
     // Add the plugin
     await addPluginDialog.getByRole('button', { name: 'Add' }).click();
@@ -311,15 +315,14 @@ test('can create upstream -> service -> route', async ({ page }) => {
 
     // Configure the plugin
     const addPluginDialog = page.getByRole('dialog', { name: 'Add Plugin' });
-    const editorLoading = addPluginDialog.getByTestId('editor-loading');
-    await expect(editorLoading).toBeHidden();
-
-    // Clear the editor and add custom configuration
-    const editor = addPluginDialog.getByRole('code').getByRole('textbox');
-    await uiClearEditor(page);
+    const pluginEditor = await uiGetMonacoEditor(page, addPluginDialog);
 
     // Add plugin configuration
-    await editor.fill(JSON.stringify(route.plugins?.[routePluginName]));
+    await uiFillMonacoEditor(
+      page,
+      pluginEditor,
+      JSON.stringify(route.plugins?.[routePluginName])
+    );
 
     // Add the plugin
     await addPluginDialog.getByRole('button', { name: 'Add' }).click();

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

@@ -18,7 +18,12 @@ import { routesPom } from '@e2e/pom/routes';
 import { randomId } from '@e2e/utils/common';
 import { e2eReq } from '@e2e/utils/req';
 import { test } from '@e2e/utils/test';
-import { uiClearEditor, uiHasToastMsg } from '@e2e/utils/ui';
+import {
+  uiClearMonacoEditor,
+  uiFillMonacoEditor,
+  uiGetMonacoEditor,
+  uiHasToastMsg,
+} from '@e2e/utils/ui';
 import { uiFillUpstreamAllFields } from '@e2e/utils/ui/upstreams';
 import { expect } from '@playwright/test';
 
@@ -33,13 +38,18 @@ const nodes: APISIXType['UpstreamNode'][] = [
   { host: 'test.com', port: 80, weight: 100 },
   { host: 'test2.com', port: 80, weight: 100 },
 ];
+// Define vars values for testing
+const initialVars = '[["arg_name", "==", "json"], ["arg_age", ">", 18]]';
+const updatedVars = '[["arg_name", "==", "updated"], ["arg_age", ">", 21]]';
 
 test.beforeAll(async () => {
   await deleteAllRoutes(e2eReq);
 });
 
 test('should CRUD route with all fields', async ({ page }) => {
-  test.setTimeout(30000);
+  test.slow();
+
+  const varsSection = page.getByText('Vars').locator('..');
 
   // Navigate to the route list page
   await routesPom.toIndex(page);
@@ -85,6 +95,10 @@ test('should CRUD route with all fields', async ({ page }) => {
     await page.getByRole('option', { name: 'Disabled' }).click();
     await expect(status).toHaveValue('Disabled');
 
+    // Fill in Vars field
+    const varsEditor = await uiGetMonacoEditor(page, varsSection);
+    await uiFillMonacoEditor(page, varsEditor, initialVars);
+
     // Add upstream nodes
     const upstreamSection = page.getByRole('group', {
       name: 'Upstream',
@@ -120,11 +134,8 @@ test('should CRUD route with all fields', async ({ page }) => {
       .click();
 
     const addPluginDialog = page.getByRole('dialog', { name: 'Add Plugin' });
-    const editorLoading = addPluginDialog.getByTestId('editor-loading');
-    await expect(editorLoading).toBeHidden();
-    const editor = addPluginDialog.getByRole('code').getByRole('textbox');
-    await uiClearEditor(page);
-    await editor.fill('{"hide_credentials": true}');
+    const pluginEditor = await uiGetMonacoEditor(page, addPluginDialog);
+    await uiFillMonacoEditor(page, pluginEditor, '{"hide_credentials": true}');
     // add plugin
     await addPluginDialog.getByRole('button', { name: 'Add' }).click();
     await expect(addPluginDialog).toBeHidden();
@@ -135,7 +146,6 @@ test('should CRUD route with all fields', async ({ page }) => {
 
     // should show edit plugin dialog
     const editPluginDialog = page.getByRole('dialog', { name: 'Edit Plugin' });
-    await expect(editorLoading).toBeHidden();
 
     await expect(editPluginDialog.getByText('hide_credentials')).toBeVisible();
     // save edit plugin dialog
@@ -157,13 +167,12 @@ test('should CRUD route with all fields', async ({ page }) => {
     // real-ip need config, otherwise it will show an error
     await addPluginDialog.getByRole('button', { name: 'Add' }).click();
     await expect(addPluginDialog).toBeVisible();
-    await expect(editorLoading).toBeHidden();
     await expect(
       addPluginDialog.getByText('Missing property "source"')
     ).toBeVisible();
 
     // clear the editor, will show JSON format is not valid
-    await uiClearEditor(page);
+    await uiClearMonacoEditor(page, pluginEditor);
     await expect(
       addPluginDialog.getByText('JSON format is not valid')
     ).toBeVisible();
@@ -175,15 +184,18 @@ test('should CRUD route with all fields', async ({ page }) => {
     ).toBeVisible();
 
     // add a valid config
-    await editor.fill('{"source": "X-Forwarded-For"}');
+    await uiFillMonacoEditor(
+      page,
+      pluginEditor,
+      '{"source": "X-Forwarded-For"}'
+    );
     await addPluginDialog.getByRole('button', { name: 'Add' }).click();
     await expect(addPluginDialog).toBeHidden();
 
     // check real-ip plugin in edit dialog
     const realIpPlugin = page.getByTestId('plugin-real-ip');
     await realIpPlugin.getByRole('button', { name: 'Edit' }).click();
     await expect(editPluginDialog).toBeVisible();
-    await expect(editorLoading).toBeHidden();
     await expect(editPluginDialog.getByText('X-Forwarded-For')).toBeVisible();
     // close
     await editPluginDialog.getByRole('button', { name: 'Save' }).click();
@@ -249,6 +261,10 @@ test('should CRUD route with all fields', async ({ page }) => {
     const status = page.getByRole('textbox', { name: 'Status', exact: true });
     await expect(status).toHaveValue('Disabled');
 
+    // Verify Vars field
+    await expect(varsSection.getByText('arg_name')).toBeVisible();
+    await expect(varsSection.getByText('json')).toBeVisible();
+
     // Verify Plugins
     await expect(page.getByText('basic-auth')).toBeHidden();
     await expect(page.getByText('real-ip')).toBeVisible();
@@ -279,6 +295,10 @@ test('should CRUD route with all fields', async ({ page }) => {
     // Update Priority
     await page.getByLabel('Priority', { exact: true }).first().fill('200');
 
+    // Update Vars field
+    const varsEditor = await uiGetMonacoEditor(page, varsSection);
+    await uiFillMonacoEditor(page, varsEditor, updatedVars);
+
     // Click the Save button to save changes
     const saveBtn = page.getByRole('button', { name: 'Save' });
     await saveBtn.click();
@@ -312,6 +332,10 @@ test('should CRUD route with all fields', async ({ page }) => {
       page.getByLabel('Priority', { exact: true }).first()
     ).toHaveValue('200');
 
+    // Verify updated Vars field
+    await expect(varsSection.getByText('arg_name')).toBeVisible();
+    await expect(varsSection.getByText('updated')).toBeVisible();
+
     // Return to list page and verify the route exists
     await routesPom.getRouteNavBtn(page).click();
     await routesPom.isIndexPage(page);

e2e/utils/ui/index.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import type { CommonPOM } from '@e2e/pom/type';
-import { type Monaco } from '@monaco-editor/react';
 import { expect, type Locator, type Page } from '@playwright/test';
 
 import type { FileRouteTypes } from '@/routeTree.gen';
@@ -64,10 +63,38 @@ export async function uiFillHTTPStatuses(
   }
 }
 
-export async function uiClearEditor(page: Page) {
-  await page.evaluate(() => {
-    (window as unknown as { monaco?: Monaco })?.monaco?.editor
-      ?.getEditors()[0]
-      ?.setValue('');
-  });
+export const uiClearMonacoEditor = async (page: Page, editor: Locator) => {
+  await editor.click();
+  await page.keyboard.press('ControlOrMeta+A');
+  await page.keyboard.press('Backspace');
+  await editor.blur();
+};
+
+export const uiGetMonacoEditor = async (
+  page: Page,
+  parent: Locator,
+  clear = true
+) => {
+  // Wait for Monaco editor to load
+  const editorLoading = parent.getByTestId('editor-loading');
+  await expect(editorLoading).toBeHidden();
+  const editor = parent.locator('.monaco-editor').first();
+  await expect(editor).toBeVisible({ timeout: 10000 });
+
+  if (clear) {
+    await uiClearMonacoEditor(page, editor);
+  }
+
+  return editor;
+};
+
+export const uiFillMonacoEditor = async (
+  page: Page,
+  editor: Locator,
+  value: string
+) => {
+  await editor.click();
+  await editor.getByRole('textbox').pressSequentially(value);
+  await editor.blur();
+  await page.waitForTimeout(800);
 };

src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { Drawer, Group, Title } from '@mantine/core';
-import { isEmpty } from 'rambdax';
+import { isEmpty, isNil } from 'rambdax';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -35,7 +35,7 @@ export type PluginEditorDrawerProps = Pick<PluginCardListProps, 'mode'> & {
 };
 
 const toConfigStr = (p: object): string => {
-  return !isEmpty(p) ? JSON.stringify(p, null, 2) : '{}';
+  return !isEmpty(p) && !isNil(p) ? JSON.stringify(p, null, 2) : '{}';
 };
 export const PluginEditorDrawer = (props: PluginEditorDrawerProps) => {
   const { opened, onSave, onClose, plugin, mode, schema } = props;
@@ -44,7 +44,7 @@ export const PluginEditorDrawer = (props: PluginEditorDrawerProps) => {
   const methods = useForm<{ config: string }>({
     criteriaMode: 'all',
     disabled: mode === 'view',
-    defaultValues: { config: toConfigStr(plugin) },
+    defaultValues: { config: toConfigStr(config) },
   });
   const handleClose = () => {
     onClose();

src/components/form-slice/FormItemPlugins/index.tsx

@@ -180,7 +180,7 @@ export const FormItemPlugins = <T extends FieldValues>(
           schema={toJS(pluginsOb.curPluginSchema)}
           opened={pluginsOb.editorOpened}
           onClose={pluginsOb.closeEditor}
-          plugin={pluginsOb.curPlugin}
+          plugin={toJS(pluginsOb.curPlugin)}
           onSave={pluginsOb.update}
         />
       </Drawer.Stack>

src/components/form-slice/FormPartRoute/index.tsx

@@ -18,6 +18,7 @@ import { Divider, InputWrapper } from '@mantine/core';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { FormItemEditor } from '@/components/form/Editor';
 import { FormItemNumberInput } from '@/components/form/NumberInput';
 import { FormItemSwitch } from '@/components/form/Switch';
 import { FormItemTagsInput } from '@/components/form/TagInput';
@@ -94,7 +95,7 @@ const FormSectionMatchRules = () => {
         name="remote_addrs"
         label={t('form.routes.remoteAddrs')}
       />
-      <FormItemTagsInput
+      <FormItemEditor
         control={control}
         name="vars"
         label={t('form.routes.vars')}

src/components/form-slice/FormPartRoute/schema.ts

@@ -14,14 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { z } from 'zod';
+import { z } from 'zod';
 
 import { APISIX } from '@/types/schema/apisix';
 
 export const RoutePostSchema = APISIX.Route.omit({
   id: true,
   create_time: true,
   update_time: true,
+}).extend({
+  // the FormItemEditor (monaco) is for editing text,
+  // and passing the original schema of `vars` for validation
+  // is not in line with this usage.
+  vars: z.string().optional(),
 });
 
 export type RoutePostType = z.infer<typeof RoutePostSchema>;
+
+export const RoutePutSchema = APISIX.Route.extend({
+  vars: z.string().optional(),
+});
+
+export type RoutePutType = z.infer<typeof RoutePutSchema>;

src/components/form-slice/FormPartRoute/util.ts

@@ -14,9 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { produce } from 'immer';
+
 import { produceRmUpstreamWhenHas } from '@/utils/form-producer';
 import { pipeProduce } from '@/utils/producer';
 
+import type { RoutePostType, RoutePutType } from './schema';
+
+export const produceVarsToForm = produce((draft: RoutePostType) => {
+  if (draft.vars && Array.isArray(draft.vars)) {
+    draft.vars = JSON.stringify(draft.vars);
+  }
+}) as (draft: RoutePostType) => RoutePutType;
+
+export const produceVarsToAPI = produce((draft: RoutePostType) => {
+  if (draft.vars && typeof draft.vars === 'string') {
+    draft.vars = JSON.parse(draft.vars);
+  }
+});
+
 export const produceRoute = pipeProduce(
-  produceRmUpstreamWhenHas('service_id', 'upstream_id')
+  produceRmUpstreamWhenHas('service_id', 'upstream_id'),
+  produceVarsToAPI
 );