[full-ci] Design polishing v3 (#6781)

* Rename Create Space to New Space

* Rename InviteCollaboratorForm SavingButton Title for Spaces

* Address PR issues, Linting, Fix Unittests

* Add changelog

* Update changelog

* Use $gettext as prop default, Linting

* Resolve PR issues

changelog/unreleased/enhancement-design-polishing

@@ -0,0 +1,8 @@
+Enhancement: Design polishing
+
+We've fixed the following issues to enhance UI/UX:
+- wording for new space button
+- wording for invite space member submit button
+
+https://github.com/owncloud/web/pull/6781
+https://github.com/owncloud/web/issues/6555

packages/web-app-files/src/components/AppBar/CreateSpace.vue

@@ -10,7 +10,7 @@
     @click="showCreateSpaceModal"
   >
     <oc-icon name="add" />
-    <translate>Create Space</translate>
+    <translate>New Space</translate>
   </oc-button>
 </template>
 

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -56,7 +56,7 @@
       />
       <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
         <oc-spinner :aria-label="$gettext('Creating share')" size="small" />
-        <span v-translate :aria-hidden="true">Share</span>
+        <span v-translate :aria-hidden="true" v-text="saveButtonLabel" />
       </oc-button>
       <oc-button
         v-else
@@ -68,7 +68,7 @@
         appearance="filled"
         submit="submit"
         @click="share"
-        v-text="$gettext('Share')"
+        v-text="$gettext(saveButtonLabel)"
       />
     </div>
     <oc-hidden-announcer level="assertive" :announcement="announcement" />
@@ -98,6 +98,11 @@ import {
   shareSpaceAddMemberHelp
 } from '../../../../../helpers/contextualHelpers.js'
 
+// just a dummy function to trick gettext tools
+const $gettext = (str) => {
+  return str
+}
+
 export default {
   name: 'InviteCollaboratorForm',
   components: {
@@ -106,11 +111,20 @@ export default {
     RecipientContainer,
     ExpirationDatepicker
   },
+  props: {
+    saveButtonLabel: {
+      type: String,
+      required: false,
+      default: () => $gettext('Share')
+    }
+  },
+
   setup() {
     return {
       hasResharing: useCapabilityFilesSharingResharing()
     }
   },
+
   data() {
     return {
       autocompleteResults: [],

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -2,7 +2,12 @@
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading members')" />
     <template v-else>
-      <invite-collaborator-form v-if="currentUserCanShare" key="new-collaborator" class="oc-my-s" />
+      <invite-collaborator-form
+        v-if="currentUserCanShare"
+        key="new-collaborator"
+        :save-button-label="$gettext('Add')"
+        class="oc-my-s"
+      />
       <template v-if="hasCollaborators">
         <ul
           id="files-collaborators-list"

packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap

@@ -13,7 +13,7 @@ exports[`FileShares if currentUser can not share initially renders no share perm
 exports[`FileShares if currentUser can share initially renders add people dialog 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
   <h3 class="oc-text-bold oc-m-rm oc-text-initial" data-msgid="Share with people" data-current-language="en_US">Share with people</h3>
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <!---->
   <!---->
   <!---->
@@ -23,7 +23,7 @@ exports[`FileShares if currentUser can share initially renders add people dialog
 exports[`FileShares if there are collaborators present correctly passes the shared parent route to the collaborator list item 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
   <h3 class="oc-text-bold oc-m-rm oc-text-initial" data-msgid="Share with people" data-current-language="en_US">Share with people</h3>
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <div class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-my-rm">Shared with</h4>
     <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
@@ -42,7 +42,7 @@ exports[`FileShares if there are collaborators present correctly passes the shar
 exports[`FileShares if there are collaborators present renders sharedWithLabel and sharee list 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
   <h3 class="oc-text-bold oc-m-rm oc-text-initial" data-msgid="Share with people" data-current-language="en_US">Share with people</h3>
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <div class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-my-rm">Shared with</h4>
     <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
@@ -64,7 +64,7 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
 exports[`FileShares if there are no collaborators does not render avatar wrapper or collaborator list 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
   <h3 class="oc-text-bold oc-m-rm oc-text-initial" data-msgid="Share with people" data-current-language="en_US">Share with people</h3>
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <!---->
   <!---->
   <!---->

packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.js.snap

@@ -13,7 +13,7 @@ exports[`SpaceMembers if currentUser can not share other shares are listed, but
 
 exports[`SpaceMembers if currentUser can share initially renders add people dialog 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Add" class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
       <collaborator-list-item-stub share="[object Object]"></collaborator-list-item-stub>
@@ -24,7 +24,7 @@ exports[`SpaceMembers if currentUser can share initially renders add people dial
 
 exports[`SpaceMembers if currentUser is manager allows role edit of the current user if another user is manager 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Add" class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
       <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
@@ -41,7 +41,7 @@ exports[`SpaceMembers if currentUser is manager allows role edit of the current
 
 exports[`SpaceMembers if currentUser is manager does not allow role edit of the current user if they are the only manager 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <invite-collaborator-form-stub savebuttonlabel="Add" class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
       <collaborator-list-item-stub share="[object Object]"></collaborator-list-item-stub>