From 41148d09a59aece3ade3c48f21a86962ef3e353e Mon Sep 17 00:00:00 2001
From: "julia.kirschenheuter" <julia.kirschenheuter@nextcloud.com>
Date: Thu, 25 Jul 2024 15:37:51 +0200
Subject: [PATCH] Migrate `NcModal` to `NcDialog`

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
---
 css/modal.css                            |  2 +-
 cypress/e2e/column-selection-multi.cy.js |  7 +++--
 cypress/e2e/column-selection.cy.js       |  4 +--
 cypress/e2e/column-text-line.cy.js       |  2 +-
 cypress/support/e2e.js                   |  3 +-
 src/modules/modals/CreateColumn.vue      | 15 +++++-----
 src/modules/modals/CreateContext.vue     | 17 +++++------
 src/modules/modals/CreateRow.vue         | 18 +++++-------
 src/modules/modals/CreateTable.vue       | 22 +++++++-------
 src/modules/modals/EditColumn.vue        | 37 ++++++++++++++----------
 src/modules/modals/EditContext.vue       | 17 +++++------
 src/modules/modals/EditRow.vue           | 18 +++++-------
 src/modules/modals/EditTable.vue         | 16 ++++------
 src/modules/modals/FileActionImport.vue  | 14 +++++----
 src/modules/modals/Import.vue            | 22 +++++---------
 src/modules/modals/TransferContext.vue   | 16 ++++------
 src/modules/modals/TransferTable.vue     | 16 ++++------
 17 files changed, 113 insertions(+), 133 deletions(-)

