fix(ui): display what state we are in so it is clear to the user what is happening (#71)

Author: NeoIsRecursive

client/src/components/Backup.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <div class="flex">
-      <h1 class="mb-6">{{ __("statamic-backup::backup.title") }}</h1>
+      <div class="flex flex-col mb-4">
+        <h1>{{ __("statamic-backup::backup.title") }}</h1>
+        <p v-if="status !== 'idle'" class="text-sm text-gray-700 whitespace-nowrap">
+          {{ __(`statamic-backup::backup.state.${status}`) }}
+        </p>
+      </div>
       <backup-actions @openBrowser="openBrowser" />
     </div>
 
@@ -37,6 +42,11 @@ export default {
       this.$store.dispatch('backup-provider/pollEndpoint');
     }
   },
+  computed: {
+    status() {
+      return this.$store.state['backup-provider'].status;
+    },
+  },
   destroy() {
     this.$store.dispatch('backup-provider/stopPolling');
     this.$store.unregisterModule('backup-provider');

lang/en/backup.php

@@ -10,6 +10,18 @@
     'backup_started' => 'Starting backup...',
     'success' => 'Backed up successfully',
 
+    'state' => [
+        'idle' => 'Idle',
+        'initializing' => 'Fetching initial status',
+        'queued' => 'Waiting for action to start',
+        'backup_in_progress' => 'Backup in progress',
+        'restore_in_progress' => 'Restore in progress',
+        'backup_completed' => 'Backup completed',
+        'restore_completed' => 'Restore completed',
+        'backup_failed' => 'Backup failed',
+        'restore_failed' => 'Restore failed',
+    ],
+
     'upload' => [
         'label' => 'Upload Backup',