enh: warn during table manager promotion/demotion

cypress/support/commands.js

@@ -470,8 +470,8 @@ Cypress.Commands.add('addUserToGroup', (userId, groupId) => {
 
 Cypress.Commands.add('removeColumn', (title) => {
 	cy.get('.custom-table table tr th .cell').contains(title).click()
-	cy.get('.v-popper__popper ul.nc-button-group-content').last().get('button').last().click()
-	cy.get('.modal__content button').contains('Confirm').click()
+	cy.get('[data-cy="deleteColumnActionBtn"] button').click()
+	cy.get('[data-cy="confirmDialog"] button').contains('Confirm').click()
 })
 
 // fill in a value in the 'create row' or 'edit row' model

src/modules/sidebar/partials/ShareList.vue

@@ -64,7 +64,7 @@
 							</NcActionCheckbox>
 							<NcActionButton v-if="!isView && !personHasTableManagePermission(share.receiver)"
 								:close-after-click="true"
-								@click="promoteToManager(share)">
+								@click="warnOnPromote(share)">
 								<template #icon>
 									<Crown :size="20" />
 								</template>
@@ -114,6 +114,16 @@
 		<div v-else>
 			{{ t('tables', 'No shares') }}
 		</div>
+		<div>
+			<DialogConfirmation :description="t('tables', 'After table promotion, any applications based on this table created by the share recipients will continue to consume its data even if you demote them later')"
+				:title="t('tables', 'Confirm table manager promotion')"
+				:cancel-title="t('tables', 'Cancel')"
+				:confirm-title="t('tables', 'Promote to table manager')"
+				confirm-class="warning"
+				:show-modal="showModal"
+				@confirm="promoteToManager"
+				@cancel="showModal=false" />
+		</div>
 	</div>
 </template>
 
@@ -127,6 +137,9 @@ import Crown from 'vue-material-design-icons/Crown.vue'
 import Information from 'vue-material-design-icons/Information.vue'
 import Account from 'vue-material-design-icons/Account.vue'
 import moment from '@nextcloud/moment'
+import { showWarning } from '@nextcloud/dialogs'
+import DialogConfirmation from '../../../shared/modals/DialogConfirmation.vue'
+import '@nextcloud/dialogs/style.css'
 
 export default {
 	components: {
@@ -142,6 +155,7 @@ export default {
 		NcActionSeparator,
 		OpenInNew,
 		Crown,
+		DialogConfirmation,
 	},
 
 	mixins: [formatting],
@@ -158,6 +172,8 @@ export default {
 			loading: false,
 			// To enable the share info popup
 			debug: false,
+			showModal: false,
+			currentShare: {},
 		}
 	},
 
@@ -205,10 +221,18 @@ export default {
 		updatePermission(share, permission, value) {
 			this.$emit('update', { id: share.id, permission, value })
 		},
-		promoteToManager(share) {
-			this.$emit('update', { id: share.id, permission: 'manage', value: true })
+		warnOnPromote(share) {
+			this.currentShare = share
+			this.showModal = true
+		},
+		promoteToManager() {
+			if (!this.currentShare) return
+			this.$emit('update', { id: this.currentShare?.id, permission: 'manage', value: true })
+			this.currentShare = {}
+			this.showModal = false
 		},
-		demoteManager(share) {
+		async demoteManager(share) {
+			showWarning(t('tables', 'Any application created by a demoted share recipients using a shared table will continue to consume its data.', { share: share.displayName }))
 			this.$emit('update', { id: share.id, permission: 'manage', value: false })
 		},
 		personHasTableManagePermission(userId) {

src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue

@@ -110,6 +110,7 @@
 					</NcActionButton>
 					<NcActionButton v-if="showDeleteColumn"
 						:aria-label="t('tables', 'Delete column')"
+						data-cy="deleteColumnActionBtn"
 						@click="deleteColumn()">
 						<template #icon>
 							<Delete :size="25" />

src/shared/modals/DialogConfirmation.vue

@@ -3,34 +3,32 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" @close="$emit('cancel')">
-		<div class="modal__content">
-			<div class="row">
-				<div v-if="title" class="col-4">
-					<h2>{{ title }}</h2>
-				</div>
-				<div v-if="description" class="col-4">
-					<p>{{ description }}</p>
-				</div>
-			</div>
-			<div class="row space-T">
-				<div class="fix-col-4 end">
-					<NcButton :type="confirmClass" :aria-label="confirmTitle" @click="$emit('confirm')">
-						{{ confirmTitle }}
-					</NcButton>
-				</div>
+	<NcDialog v-if="showModal" :out-transition="true"
+		size="normal" close-on-click-outside :name="title" @closing="$emit('cancel')"
+		data-cy="confirmDialog">
+		<div class="row">
+			<div v-if="description" class="col-4">
+				<p>{{ description }}</p>
 			</div>
 		</div>
-	</NcModal>
+		<template #actions>
+			<NcButton :aria-label="cancelTitle" :type="cancelClass" @click="$emit('cancel')">
+				{{ cancelTitle }}
+			</NcButton>
+			<NcButton :type="confirmClass" :aria-label="confirmTitle" @click="$emit('confirm')">
+				{{ confirmTitle }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'DialogConfirmation',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 	},
 	props: {
@@ -46,6 +44,14 @@
 			type: String,
 			default: null,
 		},
+		cancelTitle: {
+			type: String,
+			default: t('tables', 'Cancel'),
+		},
+		cancelClass: {
+			type: String,
+			default: 'tertiary',
+		},
 		confirmTitle: {
 			type: String,
 			default: t('tables', 'Confirm'),