Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Ad OcResource parentfolder name prop #2029

Merged
merged 2 commits into from
Mar 21, 2022
Merged
Show file tree
Hide file tree
Changes from all 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,7 @@
Enhancement: Configurable OcResource parentfolder name

We've added a `parent-folder-name-default` property to the OcResource component.
Before, an empty parent resulted in a hardcoded "All files and folders" which
becomes misleading with the introduction of spaces in oCIS.

https://github.com/owncloud/owncloud-design-system/pull/2029
22 changes: 20 additions & 2 deletions src/components/organisms/OcResource/OcResource.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,23 @@ const fileResource = {
name: "forest.jpg",
path: "nature/forest.jpg",
thumbnail: "https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg",
indicators: [],
type: "file",
isFolder: false,
extension: "jpg",
}
const folderResource = {
name: "Documents",
path: "",
indicators: [],
type: "folder",
isFolder: true,
}
const fileResourceWithoutParentFoldername = {
name: "example.pdf",
path: "example.pdf",
type: "file",
isFolder: false,
extension: "pdf",
}

describe("OcResource", () => {
it("doesn't emit a click if the resource is a folder", () => {
Expand Down Expand Up @@ -88,4 +93,17 @@ describe("OcResource", () => {
expect(wrapper.find(".parent-folder").find("a").exists()).toBeFalsy()
expect(wrapper.find(".parent-folder").attributes("style")).toEqual("cursor: default;")
})

it("displays parent folder name default if calculated name is empty", () => {
const wrapper = mount(Resource, {
propsData: {
resource: fileResourceWithoutParentFoldername,
isPathDisplayed: true,
parentFolderNameDefault: "Example parent folder name",
},
stubs,
})

expect(wrapper).toMatchSnapshot()
Copy link
Member

Choose a reason for hiding this comment

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

Snapshot test is not necessary here. Can check the parent folder name text directly (compare with the default that was given in propsData)

})
})
31 changes: 26 additions & 5 deletions src/components/organisms/OcResource/OcResource.vue
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,14 @@ export default {
type: Object,
required: true,
},
/**
* The resource parent folder name to be displayed
*/
parentFolderNameDefault: {
type: String,
required: false,
default: "",
},
/**
* Asserts whether the resource path should be displayed
*/
Expand Down Expand Up @@ -139,7 +147,7 @@ export default {

parentFolder() {
const folder = path.basename(path.dirname(this.resource.path)).replace(".", "")
return folder !== "" ? folder : this.$gettext("All files and folders")
return folder !== "" ? folder : this.parentFolderNameDefault
},

parentFolderStyle() {
Expand Down Expand Up @@ -236,10 +244,11 @@ export default {
```js
<template>
<div>
<oc-resource :resource="documents" :parent-folder-link="parentFolderLink" class="oc-mb" />
<oc-resource :resource="notes" :isPathDisplayed="true" class="oc-mb" />
<oc-resource :resource="notes" :isResourceClickable="false" class="oc-mb" />
<oc-resource :resource="forest" :isPathDisplayed="true" />
<oc-resource :resource="documents" parent-folder-link="parentFolderLink" class="oc-mb" />
<oc-resource :resource="notes" is-path-displayed="true" class="oc-mb" />
<oc-resource :resource="notes" is-resource-clickable="false" class="oc-mb" />
<oc-resource :resource="forest" is-path-displayed="true" />
<oc-resource :resource="something" is-path-displayed="true" parent-folder-name-default="Example parent folder" />
</div>
</template>
<script>
Expand Down Expand Up @@ -276,6 +285,18 @@ export default {
opensInNewWindow: true,
}
},
something() {
return {
name: "another-image.jpg",
extension: "jpg",
path: "another-image.jpg",
thumbnail: "https://picsum.photos/200/300",
indicators: [],
type: "file",
isFolder: false,
opensInNewWindow: true,
}
},
indicators() {
return [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OcResource displays parent folder name default if calculated name is empty 1`] = `
<div class="oc-resource oc-text-overflow"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></button>
<div class="oc-resource-details oc-text-overflow"><button type="button" class="oc-text-overflow oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw">
<!----> <span data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">example</span></span> <span class="oc-resource-extension">.pdf</span></span>
</button>
<div class="oc-resource-indicators"><span class="parent-folder" style="cursor: default;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">Example parent folder name</span></span></div>
</div>
</div>
`;