frontend: Add create namespace ui

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

frontend/src/components/namespace/List.tsx

@@ -1,7 +1,19 @@
-import React from 'react';
+import { Icon } from '@iconify/react';
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ TextField,
+ Typography,
+} from '@mui/material';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import helpers from '../../helpers';
 import { useCluster } from '../../lib/k8s';
+import { post } from '../../lib/k8s/apiProxy';
 import Namespace from '../../lib/k8s/namespace';
 import { Link } from '../common';
 import { StatusLabel } from '../common/Label';
@@ -19,6 +31,8 @@ export default function NamespacesList() {
  { metadata: { name: string } }[]
  >([]);
 
+ const [namespaceDialogOpen, setNamespaceDialogOpen] = useState(false);
+
  React.useEffect(() => {
  if (cluster) {
  const namespaces = helpers.loadClusterSettings(cluster)?.allowedNamespaces || [];
@@ -85,13 +99,110 @@ export default function NamespacesList() {
  };
  }, [allowedNamespaces]);
 
+ function CreateDialogButton() {
+ // DO NOT USE IT HERE AS IT WILL RENDER AND READ THIS FUNCTION BEFORE THE ACTUAL BUTTON IS CLICKED
+ // setNamespaceDialogOpen(true);
+
+ function toggleCreateNamespaceVisibility() {
+ // USE IT HERE
+ setNamespaceDialogOpen(true);
+ console.log('create namespace dialog open -> ' + namespaceDialogOpen);
+ }
+
+ return (
+ <Button
+ onClick={() => toggleCreateNamespaceVisibility()}
+ style={{
+ marginLeft: '10px',
+ }}
+ >
+ {t('translation|Create')}
+ <Icon
+ icon="mdi:plus-circle"
+ style={{ fontSize: '20px', marginLeft: '5px', marginBottom: '5px' }}
+ />
+ </Button>
+ );
+ }
+
+ function CreateNamespaceDialog() {
+ console.log('namespaceDialogOpen', namespaceDialogOpen);
+
+ const [namespaceName, setNamespaceName] = useState('');
+
+ function createNewNamespace() {
+ console.log('Creating new namespace with name: ' + namespaceName);
+
+ const newNamespaceData = {
+ apiVersion: 'v1',
+ kind: 'Namespace',
+ metadata: {
+ name: namespaceName,
+ },
+ };
+
+ // maybe need to change the any???
+ 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);
+ // or throw????
+ return error;
+ }
+ }
+
+ createNamesapce(newNamespaceData)
+ .then((response: string) => {
+ console.log('response from running func', response);
+ })
+ .catch((error: string) => {
+ console.error('Error creating namespace from running func', error);
+ });
+
+ setNamespaceDialogOpen(false);
+ }
+
+ return (
+ <>
+ <Dialog open={namespaceDialogOpen} onClose={() => setNamespaceDialogOpen(false)}>
+ <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={() => setNamespaceDialogOpen(false)}>{t('translation|Cancel')}</Button>
+ <Button onClick={() => createNewNamespace()}>{t('translation|Create')}</Button>
+ </DialogActions>
+ </Dialog>
+ </>
+ );
+ }
+
  return (
- <ResourceListView
- title={t('Namespaces')}
- headerProps={{
- noNamespaceFilter: true,
- }}
- {...resourceTableProps}
- />
+ <>
+ <CreateNamespaceDialog />
+ <ResourceListView
+ title={t('Namespaces')}
+ headerProps={{
+ titleSideActions: [<CreateDialogButton />],
+ noNamespaceFilter: true,
+ }}
+ {...resourceTableProps}
+ />
+ </>
  );
 }