Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't show file extensions in AppTopBar and Search if turned off via setting #10176

Merged
merged 8 commits into from
Dec 15, 2023
Merged
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Bugfix: Turned off file extensions not always respected

We've fixed a bug where file extensions where shown in different views,
AlexAndBear marked this conversation as resolved.
Show resolved Hide resolved
like Search and Top bar file info even if the user turned them off via setting.

https://github.com/owncloud/web/pull/10176
9 changes: 6 additions & 3 deletions packages/web-pkg/src/components/AppTopBar.vue
Original file line number Diff line number Diff line change
@@ -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
}
}
})
9 changes: 7 additions & 2 deletions packages/web-pkg/src/components/Search/ResourcePreview.vue
Original file line number Diff line number Diff line change
@@ -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: {
15 changes: 14 additions & 1 deletion packages/web-pkg/tests/unit/components/AppTopBar.spec.ts
Original file line number Diff line number Diff line change
@@ -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()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you check instead that the displayed file name matches test instead of test.txt? You're testing one very specific detail, I'd like to avoid to throw a snapshot test at that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the whole tests are snapshot tests, I don't wanted to interfere here,
if you want me to change that, please say yes and I will follow, my team lead 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm ok, then do it with the snapshot test. I'll make it part of the unit test improvement initiative 😁

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll be sick on the unit test improvement initiative :(

})
})
})

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,
Original file line number Diff line number Diff line change
@@ -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().isthumbnaildisplayed
AlexAndBear marked this conversation as resolved.
Show resolved Hide resolved
).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: () => ({
Original file line number Diff line number Diff line change
@@ -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">