feat: add a protection mode for mirrored section

Author: did

app/frontend/editor/components/section-pane/index.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import SettingList from './setting-list.vue'
 import BlockList from './block-list/index.vue'
 import BlockTree from './block-tree/index.vue'
@@ -21,26 +22,27 @@ export default {
     settingId: { type: String, default: undefined },
   },
   computed: {
+    ...mapGetters(['isMirroredSection', 'isMirroredSectionEditable']),
     unfilteredTabs() {
       return [
         {
           name: this.$t('sectionPane.tabs.settings'),
           tab: SettingList,
           type: 'content',
-          condition: () => this.hasSettings,
+          condition: () => this.displaySettings
         },
         {
           name: this.blocksLabel,
           tab: this.blocksComponent,
           type: 'blocks',
-          condition: () => this.hasBlocks,
+          condition: () => this.displayBlocks
         },
         {
           name: this.$t('sectionPane.tabs.advanced'),
           tab: SettingList,
           type: 'advanced',
-          condition: () => this.hasAdvancedSettings || this.hasMirrorFeatureEnabled,
-          props: () => ({ advanced: true, mirrorFeature: this.hasMirrorFeatureEnabled }),
+          condition: () => this.hasAdvancedSettings || this.isMirroredSection,
+          props: () => ({ advanced: true, mirrorFeature: this.isMirroredSection }),
         },
       ]
     },
@@ -52,15 +54,18 @@ export default {
     tabIndexFromRoute() {
       return this.findTabIndexFromRoute()
     },
+    displaySettings() {
+      return this.hasSettings && (!this.isMirroredSection || this.isMirroredSectionEditable)
+    },
+    displayBlocks() {
+      return this.hasBlocks && (!this.isMirroredSection || this.isMirroredSectionEditable)
+    },
     hasSettings() {
       return !this.isBlank(this.currentSectionSettings)
     },
     hasAdvancedSettings() {
       return !this.isBlank(this.currentSectionAdvancedSettings)
     },
-    hasMirrorFeatureEnabled() {
-      return !this.isBlank(this.currentSection.mirrorOf)
-    },
     hasBlocks() {
       return !this.isBlank(this.currentSectionDefinition.blocks)
     },

app/frontend/editor/components/section-pane/mirror-input.vue

@@ -1,5 +1,10 @@
 <template>
-  <div>
+  <div class="space-y-6">
+    <div v-if="!isMirroredSectionEditable" class="bg-gray-100 p-4 rounded-sm">
+      <h3 class="font-medium text-gray-900 text-center">{{ $t('mirrorSectionSetup.protectedMessage.title') }}</h3>
+      <p class="mt-1 text-sm text-gray-600 text-center">{{ $t('mirrorSectionSetup.protectedMessage.message') }}</p>
+    </div>
+
     <uikit-checkbox-input
       :label="$t('mirrorSectionSetup.inputLabel')"
       :placeholder="placeholder"
@@ -10,7 +15,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'MirrorSectionInput',
@@ -22,6 +27,7 @@ export default {
     this.mirrorSectionEnabled = this.currentSection?.mirrorOf?.enabled
   },
   computed: {
+    ...mapGetters(['isMirroredSectionEditable']),
     mirrorOf() {
       return this.currentSection?.mirrorOf
     },

app/frontend/editor/locales/editor.ar.json

@@ -260,5 +260,32 @@
         }
       }
     }
+  },
+  "mirrorSectionSetup": {
+    "inputLabel": "تفعيل نسخ القسم",
+    "addButton": "...أو أضف قسماً منعكساً",
+    "tooltip": "هذا القسم تم نسخه من \"%{pageTitle}\".<br/>سيتم تطبيق التغييرات التي تقوم بها هنا على جميع الصفحات التي تستخدم هذا القسم.",
+    "title": "إعداد نسخ القسم",
+    "errorMessage": "عذرًا! لا يمكنك نسخ هذا القسم. إما أنه موجود بالفعل في هذه الصفحة أو أنه يأتي من نفس الصفحة التي تقوم بتحريرها.",
+    "protectedMessage": {
+      "title": "هذا القسم محمي",
+      "message": "لتعديل محتواه، اذهب إلى الصفحة الأصلية حيث تم إنشاؤه."
+    },
+    "confirmButton": "إعداد",
+    "cancelButton": "إلغاء",
+    "page": {
+      "name": "صفحة",
+      "input": {
+        "label": "صفحة",
+        "placeholder": "اختر صفحة",
+        "searchPlaceholder": "بحث...",
+        "emptyLabel": "لم يتم العثور على صفحات"
+      },
+      "sectionInput": {
+        "label": "قسم",
+        "placeholder": "اختر قسماً",
+        "emptyLabel": "لم يتم اختيار أي قسم"
+      }
+    }
   }
 }

