Add name input

packages/web-app-files/src/components/EmbedActions/EmbedActions.vue

@@ -1,5 +1,11 @@
 <template>
   <section class="files-embed-actions">
+    <oc-text-input
+      v-if="chooseFileName"
+      v-model="fileName"
+      :selection-range="fileNameInputSelectionRange"
+      :label="$gettext('File name')"
+    />
     <oc-button
       data-testid="button-cancel"
       appearance="raw-inverse"
@@ -32,8 +38,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, ref, unref } from 'vue'
 import {
+  embedModeLocationPickMessageData,
   FileAction,
   useAbility,
   useEmbedMode,
@@ -49,12 +56,18 @@ export default defineComponent({
   setup() {
     const ability = useAbility()
     const { $gettext } = useGettext()
-    const { isLocationPicker, isFilePicker, postMessage } = useEmbedMode()
+    const {
+      isLocationPicker,
+      isFilePicker,
+      postMessage,
+      chooseFileName,
+      chooseFileNameSuggestion
+    } = useEmbedMode()
     const spacesStore = useSpacesStore()
     const { currentSpace: space } = storeToRefs(spacesStore)
-
     const resourcesStore = useResourcesStore()
     const { currentFolder, selectedResources } = storeToRefs(resourcesStore)
+    const fileName = ref(unref(chooseFileNameSuggestion))
 
     const selectedFiles = computed<Resource[]>(() => {
       if (isLocationPicker.value) {
@@ -75,18 +88,24 @@ export default defineComponent({
       isLocationPicker.value ? $gettext('Choose') : $gettext('Attach as copy')
     )
 
+    const fileNameInputSelectionRange = computed(() => {
+      return [0, unref(fileName).split('.')[0].length] as [number, number]
+    })
+
     const emitSelect = (): void => {
-      postMessage<Resource[]>(
-        'owncloud-embed:select',
-        JSON.parse(JSON.stringify(selectedFiles.value))
-      )
+      postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
+        resources: JSON.parse(JSON.stringify(selectedFiles.value)),
+        ...(unref(fileName) && { fileName: unref(fileName) })
+      })
     }
 
     const emitCancel = (): void => {
       postMessage<null>('owncloud-embed:cancel', null)
     }
 
     return {
+      chooseFileName,
+      chooseFileNameSuggestion,
       selectedFiles,
       areSelectActionsDisabled,
       canCreatePublicLinks,
@@ -96,14 +115,17 @@ export default defineComponent({
       emitCancel,
       emitSelect,
       space,
-      createLinkAction
+      createLinkAction,
+      fileName,
+      fileNameInputSelectionRange
     }
   }
 })
 </script>
 
 <style scoped>
 .files-embed-actions {
+  color: var(--oc-color-swatch-brand-contrast);
   align-items: center;
   box-sizing: border-box;
   display: flex;

packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts

@@ -41,7 +41,9 @@ describe('EmbedActions', () => {
 
       await wrapper.find(selectors.btnSelect).trigger('click')
 
-      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
+        resources: [{ id: '1' }]
+      })
     })
 
     it('should enable select action when embedTarget is set to location', () => {
@@ -58,7 +60,9 @@ describe('EmbedActions', () => {
 
       await wrapper.find(selectors.btnSelect).trigger('click')
 
-      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
+        resources: [{ id: '1' }]
+      })
     })
   })
 
@@ -134,6 +138,8 @@ function getWrapper(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
+      chooseFileName: ref(false),
+      chooseFileNameSuggestion: ref(''),
       postMessage: postMessageMock
     })
   )

packages/web-pkg/src/components/Modals/SaveAsModal.vue

