Fix resource icons/thumbnails only visible for clickable resources

changelog/unreleased/bugfix-icon-only-visible-for-clickable-resources

@@ -0,0 +1,8 @@
+Bugfix: Icons/Thumbnails were only visible for clickable resources
+
+We fixed that only clickable resources had icons/thumbnails in `OcResource`.
+It was fixed by introducing an `OcResourceLink` component that reduces code
+complexity and duplication when linking resources.
+
+
+https://github.com/owncloud/owncloud-design-system/pull/2007

src/components/atoms/OcResourceIcon/OcResourceIcon.vue

@@ -61,7 +61,7 @@ export default {
       return this.resource.isFolder
     },
     extension() {
-      return this.resource.extension.toLowerCase()
+      return this.resource.extension?.toLowerCase()
     },
   },
 }

src/components/atoms/OcResourceLink/OcResourceLink.vue

@@ -0,0 +1,104 @@
+<template>
+  <component
+    :is="componentType"
+    v-bind="componentProps"
+    v-if="isResourceClickable"
+    :target="linkTargetBlank"
+    :aria-describedby="opensInNewWindowDescriptionId"
+    @click.stop="emitClick"
+    @click.native.stop
+  >
+    <slot :opensInNewWindowDescriptionId="opensInNewWindowDescriptionId" />
+  </component>
+  <span v-else>
+    <slot />
+  </span>
+</template>
+
+<script>
+import uniqueId from "../../../utils/uniqueId"
+
+/**
+ * Wraps content in a resource link
+ */
+export default {
+  name: "OcResourceLink",
+  status: "prototype",
+  release: "unreleased",
+  props: {
+    /**
+     * The resource folder link
+     */
+    folderLink: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    /**
+     * The resource to be displayed
+     */
+    resource: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * Asserts whether clicking on the resource name triggers any action
+     */
+    isResourceClickable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    isFolder() {
+      return this.resource.isFolder
+    },
+    componentType() {
+      return this.isFolder ? "router-link" : "oc-button"
+    },
+    componentProps() {
+      if (!this.isRouterLink) {
+        return {
+          appearance: "raw",
+          gapSize: "none",
+          justifyContent: "left",
+        }
+      }
+
+      return {
+        to: this.folderLink,
+      }
+    },
+    opensInNewWindowDescriptionId() {
+      if (this.resource.opensInNewWindow) {
+        return uniqueId("oc-link-description-")
+      }
+
+      return null
+    },
+    isRouterLink() {
+      return this.isResourceClickable && this.isFolder
+    },
+    linkTargetBlank() {
+      if (this.isRouterLink && this.resource.opensInNewWindow) {
+        return "_blank"
+      }
+
+      return null
+    },
+  },
+  methods: {
+    emitClick() {
+      if (this.isFolder) {
+        return
+      }
+
+      /**
+       * Triggered when the resource is a file and the name is clicked
+       */
+      this.$emit("click")
+    },
+  },
+}
+</script>

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

@@ -1,7 +1,11 @@
 import { mount } from "@vue/test-utils"
 
 import Resource from "./OcResource.vue"
+import OcButton from "../../atoms/OcButton/OcButton.vue"
 
+const stubs = {
+  "oc-button": OcButton,
+}
 const fileResource = {
   name: "forest.jpg",
   path: "nature/forest.jpg",
@@ -51,6 +55,7 @@ describe("OcResource", () => {
       propsData: {
         resource: fileResource,
       },
+      stubs,
     })
 
     wrapper.find(".oc-resource-name").trigger("click")
@@ -64,6 +69,7 @@ describe("OcResource", () => {
         isPathDisplayed: true,
         parentFolderLink: {},
       },
+      stubs,
     })
 
     expect(wrapper.find(".parent-folder").find("a").exists()).toBeTruthy()
@@ -76,6 +82,7 @@ describe("OcResource", () => {
         resource: fileResource,
         isPathDisplayed: true,
       },
+      stubs,
     })
 
     expect(wrapper.find(".parent-folder").find("a").exists()).toBeFalsy()

src/components/organisms/OcResource/OcResource.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="oc-resource oc-text-overflow">
-    <component
-      :is="componentType"
-      v-bind="componentProps"
-      v-if="isResourceClickable"
-      :target="linkTargetBlank"
-      :aria-describedby="opensInNewWindowDescriptionId"
-      @click.stop="emitClick"
-      @click.native.stop
+    <oc-resource-link
+      :resource="resource"
+      :is-resource-clickable="isResourceClickable"
+      :folder-link="folderLink"
+      @click="emitClick"
     >
       <oc-img
         v-if="hasThumbnail"
