fix: remove other action buttons when in edit mode print preview (#1974)

To prevent the user from accidentally losing their changes while in print preview mode, remove all action buttons other than "Exit print preview". We realized there could be some confusion between "Exit print preview" and "Exit without saving". The Exit print preview button jumps left from the Print preview button, which is maybe not ideal. The files changed view looks like major changes were made, but the only change is the addition of the !props.isPrintPreviewView for all the buttons. Note that there are other checks for displaying those buttons as well, like access level for the Delete and Save buttons, so there is some added complexity and additional factors coming into play there.
dhis2 · Sep 14, 2021 · e9a54d1 · e9a54d1
1 parent c9b4ff7
commit e9a54d1
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 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-14T10:06:01.370Z\n"
-"PO-Revision-Date: 2021-09-14T10:06:01.370Z\n"
+"POT-Creation-Date: 2021-09-14T13:34:35.765Z\n"
+"PO-Revision-Date: 2021-09-14T13:34:35.765Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -145,8 +145,8 @@ msgstr "Cannot save this dashboard while offline"
 msgid "Save changes"
 msgstr "Save changes"
 
-msgid "Exit Print preview"
-msgstr "Exit Print preview"
+msgid "Exit print preview"
+msgstr "Exit print preview"
 
 msgid "Print preview"
 msgstr "Print preview"
@@ -340,9 +340,6 @@ msgstr "End of dashboard"
 msgid "Start of dashboard"
 msgstr "Start of dashboard"
 
-msgid "Exit print preview"
-msgstr "Exit print preview"
-
 msgid "Print"
 msgstr "Print"
 

diff --git a/src/pages/edit/ActionsBar.js b/src/pages/edit/ActionsBar.js
@@ -175,55 +175,64 @@ const EditBar = ({ dashboard, ...props }) => {
 
     const renderActionButtons = () => (
         <ButtonStrip>
-            <OfflineTooltip
-                content={i18n.t('Cannot save this dashboard while offline')}
-            >
-                <Button
-                    disabled={!online}
-                    primary
-                    onClick={onSave}
-                    dataTest="save-dashboard-button"
+            {!props.isPrintPreviewView && (
+                <OfflineTooltip
+                    content={i18n.t('Cannot save this dashboard while offline')}
                 >
-                    {i18n.t('Save changes')}
-                </Button>
-            </OfflineTooltip>
+                    <Button
+                        disabled={!online}
+                        primary
+                        onClick={onSave}
+                        dataTest="save-dashboard-button"
+                    >
+                        {i18n.t('Save changes')}
+                    </Button>
+                </OfflineTooltip>
+            )}
             <OfflineTooltip>
                 <Button disabled={!online} onClick={onPrintPreview}>
                     {props.isPrintPreviewView
-                        ? i18n.t('Exit Print preview')
+                        ? i18n.t('Exit print preview')
                         : i18n.t('Print preview')}
                 </Button>
             </OfflineTooltip>
-            <OfflineTooltip>
-                <Button disabled={!online} onClick={toggleFilterSettingsDialog}>
-                    {i18n.t('Filter settings')}
-                </Button>
-            </OfflineTooltip>
-            {dashboard.id && (
+            {!props.isPrintPreviewView && (
                 <OfflineTooltip>
                     <Button
                         disabled={!online}
-                        onClick={toggleTranslationDialog}
+                        onClick={toggleFilterSettingsDialog}
                     >
-                        {i18n.t('Translate')}
+                        {i18n.t('Filter settings')}
                     </Button>
                 </OfflineTooltip>
             )}
-            {dashboard.id && dashboard.access?.delete && (
-                <OfflineTooltip
-                    content={i18n.t(
-                        'Cannot delete this dashboard while offline'
-                    )}
-                >
+            {dashboard.id && !props.isPrintPreviewView && (
+                <OfflineTooltip>
                     <Button
                         disabled={!online}
-                        onClick={onConfirmDelete}
-                        dataTest="delete-dashboard-button"
+                        onClick={toggleTranslationDialog}
                     >
-                        {i18n.t('Delete')}
+                        {i18n.t('Translate')}
                     </Button>
                 </OfflineTooltip>
             )}
+            {dashboard.id &&
+                !props.isPrintPreviewView &&
+                dashboard.access?.delete && (
+                    <OfflineTooltip
+                        content={i18n.t(
+                            'Cannot delete this dashboard while offline'
+                        )}
+                    >
+                        <Button
+                            disabled={!online}
+                            onClick={onConfirmDelete}
+                            dataTest="delete-dashboard-button"
+                        >
+                            {i18n.t('Delete')}
+                        </Button>
+                    </OfflineTooltip>
+                )}
         </ButtonStrip>
     )
 
@@ -236,11 +245,13 @@ const EditBar = ({ dashboard, ...props }) => {
             <div className={classes.editBar} data-test="edit-control-bar">
                 <div className={classes.controls}>
                     {dashboard.access?.update ? renderActionButtons() : null}
-                    <Button secondary onClick={onConfirmDiscard}>
-                        {dashboard.access?.update
-                            ? i18n.t('Exit without saving')
-                            : i18n.t('Go to dashboards')}
-                    </Button>
+                    {!props.isPrintPreviewView && (
+                        <Button secondary onClick={onConfirmDiscard}>
+                            {dashboard.access?.update
+                                ? i18n.t('Exit without saving')
+                                : i18n.t('Go to dashboards')}
+                        </Button>
+                    )}
                 </div>
             </div>
             {dashboard.access?.update && filterSettingsDialog()}