frontend: Add create namespace ui #1727

vyncent-t · 2024-02-19T20:59:35Z

Add Create Namespace Feature to UI

Solves issue #1705

Description

This PR introduces a new feature to the UI that allows users to create namespaces directly from the namespaces list view. A 'Create' button (represented by a + sign) has been added next to the title of the namespaces list view. Upon clicking this button, users are presented with a dialog box where they can input the name for the new namespace. Submitting this by clicking the 'Create' button will create the new namespace.

Changes

Added a 'Create' button (+ sign) next to the title of the namespaces list view.
Implemented a dialog box that prompts the user to enter the name of the new namespace.
Added functionality to create a new namespace upon clicking the 'Create' button in the dialog box.

Verification

Tested the 'Create' button to ensure it triggers the dialog box as expected.
Verified the dialog box accepts input and allows for the creation of a new namespace.
Confirmed that the new namespace appears in the namespaces list view upon creation.

Screenshots

vyncent-t · 2024-02-19T21:15:48Z

push to fix build failures and translations

frontend/src/i18n/locales/de/translation.json

frontend/src/i18n/locales/es/translation.json

frontend/src/i18n/locales/fr/translation.json

frontend/src/i18n/locales/pt/translation.json

knrt10

Some suggestions for translations

joaquimrocha

Thanks Vincent.
Can you move the dialog/button into its own module? So it's more isolated and also in case we want to show it in a different view.

