feat: translations + refactor creation/edit/deletion functionality

src/App.module.css

@@ -25,10 +25,6 @@
     width: 20%;
 }
 
-/* .sidebarList {
-    margin-top: 1em;
-} */
-
 .sidebarList h4 {
     padding: 0;
     margin: 0.5em;
@@ -43,7 +39,6 @@
     height: 70px;
     padding: 0;
     margin: 0;
-    /* border: 1px solid var(--colors-grey200)   */
 }
 
 /* main area */
@@ -53,7 +48,7 @@
     margin: 0.1em;
 }
 
-/* keys */
+/* --- keys */
 
 .keysTable {
     margin-top: 10px;
@@ -108,14 +103,11 @@
 .toolbar {
     margin-top: 5px;
     height: 70px;
-    /* border: 1px solid var(--colors-grey200) */
     display: flex;
     flex-direction: row;
-    /* align-content: center; */
 }
 
 .toolbar button {
-    /* border: none; */
     align-self: center;
     margin: 0 0 0 15px;
 }

src/components/EmptyArea.tsx

@@ -10,14 +10,15 @@ const EmptyArea = () => {
             {!store && (
                 <Center>
                     <NoticeBox title={i18n.t('View namespaces')}>
-                        Select a datastore to show namespaces
+                        {i18n.t("Select a datastore to show namespaces")}
                     </NoticeBox>
                 </Center>
             )}
             {store && !namespace && (
                 <Center>
                     <NoticeBox title={i18n.t('View keys')}>
-                        Click a namespace to show keys
+                        {i18n.t("Click a namespace to show keys")}
+
                     </NoticeBox>
                 </Center>
             )}

src/components/create/CreateModal.tsx

@@ -12,50 +12,62 @@ import React from 'react'
 import i18n from '../../locales'
 
 const CreateModal = ({
-    saveFn,
-    showNamespaceModal,
-    showAddKeyModal,
-    namespace,
-    newKey,
-    setNamespace,
-    setNewKey,
+    addNewKey,
+    addNewNamespace,
+    createFn,
+    values,
+    setValues,
     closeModal,
 }) => {
     return (
         <Modal>
-            <ModalTitle>Add New Namespace</ModalTitle>
+            <ModalTitle>
+                {addNewKey && i18n.t('Add New Key')}
+                {addNewNamespace && i18n.t('Add New Namespace')}
+            </ModalTitle>
             <ModalContent>
-                {showNamespaceModal && (
+                {addNewNamespace && (
                     <InputField
-                        label="Namespace"
+                        label={i18n.t("Namespace")}
                         required
-                        value={namespace}
-                        onChange={({ value }) => setNamespace(value)}
+                        initialFocus
+                        value={values?.namespace}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ["namespace"]: value
+                            })
+                        }
+                        }
                     />
                 )}
                 <InputField
-                    label="Key"
+                    label={i18n.t("Key")}
                     required
-                    value={newKey}
-                    onChange={({ value }) => setNewKey(value)}
+                    initialFocus={addNewKey}
+                    value={values?.key}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ["key"]: value
+                            })
+                        }
+                        }
                 />
             </ModalContent>
             <ModalActions>
                 <ButtonStrip end>
                     <Button secondary onClick={closeModal}>
-                        Cancel
+                        {i18n.t('Cancel')}
                     </Button>
                     <Button
                         primary
                         onClick={() =>
-                            saveFn({
-                                newKey,
-                                namespace,
-                            })
+                            createFn(values)
                         }
                     >
-                        {showAddKeyModal && i18n.t('Add Key')}
-                        {showNamespaceModal && i18n.t('Add Namespace')}
+                        {addNewKey && i18n.t('Add Key')}
+                        {addNewNamespace && i18n.t('Add Namespace')}
                     </Button>
                 </ButtonStrip>
             </ModalActions>