app/frontend/editor/locales/editor.en.json

@@ -186,6 +186,10 @@
     "tooltip": "This section is mirrored from the \"%{pageTitle}\".<br/>Changes made here will reflect across all pages using this section",
     "title": "Setup mirror section",
     "errorMessage": "Oops! You can’t mirror this section. It’s either already mirrored on this page, or it comes from the same page you're editing.",
+    "protectedMessage": {
+      "title": "This section is protected",
+      "message": "To edit its content, go to the original page where it was created."
+    },
     "confirmButton": "Setup",
     "cancelButton": "Cancel",
     "page": {

app/frontend/editor/locales/editor.es.json

@@ -186,6 +186,10 @@
     "tooltip": "Esta sección está reflejada desde \"%{pageTitle}\".<br/>Los cambios realizados aquí se aplicarán en todas las páginas que usen esta sección",
     "title": "Configurar sección reflejada",
     "errorMessage": "¡Ups! No puedes reflejar esta sección. Ya está reflejada en esta página o proviene de la misma página que estás editando.",
+    "protectedMessage": {
+      "title": "Esta sección está protegida",
+      "message": "Para editar su contenido, ve a la página original donde fue creada."
+    },
     "confirmButton": "Configurar",
     "cancelButton": "Cancelar",
     "page": {

app/frontend/editor/locales/editor.fr.json

@@ -185,6 +185,10 @@
     "tooltip": "Cette section est en miroir depuis \"%{pageTitle}\".<br/>Les modifications apportées ici seront répercutées sur toutes les pages utilisant cette section",
     "title": "Configurer la section en miroir",
     "errorMessage": "Oups ! Vous ne pouvez pas mettre cette section en miroir. Elle est déjà présente sur cette page ou provient de la page que vous êtes en train de modifier.",
+    "protectedMessage": {
+    "title": "Cette section est protégée",
+    "message": "Pour modifier son contenu, allez sur la page d'origine où elle a été créée."
+  },
     "confirmButton": "Configurer",
     "cancelButton": "Annuler",
     "page": {

app/frontend/editor/locales/editor.pt-BR.json

@@ -179,6 +179,33 @@
     "title": "Ícones",
     "pickerTitle": "Escolher um ícone"
   },
+  "mirrorSectionSetup": {
+    "inputLabel": "Ativar espelhamento de seção",
+    "addButton": "...ou adicionar uma seção espelhada",
+    "tooltip": "Esta seção é espelhada da \"%{pageTitle}\".<br/>As alterações feitas aqui serão refletidas em todas as páginas que usam esta seção.",
+    "title": "Configurar espelhamento de seção",
+    "errorMessage": "Ops! Você não pode espelhar esta seção. Ela já está espelhada nesta página ou pertence à mesma página que você está editando.",
+    "protectedMessage": {
+      "title": "Esta seção está protegida",
+      "message": "Para editar seu conteúdo, vá para a página original onde ela foi criada."
+    },
+    "confirmButton": "Configurar",
+    "cancelButton": "Cancelar",
+    "page": {
+      "name": "Página",
+      "input": {
+        "label": "Página",
+        "placeholder": "Selecione uma página",
+        "searchPlaceholder": "Pesquisar...",
+        "emptyLabel": "Nenhuma página encontrada"
+      },
+      "sectionInput": {
+        "label": "Seção",
+        "placeholder": "Selecione uma seção",
+        "emptyLabel": "Nenhuma seção selecionada"
+      }
+    }
+  },
   "linkInput": {
     "placeholder": "Clique aqui para selecionar um link",
     "withNestedTextLabel": "Ativar texto",

app/frontend/editor/store/getters.js

@@ -183,11 +183,17 @@ export default (services) => ({
       const categories = categoriesByLayoutGroupId(layoutGroupId)
       return categories.some(({ children }) => children.length > 0)
     },
-    canAddMirroredSection: ({ theme, oneSinglePage }, { layoutGroupDefinition }) => 
+  canAddMirroredSection: ({ theme, oneSinglePage }, { layoutGroupDefinition }) => 
     (layoutGroupId) => {
       const layoutGroup = layoutGroupDefinition(layoutGroupId)
       return theme.mirrorSection && layoutGroup.mirrorSection !== false && services.section.canAddMirroredSection({ 
         hasOneSinglePage: oneSinglePage
       })
     },
+  isMirroredSection: ({ section }) => {
+    return !isBlank(section.mirrorOf)
+  },
+  isMirroredSectionEditable: ({ theme, section, page }, {}) => {
+    return theme.mirrorSection === true || (theme.mirrorSection === 'protected' && section.mirrorOf?.pageId === page.id)
+  }
 })

app/frontend/editor/views/content-pane.vue

@@ -49,6 +49,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Layout from '@/layouts/slide-pane.vue'
 import SectionPane from '@/components/section-pane/index.vue'
 import SectionBlockPane from '@/components/section-block-pane/index.vue'
@@ -62,6 +63,7 @@ export default {
     settingId: { type: String, default: undefined },
   },
   computed: {
+    ...mapGetters(['isMirroredSection', 'isMirroredSectionEditable']),
     title() {
       if (this.isSectionReady) return this.sectionTitle
       else if (this.isSectionBlockReady) return this.sectionBlockTitle
@@ -117,6 +119,11 @@ export default {
       if (this.sectionBlockId) await this.fetchSectionBlock(this.sectionBlockId)
       else if (this.sectionId) await this.fetchSection(this.sectionId)
 
+      if (this.isMirroredSection && !this.isMirroredSectionEditable && this.sectionBlockId) {
+        this.$router.push({ name: 'editSection', params: { sectionId: this.currentSection.id } })
+        return
+      }
+
       if (!this.currentSection && !this.currentSectionBlock)
         this.$router.push({ name: 'editPage' })
     },

app/services/concerns/maglev/mirrored_sections_concern.rb

@@ -9,13 +9,13 @@ module MirroredSectionsConcern
 
     def persist_mirrored_sections(sections_content)
       sections_content.map { |group| group['sections'] }.flatten.compact.find do |section|
-        next unless section.dig('mirror_of', 'enabled')
+        next unless can_persist_mirrored_section?(section)
 
-        persist_mirror_section(section.except('mirror_of'), section['mirror_of'])
+        persist_mirrored_section(section.except('mirror_of'), section['mirror_of'])
       end
     end
 
-    def persist_mirror_section(section, mirror_of)
+    def persist_mirrored_section(section, mirror_of)
       store = find_store_from_mirrored_section(mirror_of)
       mirror_section = store.update_section_content(mirror_of['section_id'], section)
       store.save
@@ -25,7 +25,7 @@ def persist_mirror_section(section, mirror_of)
 
       # No need to detect a circular dependency because this is impossible
       # to change the mirror_of attributes of an existing section in the editor
-      persist_mirror_section(mirror_section.except('mirror_of'), mirror_section['mirror_of'])
+      persist_mirrored_section(mirror_section.except('mirror_of'), mirror_section['mirror_of'])
     end
 
     def replace_content_from_mirror_sections(store)
@@ -56,5 +56,12 @@ def find_section_from_mirrored_section(mirror_of)
 
       store.find_section(mirror_of['section_id'])
     end
+
+    def can_persist_mirrored_section?(section)
+      section.dig('mirror_of', 'enabled') && (
+        theme.mirror_section == true ||
+        (theme.mirror_section == 'protected' && section.dig('mirror_of', 'page_id') == page.id)
+      )
+    end
   end
 end