[web] Provide Embed Mode for Location and File Picking

[tbsbdr]

Description

• Note: Sprint story points are a Timebox to support @LukasHirt

User Stories

• As a Chat-user I want to select files from within ownCloud in a familiar way so that I can use owncloud files in my chat conversations.

Value

• filepicker integration into other solutions
• save maintenance efforts compared to a dedicated filepicker

Acceptance Criteria

• No Appswitcher
• No themeswitcher (dark/light etc.)
• No Account Menu
• No Feedback Button
• New button Select: Returns resource (same as https://owncloud.dev/integration/file_picker/installation/#buttons-and-events)
• New button Cancel: Closes the embedded view (=dialog)

Definition of ready

[ ] everybody needs to understand the value written in the user story
[ ] acceptance criteria has to be defined
[ ] all dependencies of the user story need to be identified
[ ] feature should be seen from an end user perspective
[ ] user story has to be estimated
[ ] story points need to be less then 20

Definition of done

• Functional requirements
  [ ] functionality described in the user story works
  [ ] acceptance criteria are fulfilled
• Quality
  [ ] code review happened
  [ ] CI is green
  [ ] critical code received unit tests by the developer
  [ ] automated tests passed (if automated tests are not available, this test needs to be created and passed
• Non-functional requirements
  [ ] no sonar cloud issues

Visuals

Integration within element messenger

Integration example within a canvas Web Application

superseeds / fixes owncloud/file-picker#242
superseeds / fixes owncloud/file-picker#243
superseeds / fixes owncloud/file-picker#244
superseeds / fixes owncloud/file-picker#245
superseeds / fixes owncloud/file-picker#246
superseeds / fixes owncloud/file-picker#247
superseeds / fixes owncloud/file-picker#248

[tbsbdr]

cc @dj4oC @JammingBen @hodyroff

[dschmidt]

I assume multi select is only supposed to be supported from a single folder, right?

[dj4oC]

@AversaFTW please provide feedback

[LukasHirt]

A technical question coming up (maybe @dschmidt can answer this).

No themeswitcher (dark/light etc.)

Is there only the manual switch or is there also auto detection of system settings that would need to be taken care of?

[JammingBen]

Is there only the manual switch or is there also auto detection of system settings that would need to be taken care of?

Currently there is no auto detection although we already thought about implementing it. But that's not relevant for this iteration I'd say.

[dschmidt]

Is there only the manual switch or is there also auto detection of system settings that would need to be taken care of?

Currently there is no auto detection although we already thought about implementing it. But that's not relevant for this iteration I'd say.

full ack. Not part of this iteration, but in the long run:
We want auto detection via vueuse. #1373 introduces the concept of dark and light themes

[LukasHirt]

Some notes regarding the messenger integration:

• upload needs to be hidden as well as that will be handled in the messenger
• in the create dropdown, only the new folder option should be available (having it as a direct action instead of dropdown makes more sense then)
• we need to be able to easily send a link to the resource into the chat (we thought about adding extra button to the bottom section next to select action @tbsbdr I would love to get your input on this)
• we need to be able to handle dynamic config due to different schools using the file picker (@JammingBen I would love to get your input on this)

/cc @tbsbdr @dj4oC

[JammingBen]

we need to be able to handle dynamic config due to different schools using the file picker (@JammingBen I would love to get your input on this)

Okay, so to get this right: We have multiple ocis server instances running, but there will be only one instance of embedded Web? Meaning this instance needs to be able to dynamically talk to the server instances?

The challenge here is the fact that Web needs to know the server config (= URL) quite early during the bootstrap process. One (hacky) approach would be to introduce a new config in Web which stores all the servers and their respective URLs. The user then selects one of the schools which Web will use as server. All this would need to happen before the bootstrap process, hence it can't be implemented via an extension.

Honestly, the best/proper solution would be to host one embedded Web instance per server instance. Of course this would require additional architecture, e.g. a central entry point which gathers all available instances and redirects the user to their respective instance (via Webfinger - Web already has a Webfinger package for this use case).

@LukasHirt The File Picker currently is able to load the config dynamically, right? Could you (or @AversaFTW ) enlighten me a bit about the current process, how does a user select/enter a school, how/where is this selection persisted and used?

[LukasHirt]

We have multiple ocis server instances running, but there will be only one instance of embedded Web? Meaning this instance needs to be able to dynamically talk to the server instances?

@AversaFTW can you please clarify the deployment scenario? I.e. does each school has its own oCIS instance that the file picker/web embed is connecting to?

I agree that having the web in each instance on its own (as is basically done in standard deployment) would simplify things.

The File Picker currently is able to load the config dynamically, right?

File picker fetches the json config file from given URL. So every time the file picker is initialised, the fetch is done and then the component mounts. Alternative (which seems to be broken currently) is providing the config via prop. That skips the fetch but overall has the same process.

[LukasHirt]

So, I am in the middle of the research and have some open questions...

Integration point

Overall the whole embed mode seems like an extension of the files app which then would make sense to keep the code contained in there as well. But that breaks the layout a bit as the actions (per visuals) are located outside of the app container (meaning the actual white box on the visuals).

Solutions

1. Change the layout of the files app. This would basically mean we'd wrap the files app in one more container which would replicate the current layout (sidebar and list) and add new element below that including those actions. That would of course require also handling the background directly in the files app to overwrite the background of the app container and have the same look as is in the visual (select action being on blue background and list and sidebar having bottom rounded corners).
2. Introduce a new portal that would live below the app container (in the runtime package). This seems to be a bit easier approach as we do not need to touch the files app layout and background but not sure if it's the nicest approach.

Embed config

We obviously need to be able to assert whether the UI is rendered in embed mode or "regular" mode. Generally speaking, I would say let's simply add a query param. Any objections?

X-Frame-Options header

From what I checked, the X-Frame-Options header is currently set to sameorigin. I guess we might potentially need to have this configurable. Where do we handle this? In oCIS itself? Should we somehow separate the embed mode so that the regular UI is not affected by that change?

@JammingBen @dschmidt can you please let me know what you think about the points above? Thanks!

[LukasHirt]

Notes from todays follow up:

• original approach with File picker was one hosted instance of File picker with dynamic config that is being connected to multiple ownCloud instances (each school has its own instance) but with the embed mode using the already deployed instances of ownCloud looks more reasonable
  • question is how to handle the address of the instance inside of the iframe. Once the user is logged in, a school ID is known so I would say it can be used to point to the correct instance. Input from devops would be great though (we will schedule a quick call to discuss this in broader group)
  • @JammingBen you mentioned the webfinger service... as far as I understand it correct, when the service is called it returns any ownCloud instance that the user is part of?

[tbsbdr]

adding extra button to the bottom section next to select

So the proposal would be to have one button that inserts a link and one button that attaches one/many files/s (sends a copy), right?
Wording for the buttons could be (wording derived from here:
Select
Attach as copy Share links
Fine for you @LukasHirt ?

[LukasHirt]

Wording for the buttons could be (wording derived from here:
Select
Attach as copy Share links

Sounds reasonable to me. @AversaFTW can you please let us know if it works for you as well?

[AversaFTW]

Sure, that sounds good.

[LukasHirt]

The initial implementation is done. Any following work is now being tracked in their own tickets. Can we close this? @kulmann