[full-ci] Create space from resource

changelog/unreleased/enhancement-create-space-from-selection

@@ -0,0 +1,8 @@
+Enhancement: Create Space from selection
+
+We've added a new action 'Create Space from selection' to the users
+personal home so they can create a Space with the copied content of their
+selected files and folders.
+
+https://github.com/owncloud/web/pull/8730
+https://github.com/owncloud/web/issues/8735

packages/design-system/src/components/OcModal/OcModal.vue

@@ -17,23 +17,31 @@
           <div v-if="$slots.content" key="modal-slot-content" class="oc-modal-body-message">
             <slot name="content" />
           </div>
-          <oc-text-input
-            v-else-if="hasInput"
-            key="modal-input"
-            ref="ocModalInput"
-            v-model="userInputValue"
-            class="oc-modal-body-input"
-            :error-message="inputError"
-            :label="inputLabel"
-            :type="inputType"
-            :description-message="inputDescription"
-            :disabled="inputDisabled"
-            :fix-message-line="true"
-            :selection-range="inputSelectionRange"
-            @update:model-value="inputOnInput"
-            @keydown.enter.prevent="confirm"
-          />
-          <p v-else key="modal-message" class="oc-modal-body-message oc-m-rm" v-text="message" />
+          <template v-else>
+            <p
+              v-if="message"
+              key="modal-message"
+              class="oc-modal-body-message oc-mt-rm"
+              :class="{ 'oc-mb-rm': !hasInput }"
+              v-text="message"
+            />
+            <oc-text-input
+              v-if="hasInput"
+              key="modal-input"
+              ref="ocModalInput"
+              v-model="userInputValue"
+              class="oc-modal-body-input"
+              :error-message="inputError"
+              :label="inputLabel"
+              :type="inputType"
+              :description-message="inputDescription"
+              :disabled="inputDisabled"
+              :fix-message-line="true"
+              :selection-range="inputSelectionRange"
+              @update:model-value="inputOnInput"
+              @keydown.enter.prevent="confirm"
+            />
+          </template>
           <div v-if="checkboxLabel" class="oc-modal-body-actions oc-flex oc-flex-left">
             <oc-checkbox
               v-model="checkboxValue"

packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap

@@ -9,6 +9,7 @@ exports[`OcModal displays input 1`] = `
         <h2 id="oc-modal-title">Create new folder</h2>
       </div>
       <div class="oc-modal-body">
+        <!--v-if-->
         <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" type="text"></oc-text-input-stub>
         <!--v-if-->
         <!--v-if-->
@@ -32,7 +33,8 @@ exports[`OcModal hides icon if not specified 1`] = `
         <h2 id="oc-modal-title">Example title</h2>
       </div>
       <div class="oc-modal-body">
