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

…alog

* Resolves nextcloud/viewer#2390

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

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

apps/files_versions/src/components/VersionLabelDialog.vue

@@ -0,0 +1,113 @@
+<!--
+  - 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() {
+			return [
+				{
+					label: t('files_versions', 'Remove version name'),
+					type: 'error',
+					nativeType: 'reset',
+					callback: () => { this.setVersionLabel('') },
+				},
+				{
+					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>

apps/files_versions/src/views/VersionTab.vue

@@ -28,37 +28,34 @@
 			</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>
 
 <script>
 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: {