From a0f60adcefcf548110e53a5664289dd3de2432f7 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Mon, 22 Jan 2024 17:18:56 -0800
Subject: [PATCH] chore(settings): Migrate to built-in NcSelect input label

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 .../src/components/AdminDelegating.vue        |  1 -
 .../AdminDelegation/GroupSelect.vue           |  2 +-
 .../src/components/AdminTwoFactor.vue         | 10 +----
 apps/settings/src/components/AppDetails.vue   |  5 +--
 .../VisibilityDropdown.vue                    |  1 +
 .../src/components/Users/NewUserModal.vue     | 42 ++++---------------
 .../settings/src/components/Users/UserRow.vue |  5 +++
 .../components/Users/UserSettingsDialog.vue   | 10 +----
 8 files changed, 20 insertions(+), 56 deletions(-)

diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
index c614b2bd2f4..223f3043af7 100644
--- a/apps/settings/src/components/AdminDelegating.vue
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -4,7 +4,6 @@
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
 			<div v-for="setting in availableSettings" :key="setting.class">
-				<label :for="setting.id">{{ setting.sectionName }}</label>
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>
diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
index 91593516760..02fce583b56 100644
--- a/apps/settings/src/components/AdminDelegation/GroupSelect.vue
+++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<NcSelect v-model="selected"
-		:input-id="setting.id"
+		:input-label="setting.sectionName"
 		class="group-select"
 		:placeholder="t('settings', 'None')"
 		label="displayName"
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index aba6dc7537f..fcbcfa913be 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -19,11 +19,8 @@
 				{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
 			</p>
 			<p>
-				<label for="enforcedGroups">
-					<span>{{ t('settings', 'Enforced groups') }}</span>
-				</label>
 				<NcSelect v-model="enforcedGroups"
-					input-id="enforcedGroups"
+					:input-label="t('settings', 'Enforced groups')"
 					:options="groups"
 					:disabled="loading"
 					:multiple="true"
@@ -35,11 +32,8 @@
 				{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
 			</p>
 			<p>
-				<label for="excludedGroups">
-					<span>{{ t('settings', 'Excluded groups') }}</span>
-				</label>
 				<NcSelect v-model="excludedGroups"
-					input-id="excludedGroups"
+					:input-label="t('settings', 'Excluded groups')"
 					:options="groups"
 					:disabled="loading"
 					:multiple="true"
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue
index 0440741f4c9..65b5c2c3362 100644
--- a/apps/settings/src/components/AppDetails.vue
+++ b/apps/settings/src/components/AppDetails.vue
@@ -36,11 +36,8 @@
 					:title="t('settings', 'All')"
 					value="">
 				<br />
-				<label for="limitToGroups">
-					<span>{{ t('settings', 'Limit app usage to groups') }}</span>
-				</label>
 				<NcSelect v-if="isLimitedToGroups(app)"
-					input-id="limitToGroups"
+					:input-label="t('settings', 'Limit app usage to groups')"
 					:options="groups"
 					:value="appGroups"
 					:limit="5"
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
index 305410156a2..bc57a64481b 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -28,6 +28,7 @@
 		</label>
 		<NcSelect :input-id="inputId"
 			class="visibility-container__select"
+			label-outside
 			:clearable="false"
 			:options="visibilityOptions"
 			:value="visibilityObject"
diff --git a/apps/settings/src/components/Users/NewUserModal.vue b/apps/settings/src/components/Users/NewUserModal.vue
index ca80ae6d7ec..d564b9b7e45 100644
--- a/apps/settings/src/components/Users/NewUserModal.vue
+++ b/apps/settings/src/components/Users/NewUserModal.vue
@@ -82,12 +82,8 @@
 					:class="{ 'icon-loading-small': loading.groups }"
 					:value="newUser.groups"
 					:required="!settings.isAdmin" />
-				<label class="modal__label"
-					for="new-user-groups">
-					{{ !settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups') }}
-				</label>
 				<NcSelect class="modal__select"
-					input-id="new-user-groups"
+					:input-label="!settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups')"
 					:placeholder="t('settings', 'Set user groups')"
 					:disabled="loading.groups || loading.all"
 					:options="canAddGroups"
@@ -104,13 +100,9 @@
 			</div>
 			<div v-if="subAdminsGroups.length > 0 && settings.isAdmin"
 				class="modal__item">
-				<label class="modal__label"
-					for="new-user-sub-admin">
-					{{ t('settings', 'Administered groups') }}
-				</label>
 				<NcSelect v-model="newUser.subAdminsGroups"
 					class="modal__select"
-					input-id="new-user-sub-admin"
+					:input-label="t('settings', 'Administered groups')"
 					:placeholder="t('settings', 'Set user as admin for …')"
 					:options="subAdminsGroups"
 					:close-on-select="false"
@@ -118,13 +110,9 @@
 					label="name" />
 			</div>
 			<div class="modal__item">
-				<label class="modal__label"
-					for="new-user-quota">
-					{{ t('settings', 'Quota') }}
-				</label>
 				<NcSelect v-model="newUser.quota"
 					class="modal__select"
-					input-id="new-user-quota"
+					:input-label="t('settings', 'Quota')"
 					:placeholder="t('settings', 'Set user quota')"
 					:options="quotaOptions"
 					:clearable="false"
@@ -133,13 +121,9 @@
 			</div>
 			<div v-if="showConfig.showLanguages"
 				class="modal__item">
-				<label class="modal__label"
-					for="new-user-language">
-					{{ t('settings', 'Language') }}
-				</label>
 				<NcSelect	v-model="newUser.language"
 					class="modal__select"
-					input-id="new-user-language"
+					:input-label="t('settings', 'Language')"
 					:placeholder="t('settings', 'Set default language')"
 					:clearable="false"
 					:selectable="option => !option.languages"
@@ -148,15 +132,10 @@
 					label="name" />
 			</div>
 			<div :class="['modal__item managers', { 'icon-loading-small': loading.manager }]">
-				<label class="modal__label"
-					for="new-user-manager">
-					<!-- TRANSLATORS This string describes a manager in the context of an organization -->
-					{{ t('settings', 'Manager') }}
-				</label>
 				<NcSelect v-model="newUser.manager"
 					class="modal__select"
-					input-id="new-user-manager"
-					:placeholder="managerLabel"
+					:input-label="managerLabel"
+					:placeholder="managerPlaceholder"
 					:options="possibleManagers"
 					:user-select="true"
 					label="displayname"
@@ -211,7 +190,9 @@ export default {
 		return {
 			possibleManagers: [],
 			// TRANSLATORS This string describes a manager in the context of an organization
-			managerLabel: t('settings', 'Set user manager'),
+			managerLabel: t('settings', 'Manager'),
+			// TRANSLATORS This string describes a manager in the context of an organization
+			managerPlaceholder: t('settings', 'Set user manager'),
 		}
 	},
 
@@ -424,11 +405,6 @@ export default {
 		align-self: flex-start;
 	}
 
-	&__label {
-		display: block;
-		padding: 4px 0;
-	}
-
 	&__select {
 		width: 100%;
 	}
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index a27b41e11a6..eb1e327808c 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -123,6 +123,7 @@
 				</label>
 				<NcSelect data-cy-user-list-input-groups
 					:data-loading="loading.groups || undefined"
+					label-outside
 					:input-id="'groups' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
@@ -156,6 +157,7 @@
 				</label>
 				<NcSelect data-cy-user-list-input-subadmins
 					:data-loading="loading.subadmins || undefined"
+					label-outside
 					:input-id="'subadmins' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
@@ -183,6 +185,7 @@
 					{{ t('settings', 'Select user quota') }}
 				</label>
 				<NcSelect v-model="editedUserQuota"
+					label-outside
 					:close-on-select="true"
 					:create-option="validateQuota"
 					data-cy-user-list-input-quota
@@ -219,6 +222,7 @@
 				<NcSelect :id="'language' + uniqueId"
 					data-cy-user-list-input-language
 					:data-loading="loading.languages || undefined"
+					label-outside
 					:allow-empty="false"
 					:disabled="isLoadingField"
 					:loading="loading.languages"
@@ -265,6 +269,7 @@
 					class="select--fill"
 					data-cy-user-list-input-manager
 					:data-loading="loading.manager || undefined"
+					label-outside
 					:input-id="'manager' + uniqueId"
 					:close-on-select="true"
 					:disabled="isLoadingField"
diff --git a/apps/settings/src/components/Users/UserSettingsDialog.vue b/apps/settings/src/components/Users/UserSettingsDialog.vue
index 79f7d72c5d5..f8f0925058f 100644
--- a/apps/settings/src/components/Users/UserSettingsDialog.vue
+++ b/apps/settings/src/components/Users/UserSettingsDialog.vue
@@ -60,9 +60,8 @@
 
 		<NcAppSettingsSection id="default-settings"
 			:name="t('settings', 'Defaults')">
-			<label for="default-quota-select">{{ t('settings', 'Default quota') }}</label>
 			<NcSelect v-model="defaultQuota"
-				input-id="default-quota-select"
+				:input-label="t('settings', 'Default quota')"
 				placement="top"
 				:taggable="true"
 				:options="quotaOptions"
@@ -271,10 +270,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-label[for="default-quota-select"] {
-	display: block;
-	padding: 4px 0;
-}
-</style>