Adjust modal for open in app action (#11140)

* Adjust modal appereance to minimal look
owncloud · Jul 4, 2024 · 17d07a7 · 17d07a7
1 parent d3a92b2
commit 17d07a7
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 37 deletions.
diff --git a/changelog/unreleased/enhancement-open-file-directly-from-app b/changelog/unreleased/enhancement-open-file-directly-from-app
@@ -4,4 +4,5 @@ We've added an 'Open' item to the drop down menu in the app top bar,
 so the user can open a different file directly from the opened app.
 
 https://github.com/owncloud/web/pull/11085
+https://github.com/owncloud/web/pull/11140
 https://github.com/owncloud/web/issues/11013
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,10 +1,14 @@
 <template>
   <section class="files-embed-actions">
-    <oc-button data-testid="button-cancel" appearance="raw-inverse" @click="emitCancel">{{
-      $gettext('Cancel')
-    }}</oc-button>
     <oc-button
-      v-if="!isLocationPicker"
+      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"
@@ -13,16 +17,17 @@
         areSelectActionsDisabled || !createLinkAction.isVisible({ resources: selectedFiles, space })
       "
       @click="createLinkAction.handler({ resources: selectedFiles, space })"
-      >{{ $gettext('Share link(s)') }}</oc-button
-    >
+      >{{ $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
-    >
+      >{{ selectLabel }}
+    </oc-button>
   </section>
 </template>
 
@@ -44,7 +49,7 @@ export default defineComponent({
   setup() {
     const ability = useAbility()
     const { $gettext } = useGettext()
-    const { isLocationPicker, postMessage } = useEmbedMode()
+    const { isLocationPicker, isFilePicker, postMessage } = useEmbedMode()
     const spacesStore = useSpacesStore()
     const { currentSpace: space } = storeToRefs(spacesStore)
 
@@ -86,6 +91,7 @@ export default defineComponent({
       areSelectActionsDisabled,
       canCreatePublicLinks,
       isLocationPicker,
+      isFilePicker,
       selectLabel,
       emitCancel,
       emitSelect,

diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -5,26 +5,23 @@
     </div>
   </div>
 
-  <portal v-if="showEmbedActions" to="app.runtime.footer">
+  <portal v-if="isEmbedModeEnabled" to="app.runtime.footer">
     <embed-actions />
   </portal>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { defineComponent } from 'vue'
 import { useEmbedMode } from '@ownclouders/web-pkg'
 import EmbedActions from './EmbedActions/EmbedActions.vue'
 
 export default defineComponent({
   components: { EmbedActions },
   inheritAttrs: false,
   setup() {
-    const { isEnabled: isEmbedModeEnabled, isFilePicker } = useEmbedMode()
-    const showEmbedActions = computed(() => {
-      return unref(isEmbedModeEnabled) && !unref(isFilePicker)
-    })
+    const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
-    return { showEmbedActions }
+    return { isEmbedModeEnabled }
   }
 })
 </script>

diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -19,6 +19,11 @@ const selectors = Object.freeze({
 
 describe('EmbedActions', () => {
   describe('select action', () => {
+    it('should hide select action when embedTarget is set to file', () => {
+      const { wrapper } = getWrapper({ isFilePicker: true })
+
+      expect(wrapper.find(selectors.btnSelect).exists()).toBe(false)
+    })
     it('should disable select action when no resources are selected', () => {
       const { wrapper } = getWrapper()
 
@@ -93,6 +98,12 @@ describe('EmbedActions', () => {
       expect(wrapper.find(selectors.btnShare).exists()).toBe(false)
     })
 
+    it('should hide share action when embedTarget is set to file', () => {
+      const { wrapper } = getWrapper({ isFilePicker: true })
+
+      expect(wrapper.find(selectors.btnShare).exists()).toBe(false)
+    })
+
     it('should call the handler of the "Create Link"-action', async () => {
       const { wrapper, mocks } = getWrapper({ selectedIds: ['1'] })
       await wrapper.find(selectors.btnShare).trigger('click')
@@ -106,12 +117,14 @@ function getWrapper(
     selectedIds = [],
     currentFolder = undefined,
     createLinksActionEnabled = true,
-    isLocationPicker = false
+    isLocationPicker = false,
+    isFilePicker = false
   }: {
     selectedIds?: string[]
     currentFolder?: Resource
     createLinksActionEnabled?: boolean
     isLocationPicker?: boolean
+    isFilePicker?: boolean
   } = {
     selectedIds: []
   }
@@ -120,6 +133,7 @@ function getWrapper(
   vi.mocked(useEmbedMode).mockReturnValue(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
+      isFilePicker: ref(isFilePicker),
       postMessage: postMessageMock
     })
   )

diff --git a/packages/web-app-files/tests/unit/components/FilesViewWrapper.spec.ts b/packages/web-app-files/tests/unit/components/FilesViewWrapper.spec.ts
@@ -9,8 +9,6 @@ const selectors = {
 }
 
 const mockUseEmbedMode = vi.fn().mockReturnValue({
-  isLocationPicker: computed(() => false),
-  isFilePicker: computed(() => false),
   isEnabled: computed(() => false)
 })
 
@@ -36,14 +34,6 @@ describe('FilesViewWrapper', () => {
       const { wrapper } = getWrapper()
       expect(wrapper.findComponent(selectors.embedActionsStub).exists()).toBeFalsy()
     })
-    it('does not render when embed mode has target file', () => {
-      mockUseEmbedMode.mockReturnValue({
-        isEnabled: computed(() => true),
-        isFilePicker: computed(() => true)
-      })
-      const { wrapper } = getWrapper()
-      expect(wrapper.findComponent(selectors.embedActionsStub).exists()).toBeFalsy()
-    })
   })
 })
 

diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -1,12 +1,16 @@
 <template>
-  <app-loading-spinner v-if="isLoading" />
-  <iframe
-    v-show="!isLoading"
-    class="oc-width-1-1 oc-height-1-1"
-    :title="iframeTitle"
-    :src="iframeSrc"
-    @load="onLoad"
-  ></iframe>
+  <div class="oc-height-1-1" tabindex="0">
+    <app-loading-spinner v-if="isLoading" />
+    <iframe
+      v-show="!isLoading"
+      ref="iframeRef"
+      class="oc-width-1-1 oc-height-1-1"
+      :title="iframeTitle"
+      :src="iframeSrc"
+      @load="onLoad"
+      tabindex="0"
+    ></iframe>
+  </div>
 </template>
 
 <script lang="ts">
@@ -25,6 +29,7 @@ import { RouteLocationRaw } from 'vue-router'
 import AppLoadingSpinner from '../AppLoadingSpinner.vue'
 import { isShareSpaceResource, Resource } from '@ownclouders/web-client'
 import { unref } from 'vue'
+import { HTMLIFrameElement } from 'happy-dom'
 
 export default defineComponent({
   name: 'FilePickerModal',
@@ -35,6 +40,7 @@ export default defineComponent({
     parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
   },
   setup(props) {
+    const iframeRef = ref<HTMLIFrameElement>()
     const isLoading = ref(true)
     const router = useRouter()
     const { removeModal } = useModals()
@@ -55,6 +61,7 @@ export default defineComponent({
 
     const onLoad = () => {
       isLoading.value = false
+      unref(iframeRef).contentWindow.focus()
     }
 
     const onFilePick = ({ data }: MessageEvent) => {
@@ -80,19 +87,30 @@ export default defineComponent({
       window.open(editorRouteUrl.href, '_blank')
     }
 
+    const onCancel = ({ data }: MessageEvent) => {
+      if (data.name !== 'owncloud-embed:cancel') {
+        return
+      }
+
+      removeModal(props.modal.id)
+    }
+
     onMounted(() => {
       window.addEventListener('message', onFilePick)
+      window.addEventListener('message', onCancel)
     })
 
     onBeforeUnmount(() => {
       window.removeEventListener('message', onFilePick)
+      window.removeEventListener('message', onCancel)
     })
 
     return {
       isLoading,
       onLoad,
       iframeTitle,
       iframeSrc: iframeUrl.href,
+      iframeRef,
       onFilePick
     }
   }
@@ -103,16 +121,18 @@ export default defineComponent({
 .open-with-app-modal {
   max-width: 80vw;
   border: none;
+  overflow: hidden;
 
   .oc-modal-title {
-    border-bottom: none;
+    display: none;
   }
 
   .oc-modal-body {
     padding: 0;
 
     &-message {
       height: 60vh;
+      margin: 0;
     }
   }
 }

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
@@ -22,8 +22,8 @@ export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
     dispatchModal({
       elementClass: 'open-with-app-modal',
       title: $gettext('Open file in %{app}', { app: app.name }),
-      hideConfirmButton: true,
       customComponent: FilePickerModal,
+      hideActions: true,
       customComponentAttrs: () => ({
         app,
         parentFolderLink