frontend: Add create namespace ui

Signed-off-by: Vincent T <vtaylor@microsoft.com>

frontend/src/components/namespace/CreateNamespaceButton.tsx

@@ -0,0 +1,161 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from '@mui/material';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { getCluster } from '../../lib/cluster';
+import { post } from '../../lib/k8s/apiProxy';
+import Namespace from '../../lib/k8s/namespace';
+import { clusterAction } from '../../redux/clusterActionSlice';
+import { EventStatus, HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
+import { ActionButton, AuthVisible } from '../common';
+
+export function CreateNamespaceButton() {
+  const { t } = useTranslation(['glossary', 'translation']);
+  const [namespaceName, setNamespaceName] = useState('');
+  const [namespaceDialogOpen, setNamespaceDialogOpen] = useState(false);
+  const dispatchCreateEvent = useEventCallback(HeadlampEventType.CREATE_RESOURCE);
+  const dispatch = useDispatch();
+
+  function createNewNamespace() {
+    function validateNamespaceName(namespaceName: string) {
+      const namespaceRegex = /^[a-z]([-a-z0-9]*[a-z0-9])?$/;
+
+      // 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 lowercase letter
+      const startsLowercase = /^[a-z]/.test(namespaceName);
+      if (!startsLowercase) {
+        alert(t('translation|Invalid namespace name: name must start with a lowercase letter'));
+        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;
+    }
+
+    if (!validateNamespaceName(namespaceName)) {
+      return;
+    }
+
+    const cluster = getCluster();
+    const newNamespaceData = {
+      apiVersion: 'v1',
+      kind: 'Namespace',
+      metadata: {
+        name: namespaceName,
+      },
+    };
+    const newNamespaceName = newNamespaceData.metadata.name;
+
+    async function namespaceRequest() {
+      try {
+        const response = await post('/api/v1/namespaces', newNamespaceData, true, {
+          cluster: `${cluster}`,
+        });
+        return response;
+      } catch (error) {
+        console.error('Error creating namespace', error);
+        throw error;
+      }
+    }
+
+    setNamespaceDialogOpen(false);
+    dispatch(
+      clusterAction(() => namespaceRequest(), {
+        startMessage: t('translation|Creating namespace {{  name  }}…', { name: newNamespaceName }),
+        cancelledMessage: t('translation|Cancelled creation of {{  name  }}.', {
+          name: newNamespaceName,
+        }),
+        successMessage: t('translation|Created namespace {{  name  }}.', {
+          name: newNamespaceName,
+        }),
+        errorMessage: t('translation|Error creating namespace {{  name  }}.', {
+          name: newNamespaceName,
+        }),
+        cancelCallback: () => {
+          setNamespaceDialogOpen(true);
+        },
+      })
+    );
+  }
+
+  return (
+    <AuthVisible item={Namespace} authVerb="create">
+      <ActionButton
+        color="primary"
+        description={t('translation|Create')}
+        icon={'mdi:plus-circle'}
+        onClick={() => {
+          setNamespaceDialogOpen(true);
+        }}
+      />
+
+      <Dialog open={namespaceDialogOpen} onClose={() => setNamespaceDialogOpen(false)}>
+        <DialogTitle>{t('translation|Create Namespace')}</DialogTitle>
+        <DialogContent>
+          <Box component="form" style={{ width: '20vw', maxWidth: '20vw' }}>
+            <TextField
+              margin="dense"
+              id="name"
+              label={t('translation|Name')}
+              type="text"
+              fullWidth
+              value={namespaceName}
+              onChange={event => setNamespaceName(event.target.value)}
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              setNamespaceDialogOpen(false);
+            }}
+          >
+            {t('translation|Cancel')}
+          </Button>
+          <Button
+            onClick={() => {
+              createNewNamespace();
+              dispatchCreateEvent({
+                status: EventStatus.CONFIRMED,
+              });
+            }}
+          >
+            {t('translation|Create')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </AuthVisible>
+  );
+}

frontend/src/components/namespace/List.tsx

@@ -10,6 +10,7 @@ import {
   ResourceTableFromResourceClassProps,
   ResourceTableProps,
 } from '../common/Resource/ResourceTable';
+import { CreateNamespaceButton } from './CreateNamespaceButton';
 
 export default function NamespacesList() {
   const { t } = useTranslation(['glossary', 'translation']);
@@ -88,12 +89,15 @@ export default function NamespacesList() {
   }, [allowedNamespaces]);
 
   return (
-    <ResourceListView
-      title={t('Namespaces')}
-      headerProps={{
-        noNamespaceFilter: true,
-      }}
-      {...resourceTableProps}
-    />
+    <>
+      <ResourceListView
+        title={t('Namespaces')}
+        headerProps={{
+          titleSideActions: [<CreateNamespaceButton />],
+          noNamespaceFilter: true,
+        }}
+        {...resourceTableProps}
+      />
+    </>
   );
 }

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

