[full-ci] Refactor CreateAndUpload into composables

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

@@ -19,3 +19,5 @@ export * from './useFileActionsShowDetails'
 export * from './useFileActionsShowEditTags'
 export * from './useFileActionsShowShares'
 export * from './useFileActionsCreateSpaceFromResource'
+export * from './useFileActionsCreateNewFolder'
+export * from './useFileActionsCreateNewFile'

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

@@ -0,0 +1,255 @@
+import { Resource, SpaceResource, extractNameWithoutExtension } from 'web-client/src/helpers'
+import { Store } from 'vuex'
+import { computed, Ref, unref } from 'vue'
+import { useClientService, useRequest, useRouter, useStore } from 'web-pkg/src/composables'
+import { FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
+import { useGettext } from 'vue3-gettext'
+import { resolveFileNameDuplicate } from 'web-app-files/src/helpers/resource'
+import { join } from 'path'
+import { WebDAV } from 'web-client/src/webdav'
+import { isLocationSpacesActive } from 'web-app-files/src/router'
+import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
+import { EDITOR_MODE_CREATE, useFileActions } from './useFileActions'
+import { urlJoin } from 'web-client/src/utils'
+import { configurationManager } from 'web-pkg/src'
+import { stringify } from 'qs'
+
+export const useFileActionsCreateNewFile = ({
+  store,
+  space,
+  newFileHandlers,
+  mimetypesAllowedForCreation
+}: {
+  store?: Store<any>
+  space?: SpaceResource
+  newFileHandlers?: Ref<any> // FIXME: type?
+  mimetypesAllowedForCreation?: Ref<any> // FIXME: type?
+} = {}) => {
+  store = store || useStore()
+  const router = useRouter()
+  const { $gettext } = useGettext()
+  const { makeRequest } = useRequest()
+
+  const { openEditor, triggerDefaultAction } = useFileActions()
+  const clientService = useClientService()
+  const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
+  const files = computed((): Array<Resource> => store.getters['Files/files'])
+  const ancestorMetaData = computed(() => store.getters['Files/ancestorMetaData'])
+  const areFileExtensionsShown = computed((): boolean => store.state.Files.areFileExtensionsShown)
+
+  const capabilities = computed(() => store.getters['capabilities'])
+
+  const checkNewFileName = (fileName) => {
+    if (fileName === '') {
+      return $gettext('File name cannot be empty')
+    }
+
+    if (/[/]/.test(fileName)) {
+      return $gettext('File name cannot contain "/"')
+    }
+
+    if (fileName === '.') {
+      return $gettext('File name cannot be equal to "."')
+    }
+
+    if (fileName === '..') {
+      return $gettext('File name cannot be equal to ".."')
+    }
+
+    if (/\s+$/.test(fileName)) {
+      return $gettext('File name cannot end with whitespace')
+    }
+
+    const exists = unref(files).find((file) => file.name === fileName)
+
+    if (exists) {
+      return $gettext('%{name} already exists', { name: fileName }, true)
+    }
+
+    return null
+  }
+
+  const addAppProviderFileFunc = async (fileName) => {
+    // FIXME: this belongs in web-app-external, but the app provider handles file creation differently than other editor extensions. Needs more refactoring.
+    if (fileName === '') {
+      return
+    }
+    try {
+      const baseUrl = urlJoin(
+        configurationManager.serverUrl,
+        unref(capabilities).files.app_providers[0].new_url
+      )
+      const query = stringify({
+        parent_container_id: unref(currentFolder).fileId,
+        filename: fileName
+      })
+      const url = `${baseUrl}?${query}`
+      const response = await makeRequest('POST', url)
+      if (response.status !== 200) {
+        throw new Error(`An error has occurred: ${response.status}`)
+      }
+      const path = join(unref(currentFolder).path, fileName) || ''
+      const resource = await (clientService.webdav as WebDAV).getFileInfo(space, {
+        path
+      })
+      if (unref(loadIndicatorsForNewFile)) {
+        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
+      }
+      triggerDefaultAction({ space: space, resources: [resource] })
+      store.commit('Files/UPSERT_RESOURCE', resource)
+      store.dispatch('hideModal')
+      store.dispatch('showMessage', {
+        title: $gettext('"%{fileName}" was created successfully', { fileName })
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Failed to create file'),
+        status: 'danger'
+      })
+    }
+  }
+
+  const loadIndicatorsForNewFile = computed(() => {
+    return isLocationSpacesActive(router, 'files-spaces-generic') && space.driveType !== 'share'
+  })
+
+  const addNewFile = async (fileName, openAction) => {
+    if (fileName === '') {
+      return
+    }
+
+    try {
+      const path = join(unref(currentFolder).path, fileName)
+      const resource = await (clientService.webdav as WebDAV).putFileContents(space, {
+        path
+      })
+
+      if (loadIndicatorsForNewFile.value) {
+        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
+      }
+
+      store.commit('Files/UPSERT_RESOURCE', resource)
+
+      if (openAction) {
+        openEditor(
+          openAction,
+          space.getDriveAliasAndItem(resource),
+          resource.webDavPath,
+          resource.fileId,
+          EDITOR_MODE_CREATE
+        )
+        store.dispatch('hideModal')
+
+        return
+      }
+
+      store.dispatch('hideModal')
+      store.dispatch('showMessage', {
+        title: $gettext('"%{fileName}" was created successfully', { fileName })
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Failed to create file'),
+        status: 'danger'
+      })
+    }
+  }
+
+  const handler = (
+    fileActionOptions: FileActionOptions,
+    extension: string,
+    openAction: any // FIXME: type?
+  ) => {
+    const checkInputValue = (value) => {
+      store.dispatch(
+        'setModalInputErrorMessage',
+        checkNewFileName(areFileExtensionsShown.value ? value : `${value}.${extension}`)
+      )
+    }
+    let defaultName = $gettext('New file') + `.${extension}`
+
+    if (unref(files).some((f) => f.name === defaultName)) {
+      defaultName = resolveFileNameDuplicate(defaultName, extension, unref(files))
+    }
+
+    if (!areFileExtensionsShown.value) {
+      defaultName = extractNameWithoutExtension({ name: defaultName, extension } as any)
+    }
+
+    const inputSelectionRange = !areFileExtensionsShown.value
+      ? null
+      : [0, defaultName.length - (extension.length + 1)]
+
+    const modal = {
+      variation: 'passive',
+      title: $gettext('Create a new file'),
+      cancelText: $gettext('Cancel'),
+      confirmText: $gettext('Create'),
+      hasInput: true,
+      inputValue: defaultName,
+      inputLabel: $gettext('File name'),
+      inputError: checkNewFileName(
+        areFileExtensionsShown.value ? defaultName : `${defaultName}.${extension}`
+      ),
+      inputSelectionRange,
+      onCancel: () => store.dispatch('hideModal'),
+      onConfirm: !openAction
+        ? addAppProviderFileFunc
+        : (fileName) => {
+            if (!areFileExtensionsShown.value) {
+              fileName = `${fileName}.${extension}`
+            }
+            addNewFile(fileName, openAction)
+          },
+      onInput: checkInputValue
+    }
+
+    store.dispatch('createModal', modal)
+  }
+
+  const actions = computed((): FileAction[] => {
+    const actions = []
+    for (const newFileHandler of unref(newFileHandlers) || []) {
+      const openAction = newFileHandler.action
+      actions.push({
+        name: 'create-new-file',
+        icon: 'add',
+        handler: (args) => handler(args, newFileHandler.ext, openAction),
+        label: () => newFileHandler.menuTitle($gettext),
+        isEnabled: ({ resources }) => {
+          return true
+        },
+        canBeDefault: true,
+        componentType: 'button',
+        class: 'oc-files-actions-create-new-file',
+        ext: newFileHandler.ext
+      })
+    }
+    for (const mimeType of unref(mimetypesAllowedForCreation) || []) {
+      const openAction = false
+      actions.push({
+        name: 'create-new-file',
+        icon: 'add',
+        handler: (args) => handler(args, mimeType.ext, openAction),
+        label: () => mimeType.name,
+        isEnabled: ({ resources }) => {
+          return true
+        },
+        canBeDefault: true,
+        componentType: 'button',
+        class: 'oc-files-actions-create-new-file',
+        ext: mimeType.ext
+      })
+    }
+
+    return actions
+  })
+
+  return {
+    actions,
+    checkNewFileName,
+    addNewFile
+  }
+}