Issue #3269377: Add the function to add K8s Namespace in the SPA

modules/cloud_dashboard/cloud_dashboard/src/pages/k8s/K8sNamespaceCreatePage.tsx

+import PanelWrapper from 'atoms/PanelWrapper';
+import Button from 'bootstrap3-components/Button';
+import Col from 'bootstrap3-components/Col';
+import FluidContainer from 'bootstrap3-components/FluidContainer';
+import Form from 'bootstrap3-components/Form';
+import GlyphIcon from 'bootstrap3-components/GlyphIcon';
+import Row from 'bootstrap3-components/Row';
+import KeyValueItem from 'model/KeyValueItem';
+import KeyValueTableBlock from 'molecules/KeyValueTableBlock';
+import MenuBar from 'organisms/MenuBar';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEntityData } from 'service/state';
+
+const K8sNamespaceCreatePage = () => {
+
+  const [name, setName] = useState('');
+  const [labels, setLabels] = useState<KeyValueItem[]>([
+    { item_key: '', item_value: '' },
+  ]);
+  const [annotations, setAnnotations] = useState<KeyValueItem[]>([
+    { item_key: '', item_value: '' },
+  ]);
+  const { t } = useTranslation();
+  const { create } = useEntityData({
+    cloudServiceProvider: 'k8s',
+    entityName: 'namespace',
+    entityRecords: []
+  });
+
+  return <>
+    <MenuBar />
+    <FluidContainer className="px-0">
+      <Row className="mx-0">
+        <Col>
+          <Form>
+            <PanelWrapper titleKey="namespace" title="Namespace">
+              <Form.Group>
+                <Form.Label className="form-required">Name</Form.Label>
+                <input className="form-text form-control" type="text" value={name} onChange={(e) => {
+                  setName(e.currentTarget.value);
+                }} />
+              </Form.Group>
+              <Form.Group>
+                <KeyValueTableBlock
+                  title="Labels"
+                  keyValueList={labels}
+                  setKeyValueList={setLabels}
+                />
+                <KeyValueTableBlock
+                  title="Annotations"
+                  keyValueList={annotations}
+                  setKeyValueList={setAnnotations}
+                />
+              </Form.Group>
+            </PanelWrapper>
+            <Button className="icon-before btn-success"
+              disabled={name === ''}
+              onClick={() => {
+                create({
+                  'name': name,
+                  'labels': JSON.stringify(labels),
+                  'annotations': JSON.stringify(annotations),
+                });
+              }}>
+              <GlyphIcon iconName="ok" />{' ' + t('Save')}
+            </Button>
+          </Form>
+        </Col>
+      </Row>
+    </FluidContainer>
+  </>;
+
+}
+
+export default K8sNamespaceCreatePage;