Featured Items - Collection Page

[g-saracca]

What this PR does / why we need it:

Add featured items section in the Collection Page.
Allows users that can edit a collection to create "featured items" that will initially support content and an optional image.
These "featured items" will be shown between the Collection page header and the items list.

Storybook links:

• https://646f68aa9beb01b35c599acd-nvjhuorxtc.chromatic.com/?path=/story/pages-collection--with-featured-items
• https://646f68aa9beb01b35c599acd-nvjhuorxtc.chromatic.com/?path=/story/pages-edit-collection-featured-items--default

Which issue(s) this PR closes:

• Closes Featured Items - Collection Page #568

Suggestions on how to test this:

Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && npm i && npm run build.
3. Return with cd ../../.
4. Ensure you have a .env file similar to .env.example, with the variable VITE_DATAVERSE_BACKEND_URL=http://localhost:8000.
5. Navigate with cd dev-env.
6. Start the environment using ./run-env.sh unstable.
7. To verify the environment, visit http://localhost:8000 and check your local Dataverse installation.

Step 2: Test the feature

1. Login and create a new collection or even in the root collection click the Edit Collection > Featured Items button.
2. Create featured items, with different contents, with and without image and submit the form, change the order of the featured items by dragging them with the drag handle.
3. Check that the featured items shown in the collection page are correct.
4. Go to edit them again, replace images from a featured item, also you can test removing an image from a featured item and also remove a featured item by clicking the minus button. *Note: you can remove the first item, to be removed needs to be at least in the 2nd position.
5. Check that the featured items shown in the collection page are correct.
6. Go to edit them again but now try the delete all featured items action, when clicking it, a confirmation dialog will appear.
7. Check in the collection page that no featured items are shown.
8. About field validations: the content field cannot be empty and must be 15,000 characters or less, but note that if you enter "Hello world" in the field, this rich text editor will transform that into <p class="rte-paragraph">Hello world</p> so those html tags characters also count for the validation.
9. You could also validate that if a collection is unpublished and has featured items, only users that can view unpublished collections can see the featured items.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Yes.

Is there a release notes update needed for this change?:

Additional documentation:

[ofahimIQSS]

trying to follow these steps but hit a snag on step 6 on building the environment

please advise :)

[g-saracca]

@ekraffmiller could you please reapprove?

[ekraffmiller]

Approved version update & typo fixes

[ofahimIQSS]

Are we setting any limits on how many Content items we can have...On the Edit Featured Items page I added 101 content items, when I did, I had the observation below:

Screen.Recording.2025-02-03.at.1.48.39.PM.mov

To reproduce, just create a collection, edit> Featured Items, and add 100 Content items. The button class under the carousel seems to not function as expected. (not centered, tracker ball on button disappears after scrolling to beginning or end)

[g-saracca]

Are we setting any limits on how many Content items we can have...

Good question, I don't know about that, @GPortas what do you think? max 10 featured items for now?

[ofahimIQSS]

another observation when there are too many featured items:
Page doesn't auto scroll down on local if I scroll up, I can keep hitting the "+" sign and in storybook, it looks like the page scrolls even if I scroll up a bit and add items.

Screen.Recording.2025-02-03.at.2.09.08.PM.mov

[g-saracca]

Thanks @ofahimIQSS, will take a look at this

[ofahimIQSS]

merging is blocked - can someone please review

[ofahimIQSS]

fixes look good overall, had one more UX improvement suggestion - can we limit the message to show one at a time until one message "You can add up to 10 featured items." goes away? See video below

Screen.Recording.2025-02-04.at.11.48.26.AM.mov

[g-saracca]

can we limit the message to show one at a time until one message "You can add up to 10 featured items." goes away?

I think we could, we could limit how many alerts to show at the same time but I think it's not our problem if the user keeps clicking the add button and also it doesn't break anything.
I would keep it simple for now, if we really find a UX issue with this I would address it but I think it's not an issue at this point.
What do you think @ofahimIQSS ?

[ofahimIQSS]

can we limit the message to show one at a time until one message "You can add up to 10 featured items." goes away?

I think we could, we could limit how many alerts to show at the same time but I think it's not our problem if the user keeps clicking the add button and also it doesn't break anything. I would keep it simple for now, if we really find a UX issue with this I would address it but I think it's not an issue at this point. What do you think @ofahimIQSS ?

Agreed! lets keep it as is - please approve the review so I can merge this PR. Thanks!

[ekraffmiller]

looks good, approved

[ofahimIQSS]

Thank you guys! This feature looks great - Merging PR