feat: add NcFormBoxButton

[ShGKme]

☑️ Resolves

• Fix: Add a generic component for form entry (-like) items #7123
• Reworked: feat: add NcFormGroupButton - an interactive button/link element of NcFormGroup #7440

Described in the docs.

🖼️ Screenshots

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 51.57%. Comparing base (845aeb6) to head (8f194c1).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7779   +/-   ##
=======================================
  Coverage   51.57%   51.57%           
=======================================
  Files          96       96           
  Lines        3143     3143           
  Branches      864      864           
=======================================
  Hits         1621     1621           
  Misses       1274     1274           
  Partials      248      248           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ShGKme]

• Rebased onto main
• Added a small comment in CSS, no actual changes

[susnux]

new folder structure? Why not put it inside components/NcFormBox/ like we do with some other shared components?

[ShGKme]

To make it clear that it is not a public API and prevent "I forgot to exclude from the docs" situations.

But it is an internal thing, so we can refactor the structure any moment later.

[ShGKme]

Is there anything Public API/design/implementation related?

Since this is the only one comment in the review, I don't know, if it is the full review or you submitted with this comment only

[susnux]

Is there anything Public API/design/implementation related?

No otherwise its fine!

[susnux]

To make it clear that it is not a public API

But only what is exported from the index.ts is public API.
IMHO having a new folder structure is more confusing than helpful.

and prevent "I forgot to exclude from the docs" situations.

True but thats due to non-explicitly defined styleguidist config but also not hard to add.

[susnux]

So I would prefer moving it in this PR back to the normal location /src/components/NcFormBox/NcFormBoxItem.vue and do a follow up where we e.g. move all internal components and composables to consistent new locations. So we can just continue this one without mixing build related changes.

[ShGKme]

components/NAME/NAME.vue

Even if we call components/NAME/NAME.vue public, it doesn't specify the position for the private component, does it? Works if it is a subcomponent of a specific public one, but what if it is shared?

• components/Foo/Foo.vue -> uses -> Shared.vue
• components/Bar/Bar.vue -> uses -> Shared.vue

Ok, Foo.vue and Bar.vue are public. Where Shared.vue is supposed to be?
If in Foo - why not Bar. If in Bar - why not Foo.

every other vue file in that folder is private

The following components are "every other" and they are public:

• components/NcRichContenteditable/NcMentionBubble.vue
• components/NcRichContenteditable/NcAutoCompleteResult.vue

---

So:

1. No, not only such paths are public
2. No, having such paths doesn't specify the path for private even if p.1 were actual

[ShGKme]

Also its not really matter as a developer if the component is public or not, because you can use both.

It does matter a lot. In a private component I can do everything, rewrite it, rename, change the interface, throw it away. In a public component I need to be careful and not break anything. It is easy to change it and hard to bring back after being released.

[ShGKme]

a completely different folder

I also proposed 2 alternative names for the folder and 1 alternative location.

Again, I'm fine with a different location, folder name or both.

I'm not fine with just mixing public with private files together and only separate by including/excluding in re-export and the list on the docs.

[ShGKme]

@susnux I pushed a commit moving the component to the components/NcFormBox/NcFormBoxItem.vue. I don't think this is the best place for it, but it can be discussed later, outside the NcFormBoxButton PR.

[GVodyanov]

Tested, works, and code looks good!

I wanted to mention though that it would be nice to have the "copy" action to be implemented inside of the component, seeing as in the current state it would require every app to create their own implementation. Seeing as this is time-critical though, I think it's totally fine to do that in another PR later.

[ShGKme]

@GVodyanov NcFormBoxCopyButton is in local draft, but will be pushed later since it has lower priority over base components

[Antreesy]

Otherwise looks good

[ShGKme]

@susnux Since your comment is not marked as blocking, review is not on Request changes and the discussed part is purely internal and stylistic, I'm merging the PR.

[ShGKme]

Rebased onto main and squashed, no other changes.

[nickvergessen]

/backport to stable8

[ShGKme]

/backport to stable8

[backportbot]

The backport to stable8 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable8
git pull origin stable8

# Create the new backport branch
git checkout -b backport/7779/stable8

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 8f194c14

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/7779/stable8

Error: Failed to create pull request: Validation Failed: {"resource":"PullRequest","code":"custom","message":"A pull request already exists for nextcloud-libraries:backport/7779/stable8."} - https://docs.github.com/rest/pulls/pulls#create-a-pull-request

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.