Removed favorite button from file list and added it instead in action…

… dropdown

apps/files/src/components/AllFilesList.vue

@@ -8,14 +8,6 @@
     :is-action-enabled="isActionEnabled"
   >
     <template #headerColumns>
-      <div v-if="!publicPage()">
-        <span class="oc-visually-hidden" v-text="favoritesHeaderText" />
-        <oc-star
-          id="files-table-header-star"
-          aria-hidden="true"
-          class="uk-display-block uk-disabled"
-        />
-      </div>
       <div ref="headerNameColumn" class="uk-text-truncate uk-text-meta uk-width-expand">
         <sortable-column-header
           :aria-label="$gettext('Sort files by name')"
@@ -60,13 +52,6 @@
       </div>
     </template>
     <template #rowColumns="{ item: rowItem, index }">
-      <div v-if="!publicPage()">
-        <oc-star
-          class="uk-display-block"
-          :shining="rowItem.starred"
-          @click.native.stop="toggleFileFavorite(rowItem)"
-        />
-      </div>
       <div
         :ref="index === 0 ? 'firstRowNameColumn' : null"
         class="uk-text-truncate uk-width-expand"
@@ -345,12 +330,6 @@ export default {
           })
         })
     },
-    toggleFileFavorite(item) {
-      this.markFavorite({
-        client: this.$client,
-        file: item
-      })
-    },
 
     isActionEnabled(item, action) {
       return action.isEnabled(item, this.parentFolder)

apps/files/src/components/FileDetails.vue

@@ -19,7 +19,13 @@
           />
         </div>
         <div v-if="$route.name !== 'files-shared-with-others'">
-          <oc-star v-if="!publicPage()" class="uk-inline" :shining="highlightedFile.starred" />
+          <oc-star
+            v-if="!publicPage()"
+            id="files-sidebar-star-icon"
+            class="uk-inline"
+            :shining="highlightedFile.starred"
+            @click.native.stop="toggleFileFavorite(highlightedFile)"
+          />
           <template v-if="highlightedFile.size > -1">
             {{ highlightedFile.size | fileSize }},
           </template>
@@ -96,13 +102,19 @@ export default {
     this.activeTab = this.defaultTab
   },
   methods: {
-    ...mapActions('Files', ['deleteFiles']),
+    ...mapActions('Files', ['deleteFiles', 'markFavorite']),
     ...mapActions(['showMessage']),
     close() {
       this.$emit('reset')
     },
     showSidebar(app) {
       this.activeTab = app
+    },
+    toggleFileFavorite(file) {
+      this.markFavorite({
+        client: this.$client,
+        file: file
+      })
     }
   }
 }

apps/files/src/components/FileList.vue

