Add save as

changelog/unreleased/enhancement-app-top-bar-save-as-function

@@ -0,0 +1,7 @@
+Enhancement: Add a "Save As" function to the app top bar
+
+We've added a "Save As" function to the app top bar.
+This allows the user to save a file with a new name or in a different location with our regular editors.
+
+https://github.com/owncloud/web/pull/11586
+https://github.com/owncloud/web/issues/11525

docs/embed-mode/_index.md

@@ -61,6 +61,8 @@ To maintain uniformity and ease of handling, each event encapsulates the same st
 ## Location picker
 
 By default, the Embed mode allows users to select resources. In certain cases (e.g. uploading a file), this needs to be changed to allow selecting a location. This can be achieved by running the embed mode with additional parameter `embed-target=location`. With this parameter, resource selection is disabled and the selected resources array always includes the current folder as the only item.
+In special scenarios you also want the user to set a file name, this can be achieved by adding the `embed-choose-file-name=true` parameter, or if you also want to set a default file name, you can use `embed-choose-file-name-suggestion=my file.text`.
+
 
 ### Example
 

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

@@ -1,44 +1,60 @@
 <template>
-  <section class="files-embed-actions">
-    <oc-button
-      data-testid="button-cancel"
-      appearance="raw-inverse"
-      variation="brand"
-      @click="emitCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      v-if="!isLocationPicker && !isFilePicker"
-      key="btn-share"
-      data-testid="button-share"
-      variation="inverse"
-      appearance="filled"
-      :disabled="
-        areSelectActionsDisabled || !createLinkAction.isVisible({ resources: selectedFiles, space })
-      "
-      @click="createLinkAction.handler({ resources: selectedFiles, space })"
-      >{{ $gettext('Share link(s)') }}
-    </oc-button>
-    <oc-button
-      v-if="!isFilePicker"
-      data-testid="button-select"
-      variation="inverse"
-      appearance="filled"
-      :disabled="areSelectActionsDisabled"
-      @click="emitSelect"
-      >{{ selectLabel }}
-    </oc-button>
+  <section class="files-embed-actions oc-width-1-1 oc-flex oc-flex-middle oc-flex-between oc-my-s">
+    <oc-text-input
+      v-if="chooseFileName"
+      v-model="fileName"
+      class="files-embed-actions-file-name oc-flex oc-flex-row oc-flex-middle"
+      :selection-range="fileNameInputSelectionRange"
+      :label="$gettext('File name')"
+    />
+
+    <div class="files-embed-actions-buttons oc-flex oc-flex-middle">
+      <oc-button
+        class="oc-mr-s"
+        data-testid="button-cancel"
+        appearance="raw-inverse"
+        variation="brand"
+        @click="emitCancel"
+        >{{ $gettext('Cancel') }}
+      </oc-button>
+      <oc-button
+        v-if="!isLocationPicker && !isFilePicker"
+        key="btn-share"
+        class="oc-mr-s"
+        data-testid="button-share"
+        variation="inverse"
+        appearance="filled"
+        :disabled="
+          areSelectActionsDisabled ||
+          !createLinkAction.isVisible({ resources: selectedFiles, space })
+        "
+        @click="createLinkAction.handler({ resources: selectedFiles, space })"
+        >{{ $gettext('Share link(s)') }}
+      </oc-button>
+      <oc-button
+        v-if="!isFilePicker"
+        data-testid="button-select"
+        variation="inverse"
+        appearance="filled"
+        :disabled="areSelectActionsDisabled"
+        @click="emitSelect"
+        >{{ selectLabel }}
+      </oc-button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, ref, unref } from 'vue'
 import {
+  embedModeLocationPickMessageData,
   FileAction,
+  routeToContextQuery,
   useAbility,
   useEmbedMode,
   useFileActionsCreateLink,
   useResourcesStore,
+  useRouter,
   useSpacesStore
 } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client'
