Make viewoption modes configurable via appBar || Extend OcResourceIcon for spaces

changelog/unreleased/enhancement-condensed-files-view

@@ -1,7 +1,9 @@
 Enhancement: Add switch to enable condensed resource table
 
 We've added a switch to have a more condensed resource table. 
-The change gets saved to the route and persisted across resource navigation.
+The change gets saved to the route and persisted across folder 
+navigation in all files, spaces and favorites views.
 
 https://github.com/owncloud/web/pull/7976
+https://github.com/owncloud/web/pull/8105
 https://github.com/owncloud/web/issues/6380

packages/design-system/changelog/unreleased/enhancement-resource-icon-space

@@ -0,0 +1,5 @@
+Enhancement: Make OcResourceIcon accept space resource
+
+We have modified the OcResourceIcon component to show the space icon if a space resource is passed.
+
+https://github.com/owncloud/web/pull/8105

packages/design-system/package.json

@@ -65,20 +65,20 @@
     "depcheck": "^1.3.1",
     "file-loader": "^6.2.0",
     "filesize": "^9.0.9",
-    "focus-trap-vue": "^1.1.1",
     "focus-trap": "^6.4.0",
+    "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.4.6",
     "glob": "^8.0.3",
     "html-loader": "^1.3.2",
+    "jest": "^28.0.2",
     "jest-axe": "^6.0.0",
     "jest-environment-jsdom": "^28.0.2",
     "jest-serializer-vue": "^2.0.2",
-    "jest": "^28.0.2",
     "luxon": "^3.0.1",
     "mini-css-extract-plugin": "^1.3.1",
     "node-notifier": "^10.0.0",
-    "npm-run-all": "^4.1.5",
     "npm": "^8.0.0",
+    "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "popper-max-size-modifier": "^0.2.0",
@@ -88,40 +88,40 @@
     "postcss-url": "^9.0.0",
     "prettier": "^2.3.2",
     "process": "^0.11.10",
-    "react-dom": "^18.0.0",
     "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
+    "sass": "1.56.2",
     "sass-loader": "^10.1.0",
     "sass-resources-loader": "^2.0.1",
-    "sass": "1.56.2",
     "semver": "^7.1.3",
     "shelljs": "^0.8.3",
     "style-dictionary": "^3.0.0-rc.8",
     "style-loader": "^2.0.0",
     "style-value-types": "^5.0.0",
+    "stylelint": "^14.14.0",
     "stylelint-config-sass-guidelines": "^9.0.0",
     "stylelint-config-standard": "^26.0.0",
-    "stylelint": "^14.14.0",
     "tinycolor2": "^1.4.2",
     "tippy.js": "^6.3.7",
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
     "v-calendar": "^2.3.4",
+    "vue": "2.7.14",
     "vue-gettext": "^2.1.12",
     "vue-inline-svg": "^2.0.0",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.9.0",
     "vue-select": "^3.12.0",
     "vue-style-loader": "^4.1.2",
     "vue-styleguidist": "^4.44.2",
-    "vue": "2.7.14",
     "web-test-helpers": "workspace:*",
     "webfontloader": "^1.6.28",
+    "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^4.2.0",
-    "webpack-merge-and-include-globally": "^2.1.24",
     "webpack-merge": "^5.4.0",
+    "webpack-merge-and-include-globally": "^2.1.24",
     "webpack-node-externals": "^3.0.0",