-        <p class="oc-modal-body-message oc-m-rm">Example message</p>
+        <p class="oc-modal-body-message oc-mt-rm oc-mb-rm">Example message</p>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -55,7 +57,8 @@ exports[`OcModal matches snapshot 1`] = `
         <h2 id="oc-modal-title">Example title</h2>
       </div>
       <div class="oc-modal-body">
-        <p class="oc-modal-body-message oc-m-rm">Example message</p>
+        <p class="oc-modal-body-message oc-mt-rm oc-mb-rm">Example message</p>
+        <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </div>

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

@@ -15,18 +15,17 @@
 
 <script lang="ts">
 import { mapActions, mapMutations } from 'vuex'
-
 import { defineComponent } from 'vue'
-import { buildSpace } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
-import { WebDAV } from 'web-client/src/webdav'
 import { useClientService } from 'web-pkg/src/composables'
-import { Drive } from 'web-client/src/generated'
+import { useCreateSpace } from 'web-app-files/src/composables'
+import { useSpaceHelpers } from 'web-pkg/src/composables/spaces'
 
 export default defineComponent({
   setup() {
     const clientService = useClientService()
-    return { clientService }
+    const { createSpace } = useCreateSpace()
+    const { checkSpaceNameModalInput } = useSpaceHelpers()
+    return { clientService, createSpace, checkSpaceNameModalInput }
   },
   methods: {
     ...mapActions(['showMessage', 'createModal', 'hideModal', 'setModalInputErrorMessage']),
@@ -44,68 +43,18 @@ export default defineComponent({
         inputValue: this.$gettext('New space'),
         onCancel: this.hideModal,
         onConfirm: this.addNewSpace,
-        onInput: this.checkSpaceName
+        onInput: this.checkSpaceNameModalInput
       }
 
       this.createModal(modal)
     },
 
-    checkSpaceName(name) {
-      if (name.trim() === '') {
-        return this.setModalInputErrorMessage(this.$gettext('Space name cannot be empty'))
-      }
-      if (name.length > 255) {
-        return this.setModalInputErrorMessage(
-          this.$gettext('Space name cannot exceed 255 characters')
-        )
-      }
-      if (/[/\\.:?*"><|]/.test(name)) {
-        return this.setModalInputErrorMessage(
-          this.$gettext('Space name cannot contain the following characters: / \\ . : ? * " > < |')
-        )
-      }
-      return this.setModalInputErrorMessage(null)
-    },
-
     async addNewSpace(name) {
       try {
-        const client = this.clientService.graphAuthenticated
-        const { data: space } = await client.drives.createDrive({ name }, {})
+        const createdSpace = await this.createSpace(name)
         this.hideModal()
-        const resource = buildSpace({ ...space, serverUrl: configurationManager.serverUrl })
-        this.UPSERT_RESOURCE(resource)
-        this.UPSERT_SPACE(resource)
-
-        await (this.$clientService.webdav as WebDAV).createFolder(resource, { path: '.space' })
-        const markdown = await (this.$clientService.webdav as WebDAV).putFileContents(resource, {
-          path: '.space/readme.md',
-          content: this.$gettext('Here you can add a description for this Space.')
-        })
-
-        const { data: updatedSpace } = await client.drives.updateDrive(
-          space.id,
-          {
-            special: [
-              {
-                specialFolder: {
-                  name: 'readme'
-                },
-                id: markdown.id as string
-              }
-            ]
-          } as Drive,
-          {}
-        )
-        this.UPDATE_RESOURCE_FIELD({
-          id: space.id,
-          field: 'spaceReadmeData',
-          value: updatedSpace.special.find((special) => special.specialFolder.name === 'readme')
-        })
-        this.UPDATE_RESOURCE_FIELD({
-          id: space.id,
-          field: 'spaceQuota',
-          value: updatedSpace.quota
-        })
+        this.UPSERT_RESOURCE(createdSpace)
+        this.UPSERT_SPACE(createdSpace)
       } catch (error) {
         console.error(error)
         this.showMessage({

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

@@ -30,7 +30,8 @@ import {
   useFileActionsSetImage,
   useFileActionsShowEditTags,
   useFileActionsNavigate,
-  useFileActionsFavorite
+  useFileActionsFavorite,
+  useFileActionsCreateSpaceFromResource
 } from '../../composables/actions/files'
 import { FileActionOptions } from 'web-pkg/src/composables/actions'
 
@@ -66,6 +67,9 @@ export default defineComponent({
     const { actions: setSpaceReadmeActions } = useFileActionsSetReadme({ store })
     const { actions: showDetailsActions } = useFileActionsShowDetails({ store })
     const { actions: showEditTagsActions } = useFileActionsShowEditTags({ store })
+    const { actions: createSpaceFromResourceActions } = useFileActionsCreateSpaceFromResource({
+      store
+    })
     const { actions: showSharesActions } = useFileActionsShowShares({ store })
 
     // type cast to make vue-tsc aware of the type
@@ -79,7 +83,8 @@ export default defineComponent({
         ...unref(copyActions),
         ...unref(emptyTrashBinActions),
         ...unref(deleteActions),
-        ...unref(restoreActions)
+        ...unref(restoreActions),
+        ...unref(createSpaceFromResourceActions)
       ].filter((item) => item.isEnabled(unref(actionOptions)))
     )
 
@@ -109,6 +114,7 @@ export default defineComponent({
         ...unref(copyActions),
         ...unref(pasteActions),
         ...unref(renameActions),
+        ...unref(createSpaceFromResourceActions),
         ...unref(showEditTagsActions),
         ...unref(restoreActions),
         ...unref(acceptShareActions),

packages/web-app-files/src/composables/actions/files/index.ts

@@ -18,3 +18,4 @@ export * from './useFileActionsShowActions'
 export * from './useFileActionsShowDetails'
 export * from './useFileActionsShowEditTags'
 export * from './useFileActionsShowShares'
+export * from './useFileActionsCreateSpaceFromResource'

packages/web-app-files/src/composables/actions/files/useFileActions.ts

@@ -27,7 +27,8 @@ import {
   useFileActionsNavigate,
   useFileActionsRename,
   useFileActionsRestore,
-  useFileActionsShowEditTags
+  useFileActionsShowEditTags,
+  useFileActionsCreateSpaceFromResource
 } from './index'
 
 export const EDITOR_MODE_EDIT = 'edit'
@@ -55,6 +56,7 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
   const { actions: renameActions } = useFileActionsRename({ store })
   const { actions: restoreActions } = useFileActionsRestore({ store })
   const { actions: showEditTagsActions } = useFileActionsShowEditTags({ store })
+  const { actions: createSpaceFromResource } = useFileActionsCreateSpaceFromResource({ store })
 
   const systemActions = computed((): Action[] => [
     ...unref(downloadArchiveActions),
@@ -63,6 +65,7 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
     ...unref(moveActions),
     ...unref(copyActions),
     ...unref(renameActions),
+    ...unref(createSpaceFromResource),
     ...unref(showEditTagsActions),
     ...unref(restoreActions),
     ...unref(acceptShareActions),

packages/web-app-files/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts

@@ -0,0 +1,123 @@
+import { Store } from 'vuex'
+import { computed, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
+import { useAbility, useClientService, useLoadingService, useRouter } from 'web-pkg/src/composables'
+import { isPersonalSpaceResource } from 'web-client/src/helpers'
+import { isLocationSpacesActive } from 'web-app-files/src/router'
+import { useCreateSpace } from 'web-app-files/src/composables/spaces'
+import { useSpaceHelpers } from 'web-pkg/src/composables/spaces'
+import PQueue from 'p-queue'
+
+export const useFileActionsCreateSpaceFromResource = ({ store }: { store?: Store<any> } = {}) => {
+  const { can } = useAbility()
+  const { $gettext, $ngettext } = useGettext()
+  const loadingService = useLoadingService()
+  const { createSpace } = useCreateSpace()
+  const { checkSpaceNameModalInput } = useSpaceHelpers()
+  const { webdav } = useClientService()
+  const router = useRouter()
+  const hasCreatePermission = computed(() => can('create-all', 'Space'))
+
+  const confirmAction = async ({ spaceName, resources, space }) => {
+    store.dispatch('hideModal')
+    const queue = new PQueue({ concurrency: 4 })
+    const copyOps = []
+
+    try {
+      const createdSpace = await createSpace(spaceName)
+      store.commit('runtime/spaces/UPSERT_SPACE', createdSpace)
+
+      if (resources.length === 1 && resources[0].isFolder) {
+        //If a single folder is selected we copy it's content to the Space's root folder
+        resources = (await webdav.listFiles(space, { path: resources[0].path })).children
+      }
+
+      for (const resource of resources) {
+        copyOps.push(
+          queue.add(() => webdav.copyFiles(space, resource, createdSpace, { path: resource.name }))
+        )
+      }
+
+      await Promise.all(copyOps)
+      store.dispatch('Files/resetFileSelection')
+      store.dispatch('showMessage', {
+        title: $gettext('Space was created successfully')
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Creating space failed…'),
+        status: 'danger'
+      })
+    }
+  }
+  const handler = ({ resources, space }: FileActionOptions) => {
+    const modal = {
+      variation: 'passive',
+      title: $ngettext(
+        'Create Space from "%{resourceName}"',
+        'Create Space from selection',
+        resources.length,
+        {
+          resourceName: resources[0].name
+        }
+      ),
+      message: $ngettext(
+        'Create Space with the content of "%{resourceName}". The content will be copied.',
+        'Create Space with the selected files. The content will be copied.',
+        resources.length,
+        {
+          resourceName: resources[0].name
+        }
+      ),
+      cancelText: $gettext('Cancel'),
+      confirmText: $gettext('Create'),
+      hasInput: true,
+      inputLabel: $gettext('Space name'),
+      onInput: checkSpaceNameModalInput,
+      onCancel: () => store.dispatch('hideModal'),
+      onConfirm: (spaceName) =>
+        loadingService.addTask(() => confirmAction({ spaceName, space, resources }))
+    }
+
+    store.dispatch('createModal', modal)
+  }
+
+  const actions = computed((): FileAction[] => {
+    return [
+      {
+        name: 'create-space-from-resource',
+        icon: 'layout-grid',
+        handler,
+        label: () => {
+          return $gettext('Create Space from selection')
+        },
+        isEnabled: ({ resources, space }) => {
+          if (!resources.length) {
+            return false
+          }
+
+          if (!unref(hasCreatePermission)) {
+            return false
+          }
+
+          if (
+            !isLocationSpacesActive(router, 'files-spaces-generic') ||
+            !isPersonalSpaceResource(space)
+          ) {
+            return false
+          }
+
+          return true
+        },
+        componentType: 'button',
+        class: 'oc-files-actions-create-space-from-resource-trigger'
+      }
+    ]
+  })
+
+  return {
+    actions
+  }
+}

packages/web-app-files/src/composables/index.ts

@@ -6,5 +6,6 @@ export * from './resourcesViewDefaults'
 export * from './router'
 export * from './selection'
 export * from './shares'
+export * from './spaces'
 export * from './sort'
 export * from './viewMode'

packages/web-app-files/src/composables/spaces/index.ts

@@ -0,0 +1 @@
+export * from './useCreateSpace'