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.

Sign up for GitHub

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
+79 −8
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bf964d7
Don't show file extensions in AppTopBar and Search if turned off via …
AlexAndBear Dec 14, 2023
b1b6195
Add changelog item
AlexAndBear Dec 14, 2023
96ba4a2
Lint
AlexAndBear Dec 14, 2023
cfec8b8
Update bugfix-turned-off-file-extensions-had-no-effect
AlexAndBear Dec 15, 2023
7aa8f67
Update bugfix-turned-off-file-extensions-had-no-effect
AlexAndBear Dec 15, 2023
e3dd43c
Add unit tests and lint
AlexAndBear Dec 15, 2023
c7229fd
Fix the lolcow
AlexAndBear Dec 15, 2023
68d8ac3
Update changelog/unreleased/bugfix-turned-off-file-extensions-had-no-…
AlexAndBear Dec 15, 2023
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
6 changes: 6 additions & 0 deletions changelog/unreleased/bugfix-turned-off-file-extensions-had-no-effect
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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'))

Expand Down Expand Up @@ -144,7 +146,8 @@ export default defineComponent({
contextMenuLabel,
closeButtonLabel,
parentFolderName,
parentFolderLinkIconAdditionalAttributes
parentFolderLinkIconAdditionalAttributes,
areFileExtensionsShown
}
}
})
Expand Down
9 changes: 7 additions & 2 deletions packages/web-pkg/src/components/Search/ResourcePreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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'
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -98,7 +102,8 @@ export default defineComponent({
parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
unref(resource)
),
additionalAttrs
additionalAttrs,
areFileExtensionsShown
}
},
computed: {
Expand Down
15 changes: 14 additions & 1 deletion packages/web-pkg/tests/unit/components/AppTopBar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
30 changes: 28 additions & 2 deletions packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -65,9 +85,15 @@ function getWrapper({
}
})
)

const storeOptions = {
...defaultStoreMockOptions,
modules: {
Files: {
state: {
areFileExtensionsShown
}
}
},
getters: {
...defaultStoreMockOptions.getters,
configuration: () => ({
Expand Down
18 changes: 18 additions & 0 deletions packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down