-    "webpack": "^4.41.6",
     "yaml": "^2.0.0"
   },
   "peerDependencies": {
@@ -138,6 +138,7 @@
     "vue": "^2.7.13",
     "vue-inline-svg": "^2.0.0",
     "vue-select": "^3.12.0",
+    "web-client": "npm:@ownclouders/web-client",
     "webfontloader": "^1.6.28"
   },
   "engines": {

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

@@ -91,6 +91,8 @@
 </template>
 
 <script>
+import { AVAILABLE_SIZES } from '../../helpers/constants'
+
 import OcButton from '../OcButton/OcButton.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -140,19 +142,21 @@ export default {
       required: false,
       default: 'medium',
       validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
+        return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     }
   },
   computed: {
     dropdownItems() {
-      if (this.items.length <= 1 || !this.items) return false
-
+      if (this.items.length <= 1 || !this.items) {
+        return false
+      }
       return [...this.items].reverse().slice(1)
     },
     currentFolder() {
-      if (this.items.length === 0 || !this.items) return false
-
+      if (this.items.length === 0 || !this.items) {
+        return false
+      }
       return [...this.items].reverse()[0]
     },
     contextMenuLabel() {

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

@@ -18,6 +18,7 @@
 <script lang="ts">
 import tippy, { hideAll } from 'tippy.js'
 import { destroy, hideOnEsc } from '../../directives/OcTooltip'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
 import uniqueId from '../../utils/uniqueId'
 import { getSizeClass } from '../../utils/sizeClasses'
 import { defineComponent } from 'vue'
@@ -106,8 +107,8 @@ export default defineComponent({
       type: String,
       required: false,
       default: 'medium',
-      validator: (value: string) => {
-        return !!value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
+      validator: (value) => {
+        return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     },
     /**

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

@@ -20,9 +20,10 @@
 </template>
 
 <script>
-import uniqueId from '../../utils/uniqueId'
 import InlineSvg from 'vue-inline-svg'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
 import { getSizeClass } from '../../utils/sizeClasses'
+import uniqueId from '../../utils/uniqueId'
 /**
  * Icons are used to visually communicate core parts of the product and
  * available actions. They can act as wayfinding tools to help users more
@@ -44,7 +45,9 @@ import { getSizeClass } from '../../utils/sizeClasses'
 InlineSvg.name = 'inline-svg'
 /*InlineSvg.methods.download = name => {
   return (promise => {
-    if (promise.isPending) return promise
+    if (promise.isPending) {
+      return promise
+    }
     let isPending = true
     let result = promise.then(
       v => {
@@ -122,7 +125,7 @@ export default {
       type: String,
       default: 'medium',
       validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
+        return AVAILABLE_SIZES.some((e) => e === value)
       }
     },
     /**
@@ -154,7 +157,9 @@ export default {
     nameWithFillType() {
       const path = 'icons/'
       const fillType = this.fillType.toLowerCase()
-      if (fillType === 'none') return `${path}${this.name}.svg`
+      if (fillType === 'none') {
+        return `${path}${this.name}.svg`
+      }
       return `${path}${this.name}-${fillType}.svg`
     }
   },
@@ -166,7 +171,9 @@ export default {
       return this.prefix(c)
     },
     prefix(string) {
-      if (string !== null) return `oc-icon-${string}`
+      if (string !== null) {
+        return `oc-icon-${string}`
+      }
     },
     transformSvgElement(svg) {
       if (this.accessibleLabel !== '') {

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

@@ -44,8 +44,11 @@ export default {
       return Math.round((100 / this.max) * this.progress)
     },
     _label() {
-      if (this.max === 100) return this.progress + '%'
-      else return `${this.progress}/${this.max}`
+      if (this.max === 100) {
+        return this.progress + '%'
+      } else {
+        return `${this.progress}/${this.max}`
+      }
     }
   }
 }

packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts

@@ -53,7 +53,6 @@ describe('OcRecipient', () => {
       hasAvatar: false
     })
 
-    console.log(wrapper.html())
     const icon = wrapper.find('[data-testid="recipient-icon"]')
 
     expect(icon.exists()).toBeTruthy()

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

@@ -0,0 +1,27 @@
+import { shallowMount } from 'web-test-helpers'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
+import { OcResourceIcon } from '..'
+
+const resources = ['file', 'folder', 'space']
+
+describe('OcResourceIcon', () => {
+  resources.forEach((resourceType) => {
+    AVAILABLE_SIZES.forEach((size) => {
+      it(`renders OcIcon for resource type ${resourceType} in size ${size}`, () => {
+        const { wrapper } = getWrapper({ resourceType, size })
+        expect(wrapper.html()).toMatchSnapshot()
+      })
+    })
+  })
+})
+
+function getWrapper(props) {
+  return {
+    wrapper: shallowMount(OcResourceIcon as any, {
+      props: {
+        resource: { type: props.resourceType },
+        size: props.size
+      }
+    })
+  }
+}

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

@@ -4,24 +4,27 @@
     :name="iconName"
     :color="iconColor"
     :size="size"
-    :class="[
-      'oc-resource-icon',
-      { 'oc-resource-icon-file': !isFolder, 'oc-resource-icon-folder': isFolder }
-    ]"
+    :class="['oc-resource-icon', iconTypeClass]"
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Resource } from 'web-client'
+
 import OcIcon from '../OcIcon/OcIcon.vue'
-import iconNameMap from '../../helpers/resourceIconExtensionMapping'
-import iconColorMap from '../../helpers/resourceIconColorExtensionMapping'
+import { AVAILABLE_SIZES } from '../../helpers'
+import iconColorMap from '../../helpers/resourceIconColorExtensionMapping.json'
+import iconNameMap from '../../helpers/resourceIconExtensionMapping.json'
 
 const defaultFolderColor = 'var(--oc-color-icon-folder)'
 const defaultFolderIcon = 'resource-type-folder'
+const defaultSpaceColor = 'var(--oc-color-swatch-passive-default)'
+const defaultSpaceIcon = 'layout-grid'
 const defaultFallbackIconColor = 'var(--oc-color-text-default)'
 const defaultFallbackIcon = 'file'
 
-export default {
+export default defineComponent({
   name: 'OcResourceIcon',
   status: 'ready',
   release: '12.0.0',
@@ -31,7 +34,7 @@ export default {
      * The resource to be displayed
      */
     resource: {
-      type: Object,
+      type: Object as PropType<Resource>,
       required: true
     },
     /**
@@ -41,30 +44,55 @@ export default {
     size: {
       type: String,
       default: 'large',
-      validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
+      validator: (value: string): boolean => {
+        return AVAILABLE_SIZES.some((e) => e === value)
       }
     }
   },
   computed: {
     iconName() {
-      if (this.isFolder) return defaultFolderIcon
+      if (this.isSpace) {
+        return defaultSpaceIcon
+      }
+      if (this.isFolder) {
+        return defaultFolderIcon
+      }
       const icon = iconNameMap[this.extension]
       return `resource-type-${icon ? icon : defaultFallbackIcon}`
     },
     iconColor() {
-      if (this.isFolder) return defaultFolderColor
+      if (this.isSpace) {
+        return defaultSpaceColor
+      }
+      if (this.isFolder) {
+        return defaultFolderColor
+      }
       const color = iconColorMap[this.extension]
       return color ? color : defaultFallbackIconColor
     },
+    iconTypeClass() {
+      if (this.isSpace) {
+        return 'oc-resource-icon-space'
+      }
+      if (this.isFolder) {
+        return 'oc-resource-icon-folder'
+      }
+      return 'oc-resource-icon-file'
+    },
     isFolder() {
-      return this.resource.isFolder
+      // fallback is necessary since
+      // sometimes resources without a type
+      // but with `isFolder` are being passed
+      return this.resource.type === 'folder' || this.resource.isFolder
+    },
+    isSpace() {
+      return this.resource.type === 'space'
     },
     extension() {
       return this.resource.extension?.toLowerCase()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">