Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web] Provide Embed Mode for Location and File Picking #9768

Closed
tbsbdr opened this issue Oct 5, 2023 · 15 comments
Closed

[web] Provide Embed Mode for Location and File Picking #9768

tbsbdr opened this issue Oct 5, 2023 · 15 comments
Assignees
Labels
Type:Story User Story

Comments

@tbsbdr
Copy link
Contributor

tbsbdr commented Oct 5, 2023

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

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

image

Integration example within a canvas Web Application

image

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
Copy link
Contributor Author

tbsbdr commented Oct 6, 2023

cc @dj4oC @JammingBen @hodyroff

@dschmidt
Copy link
Member

dschmidt commented Oct 6, 2023

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

@dj4oC
Copy link

dj4oC commented Oct 6, 2023

@AversaFTW please provide feedback

@LukasHirt
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Member

dschmidt commented Oct 6, 2023

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

@tbsbdr tbsbdr changed the title Provide Embed Mode for Location and File Picking [web] Provide Embed Mode for Location and File Picking Oct 9, 2023
@JammingBen JammingBen added the Type:Story User Story label Oct 9, 2023
@LukasHirt
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Contributor Author

tbsbdr commented Oct 16, 2023

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
Copy link
Collaborator

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
Copy link

Sure, that sounds good.

@LukasHirt
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type:Story User Story
Projects
Archived in project
Development

No branches or pull requests

7 participants