Fix bugs in resolving icon and color for file extension

owncloud · Nov 23, 2023 · c12bd99 · c12bd99
1 parent 929b5ee
commit c12bd99
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 679 deletions.
diff --git a/changelog/unreleased/bugfix-icon-extension-mapping b/changelog/unreleased/bugfix-icon-extension-mapping
@@ -0,0 +1,6 @@
+Bugfix: Icon extension mapping
+
+We have simplified the mapping between file extensions and their display in the web UI (icon and its color). Now, further formats/extensions (`.tar.gz`,`.tar.bz2`, ...) get displayed correctly.
+
+https://github.com/owncloud/web/issues/10031
+https://github.com/owncloud/web/pull/10059
diff --git a/packages/design-system/build/webpack.system.conf.js b/packages/design-system/build/webpack.system.conf.js
@@ -79,10 +79,6 @@ const webpackConfig = merge(baseWebpackConfig, {
         {
           from: path.resolve(__dirname, '../l10n/translations.json'),
           to: config.system.assetsSubDirectory
-        },
-        {
-          from: path.resolve(__dirname, '../src/helpers/resourceIconMapping.json'),
-          to: config.system.assetsSubDirectory
         }
       ]
     })

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts
@@ -13,8 +13,8 @@ const resourceIconMapping: OcResourceIconMapping = {
   },
   mimeType: {
     'not-a-real-mimetype': {
-      name: 'resource-type-madeup-mimetype',
-      color: 'blue'
+      name: 'resource-type-file',
+      color: 'var(--oc-color-text-default)'
     }
   }
 }

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -16,14 +16,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, unref } from 'vue'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'
-import { AVAILABLE_SIZES, IconType } from '../../helpers'
-import * as iconMapping from '../../helpers/resourceIconMapping.json'
-
-import { OcResourceIconMapping, ocResourceIconMappingInjectionKey } from './types'
+import { AVAILABLE_SIZES, IconType, resolveFileIcon } from '../../helpers'
 
 const defaultFolderIcon: IconType = {
   name: 'resource-type-folder',
@@ -65,8 +62,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const iconMappingInjection = inject<OcResourceIconMapping>(ocResourceIconMappingInjectionKey)
-
     const isFolder = computed(() => {
       // fallback is necessary since
       // sometimes resources without a type
@@ -92,12 +87,9 @@ export default defineComponent({
         return defaultFolderIcon
       }
 
-      let icon =
-        (iconMapping[unref(extension)] as IconType) ||
-        iconMappingInjection?.mimeType[unref(mimeType)] ||
-        iconMappingInjection?.extension[unref(extension)]
+      let icon = resolveFileIcon(unref(extension))
+
       return {
-        ...defaultFallbackIcon,
         ...icon
       }
     })

diff --git a/...ges/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap b/...ges/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
@@ -51,98 +51,98 @@ exports[`OcResourceIcon renders OcIcon for resource type file in size xxxlarge 1
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size large 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="large" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size medium 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="medium" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size small 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="small" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xsmall 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xsmall" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size large 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="large" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size medium 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="medium" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size small 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="small" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xsmall 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xsmall" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;

diff --git a/packages/design-system/src/helpers/index.ts b/packages/design-system/src/helpers/index.ts
@@ -1,3 +1,4 @@
+export * from './colors'
 export * from './constants'
+export * from './resolveFileIcon'
 export * from './types'
-export * from './colors'