[6.x] Fieldset editing improvements (#14283)

* Actually show the Fieldset title (not just the handle)

* Add link to edit actual Fieldset

* Flip it around so the label is to edit the Fieldset and a Cog button configures the import.

Later we can replace the href with a Stack

* Disambiguate tooltips

* Show prefix in a badge

Author: jackmcdade

resources/js/components/blueprints/ImportField.vue

@@ -8,14 +8,20 @@
                         <div class="flex flex-1 items-center py-2">
                             <ui-icon class="size-4 me-2 text-ui-accent-text/80" name="fieldsets" />
                             <div class="flex items-center gap-2">
-                            <!-- @TODO: Show fieldset.title -->
-                                <button class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80" v-text="field.fieldset" @click="$emit('edit')" />
+                                <a class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80" :href="fieldsetEditUrl" v-text="fieldsetTitle" v-tooltip="__('Edit fieldset')" />
                                 <ui-icon name="link" class="text-gray-400" />
                                 <span class="text-gray-500 font-mono text-2xs" v-text="__('Fieldset')" />
+                                <ui-badge
+                                    v-if="field.prefix"
+                                    size="sm"
+                                    color="gray"
+                                    :text="`${__('Prefix')}: ${field.prefix}`"
+                                />
                             </div>
                         </div>
-                        <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                        <div class="flex items-center">
+                            <ui-button size="sm" icon="cog" variant="subtle" inset @click.prevent="$emit('edit')" v-tooltip="__('Configure import')" />
+                            <ui-button size="sm" icon="trash" variant="subtle" inset @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
                             <ui-stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false" :wrap-slot="false">
                                 <field-settings
                                     ref="settings"
@@ -50,6 +56,16 @@ export default {
     },
 
     computed: {
+        fieldsetTitle() {
+            const title = this.$page?.props?.fieldsets?.[this.field.fieldset]?.title;
+
+            return title ? __(title) : this.field.fieldset;
+        },
+
+        fieldsetEditUrl() {
+            return cp_url(`fields/fieldsets/${this.field.fieldset}/edit`);
+        },
+
         fieldConfig() {
             const { _id, type, ...config } = this.field;
             return config;