From 5900f3e93dc64427248924bb990c02548c25c3eb Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 13 Aug 2021 15:22:05 +0200
Subject: [PATCH] feat: use computed prop for advanced role selection and
 create new labels

---
 .../CollaboratorsEditOptions.vue              | 21 ++++++++-----------
 .../helpers/collaboratorRolesDefinition.js    |  4 ++++
 .../web-app-files/src/mixins/collaborators.js |  3 ++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
index abd02002ff4..190c7f04c27 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
@@ -6,15 +6,11 @@
       appearance="raw"
       justify-content="left"
       gap-size="xsmall"
-      aria-describedby="files-recipient-role-btn-sr-hint"
     >
-      <translate v-if="selectedRole.name === 'advancedRole'" key="advanced-permissions-select"
+      <translate v-if="isAdvancedRoleSelected" key="advanced-permissions-select"
         >Invite with custom permissions</translate
       >
-      <translate
-        v-else
-        key="role-select"
-        :translate-params="{ name: selectedRole.label.toLowerCase() }"
+      <translate v-else key="role-select" :translate-params="{ name: selectedRole.inlineLabel }"
         >Invite as %{ name }</translate
       >
       <oc-icon name="expand_more" />
@@ -37,17 +33,14 @@
         </oc-list>
       </template>
     </oc-drop>
-    <translate id="files-recipient-role-btn-sr-hint" tag="p" class="oc-invisible-sr">
-      Choose a role for all selected recipients.
-    </translate>
     <template v-if="$_ocCollaborators_hasAdditionalPermissions">
-      <label v-if="selectedRole.name !== 'advancedRole'" class="oc-label oc-mt-s">
+      <label v-if="!isAdvancedRoleSelected" class="oc-label oc-mt-s">
         <translate>Additional permissions</translate>
       </label>
       <additional-permissions
         :available-permissions="selectedRole.additionalPermissions"
         :collaborators-permissions="collaboratorsPermissions"
-        :class="{ 'oc-mt-s': selectedRole.name === 'advancedRole' }"
+        :class="{ 'oc-mt-s': isAdvancedRoleSelected }"
         @permissionChecked="checkAdditionalPermissions"
       />
     </template>
@@ -249,6 +242,10 @@ export default {
 
     canResetExpirationDate() {
       return !this.expirationDateEnforced && this.enteredExpirationDate
+    },
+
+    isAdvancedRoleSelected() {
+      return this.selectedRole.name === 'advancedRole'
     }
   },
 
@@ -261,7 +258,7 @@ export default {
   created() {
     if (
       (this.existingRole && this.existingRole.name === 'advancedRole' && !this.selectedRole) ||
-      (this.selectedRole && this.selectedRole.name === 'advancedRole')
+      (this.selectedRole && this.isAdvancedRoleSelected)
     ) {
       this.selectedRole = this.advancedRole
     } else if (this.existingRole && !this.selectedRole) {
diff --git a/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js b/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js
index cfe8bf677e2..b5b111ea2a7 100644
--- a/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js
+++ b/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js
@@ -17,6 +17,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm =
       {
         name: 'viewer',
         label: $gettext('Viewer'),
+        inlineLabel: $gettext('viewer'),
         description: allowSharePerm
           ? $gettext('Download, preview and share')
           : $gettext('Download and preview'),
@@ -25,6 +26,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm =
       {
         name: 'editor',
         label: $gettext('Editor'),
+        inlineLabel: $gettext('editor'),
         description: allowSharePerm
           ? $gettext('Upload, edit, delete, download, preview and share')
           : $gettext('Upload, edit, delete, download and preview'),
@@ -39,6 +41,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm =
     {
       name: 'viewer',
       label: $gettext('Viewer'),
+      inlineLabel: $gettext('viewer'),
       description: allowSharePerm
         ? $gettext('Download, preview and share')
         : $gettext('Download and preview'),
@@ -47,6 +50,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm =
     {
       name: 'editor',
       label: $gettext('Editor'),
+      inlineLabel: $gettext('editor'),
       description: allowSharePerm
         ? $gettext('Edit, download, preview and share')
         : $gettext('Edit, download and preview'),
diff --git a/packages/web-app-files/src/mixins/collaborators.js b/packages/web-app-files/src/mixins/collaborators.js
index ad5ea7abdcb..1af9b1f8230 100644
--- a/packages/web-app-files/src/mixins/collaborators.js
+++ b/packages/web-app-files/src/mixins/collaborators.js
@@ -24,7 +24,8 @@ export default {
     advancedRole() {
       const advancedRole = {
         name: 'advancedRole',
-        label: this.$gettext('Advanced permissions'),
+        label: this.$gettext('Custom permissions'),
+        inlineLabel: this.$gettext('custom permissions'),
         description: this.$gettext('Set detailed permissions'),
         permissions: ['read'],
         additionalPermissions: {