use dynamic limit in UI; improve custom post's tooltip styling (#85)

mattermost · May 26, 2022 · 69adc30 · 69adc30
1 parent 090122e
commit 69adc30
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/server/cloud_limits.go b/server/cloud_limits.go
@@ -72,7 +72,8 @@ func (p *Plugin) handleCloudNotifyAdmins(w http.ResponseWriter, r *http.Request)
 	postType := "custom_cloud_trial_req"
 	message := fmt.Sprintf("@%s requested access to a free trial for Calls.", author.Username)
 	title := "Make calls in channels"
-	text := "Start a call in a channel. You can include up to 8 participants per call." + separator + "[Upgrade now](https://customers.mattermost.com)."
+	text := fmt.Sprintf("Start a call in a channel. You can include up to %d participants per call.%s[Upgrade now](https://customers.mattermost.com).",
+		cloudMaxParticipants, separator)
 
 	attachments := []*model.SlackAttachment{
 		{

diff --git a/webapp/src/components/channel_header_button/component.tsx b/webapp/src/components/channel_header_button/component.tsx
@@ -13,6 +13,7 @@ interface Props {
     hasCall: boolean,
     isCloudFeatureRestricted: boolean,
     isCloudLimitRestricted: boolean,
+    cloudMaxParticipants: number,
 }
 
 const ChannelHeaderButton = ({
@@ -21,6 +22,7 @@ const ChannelHeaderButton = ({
     hasCall,
     isCloudFeatureRestricted,
     isCloudLimitRestricted,
+    cloudMaxParticipants,
 }: Props) => {
     if (!show) {
         return null;
@@ -70,7 +72,7 @@ const ChannelHeaderButton = ({
                 overlay={
                     <Tooltip id='tooltip-limit-header'>
                         <Header>
-                            {'There\'s a limit of 8 participants per call.'}
+                            {`There's a limit of ${cloudMaxParticipants} participants per call.`}
                         </Header>
                         <SubHeader>
                             {'This is because calls is currently in beta. We’re working to remove this limit soon.'}

diff --git a/webapp/src/components/channel_header_button/index.ts b/webapp/src/components/channel_header_button/index.ts
@@ -9,6 +9,7 @@ import {
     isVoiceEnabled,
     isCloudFeatureRestricted,
     isCloudLimitRestricted,
+    cloudMaxParticipants,
 } from 'src/selectors';
 
 import ChannelHeaderButton from './component';
@@ -19,6 +20,7 @@ const mapStateToProps = (state: GlobalState) => ({
     hasCall: voiceConnectedUsers(state).length > 0,
     isCloudFeatureRestricted: isCloudFeatureRestricted(state),
     isCloudLimitRestricted: isCloudLimitRestricted(state),
+    cloudMaxParticipants: cloudMaxParticipants(state),
 });
 
 export default connect(mapStateToProps)(ChannelHeaderButton);
diff --git a/webapp/src/components/channel_header_dropdown_button/component.tsx b/webapp/src/components/channel_header_dropdown_button/component.tsx
@@ -13,6 +13,7 @@ interface Props {
     hasCall: boolean,
     isCloudFeatureRestricted: boolean,
     isCloudLimitRestricted: boolean,
+    cloudMaxParticipants: number,
 }
 
 const ChannelHeaderDropdownButton = ({
@@ -21,6 +22,7 @@ const ChannelHeaderDropdownButton = ({
     hasCall,
     isCloudFeatureRestricted,
     isCloudLimitRestricted,
+    cloudMaxParticipants,
 }: Props) => {
     if (!show) {
         return null;
@@ -76,7 +78,7 @@ const ChannelHeaderDropdownButton = ({
                 overlay={
                     <Tooltip id='tooltip-limit-header'>
                         <Header>
-                            {'There\'s a limit of 8 participants per call.'}
+                            {`There's a limit of ${cloudMaxParticipants} participants per call.`}
                         </Header>
                         <SubHeader>
                             {'This is because calls is currently in beta. We’re working to remove this limit soon.'}

diff --git a/webapp/src/components/channel_header_dropdown_button/index.ts b/webapp/src/components/channel_header_dropdown_button/index.ts
@@ -9,6 +9,7 @@ import {
     isVoiceEnabled,
     isCloudFeatureRestricted,
     isCloudLimitRestricted,
+    cloudMaxParticipants,
 } from 'src/selectors';
 
 import ChannelHeaderDropdownButton from './component';
@@ -19,6 +20,7 @@ const mapStateToProps = (state: GlobalState) => ({
     hasCall: voiceConnectedUsers(state).length > 0,
     isCloudFeatureRestricted: isCloudFeatureRestricted(state),
     isCloudLimitRestricted: isCloudLimitRestricted(state),
+    cloudMaxParticipants: cloudMaxParticipants(state),
 });
 
 export default connect(mapStateToProps)(ChannelHeaderDropdownButton);
diff --git a/webapp/src/components/custom_post_types/post_type/component.tsx b/webapp/src/components/custom_post_types/post_type/component.tsx
@@ -11,6 +11,7 @@ import ActiveCallIcon from 'src/components/icons/active_call_icon';
 import CallIcon from 'src/components/icons/call_icon';
 import LeaveCallIcon from 'src/components/icons/leave_call_icon';
 import ConnectedProfiles from 'src/components/connected_profiles';
+import {Header, SubHeader} from 'src/components/shared';
 
 interface Props {
     post: Post,
@@ -73,8 +74,12 @@ const PostType = ({
                 placement='top'
                 overlay={
                     <Tooltip id='tooltip-limit'>
-                        {'Sorry, participants per call are currently limited to 8.'}
-                        <p>{'This is because Calls is in the Beta phase. We’re working to remove this limit soon.'}</p>
+                        <Header>
+                            {`Sorry, participants per call are currently limited to ${cloudMaxParticipants}.`}
+                        </Header>
+                        <SubHeader>
+                            {'This is because Calls is in the Beta phase. We’re working to remove this limit soon.'}
+                        </SubHeader>
                     </Tooltip>
                 }
             >