Create spaces via admin settings

changelog/unreleased/enhancement-create-spaces-via-admin-settings

@@ -0,0 +1,6 @@
+Enhancement: Create spaces via admin settings
+
+We've added a new feature that allows you to create spaces via the admin settings.
+
+https://github.com/owncloud/web/pull/11849
+https://github.com/owncloud/web/issues/11771

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

@@ -13,6 +13,13 @@
       :batch-action-items="selectedSpaces"
       :show-view-options="true"
     >
+      <template #topbarActions="{ limitedScreenSpace }">
+        <create-space
+          v-if="hasCreatePermission"
+          :show-label="!limitedScreenSpace"
+          @space-created="(space) => spaceSettingsStore.upsertSpace(space)"
+        />
+      </template>
       <template #sideBarHeader>
         <space-info
           v-if="selectedSpaces.length === 1"
@@ -71,7 +78,9 @@ import {
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
   AppLoadingSpinner,
-  useSharesStore
+  useSharesStore,
+  useAbility,
+  CreateSpace
 } from '@ownclouders/web-pkg'
 import { call, SpaceResource } from '@ownclouders/web-client'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
@@ -85,6 +94,7 @@ import { Quota } from '@ownclouders/web-client/graph/generated'
 export default defineComponent({
   name: 'SpacesView',
   components: {
+    CreateSpace,
     AppLoadingSpinner,
     SpacesList,
     AppTemplate,
@@ -102,6 +112,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const { isSideBarOpen, sideBarActivePanel } = useSideBar()
     const sharesStore = useSharesStore()
+    const { can } = useAbility()
 
     const loadResourcesEventToken = ref(null)
     let updateQuotaForSpaceEventToken: string
@@ -119,6 +130,8 @@ export default defineComponent({
       return parseInt(queryItemAsString(unref(itemsPerPageQuery)))
     })
 
+    const hasCreatePermission = computed(() => can('create-all', 'Drive'))
+
     const loadResourcesTask = useTask(function* (signal) {
       const drives = yield* call(
         clientService.graphAuthenticated.drives.listAllDrives(
@@ -267,7 +280,9 @@ export default defineComponent({
       sideBarAvailablePanels,
       sideBarPanelContext,
       isLoading,
-      template
+      template,
+      hasCreatePermission,
+      spaceSettingsStore
     }
   }
 })

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

@@ -181,8 +181,7 @@ import {
   useLoadPreview
 } from '@ownclouders/web-pkg'
 
-import { AppBar } from '@ownclouders/web-pkg'
-import CreateSpace from '../../components/AppBar/CreateSpace.vue'
+import { AppBar, CreateSpace } from '@ownclouders/web-pkg'
 import {
   useAbility,
   useClientService,

packages/web-app-files/src/components/AppBar/CreateSpace.vue → packages/web-pkg/src/components/AppBar/CreateSpace.vue

@@ -2,14 +2,14 @@
   <oc-button
     id="new-space-menu-btn"
     key="new-space-menu-btn-enabled"
-    v-oc-tooltip="$gettext('Create a new space')"
-    :aria-label="$gettext('Create a new space')"
+    v-oc-tooltip="showLabel ? undefined : $gettext('New space')"
+    :aria-label="showLabel ? undefined : $gettext('New space')"
     appearance="filled"
     variation="primary"
     @click="showCreateSpaceModal"
   >
     <oc-icon name="add" />
-    <span v-translate>New Space</span>
+    <span v-if="showLabel" v-text="$gettext('New Space')" />
   </oc-button>
 </template>
 
@@ -23,10 +23,17 @@ import {
   useMessages,
   useSpacesStore,
   useResourcesStore
-} from '@ownclouders/web-pkg'
+} from '../../composables'
 
 export default defineComponent({
-  setup() {
+  props: {
+    showLabel: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['spaceCreated'],
+  setup(props, { emit }) {
     const { showMessage, showErrorMessage } = useMessages()
     const { $gettext } = useGettext()
     const { createSpace } = useCreateSpace()
@@ -40,6 +47,7 @@ export default defineComponent({
         const createdSpace = await createSpace(name)
         upsertResource(createdSpace)
         spacesStore.upsertSpace(createdSpace)
+        emit('spaceCreated', createdSpace)
         showMessage({ title: $gettext('Space was created successfully') })
       } catch (error) {
         console.error(error)

packages/web-pkg/src/components/AppBar/index.ts

@@ -1 +1,2 @@
 export { default as AppBar } from './AppBar.vue'
+export { default as CreateSpace } from './CreateSpace.vue'

packages/web-app-files/tests/unit/components/AppBar/CreateSpace.spec.ts → packages/web-pkg/tests/unit/components/AppBar/CreateSpace.spec.ts

@@ -2,7 +2,7 @@ import CreateSpace from '../../../../src/components/AppBar/CreateSpace.vue'
 import { mockDeep } from 'vitest-mock-extended'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { defaultPlugins, mount, defaultComponentMocks } from '@ownclouders/web-test-helpers'
-import { useMessages, useModals, useSpacesStore } from '@ownclouders/web-pkg'
+import { useMessages, useModals, useSpacesStore } from '../../../../src/composables'
 import { unref } from 'vue'
 
 const selectors = {
@@ -36,6 +36,7 @@ describe('CreateSpace component', () => {
 
       const spacesStore = useSpacesStore()
       expect(spacesStore.upsertSpace).toHaveBeenCalled()
+      expect(wrapper.emitted('spaceCreated')).toBeTruthy()
     })
     it('shows a message when an error occurred', async () => {
       vi.spyOn(console, 'error').mockImplementation(() => undefined)

packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CreateSpace component > should show the "New Space" button 1`] = `
+"<button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-space-menu-btn">
+  <!--v-if-->
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span>New Space</span>
+</button>"
+`;

tests/e2e/cucumber/features/admin-settings/spaces.feature

@@ -1,5 +1,27 @@
 Feature: spaces management
 
+  Scenario: spaces can be created
+    Given "Admin" creates following users using API
+      | id    |
+      | Alice |
+    And "Admin" assigns following roles to the users using API
+      | id    | role        |
+      | Alice | Space Admin |
+    And "Admin" creates the following project spaces using API
+      | name   | id     |
+      | team A | team.a |
+    When "Alice" logs in
+    And "Alice" opens the "admin-settings" app
+    And "Alice" navigates to the project spaces management page
+    And "Alice" creates the following project spaces
+      | name | id     |
+      | team | team.b |
+    Then "Alice" should see the following spaces
+      | id     |
+      | team.a |
+      | team.b |
+    And "Alice" logs out
+
   Scenario: spaces can be managed in the admin settings via the context menu
     Given "Admin" creates following users using API
       | id    |