Skip to content

feat: Room Invited State #6857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 18 commits into from
Dec 23, 2025
Merged

feat: Room Invited State #6857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
dd395dd
feat: added status and inviter to Subscriptions schema
aleksandernsilva Dec 18, 2025
9bf3b5b
feat: added subscriptions migrations for status and inviter
aleksandernsilva Dec 18, 2025
6d1891c
chore: updated subscription type
aleksandernsilva Dec 18, 2025
4789b85
chore: updated merge to consider invite props
aleksandernsilva Dec 18, 2025
ced347c
feat: added status and inviter to schema
aleksandernsilva Dec 18, 2025
1928efc
feat: Added invited state to rooms
aleksandernsilva Dec 18, 2025
7ea0ad1
action: organized translations
aleksandernsilva Dec 18, 2025
2165314
refactor: move logic out of InvitedRoom
aleksandernsilva Dec 18, 2025
622dbde
chore: disable room header for invited rooms
aleksandernsilva Dec 18, 2025
20802e7
refactor: switched text to view
aleksandernsilva Dec 18, 2025
c9f7a5e
refactor: moved isInviteSubscription to methods folder
aleksandernsilva Dec 22, 2025
0283fe7
Merge branch 'develop' into feat/invited-room-state
diegolmello Dec 23, 2025
2f3bc23
Fix chip width
diegolmello Dec 23, 2025
b384e01
feat: added invitation badge to room item
aleksandernsilva Dec 23, 2025
a36ea13
action: organized translations
aleksandernsilva Dec 23, 2025
a61df23
Merge branch 'feat/invited-room-state' of github.com:RocketChat/Rocke…
diegolmello Dec 23, 2025
54b7a6a
Fix condensed and add stories
diegolmello Dec 23, 2025
ea3312c
Add missing translations
diegolmello Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/containers/Chip/Chip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export default {
title: 'Chip'
};

