[Style guide] Flexbox mockup of Settings > Registries screen

[mairin]

This is part of epic #4289 ([Design] Style Guide)

We need a penpot flexbox mockup of the Settings > Registries screen. Non-flex mockup components for the registries screen are in the "Modal form-1" page of the Main Design File.

Here is a screenshot of the screen:

[ekidneyrh]

These can be found in the penpot file here: https://design.penpot.app/#/workspace/82e31d90-3829-8139-8002-cb67c32e72ca/8ec95363-4e2c-80a4-8002-cb67c874d0be?page-id=845b2be9-256a-8073-8002-cb7680a37cf0

Board name is: https://github.com/containers/podman-desktop/issues/4294 Settings > Registries

[benoitf]

hello, it seems the current implementation differs from the mockup, there is a kebab menu with some actions, etc

here I just see Configure on all the lines but I think it's missing the state where something has been added

[deboer-tim]

Also, what happens when you click on Add? Currently it creates a temporary row at the bottom of the table, but maybe should be a form/dialog to be consistent with e.g. creating a volume?

[ekidneyrh]

Looked at this in the UX meeting - reopening to add different states and play around with the inline fields.

[ekidneyrh]

Okay, so I redid this. I moved the login action to a separate pop-up dialog. By doing this, we can get rid of the username and password columns from the table. We can also make those rows smaller and have two registries per row.

Added icons to the rows instead of the purple primary button to match the table layout. I have the config as a cog, and then I was not sure if we are able to delete registries from here, but if so there's the option of adding the trash can.

Registry screen:

Pop-up:

[deboer-tim]

The built-in registries like Quay have names/urls/icons that you can't change (and if you add a registry yourself you can't name or give it an icon). It's not clear what the Edit dialog for these would look like - maybe icon/name are in the title and url input is disabled?

Also, Login can fail. Currently the error is added in-place and the user can't make the change. Maybe we should leave space under user/password for an error so the dialog doesn't expand in this case?

On the implementation side we may need to break this up, e.g. creating the add/edit dialog and then switching to tiles. Once we've clarified the comments above I think we can open an issue for implementation/prioritization and close this.

[ekidneyrh]

The built-in registries like Quay have names/urls/icons that you can't change (and if you add a registry yourself you can't name or give it an icon). It's not clear what the Edit dialog for these would look like - maybe icon/name are in the title and url input is disabled?

Yeah, having those fields disabled would work. If you could, would you mind sending screenshots of what currently is the screen when configure is pressed, and you're logged in? I'd be able to work off that then and suggest changes.

But as far as the ADD dialog goes, would the above mockup work for that? And then I can make another mockup dialog for the EDIT.

Also, Login can fail. Currently the error is added in-place and the user can't make the change. Maybe we should leave space under user/password for an error so the dialog doesn't expand in this case?

Yes having a space underneath dedicated for the error message would work. That's the best way to do it, I think.

On the implementation side we may need to break this up, e.g. creating the add/edit dialog and then switching to tiles. Once we've clarified the comments above I think we can open an issue for implementation/prioritization and close this.

So it would be an issue for:

1. Add dialog
2. Edit dialog
3. Changing table to tiles

[ekidneyrh]

Discussed this on the UX call last Thursday 2024-07-04.

When you log in, it goes back to the previous state with the addition of displaying your username in the column. If there’s an error, the row will expand to fit the error message under the input field.

Avoid displaying the different locations as cards to keep consistent with the rest of the application. Also keep the username column to indicate that the user is logged in.

We could add in a status to allow the user to know they are still connected to the registry.

[ekidneyrh]

Here's updated mock-ups based on the feedback:

Back to rows, so it is consistent with how we display items on tables. Have just the username displayed when logged in, having the password dots seems redundant. Adding in a connect status label, the same as those used on the dashboard at the moment, just changed to say 'CONNECTED' or 'DISCONNECTED'. Only have them appear when there are credentials saved.

The pop-up to add a registry have a red error message if the credentials are incorrect. I'd recommend having a space underneath dedicated for the error message, whether it's displayed or not so that the dialog box doesn't change in size when the error is present.

[odockal]

This will require to redo the e2e tests.

[deboer-tim]

+1 to overall design, cleaner and simpler. A few comments:

• Not 100% sure if connected/disconnected is right since we only validate once, maybe just 'verified' or something.
• Should we just use the table component here? Checkbox column is already optional. Not clear if there should be a header row here but that could easily be optional too.
• The error can go inline with the Cancel/Login buttons to avoid a newline (we did that for the Feedback dialog so any dialog can use it now).
• It would be good to see what editing one of the preconfigured registries like Quay looks like, since they have a name/icon/url that is fixed.

[ekidneyrh]

+1 to overall design, cleaner and simpler. A few comments:

* Not 100% sure if connected/disconnected is right since we only validate once, maybe just 'verified' or something.

On the UX call it was discussed validating more often to see if the credentials were still working and tell the user when they need to be updates, e.g. through the 'disconnected' label. Is this something that can be implemented at some stage and maybe have the verified as a placeholder till then?

* Should we just use the table component here? Checkbox column is already optional. Not clear if there should be a header row here but that could easily be optional too.

We could! For the headers something similar to whats already there like: registry location, username, status, actions.

* The error can go inline with the Cancel/Login buttons to avoid a newline (we did that for the Feedback dialog so any dialog can use it now).

I originally though f just having the box the same height regardless of the error message or not but f that makes it easier to implement then +1

* It would be good to see what editing one of the preconfigured registries like Quay looks like, since they have a name/icon/url that is fixed.

The cog is in place for the configure button, so I would assume it's just to update credentials if necessary.

[deboer-tim]

👍🏼 on the other responses.

* It would be good to see what editing one of the preconfigured registries like Quay looks like, since they have a name/icon/url that is fixed.

The cog is in place for the configure button, so I would assume it's just to update credentials if necessary.

Yes, I just meant the header of the dialog would look different in this case, e.g. maybe the title would be 'Edit Red Hat Quay', and the URL field would be readonly?

[ekidneyrh]

Yes, I just meant the header of the dialog would look different in this case, e.g. maybe the title would be 'Edit Red Hat Quay', and the URL field would be readonly?

Apologies, I interpreted your reply wrong!

Yes to both of those suggestions :)

[ekidneyrh]

Opened https://github.com/containers/podman-desktop/issues/8103 to implement new mock-ups :) Closing as complete