[full-ci] Apply selection range without extension to new file dialog

changelog/5.4.0_2022-04-11/enhancement-add-rename-selection-range

@@ -1,4 +1,4 @@
-Enhancement: Add rename selection range
+Enhancement: Add filename selection range
 
 We've added a selection range for the rename modal
 to intially select the resource name without extension.

changelog/unreleased/enhancement-new-file-selection-range

@@ -0,0 +1,7 @@
+Enhancement: Apply filename selection range for new files
+
+We've added a selection range for the new file modal
+to intially select the resource name without extension.
+
+https://github.com/owncloud/web/issues/6729
+https://github.com/owncloud/web/pull/6760

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

@@ -122,7 +122,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import pathUtil from 'path'
 
@@ -131,14 +131,16 @@ import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import { useActiveLocation } from '../../composables'
+import { defineComponent } from '@vue/composition-api'
+import { extractNameWithoutExtension, Resource } from '../../helpers/resource'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 
 import FileDrop from './Upload/FileDrop.vue'
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
 
-export default {
+export default defineComponent({
   components: {
     FileDrop,
     FileUpload,
@@ -349,6 +351,7 @@ export default {
         confirmText: this.$gettext('Create'),
         hasInput: true,
         inputValue: defaultName,
+        inputSelectionRange: null,
         inputLabel: isFolder ? this.$gettext('Folder name') : this.$gettext('File name'),
         inputError: isFolder
           ? this.checkNewFolderName(defaultName)
@@ -362,6 +365,13 @@ export default {
         onInput: checkInputValue
       }
 
+      if (!isFolder) {
+        const nameWithoutExtension = extractNameWithoutExtension({
+          name: defaultName
+        } as Resource)
+        modal.inputSelectionRange = [0, nameWithoutExtension.length]
+      }
+
       this.createModal(modal)
     },
 
@@ -629,7 +639,7 @@ export default {
       return null
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 #create-list {

packages/web-app-files/src/helpers/resource/resource.ts

@@ -59,8 +59,8 @@ export const extractStorageId = (id?: string): string => {
   return id.indexOf('!') >= 0 ? id.split('!')[0] : ''
 }
 
-export const extractNameWithoutExtension = (resource?: Resource): string => {
-  const extension = resource.extension || ''
+export const extractNameWithoutExtension = (resource: Resource): string => {
+  const extension = extractExtensionFromFile(resource)
   const name = resource.name || ''
   if (!extension.length) return name
   const extensionIndexInName = name.lastIndexOf(`.${extension}`)

packages/web-app-files/tests/unit/helpers/resource/resource.spec.ts

@@ -4,32 +4,16 @@ import {
   Resource
 } from '../../../../src/helpers/resource'
 
-const resourceWithoutExtension = {
-  name: 'file'
-}
-const resourceNameWithExtension = {
-  name: 'file.txt',
-  extension: 'txt'
-}
-const resourceNameWithExtensionAndDots = {
-  name: 'file.dot.txt',
-  extension: 'txt'
-}
-
 describe('filterResources', () => {
   describe('extractNameWithoutExtension', () => {
     it('should return resource name when there is no extension', () => {
-      expect(extractNameWithoutExtension(resourceWithoutExtension as Resource)).toEqual(
-        resourceWithoutExtension.name
-      )
+      expect(extractNameWithoutExtension({ name: 'file' } as Resource)).toEqual('file')
     })
     it('should return resource name without extension when there is an extension', () => {
-      expect(extractNameWithoutExtension(resourceNameWithExtension as Resource)).toEqual('file')
+      expect(extractNameWithoutExtension({ name: 'file.txt' } as Resource)).toEqual('file')
     })
     it('should return resource name with dots without extension when there is an extension', () => {
-      expect(extractNameWithoutExtension(resourceNameWithExtensionAndDots as Resource)).toEqual(
-        'file.dot'
-      )
+      expect(extractNameWithoutExtension({ name: 'file.dot.txt' } as Resource)).toEqual('file.dot')
     })
   })
   describe('extractExtensionFromFile', () => {

packages/web-app-files/tests/unit/mixins/actions/rename.spec.js

@@ -9,6 +9,7 @@ localVue.use(Vuex)
 
 const currentFolder = {
   id: 1,
+  name: 'folder',
   path: '/folder',
   webDavPath: '/files/admin/folder'
 }