frontend: Add create namespace ui

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

frontend/src/components/namespace/CreateNamespaceDialog.tsx

@@ -0,0 +1,92 @@
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ TextField,
+ Typography,
+} from '@mui/material';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { post } from '../../lib/k8s/apiProxy';
+import { ActionButton } from '../common';
+
+interface CreateNamespaceButtonProps {
+ toggleFunc: () => void;
+}
+
+export function CreateNamespaceButton({ toggleFunc }: CreateNamespaceButtonProps) {
+ const { t } = useTranslation(['glossary', 'translation']);
+
+ return (
+ <ActionButton
+ color="primary"
+ description={t('translation|Create')}
+ icon={'mdi:plus-circle'}
+ onClick={() => {
+ toggleFunc();
+ }}
+ />
+ );
+}
+
+interface CreateNamespaceDialogProps {
+ isDialogOpen: boolean;
+ toggleFunc: () => void;
+}
+export function CreateNamespaceDialog({ isDialogOpen, toggleFunc }: CreateNamespaceDialogProps) {
+ const { t } = useTranslation(['glossary', 'translation']);
+ const [namespaceName, setNamespaceName] = useState('');
+
+ function createNewNamespace() {
+ const newNamespaceData = {
+ apiVersion: 'v1',
+ kind: 'Namespace',
+ metadata: {
+ name: namespaceName,
+ },
+ };
+
+ async function createNamesapce(newNamespaceData: any) {
+ try {
+ const response = await post('/api/v1/namespaces', newNamespaceData);
+ console.log('response', response);
+ return response;
+ } catch (error) {
+ console.error('Error creating namespace', error);
+ return error;
+ }
+ }
+
+ createNamesapce(newNamespaceData);
+ toggleFunc();
+ }
+
+ return (
+ <>
+ <Dialog open={isDialogOpen} onClose={() => toggleFunc()}>
+ <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={() => toggleFunc()}>{t('translation|Cancel')}</Button>
+ <Button onClick={() => createNewNamespace()}>{t('translation|Create')}</Button>
+ </DialogActions>
+ </Dialog>
+ </>
+ );
+}

frontend/src/components/namespace/List.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import helpers from '../../helpers';
 import { useCluster } from '../../lib/k8s';
@@ -10,6 +10,7 @@ import {
  ResourceTableFromResourceClassProps,
  ResourceTableProps,
 } from '../common/Resource/ResourceTable';
+import { CreateNamespaceButton, CreateNamespaceDialog } from './CreateNamespaceDialog';
 
 export default function NamespacesList() {
  const { t } = useTranslation(['glossary', 'translation']);
@@ -18,6 +19,11 @@ export default function NamespacesList() {
  const [allowedNamespaces, setAllowedNamespaces] = React.useState<
  { metadata: { name: string } }[]
  >([]);
+ const [namespaceDialogOpen, setNamespaceDialogOpen] = useState(false);
+
+ function toggleCreateNamespaceVisibility() {
+ setNamespaceDialogOpen(namespaceDialogOpen => !namespaceDialogOpen);
+ }
 
  React.useEffect(() => {
  if (cluster) {
@@ -86,12 +92,21 @@ export default function NamespacesList() {
  }, [allowedNamespaces]);
 
  return (
- <ResourceListView
- title={t('Namespaces')}
- headerProps={{
- noNamespaceFilter: true,
- }}
- {...resourceTableProps}
- />
+ <>
+ <CreateNamespaceDialog
+ isDialogOpen={namespaceDialogOpen}
+ toggleFunc={() => toggleCreateNamespaceVisibility()}
+ />
+ <ResourceListView
+ title={t('Namespaces')}
+ headerProps={{
+ titleSideActions: [
+ <CreateNamespaceButton toggleFunc={() => toggleCreateNamespaceVisibility()} />,
+ ],
+ 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",