Dat 1392 navigation updates (#2)

* feature: improve navigation * [DAT-1170]: persist search terms on main page * [DAT-1171]: populate variables from url * [DAT-1172]: execute query as form (on hitting enter)
pepfar-datim · Nov 23, 2021 · dc2487f · dc2487f
1 parent 429b157
commit dc2487f
Show file tree

Hide file tree

Showing 14 changed files with 244 additions and 88 deletions.
diff --git a/i18n/en.pot b/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: 2021-09-13T10:41:15.552Z\n"
-"PO-Revision-Date: 2021-09-13T10:41:15.552Z\n"
+"POT-Creation-Date: 2021-11-08T14:33:13.587Z\n"
+"PO-Revision-Date: 2021-11-08T14:33:13.588Z\n"
 
 msgid "Search within results"
 msgstr "Search within results"
@@ -29,6 +29,9 @@ msgstr "open in api"
 msgid "open in maintenance app"
 msgstr "open in maintenance app"
 
+msgid "copy link"
+msgstr "copy link"
+
 msgid "Variables"
 msgstr "Variables"
 

diff --git a/i18n/nb.po b/i18n/nb.po
@@ -20,12 +20,18 @@ msgstr "Oppgi variabler til venstre og oppdater spørringen"
 msgid "Query could not execute"
 msgstr "Spørringen kunne ikke gjennomføres"
 
+msgid "open in sql viewer"
+msgstr "åpne i sql viewer"
+
 msgid "open in api"
 msgstr "åpne i api"
 
 msgid "open in maintenance app"
 msgstr "åpne i metadata manager"
 
+msgid "copy link"
+msgstr "kopier lenken"
+
 msgid "Variables"
 msgstr "Variabler"
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "SQLViewer",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "",
     "license": "BSD-3-Clause",
     "private": true,

diff --git a/src/components/Data/DataWrapper.js b/src/components/Data/DataWrapper.js
@@ -24,7 +24,10 @@ const DataWrapper = ({ variables, id, isView, setRefreshQuery }) => {
     const [variablesUsed, setVariablesUsed] = useState({})
     const engine = useDataEngine()
     const { loading, error, data, refetch } = useDataQuery(sqlDataQuery, {
-        variables: { id: `${id}/data` },
+        variables: {
+            id: `${id}/data`,
+            queryVariables: parameterizeVariablesQuery(variables),
+        },
     })
 
     const refreshQuery = async givenVariables => {
@@ -50,10 +53,12 @@ const DataWrapper = ({ variables, id, isView, setRefreshQuery }) => {
     }, [])
 
     const getDownloadURL = () => {
+        const downloadVariables =
+            Object.keys(variablesUsed).length > 0 ? variablesUsed : variables
         return `${engine.link.baseUrl}/${
             engine.link.apiPath
         }/sqlViews/${id}/data.csv?paging=false&var=${parameterizeVariablesQuery(
-            variablesUsed
+            downloadVariables
         ).join(',')}`
     }
 

diff --git a/src/components/Data/LinksMenu.js b/src/components/Data/LinksMenu.js
@@ -1,10 +1,18 @@
 import { useDataEngine } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Menu, MenuItem, Popover, IconEdit24, IconView24 } from '@dhis2/ui'
+import {
+    Menu,
+    MenuItem,
+    Popover,
+    IconEdit24,
+    IconLink24,
+    IconView24,
+} from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { getEditLink, getApiLink } from '../../api/miscellaneous'
+import { getVariablesLink } from '../../services/extractVariables'
 
 const CodeIcon = () => (
     <svg
@@ -27,7 +35,13 @@ const CodeIcon = () => (
     </svg>
 )
 
-const LinksMenu = ({ id, includeViewLink, moreButtonRef, toggleLinksMenu }) => {
+const LinksMenu = ({
+    id,
+    isSearchPage,
+    moreButtonRef,
+    toggleLinksMenu,
+    variables,
+}) => {
     const engine = useDataEngine()
 
     return (
@@ -38,7 +52,7 @@ const LinksMenu = ({ id, includeViewLink, moreButtonRef, toggleLinksMenu }) => {
             onClickOutside={toggleLinksMenu}
         >
             <Menu>
-                {includeViewLink && (
+                {isSearchPage && (
                     <Link
                         to={`/view/${id}`}
                         style={{
@@ -68,16 +82,29 @@ const LinksMenu = ({ id, includeViewLink, moreButtonRef, toggleLinksMenu }) => {
                         window.open(getEditLink(engine, id))
                     }}
                 />
+                {!isSearchPage && (
+                    <MenuItem
+                        icon={<IconLink24 />}
+                        dense
+                        label={i18n.t('copy link')}
+                        onClick={() => {
+                            navigator.clipboard.writeText(
+                                getVariablesLink({ id, variables })
+                            )
+                        }}
+                    />
+                )}
             </Menu>
         </Popover>
     )
 }
 
 LinksMenu.propTypes = {
     id: PropTypes.string,
-    includeViewLink: PropTypes.bool,
+    isSearchPage: PropTypes.bool,
     moreButtonRef: PropTypes.object,
     toggleLinksMenu: PropTypes.func,
+    variables: PropTypes.object,
 }
 
 export default LinksMenu
diff --git a/src/components/Data/VariablesDrawerMenu.js b/src/components/Data/VariablesDrawerMenu.js
@@ -1,5 +1,11 @@
 import i18n from '@dhis2/d2-i18n'
-import { Button, InputField, IconSubtractCircle24, IconSync24 } from '@dhis2/ui'
+import {
+    Button,
+    InputField,
+    IconSubtractCircle24,
+    IconSync24,
+    ReactFinalForm,
+} from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,73 +14,85 @@ const VariablesDrawerMenu = ({
     toggleVariableDrawer,
     updateVariable,
     refreshQuery,
-}) => (
-    <>
-        <div className="drawer">
-            <div className="flexWrap">
-                <div className="buttonWrap">
-                    <Button
-                        icon={<IconSubtractCircle24 />}
-                        small
-                        onClick={toggleVariableDrawer}
-                    />
+}) => {
+    const handleRefresh = () => {
+        refreshQuery(variables)
+    }
+
+    return (
+        <>
+            <div className="drawer">
+                <div className="flexWrap">
+                    <div className="buttonWrap">
+                        <Button
+                            icon={<IconSubtractCircle24 />}
+                            small
+                            onClick={toggleVariableDrawer}
+                        />
+                    </div>
+                    <span className="variablesText">{i18n.t('Variables')}</span>
                 </div>
-                <span className="variablesText">{i18n.t('Variables')}</span>
+                <ReactFinalForm.Form onSubmit={handleRefresh}>
+                    {({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            {Object.keys(variables).map(v => (
+                                <InputField
+                                    key={`variableInput_${v}`}
+                                    name={`variableInput_${v}`}
+                                    onChange={e =>
+                                        updateVariable({ [v]: e.value })
+                                    }
+                                    label={v}
+                                    value={variables[v]}
+                                    inputWidth="80%"
+                                />
+                            ))}
+                            {refreshQuery !== null && (
+                                <div className="rightButtonOuter">
+                                    <Button
+                                        icon={<IconSync24 />}
+                                        type="submit"
+                                        primary
+                                    >
+                                        {i18n.t('Refresh Query')}
+                                    </Button>
+                                </div>
+                            )}
+                        </form>
+                    )}
+                </ReactFinalForm.Form>
             </div>
-            {Object.keys(variables).map(v => (
-                <InputField
-                    key={`variableInput_${v}`}
-                    name={`variableInput_${v}`}
-                    onChange={e => updateVariable({ [v]: e.value })}
-                    label={v}
-                    value={variables[v]}
-                    inputWidth="80%"
-                />
-            ))}
-            {refreshQuery !== null && (
-                <div className="rightButtonOuter">
-                    <Button
-                        icon={<IconSync24 />}
-                        primary
-                        onClick={() => {
-                            refreshQuery(variables)
-                        }}
-                    >
-                        {i18n.t('Refresh Query')}
-                    </Button>
-                </div>
-            )}
-        </div>
-        <style jsx>
-            {`
-                .drawer {
-                    min-width: var(--drawer-width);
-                    max-width: var(--drawer-width);
-                    padding: var(--spacers-dp16);
-                    height: 100%;
-                    background-color: var(--colors-grey300);
-                    overflow: auto;
-                }
-                .flexWrap {
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: var(--spacers-dp16);
-                }
-                .buttonWrap {
-                    margin-right: var(--spacers-dp8);
-                }
-                .variablesText {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: var(--colors-grey900);
-                }
-                .rightButtonOuter {
-                    margin-top: var(--spacers-dp8);
-                }
-            `}
-        </style>
-    </>
-)
+            <style jsx>
+                {`
+                    .drawer {
+                        min-width: var(--drawer-width);
+                        max-width: var(--drawer-width);
+                        padding: var(--spacers-dp16);
+                        height: 100%;
+                        background-color: var(--colors-grey300);
+                        overflow: auto;
+                    }
+                    .flexWrap {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: var(--spacers-dp16);
+                    }
+                    .buttonWrap {
+                        margin-right: var(--spacers-dp8);
+                    }
+                    .variablesText {
+                        font-size: 18px;
+                        font-weight: 500;
+                        color: var(--colors-grey900);
+                    }
+                    .rightButtonOuter {
+                        margin-top: var(--spacers-dp8);
+                    }
+                `}
+            </style>
+        </>
+    )
+}
 
 VariablesDrawerMenu.propTypes = {
     refreshQuery: PropTypes.func,

diff --git a/src/components/Data/ViewData.js b/src/components/Data/ViewData.js
@@ -5,7 +5,11 @@ import PropTypes from 'prop-types'
 import React, { useState, createRef } from 'react'
 import { Link } from 'react-router-dom'
 import { executeQuery } from '../../api/miscellaneous'
-import { extractVariables } from '../../services/extractVariables'
+import {
+    extractVariables,
+    getVariablesLink,
+} from '../../services/extractVariables'
+import { useQuery } from '../../services/useQuery'
 import Layout from '../Layout'
 import DataWrapper from './DataWrapper'
 import LinksMenu from './LinksMenu'
@@ -27,6 +31,7 @@ const VIEW_TYPE = 'VIEW'
 const QUERY_TYPE = 'QUERY'
 
 const ViewData = ({ match }) => {
+    const query = useQuery()
     const engine = useDataEngine()
     const id = match.params.id
     const [variablesDrawerOpen, setVariablesDrawerOpen] = useState(true)
@@ -41,7 +46,6 @@ const ViewData = ({ match }) => {
 
     const prepView = async d => {
         const extractedVariables = extractVariables(d.sqlView.sqlQuery)
-        setVariables(extractedVariables)
 
         if (
             d.sqlView.type !== QUERY_TYPE ||
@@ -50,6 +54,13 @@ const ViewData = ({ match }) => {
             setVariablesDrawerOpen(false)
         }
 
+        Object.keys(extractedVariables).forEach(k => {
+            if (query[k]) {
+                extractedVariables[k] = query[k]
+            }
+        })
+        setVariables(extractedVariables)
+
         if (d.sqlView.type === VIEW_TYPE) {
             executeQuery.resource = `sqlViews/${id}/execute`
             const resp = await engine.mutate(executeQuery)
@@ -67,7 +78,13 @@ const ViewData = ({ match }) => {
     })
 
     const updateVariable = newVariable => {
-        setVariables(Object.assign({}, variables, newVariable))
+        const updatedVariables = Object.assign({}, variables, newVariable)
+        window.history.pushState(
+            null,
+            null,
+            getVariablesLink({ id, variables: updatedVariables })
+        )
+        setVariables(updatedVariables)
     }
 
     const toggleVariableDrawer = () => {
@@ -117,11 +134,12 @@ const ViewData = ({ match }) => {
                                         {linksMenuOpen && (
                                             <LinksMenu
                                                 id={id}
-                                                includeViewLink={false}
+                                                isSearchPage={false}
                                                 moreButtonRef={moreButtonRef}
                                                 toggleLinksMenu={
                                                     toggleLinksMenu
                                                 }
+                                                variables={variables}
                                             />
                                         )}
                                         <div className="backButtonWrap">
@@ -205,8 +223,12 @@ const ViewData = ({ match }) => {
                     margin-left: var(--spacers-dp12);
                 }
                 .backButtonWrap {
+                    display: flex;
                     margin-left: auto;
                 }
+                .linkButton {
+                    margin-right: 8px;
+                }
             `}</style>
         </Layout>
     )