From 03939584a0376a33c58db1a7751e2312de11118c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 3 Jan 2023 15:48:36 +0100
Subject: [PATCH 01/11] Implement the spaces list in the admin settings

---
 packages/web-app-admin-settings/package.json  |   3 +-
 .../src/components/Spaces/SpacesList.vue      | 303 ++++++++++++++++++
 packages/web-app-admin-settings/src/index.js  |  21 ++
 .../src/views/Spaces.vue                      | 160 +++++++++
 packages/web-client/src/graph.ts              |   7 +-
 pnpm-lock.yaml                                |   2 +
 6 files changed, 494 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
 create mode 100644 packages/web-app-admin-settings/src/views/Spaces.vue

diff --git a/packages/web-app-admin-settings/package.json b/packages/web-app-admin-settings/package.json
index b20cb5e9e44..0f863ffc24e 100644
--- a/packages/web-app-admin-settings/package.json
+++ b/packages/web-app-admin-settings/package.json
@@ -15,6 +15,7 @@
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
     "vuex": "^3.6.2",
-    "web-pkg": "npm:@ownclouders/web-pkg"
+    "web-pkg": "npm:@ownclouders/web-pkg",
+    "web-client": "npm:@ownclouders/web-client"
   }
 }
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
new file mode 100644
index 00000000000..9889e4e7fcf
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <oc-table
+      ref="table"
+      class="spaces-table"
+      :sort-by="sortBy"
+      :sort-dir="sortDir"
+      :fields="fields"
+      :data="orderedSpaces"
+      :highlighted="highlighted"
+      :sticky="true"
+      :header-position="headerPosition"
+      :hover="true"
+      @sort="handleSort"
+      @highlight="fileClicked"
+    >
+      <template #selectHeader>
+        <oc-checkbox
+          size="large"
+          class="oc-ml-s"
+          :label="$gettext('Select all spaces')"
+          :value="allSpacesSelected"
+          hide-label
+          @input="$emit('toggleSelectAllSpaces')"
+        />
+      </template>
+      <template #select="{ item }">
+        <oc-checkbox
+          class="oc-ml-s"
+          size="large"
+          :value="isSpaceSelected(item)"
+          :option="item"
+          :label="getSelectSpaceLabel(item)"
+          hide-label
+          @input="$emit('toggleSelectSpace', item)"
+          @click.native.stop
+        />
+      </template>
+      <template #icon>
+        <oc-icon name="layout-grid" />
+      </template>
+      <template #manager="{ item }">
+        {{ getManagers(item) }}
+      </template>
+      <template #members="{ item }">
+        {{ getSpaceMemberCount(item) }}
+      </template>
+      <template #availableQuota="{ item }"> {{ getAvailableQuota(item) }} </template>
+      <template #usedQuota="{ item }"> {{ getUsedQuota(item) }} </template>
+      <template #remainingQuota="{ item }"> {{ getRemainingQuota(item) }} </template>
+      <template #mdate="{ item }">
+        {{ getSpaceMdate(item) }}
+      </template>
+      <template #status="{ item }">
+        <span v-if="item.disabled" class="oc-flex oc-flex-middle">
+          <oc-icon name="stop-circle" variation="danger" class="oc-mr-s" /><span
+            v-text="$gettext('Disabled')"
+          />
+        </span>
+        <span v-else class="oc-flex oc-flex-middle">
+          <oc-icon name="play-circle" variation="success" class="oc-mr-s" /><span
+            v-text="$gettext('Enabled')"
+          />
+        </span>
+      </template>
+      <template #footer>
+        <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+          <p class="oc-text-muted">{{ footerTextTotal }}</p>
+        </div>
+      </template>
+    </oc-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { formatDateFromISO } from 'web-pkg/src/helpers'
+import { computed, defineComponent, getCurrentInstance, PropType, ref, unref } from 'vue'
+import { SpaceResource } from 'web-client/src/helpers'
+import { useTranslations } from 'web-pkg'
+
+export default defineComponent({
+  name: 'SpacesList',
+  props: {
+    spaces: {
+      type: Array as PropType<SpaceResource[]>,
+      required: true
+    },
+    selectedSpaces: {
+      type: Array as PropType<SpaceResource[]>,
+      required: true
+    },
+    headerPosition: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
+  setup: function (props) {
+    const vm = getCurrentInstance().proxy
+    const { $gettext, $gettextInterpolate } = useTranslations()
+    const sortBy = ref('name')
+    const sortDir = ref('asc')
+
+    const allSpacesSelected = computed(() => props.spaces.length === props.selectedSpaces.length)
+    const highlighted = computed(() => props.selectedSpaces.map((s) => s.id))
+    const footerTextTotal = computed(() => {
+      const translated = $gettext('%{spaceCount} spaces in total')
+      return $gettextInterpolate(translated, { spaceCount: props.spaces.length })
+    })
+
+    const orderBy = (list, prop, desc) => {
+      return [...list].sort((s1, s2) => {
+        let a, b
+
+        switch (prop) {
+          case 'members':
+            a = getSpaceMemberCount(s1).toString() || ''
+            b = getSpaceMemberCount(s2).toString() || ''
+            break
+          case 'availableQuota':
+            a = getAvailableQuota(s1).toString() || ''
+            b = getAvailableQuota(s2).toString() || ''
+            break
+          case 'usedQuota':
+            a = getUsedQuota(s1).toString() || ''
+            b = getUsedQuota(s2).toString() || ''
+            break
+          case 'remainingQuota':
+            a = getRemainingQuota(s1).toString() || ''
+            b = getRemainingQuota(s2).toString() || ''
+            break
+          case 'status':
+            a = s1.disabled.toString() || ''
+            b = s2.disabled.toString() || ''
+            break
+          default:
+            a = s1[prop] || ''
+            b = s2[prop] || ''
+        }
+
+        return desc ? b.localeCompare(a) : a.localeCompare(b)
+      })
+    }
+    const orderedSpaces = computed(() =>
+      orderBy(props.spaces, unref(sortBy), unref(sortDir) === 'desc')
+    )
+    const handleSort = (event) => {
+      sortBy.value = event.sortBy
+      sortDir.value = event.sortDir
+    }
+
+    const isSpaceSelected = (space: SpaceResource) => {
+      return props.selectedSpaces.some((s) => s.id === space.id)
+    }
+
+    const fields = computed(() => [
+      {
+        name: 'select',
+        title: '',
+        type: 'slot',
+        width: 'shrink',
+        headerType: 'slot'
+      },
+      {
+        name: 'icon',
+        title: '',
+        type: 'slot',
+        width: 'shrink'
+      },
+      {
+        name: 'name',
+        title: $gettext('Name'),
+        sortable: true
+      },
+      {
+        name: 'manager',
+        title: $gettext('Manager'),
+        type: 'slot'
+      },
+      {
+        name: 'members',
+        title: $gettext('Members'),
+        type: 'slot',
+        sortable: true
+      },
+      {
+        name: 'availableQuota',
+        title: $gettext('Available Quota'),
+        type: 'slot',
+        sortable: true
+      },
+      {
+        name: 'usedQuota',
+        title: $gettext('Used Quota'),
+        type: 'slot',
+        sortable: true
+      },
+      {
+        name: 'remainingQuota',
+        title: $gettext('Remaining Quota'),
+        type: 'slot',
+        sortable: true
+      },
+      {
+        name: 'mdate',
+        title: $gettext('Modified'),
+        type: 'slot',
+        sortable: true
+      },
+      {
+        name: 'status',
+        title: $gettext('Status'),
+        type: 'slot',
+        sortable: true
+      }
+    ])
+
+    const getManagers = (space: SpaceResource) => {
+      // TODO: get all manager names of a space?! Oh boy
+      return 'managers'
+    }
+    const getSpaceMdate = (space: SpaceResource) => {
+      return formatDateFromISO(space.mdate, vm.$language.current)
+    }
+    const getAvailableQuota = (space: SpaceResource) => {
+      return `${space.spaceQuota.total * Math.pow(10, -9)} GB`
+    }
+    const getUsedQuota = (space: SpaceResource) => {
+      if (space.spaceQuota.used === undefined) {
+        return '-'
+      }
+      return `${(space.spaceQuota.used * Math.pow(10, -9)).toFixed(2)} GB`
+    }
+    const getRemainingQuota = (space: SpaceResource) => {
+      if (space.spaceQuota.remaining === undefined) {
+        return '-'
+      }
+      return `${(space.spaceQuota.remaining * Math.pow(10, -9)).toFixed(0)} GB`
+    }
+    const getSpaceMemberCount = (space: SpaceResource) => {
+      return (
+        space.spaceRoles.manager.length +
+        space.spaceRoles.editor.length +
+        space.spaceRoles.viewer.length
+      )
+    }
+    const getSelectSpaceLabel = (space: SpaceResource) => {
+      const translated = $gettext('Select %{ space }')
+      return $gettextInterpolate(translated, { space: space.name }, true)
+    }
+
+    const fileClicked = (data) => {
+      const space = data[0]
+      vm.$emit('toggleUnSelectAllSpaces')
+      vm.$emit('toggleSelectSpace', space)
+    }
+
+    return {
+      allSpacesSelected,
+      sortBy,
+      sortDir,
+      footerTextTotal,
+      fields,
+      highlighted,
+      getManagers,
+      getSpaceMdate,
+      getAvailableQuota,
+      getUsedQuota,
+      getRemainingQuota,
+      getSpaceMemberCount,
+      getSelectSpaceLabel,
+      handleSort,
+      orderedSpaces,
+      fileClicked,
+      isSpaceSelected
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.spaces-table {
+  .oc-table-header-cell-actions,
+  .oc-table-data-cell-actions {
+    white-space: nowrap;
+  }
+
+  .oc-table-header-cell-manager,
+  .oc-table-data-cell-manager,
+  .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 {
+    display: none;
+
+    @media only screen and (min-width: 1400px) {
+      display: table-cell;
+    }
+  }
+}
+</style>
diff --git a/packages/web-app-admin-settings/src/index.js b/packages/web-app-admin-settings/src/index.js
index 884f7281af9..f5bad7778ef 100644
--- a/packages/web-app-admin-settings/src/index.js
+++ b/packages/web-app-admin-settings/src/index.js
@@ -1,6 +1,7 @@
 import translations from '../l10n/translations'
 import Users from './views/Users.vue'
 import Groups from './views/Groups.vue'
+import Spaces from './views/Spaces.vue'
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
   return msg
@@ -37,6 +38,15 @@ const routes = [
       authContext: 'user',
       title: $gettext('Groups')
     }
+  },
+  {
+    path: '/spaces',
+    name: 'admin-settings-spaces',
+    component: Spaces,
+    meta: {
+      authContext: 'user',
+      title: $gettext('Spaces')
+    }
   }
 ]
 
@@ -62,6 +72,17 @@ const navItems = [
       const permissionManager = window.Vue.$permissionManager
       return permissionManager.hasUserManagement()
     }
+  },
+  {
+    name: $gettext('Spaces'),
+    icon: 'layout-grid',
+    route: {
+      path: `/${appInfo.id}/spaces?`
+    },
+    enabled: () => {
+      const permissionManager = window.Vue.$permissionManager
+      return permissionManager.hasSpaceManagement()
+    }
   }
 ]
 
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
new file mode 100644
index 00000000000..ad1c473165e
--- /dev/null
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <app-template
+      ref="template"
+      :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
+      :breadcrumbs="breadcrumbs"
+      :side-bar-active-panel="sideBarActivePanel"
+      :side-bar-available-panels="sideBarAvailablePanels"
+      :side-bar-open="sideBarOpen"
+    >
+      <template #topbarActions>
+        <div class="admin-settings-app-bar-actions oc-mt-xs">
+          <div v-if="selectedSpaces.length > 1" class="oc-flex oc-flex-middle">
+            <oc-button
+              id="files-clear-selection"
+              v-oc-tooltip="$gettext('Clear selection')"
+              :aria-label="$gettext('Clear selection')"
+              appearance="outline"
+              @click="unselectAllSpaces"
+            >
+              <oc-icon name="close" />
+            </oc-button>
+          </div>
+        </div>
+      </template>
+      <template #mainContent>
+        <no-content-message
+          v-if="!spaces.length"
+          id="admin-settings-spaces-empty"
+          class="spaces-empty"
+          icon="layout-grid"
+        >
+          <template #message>
+            <span v-translate>No spaces in here</span>
+          </template>
+        </no-content-message>
+        <div v-else>
+          <SpacesList
+            :spaces="spaces"
+            :selected-spaces="selectedSpaces"
+            :header-position="listHeaderPosition"
+            @toggleSelectSpace="toggleSelectSpace"
+            @toggleSelectAllSpaces="toggleSelectAllSpaces"
+            @toggleUnSelectAllSpaces="unselectAllSpaces"
+          />
+        </div>
+      </template>
+    </app-template>
+  </div>
+</template>
+
+<script lang="ts">
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
+import { useAccessToken, useStore, useTranslations } from 'web-pkg/src/composables'
+import { computed, defineComponent, getCurrentInstance, onMounted, ref, unref } from 'vue'
+import { useTask } from 'vue-concurrency'
+import { eventBus } from 'web-pkg/src/services/eventBus'
+import { useGraphClient } from 'web-pkg/src/composables'
+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'
+
+export default defineComponent({
+  name: 'SpacesView',
+  components: {
+    SpacesList,
+    AppTemplate,
+    NoContentMessage
+  },
+  setup() {
+    const store = useStore()
+    const instance = getCurrentInstance().proxy
+    const accessToken = useAccessToken({ store })
+    const spaces = ref([])
+    const { graphClient } = useGraphClient()
+    const { $gettext } = useTranslations()
+
+    const template = ref(null)
+    const listHeaderPosition = ref(0)
+    const selectedSpaces = ref([])
+    const sideBarOpen = ref(false)
+    const sideBarActivePanel = ref('DetailsPanel')
+
+    const loadResourcesTask = useTask(function* (signal) {
+      const {
+        data: { value: drivesResponse }
+      } = yield unref(graphClient).drives.listAllDrives('name asc', 'driveType eq project')
+      const drives = drivesResponse.map((space) =>
+        buildSpace({ ...space, serverUrl: configurationManager.serverUrl })
+      )
+      spaces.value = drives
+    })
+
+    const breadcrumbs = computed(() => [
+      { text: $gettext('Administration Settings'), to: { path: '/admin-settings' } },
+      {
+        text: $gettext('Spaces'),
+        onClick: () => eventBus.publish('app.admin-settings.list.load')
+      }
+    ])
+
+    const sideBarAvailablePanels = computed(() => [])
+    const allSpacesSelected = computed(() => unref(spaces).length === unref(selectedSpaces).length)
+
+    const calculateListHeaderPosition = () => {
+      listHeaderPosition.value = unref(template)?.$refs?.appBar?.getBoundingClientRect()?.height
+    }
+    const toggleSelectAllSpaces = () => {
+      if (unref(allSpacesSelected)) {
+        return (selectedSpaces.value = [])
+      }
+      selectedSpaces.value = [...unref(spaces)]
+    }
+
+    const toggleSelectSpace = (toggledSpace) => {
+      const isSpaceSelected = unref(selectedSpaces).find((s) => s.id === toggledSpace.id)
+      if (!isSpaceSelected) {
+        return selectedSpaces.value.push(toggledSpace)
+      }
+
+      selectedSpaces.value = unref(selectedSpaces).filter((s) => s.id !== toggledSpace.id)
+    }
+
+    const unselectAllSpaces = () => {
+      selectedSpaces.value = []
+    }
+
+    onMounted(async () => {
+      await loadResourcesTask.perform()
+      const loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
+        loadResourcesTask.perform()
+      })
+
+      calculateListHeaderPosition()
+      window.addEventListener('resize', calculateListHeaderPosition)
+      instance.$on('beforeDestroy', () => {
+        eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
+      })
+    })
+
+    return {
+      spaces,
+      loadResourcesTask,
+      graphClient,
+      accessToken,
+      breadcrumbs,
+      sideBarAvailablePanels,
+      listHeaderPosition,
+      selectedSpaces,
+      sideBarOpen,
+      sideBarActivePanel,
+      template,
+      toggleSelectAllSpaces,
+      toggleSelectSpace,
+      unselectAllSpaces
+    }
+  }
+})
+</script>
diff --git a/packages/web-client/src/graph.ts b/packages/web-client/src/graph.ts
index 71b47f2b4b6..22469e056a4 100644
--- a/packages/web-client/src/graph.ts
+++ b/packages/web-client/src/graph.ts
@@ -18,7 +18,8 @@ import {
   TagsApiFactory,
   CollectionOfTags,
   TagAssignment,
-  TagUnassignment
+  TagUnassignment,
+  DrivesGetDrivesApi
 } from './generated'
 
 export interface Graph {
@@ -29,6 +30,7 @@ export interface Graph {
   }
   drives: {
     listMyDrives: (orderBy?: string, filter?: string) => Promise<AxiosResponse<CollectionOfDrives>>
+    listAllDrives: (orderBy?: string, filter?: string) => Promise<AxiosResponse<CollectionOfDrives>>
     getDrive: (id: string) => AxiosPromise<Drive>
     createDrive: (drive: Drive, options: any) => AxiosPromise<Drive>
     updateDrive: (id: string, drive: Drive, options: any) => AxiosPromise<Drive>
@@ -62,6 +64,7 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
   })
 
   const meDrivesApi = new MeDrivesApi(config, config.basePath, axiosClient)
