[full-ci] Add admin space sidebar details

changelog/unreleased/enhancement-spaces-list-in-admin-settings

@@ -4,3 +4,5 @@ The admin settings now have a view to list all spaces for the current instance.
 
 https://github.com/owncloud/web/pull/8178
 https://github.com/owncloud/web/pull/8195
+https://github.com/owncloud/web/pull/8192
+https://github.com/owncloud/web/issues/8219

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -379,15 +379,23 @@ export default defineComponent({
 
   .oc-table-header-cell-manager,
   .oc-table-data-cell-manager,
+  .oc-table-header-cell-remainingQuota,
+  .oc-table-data-cell-remainingQuota {
+    display: none;
+
+    @media only screen and (min-width: 1200px) {
+      display: table-cell;
+    }
+  }
   .oc-table-header-cell-totalQuota,
   .oc-table-data-cell-totalQuota,
+  .oc-table-header-cell-availableQuota,
+  .oc-table-data-cell-availableQuota,
   .oc-table-header-cell-usedQuota,
-  .oc-table-data-cell-usedQuota,
-  .oc-table-header-cell-remainingQuota,
-  .oc-table-data-cell-remainingQuota {
+  .oc-table-data-cell-usedQuota {
     display: none;
 
-    @media only screen and (min-width: 1400px) {
+    @media only screen and (min-width: 1700px) {
       display: table-cell;
     }
   }

packages/web-app-admin-settings/src/views/Groups.vue

@@ -169,16 +169,6 @@ export default defineComponent({
            */
         }
       ]
-    },
-
-    toggleSidebarButtonLabel() {
-      return this.$gettext(
-        this.sideBarOpen ? 'Close sidebar to hide details' : 'Open sidebar to view details'
-      )
-    },
-
-    toggleSidebarButtonIconFillType() {
-      return this.sideBarOpen ? 'fill' : 'line'
     }
   },
 

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -7,6 +7,8 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
+      @closeSideBar="closeSideBar"
+      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -59,6 +61,9 @@ import AppTemplate from '../components/AppTemplate.vue'
 import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
 import SpacesList from '../components/Spaces/SpacesList.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
+import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue'
+import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -79,7 +84,6 @@ export default defineComponent({
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
     const sideBarOpen = ref(false)
-    const sideBarActivePanel = ref('DetailsPanel')
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -99,7 +103,6 @@ export default defineComponent({
       }
     ])
 
-    const sideBarAvailablePanels = computed(() => [])
     const allSpacesSelected = computed(() => unref(spaces).length === unref(selectedSpaces).length)
 
     const calculateListHeaderPosition = () => {
@@ -126,6 +129,49 @@ export default defineComponent({
       selectedSpaces.value = []
     }
 
+    const sideBarAvailablePanels = computed(() => {
+      return [
+        {
+          app: 'SpaceNoSelection',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceNoSelection,
+          default: true,
+          enabled: unref(selectedSpaces).length === 0
+        },
+        {
+          app: 'SpaceDetails',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceDetails,
+          default: true,
+          enabled: unref(selectedSpaces).length === 1,
+          componentAttrs: {
+            spaceResource: unref(selectedSpaces)[0]
+          }
+        },
+        {
+          app: 'SpaceDetailsMultiple',
+          icon: 'layout-grid',
+          title: $gettext('Space details'),
+          component: SpaceDetailsMultiple,
+          default: true,
+          enabled: unref(selectedSpaces).length > 1
+        }
+      ]
+    })
+
+    const sideBarActivePanel = computed(() => {
+      return unref(sideBarAvailablePanels).find((e) => e.enabled).app
+    })
+
+    const closeSideBar = () => {
+      sideBarOpen.value = false
+    }
+    const toggleSideBar = () => {
+      sideBarOpen.value = !unref(sideBarOpen)
+    }
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       const loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -145,11 +191,13 @@ export default defineComponent({
       graphClient,
       accessToken,
       breadcrumbs,
-      sideBarAvailablePanels,
       listHeaderPosition,
       selectedSpaces,
       sideBarOpen,
+      sideBarAvailablePanels,
       sideBarActivePanel,
+      closeSideBar,
+      toggleSideBar,
       template,
       toggleSelectAllSpaces,
       toggleSelectSpace,

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -198,7 +198,7 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import maxSize from 'popper-max-size-modifier'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from 'web-pkg/src/constants'
 import { SortDir } from '../../composables'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import {

packages/web-app-files/src/components/FilesList/ResourceTiles.vue

@@ -33,7 +33,7 @@ import { useStore, useTranslations } from 'web-pkg/src/composables'
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { EVENT_TROW_CONTEXTMENU } from '../../constants'
+import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
 
 export default defineComponent({
   name: 'ResourceTiles',

packages/web-app-files/src/components/Search/List.vue

@@ -70,7 +70,7 @@
 import { useResourcesViewDefaults } from '../../composables'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageType, ImageDimension } from '../../constants'
+import { ImageType, ImageDimension } from 'web-pkg/src/constants'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import ContextActions from '../FilesList/ContextActions.vue'

packages/web-app-files/src/components/Search/Preview.vue

@@ -22,7 +22,7 @@
 <script lang="ts">
 import MixinFileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { loadPreview } from 'web-pkg/src/helpers'
 import debounce from 'lodash-es/debounce'

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -91,7 +91,7 @@
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import { computed, defineComponent, unref } from 'vue'
 import debounce from 'lodash-es/debounce'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import FileActions from '../../mixins/fileActions'

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -159,7 +159,7 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, inject, ref, unref, watch } from 'vue'
 import { mapGetters } from 'vuex'
-import { ImageDimension } from '../../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import upperFirst from 'lodash-es/upperFirst'
 import { basename, dirname } from 'path'

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -85,7 +85,7 @@ import {
   useStore,
   useTranslations
 } from 'web-pkg/src/composables'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { marked } from 'marked'

packages/web-app-files/src/fileSideBars.ts

@@ -6,7 +6,7 @@ import SharesPanel from './components/SideBar/Shares/SharesPanel.vue'
 import TagsPanel from './components/SideBar/TagsPanel.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
-import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
+import SpaceDetails from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue'
 import {
   isLocationTrashActive,
   isLocationPublicActive,

packages/web-app-files/src/helpers/user/avatarUrl.ts

@@ -1,5 +1,5 @@
 import { cacheService, ClientService } from 'web-pkg/src/services'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 
 interface AvatarUrlOptions {
   clientService: ClientService

packages/web-app-files/src/views/Favorites.vue

@@ -71,7 +71,7 @@ import ResourceTable from '../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import AppBar from '../components/AppBar/AppBar.vue'

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -65,7 +65,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'

packages/web-app-files/src/views/shares/SharedWithOthers.vue

@@ -65,7 +65,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import debounce from 'lodash-es/debounce'
 
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -119,7 +119,7 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../../constants'
+import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { BreadcrumbItem, breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'

packages/web-app-files/src/views/spaces/Projects.vue

@@ -88,7 +88,7 @@ import AppBar from '../../components/AppBar/AppBar.vue'
 import CreateSpace from '../../components/AppBar/CreateSpace.vue'
 import { useAccessToken, useStore, useGraphClient } from 'web-pkg/src/composables'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
-import { ImageDimension } from '../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'

packages/web-app-files/tests/unit/components/SpaceQuota.spec.ts

@@ -1,4 +1,4 @@
-import SpaceQuota from 'web-app-files/src/components/SpaceQuota.vue'
+import SpaceQuota from 'web-pkg/src/components/SpaceQuota.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
 
 describe('SpaceQuota component', () => {

packages/web-app-files/tests/unit/helpers/user/avatarUrl.spec.ts

@@ -1,5 +1,5 @@
 import { avatarUrl } from '../../../../src/helpers/user'
-import { ImageDimension } from '../../../../src/constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import mockAxios from 'jest-mock-axios'
 import { ClientService } from 'web-pkg/src/services'
 

packages/web-pkg/package.json

@@ -14,6 +14,7 @@
     "vue-router": "3.6.5",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
-    "web-pkg": "npm:@ownclouders/web-pkg"
+    "web-pkg": "npm:@ownclouders/web-pkg",
+    "vue-concurrency": "4.0.0"
   }
 }

packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue → packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue

@@ -64,24 +64,29 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, unref } from 'vue'
+import { defineComponent, PropType, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
-import { buildResource } from 'web-client/src/helpers'
+import { buildResource, SpaceResource } from 'web-client/src/helpers'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { spaceRoleManager } from 'web-client/src/helpers/share'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
-import { ImageDimension } from '../../../constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
-import SpaceQuota from '../../SpaceQuota.vue'
+import SpaceQuota from '../../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../../composables/sideBar'
 
 export default defineComponent({
   name: 'SpaceDetails',
   components: { SpaceQuota },
+  props: {
+    spaceResource: {
+      type: Object as PropType<SpaceResource>,
+      required: false
+    }
+  },
   setup() {
     const store = useStore()
     const accessToken = useAccessToken({ store })
@@ -124,7 +129,7 @@ export default defineComponent({
     ...mapGetters('runtime/spaces', ['spaceMembers']),
     ...mapGetters(['user']),
     space() {
-      return this.highlightedFile
+      return this.spaceResource || this.highlightedFile
     },
     hasShares() {
       return this.hasMemberShares || this.hasLinkShares
@@ -183,6 +188,21 @@ export default defineComponent({
       return formatDateFromISO(this.space.mdate, this.$language.current)
     },
     ownerUsernames() {
+      /* TODO: Find a better solution for reactiveness
+         Why: Currently we use a different logic for the admin-panel and we need a solution that works for both
+      */
+      if (this.spaceResource) {
+        return this.space.spaceRoles[spaceRoleManager.name]
+          .map((share) => {
+            if (share.displayName === this.user?.displayName) {
+              return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
+                displayName: share.displayName
+              })
+            }
+            return share.displayName
+          })
+          .join(', ')
+      }
       const userId = this.user?.id
       return this.spaceMembers
         .filter((share) => share.role.name === spaceRoleManager.name)
@@ -246,7 +266,7 @@ export default defineComponent({
   },
   methods: {
     expandSharesPanel() {
-      eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share')
+      eventBus.publish('app.files.sidebar.setActivePanel', 'space-share')
     }
   }
 })

packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="oc-mt-xl">
+    <div class="oc-flex space-info">
+      <oc-icon name="layout-grid" size="xxlarge" />
+      <p v-translate>Multiple spaces selected</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SpaceDetailsMultiple'
+}
+</script>
+<style lang="scss">
+.space-info {
+  align-items: center;
+  flex-direction: column;
+}
+</style>