Don't show file extensions in AppTopBar and Search if turned off via …

…setting (#10176)

changelog/unreleased/bugfix-turned-off-file-extensions-had-no-effect

@@ -0,0 +1,6 @@
+Bugfix: Turned off file extensions not always respected
+
+We've fixed a bug where file extensions were shown in different places,
+like Search and Top bar file info even if the user turned them off via setting.
+
+https://github.com/owncloud/web/pull/10176

packages/web-pkg/src/components/AppTopBar.vue

@@ -7,6 +7,7 @@
             v-if="resource"
             id="app-top-bar-resource"
             :is-thumbnail-displayed="false"
+            :is-extension-displayed="areFileExtensionsShown"
             :path-prefix="pathPrefix"
             :resource="resource"
             :parent-folder-name="parentFolderName"
@@ -81,7 +82,7 @@
 import { computed, defineComponent, PropType, unref } from 'vue'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
-import { Action, useEventBus, useFolderLink, useGetMatchingSpace } from '../composables'
+import { Action, useFolderLink, useGetMatchingSpace, useStore } from '../composables'
 import {
   Resource,
   isPublicSpaceResource,
@@ -110,9 +111,10 @@ export default defineComponent({
   emits: ['close'],
   setup(props) {
     const { $gettext } = useGettext()
-    const eventBus = useEventBus()
     const { getMatchingSpace } = useGetMatchingSpace()
+    const store = useStore()
 
+    const areFileExtensionsShown = computed(() => unref(store.state.Files.areFileExtensionsShown))
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
     const closeButtonLabel = computed(() => $gettext('Close'))
 
@@ -144,7 +146,8 @@ export default defineComponent({
       contextMenuLabel,
       closeButtonLabel,
       parentFolderName,
-      parentFolderLinkIconAdditionalAttributes
+      parentFolderLinkIconAdditionalAttributes,
+      areFileExtensionsShown
     }
   }
 })

packages/web-pkg/src/components/Search/ResourcePreview.vue

@@ -4,6 +4,7 @@
     :path-prefix="pathPrefix"
     :is-path-displayed="true"
     :folder-link="folderLink"
+    :is-extension-displayed="areFileExtensionsShown"
     :parent-folder-link-icon-additional-attributes="parentFolderLinkIconAdditionalAttributes"
     :parent-folder-name="parentFolderName"
     :is-thumbnail-displayed="displayThumbnails"
@@ -17,7 +18,7 @@ import { VisibilityObserver } from '../../observer'
 import { debounce } from 'lodash-es'
 import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
-import { useGetMatchingSpace, useFileActions, useFolderLink } from '../../composables'
+import { useGetMatchingSpace, useFileActions, useFolderLink, useStore } from '../../composables'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers'
 import { SearchResultValue } from './types'
@@ -47,8 +48,11 @@ export default defineComponent({
       getParentFolderLinkIconAdditionalAttributes,
       getFolderLink
     } = useFolderLink()
+    const store = useStore()
     const previewData = ref()
 
+    const areFileExtensionsShown = computed(() => unref(store.state.Files.areFileExtensionsShown))
+
     const resource = computed((): Resource => {
       return {
         ...(props.searchResult.data as Resource),
@@ -98,7 +102,8 @@ export default defineComponent({
       parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
         unref(resource)
       ),
-      additionalAttrs
+      additionalAttrs,
+      areFileExtensionsShown
     }
   },
   computed: {

packages/web-pkg/tests/unit/components/AppTopBar.spec.ts

@@ -61,20 +61,33 @@ describe('AppTopBar', () => {
       )
       expect(wrapper.html()).toMatchSnapshot()
     })
+    it('renders a resource without file extension if areFileExtensionsShown is set to false', () => {
+      const { wrapper } = getWrapper(
+        mock<Resource>({ path: '/test.txt', shareRoot: '/test' }),
+        [mock<Action>()],
+        [mock<Action>()],
+        false
+      )
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
   })
 })
 
 function getWrapper(
   resource: Resource = null,
   dropDownActions: Action[] = [],
-  mainActions: Action[] = []
+  mainActions: Action[] = [],
+  areFileExtensionsShown = true
 ) {
   const storeOptions = { ...defaultStoreMockOptions }
+  storeOptions.modules.Files.state.areFileExtensionsShown = areFileExtensionsShown
   const store = createStore(storeOptions)
   const mocks = defaultComponentMocks({
     currentRoute: mock<RouteLocation>({ name: 'admin-settings-general' })
   })
   return {
+    storeOptions,
     wrapper: shallowMount(AppTopBar, {
       props: {
         dropDownActions,

packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts

@@ -15,6 +15,10 @@ jest.mock('../../../../src/composables/spaces/useGetMatchingSpace', () => ({
   useGetMatchingSpace: jest.fn()
 }))
 
+const selectors = {
+  ocResourceStub: 'oc-resource-stub'
+}
+
 describe('Preview component', () => {
   const driveAliasAndItem = '1'
   jest.mocked(useGetMatchingSpace).mockImplementation(() => useGetMatchingSpaceMock())
@@ -29,6 +33,20 @@ describe('Preview component', () => {
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('should render resource component without file extension when areFileExtensionsShown is set to false', () => {
+    const { wrapper } = getWrapper({
+      areFileExtensionsShown: false,
+      space: mock<SpaceResource>({
+        id: '1',
+        driveType: 'project',
+        name: 'New space',
+        getDriveAliasAndItem: () => driveAliasAndItem
+      })
+    })
+    expect(
+      wrapper.findComponent<any>(selectors.ocResourceStub).attributes().isextensiondisplayed
+    ).toBe('false')
+  })
 })
 
 function getWrapper({
@@ -47,13 +65,15 @@ function getWrapper({
       shareRoot: ''
     }
   },
-  user = { id: 'test' }
+  user = { id: 'test' },
+  areFileExtensionsShown = true
 }: {
   route?: any
   hasShareJail?: boolean
   space?: SpaceResource
   searchResult?: any
   user?: any
+  areFileExtensionsShown?: boolean
 } = {}) {
   jest.mocked(useGetMatchingSpace).mockImplementation(() =>
     useGetMatchingSpaceMock({
@@ -65,9 +85,15 @@ function getWrapper({
       }
     })
   )
-
   const storeOptions = {
     ...defaultStoreMockOptions,
+    modules: {
+      Files: {
+        state: {
+          areFileExtensionsShown
+        }
+      }
+    },
     getters: {
       ...defaultStoreMockOptions.getters,
       configuration: () => ({

packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap

@@ -70,6 +70,24 @@ exports[`AppTopBar if a resource is present renders a resource and no actions (i
 </portal>
 `;
 
+exports[`AppTopBar if a resource is present renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
+<portal to="app.runtime.header.left">
+  <div class="oc-app-top-bar oc-flex">
+    <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
+      <div class="open-file-bar oc-flex">
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="false" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/test" resource="undefined"></oc-resource-stub>
+      </div>
+      <div class="oc-flex main-actions">
+        <context-action-menu-stub actionoptions="[object Object]" appearance="raw-inverse" menusections="[object Object]" variation="brand"></context-action-menu-stub>
+        <oc-button-stub appearance="raw-inverse" arialabel="Show context menu" class="oc-p-xs" disabled="false" gapsize="medium" id="oc-openfile-contextmenu-trigger" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
+        <oc-drop-stub closeonclick="true" dropid="oc-openfile-contextmenu" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#oc-openfile-contextmenu-trigger"></oc-drop-stub>
+        <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
+      </div>
+    </span>
+  </div>
+</portal>
+`;
+
 exports[`AppTopBar if no resource is present renders only a close button 1`] = `
 <portal to="app.runtime.header.left">
   <div class="oc-app-top-bar oc-flex">