For consistency with the rest of the UX, I think the create button should trigger a cancellable action (like the Editor's apply / Delete / Scale / etc.).

joaquimrocha

Req changes.

vyncent-t · 2024-02-27T18:01:55Z

last push removes notes

vyncent-t · 2024-02-27T18:11:33Z

last push

moved create namespace button and dialog to module
make create namespace process able to quit

frontend/src/components/namespace/CreateNamespaceDialog.tsx

vyncent-t · 2024-02-28T18:43:46Z

last push is still needing some fixes, when creating a namespace item it is almost instant at this current implementation.

maybe artificially adding a timer would allow it to be slow enough to react to a quit action?

frontend/src/components/namespace/CreateNamespaceButton.tsx

frontend/src/i18n/locales/de/translation.json

joaquimrocha

Left a few more comments.

frontend/src/components/namespace/CreateNamespaceButton.tsx

frontend/src/components/namespace/List.tsx

vyncent-t · 2024-04-19T15:56:26Z

rebased and changed Namespace to namespace

vyncent-t · 2024-05-20T19:16:52Z

Fixed some changes and should be ready for review again

frontend/src/components/namespace/CreateNamespaceButton.tsx

Signed-off-by: Vincent T <[email protected]>

vyncent-t · 2024-05-21T21:08:26Z

Added name input filter

joaquimrocha

Left a few notes. Please take a look.

joaquimrocha · 2024-05-22T20:07:49Z

frontend/src/components/namespace/CreateNamespaceButton.tsx

+
+ function createNewNamespace() {
+ function validateNamespaceName(namespaceName: string) {
+ const namespaceRegex = /^[a-z]([-a-z0-9]*[a-z0-9])?$/;


We have a function for this at SettingsCluster.tsx. We should add this as a static method to the Namespace class so we can reuse it when needed.

joaquimrocha · 2024-05-22T20:08:41Z

frontend/src/components/namespace/CreateNamespaceButton.tsx

+ // Check if the namespace name is too long
+ if (namespaceName.length > 63) {
+ alert(t('translation|Invalid namespace name: name must be 63 characters or shorter'));
+ return false;
+ }
+
+ // Check if the namespace name starts with a alphanumeric character
+ const startsAlphanumeric = /^[a-z0-9]/.test(namespaceName);
+ if (!startsAlphanumeric) {
+ alert(
+ t('translation|Invalid namespace name: name must start with an alphanumeric character')
+ );
+ return false;
+ }
+
+ // Check if the namespace name ends with an alphanumeric character
+ const endsAlphanumeric = /[a-z0-9]$/.test(namespaceName);
+ if (!endsAlphanumeric) {
+ alert(
+ t('translation|Invalid namespace name: name must end with an alphanumeric character')
+ );
+ return false;
+ }
+
+ // Check if the namespace name contains only lowercase letters, numbers, or hyphens
+ const validChars = namespaceRegex.test(namespaceName);
+ if (!validChars) {
+ alert(
+ t(
+ 'translation|Invalid namespace name: name must consist of lower case alphanumeric characters or -'
+ )
+ );
+ return false;
+ }
+
+ return true;
+ }


See my comment about the function we have in SettingsCluster.tsx.

joaquimrocha · 2024-05-22T20:09:11Z

frontend/src/components/namespace/CreateNamespaceButton.tsx

+ async function namespaceRequest() {
+ try {
+ const response = await post('/api/v1/namespaces', newNamespaceData, true, {
+ cluster: `${cluster}`,


You shouldn't use a string literal here (because if cluster is null, it will result in a cluster called "null"). You can use getCluster() || '' when you declare the var up there.

joaquimrocha · 2024-05-22T20:11:23Z

frontend/src/components/namespace/CreateNamespaceButton.tsx

+ const response = await post('/api/v1/namespaces', newNamespaceData, true, {
+ cluster: `${cluster}`,
+ });
+ return response;


You can return without having to declare a var in between (return await post...)

joaquimrocha · 2024-05-22T20:15:04Z

frontend/src/i18n/locales/de/translation.json

+ "Invalid namespace name: name must start with an alphanumeric character": "",
+ "Invalid namespace name: name must end with an alphanumeric character": "",
+ "Invalid namespace name: name must consist of lower case alphanumeric characters or -": "",


Can you reuse the string we already have for SettingsCluster? So we don't have to translate these? (We are missing the 63 chars one, so maybe keep that or adapt the new one)

joaquimrocha · 2024-05-22T20:16:57Z

frontend/src/i18n/locales/fr/translation.json

+ "Creating namespace {{ name }}…": "",
+ "Cancelled creation of {{ name }}.": "",
+ "Created namespace {{ name }}.": "",
+ "Error creating namespace {{ name }}.": "",
+ "Create Namespace": "",


I wonder if in the interest of not having to translate 5 strings per resource, we can reuse the string "Failed to create {{ kind }} {{ name }}." and similar.

vyncent-t force-pushed the namespace-creation-ui branch from 4840332 to 9304a84 Compare February 19, 2024 21:15

vyncent-t added enhancement New feature or request frontend Issues related to the frontend labels Feb 19, 2024

vyncent-t self-assigned this Feb 19, 2024

vyncent-t marked this pull request as ready for review February 19, 2024 21:16

vyncent-t requested a review from joaquimrocha February 19, 2024 21:16

knrt10 reviewed Feb 20, 2024

View reviewed changes

frontend/src/i18n/locales/de/translation.json Show resolved Hide resolved

knrt10 reviewed Feb 20, 2024

View reviewed changes

frontend/src/i18n/locales/es/translation.json Show resolved Hide resolved

knrt10 reviewed Feb 20, 2024

View reviewed changes

frontend/src/i18n/locales/fr/translation.json Show resolved Hide resolved

knrt10 reviewed Feb 20, 2024

View reviewed changes

frontend/src/i18n/locales/pt/translation.json Show resolved Hide resolved

knrt10 reviewed Feb 20, 2024

View reviewed changes

vyncent-t marked this pull request as draft February 20, 2024 15:33

vyncent-t requested a review from illume February 20, 2024 15:58

vyncent-t force-pushed the namespace-creation-ui branch 2 times, most recently from 4103f4e to c199d1c Compare February 21, 2024 16:32

vyncent-t marked this pull request as ready for review February 21, 2024 16:52

joaquimrocha reviewed Feb 26, 2024

View reviewed changes

joaquimrocha requested changes Feb 26, 2024

View reviewed changes

vyncent-t force-pushed the namespace-creation-ui branch 2 times, most recently from d626eb9 to 564b556 Compare February 27, 2024 18:01

joaquimrocha requested changes Feb 28, 2024

View reviewed changes

frontend/src/components/namespace/CreateNamespaceDialog.tsx Outdated Show resolved Hide resolved

frontend/src/components/namespace/CreateNamespaceDialog.tsx Outdated Show resolved Hide resolved

vyncent-t force-pushed the namespace-creation-ui branch from 564b556 to 763ae21 Compare February 28, 2024 18:41

joaquimrocha requested changes Mar 1, 2024

View reviewed changes

vyncent-t marked this pull request as draft March 1, 2024 13:48

vyncent-t force-pushed the namespace-creation-ui branch 2 times, most recently from 486fc30 to 3e9fd01 Compare March 1, 2024 16:35

illume modified the milestones: v0.23.0, v0.24.0 Mar 1, 2024

joaquimrocha requested changes Apr 18, 2024

View reviewed changes

vyncent-t force-pushed the namespace-creation-ui branch from 3e9fd01 to 54c7b29 Compare April 19, 2024 15:55

joaquimrocha marked this pull request as ready for review May 20, 2024 14:44

vyncent-t force-pushed the namespace-creation-ui branch 2 times, most recently from b48eee9 to 874eb6a Compare May 20, 2024 19:14

vyncent-t requested a review from joaquimrocha May 20, 2024 20:28

sniok reviewed May 20, 2024

View reviewed changes

frontend/src/components/namespace/CreateNamespaceButton.tsx Show resolved Hide resolved

vyncent-t force-pushed the namespace-creation-ui branch from 874eb6a to 58bbf86 Compare May 21, 2024 21:02

vyncent-t requested a review from sniok May 21, 2024 21:02

frontend: Add create namespace ui

526527e

Signed-off-by: Vincent T <[email protected]>

vyncent-t force-pushed the namespace-creation-ui branch from 58bbf86 to 526527e Compare May 21, 2024 21:07

joaquimrocha requested changes May 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

frontend: Add create namespace ui #1727

frontend: Add create namespace ui #1727

vyncent-t commented Feb 19, 2024 •

edited

vyncent-t commented Feb 19, 2024

knrt10 left a comment

joaquimrocha left a comment

joaquimrocha left a comment

vyncent-t commented Feb 27, 2024

vyncent-t commented Feb 27, 2024 •

edited by illume

vyncent-t commented Feb 28, 2024

joaquimrocha left a comment

vyncent-t commented Apr 19, 2024

vyncent-t commented May 20, 2024

vyncent-t commented May 21, 2024

joaquimrocha left a comment

joaquimrocha May 22, 2024

joaquimrocha May 22, 2024

joaquimrocha May 22, 2024

joaquimrocha May 22, 2024

joaquimrocha May 22, 2024

joaquimrocha May 22, 2024

frontend: Add create namespace ui #1727

Are you sure you want to change the base?

frontend: Add create namespace ui #1727

Conversation

vyncent-t commented Feb 19, 2024 • edited

Add Create Namespace Feature to UI

Description

Changes

Verification

Screenshots

vyncent-t commented Feb 19, 2024

knrt10 left a comment

Choose a reason for hiding this comment

joaquimrocha left a comment

Choose a reason for hiding this comment

joaquimrocha left a comment

Choose a reason for hiding this comment

vyncent-t commented Feb 27, 2024

vyncent-t commented Feb 27, 2024 • edited by illume

vyncent-t commented Feb 28, 2024

joaquimrocha left a comment

Choose a reason for hiding this comment

vyncent-t commented Apr 19, 2024

vyncent-t commented May 20, 2024

vyncent-t commented May 21, 2024

joaquimrocha left a comment

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

joaquimrocha May 22, 2024

Choose a reason for hiding this comment

vyncent-t commented Feb 19, 2024 •

edited

vyncent-t commented Feb 27, 2024 •

edited by illume