frontend: Add create namespace ui

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

frontend/src/components/namespace/CreateNamespaceButton.tsx

@@ -0,0 +1,126 @@
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ TextField,
+ Typography,
+} from '@mui/material';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+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();
+ const kubeNamespace = Namespace;
+
+ function toggleCreateNamespaceVisibility() {
+ setNamespaceDialogOpen(namespaceDialogOpen => !namespaceDialogOpen);
+ }
+
+ console.log('kubeNamespace', kubeNamespace);
+
+ function createNewNamespace() {
+ const newNamespaceData = {
+ apiVersion: 'v1',
+ kind: 'Namespace',
+ metadata: {
+ name: namespaceName,
+ },
+ };
+
+ // need this for the item name?
+ const itemName = newNamespaceData.metadata.name;
+
+ // need a callback so just made one to use
+ const callback = (itemName: string) => {
+ console.log(`Callback called with ${itemName}`);
+ };
+
+ async function createNamesapce(newNamespaceData: any) {
+ try {
+ const response = await post('/api/v1/namespaces', newNamespaceData);
+ console.log('response', response);
+
+ toggleCreateNamespaceVisibility();
+ dispatch(
+ clusterAction(callback.bind(itemName), {
+ startMessage: t('Creating namespace {{ itemName }}…', { itemName }),
+ cancelledMessage: t('Cancelled creation of {{ itemName }}.', { itemName }),
+ successMessage: t('Created namesapce {{ itemName }}.', { itemName }),
+ errorMessage: t('Error creating namespace {{ itemName }}.', { itemName }),
+ cancelUrl: location.pathname,
+ // startUrl: item!.getListLink(),
+ // errorUrl: item!.getListLink(),
+ // ...options,
+ })
+ );
+
+ return response;
+ } catch (error) {
+ console.error('Error creating namespace', error);
+
+ toggleCreateNamespaceVisibility();
+ return error;
+ }
+ }
+
+ createNamesapce(newNamespaceData);
+ }
+
+ return (
+ <AuthVisible item={kubeNamespace} authVerb="create" namespace="default">
+ <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">
+ <Typography>Please enter the name of the new namespace</Typography>
+ <TextField
+ margin="dense"
+ id="name"
+ label={t('glossary|Namespace')}
+ type="text"
+ fullWidth
+ value={namespaceName}
+ onChange={event => setNamespaceName(event.target.value)}
+ />
+ </Box>
+ </DialogContent>
+ <DialogActions>
+ <Button
+ onClick={() => {
+ toggleCreateNamespaceVisibility();
+ dispatchCreateEvent({
+ status: EventStatus.CONFIRMED,
+ });
+ }}
+ >
+ {t('translation|Cancel')}
+ </Button>
+ <Button onClick={() => createNewNamespace()}>{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/components/namespace/__snapshots__/NamespaceList.stories.storyshot

@@ -21,7 +21,20 @@ exports[`Storyshots Namespace/ListView Regular 1`] = `
  </h1>
  <div
  class="MuiBox-root css-ldp2l3"
- />
+ >
+ <button
+ aria-label="Create"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+ data-mui-internal-clone-element="true"
+ tabindex="0"
+ type="button"
+ >
+ <span />
+ <span
+ class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+ />
+ </button>
+ </div>
  </div>
  </div>
  <div

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

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

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/translation.json

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

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

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

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

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