feat: edit/create rows from tables interactive content widget

[elzody]

Issue(s)

Fixes #879

Overview

If a user has the ability to create/edit rows on a table/view, the user can also do so from the interactive table widget. The same "create row" button is used, as well as the "edit row" action button when hovering over a row. I made some edits to other components to better support this feature, such as dynamic importing of store.js and data.js and styling of the CreateRow.vue and EditRow.vue components (mostly from within ContentReferenceWidget.vue so as to not alter the original components elsewhere).

[juliusknorr]

@elzody just a small hint, if you prefix the issue if with "fixes" or "resolves" in the description github will automatically add a reference that is also visible on the team board :)

[enjeck]

Might be a dumb question, but what is the "interactive content widget"? Is that what pops up when I use the smartpicker? I ask because I have no idea how to view what this PR changes :sweat_smile:

[juliusknorr]

Might be a dumb question, but what is the "interactive content widget"? Is that what pops up when I use the smartpicker? I ask because I have no idea how to view what this PR changes 😅

When you open the smart picker and insert a table you will first see a custom picker element which is unrelated to the PR but just for understanding. The widgets then define the rendering of a preview for a link inserted through the smart picker or manually. We already have those widgets for a while but now make them more interactive by adding the ability to create/edit rows directly from the link preview widget. Hope that makes it a bit clearer :)

In short, to test it use the smart picker to insert a table link with content preview in a text document and toggle the preview on.

[github-actions[bot]]

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!

[elzody]

I don't think the failing Cypress tests are related, they are also failing on main it seems. Unsure what caused it 😔

[elzody]

@mejo- Thanks for bringing these up. A lot of the styling issues were present before I even started; I tried to fix some up as best I could, but there are definitely still some present. I will look at it some more

[elzody]

I made some styling changes which I think make the widget look better than before. Specifically, I made the following changes:

• The table headers for the rich text editor fields were misaligned, because the action button does not have any available actions due to it being a widget and less sophisticated than opening the actual table. I made it so that the spot where the action button goes will always take up a 44px * 44px space, aligning it with the other headers. This was the only way I knew how to do it after thinking on it for several hours; flexbox was NOT working properly there.
• The extra space off to the right of the table was caused by the pagination footer, so I adjusted the space it takes up when rendered in a widget like this. It no longer takes up extra space, that I can see anyway.
• There was some transparent space in the widget header off to the right, which has been fixed now by adding an element to group the table title and options row. They also stick properly now to the top.

The other things that you mentioned were not reproducible on my end. I tried the following:

• When I add or edit a row, it is reflected immediately in the widget. If I reload normally, the changes are still there, as well as in the tables app. This also goes for a hard reload of the page.
• I tested the permissions thing briefly, by sharing it with a non-admin account without write/update permissions for the table. At first, the buttons were still there, but after submitting the new/altered content, an error popped up stating I did not have sufficient permissions to update the table. When I did a hard reload on the page, the buttons disappeared. My guess is the browser caches the JS related to this, but not sure about it yet.

Maybe it would be worth it to expand the tests a bit to check for the read-only permissions or something? Also, I rebased onto main and resolved a small merge conflict.

@mejo-

[juliusknorr]

Pushed a small backend commit to ensure that the rich text fields are properly rendered, otherwise 👍

[juliusknorr]

Editing in view mode is still possible. When switching to view mode in Collectives, all the buttons to edit the table in place are still there, and when editing the table the changes are pushed to the server.

I'd not consider this one a blocker for now. We also have this behaviour in other interactive widgets and it would require larger work to make the context of the widget exposed to the rendering provider.