@@ -16,6 +16,7 @@
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
 import {
+  embedModeLocationPickMessageData,
   Modal,
   useClientService,
   useGetMatchingSpace,
@@ -57,6 +58,8 @@ export default defineComponent({
     iframeUrl.searchParams.append('hide-logo', 'true')
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'location')
+    iframeUrl.searchParams.append('embed-choose-file-name', 'true')
+    iframeUrl.searchParams.append('embed-choose-file-name-suggestion', props.originalResource.name)
 
     const onLoad = () => {
       isLoading.value = false
@@ -68,16 +71,20 @@ export default defineComponent({
         return
       }
 
-      const destinationFolder: Resource = data.data[0]
+      let { resources, fileName }: embedModeLocationPickMessageData = data.data
+
+      const destinationFolder: Resource = resources[0]
       const space = getMatchingSpace(destinationFolder)
 
-      let fileName = props.originalResource.name
       const { children: existingResources } = await webdav.listFiles(space, {
         fileId: destinationFolder.fileId
       })
-      if (existingResources.find((resource) => resource.name === props.originalResource.name)) {
+      const resourceAlreadyExists = existingResources.find(
+        (existingResource) => existingResource.name === fileName
+      )
+      if (resourceAlreadyExists) {
         fileName = resolveFileNameDuplicate(
-          props.originalResource.name,
+          fileName,
           props.originalResource.extension,
           existingResources
         )

packages/web-pkg/src/composables/embedMode/useEmbedMode.ts

@@ -8,6 +8,11 @@ export interface embedModeFilePickMessageData {
   locationQuery: LocationQuery
 }
 
+export interface embedModeLocationPickMessageData {
+  resources: Resource[]
+  fileName?: string
+}
+
 export const useEmbedMode = () => {
   const configStore = useConfigStore()
 
@@ -17,6 +22,14 @@ export const useEmbedMode = () => {
     return configStore.options.embed?.target === 'location'
   })
 
+  const chooseFileName = computed(() => {
+    return configStore.options.embed?.chooseFileName
+  })
+
+  const chooseFileNameSuggestion = computed(() => {
+    return configStore.options.embed?.chooseFileNameSuggestion
+  })
+
   const isFilePicker = computed(() => {
     return configStore.options.embed?.target === 'file'
   })
@@ -56,6 +69,8 @@ export const useEmbedMode = () => {
   return {
     isEnabled,
     isLocationPicker,
+    chooseFileName,
+    chooseFileNameSuggestion,
     isFilePicker,
     messagesTargetOrigin,
     isDelegatingAuthentication,

packages/web-pkg/src/composables/piniaStores/config/types.ts

@@ -85,7 +85,9 @@ const OptionsConfigSchema = z.object({
       messagesOrigin: z.string().optional(),
       delegateAuthentication: z.boolean().optional(),
       delegateAuthenticationOrigin: z.string().optional(),
-      fileTypes: z.array(z.string()).optional()
+      fileTypes: z.array(z.string()).optional(),
+      chooseFileName: z.boolean().optional(),
+      chooseFileNameSuggestion: z.string().optional()
     })
     .optional(),
   feedbackLink: z

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -50,14 +50,12 @@ import {
   ApplicationInformation,
   AppMenuItemExtension,
   CustomComponentTarget,
-  queryItemAsString,
   useAuthStore,
   useCapabilityStore,
   useConfigStore,
   useEmbedMode,
   useExtensionRegistry,
   useOpenEmptyEditor,
-  useRouteQuery,
   useRouter,
   useThemeStore
 } from '@ownclouders/web-pkg'

packages/web-runtime/src/container/bootstrap.ts

@@ -94,6 +94,18 @@ const getEmbedConfigFromQuery = (
     config.target = embedTarget
   }
 
+  // Can enable file name input for location picker
+  const embedChooseFileName = getQueryParam('embed-choose-file-name')
+
+  config.chooseFileName = embedChooseFileName === 'true'
+
+  // Initial value for file name input in location picker
+  const embedChooseFileNameSuggestion = getQueryParam('embed-choose-file-name-suggestion')
+
+  if (embedChooseFileNameSuggestion) {
+    config.chooseFileNameSuggestion = embedChooseFileNameSuggestion
+  }
+
   const embedFileTypes = getQueryParam('embed-file-types')
 
   if (embedFileTypes) {