feat: add global copy ID button to all resources

e2e/server/apisix_conf.yml

@@ -1,42 +1,22 @@
-#
-# 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.
-#
-
 apisix:
-  node_listen: 9080 # APISIX listening port
+  node_listen: 9080
   enable_ipv6: false
   proxy_mode: http&stream
   stream_proxy:
     tcp:
       - 9100
     udp:
       - 9200
-
 deployment:
   admin:
-    allow_admin: # https://nginx.org/en/docs/http/ngx_http_access_module.html#allow
-      - 0.0.0.0/0 # We need to restrict ip access rules for security. 0.0.0.0/0 is for test.
-
+    allow_admin:
+      - 0.0.0.0/0
     admin_key:
-      - name: "admin"
+      - name: admin
         key: edd1c9f034335f136f87ad84b625c8f1
-        role: admin # admin: manage all configuration data
-
+        role: admin
   etcd:
-    host: # it's possible to define multiple etcd hosts addresses of the same etcd cluster.
-      - "http://etcd:2379" # multiple etcd address
-    prefix: "/apisix" # apisix configurations prefix
-    timeout: 30 # 30 seconds
+    host:
+      - http://etcd:2379
+    prefix: /apisix
+    timeout: 30

e2e/tests/consumer_groups.list.spec.ts

