feat: create superset embedded dashboards

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-01-16T10:34:08.846Z\n"
-"PO-Revision-Date: 2025-01-16T10:34:08.847Z\n"
+"POT-Creation-Date: 2025-01-16T15:24:12.682Z\n"
+"PO-Revision-Date: 2025-01-16T15:24:12.682Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -38,6 +38,12 @@ msgstr "Cancel"
 msgid "New dashboard: configure external source (superset)"
 msgstr "New dashboard: configure external source (superset)"
 
+msgid "Could not create dashboard"
+msgstr "Could not create dashboard"
+
+msgid "An unknown error occurred"
+msgstr "An unknown error occurred"
+
 msgid "Back"
 msgstr "Back"
 

src/components/DashboardsBar/CreateDashboardButton/CreateSupersetEmbeddedDashboard.js

@@ -1,3 +1,4 @@
+import { useDataMutation } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
     Button,
@@ -6,30 +7,69 @@ import {
     ModalActions,
     ModalContent,
     ModalTitle,
+    NoticeBox,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useCallback, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { tFetchDashboards } from '../../../actions/dashboards.js'
 import { useSupersetEmbeddedDashboardFieldsState } from '../../../modules/useSupersetEmbeddedDashboardFieldsState.js'
 import { SupersetEmbeddedDashboardFields } from '../../SupersetEmbeddedDashboardFields.js'
 
+const postDashboardQuery = {
+    resource: 'dashboards',
+    type: 'create',
+    data: ({ values }) => ({
+        name: values.title || 'Untitled dashboard',
+        description: values.description,
+        code: values.code,
+        embedded: {
+            provider: 'SUPERSET',
+            id: values.supersetEmbedId,
+            options: {
+                hideTab: false,
+                hideChartControls: !values.showChartControls,
+                filters: {
+                    visible: values.showFilters,
+                    expanded: false,
+                },
+            },
+        },
+    }),
+}
+
 export const CreateSupersetEmbeddedDashboard = ({
     backToChooseDashboardModal,
     closeModal,
 }) => {
+    const dispatch = useDispatch()
+    const history = useHistory()
+    const [loading, setLoading] = useState(false)
+    const [postDashboard, { error }] = useDataMutation(postDashboardQuery)
     const {
+        hasFieldChanges,
         isSupersetEmbedIdValid,
         isSupersetEmbedIdFieldTouched,
         values,
         onChange,
         onSupersetEmbedIdFieldBlur,
     } = useSupersetEmbeddedDashboardFieldsState()
-    const postNewDashboard = () => {
-        console.log('POSTING...')
-        closeModal()
-    }
+    const handleSubmit = useCallback(
+        async (event) => {
+            event.preventDefault()
+            setLoading(true)
+            const { response } = await postDashboard({ values })
+            await dispatch(tFetchDashboards())
+            closeModal()
+            history.push(`/${response.uid}`)
+        },
+        [values, postDashboard]
+    )
+
     return (
         <Modal>
-            <form onSubmit={postNewDashboard}>
+            <form onSubmit={handleSubmit} ref={(element) => element?.focus()}>
                 <ModalTitle>
                     {i18n.t(
                         'New dashboard: configure external source (superset)',
@@ -45,14 +85,36 @@ export const CreateSupersetEmbeddedDashboard = ({
                         values={values}
                         onChange={onChange}
                         onSupersetEmbedIdFieldBlur={onSupersetEmbedIdFieldBlur}
+                        submitting={loading}
                     />
+                    {error && (
+                        <NoticeBox
+                            error
+                            title={i18n.t('Could not create dashboard')}
+                        >
+                            {error?.details?.response?.errorReports[0]
+                                ?.message ??
+                                i18n.t('An unknown error occurred')}
+                        </NoticeBox>
+                    )}
                 </ModalContent>
                 <ModalActions>
                     <ButtonStrip>
-                        <Button secondary onClick={backToChooseDashboardModal}>
+                        <Button
+                            disabled={loading}
+                            secondary
+                            onClick={backToChooseDashboardModal}
+                        >
                             {i18n.t('Back')}
                         </Button>
-                        <Button type="submit" primary>
+                        <Button
+                            loading={loading}
+                            type="submit"
+                            primary
+                            disabled={
+                                !hasFieldChanges || !isSupersetEmbedIdValid
+                            }
+                        >
                             {i18n.t('Save dashboard')}
                         </Button>
                     </ButtonStrip>

yarn.lock

@@ -17835,7 +17835,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==