[full-ci] Public-link open default action on single file share (#9046)

changelog/unreleased/enhancement-single-file-link-open-with-default-app

@@ -0,0 +1,7 @@
+Enhancement: Single file link open with default app
+
+We've added a configurable functionality, that a single shared file via link will be opened in default app,
+for example text-editor.
+
+https://github.com/owncloud/web/pull/9046
+https://github.com/owncloud/web/issues/9045

docs/getting-started.md

@@ -1,5 +1,5 @@
 ---
-title: "Getting Started"
+title: 'Getting Started'
 date: 2018-05-02T00:00:00+00:00
 weight: 10
 geekdocRepo: https://github.com/owncloud/web
@@ -43,10 +43,11 @@ Depending on the backend you are using, there are sample config files provided i
 - `customTranslations` You can specify one or multiple files to overwrite existing translations. For example set this option to `[{url: "https://localhost:9200/customTranslations.json"}]`.
 
 #### Options
+
 - `options.homeFolder` You can specify a folder that is used when the user navigates `home`. Navigating home gets triggered by clicking on the `All files`
-menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use
-variables of the user object to come up with a user specific home path. This uses twig template variable style and allows you to pick a value or a
-substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
+ menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use
+ variables of the user object to come up with a user specific home path. This uses twig template variable style and allows you to pick a value or a
+ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
 - `options.openAppsInTab` Configures whether apps and extensions generally should open in a new tab. Defaults to false.
 - `options.disablePreviews` Set this option to `true` to disable previews in all the different file listing views. The only list view that is not affected
  by this is the trash bin, as that doesn't allow showing previews at all.
@@ -64,13 +65,14 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}
 - `options.runningOnEos` Set this option to `true` if running on an [EOS storage backend](https://eos-web.web.cern.ch/eos-web/) to enable its specific features. Defaults to `false`.
 - `options.cernFeatures` Enabling this will activate CERN-specific features. Defaults to `false`.
 - `options.hoverableQuickActions` Set this option to `true` to hide the quick actions (buttons appearing on file rows), and only show them when the user
-hovers the row with his mouse. Defaults to `false`.
+ hovers the row with his mouse. Defaults to `false`.
 - `option.routing` This accepts an object with the following fields to customize the routing behaviour:
- - `options.routing.idBased` Enable or disable fileIds being added to the URL. Defaults to `true` because otherwise e.g. spaces with name clashes can't be resolved correctly. Only disable this if you can guarantee server side that spaces of the same namespace can't have name clashes. 
+ - `options.routing.idBased` Enable or disable fileIds being added to the URL. Defaults to `true` because otherwise e.g. spaces with name clashes can't be resolved correctly. Only disable this if you can guarantee server side that spaces of the same namespace can't have name clashes.
 - `options.upload.xhr.timeout` Specifies the timeout for XHR uploads in milliseconds.
 - `options.editor.autosaveEnabled` Specifies if the autosave for the editor apps is enabled.
 - `options.editor.autosaveInterval` Specifies the time interval for the autosave of editor apps in seconds.
 - `options.contextHelpersReadMore` Specifies whether the "Read more" link should be displayed or not.
+- `options.openLinksWithDefaultApp` Specifies whether single file link shares should be opened with default app or not.
 
 ### Sentry
 

packages/web-app-files/src/components/FilesList/ResourceDetails.vue

@@ -7,14 +7,16 @@
  </div>
  </div>
 </template>
- 
- <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 
 import FileActions from '../SideBar/Actions/FileActions.vue'
 import FileDetails from '../SideBar/Details/FileDetails.vue'
 import FileInfo from '../SideBar/FileInfo.vue'
+import { useFileActions } from 'web-app-files/src/composables/actions/files/useFileActions'
+import { useRouteQuery } from 'web-pkg'
 
 export default defineComponent({
  components: {
@@ -39,6 +41,23 @@ export default defineComponent({
  required: false,
  default: null
  }
+ },
+ setup(props) {
+ const { getDefaultEditorAction } = useFileActions()
+ const openWithDefaultAppQuery = useRouteQuery('openWithDefaultApp')
+ const fileActionsOptions = {
+ resources: [props.singleResource],
+ space: props.space
+ }
+ const defaultEditorAction = getDefaultEditorAction(fileActionsOptions)
+
+ if (unref(openWithDefaultAppQuery) === 'true' && defaultEditorAction) {
+ defaultEditorAction.handler({ ...fileActionsOptions })
+ }
+
+ return {
+ defaultEditorAction
+ }
  }
 })
 </script>

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

@@ -34,6 +34,10 @@ import {
 export const EDITOR_MODE_EDIT = 'edit'
 export const EDITOR_MODE_CREATE = 'create'
 
+export interface GetFileActionsOptions extends FileActionOptions {
+ omitSystemActions?: boolean
+}
+
 export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
  store = store || useStore()
  const router = useRouter()
@@ -214,7 +218,11 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
  action.handler(options)
  }
 
- const getDefaultAction = (options: FileActionOptions): Action => {
+ const getDefaultEditorAction = (options: FileActionOptions): Action | null => {
+ return getDefaultAction({ ...options, omitSystemActions: true })
+ }
+
+ const getDefaultAction = (options: GetFileActionsOptions): Action | null => {
  const filterCallback = (action) =>
  action.canBeDefault &&
  action.isEnabled({
@@ -236,7 +244,7 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
  }
 
  // fallback: system actions
- return unref(systemActions).filter(filterCallback)[0]
+ return options.omitSystemActions ? null : unref(systemActions).filter(filterCallback)[0]
  }
 
  const getAllAvailableActions = (options: FileActionOptions) => {
@@ -323,6 +331,8 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
  return {
  editorActions,
  systemActions,
+ getDefaultAction,
+ getDefaultEditorAction,
  getAllAvailableActions,
  loadExternalAppActions,
  openEditor,

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -170,7 +170,7 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import WhitespaceContextMenu from 'web-app-files/src/components/Spaces/WhitespaceContextMenu.vue'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
-import { useRoute } from 'web-pkg/src/composables'
+import { useRoute, useRouteQuery } from 'web-pkg/src/composables'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -231,6 +231,8 @@ export default defineComponent({
  setup(props) {
  const store = useStore()
  const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useGettext()
+ const { getDefaultEditorAction } = useFileActions()
+ const openWithDefaultAppQuery = useRouteQuery('openWithDefaultApp')
  let loadResourcesEventToken
 
  const canUpload = computed(() => {
@@ -388,6 +390,25 @@ export default defineComponent({
  }
  }
 
+ const openWithDefaultApp = () => {
+ const highlightedFile = store.getters['Files/highlightedFile']
+
+ if (!highlightedFile || highlightedFile.isFolder) {
+ return
+ }
+
+ const fileActionsOptions = {
+ resources: [highlightedFile],
+ space: props.space
+ }
+
+ const defaultEditorAction = getDefaultEditorAction(fileActionsOptions)
+
+ if (defaultEditorAction) {
+ defaultEditorAction.handler({ ...fileActionsOptions })
+ }
+ }
+
  const resourcesViewDefaults = useResourcesViewDefaults<Resource, any, any[]>()
  const performLoaderTask = async (
  sameRoute: boolean,
@@ -412,6 +433,10 @@ export default defineComponent({
  ])
  resourcesViewDefaults.refreshFileListHeaderPosition()
  focusAndAnnounceBreadcrumb(sameRoute)
+
+ if (unref(openWithDefaultAppQuery) === 'true') {
+ openWithDefaultApp()
+ }
  }
 
  onMounted(() => {

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

@@ -0,0 +1,90 @@
+import {
+ createStore,
+ defaultComponentMocks,
+ defaultPlugins,
+ defaultStoreMockOptions,
+ mount,
+ RouteLocation
+} from 'web-test-helpers'
+import ResourceDetails from '../../../../src/components/FilesList/ResourceDetails.vue'
+import { mock } from 'jest-mock-extended'
+import { useFileActions } from 'web-app-files/src/composables/actions/files/useFileActions'
+import { SpaceResource } from 'web-client'
+import { useRouteQuery } from 'web-pkg'
+import { ref } from 'vue'
+
+jest.mock('web-app-files/src/composables/actions/files/useFileActions')
+jest.mock('web-pkg/src/composables/router', () => ({
+ ...jest.requireActual('web-pkg/src/composables/router'),
+ useRouteQuery: jest.fn()
+}))
+
+describe('ResourceDetails component', () => {
+ jest.mocked(useFileActions).mockImplementation(() =>
+ mock<ReturnType<typeof useFileActions>>({
+ getDefaultEditorAction: () => ({ handler: jest.fn() } as any)
+ })
+ )
+
+ it('renders resource details correctly', () => {
+ const { wrapper } = getWrapper()
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+
+ describe('open with default actions', () => {
+ it("doesn't open default action if query param 'openWithDefaultApp' isn't set true", () => {
+ const { wrapper } = getWrapper()
+ expect(wrapper.vm.defaultEditorAction.handler).not.toHaveBeenCalled()
+ })
+ it("opens default action if query param 'openWithDefaultApp' is set true", () => {
+ jest.mocked(useRouteQuery).mockImplementationOnce(() => ref('true'))
+ const { wrapper } = getWrapper()
+ expect(wrapper.vm.defaultEditorAction.handler).toHaveBeenCalled()
+ })
+ })
+
+ function getWrapper() {
+ const mocks = {
+ ...defaultComponentMocks({
+ currentRoute: mock<RouteLocation>({
+ name: 'files-public-link',
+ query: { openWithDefaultAppQuery: 'true' }
+ })
+ })
+ }
+ const storeOptions = { ...defaultStoreMockOptions }
+ const store = createStore(storeOptions)
+
+ const file = {
+ id: 0,
+ name: 'image.jpg',
+ size: 24064,
+ mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+ mimeType: 'image/jpg',
+ owner: [
+ {
+ username: 'admin'
+ }
+ ]
+ }
+ const space = mock<SpaceResource>()
+
+ return {
+ mocks,
+ wrapper: mount(ResourceDetails, {
+ props: {
+ space,
+ singleResource: file
+ },
+ global: {
+ mocks,
+ plugins: [...defaultPlugins(), store],
+ provide: {
+ space,
+ resource: file
+ }
+ }
+ })
+ }
+ }
+})

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResourceDetails component renders resource details correctly 1`] = `
+<div class="resource-details oc-flex oc-flex-column oc-flex-middle">
+ <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
+ <div class="file_info oc-flex oc-flex-between oc-p-s">
+ <div class="oc-flex oc-flex-middle">
+ <span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file file_info__icon oc-mr-s">
+ <!---->
+ </span>
+ <div class="file_info__body oc-text-overflow">
+ <h3 class="oc-font-semibold">
+ <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
+ <span class="oc-resource-basename oc-text-break">image.jpg</span>
+ <!--v-if-->
+ </span>
+ </h3>
+ </div>
+ </div>
+ <!--v-if-->
+ </div>
+ <div class="oc-mb" id="oc-file-details-sidebar">
+ <div>
+ <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
+ <span class="oc-icon oc-icon-xxxl oc-icon-passive oc-resource-icon oc-resource-icon-file details-icon">
+ <!---->
+ </span>
+ </div>
+ <!--v-if-->
+ <table aria-label="Overview of the information about the selected file" class="details-table">
+ <tbody>
+ <tr>
+ <th class="oc-pr-s oc-font-semibold" scope="col">Last modified</th>
+ <td>
+ <span>Oct 21, 2015, 7:28 AM</span>
+ </td>
+ </tr>
+ <!--v-if-->
+ <!--v-if-->
+ <!--v-if-->
+ <tr>
+ <th class="oc-pr-s oc-font-semibold" scope="col">Size</th>
+ <td>24 kB</td>
+ </tr>
+ <!--v-if-->
+ <!--v-if-->
+ <!--v-if-->
+ <!--v-if-->
+ <!--v-if-->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <ul class="oc-list oc-my-rm oc-mx-rm oc-mt-s" id="oc-files-actions-sidebar"></ul>
+ </div>
+</div>
+`;

packages/web-pkg/src/configuration/manager.ts

@@ -89,6 +89,11 @@ export class ConfigurationManager {
  'contextHelpersReadMore',
  get(options, 'contextHelpersReadMore', true)
  )
+ set(
+ this.optionsConfiguration,
+ 'openLinksWithDefaultApp',
+ get(options, 'openLinksWithDefaultApp', true)
+ )
  }
 
  get options(): OptionsConfiguration {

packages/web-pkg/src/configuration/types.ts

@@ -14,6 +14,7 @@ export interface OptionsConfiguration {
  routing?: RoutingOptionsConfiguration
  logoutUrl?: string
  contextHelpersReadMore?: boolean
+ openLinksWithDefaultApp?: boolean
 }
 
 export interface OAuth2Configuration {

packages/web-runtime/src/pages/resolvePrivateLink.vue

@@ -148,7 +148,10 @@ export default defineComponent({
  query: {
  ...query,
  scrollTo: unref(resource).fileId,
- ...(unref(details) && { details: unref(details) })
+ ...(unref(details) && { details: unref(details) }),
+ ...(configurationManager.options.openLinksWithDefaultApp && {
+ openWithDefaultApp: 'true'
+ })
  }
  }
  router.push(location)