feat: implement add namespace and key functionality

src/components/panel/modals/CreateModal.tsx

@@ -0,0 +1,79 @@
+import {
+    Modal,
+    ModalTitle,
+    ModalContent,
+    ModalActions,
+    Button,
+    ButtonStrip,
+    InputField,
+} from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../../locales'
+import { CreateFieldValues } from '../sidepanel/SidePanel'
+
+type CreateModalProps = {
+    createFn: (values) => void,
+    values: CreateFieldValues,
+    setValues: (values) => void,
+    closeModal: () => void,
+    title: string,
+    type: string,
+    buttonLabel: string
+}
+
+const CreateModal = ({
+    createFn,
+    values,
+    setValues,
+    closeModal,
+    title,
+    type,
+    buttonLabel
+}: CreateModalProps) => {
+    return (
+        <Modal>
+            <ModalTitle>
+                {title}
+            </ModalTitle>
+            <ModalContent>
+                {type === 'namespace' && (
+                    <InputField
+                        label={i18n.t('Namespace')}
+                        required
+                        initialFocus
+                        value={values?.namespace}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ['namespace']: value,
+                            })
+                        }}
+                    />
+                )}
+                <InputField
+                    label={i18n.t('Key')}
+                    required
+                    initialFocus={type !== 'namespace'}
+                    value={values?.key}
+                    onChange={({ value }) => {
+                        setValues({
+                            ...values,
+                            ['key']: value,
+                        })
+                    }}
+                />
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button secondary onClick={closeModal}>
+                        {i18n.t('Cancel')}
+                    </Button>
+                    <Button primary onClick={() => createFn(values)}>
+                        {buttonLabel}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}
+export default CreateModal

src/components/panel/sidepanel/CreateButton.tsx

@@ -4,19 +4,17 @@ import React from 'react'
 import i18n from '../../../locales'
 import classes from '../Panel.module.css'
 
-const CreateButton = () => {
+const CreateButton = ({ label, handleClick }) => {
     return (
         <div className={classes.createButton}>
             <Button
-                aria-label={i18n.t('New')}
+                aria-label={label}
                 icon={<IconAdd16 />}
-                name="New button"
-                onClick={() => {
-                    console.log('Launch create modal')
-                }}
-                title={i18n.t('New')}
+                name="create"
+                onClick={handleClick}
+                title={label}
             >
-                {i18n.t('New')}
+                {label}
             </Button>
         </div>
     )

src/components/panel/sidepanel/SidePanel.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { ErrorResponse } from '../error/ErrorComponent'
 import classes from '../Panel.module.css'
 import CreateButton from './CreateButton'
 import PanelLinksList from './PanelLinksList'
 import PanelSearchField from './SearchField'
+import i18n from '../../../locales'
+import CreateModal from '../modals/CreateModal'
+import { useDataEngine } from '@dhis2/app-service-data'
+import { useNavigate, useParams } from 'react-router'
 
 type SidePanelProps = {
     data: { results: [] }
@@ -13,18 +17,78 @@ type SidePanelProps = {
     type: string
 }
 
+export type CreateFieldValues = {
+    namespace?: string,
+    key?: string
+}
+
 const SidePanel = ({
     data,
     error,
     loading,
     refetchList,
     type,
 }: SidePanelProps) => {
-    console.log(data, type, 'sidebar panel')
+    const engine = useDataEngine()
+    const navigate = useNavigate()
+    const { store, namespace: currentNamespace } = useParams()
+    const [openModal, setOpenModal] = useState(false)
+    const [values, setValues] = useState({})
+
+    // const { showSuccess, showError } = useCustomAlert()
+
+    const handleCreate = async (values: CreateFieldValues) => {
+        let resource = ''
+        if (type === 'namespace') {
+            resource = `${store}/${values?.namespace}/${values?.key}`
+        } else {
+            resource = `${store}/${currentNamespace}/${values?.key}`
+        }
+
+        await engine.mutate(
+            {
+                type: 'create',
+                resource,
+                data: () => ({}),
+            },
+            {
+                onComplete: () => {
+                    let url = ''
+                    if (type === 'namespace') {
+                        url = `${store}/edit/${values?.namespace}/${values?.key}`
+                    } else {
+                        url = `${values?.key}`
+                    }
+                    const message = i18n.t('Key created successfully')
+                    // showSuccess(message)
+                    navigate(url)
+                    setValues({})
+                },
+                onError: () => {
+                    const message = i18n.t(
+                        'There was an error creating the key'
+                    )
+                    // showError(message)
+                },
+            }
+        )
+        setOpenModal(false)
+    }
+
+    const derivedModalProps = {
+        title: type === "namespace" ? i18n.t("Add New Namespace") : i18n.t("Add New Key"),
+        buttonLabel: type === "namespace" ? i18n.t("Add Namespace") : i18n.t("Add Key"),
+    }
+    const createButtonLabel = type === "namespace" ? i18n.t("New namespace") : i18n.t("New key");
+
     return (
+        <>
         <div className={classes.sidebarContent}>
             <PanelSearchField />
-            <CreateButton />
+            <CreateButton
+                label={createButtonLabel}
+                handleClick={() => setOpenModal(true)}
+             />
             <PanelLinksList
                 data={data}
                 error={error}
@@ -33,6 +97,17 @@ const SidePanel = ({
                 type={type}
             />
         </div>
+        {openModal && (
+            <CreateModal
+                createFn={handleCreate}
+                values={values}
+                setValues={setValues}
+                closeModal={() => setOpenModal(false)}
+                type={type}
+                {...derivedModalProps}
+            />
+        )}
+        </>
     )
 }