From cb37e76edb8fe30b5e81b7619e1ae0046cffaa58 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 24 Oct 2024 11:11:04 -0400
Subject: [PATCH] Give the Importer some UI/UX lovin'

---
 resources/js/components/CreateImportForm.vue | 10 ++++-----
 resources/js/components/Mappings.vue         | 23 +++++++++++++++-----
 resources/views/index.blade.php              |  8 +++++--
 src/Http/Controllers/ImportController.php    | 12 +++++-----
 src/ServiceProvider.php                      |  3 +++
 5 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/CreateImportForm.vue b/resources/js/components/CreateImportForm.vue
index 5243979..bb4aed4 100644
--- 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
index ef94e75..1c9f0cc 100644
--- 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
index 66f1daa..8f17963 100644
--- 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
index 1c747dd..a87629a 100644
--- 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
index 4d66ddc..91c6ae9 100644
--- 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');