Fix bugs in resolving icon and color for file extension

changelog/unreleased/bugfix-icon-extension-mapping

@@ -0,0 +1,7 @@
+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.xz`,`.bz2`, ...) get displayed correctly.
+
+https://github.com/owncloud/web/issues/10031
+https://github.com/owncloud/web/pull/10059

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
         }
       ]
     })

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)'
     }
   }
 }

packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue

@@ -20,8 +20,7 @@ import { computed, defineComponent, inject, 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 { AVAILABLE_SIZES, IconType, createDefaultFileIconMapping } from '../../helpers'
 
 import { OcResourceIconMapping, ocResourceIconMappingInjectionKey } from './types'
 
@@ -39,6 +38,8 @@ const defaultFallbackIcon: IconType = {
   color: 'var(--oc-color-text-default)'
 }
 
+const defaultFileIconMapping = createDefaultFileIconMapping()
+
 export default defineComponent({
   name: 'OcResourceIcon',
   status: 'ready',
@@ -92,10 +93,11 @@ export default defineComponent({
         return defaultFolderIcon
       }
 
-      let icon =
-        (iconMapping[unref(extension)] as IconType) ||
+      const icon =
+        defaultFileIconMapping[unref(extension)] ||
         iconMappingInjection?.mimeType[unref(mimeType)] ||
         iconMappingInjection?.extension[unref(extension)]
+
       return {
         ...defaultFallbackIcon,
         ...icon

packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap

@@ -100,49 +100,49 @@ exports[`OcResourceIcon renders OcIcon for resource type file with extension "no
 
 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>
 `;

packages/design-system/src/helpers/createDefaultFileIconMapping.ts

@@ -0,0 +1,225 @@
+import { IconType } from './types'
+
+const fileIcon = {
+  archive: {
+    icon: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
+    extensions: [
+      '7z',
+      'apk',
+      'bz2',
+      'deb',
+      'gz',
+      'gzip',
+      'rar',
+      'tar',
+      'tar.bz2',
+      'tar.gz',
+      'tar.xz',
+      'tbz2',
+      'tgz',
+      'zip'
+    ]
+  },
+  audio: {
+    icon: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
+    extensions: [
+      '3gp',
+      '8svx',
+      'aa',
+      'aac',
+      'aax',
+      'act',
+      'aiff',
+      'alac',
+      'amr',
+      'ape',
+      'au',
+      'awb',
+      'cda',
+      'dss',
+      'dvf',
+      'flac',
+      'gsm',
+      'iklax',
+      'ivs',
+      'm4a',
+      'm4b',
+      'm4p',
+      'mmf',
+      'mogg',
+      'movpkg',
+      'mp3',
+      'mpc',
+      'msv',
+      'nmf',
+      'oga',
+      'ogga',
+      'opus',
+      'ra',
+      'raw',
+      'rf64',
+      'rm',
+      'sln',
+      'tta',
+      'voc',
+      'vox',
+      'wav',
+      'wma',
+      'wv'
+    ]
+  },
+  code: {
+    icon: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
+    extensions: [
+      'bash',
+      'c++',
+      'c',
+      'cc',
+      'cpp',
+      'css',
+      'feature',
+      'go',
+      'h',
+      'hh',
+      'hpp',
+      'htm',
+      'html',
+      'java',
+      'js',
+      'json',
+      'php',
+      'pl',
+      'py',
+      'scss',
+      'sh',
+      'sh-lib',
+      'sql',
+      'ts',
+      'xml',
+      'yaml',
+      'yml'
+    ]
+  },
+  default: {
+    icon: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
+    extensions: ['accdb', 'rss', 'swf']
+  },
+  drawio: {
+    icon: { name: 'resource-type-drawio', color: 'var(--oc-color-icon-drawio)' },
+    extensions: ['drawio']
+  },
+  document: {
+    icon: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
+    extensions: ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
+  },
+  ifc: {
+    icon: { name: 'resource-type-ifc', color: 'var(--oc-color-icon-ifc)' },
+    extensions: ['ifc']
+  },
+  ipynb: {
+    icon: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
+    extensions: ['ipynb']
+  },
+  image: {
+    icon: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
+    extensions: [
+      'ai',
+      'cdr',
+      'eot',
+      'eps',
+      'gif',
+      'jpeg',
+      'jpg',
+      'otf',
+      'pfb',
+      'png',
+      'ps',
+      'psd',
+      'svg',
+      'ttf',
+      'woff',
+      'xcf'
+    ]
+  },
+  form: {
+    icon: { name: 'resource-type-form', color: 'var(--oc-color-icon-form)' },
+    extensions: ['docf', 'docxf', 'oform']
+  },
+  markdown: {
+    icon: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
+    extensions: ['md']
+  },
+  odg: {
+    icon: { name: 'resource-type-graphic', color: 'var(--oc-color-icon-graphic)' },
+    extensions: ['odg']
+  },
+  pdf: {
+    icon: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
+    extensions: ['pdf']
+  },
+  presentation: {
+    icon: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
+    extensions: [
+      'odp',
+      'pot',
+      'potm',
+      'potx',
+      'ppa',
+      'ppam',
+      'pps',
+      'ppsm',
+      'ppsx',
+      'ppt',
+      'pptm',
+      'pptx'
+    ]
+  },
+  root: {
+    icon: { name: 'resource-type-root', color: 'var(--oc-color-icon-root)' },
+    extensions: ['root']
+  },
+  spreadsheet: {
+    icon: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
+    extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
+  },
+  text: {
+    icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
+    extensions: [
+      'cb7',
+      'cba',
+      'cbr',
+      'cbt',
+      'cbtc',
+      'cbz',
+      'cvbdl',
+      'eml',
+      'epub',
+      'mdb',
+      'tex',
+      'txt'
+    ]
+  },
+  url: {
+    icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
+    extensions: ['url']
+  },
+  video: {
+    icon: {
+      name: 'resource-type-video',
+      color: 'var(--oc-color-icon-video)'
+    },
+    extensions: ['mov', 'mp4', 'webm', 'wmv']
+  }
+}
+
+export function createDefaultFileIconMapping() {
+  const fileIconMapping: Record<string, IconType> = {}
+
+  Object.values(fileIcon).forEach((value) => {
+    value.extensions.forEach((extension) => {
+      fileIconMapping[extension] = value.icon
+    })
+  })
+
+  return fileIconMapping
+}

packages/design-system/src/helpers/index.ts

@@ -1,3 +1,4 @@
+export * from './colors'
 export * from './constants'
+export * from './createDefaultFileIconMapping'
 export * from './types'
-export * from './colors'