@@ -69,7 +69,7 @@ test.describe('page and page_size should work correctly', () => {
       .getByRole('cell', { name: /test-consumer-group-/ })
       .all();
     const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
-    return consumerGroups.filter((d) => !ids.includes(d.id));
+    return consumerGroups.filter((d) => !ids.some(idText => idText?.includes(d.id)));
   };
 
   setupPaginationTests(test, {

e2e/tests/global_rules.list.spec.ts

@@ -114,7 +114,7 @@ test.describe('page and page_size should work correctly', () => {
       .getByRole('cell', { name: /global_rule_id_/ })
       .all();
     const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
-    return globalRules.filter((d) => !ids.includes(d.id));
+    return globalRules.filter((d) => !ids.some(idText => idText?.includes(d.id)));
   };
 
   setupPaginationTests(test, {

e2e/tests/protos.list.spec.ts

@@ -84,7 +84,7 @@ test.describe('page and page_size should work correctly', () => {
       .getByRole('cell', { name: /proto_id_/ })
       .all();
     const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
-    return protos.filter((d) => !ids.includes(d.id));
+    return protos.filter((d) => !ids.some(idText => idText?.includes(d.id)));
   };
 
   setupPaginationTests(test, {

e2e/tests/secrets.list.spec.ts

@@ -57,7 +57,7 @@ const putSecretReq = (req: typeof e2eReq, data: APISIXType['Secret']) => {
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
-  
+
   test.beforeAll(async () => {
     // Clean up existing secrets
     const existingSecrets = await e2eReq
@@ -88,7 +88,7 @@ test.describe('page and page_size should work correctly', () => {
       .getByRole('cell', { name: /secret_id_/ })
       .all();
     const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
-    return secrets.filter((d) => !ids.includes(d.id));
+    return secrets.filter((d) => !ids.some(idText => idText?.includes(d.id)));
   };
 
   setupPaginationTests(test, {

e2e/tests/stream_routes.list.spec.ts

@@ -85,7 +85,7 @@ test.describe('page and page_size should work correctly', () => {
       .getByRole('cell', { name: /stream_route_id_/ })
       .all();
     const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
-    return streamRoutes.filter((d) => !ids.includes(d.id));
+    return streamRoutes.filter((d) => !ids.some(idText => idText?.includes(d.id)));
   };
 
   setupPaginationTests(test, {

e2e/tests/stream_routes.show-disabled-error.spec.ts

@@ -33,6 +33,7 @@
 import { exec } from 'node:child_process';
 import { readFile, writeFile } from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
 
 import { streamRoutesPom } from '@e2e/pom/stream_routes';
@@ -51,7 +52,7 @@ type APISIXConf = {
 };
 
 const getE2EServerDir = () => {
-  const currentDir = new URL('.', import.meta.url).pathname;
+  const currentDir = fileURLToPath(new URL('.', import.meta.url));
   return path.join(currentDir, '../server');
 };
 

e2e/utils/common.ts

@@ -16,6 +16,7 @@
  */
 import { access, readFile } from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import { nanoid } from 'nanoid';
 import selfsigned from 'selfsigned';
@@ -25,7 +26,7 @@ type APISIXConf = {
   deployment: { admin: { admin_key: { key: string }[] } };
 };
 export const getAPISIXConf = async () => {
-  const currentDir = new URL('.', import.meta.url).pathname;
+  const currentDir = fileURLToPath(new URL('.', import.meta.url));
   const confPath = path.join(currentDir, '../server/apisix_conf.yml');
   const file = await readFile(confPath, 'utf-8');
   const res = parse(file) as APISIXConf;

e2e/utils/ui/index.ts

@@ -64,11 +64,24 @@ export async function uiFillHTTPStatuses(
   }
 }
 
-export const uiClearMonacoEditor = async (page: Page) => {
-  await page.evaluate(() => {
-    const editor = window.__monacoEditor__;
-    editor.getModel()?.setValue('');
-  });
+export const uiClearMonacoEditor = async (page: Page, editorLoc?: Locator) => {
+  const isSet = await page.evaluate(() => window.__monacoEditor__ !== undefined).catch(() => false);
+  if (isSet) {
+    await page.evaluate(() => {
+      const editor = window.__monacoEditor__;
+      editor?.getModel()?.setValue('');
+    });
+    return;
+  }
+
+  // Fallback if frontend is out of date (i.e. window.__monacoEditor__ is undefined)
+  const el = editorLoc || page.locator('.monaco-editor').last();
+  await el.click();
+  const isMac = process.platform === 'darwin';
+  const modifier = isMac ? 'Meta' : 'Control';
+  await page.keyboard.press(`${modifier}+a`);
+  await page.keyboard.press('Backspace');
+  await page.waitForTimeout(100);
 };
 
 export const uiGetMonacoEditor = async (
@@ -83,7 +96,7 @@ export const uiGetMonacoEditor = async (
   await expect(editor).toBeVisible({ timeout: 10000 });
 
   if (clear) {
-    await uiClearMonacoEditor(page);
+    await uiClearMonacoEditor(page, editor);
   }
 
   return editor;

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

@@ -14,7 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Button, Card,Group, Text } from '@mantine/core';
+import { Button, Card, Group, Text } from '@mantine/core';
+import { Typography as AntTypography } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 export type PluginCardProps = {
@@ -35,7 +36,15 @@ export const PluginCard = (props: PluginCardProps) => {
       <Card.Section withBorder inheritPadding py="xs">
         <Group justify="space-between">
           <Group>
-            <Text fw={500}>{name}</Text>
+            <AntTypography.Text
+              style={{ fontWeight: 500, margin: 0 }}
+              copyable={{
+                text: String(name),
+                tooltips: [t('copy'), t('copy_success')],
+              }}
+            >
+              {name}
+            </AntTypography.Text>
           </Group>
         </Group>
       </Card.Section>

src/components/form/Editor.tsx

@@ -145,9 +145,7 @@ export const FormItemEditor = <T extends FieldValues>(
           trigger(props.name);
         }}
         onMount={(editor) => {
-          if (process.env.NODE_ENV === 'test') {
-            window.__monacoEditor__ = editor;
-          }
+          window.__monacoEditor__ = editor;
         }}
         loading={
           <Skeleton

src/locales/de/common.json

@@ -364,5 +364,7 @@
   },
   "upstreams": {
     "singular": "Upstream"
-  }
-}
+  },
+  "copy": "Kopieren",
+  "copy_success": "Erfolgreich kopiert"
+}

src/locales/en/common.json

@@ -331,7 +331,6 @@
   "services": {
     "singular": "Service",
     "empty": "No services found. Click Add Service to create your first one."
-
   },
   "settings": {
     "adminKey": "Admin Key",
@@ -366,5 +365,7 @@
   },
   "upstreams": {
     "singular": "Upstream"
-  }
-}
+  },
+  "copy_success": "Copy success",
+  "copy": "Copy"
+}

src/locales/es/common.json

@@ -364,5 +364,7 @@
   },
   "upstreams": {
     "singular": "Upstream"
-  }
-}
+  },
+  "copy": "Copiar",
+  "copy_success": "Copiado exitosamente"
+}

src/locales/tr/common.json

@@ -364,5 +364,7 @@
   },
   "upstreams": {
     "singular": "Upstream"
-  }
-}
+  },
+  "copy": "Kopyala",
+  "copy_success": "Başarıyla kopyalandı"
+}

src/locales/zh/common.json

@@ -364,5 +364,7 @@
   },
   "upstreams": {
     "singular": "上游"
-  }
-}
+  },
+  "copy": "复制",
+  "copy_success": "复制成功"
+}