List invitations

[ccremer]

Summary

First part of #460

• Create menu item "invitations"
• Lists invitations, provided they are allowed to.
• Detail view such as /invitations/<uuid> also works, but it's not used/useful yet.

If an invitation has no condition, it will be marked Pending. If there are conditions that are True, their messages get rendered green, and red otherwise.

The granted entities will be rendered in a table, with clickable links to view/edit masks.

Checklist

• [x] Categorize the PR by setting a good title and adding one of the labels: bug, enhancement, documentation, change, breaking, as they show up in the changelog
• [x] Update tests.
• [x] Link this PR to related issues.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	944b9f88ed40d4e61bfd6fa0bd381ed624bea7af
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	ec6704989a8764fb564a99a56d28985335cb0e83
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	944b9f88ed40d4e61bfd6fa0bd381ed624bea7af
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[ccremer]

Current UI screenshot:

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	312f32d3834db2ab3ca8a0efeb3a35214c69713f
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	b5db36b09fc9cc52e2448c5de5c3da363331c411
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	37278e59f36d64a03533dd4c9d5cc44db39daad9
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	fed0d7499f89592404f72b9ccd1659436293cc79
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	661ce06e6f9ea572d0f5aa2a68d113d91aed76e8
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	d800997d610f67230059f4925245974cdf1a9f11
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[ccremer]

How is the date format controlled? Having the weekday displayed probably does not add value. But using the US 12 format can be confusing.

I've configured LLLL from https://day.js.org/docs/en/display/format#localized-formats. I can test another configuration without weekday and the 12h clock.

What was your thinking regarding the placement of teams? I am a bit vary if this is the right placement or if it would be better placed on its own row. 🤷🏼 .

I figured that since teams also belong to organizations, they can/should be placed on the same row. Otherwise, there can be multiple rows mentioning the same organization, once with the roles and once with the teams. For example:	Name	Viewer	Admin	Teams
example-org	yes	yes
example-org			dev, ops-team
another-org	yes
another-org			audit, tester

But this kinda looked strange to me. Adding their separate table also doesn't quite strike me:	Name	Viewer	Admin
example-org	yes	yes
another-org	yes

Name	Teams
example-org	dev, ops-team
another-org	audit, tester

[ccremer]

updated date format:

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	e721231299e0380851720f34c9d9c750e97c7242
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[github-actions[bot]]

🚀 Preview deployment active

App URL	https://portal-pr-509-appuio-control-api-preview.apps.cloudscale-lpg-2.appuio.cloud
Revision	800720bf14261d774ecd692fb30d329aec6907a3
Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443

To uninstall this deployment, close or merge this PR.

[ccremer]

How hard would it be, to use the users browser locale to format the date?

We would not recommend this. We have experienced bug reports in the past related to incorrect date or currency formatting, when in fact in most cases the users haven't properly configured the browser language. And also, the language of such formatting would also switch to the configured language (e.g. German), and that would look strange considering the rest of the App is still English and not translated.

In discussion with @gerbermichi , I've now used Angular's localization and 'medium' date format. https://angular.io/api/common/DatePipe#usage-notes

The language is set to en-CH in the build. https://github.com/appuio/cloud-portal/blob/d89d9ce9b26b2571f90c03620ca0f0942bac6b46/angular.json#L53

Which yields the following format: 15 Apr 2023, 18:52:27. Is this acceptable?

[ccremer]

I'm going ahead and merge this PR, since it contains improvements that I can use in other PRs. We can handle the date formatting topic in another issue/PR if need be.

[github-actions[bot]]

✔️ Preview deployment uninstalled

Helm release	appuio-control-api-preview/portal-pr-509
Cluster	https://api.cloudscale-lpg-2.appuio.cloud:6443