const ChipWrapped = ({ avatar, text, onPress, testID, style }: IChip) => (
const ChipWrapped = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => (
<View style={styles.container}>
<Chip avatar={avatar} text={text} onPress={onPress} testID={testID} style={style} />
<Chip avatar={avatar} text={text} onPress={onPress} testID={testID} style={style} fullWidth={fullWidth} />
</View>
);

Expand All @@ -30,3 +30,5 @@ export const ChipWithoutAvatar = () => <ChipWrapped text={'Without Avatar'} onPr
export const ChipWithoutIcon = () => <ChipWrapped avatar='rocket.cat' text='Without Icon' />;

export const ChipWithoutAvatarAndIcon = () => <ChipWrapped text='Without Avatar and Icon' />;

export const ChipFullWidth = () => <ChipWrapped text='Full Width Text With Long Text That Should Be Wrapped' fullWidth />;
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Minor discrepancy: Story text mentions "wrapped" but text actually truncates.

The story text says "Should Be Wrapped" but the Chip component uses numberOfLines={1}, which causes text to truncate with an ellipsis rather than wrap to multiple lines. Consider updating the story text to better reflect the actual behavior, e.g., "Full Width Chip With Long Text That Truncates".

🔎 Suggested text update 
-export const ChipFullWidth = () => <ChipWrapped text='Full Width Text With Long Text That Should Be Wrapped' fullWidth />;
+export const ChipFullWidth = () => <ChipWrapped text='Full Width Chip With Long Text That Truncates' fullWidth />;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const ChipFullWidth = () => <ChipWrapped text='Full Width Text With Long Text That Should Be Wrapped' fullWidth />;
export const ChipFullWidth = () => <ChipWrapped text='Full Width Chip With Long Text That Truncates' fullWidth />;
🤖 Prompt for AI Agents 
In app/containers/Chip/Chip.stories.tsx around line 34, the story label claims
the text "Should Be Wrapped" but the Chip uses numberOfLines={1} causing
truncation; update the story text to accurately describe behavior (e.g., "Full
Width Chip With Long Text That Truncates") or remove the "wrapped" wording so
the story matches the component's single-line truncation behavior.

163 changes: 143 additions & 20 deletions app/containers/Chip/__snapshots__/Chip.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,108 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = `
<View
style={
{
"alignItems": "flex-start",
"flex": 1,
"padding": 16,
}
}
>
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
[
{
"borderRadius": 4,
"justifyContent": "center",
"marginRight": 8,
"maxWidth": 192,
"paddingHorizontal": 8,
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": undefined,
},
undefined,
]
}
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
>
<View
style={
[
{
"marginRight": 8,
"maxWidth": 120,
},
{
"maxWidth": undefined,
},
]
}
>
<Text
numberOfLines={1}
style={
[
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "500",
"textAlign": "left",
},
{
"color": "#2F343D",
},
]
}
>
Full Width Text With Long Text That Should Be Wrapped
</Text>
</View>
</View>
</View>
</View>
`;

exports[`Story Snapshots: ChipText should match snapshot 1`] = `
<View
style={
Expand Down Expand Up @@ -51,6 +154,7 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": 192,
},
undefined,
]
Expand Down Expand Up @@ -121,10 +225,13 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
</View>
<View
style={
{
"marginRight": 8,
"maxWidth": 120,
}
[
{
"marginRight": 8,
"maxWidth": 120,
},
undefined,
]
}
>
<Text
Expand Down Expand Up @@ -229,6 +336,7 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": 192,
},
undefined,
]
Expand Down Expand Up @@ -299,10 +407,13 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
</View>
<View
style={
{
"marginRight": 8,
"maxWidth": 120,
}
[
{
"marginRight": 8,
"maxWidth": 120,
},
undefined,
]
}
>
<Text
Expand Down Expand Up @@ -407,6 +518,7 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = `
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": 192,
},
undefined,
]
Expand All @@ -422,10 +534,13 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = `
>
<View
style={
{
"marginRight": 8,
"maxWidth": 120,
}
[
{
"marginRight": 8,
"maxWidth": 120,
},
undefined,
]
}
>
<Text
Expand Down Expand Up @@ -530,6 +645,7 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = `
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": 192,
},
undefined,
]
Expand All @@ -545,10 +661,13 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = `
>
<View
style={
{
"marginRight": 8,
"maxWidth": 120,
}
[
{
"marginRight": 8,
"maxWidth": 120,
},
undefined,
]
}
>
<Text
Expand Down Expand Up @@ -627,6 +746,7 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
},
{
"backgroundColor": "#F2F3F5",
"maxWidth": 192,
},
undefined,
]
Expand Down Expand Up @@ -697,10 +817,13 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
</View>
<View
style={
{
"marginRight": 8,
"maxWidth": 120,
}
[
{
"marginRight": 8,
"maxWidth": 120,
},
undefined,
]
}
>
<Text
Expand Down
8 changes: 5 additions & 3 deletions app/containers/Chip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@ export interface IChip {
onPress?: Function;
testID?: string;
style?: StyleProp<ViewStyle>;
fullWidth?: boolean;
}

const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => {
const { colors } = useTheme();

return (
Expand All @@ -49,7 +50,8 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
style={({ pressed }) => [
styles.pressable,
{
backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover,
maxWidth: fullWidth ? undefined : styles.pressable.maxWidth
},
style
]}
Expand All @@ -60,7 +62,7 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
}}>
<View style={styles.container}>
{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
<View style={styles.textContainer}>
<View style={[styles.textContainer, fullWidth && { maxWidth: undefined }]}>
<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
{text}
</Text>
Expand Down
7 changes: 7 additions & 0 deletions app/containers/RoomItem/RoomItem.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,3 +189,10 @@ export const OmnichannelIcon = () => (
<RoomItem type='l' sourceType={{ type: 'other' }} />
</>
);

export const InvitedRoom = () => (
<>
<RoomItem isInvited />
<RoomItem isInvited displayMode={DisplayMode.Condensed} />
</>
);
24 changes: 23 additions & 1 deletion app/containers/RoomItem/RoomItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { type IRoomItemProps } from './interfaces';
import { formatLastMessage } from '../../lib/methods/formatLastMessage';
import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
import { CustomIcon } from '../CustomIcon';
import { useTheme } from '../../theme';

const RoomItem = ({
rid,
Expand Down Expand Up @@ -53,10 +55,12 @@ const RoomItem = ({
displayMode,
sourceType,
hideMentionStatus,
accessibilityDate
accessibilityDate,
isInvited
}: IRoomItemProps) => {
'use memo';

const { colors } = useTheme();
const { isLargeFontScale } = useResponsiveLayout();
const memoizedMessage = useMemo(
() => formatLastMessage({ lastMessage, username, useRealName, showLastMessage, alert, type }),
Expand Down Expand Up @@ -137,6 +141,15 @@ const RoomItem = ({
hideMentionStatus={hideMentionStatus}
hideUnreadStatus={hideUnreadStatus}
/>
{isInvited ? (
<CustomIcon
size={24}
name='mail'
role='status'
accessibilityLabel={I18n.t('Invited')}
color={colors.badgeBackgroundLevel2}
/>
) : null}
</View>
{isLargeFontScale ? <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} /> : null}
</>
Expand All @@ -156,6 +169,15 @@ const RoomItem = ({
/>
<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}
{isInvited ? (
<CustomIcon
size={24}
name='mail'
role='status'
accessibilityLabel={I18n.t('Invited')}
color={colors.badgeBackgroundLevel2}
/>
) : null}

<View style={styles.wrapUpdatedAndBadge}>
{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
Expand Down
Loading
Loading