Add clone/copy buttons to tabs in builder

client/web/compose/src/components/PageBlocks/TabsBase.vue

@@ -10,7 +10,7 @@
       class="d-flex h-100 align-items-center justify-content-center"
     >
       <p class="mb-0">
-        {{ $t('tabs.noTabs') }}
+        {{ $t('noTabs') }}
       </p>
     </div>
 
@@ -53,7 +53,7 @@
           >
             <div
               v-if="unsavedBlocks.has(tab.block.blockID !== '0' ? tab.block.blockID : tab.block.meta.tempID)"
-              :title="$t('tabs.unsavedChanges')"
+              :title="$t('unsavedChanges')"
               class="btn border-0"
             >
               <font-awesome-icon
@@ -62,18 +62,43 @@
               />
             </div>
 
-            <b-button
-              size="sm"
-              variant="outline-light"
-              class="text-primary border-0 edit-block-btn"
-              @click="editTabbedBlock(tab)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'edit']"
-              />
-            </b-button>
+            <b-button-group size="sm">
+              <b-button
+                :title="$t('tooltip.edit')"
+                variant="outline-light"
+                class="text-primary border-0 toolbox-button"
+                @click="editTabbedBlock(tab)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'edit']"
+                />
+              </b-button>
+
+              <b-button
+                :title="$t('tooltip.clone')"
+                variant="outline-light"
+                class="text-primary border-0 toolbox-button"
+                @click="cloneTabbedBlock(tab)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'clone']"
+                />
+              </b-button>
+
+              <b-button
+                :title="$t('tooltip.copy')"
+                variant="outline-light"
+                class="text-primary border-0 toolbox-button"
+                @click="copyTabbedBlock(tab)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'copy']"
+                />
+              </b-button>
+            </b-button-group>
 
             <c-input-confirm
+              :tooltip="$t('tooltip.delete')"
               show-icon
               class="ml-1"
               @confirmed="deleteTab(index)"
@@ -94,7 +119,7 @@
           class="d-flex h-100 align-items-center justify-content-center"
         >
           <p class="mb-0">
-            {{ $t('tabs.noBlock') }}
+            {{ $t('noBlock') }}
           </p>
         </div>
       </b-tab>
@@ -110,6 +135,7 @@ import { fetchID } from 'corteza-webapp-compose/src/lib/block'
 export default {
   i18nOptions: {
     namespaces: 'block',
+    keyPrefix: 'tabs',
   },
 
   name: 'TabBase',
@@ -170,12 +196,26 @@ export default {
 
   methods: {
     editTabbedBlock (tab) {
-      const blockIndex = this.blocks.findIndex(block => fetchID(block) === tab.block.blockID)
+      const blockIndex = this.blocks.findIndex(block => fetchID(block) === fetchID(tab.block))
       if (blockIndex > -1) {
         this.$emit('edit-block', blockIndex)
       }
     },
 
+    cloneTabbedBlock (tab) {
+      const tabbedBlockIndex = this.blocks.findIndex(block => fetchID(block) === fetchID(tab.block))
+      if (tabbedBlockIndex > -1) {
+        this.$emit('clone-block', { tabbedBlockIndex, tabBlockIndex: this.blockIndex, title: tab.title })
+      }
+    },
+
+    copyTabbedBlock (tab) {
+      const tabbedBlockIndex = this.blocks.findIndex(block => fetchID(block) === fetchID(tab.block))
+      if (tabbedBlockIndex > -1) {
+        this.$emit('copy-block', tabbedBlockIndex)
+      }
+    },
+
     deleteTab (tabIndex) {
       this.$emit('delete-tab', { tabIndex, blockIndex: this.blockIndex })
     },
@@ -187,7 +227,7 @@ export default {
 
     getTabTitle ({ title, block = {} }, tabIndex) {
       const { title: blockTitle, kind } = block
-      return title || blockTitle || kind || `${this.$t('tabs.tab')} ${tabIndex + 1}`
+      return title || blockTitle || kind || `${this.$t('tab')} ${tabIndex + 1}`
     },
 
     isTabLazy ({ block = {} }) {
@@ -201,7 +241,7 @@ export default {
 <style lang="scss">
 .tabs-base-block-container {
   .nav-pills {
-    .active .edit-block-btn {
+    .active .toolbox-button {
       color: var(--white) !important;
     }
   }

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -157,6 +157,8 @@
             editable
             class="p-2"
             @edit-block="editBlock"
+            @clone-block="cloneTabbedBlock"
+            @copy-block="copyBlock"
             @delete-tab="deleteTab"
           />
         </div>
@@ -739,6 +741,7 @@ export default {
 
           tabbedBlock.meta.hidden = true
         })
+
         this.showUntabbedHiddenBlocks()
       }
 
@@ -751,6 +754,19 @@ export default {
       this.appendBlock(this.blocks[index].clone(), this.$t('notification:page.cloneSuccess'))
     },
 
+    cloneTabbedBlock ({ tabbedBlockIndex, tabBlockIndex, title }) {
+      const block = this.blocks[tabbedBlockIndex].clone()
+      block.meta.hidden = true
+
+      this.blocks[tabBlockIndex].options.tabs.push({
+        blockID: fetchID(block),
+        title,
+      })
+
+      this.blocks.push(block)
+      this.unsavedBlocks.add(fetchID(block))
+    },
+
     appendBlock (block, msg) {
       this.calculateNewBlockPosition(block)
 

locale/en/corteza-webapp-compose/block.yaml

@@ -795,6 +795,7 @@ geometry:
       goToCurrentLocation: Go to current location
 
 tabs:
+  label: Tabs
   alertTitle: Set a title for your block
   title: Tabs
   addTab: + Add
@@ -839,8 +840,8 @@ tabs:
         label: Block
   tooltip:
     edit: Edit block
-    editDisabled: Editing tabbed blocks is disabled until you save this block
-    addTab: Add tab
-    addBlock: Add new block
+    clone: Clone block & tab
+    copy: Copy block
     delete: Delete tab
-  label: Tabs
+    editDisabled: Editing tabbed blocks is disabled until you save this block
+    addBlock: Add new block