feat: update to statamic 6

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
-          php-version: 8.3
+          php-version: 8.5
           tools: composer:v2
 
       - name: Install composer dependencies

.github/workflows/run-lint.yml

@@ -10,7 +10,7 @@ jobs:
       - name: "installing PHP"
         uses: "shivammathur/setup-php@v2"
         with:
-          php-version: "8.3"
+          php-version: "8.5"
 
       - name: "installing dependencies"
         run: composer install --no-interaction --prefer-dist --optimize-autoloader

.github/workflows/run-tests.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        php: [8.2, 8.3, 8.4]
+        php: [8.3, 8.4, 8.5]
         dependency-version: [prefer-lowest, prefer-stable]
 
     steps:

client/package.json

@@ -6,9 +6,9 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.1",
-    "laravel-vite-plugin": "^1.0.2",
-    "vite": "^6.3.5"
+    "@statamic/cms": "file:./../vendor/statamic/cms/resources/dist-package",
+    "laravel-vite-plugin": "^2.0.0",
+    "vite": "^7.1.12"
   },
   "dependencies": {
     "resumablejs": "^1.1.0"

client/src/components/Backup.vue

@@ -1,55 +1,162 @@
-<template>
-  <div>
-    <div class="flex">
-      <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>
-
-    <backup-listing />
-  </div>
-</template>
+<script setup>
+import { Listing, DropdownItem, Header, Button } from "@statamic/cms/ui";
+import { Head } from "@statamic/cms/inertia";
+import { requireElevatedSession } from "@statamic/cms";
+import { useBackupStore } from "../store";
+import { onUnmounted, ref, watch } from "vue";
+import { useResumable } from "../resumable";
 
-<script>
-import Listing from "./Listing.vue";
-import Actions from "./Actions.vue";
-import { store } from "../store";
+const backupStore = useBackupStore();
 
-export default {
-  components: {
-    "backup-listing": Listing,
-    "backup-actions": Actions,
-  },
-  props: {
-    chunkSize: {
-      type: Number,
-      default: 2 * 1024 * 1024, // 2MB
-    },
+const listing = ref(null);
+
+const dropZone = ref(null);
+const browseTarget = ref(null);
+
+const { files } = useResumable({
+  chunkSize: Statamic.$config.get('statamic_backup.chunk_size', 2 * 1024 * 1024),
+  dropZone,
+  browseTarget,
+  onFileUploaded: (file) => {
+    listing.value.refresh();
   },
-  created() {
-    // console.log(this.chunkSize)
+});
+
+backupStore.startPolling();
 
-    window.backup = {
-      chunkSize: this.chunkSize
-    };
+onUnmounted(() => {
+    backupStore.stopPolling();
+})
 
-    if (!this.$store.hasModule('backup-provider')) {
-      this.$store.registerModule('backup-provider', store);
-      this.$store.dispatch('backup-provider/pollEndpoint');
+watch(
+  () => backupStore.status,
+  (newStatus, oldStatus) => {
+    if (oldStatus === "initializing") return;
+    if (newStatus !== oldStatus) {
+      listing.value.refresh();
     }
-  },
-  computed: {
-    status() {
-      return this.$store.state['backup-provider'].status;
-    },
-  },
-  destroy() {
-    this.$store.dispatch('backup-provider/stopPolling');
-    this.$store.unregisterModule('backup-provider');
-  },
+  }
+);
+
+const withErrHandling = (fn) => async (params) => {
+  return fn(params).catch((err) => {
+    console.error(err);
+
+    if (err.response) {
+      Statamic.$toast.error(err.response.data.message);
+    } else {
+      Statamic.$toast.error(err.message);
+    }
+  });
 };
+
+const queueRestore = withErrHandling(async (id) => {
+  await requireElevatedSession();
+
+  const { data } =
+    await window.Statamic.$app.config.globalProperties.$axios.post(
+      cp_url(`api/backups/restore/${id}`)
+    );
+
+  Statamic.$toast.info(__(data.message));
+});
+
+const queueBackup = withErrHandling(async () => {
+  backupStore.setStatus("backup_in_progress");
+
+  const { data } =
+    await window.Statamic.$app.config.globalProperties.$axios.post(
+      cp_url("api/backups")
+    );
+
+  Statamic.$toast.info(__(data.message));
+  listing.value.refresh();
+});
+
+const deleteBackup = withErrHandling(async (id) => {
+  await requireElevatedSession();
+
+  const { data } =
+    await window.Statamic.$app.config.globalProperties.$axios.delete(
+      cp_url(`api/backups/${id}`)
+    );
+
+  Statamic.$toast.info(__(data.message));
+  listing.value.refresh();
+});
 </script>
+
+<template>
+  <Head title="Backups" />
+  <Header icon="database" :title="__('statamic-backup::backup.title')">
+    <Button variant="subtle" ref="browseTarget">{{
+      __("statamic-backup::backup.upload.label")
+    }}</Button>
+    <Button
+      variant="primary"
+      v-on:click="queueBackup"
+      :disabled="!backupStore.abilities.backup.isPossible"
+      :loading="backupStore.status === 'backup_in_progress'"
+    >
+      {{ __("statamic-backup::backup.create") }}
+    </Button>
+  </Header>
+
+  <p v-for="file in files" :key="file.file.uniqueIdentifier" class="mb-2">
+    <span>{{ file.file.fileName }}</span>
+    <span v-if="file.status === 'uploading'">
+      - {{ Math.round(file.progress * 100) }}%</span
+    >
+    <span v-if="file.status === 'retrying'">
+      - {{ __("statamic-backup::backup.upload.retrying") }}</span
+    >
+    <span v-if="file.status === 'error'" class="text-red-600">
+      - {{ __("statamic-backup::backup.upload.error") }}</span
+    >
+  </p>
+
+  <Listing
+    ref="listing"
+    :allowSearch="false"
+    :allowCustomizingColumns="false"
+    :url="cp_url('api/backups')"
+    :columns="[
+      {
+        field: 'name',
+        label: __('statamic-backup::backup.name'),
+        visible: true,
+      },
+      {
+        field: 'created_at',
+        label: __('statamic-backup::backup.created_at'),
+        visible: true,
+      },
+      {
+        field: 'size',
+        label: __('statamic-backup::backup.size'),
+        visible: true,
+      },
+    ]"
+  >
+    <template #prepended-row-actions="{ row }">
+      <DropdownItem
+        v-if="backupStore.abilities.download.isPermitted"
+        :text="__('statamic-backup::backup.download.label')"
+        target="_blank"
+        :href="`${cp_url('api/backups/download')}/${row.id}`"
+      />
+      <DropdownItem
+        v-if="backupStore.abilities.restore.isPermitted"
+        :disabled="!backupStore.abilities.restore.isPossible"
+        v-on:click="queueRestore(row.id)"
+        :text="__('statamic-backup::backup.restore.label')"
+      />
+      <DropdownItem
+        v-if="backupStore.abilities.destroy.isPermitted"
+        variant="destructive"
+        v-on:click="deleteBackup(row.id)"
+        :text="__('statamic-backup::backup.destroy.label')"
+      />
+    </template>
+  </Listing>
+</template>