@@ -185,7 +185,6 @@ export default {
   methods: {
     ...mapActions('Files', [
       'loadFolder',
-      'markFavorite',
       'setHighlightedFile',
       'setPublicLinkPassword',
       'resetFileSelection',
@@ -201,12 +200,6 @@ export default {
         true
       )
     },
-    toggleFileFavorite(item) {
-      this.markFavorite({
-        client: this.$client,
-        file: item
-      })
-    },
     $_ocFileName(item) {
       if (this.$route.name === 'files-favorites') {
         const pathSplit = item.path.substr(1).split('/')

apps/files/src/components/FilesLists/RowActionsDropdown.vue

@@ -9,17 +9,17 @@
     class="uk-open uk-drop-stack"
   >
     <ul class="uk-list">
-      <li v-for="action in actions" :key="action.ariaLabel">
+      <li v-for="action in actions" :key="action.ariaLabel(item)">
         <oc-button
           class="uk-width-1-1"
           :icon="action.icon"
-          :aria-label="action.ariaLabel"
+          :aria-Label="action.ariaLabel(item)"
           @click.native.stop="
             action.handler(item, action.handlerData)
             actionClicked()
           "
         >
-          {{ action.ariaLabel }}
+          {{ action.ariaLabel(item) }}
         </oc-button>
       </li>
     </ul>

apps/files/src/fileactions.js

@@ -14,14 +14,16 @@ export default {
       'selectedFiles',
       'highlightedFile'
     ]),
-    ...mapGetters(['capabilities', 'fileSideBars']),
+    ...mapGetters(['capabilities', 'fileSideBars', 'isAuthenticated']),
     // Files lists
     actions() {
       const actions = [
         {
           icon: 'edit',
-          ariaLabel: this.$gettext('Rename'),
           handler: this.promptFileRename,
+          ariaLabel: () => {
+            return this.$gettext('Rename')
+          },
           isEnabled: function(item, parent) {
             if (parent && !parent.canRename()) {
               return false
@@ -32,21 +34,38 @@ export default {
         {
           icon: 'file_download',
           handler: this.downloadFile,
-          ariaLabel: this.$gettext('Download'),
+          ariaLabel: () => {
+            return this.$gettext('Download')
+          },
           isEnabled: function(item) {
             return item.canDownload()
           }
         },
         {
           icon: 'delete',
-          ariaLabel: this.$gettext('Delete'),
           handler: this.deleteFile,
+          ariaLabel: () => {
+            return this.$gettext('Delete')
+          },
           isEnabled: function(item, parent) {
             if (parent && !parent.canBeDeleted()) {
               return false
             }
             return item.canBeDeleted()
           }
+        },
+        {
+          icon: 'star',
+          handler: this.toggleFileFavorite,
+          ariaLabel: item => {
+            if (item.starred) {
+              return this.$gettext('Unmark as favorite')
+            }
+            return this.$gettext('Mark as favorite')
+          },
+          isEnabled: () => {
+            return this.isAuthenticated
+          }
         }
       ]
       // FIXME: we are assuming this.fileSideBars and others are available on object
@@ -57,7 +76,9 @@ export default {
         if (sideBar.quickAccess) {
           actions.push({
             icon: sideBar.quickAccess.icon,
-            ariaLabel: sideBar.quickAccess.ariaLabel,
+            ariaLabel: item => {
+              return sideBar.quickAccess.ariaLabel
+            },
             handler: this.openSideBar,
             handlerData: sideBar.app,
             isEnabled: function(item) {
@@ -77,7 +98,8 @@ export default {
       'closePromptFileRename',
       'deleteFiles',
       'promptFileDelete',
-      'closePromptFileDelete'
+      'closePromptFileDelete',
+      'markFavorite'
     ]),
     ...mapActions(['showMessage']),
 
@@ -131,7 +153,19 @@ export default {
           this.closePromptFileRename()
         })
     },
-
+    toggleFileFavorite(file) {
+      this.markFavorite({
+        client: this.$client,
+        file: file
+      }).catch(() => {
+        const translated = this.$gettext('Error while starring "%{file}"')
+        const title = this.$gettextInterpolate(translated, { file: file.name }, true)
+        this.showMessage({
+          title: title,
+          status: 'danger'
+        })
+      })
+    },
     cancelDeleteFile() {
       this.closePromptFileDelete()
     },

changelog/unreleased/3336

@@ -0,0 +1,8 @@
+Change: Removed favorite button from file list and added it in the sidebar
+
+We've removed the favorite star button in the file list and added instead a functionality 
+to the before non-working star button in the file's sidebar. We also added a new action in 
+the file action dropdown menu which allows you to toggle the favorite status of your file.
+
+https://github.com/owncloud/phoenix/issues/1987
+https://github.com/owncloud/phoenix/pull/3336

tests/acceptance/features/webUIFavorites/favoritesFile.feature

@@ -42,6 +42,12 @@ Feature: Mark file as favorite
     And folder "strängé नेपाली folder" should be marked as favorite on the webUI
     But folder "simple-folder-empty" should not be listed on the webUI
 
+  Scenario: mark files/folders as favorites using the sidebar
+    When the user marks folder "simple-folder" as favorite using the webUI sidebar
+    And the user marks file "data.zip" as favorite using the webUI sidebar
+    Then folder "simple-folder" should be marked as favorite on the webUI
+    And file "data.zip" should be marked as favorite on the webUI
+
   Scenario: navigate to an empty favorites page
     When the user browses to the favorites page
     Then the files table should be displayed

tests/acceptance/features/webUIFavorites/unfavoriteFile.feature

@@ -73,6 +73,14 @@ Feature: Unmark file/folder as favorite
     But folder "simple-empty-folder" should be marked as favorite on the webUI
     And folder "0" should be marked as favorite on the webUI
 
+  Scenario: unmark files/folders as favorites using the sidebar
+    Given user "user1" has favorited element "data.zip"
+    And user "user1" has favorited element "simple-folder"
+    When the user unmarks the favorited folder "simple-folder" using the webUI sidebar
+    And the user unmarks the favorited file "data.zip" using the webUI sidebar
+    Then folder "simple-folder" should not be marked as favorite on the webUI
+    And file "data.zip" should not be marked as favorite on the webUI
+
   @issue-1720
   Scenario: Try to unfavorite file and folder that used to exist but does not anymore
     Given the user has browsed to the files page

tests/acceptance/pageObjects/FilesPageElement/appSideBar.js

@@ -54,6 +54,20 @@ module.exports = {
      */
     isCollaboratorsTabPresentOnCurrentSidebar: function() {
       return this.isTabPresentOnCurrentSidebar(this.elements.sidebarCollaboratorsTab.selector)
+    },
+    markFavoriteSidebar: function() {
+      return this.useXpath()
+        .waitForElementVisible('@sideBar')
+        .waitForElementVisible(this.elements.notMarkedFavorite)
+        .click('@sidebarToggleFavoriteButton')
+        .waitForElementVisible(this.elements.markedFavorite)
+    },
+    markUnfavoriteSidebar: function() {
+      return this.useXpath()
+        .waitForElementVisible('@sideBar')
+        .waitForElementVisible(this.elements.markedFavorite)
+        .click('@sidebarToggleFavoriteButton')
+        .waitForElementVisible(this.elements.notMarkedFavorite)
     }
   },
   elements: {
@@ -78,6 +92,17 @@ module.exports = {
     sidebarVersionsTab: {
       selector: '//div//a[normalize-space(.)="Versions"]',
       locateStrategy: 'xpath'
+    },
+    sidebarToggleFavoriteButton: {
+      selector: '#files-sidebar-star-icon'
+    },
+    notMarkedFavorite: {
+      selector: '//div[@class="sidebar-container"]//span[contains(@class, "oc-star-dimm")]',
+      locateStrategy: 'xpath'
+    },
+    markedFavorite: {
+      selector: '//div[@class="sidebar-container"]//span[contains(@class, "oc-star-shining")]',
+      locateStrategy: 'xpath'
     }
   }
 }

tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js

@@ -7,6 +7,8 @@ module.exports = {
     FileAction: Object.freeze({
       download: 'download',
       delete: 'delete',
+      favorite: 'favorite',
+      unmarkFavorite: 'unmarkFavorite',
       restore: 'restore',
       share: 'share',
       rename: 'rename',
@@ -88,6 +90,38 @@ module.exports = {
 
       return this
     },
+    /**
+     * mark as favorite resource using fileActions 'favorite' button
+     * @returns {Promise<*>}
+     */
+    favorite: function() {
+      return this.performFileAction(this.FileAction.favorite)
+    },
+    /**
+     * unmark as favorite resource using fileActions 'favorite' button
+     * @returns {Promise<*>}
+     */
+    unmarkFavorite: function() {
+      return this.performFileAction(this.FileAction.unmarkFavorite)
+    },
+    /**
+     * checks whether unmark as favorite button of given file-row is present
+     *
+     * @returns {Promise<boolean>}
+     */
+    isUnmarkFavoriteBtnPresent: async function() {
+      const unmarkFavoriteButtonXpath = this.elements.unmarkFavoriteButtonInFileRow.selector
+      let isPresent = true
+      await this.api.page.FilesPageElement.appSideBar().closeSidebar(100)
+      await this.api.elements(
+        this.elements.unmarkFavoriteButtonInFileRow.locateStrategy,
+        unmarkFavoriteButtonXpath,
+        result => {
+          isPresent = result.value.length > 0
+        }
+      )
+      return isPresent
+    },
     /**
      * opens sharing dialog for given resource
      * assumes filesAction menu for the resource to be opened
@@ -166,6 +200,14 @@ module.exports = {
       selector: '//button[@aria-label="Download"]',
       locateStrategy: 'xpath'
     },
+    favoriteButtonInFileRow: {
+      selector: '//button[@aria-label="Mark as favorite"]',
+      locateStrategy: 'xpath'
+    },
+    unmarkFavoriteButtonInFileRow: {
+      selector: '//button[@aria-label="Unmark as favorite"]',
+      locateStrategy: 'xpath'
+    },
     restoreButtonInFileRow: {
       selector: '//button[@aria-label="Restore"]',
       locateStrategy: 'xpath'