[Polls] Add PollAttachmentView + ViewContainerBuilder

[nuno-vieira]

🔗 Issue Links

https://stream-io.atlassian.net/browse/PBE-4287

🎯 Goal

Adds the PollAttachmentView Components to the Message List.

Out of Scope

• Poll Creation
• Limit of 10 Options in the Message List + All Votes List
• Option Suggestions
• Poll Comments
• Poll Docs
• Poll Results (Seperate PR here)

📝 Summary

New ViewContainerBuilder

This PR introduces a new way to build and customize UIs in the UIKit SDK. The goal is to make it easier to re-layout when customizing the default views and also to make it easier for us to create new components more quickly and easily.

The API is pretty small, this is all the things we can use:

• HContainer(spacing:distribution:alignment:) to create Horizontal Stack Views.
• VContainer(spacing:distribution:alignment:) to create Vertical Stack Views.
• Spacer() to create Empty/Spacing views.
• UIView.layout {} to create additional layout changes in place.
• UIView.constraints { } to automatically activate constraints.
• UIStackView.views { } to replace the arrangedSubviews of a stack view.
• UIStackView.embed() to easily embed containers into the existing hierarchy
• UIView.width() and UIView.heigh() to easily provide width and height values to a view

LLC Changes

Updates the MessageDTO whenever the PollDTO changes.

This is needed to trigger didMessageUpdates delegate changes. This is especially important for UIKit since it requires table view cell reloading for the UI updates to be visible.

Adds domain logic helpers to the Poll model:

This logic is close to the domain logic, so it can live in the LLC SDK and be shared by both SwiftUI and UIKit. Ideally, SwiftUI should update to use these helpers internally. This is quite useful as well because it is used in multiple components across the UI SDKs.

New API added:

• currentMaximumVoteCount: Int
• isOptionWinner(_ option:) -> Bool
• isOptionOneOfTheWinners(_ option:) -> Bool
• isOptionWithMostVotes(_ option:) -> Bool
• isOptionWithMaximumVotes(_ option:) -> Bool
• voteCount(for option:) -> Int
• voteRatio(for option: PollOption) -> Float
• currentUserVote(for option: PollOption) -> PollVote?
• hasCurrentUserVoted(for option: PollOptions) -> Bool

PollAttachmentView

High-level Overview

graph LR
    PollAttachmentView --> headerView
    headerView --> titleLabel & subtitleLabel
    PollAttachmentView --> PollAttachmentOptionListView
    PollAttachmentOptionListView --> PollAttachmentOptionListItemView
    PollAttachmentView --> footerView
    footerView --> ViewResultsButton & EndPollButton

Loading

Poll Implementation Details

• Uses Haptic Feedback to know when a vote is a success or error easily
• Uses a one PollController reference in the ChatMessageListVC to manage poll interactions

UI SDK Changes

• Adds ChatUserAvatarView.shouldShowOnlineIndicator to allow disabling the online indicator
• Adds StackedUserAvatarView to reuse overlaying a stack of avatars
• Adds CheckboxButton

🧪 Manual Testing Notes

Only some overall simple QA should be done. The full QA should be done on the final PR.

Note: The SwiftUI environment should be used.
Since poll creation has not yet been done, it should be done on the SwiftUI Demo app.

☑️ Contributor Checklist

• I have signed the Stream CLA (required)
• This change should be manually QAed
• Changelog is updated with client-facing changes
• Changelog is updated with new localization keys
• New code is covered by unit tests
• Comparison screenshots added for visual changes
• Affected documentation updated (docusaurus, tutorial, CMS)

[Stream-SDK-Bot]

SDK Performance

target	metric	benchmark	branch	performance	status
MessageList	Hitches total duration	10 ms	1.67 ms	83.3% 🔼	🟢
	Duration	2.6 s	2.54 s	2.31% 🔼	🟢
	Hitch time ratio	4 ms per s	0.65 ms per s	83.75% 🔼	🟢
	Frame rate	75 fps	78.2 fps	4.27% 🔼	🟢
	Number of hitches	1	0.2	80.0% 🔼	🟢
ChannelList	Hitches total duration	12.5 ms	25.87 ms	-106.96% 🔽	🔴
	Duration	2.6 s	2.55 s	1.92% 🔼	🟢
	Hitch time ratio	5 ms per s	10.12 ms per s	-102.4% 🔽	🔴
	Frame rate	72 fps	74.14 fps	2.97% 🔼	🟢
	Number of hitches	1.2	2.2	-83.33% 🔽	🔴

[github-actions]

	1 Warning
⚠️	Big PR

Generated by 🚫 Danger

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
StreamChat	6.76 MB	6.8 MB	+33 KB	🟢
StreamChatUI	4.41 MB	4.53 MB	+116 KB	🟢

[martinmitrevski]

Still some work to be done, a lot of UI is missing. Given that some of the missing features are part of the public component, I'm not sure we should merge it. I would prefer a base branch instead.
Merging without the poll creation flow is fine, but not with an incomplete poll attachment view.
Btw, first time running it - I had a crash DatabaseContainer line 255 (the assertion failure).

[martinmitrevski]

looks good

[laevandus]

Nice!

[nuno-vieira]

Still some work to be done, a lot of UI is missing. Given that some of the missing features are part of the public component, I'm not sure we should merge it. I would prefer a base branch instead. Merging without the poll creation flow is fine, but not with an incomplete poll attachment view. Btw, first time running it - I had a crash DatabaseContainer line 255 (the assertion failure).

Okay, I will do a chain of PRs then 👍

The crash is a known one and it is already fixed on develop

[ipavlidakis]

I would prefer that to be more generic. One method where you can pass either a view or a layout guide

[nuno-vieira]

Yeah I wanted to make this API a little more beginner friendly, but maybe better to stick to Apple's API 🤔 I'll see if I can improve this 👍

[nuno-vieira]

I'm going to put this on Hold for now. Let's revisit this on the final PR 👍

[nuno-vieira]

This would probably look like this:

func embed(in view: UIView, margins: UILayoutGuide) -> UIStackView

which would be consistent with the existing:

func embed(in view: UIView, insets: NSDirectionalEdgeInsets) -> UIStackView

WDYT?

The only con is that using it is a bit more code, but nothing special:

self.directionalLayoutMargins = .init(top: 8, leading: 32, bottom: 8, trailing: 32)
VContainer {
 ....
}.embed(in: self, margins: layoutMarginsGuide)

[martinmitrevski]

LGTM ✅ Great docs and examples

[martinmitrevski]

We are talking here about the Brazilian Ronaldo R9, right? If that's the case, totally agree 😃

[martinmitrevski]

Nice docs, good examples too 👍

[sonarqubecloud]

Quality Gate passed

Issues
150 New issues
0 Accepted issues

Measures
0 Security Hotspots
84.5% Coverage on New Code
0.1% Duplication on New Code

See analysis details on SonarCloud