diff --git a/css/modal.css b/css/modal.css
index bc95b535f..fab6eea44 100644
--- a/css/modal.css
+++ b/css/modal.css
@@ -7,7 +7,7 @@
 }
 
 .modal__content {
-	padding: 20px;
+	padding: 0 0 20px 20px;
 }
 
 .modal__content h2 {
diff --git a/cypress/e2e/column-selection-multi.cy.js b/cypress/e2e/column-selection-multi.cy.js
index be1c62fe3..02de7e04d 100644
--- a/cypress/e2e/column-selection-multi.cy.js
+++ b/cypress/e2e/column-selection-multi.cy.js
@@ -30,10 +30,11 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
+		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
 		cy.get('.modal__content span[title="first option"]').should('be.visible')
 		cy.get('.modal__content span[title="second option"]').should('be.visible')
+		cy.get('.modal__content .title').click() // focus out of the multiselect
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('first option').should('be.visible')
 		cy.get('.custom-table table tr td div').contains('second option').should('be.visible')
@@ -44,6 +45,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.get('.vs--multiple .vs__selected button').first().click()
 		cy.get('.modal__content .slot input').first().click()
 		cy.get('ul.vs__dropdown-menu li span[title="👋 third option"]').click()
+		cy.get('.modal__content .title').click() // focus out of the multiselect
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('third option').should('be.visible')
 
@@ -58,6 +60,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.get('.NcTable tr td button').first().click()
 		cy.get('.modal__content .slot input').first().click()
 		cy.get('ul.vs__dropdown-menu li span[title="first option"]').click()
+		cy.get('.modal__content .title').click() // focus out of the multiselect
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('first option').should('be.visible')
 		cy.get('.custom-table table tr td div').contains('third option').should('be.visible')
@@ -76,7 +79,7 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
+		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').should('exist')
 		cy.get('.NcTable tr td button').should('exist')
diff --git a/cypress/e2e/column-selection.cy.js b/cypress/e2e/column-selection.cy.js
index 96277b325..a8edd1c78 100644
--- a/cypress/e2e/column-selection.cy.js
+++ b/cypress/e2e/column-selection.cy.js
@@ -30,7 +30,7 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
+		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
 		cy.get('.modal__content .title').click()
 		cy.get('.vs__dropdown-toggle .vs__selected span[title="second option"]').should('exist')
@@ -71,7 +71,7 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
+		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').should('exist')
 		cy.get('.NcTable tr td button').should('exist')
diff --git a/cypress/e2e/column-text-line.cy.js b/cypress/e2e/column-text-line.cy.js
index d1d1fc4ea..e6cc52b49 100644
--- a/cypress/e2e/column-text-line.cy.js
+++ b/cypress/e2e/column-text-line.cy.js
@@ -30,7 +30,7 @@ describe('Test column text line', () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
+		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains('text line').should('be.visible')
 		cy.get('.modal__content input').first().should('be.visible')
 		cy.get('.modal__content input').first().clear().type('hello world')
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
index a3cb3f742..26a4dd3b9 100644
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -20,5 +20,6 @@
 import './commands.js'
 
 Cypress.on('uncaught:exception', (err) => {
-	return !err.message.includes('ResizeObserver loop limit exceeded')
+	return !err.message.includes('ResizeObserver loop limit exceeded') &&
+		!err.message.includes('ResizeObserver loop completed with undelivered notifications')
 })
\ No newline at end of file
diff --git a/src/modules/modals/CreateColumn.vue b/src/modules/modals/CreateColumn.vue
index b7f9db2c7..2c5a46c13 100644
--- a/src/modules/modals/CreateColumn.vue
+++ b/src/modules/modals/CreateColumn.vue
@@ -3,13 +3,12 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" size="large" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create column')"
+		size="large"
+		@closing="actionCancel">
 		<div class="modal__content create-column">
 			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create column') }}</h2>
-				</div>
-
 				<div class="fix-col-2">
 					<MainForm :description.sync="column.description"
 						:mandatory.sync="column.mandatory"
@@ -88,7 +87,7 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
@@ -103,7 +102,7 @@ import MainForm from '../../shared/components/ncTable/partials/columnTypePartial
 import DatetimeForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeForm.vue'
 import DatetimeDateForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeDateForm.vue'
 import DatetimeTimeForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeTimeForm.vue'
-import { NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcDialog, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import SelectionForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue'
 import SelectionMultiForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue'
 import { showError, showInfo, showSuccess, showWarning } from '@nextcloud/dialogs'
@@ -117,7 +116,7 @@ export default {
 	name: 'CreateColumn',
 	components: {
 		ColumnTypeSelection,
-		NcModal,
+		NcDialog,
 		NumberForm,
 		TextLineForm,
 		TextLinkForm,
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
index 04a809cf5..04df5de6a 100644
--- a/src/modules/modals/CreateContext.vue
+++ b/src/modules/modals/CreateContext.vue
@@ -3,13 +3,12 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" size="normal" data-cy="createContextModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create an application')"
+		size="normal"
+		data-cy="createContextModal"
+		@closing="actionCancel">
 		<div class="modal__content">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create an application') }}</h2>
-				</div>
-			</div>
 			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
@@ -51,11 +50,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
@@ -66,7 +65,7 @@ import permissionBitmask from '../../shared/components/ncContextResource/mixins/
 export default {
 	name: 'CreateContext',
 	components: {
-		NcModal,
+		NcDialog,
 		NcIconPicker,
 		NcButton,
 		NcIconSvgWrapper,
diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index b9fc56576..5e7566c97 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -3,15 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" data-cy="createRowModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create row')"
+		data-cy="createRowModal"
+		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div class="row">
-				<div class="col-4">
-					<h2 style="padding: 0" tabindex="0">
-						{{ t('tables', 'Create row') }}
-					</h2>
-				</div>
-			</div>
 			<div v-for="column in nonMetaColumns" :key="column.id" :data-cy="column.title">
 				<ColumnFormComponent
 					:column="column"
@@ -34,11 +30,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
@@ -48,7 +44,7 @@ import rowHelper from '../../shared/components/ncTable/mixins/rowHelper.js'
 export default {
 	name: 'CreateRow',
 	components: {
-		NcModal,
+		NcDialog,
 		ColumnFormComponent,
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
index 129371580..135748d82 100644
--- a/src/modules/modals/CreateTable.vue
+++ b/src/modules/modals/CreateTable.vue
@@ -3,20 +3,18 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" size="normal"
-		data-cy="createTableModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create table')"
+		data-cy="createTableModal"
+		size="normal"
+		@closing="actionCancel">
 		<div class="modal__content">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create table') }}</h2>
-				</div>
-			</div>
-			<div class="row">
+			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
 				<div class="col-4 content-emoji">
-					<NcEmojiPicker :close-on-select="true" @select="setIcon">
+					<NcEmojiPicker class="content--emoji" :close-on-select="true" @select="setIcon">
 						<NcButton type="tertiary"
 							:aria-label="t('tables', 'Select emoji for table')"
 							:title="t('tables', 'Select emoji')"
@@ -82,11 +80,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcEmojiPicker, NcButton } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import axios from '@nextcloud/axios'
@@ -100,7 +98,7 @@ import { mapState } from 'vuex'
 export default {
 	name: 'CreateTable',
 	components: {
-		NcModal,
+		NcDialog,
 		NcEmojiPicker,
 		NcButton,
 		NcTile,
diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
index 4eb610171..0808a25d0 100644
--- a/src/modules/modals/EditColumn.vue
+++ b/src/modules/modals/EditColumn.vue
@@ -3,16 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal size="large" @close="actionCancel">
+	<NcDialog size="large"
+		:name="t('tables', 'Edit column')"
+		@closing="actionCancel">
 		<div class="modal__content">
 			<div v-if="loading" class="icon-loading" />
-
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Edit column') }}</h2>
-				</div>
-			</div>
-
 			<div class="row space-L">
 				<div class="col-2">
 					<MainForm :description.sync="editColumn.description"
@@ -26,15 +21,15 @@
 				</div>
 			</div>
 			<div class="buttons">
-				<div class="flex">
+				<div class="edit-info">
 					<ColumnInfoPopover :column="column" />&nbsp;
 					<div class="last-edit-info">
 						{{ t('tables', 'Last edit') + ': ' }}
 						{{ updateTime }}&nbsp;
-						<NcUserBubble :user="column.lastEditBy" :display-name="column.lastEditByDisplayName ? column.lastEditByDisplayName : column.lastEditBy" />
+						<NcUserBubble class="last-edit-info-bubble" :user="column.lastEditBy" :display-name="column.lastEditByDisplayName ? column.lastEditByDisplayName : column.lastEditBy" />
 					</div>
 				</div>
-				<div class="flex">
+				<div class="right-additional-button">
 					<div class="button-padding-right">
 						<NcButton type="secondary" :aria-label="t('tables', 'Cancel')" @click="actionCancel">
 							{{ t('tables', 'Cancel') }}
@@ -46,11 +41,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcActions, NcActionButton, NcButton, NcUserBubble } from '@nextcloud/vue'
+import { NcDialog, NcActions, NcActionButton, NcButton, NcUserBubble } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import ColumnInfoPopover from '../main/partials/ColumnInfoPopover.vue'
@@ -89,7 +84,7 @@ export default {
 		MainForm,
 		SelectionForm,
 		SelectionMultiForm,
-		NcModal,
+		NcDialog,
 		NcActions,
 		NcActionButton,
 		ColumnInfoPopover,
@@ -222,12 +217,24 @@ export default {
 .last-edit-info {
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
 }
 
 .buttons :deep(.user-bubble__wrapper) {
 	padding-top: 5px;
 }
 
-.flex { display: flex }
+.edit-info {
+	display: flex;
+}
+
+.right-additional-button {
+	display: flex;
+	align-items: center;
+}
+
+.last-edit-info-bubble {
+	display: flex!important;
+}
 
 </style>
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
index 7bdced008..5690ca21f 100644
--- a/src/modules/modals/EditContext.vue
+++ b/src/modules/modals/EditContext.vue
@@ -3,14 +3,13 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" size="normal" data-cy="editContextModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Edit application')"
+		size="normal"
+		data-cy="editContextModal"
+		@closing="actionCancel">
 		<div class="modal__content" data-cy="editContextModal">
 			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Edit application') }}</h2>
-				</div>
-			</div>
-			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
@@ -59,11 +58,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 import '@nextcloud/dialogs/style.css'
@@ -79,7 +78,7 @@ import permissionsMixin from '../../shared/components/ncTable/mixins/permissions
 export default {
 	name: 'EditContext',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcIconPicker,
 		NcIconSvgWrapper,
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index 487f130b8..22629c583 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -3,15 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" data-cy="editRowModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		data-cy="editRowModal"
+		:name="t('tables', 'Edit row')"
+		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div class="row">
-				<div class="col-4">
-					<h2 tabindex="0">
-						{{ t('tables', 'Edit row') }}
-					</h2>
-				</div>
-			</div>
 			<div v-for="column in nonMetaColumns" :key="column.id">
 				<ColumnFormComponent
 					:column="column"
@@ -46,11 +42,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcNoteCard } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcNoteCard } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/style.css'
@@ -61,7 +57,7 @@ import rowHelper from '../../shared/components/ncTable/mixins/rowHelper.js'
 export default {
 	name: 'EditRow',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		ColumnFormComponent,
 		NcNoteCard,
diff --git a/src/modules/modals/EditTable.vue b/src/modules/modals/EditTable.vue
index 5090a3c49..ae49c0143 100644
--- a/src/modules/modals/EditTable.vue
+++ b/src/modules/modals/EditTable.vue
@@ -3,15 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal"
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Edit table')"
 		size="normal"
-		@close="actionCancel">
+		@closing="actionCancel">
 		<div class="modal__content" data-cy="editTableModal">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Edit table') }}</h2>
-				</div>
-			</div>
 			<div class="row">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
@@ -73,11 +69,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcEmojiPicker, NcButton, NcUserBubble } from '@nextcloud/vue'
+import { NcDialog, NcEmojiPicker, NcButton, NcUserBubble } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import { mapGetters } from 'vuex'
@@ -88,7 +84,7 @@ import TableDescription from '../main/sections/TableDescription.vue'
 export default {
 	name: 'EditTable',
 	components: {
-		NcModal,
+		NcDialog,
 		NcEmojiPicker,
 		NcButton,
 		NcUserBubble,
diff --git a/src/modules/modals/FileActionImport.vue b/src/modules/modals/FileActionImport.vue
index 3ba6854d5..6ef692723 100644
--- a/src/modules/modals/FileActionImport.vue
+++ b/src/modules/modals/FileActionImport.vue
@@ -3,10 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="!importResults">
+	<NcDialog v-if="!importResults"
+		:name="t('tables', 'Import file into Tables')"
+		size="normal"
+		@closing="closeImportDialog">
 		<div class="modal__content">
-			<h2>{{ t('tables', 'Import file into Tables') }}</h2>
-
 			<RowFormWrapper
 				class="row"
 				:title="t('tables', 'Import as new table')"
@@ -86,7 +87,7 @@
 				</NcButton>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 
 	<NcDialog v-else
 		:name="t('tables', 'Import successful')"
@@ -104,7 +105,6 @@
 
 <script>
 import {
-	NcModal,
 	NcDialog,
 	NcButton,
 	NcSelect,
@@ -125,7 +125,6 @@ export default {
 	name: 'FileActionImport',
 
 	components: {
-		NcModal,
 		NcButton,
 		NcDialog,
 		ImportResults,
@@ -227,6 +226,9 @@ export default {
 
 			this.importingFile = false
 		},
+		closeImportDialog() {
+			this.$emit('close')
+		},
 	},
 }
 
diff --git a/src/modules/modals/Import.vue b/src/modules/modals/Import.vue
index a6a8f0c03..e6b663630 100644
--- a/src/modules/modals/Import.vue
+++ b/src/modules/modals/Import.vue
@@ -3,14 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal" size="normal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="title"
+		size="normal"
+		@closing="actionCancel">
 		<div class="modal__content">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ title }}</h2>
-				</div>
-			</div>
-
 			<!-- Starting -->
 			<div v-if="!loading && result === null && preview === null && !waitForReload">
 				<div class="row space-T">
@@ -108,11 +105,11 @@
 				<NcLoadingIcon :name="t('tables', 'Loading table data')" :size="64" />
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcCheckboxRadioSwitch, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcCheckboxRadioSwitch, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { getFilePickerBuilder, FilePickerType, showError, showWarning } from '@nextcloud/dialogs'
 import RowFormWrapper from '../../shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
@@ -135,7 +132,7 @@ export default {
 		IconFolder,
 		IconUpload,
 		IconFile,
-		NcModal,
+		NcDialog,
 		NcButton,
 		ImportResults,
 		ImportPreview,
@@ -496,11 +493,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
-	h2 {
-		margin-bottom: 0;
-	}
-
 	:deep(.slot), .middle {
 		align-items: center;
 	}
diff --git a/src/modules/modals/TransferContext.vue b/src/modules/modals/TransferContext.vue
index b2327b776..a8fb2bcb2 100644
--- a/src/modules/modals/TransferContext.vue
+++ b/src/modules/modals/TransferContext.vue
@@ -3,15 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal"
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Transfer application')"
 		size="normal"
-		@close="actionCancel">
+		@closing="actionCancel">
 		<div class="modal__content" data-cy="transferContextModal">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Transfer application') }}</h2>
-				</div>
-			</div>
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer the application "{context}" to another user', { context: context.name }) }}</h3>
 				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="newOwnerId" />
@@ -24,11 +20,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcButton } from '@nextcloud/vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
@@ -39,7 +35,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 export default {
 	name: 'TransferContext',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcUserPicker,
 	},
diff --git a/src/modules/modals/TransferTable.vue b/src/modules/modals/TransferTable.vue
index 421f3b6b7..6cdcf1774 100644
--- a/src/modules/modals/TransferTable.vue
+++ b/src/modules/modals/TransferTable.vue
@@ -3,15 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="showModal"
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Transfer table')"
 		size="normal"
-		@close="actionCancel">
+		@closing="actionCancel">
 		<div class="modal__content" data-cy="transferTableModal">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Transfer table') }}</h2>
-				</div>
-			</div>
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer this table to another user') }}</h3>
 				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="selectedUserId" />
@@ -24,11 +20,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcButton } from '@nextcloud/vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
@@ -39,7 +35,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 export default {
 	name: 'TransferTable',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcUserPicker,
 	},