Add removeData parameter to ExApp Remove UI (#301)

Closes #297.

---------

Signed-off-by: Edward Ly <contact@edward.ly>

lib/Controller/ExAppsPageController.php

@@ -472,7 +472,7 @@ public function updateApp(string $appId): JSONResponse {
 	}
 
 	/**
-	 * Unregister ExApp, remove container and volume by default
+	 * Unregister ExApp, remove container by default
 	 */
 	#[PasswordConfirmationRequired]
 	public function uninstallApp(string $appId, bool $removeContainer = true, bool $removeData = false): JSONResponse {

src/components/Apps/AppDetails.vue

@@ -14,7 +14,7 @@
 					type="button"
 					:value="t('settings', 'Remove')"
 					:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
-					@click="remove(app.id)">
+					@click="remove(app.id, removeData)">
 				<input v-if="app.active"
 					class="enable"
 					type="button"
@@ -37,6 +37,12 @@
 					:value="forceEnableButtonText"
 					:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
 					@click="forceEnable(app.id)">
+				<NcCheckboxRadioSwitch v-if="app.canUnInstall"
+					:checked="removeData"
+					:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
+					@update:checked="toggleRemoveData">
+					{{ t('settings', 'Delete data on remove') }}
+				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
 
@@ -100,6 +106,7 @@
 </template>
 
 <script>
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import AppManagement from '../../mixins/AppManagement.js'
 import PrefixMixin from './PrefixMixin.vue'
 import Markdown from './Markdown.vue'
@@ -109,6 +116,7 @@ export default {
 
 	components: {
 		Markdown,
+		NcCheckboxRadioSwitch,
 	},
 	mixins: [AppManagement, PrefixMixin],
 
@@ -119,6 +127,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			removeData: false,
+		}
+	},
+
 	computed: {
 		appstoreUrl() {
 			return `https://apps.nextcloud.com/apps/${this.app.id}`
@@ -143,6 +157,18 @@ export default {
 			return this.app.author
 		},
 	},
+
+	watch: {
+		'app.id'() {
+			this.removeData = false
+		},
+	},
+
+	methods: {
+		toggleRemoveData() {
+			this.removeData = !this.removeData
+		},
+	},
 }
 </script>
 
@@ -155,6 +181,7 @@ export default {
 		&-manage {
 			// if too many, shrink them and ellipsis
 			display: flex;
+			flex-wrap: wrap;
 			input {
 				flex: 0 1 auto;
 				min-width: 0;

src/components/Apps/AppItem.vue

@@ -79,7 +79,7 @@
 				class="uninstall"
 				type="tertiary"
 				:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
-				@click.stop="remove(app.id)">
+				@click.stop="remove(app.id, removeData)">
 				{{ t('settings', 'Remove') }}
 			</NcButton>
 			<NcButton v-if="app.active"
@@ -147,6 +147,7 @@ export default {
 	data() {
 		return {
 			isSelected: false,
+			removeData: false,
 			scrolled: false,
 			screenshotLoaded: false,
 		}

src/mixins/AppManagement.js

@@ -100,8 +100,8 @@ export default {
 				.then((response) => { rebuildNavigation() })
 				.catch((error) => { showError(error) })
 		},
-		remove(appId) {
-			this.$store.dispatch('uninstallApp', { appId })
+		remove(appId, removeData) {
+			this.$store.dispatch('uninstallApp', { appId, removeData })
 				.then((response) => { rebuildNavigation() })
 				.catch((error) => { showError(error) })
 		},

src/store/apps.js

@@ -295,10 +295,10 @@ const actions = {
 		}).catch((error) => context.commit('API_FAILURE', { appId, error }))
 	},
 
-	uninstallApp(context, { appId }) {
+	uninstallApp(context, { appId, removeData }) {
 		return api.requireAdmin().then((response) => {
 			context.commit('startLoading', appId)
-			return api.get(generateUrl(`/apps/app_api/apps/uninstall/${appId}`))
+			return api.get(generateUrl(`/apps/app_api/apps/uninstall/${appId}?removeData=${removeData}`))
 				.then((response) => {
 					context.commit('stopLoading', appId)
 					context.commit('uninstallApp', appId)