feat(app_api): Advanced deploy options

Signed-off-by: Andrey Borysenko <[email protected]>

apps/settings/src/components/AppStoreSidebar/AppDeployOptionsModal.vue

@@ -4,18 +4,19 @@
 -->
 
 <template>
-	<NcModal v-if="show"
-		label-id="form-name"
-		@close="() => $emit('update:show', false)">
+	<NcDialog
+		:open="show"
+		size="normal"
+		:name="t('settings', 'Advanced deploy options')"
+		@update:open="$emit('update:show', $event)">
 		<div class="modal__content">
-			<h2 id="form-name">
-				{{ t('settings', 'Advanced deploy options') }}
-			</h2>
-			<p class="description" style="text-align: center;">
+			<p class="deploy-option__hint">
 				{{ configuredDeployOptions === null ? t('settings', 'Edit ExApp deploy options before installation') : t('settings', 'Configured ExApp deploy options. Can be set only during installation') }}.
-				<a href="https://docs.nextcloud.com/server/latest/admin_manual/exapps_management/AdvancedDeployOptions.html">Learn more</a>
+				<a v-if="deployOptionsDocsUrl"
+					 :href="deployOptionsDocsUrl">
+					{{ t('settings', 'Learn more') }}
+				</a>
 			</p>
-
 			<h3 v-if="environmentVariables.length > 0 || (configuredDeployOptions !== null && configuredDeployOptions.environment_variables.length > 0)">
 				{{ t('settings', 'Environment variables') }}
 			</h3>
@@ -24,40 +25,35 @@
 					:key="envVar.envName"
 					class="deploy-option">
 					<NcTextField :label="envVar.displayName" :value.sync="deployOptions.environment_variables[envVar.envName]" />
-					<p class="description">
+					<p class="deploy-option__hint">
 						{{ envVar.description }}
 					</p>
 				</div>
 			</template>
-			<template v-else-if="Object.keys(configuredDeployOptions).length > 0">
-				<p class="description">
+			<fieldset v-else-if="Object.keys(configuredDeployOptions).length > 0"
+				class="envs">
+				<legend class="deploy-option__hint">
 					{{ t('settings', 'ExApp container environment variables') }}
-				</p>
-				<ul class="envs">
-					<li v-for="envVar in Object.keys(configuredDeployOptions.environment_variables)" :key="envVar">
-						<NcTextField :label="configuredDeployOptions.environment_variables[envVar].displayName ?? envVar"
-							:value="configuredDeployOptions.environment_variables[envVar].value"
-							readonly />
-						<p class="description">
-							{{ configuredDeployOptions.environment_variables[envVar].description }}
-						</p>
-					</li>
-				</ul>
-			</template>
+				</legend>
+				<NcTextField v-for="(value, key) in configuredDeployOptions.environment_variables"
+				 :key="key"
+				 :label="value.displayName ?? key"
+				 :helper-text="value.description"
+				 :value="value.value"
+				 readonly />
+			</fieldset>
 			<template v-else>
-				<p class="description">
+				<p class="deploy-option__hint">
 					{{ t('settings', 'No environment variables defined') }}
 				</p>
 			</template>
 
 			<h3>{{ t('settings', 'Mounts') }}</h3>
 			<template v-if="configuredDeployOptions === null">
-				<p class="description">
+				<p class="deploy-option__hint">
 					{{ t('settings', 'Define host folder mounts to bind to the ExApp container') }}
 				</p>
-				<p class="warning">
-					{{ t('settings', 'Must exist on the Deploy daemon host prior to installing the ExApp') }}
-				</p>
+				<NcNoteCard type="info" :text="t('settings', 'Must exist on the Deploy daemon host prior to installing the ExApp')" />
 				<div v-for="mount in deployOptions.mounts"
 					:key="mount.hostPath"
 					class="deploy-option"
@@ -113,20 +109,15 @@
 				<NcButton v-if="!addingMount"
 					:aria-label="t('settings', 'Add mount')"
 					style="margin-top: 5px;"
-					@click="() => {
-						addingMount = true
-						$nextTick(() => {
-							this.$refs.newMountHostPath.focus()
-						})
-					}">
+					@click="startAddingMount">
 					<template #icon>
 						<NcIconSvgWrapper :path="mdiPlus" />
 					</template>
 					{{ t('settings', 'Add mount') }}
 				</NcButton>
 			</template>
 			<template v-else-if="configuredDeployOptions.mounts.length > 0">
-				<p class="description">
+				<p class="deploy-option__hint">
 					{{ t('settings', 'ExApp container mounts') }}
 				</p>
 				<div v-for="mount in configuredDeployOptions.mounts"
@@ -140,36 +131,34 @@
 					</NcCheckboxRadioSwitch>
 				</div>
 			</template>
-			<template v-else>
-				<p class="description">
-					{{ t('settings', 'No mounts defined') }}
-				</p>
-			</template>
+			<p v-else class="deploy-option__hint">
+				{{ t('settings', 'No mounts defined') }}
+			</p>
+		</div>
 
-			<NcButton v-if="!app.active && (app.canInstall || app.isCompatible) && configuredDeployOptions === null"
+		<template v-if="!app.active && (app.canInstall || app.isCompatible) && configuredDeployOptions === null" #actions>
+			<NcButton
 				:title="enableButtonTooltip"
 				:aria-label="enableButtonTooltip"
 				type="primary"
 				:disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying"
-				style="margin-top: 10px;"
-				@click.stop="() => {
-					enable(app.id, deployOptions)
-					$emit('update:show', false)
-				}">
+				@click.stop="submitDeployOptions">
 				{{ enableButtonText }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
 import { computed, ref } from 'vue'
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
 
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
@@ -184,9 +173,10 @@ import AppManagement from '../../mixins/AppManagement.js'
 export default {
 	name: 'AppDeployOptionsModal',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcButton,
+		NcNoteCard,
 		NcCheckboxRadioSwitch,
 		NcIconSvgWrapper,
 	},
@@ -242,6 +232,7 @@ export default {
 			},
 			addingPortBinding: false,
 			configuredDeployOptions: null,
+			deployOptionsDocsUrl: loadState('settings', 'deployOptionsDocsUrl', null)
 		}
 	},
 	watch: {
@@ -254,6 +245,12 @@ export default {
 		},
 	},
 	methods: {
+		startAddingMount() {
+			this.addingMount = true
+			this.$nextTick(() => {
+				this.$refs.newMountHostPath.focus()
+			})
+		},
 		addMountPoint() {
 			this.deployOptions.mounts.push(this.newMountPoint)
 			this.newMountPoint = {
@@ -283,24 +280,26 @@ export default {
 					this.configuredDeployOptions = null
 				})
 		},
+		submitDeployOptions() {
+			this.enable(this.app.id, this.deployOptions)
+			this.$emit('update:show', false)
+		},
 	},
 }
 </script>
 
 <style scoped>
-.modal__content {
-	margin: 40px;
-}
-
-.modal__content h2 {
-	text-align: center;
-}
-
 .deploy-option {
 	margin: calc(var(--default-grid-baseline) * 4) 0;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
+
+	&__hint {
+		margin-top: 4px;
+		font-size: 0.8em;
+		color: var(--color-text-maxcontrast);
+	}
 }
 
 .envs {
@@ -313,10 +312,4 @@ export default {
 		margin: 10px 0;
 	}
 }
-
-.description {
-	margin-top: 4px;
-	font-size: 0.8em;
-	color: var(--color-text-lighter);
-}
 </style>