Skip to content

feat(files): Make Files app reusable - #64692

Open
tomek2k1 wants to merge 2 commits into
masterfrom
feature/files-app4all
Open

tomek2k1 wants to merge 2 commits into
masterfrom
feature/files-app4all

Conversation

@tomek2k1

@tomek2k1 tomek2k1 commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

There is a need to display files in other apps (e.g. Teams) in the same way as in the Files app, including all available features. This is the first step toward making the Files view available in other apps.

Assisted-by: Copilot:Claude-Sonnet-5

Summary

TODO

  • ...

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

@tomek2k1 tomek2k1 self-assigned this Sep 23, 2026
@github-project-automation github-project-automation Bot moved this to Backlog in 👥 Teams Sep 23, 2026
@tomek2k1 tomek2k1 moved this from Backlog to In progress in 👥 Teams Sep 23, 2026
@tomek2k1 tomek2k1 added this to the Nextcloud 36 milestone Sep 23, 2026
@tomek2k1 tomek2k1 mentioned this pull request Sep 23, 2026
1 of 8 tasks
@tomek2k1
tomek2k1 force-pushed the feature/files-app4all branch from 76547fb to 99ef95d Compare September 23, 2026 14:27
@tomek2k1 tomek2k1 removed the status in 👥 Teams Sep 23, 2026
@tomek2k1 tomek2k1 moved this to In progress in 👥 Teams Sep 23, 2026
@tomek2k1
tomek2k1 force-pushed the feature/files-app4all branch from 99ef95d to 062c83e Compare September 24, 2026 07:28
@tomek2k1 tomek2k1 changed the title feat(files): Make Files app reusable WIP feat(files): Make Files app reusable Oct 3, 2026
@marcoambrosini
marcoambrosini requested a review from artonge October 7, 2026 09:46
@marcoambrosini

Copy link
Copy Markdown
Member

@tomek2k1, @artonge is available if you're stuck or need some guidance on this :)

@skjnldsv skjnldsv added 2. developing Work in progress team: Files Code maintained by 📁 Files team labels Oct 7, 2026
@github-actions

github-actions Bot commented Oct 8, 2026

Copy link
Copy Markdown
Contributor

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

@tomek2k1
tomek2k1 force-pushed the feature/files-app4all branch 2 times, most recently from ab07ffd to bcaa42e Compare October 8, 2026 15:52
@tomek2k1 tomek2k1 changed the title WIP feat(files): Make Files app reusable feat(files): Make Files app reusable Oct 8, 2026
@tomek2k1
tomek2k1 marked this pull request as ready for review October 8, 2026 16:18
@tomek2k1
tomek2k1 requested review from a team and skjnldsv as code owners October 8, 2026 16:18
@tomek2k1
tomek2k1 requested review from Altahrim, kristian-zendato and pringelmann and removed request for a team October 8, 2026 16:18
Signed-off-by: Tomasz Trillò <tomasz.trillo@dataport.de>
Assisted-by: Copilot:Claude-Sonnet-5
@tomek2k1
tomek2k1 force-pushed the feature/files-app4all branch from 5ae36c5 to 4ff2f8f Compare October 8, 2026 20:35

@artonge artonge left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good overall!

throw new Error('Only one embedded Files view can be active at a time')
}

const router = createFilesRouter(createMemoryHistory())

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have use cases where this is not createMemoryHistory()?
If not, then maybe we can drop the argument and hard code it in the function.

}

const router = createFilesRouter(createMemoryHistory())
const previousRouterService = window.OCP.Files.Router

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to save the previous router service?


routerHookRegistered = true
window.OCP.Files.Router._router.afterEach((to, from) => {
hookedRouter = router

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to save the router here?

Comment on lines +6 to +10
<component
:is="embedded ? 'div' : 'NcAppContent'"
v-bind="embedded ? {} : { pageHeading }"
:class="{ 'app-content': embedded }"
data-cy-files-content>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to have a distinctive class name. Because other apps use a similar class for their own app content, so their could be some conflict when injecting the files app in those.

Suggested change
<component
:is="embedded ? 'div' : 'NcAppContent'"
v-bind="embedded ? {} : { pageHeading }"
:class="{ 'app-content': embedded }"
data-cy-files-content>
<component
:is="embedded ? 'div' : 'NcAppContent'"
v-bind="embedded ? {} : { pageHeading }"
:class="files-app-content"
data-cy-files-content>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new class name could then be used to replace .app-content where you already changed it from main.app-content.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this makes sense!

@artonge
artonge requested a review from susnux October 22, 2026 09:23
* app's own controller. It triggers the same script/initial-state bootstrap
* that `files.view.index` performs.
*/
class LoadFilesApp extends Event {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we only want loading the files list not the real app I would say call it LoadFilesList

Comment on lines +60 to +61
Util::addInitScript('files', 'init');
Util::addScript('files', 'main');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use Application::APP_ID here instead of string hardcoded 'files', thats the style we use for every new file

Comment thread apps/files/src/main.ts
}

// Expose the ability to render the Files UI on a foreign page
window.OCP.Files.renderFilesApp ??= renderFilesView

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would say no new OCP frontend API here but use OCA and expose it in nextcloud/files library.

@susnux susnux left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should also get a review of @skjnldsv as app owner

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2. developing Work in progress AI assisted feedback-requested team: Files Code maintained by 📁 Files team

Projects

Status: In progress

Development

Successfully merging this pull request may close these issues.

Display the team’s Files app embedded within the Teams app.

5 participants