@@ -49,12 +65,19 @@ 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 router = useRouter()
     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,7 +98,20 @@ 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 => {
+      if (unref(chooseFileName)) {
+        postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
+          resources: JSON.parse(JSON.stringify(selectedFiles.value)),
+          fileName: unref(fileName),
+          locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
+        })
+      }
+
+      // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
       postMessage<Resource[]>(
         'owncloud-embed:select',
         JSON.parse(JSON.stringify(selectedFiles.value))
@@ -87,6 +123,8 @@ export default defineComponent({
     }
 
     return {
+      chooseFileName,
+      chooseFileNameSuggestion,
       selectedFiles,
       areSelectActionsDisabled,
       canCreatePublicLinks,
@@ -96,22 +134,41 @@ export default defineComponent({
       emitCancel,
       emitSelect,
       space,
-      createLinkAction
+      createLinkAction,
+      fileName,
+      fileNameInputSelectionRange
     }
   }
 })
 </script>
 
-<style scoped>
+<style lang="scss">
 .files-embed-actions {
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
+  // Prevent .snackbar from overlapping the actions
+  z-index: calc(var(--oc-z-index-modal) + 2);
+  color: var(--oc-color-text-inverse);
   flex-wrap: wrap;
-  gap: var(--oc-space-medium);
-  justify-content: flex-end;
-  padding: var(--oc-space-medium) 0;
-  padding-right: var(--oc-space-small);
-  width: 100%;
+  gap: var(--oc-space-small);
+
+  &-file-name {
+    margin-left: 230px;
+    gap: var(--oc-space-small);
+
+    input {
+      width: 400px;
+    }
+
+    @media (max-width: $oc-breakpoint-medium-default) {
+      margin-left: 0;
+
+      input {
+        width: auto;
+      }
+    }
+  }
+
+  &-buttons {
+    margin-left: auto;
+  }
 }
 </style>

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

@@ -12,6 +12,7 @@ import {
   ApplicationInformation,
   defineWebApplication,
   useCapabilityStore,
+  useEmbedMode,
   useSpacesStore,
   useUserStore
 } from '@ownclouders/web-pkg'
@@ -22,7 +23,7 @@ import { AppNavigationItem } from '@ownclouders/web-pkg'
 // dirty: importing view from other extension within project
 import SearchResults from '../../web-app-search/src/views/List.vue'
 import { isPersonalSpaceResource, isShareSpaceResource } from '@ownclouders/web-client'
-import { ComponentCustomProperties } from 'vue'
+import { ComponentCustomProperties, unref } from 'vue'
 import { extensionPoints } from './extensionPoints'
 
 // just a dummy function to trick gettext tools
@@ -42,6 +43,7 @@ export const navItems = (context: ComponentCustomProperties): AppNavigationItem[
   const spacesStores = useSpacesStore()
   const userStore = useUserStore()
   const capabilityStore = useCapabilityStore()
+  const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
   return [
     {
@@ -117,7 +119,11 @@ export const navItems = (context: ComponentCustomProperties): AppNavigationItem[
       },
       activeFor: [{ path: `/${appInfo.id}/trash` }],
       isVisible() {
-        return capabilityStore.davTrashbin === '1.0' && capabilityStore.filesUndelete
+        return (
+          capabilityStore.davTrashbin === '1.0' &&
+          capabilityStore.filesUndelete &&
+          !unref(isEmbedModeEnabled)
+        )
       },
       priority: 50
     }

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

@@ -1,4 +1,9 @@
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  RouteLocation,
+  shallowMount
+} from 'web-test-helpers'
 import EmbedActions from '../../../../src/components/EmbedActions/EmbedActions.vue'
 import { FileAction, useEmbedMode, useFileActionsCreateLink } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
@@ -14,7 +19,8 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
 const selectors = Object.freeze({
   btnSelect: '[data-testid="button-select"]',
   btnCancel: '[data-testid="button-cancel"]',
-  btnShare: '[data-testid="button-share"]'
+  btnShare: '[data-testid="button-share"]',
+  fileNameInput: '.files-embed-actions-file-name'
 })
 
 describe('EmbedActions', () => {
@@ -60,6 +66,41 @@ describe('EmbedActions', () => {
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
     })
+    it('should display the file name input when chooseFileName is configured', () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true,
+        chooseFileName: true
+      })
+
+      expect(wrapper.find(selectors.fileNameInput).exists()).toBe(true)
+    })
+    it('should hide the file name input when chooseFileName is not configured', () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true
+      })
+
+      expect(wrapper.find(selectors.fileNameInput).exists()).toBe(false)
+    })
+    it('should emit select event with currentFolder as selected resource and fileName when select action is triggered and chooseFileName is configured', async () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true,
+        chooseFileName: true
+      })
+
+      await wrapper.find(selectors.btnSelect).trigger('click')
+
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
+        fileName: 'file.txt',
+        resources: [{ id: '1' }],
+        locationQuery: {
+          contextRouteName: 'files-spaces-generic',
+          contextRouteQuery: {}
+        }
+      })
+    })
   })
 
   describe('cancel action', () => {
@@ -118,13 +159,15 @@ function getWrapper(
     currentFolder = undefined,
     createLinksActionEnabled = true,
     isLocationPicker = false,
-    isFilePicker = false
+    isFilePicker = false,
+    chooseFileName = false
   }: {
     selectedIds?: string[]
     currentFolder?: Resource
     createLinksActionEnabled?: boolean
     isLocationPicker?: boolean
     isFilePicker?: boolean
+    chooseFileName?: boolean
   } = {
     selectedIds: []
   }
@@ -134,6 +177,8 @@ function getWrapper(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
+      chooseFileName: ref(chooseFileName),
+      chooseFileNameSuggestion: ref('file.txt'),
       postMessage: postMessageMock
     })
   )
@@ -151,11 +196,23 @@ function getWrapper(
   )
 
   const resources = selectedIds.map((id) => ({ id })) as Resource[]
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({
+        name: 'files-spaces-generic',
+        path: '/files/spaces/personal/admin'
+      })
+    }),
+    createLinkHandlerMock,
+    postMessageMock
+  }
 
   return {
-    mocks: { createLinkHandlerMock, postMessageMock },
+    mocks,
     wrapper: shallowMount(EmbedActions, {
       global: {
+        mocks,
+        provide: mocks,
         stubs: { OcButton: false },
         plugins: [
           ...defaultPlugins({