From b9f40c60095c3efdd86738a398084f339c7045ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 20 Apr 2023 12:46:30 +0200
Subject: [PATCH] Improve record toolbar back button

---
 .../Admin/Module/DiscoverySettings.vue        |  1 -
 .../Admin/Module/FederationSettings.vue       |  1 -
 .../src/components/Common/RecordToolbar.vue   | 22 ++++++++++--
 .../components/PageBlocks/Configurator.vue    |  1 -
 .../src/components/Public/Record/Modal.vue    |  2 +-
 client/web/compose/src/store/ui.js            | 34 +++++++++++++++++++
 .../src/themes/corteza-base/custom.scss       |  4 +++
 .../src/views/Public/Pages/Records/View.vue   | 24 ++++++++++---
 .../compose/src/views/Public/Pages/View.vue   | 23 +++++++++++++
 .../web/reporter/src/views/Report/Builder.vue |  3 +-
 locale/en/corteza-webapp-compose/general.yaml |  1 +
 11 files changed, 103 insertions(+), 13 deletions(-)

diff --git a/client/web/compose/src/components/Admin/Module/DiscoverySettings.vue b/client/web/compose/src/components/Admin/Module/DiscoverySettings.vue
index 35508b7b9..f82f5b927 100644
--- a/client/web/compose/src/components/Admin/Module/DiscoverySettings.vue
+++ b/client/web/compose/src/components/Admin/Module/DiscoverySettings.vue
@@ -14,7 +14,6 @@
     <b-tabs
       v-if="modal"
       v-model="currentTabIndex"
-      active-nav-item-class="bg-grey"
       nav-wrapper-class="bg-white border-bottom"
       card
     >
diff --git a/client/web/compose/src/components/Admin/Module/FederationSettings.vue b/client/web/compose/src/components/Admin/Module/FederationSettings.vue
index 0ee1ddc91..db7e3f397 100644
--- a/client/web/compose/src/components/Admin/Module/FederationSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/FederationSettings.vue
@@ -12,7 +12,6 @@
     @change="$emit('change', $event)"
   >
     <b-tabs
-      active-nav-item-class="bg-grey"
       nav-wrapper-class="bg-white border-bottom"
       active-tab-class="tab-content h-auto overflow-auto"
       card
diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index aa8c746f3..8c562e65d 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -16,15 +16,16 @@
           v-if="!(hideBack || settings.hideBack)"
           data-test-id="button-back"
           variant="link"
-          class="text-dark back"
           :disabled="processing"
+          class="text-dark back"
           @click.prevent="$emit('back')"
         >
           <font-awesome-icon
-            :icon="['fas', showRecordModal ? 'times' : 'chevron-left']"
+
+            :icon="['fas', showRecordModal && !inEditing ? 'times' : 'chevron-left']"
             class="back-icon"
           />
-          {{ showRecordModal ? $t('label.close') : labels.back || $t('label.back') }}
+          {{ backLabel }}
         </b-button>
 
         <slot name="start-actions" />
