bug: route vars cannot be displayed or edited using new admin ui / dashboard

[Miladiir]

Current Behavior

Tried to put admin ui behind sso by using regular expression to match route. As far as I understand, i need to create a route for root with vars matching the apisix admin ui and admin api paths.

Minimal example that create the bug:
route: { "uri": "/*", "vars": [ [ "uri", "~~", "^/(ui|apisix).*$" ] ] }

I was not able to modify or create a new route that would accept the vars using the new dashboard / admin ui. So, i turned to the admin api and created a new route.

Now, trying to view the route in the new admin ui / dashboard ui, i receive a javascript error: a.trim is not a function
Seems like handling vars, atleast with medium complexity, is not working either way with the admin ui. Neither creating or viewing seems to work.

Seems like you guys are handling this field in the ui completely wrong :( The rest of the new ui is working much better than the old sone though. Great job!

Expected Behavior

Able to create, edit and view routes with vars.

Error Logs

No response

Steps to Reproduce

1. Try to input any vars into a route: Route is not able to be submitted.

2. Try to open a route with any vars: The route cannot be opened due to client side javascript error. Trying to call string method on an array.

Environment

• APISIX version (run apisix version): 3.13

[Baoyuantop]

Thanks for the report, I will check this out.

[Baoyuantop]

After verification, this problem does exist. I cannot use vars when creating a route using the UI. I used the admin api to create a route configuration as follows:

{
  "uri": "/*",
  "upstream": {
    "nodes": {
      "httpbin.org:80": 1
    }
  },
  "vars": [
    [
      "uri",
      "~~",
      "^/(ui|apisix).*$"
    ]
  ]
}

And then the page crashed when I entered the route details in the UI.

[Baoyuantop]

This is a dashboard issue. I will transfer this issue.

[x-etienne]

I'm sorry but with apisix 3.14 continues not working

[MoritzArena]

I'm sorry but with apisix 3.14 continues not working

This issue surly still not working with 3.14, configuration below:

{
  "name": "dify-web",
  "uri": "/*",
  "hosts": [
    "127.0.0.1",
    "localhost"
  ],
  "methods": [
    "GET",
    "HEAD",
    "OPTIONS"
  ],
  "enable_websocket": true,
  "priority": 0,
  "vars": [
    [
      "server_port",
      "==",
      3000
    ]
  ],
  "upstream": {
    "scheme": "http",
    "type": "roundrobin",
    "pass_host": "pass",
    "name": "dify-web-up",
    "nodes": [
      {
        "host": "dify-web",
        "port": 3000,
        "weight": 1
      }
    ],
    "keepalive_pool": {
      "size": 30,
      "idle_timeout": 600,
      "requests": 600
    },
    "tls": {
      "verify": false
    }
  }
}

got issue below in frontend:

a.trim is not a function

PTAL