Add confirmation before updating (#3038)

statamic · Jan 4, 2021 · a3505b7 · a3505b7
1 parent ae00d6e
commit a3505b7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/resources/js/components/updater/Release.vue b/resources/js/components/updater/Release.vue
@@ -8,8 +8,8 @@
             </div>
             <div v-if="showActions">
                 <button v-if="release.type === 'current'" class="btn opacity-50" disabled v-text="__('Current Version')" />
-                <button v-else-if="release.latest" @click="$emit('install')" class="btn" v-text="__('Update to Latest')" />
-                <button v-else @click="$emit('install')" class="btn">
+                <button v-else-if="release.latest" @click="confirmationPrompt = release" class="btn" v-text="__('Update to Latest')" />
+                <button v-else @click="confirmationPrompt = release" class="btn">
                     <template v-if="release.type === 'upgrade'">{{ __('Update to :version', { version: release.version }) }}</template>
                     <template v-if="release.type === 'downgrade'">{{ __('Downgrade to :version', { version: release.version }) }}</template>
                 </button>
@@ -18,6 +18,17 @@
         <div class="card-body">
             <div v-html="release.body"></div>
         </div>
+
+        <confirmation-modal
+            v-if="confirmationPrompt"
+            :title="confirmationTitle"
+            :bodyText="confirmationText"
+            :buttonText="__('Confirm')"
+            :danger="true"
+            @confirm="confirm"
+            @cancel="confirmationPrompt = null"
+        >
+        </confirmation-modal>
     </div>
 
 </template>
@@ -27,7 +38,41 @@ export default {
 
     props: {
         release: { type: Object, required: true },
+        packageName: { type: String, required: true },
         showActions: { type: Boolean }
+    },
+
+    data() {
+        return {
+            confirmationPrompt: null,
+        }
+    },
+
+    computed: {
+        confirmationTitle() {
+            let attrs = { name: this.packageName }
+
+            return this.confirmationPrompt.type === 'downgrade'
+                ? __('Downgrade :name', attrs)
+                : __('Update :name', attrs)
+        },
+
+        confirmationText() {
+            let attrs = { version: this.confirmationPrompt.version }
+
+            return this.confirmationPrompt.type === 'downgrade'
+                ? __('Are you sure you want to downgrade to :version?', attrs)
+                : __('Are you sure you want to update to :version?', attrs)
+        }
+    },
+
+    methods: {
+
+        confirm() {
+            this.confirmationPrompt = null;
+            this.$nextTick(() => this.$emit('install'));
+        }
+
     }
 
 }

diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
@@ -36,6 +36,7 @@
                 v-for="release in unlicensedReleases"
                 :key="release.version"
                 :release="release"
+                :package-name="name"
                 :show-actions="showActions"
                 @install="installExplicitVersion(release.version)"
             />
@@ -45,6 +46,7 @@
             v-for="release in licensedReleases"
             :key="release.version"
             :release="release"
+            :package-name="name"
             :show-actions="showActions"
             @install="installExplicitVersion(release.version)"
         />