[6.x] Apply regenerate handle pattern for replicator sections (#14745)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: 3 people

resources/js/components/blueprints/Section.vue

@@ -54,7 +54,18 @@
                             class="font-mono text-sm"
                             v-model="editingSection.handle"
                             @input="handleSyncedWithDisplay = false"
-                        />
+                        >
+                            <template #append>
+                                <ui-button
+                                    icon="sync"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Regenerate from: :field', { field: __('Display') })"
+                                    @click="regenerateHandle"
+                                    v-tooltip="__('Regenerate from: :field', { field: __('Display') })"
+                                />
+                            </template>
+                        </ui-input>
                     </ui-field>
                     <ui-field :label="__('Instructions')">
                         <ui-input type="text" v-model="editingSection.instructions" />
@@ -219,15 +230,15 @@ export default {
         },
     },
 
-    created() {
-        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
-        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
-        if (!this.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     methods: {
+        regenerateHandle() {
+            if (!this.editingSection) {
+                return;
+            }
+
+            this.editingSection.handle = snake_case(this.editingSection.display);
+        },
+
         fieldLinked(field) {
             this.section.fields.push(field);
             this.$toast.success(__('Field added'));
@@ -250,6 +261,7 @@ export default {
         },
 
         edit() {
+            this.handleSyncedWithDisplay = !this.section.handle || ['new_section', 'new_set'].includes(this.section.handle);
             this.editingSection = {
                 display: this.section.display,
                 handle: this.section.handle,

resources/js/components/blueprints/Tab.vue

@@ -32,7 +32,18 @@
                         <Input ref="title" :model-value="display" @update:model-value="fieldUpdated('display', $event)" />
                     </Field>
                     <Field :label="__('Handle')" class="form-group field-w-100">
-                        <Input class="font-mono" :model-value="handle" @update:model-value="fieldUpdated('handle', $event)" />
+                        <Input class="font-mono" :model-value="handle" @update:model-value="fieldUpdated('handle', $event)">
+                            <template #append>
+                                <Button
+                                    icon="sync"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Regenerate from: :field', { field: __('Title') })"
+                                    @click="regenerateHandle"
+                                    v-tooltip="__('Regenerate from: :field', { field: __('Title') })"
+                                />
+                            </template>
+                        </Input>
                     </Field>
                     <Field v-if="showInstructions" :label="__('Instructions')" class="form-group field-w-100">
                         <Input :model-value="instructions" @update:model-value="fieldUpdated('instructions', $event)" />
@@ -103,14 +114,6 @@ export default {
         };
     },
 
-    created() {
-        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
-        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
-        if (!this.handle || this.handle == 'new_tab' || this.handle == 'new_set_group') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     computed: {
         isActive() {
             return this.currentTab === this.tab._id;
@@ -149,7 +152,16 @@ export default {
     },
 
     methods: {
+        regenerateHandle() {
+            this.handle = snake_case(this.display);
+        },
+
         edit() {
+            this.display = this.tab.display;
+            this.handle = this.tab.handle;
+            this.instructions = this.tab.instructions;
+            this.icon = this.tab.icon;
+            this.handleSyncedWithDisplay = !this.tab.handle || ['new_tab', 'new_set_group'].includes(this.tab.handle);
             this.editing = true;
         },