From 88c7fb55d7b4fddc61e333040665782f55bf3d4c Mon Sep 17 00:00:00 2001
From: Jan <jackermann@owncloud.com>
Date: Thu, 21 Apr 2022 16:50:32 +0200
Subject: [PATCH] Implement file extensions toggle (#6793)

* Implement file extensions toggle

* Bump ods

* Remove useless file

* Change setting name

* Update snapshots

* Add mutation tests

* Fix snapshots after OcButton has target prop

Co-authored-by: Pascal Wengerter <pascal@wengerter.info>
---
 ...enhancement-add-show-file-extension-switch | 12 +++++++
 .../src/components/AppBar/AppBar.vue          | 12 +++++--
 .../src/components/AppBar/CreateAndUpload.vue | 20 ++++++++---
 .../src/components/AppBar/ViewOptions.vue     | 20 +++++++++--
 .../components/FilesList/ResourceTable.vue    |  4 ++-
 .../src/components/SideBar/FileInfo.vue       |  4 ++-
 .../src/mixins/actions/rename.js              | 33 ++++++++++++++++---
 packages/web-app-files/src/store/mutations.js |  6 ++++
 packages/web-app-files/src/store/state.js     |  3 +-
 .../unit/components/AppBar/AppBar.spec.js     |  3 +-
 .../components/AppBar/ViewOptions.spec.js     |  3 +-
 .../FilesList/ResourceTable.spec.js           |  5 +++
 .../tests/unit/store/mutations.spec.js        |  9 +++++
 .../SharedWithOthers.spec.js.snap             |  8 ++---
 .../tests/unit/views/views.setup.js           |  1 +
 packages/web-runtime/package.json             |  2 +-
 .../ApplicationsMenu.spec.js.snap             |  2 +-
 .../__snapshots__/FeedbackLink.spec.js.snap   |  2 +-
 yarn.lock                                     | 10 +++---
 19 files changed, 128 insertions(+), 31 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-show-file-extension-switch

diff --git a/changelog/unreleased/enhancement-add-show-file-extension-switch b/changelog/unreleased/enhancement-add-show-file-extension-switch
new file mode 100644
index 00000000000..8be0a6c570a
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-show-file-extension-switch
@@ -0,0 +1,12 @@
+Enhancement: Add show file extension toggle switch in file list settings
+
+We've added a toggle switch to the file list settings to turn off and on displaying file extension.
+
+If this setting is turned off, the file extension won't be shown anymore in:
+* The name column displayed in the files list
+* The right sidebar
+* The rename modal
+* The new file modal
+
+https://github.com/owncloud/web/pull/6793
+https://github.com/owncloud/web/issues/6730
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index cfda1b1db8b..a2ee1b37439 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -77,7 +77,7 @@ export default {
   },
   computed: {
     ...mapGetters('Files', ['files', 'selectedFiles']),
-    ...mapState('Files', ['areHiddenFilesShown']),
+    ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
     pageTitle() {
       const title = this.$route.meta.title
@@ -116,10 +116,18 @@ export default {
     if (areHiddenFilesShownBoolean !== this.areHiddenFilesShown) {
       this.SET_HIDDEN_FILES_VISIBILITY(areHiddenFilesShownBoolean)
     }
+
+    // Storage returns a string so we need to convert it into a boolean
+    const areFileExtensionsShown = window.localStorage.getItem('oc_fileExtensionsShown') || 'true'
+    const areFileExtensionsShownBoolean = areFileExtensionsShown === 'true'
+
+    if (areFileExtensionsShownBoolean !== this.areFileExtensionsShown) {
+      this.SET_FILE_EXTENSIONS_VISIBILITY(areFileExtensionsShownBoolean)
+    }
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY'])
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 5b6fcfcdc9e..579396c4543 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
 
 import Mixins from '../../mixins'
@@ -165,6 +165,7 @@ export default {
   computed: {
     ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
     ...mapGetters('Files', ['files', 'currentFolder', 'publicLinkPassword']),
+    ...mapState('Files', ['areFileExtensionsShown']),
 
     mimetypesAllowedForCreation() {
       // we can't use `mapGetters` here because the External app doesn't exist in all deployments
@@ -334,10 +335,12 @@ export default {
     ) {
       const defaultName = isFolder
         ? this.$gettext('New folder')
-        : this.$gettext('New file') + '.' + ext
+        : this.$gettext('New file') + (this.areFileExtensionsShown ? `.${ext}` : '')
       const checkInputValue = (value) => {
         this.setModalInputErrorMessage(
-          isFolder ? this.checkNewFolderName(value) : this.checkNewFileName(value)
+          isFolder
+            ? this.checkNewFolderName(value)
+            : this.checkNewFileName(this.areFileExtensionsShown ? value : `${value}.${ext}`)
         )
       }
 
@@ -356,13 +359,20 @@ export default {
         inputLabel: isFolder ? this.$gettext('Folder name') : this.$gettext('File name'),
         inputError: isFolder
           ? this.checkNewFolderName(defaultName)
-          : this.checkNewFileName(defaultName),
+          : this.checkNewFileName(
+              this.areFileExtensionsShown ? defaultName : `${defaultName}.${ext}`
+            ),
         onCancel: this.hideModal,
         onConfirm: isFolder
           ? this.addNewFolder
           : addAppProviderFile
           ? this.addAppProviderFile
-          : this.addNewFile,
+          : (fileName) => {
+              if (!this.areFileExtensionsShown) {
+                fileName = `${fileName}.${ext}`
+              }
+              this.addNewFile(fileName)
+            },
         onInput: checkInputValue
       }
 
diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 977ff63da24..d1feffdae4a 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -26,6 +26,13 @@
             :label="$gettext('Show hidden files')"
           />
         </li>
+        <li class="files-view-options-list-item">
+          <oc-switch
+            v-model="fileExtensionsShownModel"
+            data-testid="files-switch-files-extensions-files"
+            :label="$gettext('Show file extensions')"
+          />
+        </li>
         <li class="files-view-options-list-item">
           <oc-page-size
             v-model="itemsPerPage"
@@ -57,7 +64,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('Files', ['areHiddenFilesShown']),
+    ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
     viewOptionsButtonLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -71,10 +78,19 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
+    },
+    fileExtensionsShownModel: {
+      get() {
+        return this.areFileExtensionsShown
+      },
+
+      set(value) {
+        this.SET_FILE_EXTENSIONS_VISIBILITY(value)
+      }
     }
   },
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY'])
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 3e546abe6df..c5679358a05 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -52,6 +52,7 @@
           :is-path-displayed="arePathsDisplayed"
           :parent-folder-name-default="defaultParentFolderName"
           :is-thumbnail-displayed="areThumbnailsDisplayed"
+          :is-extension-displayed="areFileExtensionsShown"
           :is-resource-clickable="isResourceClickable(item.id)"
           :folder-link="folderLink(item)"
           :parent-folder-link="parentFolderLink(item)"
@@ -165,7 +166,7 @@
 <script lang="ts">
 import { DateTime } from 'luxon'
 import maxSize from 'popper-max-size-modifier'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
 import { SortDir } from '../../composables'
 import * as path from 'path'
@@ -352,6 +353,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['configuration']),
+    ...mapState('Files', ['areFileExtensionsShown']),
     popperOptions() {
       return {
         modifiers: [
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
index 1b9b3f95909..a166cfc0326 100644
--- a/packages/web-app-files/src/components/SideBar/FileInfo.vue
+++ b/packages/web-app-files/src/components/SideBar/FileInfo.vue
@@ -8,6 +8,7 @@
           :extension="file.extension"
           :type="file.type"
           :full-path="file.webDavPath"
+          :is-extension-displayed="areFileExtensionsShown"
           :is-path-displayed="false"
         />
       </h3>
@@ -30,7 +31,7 @@
 import Mixins from '../../mixins'
 import MixinResources from '../../mixins/resources'
 import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import PrivateLinkItem from './PrivateLinkItem.vue'
 import { useActiveLocation } from '../../composables'
 
@@ -54,6 +55,7 @@ export default {
   },
   computed: {
     ...mapGetters(['capabilities', 'user']),
+    ...mapState('Files', ['areFileExtensionsShown']),
     timeData() {
       const interpolate = (obj) => {
         obj.time = this.formDateFromRFC(obj.sourceTime)
diff --git a/packages/web-app-files/src/mixins/actions/rename.js b/packages/web-app-files/src/mixins/actions/rename.js
index 3ef3395758b..7e4fe8f617d 100644
--- a/packages/web-app-files/src/mixins/actions/rename.js
+++ b/packages/web-app-files/src/mixins/actions/rename.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 import { isSameResource, extractNameWithoutExtension } from '../../helpers/resource'
 import { getParentPaths } from '../../helpers/path'
 import { buildResource } from '../../helpers/resources'
@@ -8,6 +8,7 @@ export default {
   computed: {
     ...mapGetters('Files', ['files', 'currentFolder']),
     ...mapGetters(['capabilities']),
+    ...mapState('Files', ['areFileExtensionsShown']),
 
     $_rename_items() {
       return [
@@ -68,27 +69,49 @@ export default {
       }
 
       const confirmAction = (newName) => {
+        if (!this.areFileExtensionsShown) {
+          newName = `${newName}.${resources[0].extension}`
+        }
+
         this.$_rename_renameResource(resources[0], newName)
       }
       const checkName = (newName) => {
+        if (!this.areFileExtensionsShown) {
+          newName = `${newName}.${resources[0].extension}`
+        }
         this.$_rename_checkNewName(resources[0].name, newName, parentResources)
       }
+      const nameWithoutExtension = extractNameWithoutExtension(resources[0])
+      const modalTitle =
+        !resources[0].isFolder && !this.areFileExtensionsShown
+          ? nameWithoutExtension
+          : resources[0].name
 
       const title = this.$gettextInterpolate(
         resources[0].isFolder
           ? this.$gettext('Rename folder %{name}')
           : this.$gettext('Rename file %{name}'),
-        { name: resources[0].name }
+        { name: modalTitle }
       )
-      const nameWithoutExtension = extractNameWithoutExtension(resources[0])
+
+      const inputValue =
+        !resources[0].isFolder && !this.areFileExtensionsShown
+          ? nameWithoutExtension
+          : resources[0].name
+
+      const inputSelectionRange =
+        resources[0].isFolder || !this.areFileExtensionsShown
+          ? null
+          : [0, nameWithoutExtension.length]
+
       const modal = {
         variation: 'passive',
         title,
         cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Rename'),
         hasInput: true,
-        inputValue: resources[0].name,
-        inputSelectionRange: resources[0].isFolder ? null : [0, nameWithoutExtension.length],
+        inputValue,
+        inputSelectionRange,
         inputLabel: resources[0].isFolder
           ? this.$gettext('Folder name')
           : this.$gettext('File name'),
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 5c03d85323a..2396e82beef 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -341,6 +341,12 @@ export default {
     state.areHiddenFilesShown = value
 
     window.localStorage.setItem('oc_hiddenFilesShown', value)
+  },
+
+  SET_FILE_EXTENSIONS_VISIBILITY(state, value) {
+    state.areFileExtensionsShown = value
+
+    window.localStorage.setItem('oc_fileExtensionsShown', value)
   }
 }
 
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index b4b667b0558..2e33b8588c3 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -48,5 +48,6 @@ export default {
   /**
    * View settings
    */
-  areHiddenFilesShown: true
+  areHiddenFilesShown: true,
+  areFileExtensionsShown: true
 }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
index 666cb0d6dd9..41c4675ab9e 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
@@ -148,7 +148,8 @@ function createStore(state = { selected: [] }) {
           selectedFiles: () => state.selected
         },
         mutations: {
-          SET_HIDDEN_FILES_VISIBILITY: jest.fn()
+          SET_HIDDEN_FILES_VISIBILITY: jest.fn(),
+          SET_FILE_EXTENSIONS_VISIBILITY: jest.fn()
         }
       }
     }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
index 3afb316b993..6e4abd5a55c 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
@@ -29,7 +29,8 @@ describe('ViewOptions', () => {
         Files: {
           namespaced: true,
           mutations: {
-            SET_HIDDEN_FILES_VISIBILITY: jest.fn()
+            SET_HIDDEN_FILES_VISIBILITY: jest.fn(),
+            SET_FILE_EXTENSIONS_VISIBILITY: jest.fn()
           },
           modules: {
             sidebar: {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
index ed78df1d414..fb339b975de 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
@@ -272,6 +272,11 @@ function getMountedWrapper(options = {}) {
         store: createStore(Vuex.Store, {
           getters: {
             configuration: () => {}
+          },
+          modules: {
+            Files: {
+              namespaced: true
+            }
           }
         }),
         propsData: {
diff --git a/packages/web-app-files/tests/unit/store/mutations.spec.js b/packages/web-app-files/tests/unit/store/mutations.spec.js
index d0d7c92bcdb..745f3048b45 100644
--- a/packages/web-app-files/tests/unit/store/mutations.spec.js
+++ b/packages/web-app-files/tests/unit/store/mutations.spec.js
@@ -85,6 +85,15 @@ describe('vuex store mutations', () => {
     expect(state.areHiddenFilesShown).toEqual(false)
   })
 
+  it('SET_FILE_EXTENSIONS_VISIBILITY', () => {
+    const state = { areFileExtensionsShown: true }
+    const { SET_FILE_EXTENSIONS_VISIBILITY } = mutations
+
+    SET_FILE_EXTENSIONS_VISIBILITY(state, false)
+
+    expect(state.areFileExtensionsShown).toEqual(false)
+  })
+
   describe('CURRENT_FILE_OUTGOING_SHARES_REMOVE', () => {
     it('removes an outgoing user share', () => {
       const shareToRemove = { id: 1, shareType: ShareTypes.user.value }
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
index d632b965cb3..f8880ba0fbc 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -28,7 +28,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -51,7 +51,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -74,7 +74,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -97,7 +97,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 86534367129..8b9f4589d8b 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -181,6 +181,7 @@ export const getStore = function ({
             state.activeFiles.push(resource)
           },
           SET_HIDDEN_FILES_VISIBILITY: jest.fn(),
+          SET_FILE_EXTENSIONS_VISIBILITY: jest.fn(),
           CLEAR_FILES_SEARCHED: () => {},
           CLEAR_CURRENT_FILES_LIST: () => {},
           LOAD_FILES: () => {},
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 6ad67a0cb57..aea45c9b2d8 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -18,7 +18,7 @@
     "luxon": "^2.3.0",
     "marked": "^4.0.12",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^13.1.0-rc.3",
+    "owncloud-design-system": "^13.1.0-rc.5",
     "owncloud-sdk": "~3.0.0-alpha.4",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap
index 1cd53adf2af..ef37b2e9ce7 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap
@@ -13,7 +13,7 @@ exports[`ApplicationsMenu component should render navigation with button and men
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="a" size="medium" href="http://some.org" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" target="_blank" class=""><span class="icon-box"><oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>External</span>
+        <oc-button-stub type="a" size="medium" href="http://some.org" target="_blank" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class=""><span class="icon-box"><oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>External</span>
           <!---->
         </oc-button-stub>
       </li>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
index f78c7807d76..58dcc8460ee 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></a>
+<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" target="_blank" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/yarn.lock b/yarn.lock
index 86f2c9e2927..9757efe6c8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9671,9 +9671,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:^13.1.0-rc.3":
-  version: 13.1.0-rc.3
-  resolution: "owncloud-design-system@npm:13.1.0-rc.3"
+"owncloud-design-system@npm:^13.1.0-rc.5":
+  version: 13.1.0-rc.5
+  resolution: "owncloud-design-system@npm:13.1.0-rc.5"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9690,7 +9690,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 43119c863273b0dde35aa9c854386a4ebf731104ae6a7541788d89760abc576b6bba6a7cc8962cc1c2053797982250149fdf9c79bb892e91403221b7441ca636
+  checksum: 452d75d01bf0793cc9f4a1f611607fd2e71566c75413cc62dba4196d9d0a69a929c6b36a368f520de96a914c32853167bbdaf1dfeec8529f0b3846abe59963f9
   languageName: node
   linkType: hard
 
@@ -13821,7 +13821,7 @@ __metadata:
     luxon: ^2.3.0
     marked: ^4.0.12
     oidc-client: 1.11.5
-    owncloud-design-system: ^13.1.0-rc.3
+    owncloud-design-system: ^13.1.0-rc.5
     owncloud-sdk: ~3.0.0-alpha.4
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0