Merge pull request #2029 from owncloud/enhancement-ocresource-parentf…

…older-prop

Ad OcResource parentfolder name prop

changelog/unreleased/enhancement-configurable-resource-parentfolder

@@ -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

src/components/organisms/OcResource/OcResource.spec.js

@@ -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", () => {
@@ -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()
+  })
 })

src/components/organisms/OcResource/OcResource.vue

@@ -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
      */
@@ -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() {
@@ -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>
@@ -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 [
             {

src/components/organisms/OcResource/__snapshots__/OcResource.spec.js.snap

@@ -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>
+`;