Add details-quick-action to the spaces management table

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

@@ -18,4 +18,5 @@ https://github.com/owncloud/web/pull/8249
 https://github.com/owncloud/web/pull/8230
 https://github.com/owncloud/web/pull/8262
 https://github.com/owncloud/web/pull/8247
+https://github.com/owncloud/web/pull/8273
 https://github.com/owncloud/web/issues/8219

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

@@ -84,6 +84,14 @@
       </template>
       <template #actions="{ item }">
         <div class="spaces-list-actions">
+          <oc-button
+            :id="`space-details-trigger-${resourceDomSelector(item)}`"
+            v-oc-tooltip="spaceDetailsLabel"
+            :aria-label="spaceDetailsLabel"
+            appearance="raw"
+            @click.stop.prevent="showDetailsForSpace(item)"
+            ><oc-icon name="information" fill-type="line" />
+          </oc-button>
           <oc-button
             :id="`context-menu-trigger-${resourceDomSelector(item)}`"
             ref="contextMenuButton"
@@ -140,6 +148,8 @@ import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/s
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -407,6 +417,14 @@ export default defineComponent({
       displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButton))
     }
 
+    const spaceDetailsLabel = computed(() => {
+      return $gettext('Show details')
+    })
+    const showDetailsForSpace = (space: SpaceResource) => {
+      selectSpace(space)
+      eventBus.publish(SideBarEventTopics.open)
+    }
+
     return {
       allSpacesSelected,
       sortBy,
@@ -436,6 +454,8 @@ export default defineComponent({
       popperOptions,
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
+      spaceDetailsLabel,
+      showDetailsForSpace,
       ...spaceRefs
     }
   }

packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts

@@ -1,7 +1,8 @@
 import SpacesList from '../../../../src/components/Spaces/SpacesList.vue'
 import { defaultPlugins, mount, shallowMount } from 'web-test-helpers'
 import Vue from 'vue'
-import { displayPositionedDropdown } from 'web-pkg'
+import { displayPositionedDropdown, eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 const spaceMocks = [
   {
@@ -106,6 +107,12 @@ describe('SpacesList', () => {
     await wrapper.find('.spaces-table-btn-action-dropdown').trigger('click')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
+  it('should show the space details on details button click', async () => {
+    const eventBusSpy = jest.spyOn(eventBus, 'publish')
+    const { wrapper } = getWrapper({ spaces: spaceMocks })
+    await wrapper.find(`#space-details-trigger-${spaceMocks[0].id}`).trigger('click')
+    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+  })
 })
 
 function getWrapper({ mountType = mount, spaces = [], selectedSpaces = [] } = {}) {

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -127,6 +127,12 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         </td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions oc-pr-s">
           <div class="spaces-list-actions">
+            <button aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-details-trigger-1" type="button">
+              <!-- @slot Content of the button -->
+              <span class="oc-icon oc-icon-m oc-icon-passive">
+                <!---->
+              </span>
+            </button>
             <button aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw spaces-table-btn-action-dropdown" id="context-menu-trigger-1" type="button">
               <!-- @slot Content of the button -->
               <span class="oc-icon oc-icon-m oc-icon-passive">