[6.x] Inertia-fy the blueprints and fieldsets areas (#12656)

Author: jasonvarga

resources/js/bootstrap/components.js

@@ -19,16 +19,13 @@ import FieldActionModal from '../components/field-actions/FieldActionModal.vue';
 import ElevatedSessionModal from '../components/modals/ElevatedSessionModal.vue';
 import ResourceDeleter from '../components/ResourceDeleter.vue';
 import Stack from '../components/stacks/Stack.vue';
-import BlueprintCreateForm from '../components/blueprints/BlueprintCreateForm.vue';
 import BlueprintResetter from '../components/blueprints/BlueprintResetter.vue';
 import GitStatus from '../components/GitStatus.vue';
 import DateTime from '../components/DateTime.vue';
 import UpdaterWidget from '../components/updater/UpdaterWidget.vue';
 
 import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
 import CreateTermButton from '../components/terms/CreateTermButton.vue';
-import FieldsetListing from '../components/fieldsets/Listing.vue';
-import FieldsetEditForm from '../components/fieldsets/EditForm.vue';
 import BlueprintListing from '../components/blueprints/Listing.vue';
 import BlueprintBuilder from '../components/blueprints/Builder.vue';
 import FormListing from '../components/forms/Listing.vue';
@@ -42,9 +39,7 @@ import RolePublishForm from '../components/roles/PublishForm.vue';
 import UserGroupListing from '../components/user-groups/Listing.vue';
 import UserGroupPublishForm from '../components/user-groups/PublishForm.vue';
 import CollectionScaffolder from '../components/collections/Scaffolder.vue';
-import CollectionBlueprintListing from '../components/collections/BlueprintListing.vue';
 import PreferencesEditForm from '../components/preferences/EditForm.vue';
-import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
 import ItemActions from '../components/actions/ItemActions.vue';
 import BulkActions from '../components/actions/BulkActions.vue';
 
@@ -91,16 +86,13 @@ export default function registerGlobalComponents(app) {
 
     app.component('stack', Stack);
 
-    app.component('blueprint-create-form', BlueprintCreateForm);
     app.component('blueprint-resetter', BlueprintResetter);
 
     // Temporarily global during intertia migration
     // These are no longer used at the top level since there's now a layout component.
     // Eventually they will be moved into their respective pages.
     app.component('BaseTermCreateForm', BaseTermCreateForm);
     app.component('CreateTermButton', CreateTermButton);
-    app.component('FieldsetListing', FieldsetListing);
-    app.component('FieldsetEditForm', FieldsetEditForm);
     app.component('BlueprintListing', BlueprintListing);
     app.component('BlueprintBuilder', BlueprintBuilder);
     app.component('FormListing', FormListing);
@@ -114,9 +106,7 @@ export default function registerGlobalComponents(app) {
     app.component('UserGroupListing', UserGroupListing);
     app.component('UserGroupPublishForm', UserGroupPublishForm);
     app.component('CollectionScaffolder', CollectionScaffolder);
-    app.component('CollectionBlueprintListing', CollectionBlueprintListing);
     app.component('PreferencesEditForm', PreferencesEditForm);
-    app.component('TaxonomyBlueprintListing', TaxonomyBlueprintListing);
     app.component('NavBuilder', defineAsyncComponent(() => import('../components/nav/Builder.vue')));
     app.component('ItemActions', ItemActions);
     app.component('BulkActions', BulkActions);

resources/js/components/blueprints/LinkFields.vue

@@ -99,6 +99,7 @@
 <script>
 import uniqid from 'uniqid';
 import { Combobox, Button, Input, Heading, Field } from '@/components/ui';
+import { usePage } from '@inertiajs/vue3';
 
 export default {
     components: { Heading, Combobox, Button, Input, Field },
@@ -109,9 +110,10 @@ export default {
     },
 
     data() {
+        const fieldsetsData = usePage().props.fieldsets;
         const fieldsets = JSON.parse(
             JSON.stringify(
-                Object.values(this.$config.get('fieldsets')).filter(
+                Object.values(fieldsetsData).filter(
                     (fieldset) => fieldset.handle != this.excludeFieldset,
                 ),
             ),

resources/js/components/collections/BlueprintListing.vue

@@ -97,6 +97,7 @@ import { SortableList } from '../sortable/Sortable';
 import { sortBy } from 'lodash-es';
 import { Description, Field, Input, Badge, Button, Switch, Combobox } from '@ui';
 import { ComboboxInput } from 'reka-ui';
+import { usePage } from '@inertiajs/vue3';
 
 export default {
     components: {
@@ -149,7 +150,8 @@ export default {
         },
 
         extensionRules() {
-            return clone(Statamic.$config.get('extensionRules')).map((rule) => {
+            const { extensionRules } = usePage().props;
+            return clone(extensionRules).map((rule) => {
                 return this.prepareRenderableRule(rule);
             });
         },

resources/js/components/field-validation/Builder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { router } from '@inertiajs/vue3';
 
 const props = defineProps({
     title: { type: String, required: true },
@@ -40,7 +41,7 @@ const submit = () => {
     $axios
         .post(props.route, payload)
         .then((response) => {
-            window.location = response.data.redirect;
+            router.get(response.data.redirect);
         })
         .catch((error) => {
             $toast.error(error.response.data.message);

resources/js/components/fieldsets/Listing.vue

@@ -1,13 +1,15 @@
 <script setup>
+import Head from '@/pages/layout/Head.vue';
 import { CreateForm } from '@/components/ui';
+import useArchitecturalBackground from '@/pages/layout/architectural-background.js';
 
-const props = defineProps({
-    route: { type: String },
-    icon: { type: String },
-});
+defineProps(['route', 'icon']);
+useArchitecturalBackground();
 </script>
 
 <template>
+    <Head :title="__('Create Blueprint')" />
+
     <CreateForm
         :icon
         :route

resources/js/components/taxonomies/BlueprintListing.vue

@@ -0,0 +1,46 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import { DocsCallout } from '@ui';
+
+defineProps([
+    'blueprint',
+    'action',
+    'showTitle',
+    'useTabs',
+    'canDefineLocalizable',
+    'resetRoute',
+    'isResettable',
+]);
+</script>
+
+<template>
+    <Head :title="__('Edit Blueprint')" />
+
+    <blueprint-builder
+        :show-title="showTitle"
+        :action="action"
+        :initial-blueprint="blueprint"
+        :use-tabs="useTabs"
+        :can-define-localizable="canDefineLocalizable"
+    >
+        <template v-if="isResettable" #actions>
+            <ui-dropdown>
+                <ui-dropdown-menu>
+                    <ui-dropdown-item
+                        :text="__('Reset')"
+                        variant="destructive"
+                        @click="$refs.resetter.confirm()"
+                    />
+                </ui-dropdown-menu>
+            </ui-dropdown>
+            <blueprint-resetter
+                ref="resetter"
+                :route="resetRoute"
+                :resource="blueprint"
+                reload
+            />
+        </template>
+    </blueprint-builder>
+
+    <DocsCallout :topic="__('Blueprints')" url="blueprints" />
+</template>