Give the Importer some UI/UX lovin'

statamic · Oct 24, 2024 · cb37e76 · cb37e76
1 parent 076d4f7
commit cb37e76
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/resources/js/components/CreateImportForm.vue b/resources/js/components/CreateImportForm.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="mt-3 card p-0 overflow-hidden">
-        <form class="p-4" @submit.prevent="save">
-            <h2>{{ __('New Import') }}</h2>
+    <div class="card p-6">
+        <form @submit.prevent="save">
+            <h2>{{ __('Create a New Import') }}</h2>
 
             <publish-container
                 name="base"
@@ -22,8 +22,8 @@
                 </div>
             </publish-container>
 
-            <div class="flex justify-center mt-6">
-                <button class="btn-primary" :disabled="saving">{{ __('Save & Configure') }}</button>
+            <div class="mt-6">
+                <button class="btn-primary" :disabled="saving">{{ __('Save & Continue') }}</button>
             </div>
         </form>
     </div>

diff --git a/resources/js/components/Mappings.vue b/resources/js/components/Mappings.vue
@@ -5,20 +5,33 @@
         </div>
 
         <div v-else class="flex flex-col gap-6">
+            <div class="content max-w-lg">
+                <h2>{{ __('Configuration') }}</h2>
+                <p>{{ __('You can add or modify your Blueprint fields to customize what data is imported and what fieldtype it will be stored in. You can save, refresh, and com back to this import config later until it\'s ready to run.') }}</p>
+            </div>
+            <div>
+                <label class="font-semibold text-sm mb-1">{{ __('Field Mappings') }}</label>
+                <div class="help-block">
+                    <p>{{ __('Map the fields from your import to the fields in your blueprint.') }}</p>
+                </div>
+            </div>
             <table class="grid-table table-auto field-mappings-table">
                 <thead>
                     <tr>
-                        <th style="text-align: left">{{ __('Field') }}</th>
-                        <th style="text-align: left">{{ __('Element') }}</th>
+                        <th style="text-align: left">{{ __('Blueprint Field') }}</th>
+                        <th style="text-align: left">{{ __('Data From Import') }}</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr v-for="field in fields">
                         <td class="w-96">
-                            <label class="text-base font-medium" :for="`mappings.${field.handle}.key`">
+                            <label class="text-sm font-medium" :for="`mappings.${field.handle}.key`">
                                 {{ field.display }}
                             </label>
-                            <span class="text-xs">{{ field.fieldtype_title }}</span>
+                            <span class="badge rounded-sm text-gray-700 dark:text-dark-100 inline-flex items-center p-0 border border-gray-300 dark:border-dark-300">
+                                <span class="px-1">{{ __('Type') }}</span>
+                                <span class="bg-white rounded-r-sm dark:bg-dark-300 px-1">{{ field.fieldtype_title }}</span>
+                            </span>
                         </td>
                         <td>
                             <publish-container
@@ -47,7 +60,7 @@
             <div>
                 <label class="font-semibold text-sm mb-1">{{ __('Unique Field') }}</label>
                 <div class="help-block mb-2">
-                    <p>{{ __('Please select a "unique field". This field will be used to determine if an item already exists.') }}</p>
+                    <p>{{ __('Select a "unique field" to determine if an item already exists.') }}</p>
                 </div>
 
                 <div v-for="field in availableUniqueKeys" class="flex items-center space-x-2 space-y-1 mb-1">

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
@@ -2,9 +2,13 @@
 @section('title', __('Importer'))
 
 @section('content')
-    <div class="flex items-center justify-between">
+    <header class="mb-6">
+        @include('statamic::partials.breadcrumb', [
+            'url' => cp_route('utilities.index'),
+            'title' => __('Utilities')
+        ])
         <h1>{{ __('Importer') }}</h1>
-    </div>
+    </header>
 
     <create-import-form
         class="mb-10"

diff --git a/src/Http/Controllers/ImportController.php b/src/Http/Controllers/ImportController.php
@@ -131,13 +131,13 @@ private function getConfigBlueprint(): \Statamic\Fields\Blueprint
             'name' => [
                 'type' => 'text',
                 'display' => __('Name'),
-                'width' => 50,
+                'instructions' => __('Name this import so you can identify it later.'),
                 'validate' => 'required',
             ],
             'file' => [
                 'type' => 'files',
                 'display' => __('File'),
-                'width' => 50,
+                'instructions' => __('Upload a CSV or XML file to import.'),
                 'validate' => 'required',
                 'max_files' => 1,
                 'allowed_extensions' => [
@@ -146,15 +146,15 @@ private function getConfigBlueprint(): \Statamic\Fields\Blueprint
                 ],
             ],
             'destination_type' => [
-                'type' => 'select',
-                'display' => __('Destination'),
-                'instructions' => __('What are you importing?'),
+                'type' => 'button_group',
+                'display' => __('Data Type'),
+                'instructions' => __('Choose what type of data are you importing'),
+                'width' => 50,
                 'options' => [
                     ['key' => 'entries', 'value' => __('Entries')],
                     ['key' => 'terms', 'value' => __('Terms')],
                     ['key' => 'users', 'value' => __('Users')],
                 ],
-                'width' => 50,
                 'validate' => 'required',
             ],
             'destination_collection' => [

diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
@@ -34,6 +34,9 @@ public function bootAddon()
 
         Utility::extend(function () {
             Utility::register('importer')
+                ->title(__('Importer'))
+                ->description(__('Import entries, taxonomies, and users from XML and CSV files.'))
+                ->icon('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m4.5 8.5 9.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m4.5 11.5 6 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m4.5 5.5 7 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m4.5 14.5 4 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m4.5 17.5 4 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="M10.5 23.5h-9a1 1 0 0 1 -1 -1v-21a1 1 0 0 1 1 -1h13.293a1 1 0 0 1 0.707 0.293L19.207 4.5a1 1 0 0 1 0.293 0.707V8.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="M11.5 17.5a6 6 0 1 0 12 0 6 6 0 1 0 -12 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m17.5 14.5 0 6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m17.5 20.5 -2.25 -2.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m17.5 20.5 2.25 -2.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path></svg>')
                 ->action([ImportController::class, 'index'])
                 ->routes(function ($router) {
                     $router->post('/', [ImportController::class, 'store'])->name('store');