frontend: Add create namespace ui

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

frontend/src/components/namespace/CreateNamespaceButton.tsx

@@ -0,0 +1,110 @@
+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 { useLocation } from 'react-router-dom';
+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 location = useLocation();
+ const dispatch = useDispatch();
+
+ function toggleCreateNamespaceVisibility() {
+ setNamespaceDialogOpen(namespaceDialogOpen => !namespaceDialogOpen);
+ }
+
+ function createNewNamespace() {
+ async function namespaceRequest() {
+ const newNamespaceData = {
+ apiVersion: 'v1',
+ kind: 'Namespace',
+ metadata: {
+ name: namespaceName,
+ },
+ };
+ try {
+ const response = await post('/api/v1/namespaces', newNamespaceData);
+ return response;
+ } catch (error) {
+ console.error('Error creating namespace', error);
+ throw error;
+ }
+ }
+
+ toggleCreateNamespaceVisibility();
+ dispatch(
+ clusterAction(() => namespaceRequest(), {
+ startMessage: t('Creating namespace {{ itemName }}…', { namespaceName }),
+ cancelledMessage: t('Cancelled creation of {{ itemName }}.', { namespaceName }),
+ successMessage: t('Created Namespace {{ itemName }}.', { namespaceName }),
+ errorMessage: t('Error creating namespace {{ itemName }}.', { namespaceName }),
+ cancelUrl: location.pathname,
+ })
+ );
+ }
+
+ return (
+ <AuthVisible item={Namespace} authVerb="create">
+ <ActionButton
+ color="primary"
+ description={t('translation|Create')}
+ icon={'mdi:plus-circle'}
+ onClick={() => {
+ toggleCreateNamespaceVisibility();
+ }}
+ />
+
+ <Dialog open={namespaceDialogOpen} onClose={() => toggleCreateNamespaceVisibility()}>
+ <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={() => {
+ toggleCreateNamespaceVisibility();
+ }}
+ >
+ {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']);
@@ -86,12 +87,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/glossary.json

@@ -74,6 +74,10 @@
  "Completions": "Abschlüsse",
  "Lease": "Lease",
  "LimitRange": "LimitRange",
+ "Creating namespace {{ itemName }}…": "",
+ "Cancelled creation of {{ itemName }}.": "",
+ "Created Namespace {{ itemName }}.": "",
+ "Error creating namespace {{ itemName }}.": "",
  "Ingress": "Ingress",
  "ipBlock": "ipBlock",
  "namespaceSelector": "Namespace-Auswahl",

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

@@ -303,6 +303,7 @@
  "Default Request": "Standardanforderung",
  "Max": "Max",
  "Min": "Min",
+ "Create Namespace": "",
  "To": "An",
  "used": "benutzt",
  "Scheduling Disabled": "Planung deaktiviert",

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

@@ -74,6 +74,10 @@
  "Completions": "Completions",
  "Lease": "Lease",
  "LimitRange": "LimitRange",
+ "Creating namespace {{ itemName }}…": "Creating namespace {{ itemName }}…",
+ "Cancelled creation of {{ itemName }}.": "Cancelled creation of {{ itemName }}.",
+ "Created Namespace {{ itemName }}.": "Created Namespace {{ itemName }}.",
+ "Error creating namespace {{ itemName }}.": "Error creating namespace {{ itemName }}.",
  "Ingress": "Ingress",
  "ipBlock": "ipBlock",
  "namespaceSelector": "namespaceSelector",

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

@@ -303,6 +303,7 @@
  "Default Request": "Default Request",
  "Max": "Max",
  "Min": "Min",
+ "Create Namespace": "Create Namespace",
  "To": "To",
  "used": "used",
  "Scheduling Disabled": "Scheduling Disabled",

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

@@ -74,6 +74,10 @@
  "Completions": "Completions",
  "Lease": "Lease",
  "LimitRange": "LimitRange",
+ "Creating namespace {{ itemName }}…": "",
+ "Cancelled creation of {{ itemName }}.": "",
+ "Created Namespace {{ itemName }}.": "",
+ "Error creating namespace {{ itemName }}.": "",
  "Ingress": "Ingress",
  "ipBlock": "ipBlock",
  "namespaceSelector": "namespaceSelector",

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

@@ -303,6 +303,7 @@
  "Default Request": "Solicitud por defecto",
  "Max": "Máx.",
  "Min": "Mín.",
+ "Create Namespace": "",
  "To": "A",
  "used": "usado",
  "Scheduling Disabled": "Agendamiento deshabilitado",

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

@@ -74,6 +74,10 @@
  "Completions": "Achevés",
  "Lease": "Lease",
  "LimitRange": "LimitRange",
+ "Creating namespace {{ itemName }}…": "",
+ "Cancelled creation of {{ itemName }}.": "",
+ "Created Namespace {{ itemName }}.": "",
+ "Error creating namespace {{ itemName }}.": "",
  "Ingress": "Ingress",
  "ipBlock": "blocIP",
  "namespaceSelector": "sélecteur de Namespace",

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

@@ -303,6 +303,7 @@
  "Default Request": "Demande par défaut",
  "Max": "Max",
  "Min": "Min",
+ "Create Namespace": "",
  "To": "À",
  "used": "utilisé",
  "Scheduling Disabled": "Planification désactivée",

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

@@ -74,6 +74,10 @@
  "Completions": "Completions",
  "Lease": "Lease",
  "LimitRange": "LimitRange",
+ "Creating namespace {{ itemName }}…": "",
+ "Cancelled creation of {{ itemName }}.": "",
+ "Created Namespace {{ itemName }}.": "",
+ "Error creating namespace {{ itemName }}.": "",
  "Ingress": "Ingress",
  "ipBlock": "blocoIP",
  "namespaceSelector": "seletor de Namespace",

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

@@ -303,6 +303,7 @@
  "Default Request": "Pedido por defeito",
  "Max": "Máx.",
  "Min": "Mín.",
+ "Create Namespace": "",
  "To": "Para",
  "used": "usado",
  "Scheduling Disabled": "Agendamento Desactivado",