Migrate NcModal to NcDialog

Signed-off-by: julia.kirschenheuter <[email protected]>
nextcloud · Aug 29, 2024 · 41148d0 · 41148d0
1 parent 6b20bff
commit 41148d0
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 133 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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')
 })
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,