From 847d83eb7588e7daa8d88fa6ee8b6475c04b1765 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 23 Jan 2023 23:56:36 +0100
Subject: [PATCH] [full-ci] Admin: Spaces actions in sidebar (#8233)

* Implement spaces actions in sidebar

Co-authored-by: Jannik Stehle <jannik.stehle@gmail.com>
Co-authored-by: Benedikt Kulmann <benedikt@kulmann.biz>
---
 .../enhancement-spaces-list-in-admin-settings |  1 +
 .../Spaces/SideBar/ActionsPanel.vue           | 77 +++++++++++++++++++
 .../src/views/Spaces.vue                      | 20 ++++-
 .../Spaces/SideBar/ActionsPanel.spec.ts       | 77 +++++++++++++++++++
 4 files changed, 171 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts

diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
index ff816fc8b81..937498c1fd5 100644
--- a/changelog/unreleased/enhancement-spaces-list-in-admin-settings
+++ b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -20,3 +20,4 @@ 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
+https://github.com/owncloud/web/pull/8233
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
new file mode 100644
index 00000000000..c266f50d71e
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <quota-modal
+      v-if="quotaModalIsOpen"
+      :cancel="closeQuotaModal"
+      :space="selectedSpaces[0]"
+      @spaceQuotaUpdated="spaceQuotaUpdated"
+    />
+    <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s">
+      <action-menu-item
+        v-for="(action, index) in actions"
+        :key="`action-${index}`"
+        :action="action"
+        :items="selectedSpaces"
+        class="oc-py-xs"
+      />
+    </oc-list>
+  </div>
+</template>
+
+<script lang="ts">
+import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
+import Rename from 'web-pkg/src/mixins/spaces/rename'
+import Delete from 'web-pkg/src/mixins/spaces/delete'
+import Disable from 'web-pkg/src/mixins/spaces/disable'
+import Restore from 'web-pkg/src/mixins/spaces/restore'
+import EditDescription from 'web-pkg/src/mixins/spaces/editDescription'
+import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
+import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
+import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
+import { SpaceResource } from 'web-client'
+
+export default defineComponent({
+  name: 'ActionsPanel',
+  components: { ActionMenuItem, QuotaModal },
+  mixins: [Rename, Delete, EditDescription, Disable, Restore, EditQuota],
+  props: {
+    selectedSpaces: {
+      type: Array as PropType<Array<SpaceResource>>,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance().proxy as any
+    const actions = computed(() => {
+      return [
+        ...instance.$_rename_items,
+        ...instance.$_editDescription_items,
+        ...instance.$_editQuota_items,
+        ...instance.$_restore_items,
+        ...instance.$_delete_items,
+        ...instance.$_disable_items
+      ].filter((item) => item.isEnabled({ resources: props.selectedSpaces }))
+    })
+    const quotaModalIsOpen = computed(() => instance.$data.$_editQuota_modalOpen)
+    const closeQuotaModal = () => {
+      instance.$_editQuota_closeModal()
+    }
+    const spaceQuotaUpdated = (quota) => {
+      instance.$data.$_editQuota_selectedSpace.spaceQuota = quota
+    }
+    return { actions, quotaModalIsOpen, closeQuotaModal, spaceQuotaUpdated }
+  }
+})
+</script>
+
+<style lang="scss">
+#oc-spaces-actions-sidebar {
+  > li a,
+  > li a:hover {
+    color: var(--oc-color-swatch-passive-default);
+    display: inline-flex;
+    gap: 10px;
+    vertical-align: top;
+  }
+}
+</style>
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index f49c1d29e4a..60270d6a1fb 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -78,6 +78,7 @@ import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelec
 import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
 import SpaceInfo from 'web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue'
+import ActionsPanel from '../components/Spaces/SideBar/ActionsPanel.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
 import { useGettext } from 'vue3-gettext'
 
@@ -151,7 +152,7 @@ export default defineComponent({
         {
           app: 'SpaceNoSelection',
           icon: 'layout-grid',
-          title: $gettext('Space details'),
+          title: $gettext('Details'),
           component: SpaceNoSelection,
           default: true,
           enabled: unref(selectedSpaces).length === 0
@@ -159,7 +160,7 @@ export default defineComponent({
         {
           app: 'SpaceDetails',
           icon: 'layout-grid',
-          title: $gettext('Space details'),
+          title: $gettext('Details'),
           component: SpaceDetails,
           default: true,
           enabled: unref(selectedSpaces).length === 1,
@@ -171,7 +172,7 @@ export default defineComponent({
         {
           app: 'SpaceDetailsMultiple',
           icon: 'layout-grid',
-          title: $gettext('Space details'),
+          title: $gettext('Details'),
           component: SpaceDetailsMultiple,
           default: true,
           enabled: unref(selectedSpaces).length > 1,
@@ -179,10 +180,21 @@ export default defineComponent({
             selectedSpaces: unref(selectedSpaces)
           }
         },
+        {
+          app: 'SpaceActions',
+          icon: 'slideshow-3',
+          title: $gettext('Actions'),
+          component: ActionsPanel,
+          default: false,
+          enabled: unref(selectedSpaces).length === 1,
+          componentAttrs: {
+            selectedSpaces: unref(selectedSpaces)
+          }
+        },
         {
           app: 'SpaceMembers',
           icon: 'group',
-          title: $gettext('Space members'),
+          title: $gettext('Members'),
           component: MembersPanel,
           default: false,
           enabled: unref(selectedSpaces).length === 1,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts
new file mode 100644
index 00000000000..ba4e12ec459
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts
@@ -0,0 +1,77 @@
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  defaultStubs,
+  mount
+} from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Resource } from 'web-client/src/helpers'
+import ActionsPanel from '../../../../../src/components/Spaces/SideBar/ActionsPanel.vue'
+
+const mixins = [
+  '$_rename_items',
+  '$_editDescription_items',
+  '$_editQuota_items',
+  '$_disable_items',
+  '$_restore_items',
+  '$_delete_items'
+]
+
+const Component = {
+  ...ActionsPanel,
+  mixins
+}
+
+describe('ActionsPanel', () => {
+  describe('menu sections', () => {
+    it('do not render when no action enabled', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll('action-menu-item-stub').length).toBe(0)
+    })
+
+    it('render enabled actions', () => {
+      const enabledActions = [
+        '$_rename_items',
+        '$_editDescription_items',
+        '$_editQuota_items',
+        '$_disable_items'
+      ]
+      const { wrapper } = getWrapper({ enabledActions })
+      expect(wrapper.findAll('action-menu-item-stub').length).toBe(enabledActions.length)
+    })
+  })
+})
+
+function getWrapper({ enabledActions = [] } = {}) {
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
+  const mocks = {
+    ...defaultComponentMocks(),
+    ...getMixinMocks(enabledActions)
+  }
+  return {
+    storeOptions,
+    mocks,
+    wrapper: mount(Component, {
+      props: {
+        items: [mock<Resource>()]
+      },
+      global: {
+        mocks,
+        stubs: { ...defaultStubs, 'action-menu-item': true },
+        plugins: [...defaultPlugins(), store]
+      }
+    })
+  }
+}
+
+const getMixinMocks = (enabledActions) => {
+  const mixinMocks = {}
+  for (const mixin of mixins) {
+    const isEnabled = !!enabledActions.includes(mixin)
+    mixinMocks[mixin] = [{ isEnabled: () => isEnabled, name: '', items: [] }]
+  }
+  return mixinMocks
+}