@@ -266,6 +267,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+
+    hasBack: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {
@@ -306,6 +312,16 @@ export default {
 
       return this.isDeleted && this.record.canUndeleteRecord && !this.processing && this.record.recordID !== NoID
     },
+
+    backLabel () {
+      if (this.inEditing) {
+        return this.$t('label.cancel')
+      } else if (this.showRecordModal) {
+        return this.$t('label.close')
+      }
+
+      return this.hasBack ? this.labels.back || this.$t('label.back') : this.$t('label.home')
+    },
   },
 
   methods: {
diff --git a/client/web/compose/src/components/PageBlocks/Configurator.vue b/client/web/compose/src/components/PageBlocks/Configurator.vue
index 6685d9b6b..c0b40e707 100644
--- a/client/web/compose/src/components/PageBlocks/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Configurator.vue
@@ -1,7 +1,6 @@
 <template>
   <b-tabs
     data-test-id="page-block-configurator"
-    active-nav-item-class="bg-grey"
     nav-wrapper-class="bg-white border-bottom"
     card
     lazy
diff --git a/client/web/compose/src/components/Public/Record/Modal.vue b/client/web/compose/src/components/Public/Record/Modal.vue
index 452cd50d7..9c6b16d87 100644
--- a/client/web/compose/src/components/Public/Record/Modal.vue
+++ b/client/web/compose/src/components/Public/Record/Modal.vue
@@ -5,7 +5,7 @@
     scrollable
     dialog-class="h-100 mw-90"
     content-class="position-initial"
-    body-class="p-0"
+    body-class="p-0 bg-gray"
     footer-class="p-0"
     size="xl"
     @hidden="hideModal"
diff --git a/client/web/compose/src/store/ui.js b/client/web/compose/src/store/ui.js
index 7600b83de..00d560433 100644
--- a/client/web/compose/src/store/ui.js
+++ b/client/web/compose/src/store/ui.js
@@ -7,6 +7,10 @@ const types = {
   clearRecordPagination: 'clearRecordPagination',
   recordPaginationUsable: 'recordPaginationUsable',
   setRecordPaginationUsable: 'setRecordPaginationUsable',
+  previousPages: 'previousPages',
+  setPreviousPages: 'setPreviousPages',
+  pushPreviousPages: 'pushPreviousPages',
+  popPreviousPages: 'popPreviousPages',
 }
 
 export default function (ComposeAPI) {
@@ -18,6 +22,8 @@ export default function (ComposeAPI) {
       pending: false,
       recordPaginationIDs: [],
       recordPaginationUsable: false,
+
+      previousPages: [],
     },
 
     getters: {
@@ -27,6 +33,8 @@ export default function (ComposeAPI) {
 
       recordPaginationUsable: (state) => state.recordPaginationUsable,
 
+      previousPages: (state) => state.previousPages,
+
       getNextAndPrevRecord: ({ recordPaginationIDs }) => (recordID) => {
         const recordIndex = recordPaginationIDs.indexOf(recordID)
         const prev = recordIndex >= 0 ? recordPaginationIDs[recordIndex - 1] : undefined
@@ -62,6 +70,20 @@ export default function (ComposeAPI) {
       setRecordPaginationUsable ({ commit }, value) {
         commit(types.recordPaginationUsable, value)
       },
+
+      setPreviousPages ({ commit }, value) {
+        commit(types.setPreviousPages, value)
+      },
+
+      pushPreviousPages ({ commit }, value) {
+        commit(types.pushPreviousPages, value)
+      },
+
+      popPreviousPages ({ commit, state }) {
+        const previousPage = state.previousPages.slice(-1)[0]
+        commit(types.popPreviousPages)
+        return new Promise((resolve) => resolve(previousPage))
+      },
     },
 
     mutations: {
@@ -92,6 +114,18 @@ export default function (ComposeAPI) {
       [types.recordPaginationUsable] (state, value) {
         state.recordPaginationUsable = value
       },
+
+      [types.setPreviousPages] (state, value) {
+        state.previousPages = value
+      },
+
+      [types.pushPreviousPages] (state, value) {
+        state.previousPages.push(value)
+      },
+
+      [types.popPreviousPages] (state) {
+        return state.previousPages.pop()
+      },
     },
   }
 }
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 2e0916a99..c7a5530c9 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -1,4 +1,8 @@
 /* stylelint-disable no-descending-specificity */
+.bg-gray {
+  background-color: $gray-200;
+}
+
 html {
   height: 100vh;
   width: 100vw;
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index c6db3fdff..fe72d009c 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="d-flex flex-column flex-grow-1 w-100 h-100 overflow-auto"
+    style="overflow-x: hidden !important;"
   >
     <b-alert
       v-if="isDeleted"
@@ -54,6 +55,7 @@
         :hide-clone="!layoutButtons.has('clone')"
         :hide-edit="!layoutButtons.has('edit')"
         :hide-submit="!layoutButtons.has('submit')"
+        :has-back="previousPages.length > 0"
         @add="handleAdd()"
         @clone="handleClone()"
         @edit="handleEdit()"
@@ -106,7 +108,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
 import record from 'corteza-webapp-compose/src/mixins/record'
@@ -175,6 +177,7 @@ export default {
     ...mapGetters({
       getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
       getPageLayouts: 'pageLayout/getByPageID',
+      previousPages: 'ui/previousPages',
     }),
 
     portalTopbarTitle () {
@@ -269,6 +272,10 @@ export default {
   },
 
   methods: {
+    ...mapActions({
+      popPreviousPages: 'ui/popPreviousPages',
+    }),
+
     async loadRecord () {
       this.record = undefined
 
@@ -296,17 +303,25 @@ export default {
       }
     },
 
-    handleBack () {
+    async handleBack () {
       /**
        * Not the best way since we can not always know where we
        * came from (and "were" is back).
        */
       if (this.showRecordModal) {
+        if (!this.inEditing || this.inCreating) {
+          this.$bvModal.hide('record-modal')
+        }
         this.inEditing = false
         this.inCreating = false
-        this.$bvModal.hide('record-modal')
       } else {
-        this.$router.back()
+        const previousPage = await this.popPreviousPages()
+        const extraPop = !this.inCreating
+        this.$router.push(previousPage || { name: 'pages', params: { slug: this.namespace.slug || this.namespace.namespaceID } })
+        // Pop an additional time so that the route we went back to isn't added to previousPages
+        if (extraPop) {
+          this.popPreviousPages()
+        }
       }
     },
 
@@ -350,6 +365,7 @@ export default {
         this.$router.push({
           params: { ...this.$route.params, recordID },
         })
+        this.popPreviousPages()
       }
     },
 
diff --git a/client/web/compose/src/views/Public/Pages/View.vue b/client/web/compose/src/views/Public/Pages/View.vue
index 959629974..537152994 100644
--- a/client/web/compose/src/views/Public/Pages/View.vue
+++ b/client/web/compose/src/views/Public/Pages/View.vue
@@ -202,11 +202,34 @@ export default {
     this.$root.$off('refetch-records')
   },
 
+  beforeRouteLeave (to, from, next) {
+    this.setPreviousPages([])
+    next()
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    const { recordID: toRecordID } = to.params
+    const { recordID: fromRecordID } = from.params
+
+    // Update either if coming from a record page and going to another record page and if the record isn't yet in previous pages to (avoid loop)
+    const fromToRecordPage = fromRecordID && toRecordID !== fromRecordID
+    // or if going from normal to record page
+    const fromNormalToRecordPage = from.name === 'page' && to.name !== 'page'
+
+    if (fromNormalToRecordPage || fromToRecordPage) {
+      this.pushPreviousPages(from)
+    }
+
+    next()
+  },
+
   methods: {
     ...mapActions({
       updatePageSet: 'page/updateSet',
       setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
       clearRecordIDs: 'ui/clearRecordIDs',
+      setPreviousPages: 'ui/setPreviousPages',
+      pushPreviousPages: 'ui/pushPreviousPages',
     }),
 
     evaluateLayoutExpressions () {
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index 97404fbf1..f49a53912 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -153,7 +153,6 @@
     >
       <b-tabs
         v-if="currentBlock"
-        active-nav-item-class="bg-grey"
         nav-wrapper-class="bg-white border-bottom"
         active-tab-class="tab-content h-auto overflow-auto"
         card
@@ -212,7 +211,7 @@
               {{ name || kind }}
               <font-awesome-icon
                 :icon="['fas', 'bars']"
-                class="grab text-grey"
+                class="grab"
               />
             </template>
 
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
index 566c3f6cf..24bea19b0 100644
--- a/locale/en/corteza-webapp-compose/general.yaml
+++ b/locale/en/corteza-webapp-compose/general.yaml
@@ -34,6 +34,7 @@ label:
   general: General
   handle: Handle
   here: here
+  home: Home
   import: Import
   importPlaceholder: Upload files to import
   loading: Loading