+  const allDrivesApi = new DrivesGetDrivesApi(config, config.basePath, axiosClient)
   const meUserApiFactory = MeUserApiFactory(config, config.basePath, axiosClient)
   const meChangepasswordApiFactory = MeChangepasswordApiFactory(
     config,
@@ -85,6 +88,8 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
     drives: {
       listMyDrives: (orderBy?: string, filter?: string) =>
         meDrivesApi.listMyDrives(orderBy, filter),
+      listAllDrives: (orderBy?: string, filter?: string) =>
+        allDrivesApi.listAllDrives(orderBy, filter),
       getDrive: (id: string) => drivesApiFactory.getDrive(id),
       createDrive: (drive: Drive, options: any): AxiosPromise<Drive> =>
         drivesApiFactory.createDrive(drive, options),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37a9fdf3bb2..1d48846629e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -404,6 +404,7 @@ importers:
       uuid: ^9.0.0
       vue-concurrency: 4.0.0
       vuex: ^3.6.2
+      web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
       axios: 0.27.2
@@ -414,6 +415,7 @@ importers:
       uuid: 9.0.0
       vue-concurrency: 4.0.0_vue@2.7.14
       vuex: 3.6.2_vue@2.7.14
+      web-client: link:../web-client
       web-pkg: link:../web-pkg
 
   packages/web-app-draw-io:

From 94759c41bc1f463d9990705d24bd04dec1b0327f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 3 Jan 2023 16:14:37 +0100
Subject: [PATCH 02/11] Use nice date formatting

---
 .../src/components/Spaces/SpacesList.vue      | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 9889e4e7fcf..a8a8af54f28 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -49,7 +49,11 @@
       <template #usedQuota="{ item }"> {{ getUsedQuota(item) }} </template>
       <template #remainingQuota="{ item }"> {{ getRemainingQuota(item) }} </template>
       <template #mdate="{ item }">
-        {{ getSpaceMdate(item) }}
+        <span
+          v-oc-tooltip="formatDate(item.mdate)"
+          tabindex="0"
+          v-text="formatDateRelative(item.mdate)"
+        />
       </template>
       <template #status="{ item }">
         <span v-if="item.disabled" class="oc-flex oc-flex-middle">
@@ -73,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { formatDateFromISO } from 'web-pkg/src/helpers'
+import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
 import { computed, defineComponent, getCurrentInstance, PropType, ref, unref } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
 import { useTranslations } from 'web-pkg'
@@ -96,7 +100,7 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props) {
-    const vm = getCurrentInstance().proxy
+    const instance = getCurrentInstance().proxy
     const { $gettext, $gettextInterpolate } = useTranslations()
     const sortBy = ref('name')
     const sortDir = ref('asc')
@@ -219,8 +223,11 @@ export default defineComponent({
       // TODO: get all manager names of a space?! Oh boy
       return 'managers'
     }
-    const getSpaceMdate = (space: SpaceResource) => {
-      return formatDateFromISO(space.mdate, vm.$language.current)
+    const formatDate = (date) => {
+      return formatDateFromJSDate(new Date(date), instance.$language.current)
+    }
+    const formatDateRelative = (date) => {
+      return formatRelativeDateFromJSDate(new Date(date), instance.$language.current)
     }
     const getAvailableQuota = (space: SpaceResource) => {
       return `${space.spaceQuota.total * Math.pow(10, -9)} GB`
@@ -251,8 +258,8 @@ export default defineComponent({
 
     const fileClicked = (data) => {
       const space = data[0]
-      vm.$emit('toggleUnSelectAllSpaces')
-      vm.$emit('toggleSelectSpace', space)
+      instance.$emit('toggleUnSelectAllSpaces')
+      instance.$emit('toggleSelectSpace', space)
     }
 
     return {
@@ -263,7 +270,8 @@ export default defineComponent({
       fields,
       highlighted,
       getManagers,
-      getSpaceMdate,
+      formatDate,
+      formatDateRelative,
       getAvailableQuota,
       getUsedQuota,
       getRemainingQuota,

From 9dd6572d187e86ed044c8e54223b96ae2368f601 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 11:05:43 +0100
Subject: [PATCH 03/11] Use better variable naming

---
 .../src/components/Spaces/SpacesList.vue             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index a8a8af54f28..9c65f4e70c3 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -43,7 +43,7 @@
         {{ getManagers(item) }}
       </template>
       <template #members="{ item }">
-        {{ getSpaceMemberCount(item) }}
+        {{ getMemberCount(item) }}
       </template>
       <template #availableQuota="{ item }"> {{ getAvailableQuota(item) }} </template>
       <template #usedQuota="{ item }"> {{ getUsedQuota(item) }} </template>
@@ -80,7 +80,7 @@
 import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
 import { computed, defineComponent, getCurrentInstance, PropType, ref, unref } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
-import { useTranslations } from 'web-pkg'
+import { useTranslations } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -118,8 +118,8 @@ export default defineComponent({
 
         switch (prop) {
           case 'members':
-            a = getSpaceMemberCount(s1).toString() || ''
-            b = getSpaceMemberCount(s2).toString() || ''
+            a = getMemberCount(s1).toString() || ''
+            b = getMemberCount(s2).toString() || ''
             break
           case 'availableQuota':
             a = getAvailableQuota(s1).toString() || ''
@@ -244,7 +244,7 @@ export default defineComponent({
       }
       return `${(space.spaceQuota.remaining * Math.pow(10, -9)).toFixed(0)} GB`
     }
-    const getSpaceMemberCount = (space: SpaceResource) => {
+    const getMemberCount = (space: SpaceResource) => {
       return (
         space.spaceRoles.manager.length +
         space.spaceRoles.editor.length +
@@ -275,7 +275,7 @@ export default defineComponent({
       getAvailableQuota,
       getUsedQuota,
       getRemainingQuota,
-      getSpaceMemberCount,
+      getMemberCount,
       getSelectSpaceLabel,
       handleSort,
       orderedSpaces,

From b3108d01bf5b3a587fdd0b88ecb073df1a9b68b1 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 13:16:09 +0100
Subject: [PATCH 04/11] Add unit tests

---
 .../src/components/Spaces/SpacesList.vue      |  20 +--
 .../unit/components/Spaces/SpacesList.spec.ts |  90 +++++++++++++
 .../__snapshots__/SpacesList.spec.ts.snap     | 126 ++++++++++++++++++
 .../tests/unit/views/Spaces.spec.ts           | 115 ++++++++++++++++
 .../views/__snapshots__/Spaces.spec.ts.snap   |  56 ++++++++
 5 files changed, 397 insertions(+), 10 deletions(-)
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
 create mode 100644 packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
 create mode 100644 packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 9c65f4e70c3..46a751e840e 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -118,24 +118,24 @@ export default defineComponent({
 
         switch (prop) {
           case 'members':
-            a = getMemberCount(s1).toString() || ''
-            b = getMemberCount(s2).toString() || ''
+            a = getMemberCount(s1).toString()
+            b = getMemberCount(s2).toString()
             break
           case 'availableQuota':
-            a = getAvailableQuota(s1).toString() || ''
-            b = getAvailableQuota(s2).toString() || ''
+            a = getAvailableQuota(s1).toString()
+            b = getAvailableQuota(s2).toString()
             break
           case 'usedQuota':
-            a = getUsedQuota(s1).toString() || ''
-            b = getUsedQuota(s2).toString() || ''
+            a = getUsedQuota(s1).toString()
+            b = getUsedQuota(s2).toString()
             break
           case 'remainingQuota':
-            a = getRemainingQuota(s1).toString() || ''
-            b = getRemainingQuota(s2).toString() || ''
+            a = getRemainingQuota(s1).toString()
+            b = getRemainingQuota(s2).toString()
             break
           case 'status':
-            a = s1.disabled.toString() || ''
-            b = s2.disabled.toString() || ''
+            a = s1.disabled.toString()
+            b = s2.disabled.toString()
             break
           default:
             a = s1[prop] || ''
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
new file mode 100644
index 00000000000..7b6f5300dc6
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -0,0 +1,90 @@
+import SpacesList from '../../../../src/components/Spaces/SpacesList.vue'
+import { defaultPlugins, mount, shallowMount } from 'web-test-helpers'
+
+const spaceMocks = [
+  {
+    id: '1',
+    name: '1 Some space',
+    disabled: false,
+    spaceRoles: {
+      manager: ['user1'],
+      editor: [],
+      viewer: []
+    },
+    spaceQuota: {
+      total: 1000000000,
+      used: 0,
+      remaining: 1000000000
+    }
+  },
+  {
+    id: '2',
+    name: '2 Another space',
+    disabled: true,
+    spaceRoles: {
+      manager: ['user1'],
+      editor: ['user2'],
+      viewer: ['user3']
+    },
+    spaceQuota: {
+      total: 2000000000,
+      used: 500000000,
+      remaining: 1500000000
+    }
+  }
+]
+
+const selectors = {
+  ocTableStub: 'oc-table-stub'
+}
+
+describe('SpacesList', () => {
+  it('should render all spaces in a table', () => {
+    const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it.each(['name', 'members', 'availableQuota', 'usedQuota', 'remainingQuota', 'status'])(
+    'sorts by property "%s"',
+    async (prop) => {
+      const { wrapper } = getWrapper({ mountType: shallowMount, spaces: spaceMocks })
+      wrapper.vm.sortBy = prop
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find(selectors.ocTableStub).props().data[0].id).toBe(spaceMocks[0].id)
+      wrapper.vm.sortDir = 'desc'
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find(selectors.ocTableStub).props().data[0].id).toBe(spaceMocks[1].id)
+    }
+  )
+  it('should set the sort parameters accordingly when calling "handleSort"', () => {
+    const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
+    const sortBy = 'members'
+    const sortDir = 'desc'
+    wrapper.vm.handleSort({ sortBy, sortDir })
+    expect(wrapper.vm.sortBy).toEqual(sortBy)
+    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  })
+  it('emits events on file click', () => {
+    const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
+    wrapper.vm.fileClicked(spaceMocks[0])
+    expect(wrapper.emitted().toggleUnSelectAllSpaces.length).toBeTruthy()
+    expect(wrapper.emitted().toggleSelectSpace).toBeTruthy()
+  })
+})
+
+function getWrapper({ mountType = mount, spaces = [], selectedSpaces = [] } = {}) {
+  return {
+    wrapper: mountType(SpacesList, {
+      props: {
+        spaces,
+        selectedSpaces,
+        headerPosition: 0
+      },
+      global: {
+        plugins: [...defaultPlugins()],
+        stubs: {
+          OcCheckbox: true
+        }
+      }
+    })
+  }
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
new file mode 100644
index 00000000000..327ff29f1b0
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpacesList should render all spaces in a table 1`] = `
+<div>
+  <table class="spaces-table oc-table oc-table-hover oc-table-sticky">
+    <thead class="oc-thead">
+      <tr class="oc-table-header-row" tabindex="-1">
+        <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-s " style="top: 0px;">
+          <span class="oc-table-thead-content">
+            <occheckbox-stub class="oc-ml-s" hidelabel="true" id="oc-checkbox-1" label="Select all spaces" size="large"></occheckbox-stub>
+          </span>
+          <!---->
+        </th>
+        <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
+          <span class="oc-table-thead-content header-text"></span>
+          <!---->
+        </th>
+        <th aria-sort="ascending" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Name</span>
+          <button aria-label="Sort by name" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-manager" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Manager</span>
+          <!---->
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-members" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Members</span>
+          <button aria-label="Sort by members" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-availableQuota" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Available Quota</span>
+          <button aria-label="Sort by availableQuota" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Used Quota</span>
+          <button aria-label="Sort by usedQuota" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Remaining Quota</span>
+          <button aria-label="Sort by remainingQuota" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Modified</span>
+          <button aria-label="Sort by mdate" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+        <th aria-sort="none" class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status oc-pr-s" style="top: 0px;">
+          <span class="oc-table-thead-content header-text">Status</span>
+          <button aria-label="Sort by status" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible" type="button">
+            <span class="oc-icon oc-icon-s oc-icon-passive">
+              <!---->
+            </span>
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-s ">
+          <occheckbox-stub class="oc-ml-s" hidelabel="true" id="oc-checkbox-2" label="Select 1 Some space" option="[object Object]" size="large"></occheckbox-stub>
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-icon">
+          <span class="oc-icon oc-icon-m oc-icon-passive">
+            <!---->
+          </span>
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-name">
+          1 Some space
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-manager">
+          managers
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-members">
+          1
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-availableQuota"> 1 GB </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-usedQuota"> 0.00 GB </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-remainingQuota"> 1 GB </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-mdate">
+          <span tabindex="0"></span>
+        </td>
+        <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-status oc-pr-s">
+          <span class="oc-flex oc-flex-middle">
+            <span class="oc-mr-s oc-icon oc-icon-m oc-icon-success">
+              <!---->
+            </span>
+            <span>Enabled</span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot class="oc-table-footer">
+      <tr class="oc-table-footer-row">
+        <td class="oc-table-footer-cell" colspan="10">
+          <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+            <p class="oc-text-muted">1 spaces in total</p>
+          </div>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+`;
diff --git a/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
new file mode 100644
index 00000000000..8bf0a758b3d
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
@@ -0,0 +1,115 @@
+import { mockAxiosResolve } from 'web-test-helpers/src/mocks'
+import { Graph } from 'web-client'
+import { mockDeep } from 'jest-mock-extended'
+import { ClientService } from 'web-pkg/src'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  mount
+} from 'web-test-helpers'
+import Spaces from '../../../src/views/Spaces.vue'
+
+const selectors = {
+  loadingSpinnerStub: 'apploadingspinner-stub',
+  spacesListStub: 'spaceslist-stub',
+  noContentMessageStub: 'nocontentmessage-stub'
+}
+
+describe('Spaces view', () => {
+  describe('loading states', () => {
+    it('should show loading spinner if loading', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.find(selectors.loadingSpinnerStub).exists()).toBeTruthy()
+    })
+    it('should render spaces list after loading has been finished', async () => {
+      const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
+      expect(wrapper.html()).toMatchSnapshot()
+      expect(wrapper.find(selectors.spacesListStub).exists()).toBeTruthy()
+    })
+  })
+  it('should render no content message if no spaces found', async () => {
+    const graph = mockDeep<Graph>()
+    graph.drives.listAllDrives.mockImplementation(() => mockAxiosResolve({ value: [] }))
+    const { wrapper } = getWrapper({ spaces: [] })
+    await wrapper.vm.loadResourcesTask.last
+    expect(wrapper.find(selectors.noContentMessageStub).exists()).toBeTruthy()
+  })
+  describe('toggle selection', () => {
+    describe('toggleSelectAllSpaces method', () => {
+      it('selects all spaces', async () => {
+        const spaces = [{ name: 'Some Space' }]
+        const { wrapper } = getWrapper({ spaces })
+        await wrapper.vm.loadResourcesTask.last
+        wrapper.vm.toggleSelectAllSpaces()
+        expect(wrapper.vm.selectedSpaces).toEqual(
+          expect.arrayContaining([expect.objectContaining({ name: spaces[0].name })])
+        )
+      })
+      it('de-selects all selected spaces', async () => {
+        const spaces = [{ name: 'Some Space' }]
+        const { wrapper } = getWrapper({ spaces })
+        await wrapper.vm.loadResourcesTask.last
+        wrapper.vm.selectedSpaces = spaces
+        wrapper.vm.toggleSelectAllSpaces()
+        expect(wrapper.vm.selectedSpaces.length).toBe(0)
+      })
+    })
+    describe('toggleSelectSpace method', () => {
+      it('selects a space', async () => {
+        const spaces = [{ name: 'Some Space' }]
+        const { wrapper } = getWrapper()
+        await wrapper.vm.loadResourcesTask.last
+        wrapper.vm.toggleSelectSpace(spaces[0])
+        expect(wrapper.vm.selectedSpaces).toEqual(
+          expect.arrayContaining([expect.objectContaining({ name: spaces[0].name })])
+        )
+      })
+      it('de-selects a selected space', async () => {
+        const spaces = [{ name: 'Some Space' }]
+        const { wrapper } = getWrapper()
+        await wrapper.vm.loadResourcesTask.last
+        wrapper.vm.selectedSpaces = spaces
+        wrapper.vm.toggleSelectSpace(spaces[0])
+        expect(wrapper.vm.selectedSpaces.length).toBe(0)
+      })
+    })
+    describe('unselectAllSpaces method', () => {
+      it('de-selects all selected spaces', async () => {
+        const spaces = [{ name: 'Some Space' }]
+        const { wrapper } = getWrapper({ spaces })
+        await wrapper.vm.loadResourcesTask.last
+        wrapper.vm.selectedSpaces = spaces
+        wrapper.vm.unselectAllSpaces()
+        expect(wrapper.vm.selectedSpaces.length).toBe(0)
+      })
+    })
+  })
+})
+
+function getWrapper({ spaces = [{ name: 'Some Space' }] } = {}) {
+  const graph = mockDeep<Graph>()
+  graph.drives.listAllDrives.mockImplementation(() => mockAxiosResolve({ value: spaces }))
+  const $clientService = mockDeep<ClientService>()
+  $clientService.graphAuthenticated.mockImplementation(() => graph)
+  const mocks = { ...defaultComponentMocks(), $clientService }
+
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
+
+  return {
+    wrapper: mount(Spaces, {
+      global: {
+        plugins: [...defaultPlugins(), store],
+        mocks,
+        stubs: {
+          AppLoadingSpinner: true,
+          NoContentMessage: true,
+          SpacesList: true
+        }
+      }
+    })
+  }
+}
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
new file mode 100644
index 00000000000..82c2b543fcb
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spaces view loading states should render spaces list after loading has been finished 1`] = `
+<div>
+  <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
+    <div class="oc-width-expand" id="admin-settings-wrapper">
+      <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
+        <div class="oc-flex oc-flex-between">
+          <nav class="oc-flex oc-flex-middle oc-breadcrumb oc-breadcrumb-default">
+            <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
+              <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+                <a href="/admin-settings">
+                  <span>Administration Settings</span>
+                </a>
+                <span class="oc-mx-xs oc-icon oc-icon-m oc-icon-passive">
+                  <!---->
+                </span>
+                <!---->
+              </li>
+              <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+                <!---->
+                <button aria-current="page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" type="button">
+                  <span>Spaces</span>
+                </button>
+                <!---->
+              </li>
+            </ol>
+            <div class="oc-breadcrumb-drop">
+              <label aria-expanded="false" class="oc-breadcrumb-drop-label oc-flex oc-flex-middle oc-flex-between" tabindex="0">
+                <span aria-current="page" class="oc-breadcrumb-drop-label-text oc-text-truncate">Spaces</span>
+                <span class="oc-breadcrumb-drop-label-icon oc-icon oc-icon-m oc-icon-passive">
+                  <!---->
+                </span>
+              </label>
+            </div>
+          </nav>
+          <div>
+            <button aria-label="Open sidebar to view details" class="oc-my-s oc-p-xs oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="files-toggle-sidebar" type="button">
+              <span class="oc-icon oc-icon-m oc-icon-passive">
+                <!---->
+              </span>
+            </button>
+          </div>
+        </div>
+        <div class="admin-settings-app-bar-actions oc-mt-xs">
+          <!---->
+        </div>
+      </div>
+      <div>
+        <spaceslist-stub headerposition="0" selectedspaces="" spaces="[object Object]"></spaceslist-stub>
+      </div>
+    </div>
+    <!---->
+  </main>
+</div>
+`;

From da20b070e3c7cac99aec4fa12022b0bd0a1b2217 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 13:36:45 +0100
Subject: [PATCH 05/11] Use space member displayname

---
 .../src/components/Spaces/SpacesList.vue      | 22 ++++++++++++-------
 .../unit/components/Spaces/SpacesList.spec.ts | 16 ++++++++++----
 .../__snapshots__/SpacesList.spec.ts.snap     |  4 ++--
 .../web-client/src/helpers/resource/types.ts  |  1 +
 .../web-client/src/helpers/space/functions.ts |  1 +
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 46a751e840e..748cb55145d 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -40,7 +40,7 @@
         <oc-icon name="layout-grid" />
       </template>
       <template #manager="{ item }">
-        {{ getManagers(item) }}
+        {{ getManagerNames(item) }}
       </template>
       <template #members="{ item }">
         {{ getMemberCount(item) }}
@@ -81,6 +81,7 @@ import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/
 import { computed, defineComponent, getCurrentInstance, PropType, ref, unref } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
 import { useTranslations } from 'web-pkg/src/composables'
+import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -219,9 +220,14 @@ export default defineComponent({
       }
     ])
 
-    const getManagers = (space: SpaceResource) => {
-      // TODO: get all manager names of a space?! Oh boy
-      return 'managers'
+    const getManagerNames = (space: SpaceResource) => {
+      const allManagers = space.spaceRoles[spaceRoleManager.name]
+      const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers
+      let managerStr = managers.map((m) => m.displayName).join(', ')
+      if (allManagers.length > 2) {
+        managerStr += `... +${allManagers.length - 2}`
+      }
+      return managerStr
     }
     const formatDate = (date) => {
       return formatDateFromJSDate(new Date(date), instance.$language.current)
@@ -246,9 +252,9 @@ export default defineComponent({
     }
     const getMemberCount = (space: SpaceResource) => {
       return (
-        space.spaceRoles.manager.length +
-        space.spaceRoles.editor.length +
-        space.spaceRoles.viewer.length
+        space.spaceRoles[spaceRoleManager.name].length +
+        space.spaceRoles[spaceRoleEditor.name].length +
+        space.spaceRoles[spaceRoleViewer.name].length
       )
     }
     const getSelectSpaceLabel = (space: SpaceResource) => {
@@ -269,7 +275,7 @@ export default defineComponent({
       footerTextTotal,
       fields,
       highlighted,
-      getManagers,
+      getManagerNames,
       formatDate,
       formatDateRelative,
       getAvailableQuota,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
index 7b6f5300dc6..0c82cc276e9 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -7,7 +7,11 @@ const spaceMocks = [
     name: '1 Some space',
     disabled: false,
     spaceRoles: {
-      manager: ['user1'],
+      manager: [
+        { id: 'user1', displayName: 'user1' },
+        { id: 'user2', displayName: 'user2' },
+        { id: 'user3', displayName: 'user3' }
+      ],
       editor: [],
       viewer: []
     },
@@ -22,9 +26,13 @@ const spaceMocks = [
     name: '2 Another space',
     disabled: true,
     spaceRoles: {
-      manager: ['user1'],
-      editor: ['user2'],
-      viewer: ['user3']
+      manager: [
+        { id: 'user1', displayName: 'user1' },
+        { id: 'user2', displayName: 'user2' },
+        { id: 'user3', displayName: 'user3' }
+      ],
+      editor: [{ id: 'user4', displayName: 'user4' }],
+      viewer: [{ id: 'user5', displayName: 'user5' }]
     },
     spaceQuota: {
       total: 2000000000,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 327ff29f1b0..afce6b02e91 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -91,10 +91,10 @@ exports[`SpacesList should render all spaces in a table 1`] = `
           1 Some space
         </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-manager">
-          managers
+          user1, user2... +1
         </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-members">
-          1
+          3
         </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-availableQuota"> 1 GB </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-usedQuota"> 0.00 GB </td>
diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index 9679fb842ba..59c98e81561 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -2,6 +2,7 @@ import { User } from '../user'
 
 export interface SpaceRole {
   id: string
+  displayName: string
   kind: 'user' | 'group'
   isMember(u: User): boolean
 }
diff --git a/packages/web-client/src/helpers/space/functions.ts b/packages/web-client/src/helpers/space/functions.ts
index 2b3e41ec776..52811f0c18b 100644
--- a/packages/web-client/src/helpers/space/functions.ts
+++ b/packages/web-client/src/helpers/space/functions.ts
@@ -92,6 +92,7 @@ export function buildSpace(data): SpaceResource {
             const spaceRole: SpaceRole = {
               kind,
               id: info[kind].id,
+              displayName: info[kind].displayName,
               isMember(u?: any): boolean {
                 if (!u) {
                   return false

From b4c3e38995f3202760144b6b699e4ce35ef7c75d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 13:39:59 +0100
Subject: [PATCH 06/11] Add changelog item

---
 .../unreleased/enhancement-spaces-list-in-admin-settings     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-spaces-list-in-admin-settings

diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
new file mode 100644
index 00000000000..6bcd42bb438
--- /dev/null
+++ b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -0,0 +1,5 @@
+Enhancement: Spaces list in admin settings
+
+The admin settings now have a view to list all spaces for the current instance. This makes it possible for space admins to manage all spaces in one place.
+
+https://github.com/owncloud/web/pull/8178

From 7e4d2590b8a026e3ce6a717da10fc8dfeeb3d134 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 13:41:53 +0100
Subject: [PATCH 07/11] Fix code smells

---
 packages/web-app-admin-settings/src/views/Spaces.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index ad1c473165e..a1fd7b737ee 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -51,11 +51,10 @@
 
 <script lang="ts">
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAccessToken, useGraphClient, useStore, useTranslations } from 'web-pkg/src/composables'
 import { computed, defineComponent, getCurrentInstance, onMounted, ref, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { buildSpace } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg'
@@ -108,7 +107,8 @@ export default defineComponent({
     }
     const toggleSelectAllSpaces = () => {
       if (unref(allSpacesSelected)) {
-        return (selectedSpaces.value = [])
+        selectedSpaces.value = []
+        return
       }
       selectedSpaces.value = [...unref(spaces)]
     }

From 0b7ef72325b6d9fb4d3aef5fe6943ab877ae700b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 14:58:30 +0100
Subject: [PATCH 08/11] Add e2e tests for the spaces management page

---
 .../src/components/Spaces/SpacesList.vue      |  8 ++++
 packages/web-app-admin-settings/src/index.js  |  6 ++-
 .../smoke/admin-settings/spaces.ocis.feature  | 25 +++++++++++++
 tests/e2e/cucumber/steps/ui/adminSettings.ts  | 37 +++++++++++++++++++
 .../objects/app-admin-settings/index.ts       |  2 +
 .../objects/app-admin-settings/page/index.ts  |  1 +
 .../objects/app-admin-settings/page/spaces.ts | 14 +++++++
 .../app-admin-settings/spaces/actions.ts      | 13 +++++++
 .../app-admin-settings/spaces/index.ts        | 14 +++++++
 tests/e2e/support/objects/index.ts            |  1 +
 10 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/cucumber/features/smoke/admin-settings/spaces.ocis.feature
 create mode 100644 tests/e2e/cucumber/steps/ui/adminSettings.ts
 create mode 100644 tests/e2e/support/objects/app-admin-settings/index.ts
 create mode 100644 tests/e2e/support/objects/app-admin-settings/page/index.ts
 create mode 100644 tests/e2e/support/objects/app-admin-settings/page/spaces.ts
 create mode 100644 tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
 create mode 100644 tests/e2e/support/objects/app-admin-settings/spaces/index.ts

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 748cb55145d..edfa3ba09bd 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -39,6 +39,13 @@
       <template #icon>
         <oc-icon name="layout-grid" />
       </template>
+      <template #name="{ item }">
+        <span
+          class="spaces-table-space-name"
+          :data-test-space-name="item.name"
+          v-text="item.name"
+        />
+      </template>
       <template #manager="{ item }">
         {{ getManagerNames(item) }}
       </template>
@@ -175,6 +182,7 @@ export default defineComponent({
       {
         name: 'name',
         title: $gettext('Name'),
+        type: 'slot',
         sortable: true
       },
       {
diff --git a/packages/web-app-admin-settings/src/index.js b/packages/web-app-admin-settings/src/index.js
index f5bad7778ef..7639a6dce94 100644
--- a/packages/web-app-admin-settings/src/index.js
+++ b/packages/web-app-admin-settings/src/index.js
@@ -18,7 +18,11 @@ const routes = [
   {
     path: '/',
     redirect: () => {
-      return { name: 'admin-settings-users' }
+      const permissionManager = window.Vue.$permissionManager
+      if (permissionManager.hasUserManagement()) {
+        return { name: 'admin-settings-users' }
+      }
+      return { name: 'admin-settings-spaces' }
     }
   },
   {
diff --git a/tests/e2e/cucumber/features/smoke/admin-settings/spaces.ocis.feature b/tests/e2e/cucumber/features/smoke/admin-settings/spaces.ocis.feature
new file mode 100644
index 00000000000..dde8f5696b5
--- /dev/null
+++ b/tests/e2e/cucumber/features/smoke/admin-settings/spaces.ocis.feature
@@ -0,0 +1,25 @@
+Feature: spaces management
+
+  Scenario: spaces can be listed in the admin settings
+    Given "Admin" creates following users
+      | id    |
+      | Alice |
+      | Brian |
+    And "Admin" assigns following roles to the users
+      | id    | role       |
+      | Alice | SpaceAdmin |
+      | Brian | SpaceAdmin |
+    When "Alice" logs in
+    And "Alice" opens the "files" app
+    And "Alice" navigates to the projects space page
+    And "Alice" creates the following project spaces
+      | name | id     |
+      | team | team.1 |
+    And "Alice" logs out
+    Then "Brian" logs in
+    And "Brian" opens the "admin-settings" app
+    And "Brian" navigates to the project spaces management page
+    Then "Brian" should see the following spaces
+      | name |
+      | team |
+    And "Brian" logs out
diff --git a/tests/e2e/cucumber/steps/ui/adminSettings.ts b/tests/e2e/cucumber/steps/ui/adminSettings.ts
new file mode 100644
index 00000000000..475f23ebe60
--- /dev/null
+++ b/tests/e2e/cucumber/steps/ui/adminSettings.ts
@@ -0,0 +1,37 @@
+import { DataTable, Then, When } from '@cucumber/cucumber'
+import { World } from '../../environment'
+import { objects } from '../../../support'
+import { expect } from '@playwright/test'
+
+When(
+  '{string} navigates to the project spaces management page',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const pageObject = new objects.applicationAdminSettings.page.Spaces({ page })
+    await pageObject.navigate()
+  }
+)
+
+Then(
+  /^"([^"]*)" (should|should not) see the following space(s)?$/,
+  async function (
+    this: World,
+    stepUser: string,
+    actionType: string,
+    _: string,
+    stepTable: DataTable
+  ): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const spacesObject = new objects.applicationAdminSettings.Spaces({ page })
+    const actualList = await spacesObject.getDisplayedSpaces()
+
+    for (const info of stepTable.hashes()) {
+      const found = actualList.includes(info.name)
+      if (actionType === 'should') {
+        expect(found).toBe(true)
+      } else {
+        expect(found).toBe(false)
+      }
+    }
+  }
+)
diff --git a/tests/e2e/support/objects/app-admin-settings/index.ts b/tests/e2e/support/objects/app-admin-settings/index.ts
new file mode 100644
index 00000000000..b775f03bf15
--- /dev/null
+++ b/tests/e2e/support/objects/app-admin-settings/index.ts
@@ -0,0 +1,2 @@
+export * as page from './page'
+export { Spaces } from './spaces'
diff --git a/tests/e2e/support/objects/app-admin-settings/page/index.ts b/tests/e2e/support/objects/app-admin-settings/page/index.ts
new file mode 100644
index 00000000000..09fc39029a1
--- /dev/null
+++ b/tests/e2e/support/objects/app-admin-settings/page/index.ts
@@ -0,0 +1 @@
+export { Spaces } from './spaces'
diff --git a/tests/e2e/support/objects/app-admin-settings/page/spaces.ts b/tests/e2e/support/objects/app-admin-settings/page/spaces.ts
new file mode 100644
index 00000000000..133b6982d4e
--- /dev/null
+++ b/tests/e2e/support/objects/app-admin-settings/page/spaces.ts
@@ -0,0 +1,14 @@
+import { Page } from 'playwright'
+
+export class Spaces {
+  #page: Page
+
+  constructor({ page }: { page: Page }) {
+    this.#page = page
+  }
+
+  async navigate(): Promise<void> {
+    await this.#page.locator('//a[@data-nav-name="admin-settings-spaces"]').click()
+    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+  }
+}
diff --git a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
new file mode 100644
index 00000000000..d524cdd5243
--- /dev/null
+++ b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
@@ -0,0 +1,13 @@
+const spaceNameSelector = `.spaces-table-space-name`
+
+export const getDisplayedSpaces = async (page): Promise<string[]> => {
+  const spaces = []
+  const result = page.locator(spaceNameSelector)
+
+  const count = await result.count()
+  for (let i = 0; i < count; i++) {
+    spaces.push(await result.nth(i).getAttribute('data-test-space-name'))
+  }
+
+  return spaces
+}
diff --git a/tests/e2e/support/objects/app-admin-settings/spaces/index.ts b/tests/e2e/support/objects/app-admin-settings/spaces/index.ts
new file mode 100644
index 00000000000..34185d06157
--- /dev/null
+++ b/tests/e2e/support/objects/app-admin-settings/spaces/index.ts
@@ -0,0 +1,14 @@
+import { Page } from 'playwright'
+import { getDisplayedSpaces } from './actions'
+
+export class Spaces {
+  #page: Page
+
+  constructor({ page }: { page: Page }) {
+    this.#page = page
+  }
+
+  getDisplayedSpaces(): Promise<string[]> {
+    return getDisplayedSpaces(this.#page)
+  }
+}
diff --git a/tests/e2e/support/objects/index.ts b/tests/e2e/support/objects/index.ts
index 4c0d8f986b3..ed1fe119936 100644
--- a/tests/e2e/support/objects/index.ts
+++ b/tests/e2e/support/objects/index.ts
@@ -1,2 +1,3 @@
 export * as applicationFiles from './app-files'
+export * as applicationAdminSettings from './app-admin-settings'
 export * as runtime from './runtime'

From dd7ece01e9927df58711d1f8ec16581c2fe1261e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 15:06:49 +0100
Subject: [PATCH 09/11] Update snapshots

---
 .../components/Spaces/__snapshots__/SpacesList.spec.ts.snap     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index afce6b02e91..db475965513 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -88,7 +88,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
           </span>
         </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-name">
-          1 Some space
+          <span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span>
         </td>
         <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-manager">
           user1, user2... +1

From b9ba3d8894bf635b9dda1cb70edd827ca44e1521 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 15:26:06 +0100
Subject: [PATCH 10/11] Refactor admin settings index unit tests

---
 .../tests/unit/index.spec.js                  | 22 --------
 .../tests/unit/index.spec.ts                  | 53 +++++++++++++++++++
 2 files changed, 53 insertions(+), 22 deletions(-)
 delete mode 100644 packages/web-app-admin-settings/tests/unit/index.spec.js
 create mode 100644 packages/web-app-admin-settings/tests/unit/index.spec.ts

diff --git a/packages/web-app-admin-settings/tests/unit/index.spec.js b/packages/web-app-admin-settings/tests/unit/index.spec.js
deleted file mode 100644
index c278bda40b5..00000000000
--- a/packages/web-app-admin-settings/tests/unit/index.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import index from '../../src/index'
-
-describe('navItems', () => {
-  describe('function "enabled"', () => {
-    it('should be true if permissions are sufficient', () => {
-      window.Vue = {}
-      window.Vue.$permissionManager = {
-        hasUserManagement: () => true
-      }
-      expect(index.navItems[0].enabled()).toBeTruthy()
-      expect(index.navItems[1].enabled()).toBeTruthy()
-    })
-    it('should be false if permissions are insufficient', () => {
-      window.Vue = {}
-      window.Vue.$permissionManager = {
-        hasUserManagement: () => false
-      }
-      expect(index.navItems[0].enabled()).toBeFalsy()
-      expect(index.navItems[1].enabled()).toBeFalsy()
-    })
-  })
-})
diff --git a/packages/web-app-admin-settings/tests/unit/index.spec.ts b/packages/web-app-admin-settings/tests/unit/index.spec.ts
new file mode 100644
index 00000000000..0d902b3e084
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/index.spec.ts
@@ -0,0 +1,53 @@
+import index from '../../src/index'
+
+describe('admin settings index', () => {
+  beforeEach(() => {
+    ;(window as any).Vue = {}
+  })
+  describe('navItems', () => {
+    describe('user management', () => {
+      it.each([true, false])('should be enabled according to the permissions', (enabled) => {
+        ;(window as any).Vue.$permissionManager = {
+          hasUserManagement: () => enabled
+        }
+        expect(index.navItems.find((n) => n.name === 'Users').enabled()).toBe(enabled)
+      })
+    })
+    describe('group management', () => {
+      it.each([true, false])('should be enabled according to the permissions', (enabled) => {
+        ;(window as any).Vue.$permissionManager = {
+          hasUserManagement: () => enabled
+        }
+        expect(index.navItems.find((n) => n.name === 'Groups').enabled()).toBe(enabled)
+      })
+    })
+    describe('space management', () => {
+      it.each([true, false])('should be enabled according to the permissions', (enabled) => {
+        ;(window as any).Vue.$permissionManager = {
+          hasSpaceManagement: () => enabled
+        }
+        expect(index.navItems.find((n) => n.name === 'Spaces').enabled()).toBe(enabled)
+      })
+    })
+  })
+  describe('routes', () => {
+    describe('default-route "/"', () => {
+      it('should redirect to user management if permission given', () => {
+        ;(window as any).Vue.$permissionManager = {
+          hasUserManagement: () => true
+        }
+        expect(index.routes.find((n) => n.path === '/').redirect().name).toEqual(
+          'admin-settings-users'
+        )
+      })
+      it('should redirect to space management if no user management permission given', () => {
+        ;(window as any).Vue.$permissionManager = {
+          hasUserManagement: () => false
+        }
+        expect(index.routes.find((n) => n.path === '/').redirect().name).toEqual(
+          'admin-settings-spaces'
+        )
+      })
+    })
+  })
+})

From f3631b4b2a8f9737161505bac9bae374176e29aa Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 4 Jan 2023 16:18:31 +0100
Subject: [PATCH 11/11] Add admin-settings to the drone oCIS config

---
 tests/drone/config-ocis.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/drone/config-ocis.json b/tests/drone/config-ocis.json
index 6721a841836..06215cb736c 100644
--- a/tests/drone/config-ocis.json
+++ b/tests/drone/config-ocis.json
@@ -26,6 +26,7 @@
     "draw-io",
     "text-editor",
     "pdf-viewer",
-    "search"
+    "search",
+    "admin-settings"
   ]
 }