@@ -18,17 +15,15 @@
         height="40"
       />
       <oc-resource-icon v-else :resource="resource" />
-    </component>
+    </oc-resource-link>
     <div class="oc-resource-details oc-text-overflow">
-      <component
-        :is="componentType"
-        v-bind="componentProps"
-        v-if="isResourceClickable"
-        :target="linkTargetBlank"
-        :aria-describedby="opensInNewWindowDescriptionId"
+      <oc-resource-link
+        v-slot="{ opensInNewWindowDescriptionId }"
+        :resource="resource"
+        :is-resource-clickable="isResourceClickable"
+        :folder-link="folderLink"
         class="oc-text-overflow"
-        @click.stop="emitClick"
-        @click.native.stop
+        @click="emitClick"
       >
         <span
           v-if="opensInNewWindowDescriptionId"
@@ -44,15 +39,7 @@
           :full-path="resource.path"
           :is-path-displayed="isPathDisplayed"
         />
-      </component>
-      <oc-resource-name
-        v-else
-        :name="resource.name"
-        :extension="resource.extension"
-        :type="resource.type"
-        :full-path="resource.path"
-        :is-path-displayed="isPathDisplayed"
-      />
+      </oc-resource-link>
       <div class="oc-resource-indicators">
         <component
           :is="parentFolderComponentType"
@@ -82,7 +69,7 @@ import OcStatusIndicators from "../../molecules/OcStatusIndicators/OcStatusIndic
 import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
 import OcResourceName from "../../atoms/OcResourceName/OcResourceName.vue"
 import OcResourceIcon from "../../atoms/OcResourceIcon/OcResourceIcon.vue"
-import uniqueId from "../../../utils/uniqueId"
+import OcResourceLink from "../../atoms/OcResourceLink/OcResourceLink.vue"
 import * as path from "path"
 
 /**
@@ -92,7 +79,15 @@ export default {
   name: "OcResource",
   status: "ready",
   release: "2.1.0",
-  components: { OcButton, OcImg, OcStatusIndicators, OcIcon, OcResourceName, OcResourceIcon },
+  components: {
+    OcButton,
+    OcImg,
+    OcStatusIndicators,
+    OcIcon,
+    OcResourceName,
+    OcResourceIcon,
+    OcResourceLink,
+  },
   props: {
     /**
      * The resource folder link
@@ -102,7 +97,6 @@ export default {
       required: false,
       default: null,
     },
-
     /**
      * The resource parent folder link path
      */
@@ -160,10 +154,6 @@ export default {
       }
     },
 
-    isFolder() {
-      return this.resource.type === "folder"
-    },
-
     hasThumbnail() {
       return (
         this.isThumbnailDisplayed &&
@@ -174,52 +164,10 @@ export default {
     thumbnail() {
       return this.resource.thumbnail
     },
-
-    componentType() {
-      return this.isFolder ? "router-link" : "oc-button"
-    },
-
-    isRouterLink() {
-      return this.isResourceClickable && this.isFolder
-    },
-
-    componentProps() {
-      if (!this.isRouterLink) {
-        return {
-          appearance: "raw",
-          gapSize: "none",
-          justifyContent: "left",
-        }
-      }
-
-      return {
-        to: this.folderLink,
-      }
-    },
-
-    opensInNewWindowDescriptionId() {
-      if (this.resource.opensInNewWindow) {
-        return uniqueId("oc-link-description-")
-      }
-
-      return null
-    },
-
-    linkTargetBlank() {
-      if (this.isRouterLink && this.resource.opensInNewWindow) {
-        return "_blank"
-      }
-
-      return null
-    },
   },
 
   methods: {
     emitClick() {
-      if (this.isFolder) {
-        return
-      }
-
       /**
        * Triggered when the resource is a file and the name is clicked
        */
@@ -307,7 +255,8 @@ export default {
             name: "Documents",
             path: "/Documents",
             indicators: [],
-            type: "folder"
+            type: "folder",
+            isFolder: true
           }
         },
         notes() {
@@ -316,7 +265,8 @@ export default {
             extension: "txt",
             path: "Documents/notes.txt",
             indicators: this.indicators,
-            type: "file"
+            type: "file",
+            isFolder: false
           }
         },
         forest() {
@@ -327,6 +277,7 @@ export default {
             thumbnail: "https://picsum.photos/200/300",
             indicators: [],
             type: "file",
+            isFolder: false,
             opensInNewWindow: true,
           }
         },