@@ -315,6 +315,15 @@
   "Default Request": "Standardanforderung",
   "Max": "Max",
   "Min": "Min",
+  "Invalid namespace name: name must be 63 characters or shorter": "",
+  "Invalid namespace name: name must start with a lowercase letter": "",
+  "Invalid namespace name: name must end with an alphanumeric character": "",
+  "Invalid namespace name: name must consist of lower case alphanumeric characters or -": "",
+  "Creating namespace {{  name  }}…": "",
+  "Cancelled creation of {{  name  }}.": "",
+  "Created namespace {{  name  }}.": "",
+  "Error creating namespace {{  name  }}.": "",
+  "Create Namespace": "",
   "To": "An",
   "used": "benutzt",
   "Scheduling Disabled": "Planung deaktiviert",

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

@@ -315,6 +315,15 @@
   "Default Request": "Default Request",
   "Max": "Max",
   "Min": "Min",
+  "Invalid namespace name: name must be 63 characters or shorter": "Invalid namespace name: name must be 63 characters or shorter",
+  "Invalid namespace name: name must start with a lowercase letter": "Invalid namespace name: name must start with a lowercase letter",
+  "Invalid namespace name: name must end 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 -": "Invalid namespace name: name must consist of lower case alphanumeric characters or -",
+  "Creating namespace {{  name  }}…": "Creating namespace {{  name  }}…",
+  "Cancelled creation of {{  name  }}.": "Cancelled creation of {{  name  }}.",
+  "Created namespace {{  name  }}.": "Created namespace {{  name  }}.",
+  "Error creating namespace {{  name  }}.": "Error creating namespace {{  name  }}.",
+  "Create Namespace": "Create Namespace",
   "To": "To",
   "used": "used",
   "Scheduling Disabled": "Scheduling Disabled",

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

@@ -315,6 +315,15 @@
   "Default Request": "Solicitud por defecto",
   "Max": "Máx.",
   "Min": "Mín.",
+  "Invalid namespace name: name must be 63 characters or shorter": "",
+  "Invalid namespace name: name must start with a lowercase letter": "",
+  "Invalid namespace name: name must end with an alphanumeric character": "",
+  "Invalid namespace name: name must consist of lower case alphanumeric characters or -": "",
+  "Creating namespace {{  name  }}…": "",
+  "Cancelled creation of {{  name  }}.": "",
+  "Created namespace {{  name  }}.": "",
+  "Error creating namespace {{  name  }}.": "",
+  "Create Namespace": "",
   "To": "A",
   "used": "usado",
   "Scheduling Disabled": "Agendamiento deshabilitado",

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

@@ -315,6 +315,15 @@
   "Default Request": "Demande par défaut",
   "Max": "Max",
   "Min": "Min",
+  "Invalid namespace name: name must be 63 characters or shorter": "",
+  "Invalid namespace name: name must start with a lowercase letter": "",
+  "Invalid namespace name: name must end with an alphanumeric character": "",
+  "Invalid namespace name: name must consist of lower case alphanumeric characters or -": "",
+  "Creating namespace {{  name  }}…": "",
+  "Cancelled creation of {{  name  }}.": "",
+  "Created namespace {{  name  }}.": "",
+  "Error creating namespace {{  name  }}.": "",
+  "Create Namespace": "",
   "To": "À",
   "used": "utilisé",
   "Scheduling Disabled": "Planification désactivée",

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

@@ -315,6 +315,15 @@
   "Default Request": "Pedido por defeito",
   "Max": "Máx.",
   "Min": "Mín.",
+  "Invalid namespace name: name must be 63 characters or shorter": "",
+  "Invalid namespace name: name must start with a lowercase letter": "",
+  "Invalid namespace name: name must end with an alphanumeric character": "",
+  "Invalid namespace name: name must consist of lower case alphanumeric characters or -": "",
+  "Creating namespace {{  name  }}…": "",
+  "Cancelled creation of {{  name  }}.": "",
+  "Created namespace {{  name  }}.": "",
+  "Error creating namespace {{  name  }}.": "",
+  "Create Namespace": "",
   "To": "Para",
   "used": "usado",
   "Scheduling Disabled": "Agendamento Desactivado",