fix(files_versions): Migrate version name dialog from NcModal to NcDialog

* Resolves https://github.com/nextcloud/viewer/issues/2390

Make the version name dialog a real dialog instead of a modal.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

3 files changed, 131 insertions, 109 deletions

diff --git a/apps/files_versions/src/components/VersionLabelDialog.vue b/apps/files_versions/src/components/VersionLabelDialog.vue
new file mode 100644
index 00000000000..9a2ca59b80a
--- /dev/null
+++ b/apps/files_versions/src/components/VersionLabelDialog.vue
@@ -0,0 +1,123 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog :buttons="dialogButtons"
+		content-classes="version-label-modal"
+		is-form
+		:open="open"
+		size="normal"
+		:name="t('files_versions', 'Name this version')"
+		@update:open="$emit('update:open', $event)"
+		@submit="setVersionLabel(editedVersionLabel)">
+		<NcTextField ref="labelInput"
+			class="version-label-modal__input"
+			:label="t('files_versions', 'Version name')"
+			:placeholder="t('files_versions', 'Version name')"
+			:value.sync="editedVersionLabel" />
+
+		<p class="version-label-modal__info">
+			{{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }}
+		</p>
+	</NcDialog>
+</template>
+
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+import svgCheck from '@mdi/svg/svg/check.svg?raw'
+
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+type Focusable = Vue & { focus: () => void }
+
+export default defineComponent({
+	name: 'VersionLabelDialog',
+	components: {
+		NcDialog,
+		NcTextField,
+	},
+	props: {
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		versionLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			editedVersionLabel: '',
+		}
+	},
+	computed: {
+		dialogButtons() {
+			const buttons: unknown[] = []
+			if (this.versionLabel.trim() === '') {
+				// If there is no label just offer a cancel action that just closes the dialog
+				buttons.push({
+					label: t('files_versions', 'Cancel'),
+				})
+			} else {
+				// If there is already a label set, offer to remove the version label
+				buttons.push({
+					label: t('files_versions', 'Remove version name'),
+					type: 'error',
+					nativeType: 'reset',
+					callback: () => { this.setVersionLabel('') },
+				})
+			}
+			return [
+				...buttons,
+				{
+					label: t('files_versions', 'Save version name'),
+					type: 'primary',
+					nativeType: 'submit',
+					icon: svgCheck,
+				},
+			]
+		},
+	},
+	watch: {
+		versionLabel: {
+			immediate: true,
+			handler(label) {
+				this.editedVersionLabel = label ?? ''
+			},
+		},
+		open: {
+			immediate: true,
+			handler(open) {
+				if (open) {
+					this.$nextTick(() => (this.$refs.labelInput as Focusable).focus())
+				}
+				this.editedVersionLabel = this.versionLabel
+			},
+		},
+	},
+	methods: {
+		setVersionLabel(label: string) {
+			this.$emit('label-update', label)
+		},
+
+		t,
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.version-label-modal {
+	&__info {
+		color: var(--color-text-maxcontrast);
+		margin-block: calc(3 * var(--default-grid-baseline));
+	}
+
+	&__input {
+		margin-block-start: calc(2 * var(--default-grid-baseline));
+	}
+}
+</style>
diff --git a/apps/files_versions/src/components/VersionLabelForm.vue b/apps/files_versions/src/components/VersionLabelForm.vue
deleted file mode 100644
index a0efcbe47ee..00000000000
--- a/apps/files_versions/src/components/VersionLabelForm.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<form class="version-label-modal"
-		@submit.prevent="setVersionLabel(innerVersionLabel)">
-		<label>
-			<div class="version-label-modal__title">{{ t('files_versions', 'Version name') }}</div>
-			<NcTextField ref="labelInput"
-				:value.sync="innerVersionLabel"
-				:placeholder="t('files_versions', 'Version name')"
-				:label-outside="true" />
-		</label>
-
-		<div class="version-label-modal__info">
-			{{ t('files_versions', 'Named versions are persisted, and excluded from automatic cleanups when your storage quota is full.') }}
-		</div>
-
-		<div class="version-label-modal__actions">
-			<NcButton :disabled="innerVersionLabel.trim().length === 0" @click="setVersionLabel('')">
-				{{ t('files_versions', 'Remove version name') }}
-			</NcButton>
-			<NcButton type="primary" native-type="submit">
-				<template #icon>
-					<Check />
-				</template>
-				{{ t('files_versions', 'Save version name') }}
-			</NcButton>
-		</div>
-	</form>
-</template>
-
-<script lang="ts">
-import Check from 'vue-material-design-icons/Check.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import { translate } from '@nextcloud/l10n'
-
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-	name: 'VersionLabelForm',
-	components: {
-		NcButton,
-		NcTextField,
-		Check,
-	},
-	props: {
-		versionLabel: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			innerVersionLabel: this.versionLabel,
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			(this.$refs.labelInput as Vue).$el.getElementsByTagName('input')[0].focus()
-		})
-	},
-	methods: {
-		setVersionLabel(label: string) {
-			this.$emit('label-update', label)
-		},
-
-		t: translate,
-	},
-})
-</script>
-
-<style scoped lang="scss">
-.version-label-modal {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	height: 250px;
-	padding: 16px;
-
-	&__title {
-		margin-bottom: 12px;
-		font-weight: 600;
-	}
-
-	&__info {
-		margin-top: 12px;
-		color: var(--color-text-maxcontrast);
-	}
-
-	&__actions {
-		display: flex;
-		justify-content: space-between;
-		margin-top: 64px;
-	}
-}
-</style>
diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index b656fc75d4f..6fa5ac3fcaa 100644
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -28,11 +28,10 @@
 			</template>
 			<NcLoadingIcon v-if="loading" slot="loader" class="files-list-viewer__loader" />
 		</VirtualScrolling>
-		<NcModal v-if="showVersionLabelForm"
-			:title="t('files_versions', 'Name this version')"
-			@close="showVersionLabelForm = false">
-			<VersionLabelForm :version-label="editedVersion.label" @label-update="handleLabelUpdate" />
-		</NcModal>
+		<VersionLabelDialog v-if="editedVersion"
+			:open.sync="showVersionLabelForm"
+			:version-label="editedVersion.label"
+			@label-update="handleLabelUpdate" />
 	</div>
 </template>
 
@@ -40,25 +39,23 @@
 import path from 'path'
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { getCurrentUser } from '@nextcloud/auth'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
 import { fetchVersions, deleteVersion, restoreVersion, setVersionLabel } from '../utils/versions.ts'
 import Version from '../components/Version.vue'
 import VirtualScrolling from '../components/VirtualScrolling.vue'
-import VersionLabelForm from '../components/VersionLabelForm.vue'
+import VersionLabelDialog from '../components/VersionLabelDialog.vue'
 
 export default {
 	name: 'VersionTab',
 	components: {
 		Version,
 		VirtualScrolling,
-		VersionLabelForm,
+		VersionLabelDialog,
 		NcLoadingIcon,
-		NcModal,
 	},
 	mixins: [
 		isMobile,
@@ -71,6 +68,7 @@ export default {
 			versions: [],
 			loading: false,
 			showVersionLabelForm: false,
+			editedVersion: null,
 		}
 	},
 	computed: {