fix: use new TranslationDialog component

package.json

@@ -5,15 +5,14 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^24.1.1",
+        "@dhis2/analytics": "^24.2.5",
         "@dhis2/app-runtime": "^3.4.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-ui-core": "^7.3.3",
         "@dhis2/d2-ui-interpretations": "^7.4.0",
         "@dhis2/d2-ui-mentions-wrapper": "^7.3.3",
         "@dhis2/d2-ui-rich-text": "^7.3.3",
-        "@dhis2/d2-ui-translation-dialog": "^7.3.3",
         "@dhis2/data-visualizer-plugin": "^39.2.10",
         "@dhis2/ui": "^8.5.1",
         "classnames": "^2.3.1",

src/components/DropdownButton/DropdownButton.js

@@ -1,7 +1,7 @@
+import { OfflineTooltip } from '@dhis2/analytics'
 import { Button, Layer, Popper } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import OfflineTooltip from '../OfflineTooltip.js'
 import { ArrowDown, ArrowUp } from './assets/Arrow.js'
 import styles from './DropdownButton.module.css'
 

src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap

@@ -35,7 +35,7 @@ exports[`renders disabled menu items when offline 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Chart
         </span>
@@ -68,7 +68,7 @@ exports[`renders disabled menu items when offline 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Table
         </span>
@@ -106,7 +106,7 @@ exports[`renders menu for active type CHART and type MAP 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Table
         </span>
@@ -139,7 +139,7 @@ exports[`renders menu for active type CHART and type MAP 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Map
         </span>
@@ -177,7 +177,7 @@ exports[`renders menu for active type CHART and type REPORT_TABLE 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Table
         </span>
@@ -210,7 +210,7 @@ exports[`renders menu for active type CHART and type REPORT_TABLE 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Map
         </span>
@@ -248,7 +248,7 @@ exports[`renders menu for active type EVENT_CHART and type EVENT_REPORT 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Table
         </span>
@@ -293,7 +293,7 @@ exports[`renders menu for active type EVENT_REPORT and type EVENT_CHART 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Chart
         </span>
@@ -338,7 +338,7 @@ exports[`renders menu for active type MAP and type CHART 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Chart
         </span>
@@ -371,7 +371,7 @@ exports[`renders menu for active type MAP and type CHART 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Table
         </span>
@@ -416,7 +416,7 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Chart
         </span>
@@ -449,7 +449,7 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Table
         </span>
@@ -494,7 +494,7 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer wh
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Chart
         </span>
@@ -527,7 +527,7 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer wh
         class="jsx-3508410433 label"
       >
         <span
-          class="span notAllowed"
+          class="jsx-3661110597 tooltip notAllowed"
         >
           View as Table
         </span>
@@ -572,7 +572,7 @@ exports[`renders menu for active type REPORT_TABLE and type CHART 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Chart
         </span>
@@ -605,7 +605,7 @@ exports[`renders menu for active type REPORT_TABLE and type CHART 1`] = `
         class="jsx-3508410433 label"
       >
         <span
-          class="span"
+          class="jsx-3661110597 tooltip"
         >
           View as Map
         </span>

src/components/MenuItemWithTooltip.js

@@ -1,9 +1,9 @@
+import { OfflineTooltip } from '@dhis2/analytics'
 import { useOnlineStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { MenuItem } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import OfflineTooltip from './OfflineTooltip.js'
 
 const MenuItemWithTooltip = ({
     disabledWhenOffline,

src/pages/edit/ActionsBar.js

@@ -1,7 +1,6 @@
+import { OfflineTooltip, TranslationDialog } from '@dhis2/analytics'
 import { useOnlineStatus, useDataEngine, useAlert } from '@dhis2/app-runtime'
-import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import i18n from '@dhis2/d2-i18n'
-import TranslationDialog from '@dhis2/d2-ui-translation-dialog'
 import { Button, ButtonStrip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -18,7 +17,6 @@ import {
 import { acClearPrintDashboard } from '../../actions/printDashboard.js'
 import { acClearSelected } from '../../actions/selected.js'
 import ConfirmActionDialog from '../../components/ConfirmActionDialog.js'
-import OfflineTooltip from '../../components/OfflineTooltip.js'
 import {
     sGetEditDashboardRoot,
     sGetIsPrintPreviewView,
@@ -41,8 +39,9 @@ const deleteFailedMessage = i18n.t(
     'Failed to delete dashboard. You might be offline or not have access to edit this dashboard.'
 )
 
+const fieldsToTranslate = ['name', 'description']
+
 const EditBar = ({ dashboard, ...props }) => {
-    const { d2 } = useD2()
     const dataEngine = useDataEngine()
     const { online } = useOnlineStatus()
     const [translationDlgIsOpen, setTranslationDlgIsOpen] = useState(false)
@@ -159,23 +158,13 @@ const EditBar = ({ dashboard, ...props }) => {
     }
 
     const translationDialog = () =>
-        dashboard.id ? (
+        translationDlgIsOpen ? (
             <TranslationDialog
                 className="translation-dialog"
-                d2={d2}
-                open={translationDlgIsOpen}
-                onRequestClose={toggleTranslationDialog}
-                objectToTranslate={{
-                    ...dashboard,
-                    modelDefinition: { name: 'dashboard' },
-                }}
-                fieldsToTranslate={['name', 'description']}
-                onTranslationError={(err) =>
-                    console.log('translation update error', err)
-                }
+                onClose={toggleTranslationDialog}
+                objectToTranslate={dashboard}
+                fieldsToTranslate={fieldsToTranslate}
                 onTranslationSaved={Function.prototype}
-                insertTheme={true}
-                isOnline={online}
             />
         ) : null
 

src/pages/edit/LayoutModal.js

@@ -1,3 +1,4 @@
+import { OfflineTooltip } from '@dhis2/analytics'
 import { useOnlineStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
@@ -13,7 +14,6 @@ import {
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import OfflineTooltip from '../../components/OfflineTooltip.js'
 import { GRID_COLUMNS } from '../../modules/gridUtil.js'
 import { LayoutFixedIcon } from './assets/LayoutFixed.js'
 import { LayoutFreeflowIcon } from './assets/LayoutFreeflow.js'

src/pages/edit/TitleBar.js

@@ -1,3 +1,4 @@
+import { OfflineTooltip } from '@dhis2/analytics'
 import { useOnlineStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { InputField, TextAreaField, Radio, Button } from '@dhis2/ui'
@@ -12,7 +13,6 @@ import {
     acSetItemConfigInsertPosition,
     acSetDashboardCode,
 } from '../../actions/editDashboard.js'
-import OfflineTooltip from '../../components/OfflineTooltip.js'
 import { orObject } from '../../modules/util.js'
 import {
     sGetEditDashboardRoot,

src/pages/edit/__tests__/ActionsBar.spec.js

@@ -29,13 +29,17 @@ jest.mock('@dhis2/ui', () => {
 /* eslint-enable react/prop-types */
 
 /* eslint-disable react/prop-types */
-jest.mock(
-    '../../../components/OfflineTooltip.js',
-    () =>
-        function Mock({ children }) {
+jest.mock('@dhis2/analytics', () => {
+    const originalModule = jest.requireActual('@dhis2/analytics')
+
+    return {
+        __esModule: true,
+        ...originalModule,
+        OfflineTooltip: function Mock({ children }) {
             return <div className="OfflineTooltip">{children}</div>
-        }
-)
+        },
+    }
+})
 /* eslint-enable react/prop-types */
 
 jest.mock(
@@ -46,14 +50,6 @@ jest.mock(
         }
 )
 
-jest.mock(
-    '@dhis2/d2-ui-translation-dialog',
-    () =>
-        function Mock() {
-            return <div className="mock-translation-dialog" />
-        }
-)
-
 /* eslint-disable react/prop-types */
 jest.mock(
     '../../../components/ConfirmActionDialog',

src/pages/edit/__tests__/__snapshots__/ActionsBar.spec.js.snap

@@ -125,9 +125,6 @@ exports[`renders Translate, Delete, and Discard buttons when delete access 1`] =
   <div
     class="mock-filter-settings-dialog"
   />
-  <div
-    class="mock-translation-dialog"
-  />
 </div>
 `;
 
@@ -209,8 +206,5 @@ exports[`renders the ActionsBar without Delete when no delete access 1`] = `
   <div
     class="mock-filter-settings-dialog"
   />
-  <div
-    class="mock-translation-dialog"
-  />
 </div>
 `;