Admin UI: cannot delete field of new table - gives an error

[Gys]

Admin UI: cannot delete field of new table - gives an error

[ganigeorgiev]

It is working correctly - Base type collections must have at least one schema field. There should be also an error tooltip next to the "Fields" tab:

[Gys]

Thank you for the quick reply and explanation!!!

However, I do not see that error tooltip?! Not in Firefox (my default) and not in Safari?

Also: the UI hangs if I get the error that I described. Ideally pb could test if there is only one field left and prevent the error (and hanging) from happening ;)

[ganigeorgiev]

Again, it works correctly for me. Just tested it with Firefox 124:

Also: the UI hangs

It doesn't hang for me. Or at least specify what do you mean by this.

[ganigeorgiev]

If by "hangs" you mean the disabled state of the field - this is just the style we use to show that the current field is marked for deletion. You can click on the yellow Restore button to revert the operation.

[Gys]

Very strange...

By hanging I mean I can move the cursor and click anywhere, but there is no response. For example I cannot close the green message at the bottom and I cannot close the right side window. Also notice the 'save' button bottom right shows a spinning wheel instead. Plus I do not see the red tooltip - should that be at this moment?

I checked again, this is Firefox 124.0.

The only way to get out of this page is by reloading.

[ganigeorgiev]

I'm not able to reproduce it.
You could check if there is a JS error message in the browser console. It is possible to be caused also by a browser plugin, I'm not sure.

[ganigeorgiev]

Additionally, if you have custom Go or JS hooks try to temporary disable them.

[Gys]

Good idea to check the js console.

The moment that I click to go ahead and really remove the (one) field, this error pops up:

17:12:21.526 Uncaught (in promise) TypeError: L.name is undefined
s http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
update http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
T0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
promise callback*Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
U7 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:157
l http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
s http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
wa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:13
R http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
promise callback*R http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
de http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
lt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
lt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
_ http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
y http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
J http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:7
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
p http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
T0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
promise callback*Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
C http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
L http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
G http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
J http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:7
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
p http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
T0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
promise callback*Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
x5 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
l http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
Zt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:13
I http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
C http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
N http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:116
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
(Async: promise callback)
Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
U7 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:157
l http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
s http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
wa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:13
R http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
(Async: promise callback)
R http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
de http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
lt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
forEach self-hosted:203
lt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
_ http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
y http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
(Async: EventListener.handleEvent)
J http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:7
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
p http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
T0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
(Async: promise callback)
Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
C http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
InterpretGeneratorResume self-hosted:1465
AsyncFunctionNext self-hosted:852
(Async: async)
L http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
G http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
(Async: EventListener.handleEvent)
J http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:7
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
m http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
p http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:42
T0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
aa http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
(Async: promise callback)
Ng http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
D0 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
ctx http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
x5 http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
l http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:10
Zt http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:13
I http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
C http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:92
N http://127.0.0.1:8090/_/assets/index-DNY9pI36.js:116

[Gys]

And something else: I have some Go hooks. I just now disabled all of them and indeed then everything works! So it is something with the hooks. I have to check which one.

[Gys]

Found the problem. I added this hook and it seems to block something. I added this to show user friendly errors instead of a json:

// show friendly page on errors
app.OnBeforeApiError().Add(func(e *core.ApiErrorEvent) error {
	tmpl, err := template.ParseFS(app.fs, "error.html")
	if err != nil {
		return hook.StopPropagation
	}
	buf := &bytes.Buffer{}
	err = tmpl.Execute(buf, map[string]interface{}{"message": e.Error})
	if err != nil {
		return hook.StopPropagation
	}
	return e.HttpContext.HTML(http.StatusOK, buf.String())
})

[Gys]

Is there a way to detect if the user is currently in the admin UI? So I can skip this handling in that case.

[ganigeorgiev]

You can retrieve the auth context from the e.HttpContext (usually named c in the routing examples), something like:

// see also https://pocketbase.io/docs/go-routing/#retrieving-the-current-auth-state
admin, _ := e.HttpContext.Get(apis.ContextAdminKey).(*models.Admin)
if admin != nil {
    return nil
}

But in general I'd recommend to not change globally all API errors as this could also break the SDKs because they work only with JSON responses.

[ganigeorgiev]

I also forgot to mention that the above doesn't guarantee that the request is sent from the Admin UI (we currently don't have such marker, but I'll consider it with the refactoring), only that it is performed by an authenticated admin.

[Gys]

Yes I know how to determine a user or admin. Would indeed be nice to know the user/admin is currently in the admin UI.

But in general I'd recommend to not change globally all API errors as this could also break the SDKs because they work only with JSON responses.

It seemed the only way to show friendly errors to a user? For example to show a friendly 'page not found'. Is there another way? FYI: I use pb as a framework and do not use any frontend js solutions.

[ganigeorgiev]

If you are not using the builtin web APIs, one workaround could be to skip the error handler for all regular /api/* paths:

if strings.HasPrefix(e.HttpContext.Path(), "/api/") {
	return nil // api path
}
...

[Gys]

I use the web APIs a lot 😅

But I found this workaround:

	if strings.HasSuffix(e.HttpContext.Request().Referer(), "/_/") {
		return nil // user is in admin UI
	}