[8.x] Update status log stack (#1260)

* Update status log stack

* require the first beta

Author: duncanmcclean

composer.json

@@ -37,7 +37,7 @@
         "paypal/paypal-checkout-sdk": "^1.0",
         "pixelfear/composer-dist-plugin": "^0.1.0",
         "spatie/ignition": "^1.13",
-        "statamic/cms": "^6.0.0-alpha.1",
+        "statamic/cms": "^6.0.0-beta.1",
         "stillat/proteus": "^4.0",
         "stripe/stripe-php": "^13.0"
     },

resources/js/components/Fieldtypes/StatusLogFieldtype.vue

@@ -8,7 +8,12 @@
             @click="showStatusLog = true"
         />
 
-        <Stack name="status-log" v-if="showStatusLog" @closed="showStatusLog = false" :narrow="true">
+        <Stack
+            ref="statusLogStack"
+            size="narrow"
+            :title="__('Status Log')"
+            v-model:open="showStatusLog"
+        >
             <status-log
                 slot-scope="{ close }"
                 :index-url="meta.indexUrl"
@@ -18,7 +23,7 @@
                 :payment-statuses="meta.paymentStatuses"
                 :current-order-status="currentOrderStatus"
                 :current-payment-status="currentPaymentStatus"
-                @closed="close"
+                @closed="$refs.statusLogStack.close()"
             />
         </Stack>
     </div>

resources/js/components/StatusLog/StatusLog.vue

@@ -1,13 +1,6 @@
 <template>
-    <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-        <header
-            class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-        >
-            <Heading size="lg">{{ __('Status Log') }}</Heading>
-            <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-        </header>
-
-        <div class="flex-1 overflow-auto">
+    <div>
+        <div>
             <div class="loading flex h-full items-center justify-center" v-if="loading">
                 <Icon name="loading" />
             </div>

resources/js/components/StatusLog/StatusLogEvent.vue

@@ -36,6 +36,7 @@
 
 <script>
 import axios from 'axios';
+import { DateFormatter } from '@statamic/cms';
 import { Badge, Subheading, Avatar } from '@statamic/cms/ui'
 
 export default {
@@ -73,6 +74,10 @@ export default {
             return moment.unix(this.event.timestamp);
         },
 
+        time() {
+            return DateFormatter.format(this.event.timestamp * 1000, 'time');
+        },
+
         isCurrent() {
             return this.event.status === this.currentOrderStatus
                 || this.event.status === this.currentPaymentStatus;