@@ -64,14 +76,12 @@ const CreateModal = ({
 }
 
 CreateModal.propTypes = {
-    closeModal: PropTypes.func,
-    namespace: PropTypes.string,
-    newKey: PropTypes.string,
-    saveFn: PropTypes.func,
-    setNamespace: PropTypes.func,
-    setNewKey: PropTypes.func,
-    showAddKeyModal: PropTypes.bool,
-    showNamespaceModal: PropTypes.bool,
+    addNewKey: PropTypes.bool,
+    addNewNamespace: PropTypes.bool,
+    createFn: PropTypes.func,
+    values: PropTypes.object,
+    setValues: PropTypes.func,
+    closeModal: PropTypes.func
 }
 
 export default CreateModal

src/components/create/Toolbar.tsx

@@ -9,23 +9,22 @@ import CreateModal from './CreateModal'
 const Toolbar = () => {
     const { store, namespace } = useParams()
 
-    const [showAddNamespaceModal, setShowAddNamespaceModal] = useState(false)
-    const [showAddKeyModal, setShowAddKeyModal] = useState(false)
-    const [newNamespace, setNewNamespace] = useState('')
-    const [newKey, setNewKey] = useState('')
+    const [addNewNamespace, setAddNewNamespace] = useState(false)
+    const [addNewKey, setAddNewKey] = useState(false)
+    const [values, setValues] = useState({})
 
     const engine = useDataEngine()
     const navigate = useNavigate()
 
-    const handleAddNamespace = async (values: {
+    const handleAddNamespaceOrKey = async (values: {
         namespace?: string
-        newKey?: unknown
+        key?: unknown
     }) => {
-        let resource = `${store}`
-        if (showAddNamespaceModal) {
-            resource = `${resource}/${values?.namespace}/${values?.newKey}`
-        } else if (showAddKeyModal) {
-            resource = `${resource}/${namespace}/${values?.newKey}`
+        let resource = ""
+        if (addNewNamespace) {
+            resource = `${store}/${values?.namespace}/${values?.key}`
+        } else if (addNewKey) {
+            resource = `${store}/${namespace}/${values?.key}`
         }
 
         await engine.mutate(
@@ -36,25 +35,24 @@ const Toolbar = () => {
             },
             {
                 onComplete: () => {
-                    if (showAddNamespaceModal) {
-                        navigate(
-                            `${store}/${values?.namespace}/edit/${values?.newKey}`
-                        )
-                    } else if (showAddKeyModal) {
-                        navigate(`${store}/${namespace}/edit/${values?.newKey}`)
+                    let url = ''
+                    if (addNewNamespace) {
+                        url = `${store}/${values?.namespace}/edit/${values?.key}`
+                    } else if (addNewKey) {
+                        url = `${store}/${namespace}/edit/${values?.key}`
                     }
-                    setNewKey('')
-                    setNewNamespace('')
+                    navigate(url)
+
+                    setValues({})
                 },
             }
         )
-
-        handleCloseModal()
+        closeModal()
     }
 
-    const handleCloseModal = () => {
-        setShowAddNamespaceModal(false)
-        setShowAddKeyModal(false)
+    const closeModal = () => {
+        setAddNewKey(false)
+        setAddNewNamespace(false)
     }
 
     return (
@@ -63,23 +61,23 @@ const Toolbar = () => {
                 <>
                     <div className={classes.toolbar}>
                         <Button
-                            aria-label="Add new namespace"
+                            aria-label={i18n.t('Add new namespace')}
                             name="New namespace button"
                             onClick={() => {
-                                setShowAddNamespaceModal(true)
+                                setAddNewNamespace(true)
                             }}
-                            title="New namespace"
+                            title={i18n.t('New namespace')}
                         >
                             {i18n.t('Add new namespace')}
                         </Button>
                         {namespace && (
                             <Button
-                                aria-label="Add new key"
+                                aria-label={i18n.t('Add new key')}
                                 name="New key button"
                                 onClick={() => {
-                                    setShowAddKeyModal(true)
+                                    setAddNewKey(true)
                                 }}
-                                title="New key"
+                                title={i18n.t('New key')}
                             >
                                 {i18n.t('Add new key')}
                             </Button>
@@ -88,16 +86,14 @@ const Toolbar = () => {
                     <Divider />
                 </>
             )}
-            {(showAddNamespaceModal || showAddKeyModal) && (
+            {(addNewKey || addNewNamespace) && (
                 <CreateModal
-                    showNamespaceModal={showAddNamespaceModal}
-                    showAddKeyModal={showAddKeyModal}
-                    saveFn={handleAddNamespace}
-                    closeModal={handleCloseModal}
-                    namespace={newNamespace}
-                    setNamespace={setNewNamespace}
-                    newKey={newKey}
-                    setNewKey={setNewKey}
+                    addNewKey={addNewKey}
+                    addNewNamespace={addNewNamespace}
+                    createFn={handleAddNamespaceOrKey}
+                    closeModal={closeModal}
+                    values={values}
+                    setValues={setValues}
                 />
             )}
         </>

src/components/keys/DeleteAction.tsx → src/components/delete/DeleteButton.tsx

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales'
 
-export default function DeleteAction({ openModal }) {
+export default function DeleteButton({ openModal }) {
     return (
         <Button
-            aria-label="Delete key"
-            name="Delete key"
+            aria-label={i18n.t('Delete')}
+            name="Delete"
             onClick={openModal}
-            title="Delete key"
+            title={i18n.t('Delete')}
         >
             {i18n.t('Delete')}
         </Button>
     )
 }
 
-DeleteAction.propTypes = {
+DeleteButton.propTypes = {
     openModal: PropTypes.func,
 }