- {renderBothDirections(
+ {renderOneInBothDirections(
createProps({
conversationColor: color,
text: `Here is a preview of the chat color: ${color}. The color is visible to only you.`,
@@ -2897,18 +3025,21 @@ export const CollapsingTextOnlyGroupMessages = (): React.JSX.Element => {
createProps({
author,
conversationType: 'group',
+ contactNameColor: '100',
text: 'One',
timestamp: Date.now() - 2 * MINUTE,
}),
createProps({
author,
conversationType: 'group',
+ contactNameColor: '100',
text: 'Two',
timestamp: Date.now() - MINUTE,
}),
createProps({
author,
conversationType: 'group',
+ contactNameColor: '100',
text: 'Three',
}),
]);
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx
index da45a0cc7a..48a9e0ef48 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.dom.stories.tsx
@@ -18,6 +18,8 @@ import { ThemeType } from '../../../types/Util.std.js';
import { DurationInSeconds } from '../../../util/durations/index.std.js';
import { NavTab } from '../../../types/Nav.std.js';
import { getFakeCallHistoryGroup } from '../../../test-helpers/getFakeCallHistoryGroup.std.js';
+import { ContactNameColors } from '../../../types/Colors.std.js';
+import { isNotNil } from '../../../util/isNotNil.std.js';
const { times } = lodash;
@@ -41,97 +43,118 @@ const allCandidateContacts = times(10, () => getDefaultConversation());
const createProps = (
hasGroupLink = false,
expireTimer?: DurationInSeconds
-): Props => ({
- acceptConversation: action('acceptConversation'),
- addMembersToGroup: async () => {
- action('addMembersToGroup');
- },
- areWeASubscriber: false,
- blockConversation: action('blockConversation'),
- canEditGroupInfo: false,
- canAddNewMembers: false,
- conversation: expireTimer
- ? {
- ...conversation,
- expireTimer,
- }
- : conversation,
- hasActiveCall: false,
- hasGroupLink,
- getPreferredBadge: () => undefined,
- getProfilesForConversation: action('getProfilesForConversation'),
- groupsInCommon: [],
- i18n,
- isAdmin: false,
- isGroup: true,
- isSignalConversation: false,
- leaveGroup: action('leaveGroup'),
- hasMedia: true,
- memberships: times(32, i => ({
+): Props => {
+ const memberships = times(32, i => ({
isAdmin: i === 1,
+ labelEmoji: i % 6 === 0 ? '🟢' : undefined,
+ labelString: i % 3 === 0 ? `Task Wrangler ${i}` : undefined,
member: getDefaultConversation({
isMe: i === 2,
}),
- })),
- maxGroupSize: 1001,
- maxRecommendedGroupSize: 151,
- pendingApprovalMemberships: times(8, () => ({
- member: getDefaultConversation(),
- })),
- pendingMemberships: times(5, () => ({
- metadata: {},
- member: getDefaultConversation(),
- })),
- selectedNavTab: NavTab.Chats,
- setDisappearingMessages: action('setDisappearingMessages'),
- showContactModal: action('showContactModal'),
- pushPanelForConversation: action('pushPanelForConversation'),
- showConversation: action('showConversation'),
- startAvatarDownload: action('startAvatarDownload'),
- updateGroupAttributes: async () => {
- action('updateGroupAttributes')();
- },
- deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
- replaceAvatar: action('replaceAvatar'),
- saveAvatarToDisk: action('saveAvatarToDisk'),
- setMuteExpiration: action('setMuteExpiration'),
- userAvatarData: [],
- toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
- toggleAboutContactModal: action('toggleAboutContactModal'),
- toggleAddUserToAnotherGroupModal: action('toggleAddUserToAnotherGroup'),
- onDeleteNicknameAndNote: action('onDeleteNicknameAndNote'),
- onOpenEditNicknameAndNoteModal: action('onOpenEditNicknameAndNoteModal'),
- onOutgoingAudioCallInConversation: action(
- 'onOutgoingAudioCallInConversation'
- ),
- onOutgoingVideoCallInConversation: action(
- 'onOutgoingVideoCallInConversation'
- ),
- searchInConversation: action('searchInConversation'),
- theme: ThemeType.light,
- renderChooseGroupMembersModal: props => {
- return (
-
- );
- },
- renderConfirmAdditionsModal: props => {
- return (
-
- );
- },
-});
+ }));
+ const memberColors = new Map
(
+ memberships
+ .map((membership, i): [string, string] | null => {
+ const { serviceId } = membership.member;
+
+ if (!serviceId) {
+ return null;
+ }
+
+ return [serviceId.toString(), ContactNameColors[i]];
+ })
+ .filter(isNotNil)
+ );
+
+ return {
+ acceptConversation: action('acceptConversation'),
+ addMembersToGroup: async () => {
+ action('addMembersToGroup');
+ },
+ areWeASubscriber: false,
+ blockConversation: action('blockConversation'),
+ canEditGroupInfo: false,
+ canAddNewMembers: false,
+ conversation: expireTimer
+ ? {
+ ...conversation,
+ expireTimer,
+ }
+ : conversation,
+ hasActiveCall: false,
+ hasGroupLink,
+ getPreferredBadge: () => undefined,
+ getProfilesForConversation: action('getProfilesForConversation'),
+ groupsInCommon: [],
+ i18n,
+ isAdmin: false,
+ isEditMemberLabelEnabled: true,
+ isGroup: true,
+ isSignalConversation: false,
+ leaveGroup: action('leaveGroup'),
+ hasMedia: true,
+ memberships,
+ memberColors,
+ maxGroupSize: 1001,
+ maxRecommendedGroupSize: 151,
+ pendingApprovalMemberships: times(8, () => ({
+ member: getDefaultConversation(),
+ })),
+ pendingMemberships: times(5, () => ({
+ metadata: {},
+ member: getDefaultConversation(),
+ })),
+ selectedNavTab: NavTab.Chats,
+ setDisappearingMessages: action('setDisappearingMessages'),
+ showContactModal: action('showContactModal'),
+ pushPanelForConversation: action('pushPanelForConversation'),
+ showConversation: action('showConversation'),
+ startAvatarDownload: action('startAvatarDownload'),
+ updateGroupAttributes: async () => {
+ action('updateGroupAttributes')();
+ },
+ deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
+ replaceAvatar: action('replaceAvatar'),
+ saveAvatarToDisk: action('saveAvatarToDisk'),
+ setMuteExpiration: action('setMuteExpiration'),
+ userAvatarData: [],
+ toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
+ toggleAboutContactModal: action('toggleAboutContactModal'),
+ toggleAddUserToAnotherGroupModal: action('toggleAddUserToAnotherGroup'),
+ onDeleteNicknameAndNote: action('onDeleteNicknameAndNote'),
+ onOpenEditNicknameAndNoteModal: action('onOpenEditNicknameAndNoteModal'),
+ onOutgoingAudioCallInConversation: action(
+ 'onOutgoingAudioCallInConversation'
+ ),
+ onOutgoingVideoCallInConversation: action(
+ 'onOutgoingVideoCallInConversation'
+ ),
+ searchInConversation: action('searchInConversation'),
+ theme: ThemeType.light,
+ renderChooseGroupMembersModal: props => {
+ return (
+
+ );
+ },
+ renderConfirmAdditionsModal: props => {
+ return (
+
+ );
+ },
+ };
+};
export function Basic(): React.JSX.Element {
const props = createProps();
@@ -170,6 +193,8 @@ export function AsLastAdmin(): React.JSX.Element {
isAdmin
memberships={times(32, i => ({
isAdmin: i === 2,
+ labelEmoji: i % 6 === 0 ? '🟢' : undefined,
+ labelString: i % 3 === 0 ? `Last Admin ${i}` : undefined,
member: getDefaultConversation({
isMe: i === 2,
}),
@@ -188,6 +213,8 @@ export function AsOnlyAdmin(): React.JSX.Element {
memberships={[
{
isAdmin: true,
+ labelEmoji: undefined,
+ labelString: undefined,
member: getDefaultConversation({
isMe: true,
}),
@@ -203,6 +230,18 @@ export function GroupEditable(): React.JSX.Element {
return ;
}
+export function GroupEditableEditLabelDisabled(): React.JSX.Element {
+ const props = createProps();
+
+ return (
+
+ );
+}
+
export function GroupEditableWithCustomDisappearingTimeout(): React.JSX.Element {
const props = createProps(false, DurationInSeconds.fromDays(3));
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx b/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx
index 1bf68446b8..14fdb9a746 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.dom.tsx
@@ -9,6 +9,7 @@ import type {
ConversationType,
PushPanelForConversationActionType,
ShowConversationType,
+ UpdateGroupAttributesType,
} from '../../../state/ducks/conversations.preload.js';
import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges.preload.js';
import type { SmartChooseGroupMembersModalPropsType } from '../../../state/smart/ChooseGroupMembersModal.preload.js';
@@ -63,6 +64,7 @@ import {
getTooltipContent,
} from '../InAnotherCallTooltip.dom.js';
import { BadgeSustainerInstructionsDialog } from '../../BadgeSustainerInstructionsDialog.dom.js';
+import type { ContactModalStateType } from '../../../state/ducks/globalModals.preload.js';
enum ModalState {
AddingGroupMembers,
@@ -88,12 +90,14 @@ export type StateProps = {
hasActiveCall: boolean;
i18n: LocalizerType;
isAdmin: boolean;
+ isEditMemberLabelEnabled: boolean;
isGroup: boolean;
isSignalConversation: boolean;
groupsInCommon: ReadonlyArray;
maxGroupSize: number;
maxRecommendedGroupSize: number;
memberships: ReadonlyArray;
+ memberColors: Map;
pendingApprovalMemberships: ReadonlyArray;
pendingAvatarDownload?: boolean;
pendingMemberships: ReadonlyArray;
@@ -136,21 +140,10 @@ type ActionProps = {
setMuteExpiration: (id: string, muteExpiresAt: undefined | number) => unknown;
showContactModal: (contactId: string, conversationId?: string) => void;
showConversation: ShowConversationType;
- toggleAboutContactModal: (contactId: string) => void;
+ toggleAboutContactModal: (options: ContactModalStateType) => void;
toggleAddUserToAnotherGroupModal: (contactId?: string) => void;
toggleSafetyNumberModal: (conversationId: string) => unknown;
- updateGroupAttributes: (
- conversationId: string,
- _: Readonly<{
- avatar?: undefined | Uint8Array;
- description?: string;
- title?: string;
- }>,
- opts: {
- onSuccess?: () => unknown;
- onFailure?: () => unknown;
- }
- ) => unknown;
+ updateGroupAttributes: UpdateGroupAttributesType;
};
export type Props = StateProps & ActionProps;
@@ -188,10 +181,12 @@ export function ConversationDetails({
hasActiveCall,
i18n,
isAdmin,
+ isEditMemberLabelEnabled,
isGroup,
isSignalConversation,
leaveGroup,
memberships,
+ memberColors,
maxGroupSize,
maxRecommendedGroupSize,
onDeleteNicknameAndNote,
@@ -732,6 +727,7 @@ export function ConversationDetails({
getPreferredBadge={getPreferredBadge}
i18n={i18n}
memberships={memberships}
+ memberColors={memberColors}
showContactModal={showContactModal}
startAddingNewMembers={() => {
setModalState(ModalState.AddingGroupMembers);
@@ -759,6 +755,22 @@ export function ConversationDetails({
right={hasGroupLink ? i18n('icu:on') : i18n('icu:off')}
/>
) : null}
+ {canEditGroupInfo && isEditMemberLabelEnabled ? (
+
+ }
+ label={i18n('icu:ConversationDetails--member-label')}
+ onClick={() =>
+ pushPanelForConversation({
+ type: PanelType.GroupMemberLabelEditor,
+ })
+ }
+ />
+ ) : null}
void;
startEditing: (isGroupTitle: boolean) => void;
- toggleAboutContactModal: (contactId: string) => void;
+ toggleAboutContactModal: (options: ContactModalStateType) => void;
theme: ThemeType;
};
@@ -237,7 +238,7 @@ export function ConversationDetailsHeader({
onClick={ev => {
ev.preventDefault();
ev.stopPropagation();
- toggleAboutContactModal(conversation.id);
+ toggleAboutContactModal({ contactId: conversation.id });
}}
className="ConversationDetailsHeader__about-button"
>
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsIcon.dom.tsx b/ts/components/conversation/conversation-details/ConversationDetailsIcon.dom.tsx
index af049c22ae..57c28119cb 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsIcon.dom.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsIcon.dom.tsx
@@ -31,6 +31,7 @@ export enum IconType {
'reset' = 'reset',
'share' = 'share',
'spinner' = 'spinner',
+ 'tag' = 'tag',
'timer' = 'timer',
'trash' = 'trash',
'verify' = 'verify',
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.stories.tsx
index 64e0e36fdd..f652f30044 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.stories.tsx
@@ -12,9 +12,37 @@ import type {
GroupV2Membership,
} from './ConversationDetailsMembershipList.dom.js';
import { ConversationDetailsMembershipList } from './ConversationDetailsMembershipList.dom.js';
+import { ContactNameColors } from '../../../types/Colors.std.js';
const { i18n } = window.SignalContext;
+const createMemberships = (
+ numberOfMemberships = 10
+): Array => {
+ return Array.from(new Array(numberOfMemberships)).map(
+ (_, i): GroupV2Membership => ({
+ isAdmin: i % 4 === 0,
+ labelEmoji: i % 6 === 0 ? '🟢' : undefined,
+ labelString: i % 3 === 0 ? `Task Wrangler ${i}` : undefined,
+ member: getDefaultConversation({
+ isMe: i === 2,
+ }),
+ })
+ );
+};
+
+const getMemberColors = (
+ memberships: Array
+): Map =>
+ new Map(
+ memberships.map((membership, i) => [
+ membership.member.id,
+ ContactNameColors[i],
+ ])
+ );
+
+const defaultMemberships = createMemberships();
+
export default {
title:
'Components/Conversation/ConversationDetails/ConversationDetailsMembershipList',
@@ -24,49 +52,37 @@ export default {
conversationId: '123',
getPreferredBadge: () => undefined,
i18n,
- memberships: [],
+ memberships: defaultMemberships,
+ memberColors: getMemberColors(defaultMemberships),
showContactModal: action('showContactModal'),
startAddingNewMembers: action('startAddingNewMembers'),
theme: ThemeType.light,
},
} satisfies Meta;
-const createMemberships = (
- numberOfMemberships = 10
-): Array => {
- return Array.from(new Array(numberOfMemberships)).map(
- (_, i): GroupV2Membership => ({
- isAdmin: i % 3 === 0,
- member: getDefaultConversation({
- isMe: i === 2,
- }),
- })
- );
-};
-
export function Few(args: Props): React.JSX.Element {
- const memberships = createMemberships(3);
+ const memberships = defaultMemberships.slice(3);
return (
);
}
export function Limit(args: Props): React.JSX.Element {
- const memberships = createMemberships(5);
+ const memberships = defaultMemberships.slice(5);
return (
);
}
export function Limit1(args: Props): React.JSX.Element {
- const memberships = createMemberships(6);
+ const memberships = defaultMemberships.slice(6);
return (
);
}
export function Limit2(args: Props): React.JSX.Element {
- const memberships = createMemberships(7);
+ const memberships = defaultMemberships.slice(7);
return (
);
@@ -74,8 +90,13 @@ export function Limit2(args: Props): React.JSX.Element {
export function Many(args: Props): React.JSX.Element {
const memberships = createMemberships(100);
+ const memberColors = getMemberColors(memberships);
return (
-
+
);
}
@@ -84,12 +105,5 @@ export function None(args: Props): React.JSX.Element {
}
export function CanAddNewMembers(args: Props): React.JSX.Element {
- const memberships = createMemberships(10);
- return (
-
- );
+ return ;
}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx
index 15295c42f1..b5180fb0b7 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx
@@ -16,10 +16,13 @@ import type { ConversationType } from '../../../state/ducks/conversations.preloa
import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges.preload.js';
import { PanelRow } from './PanelRow.dom.js';
import { PanelSection } from './PanelSection.dom.js';
+import { GroupMemberLabel } from '../ContactName.dom.js';
export type GroupV2Membership = {
isAdmin: boolean;
member: ConversationType;
+ labelEmoji: string | undefined;
+ labelString: string | undefined;
};
export type Props = {
@@ -29,6 +32,7 @@ export type Props = {
i18n: LocalizerType;
maxShownMemberCount?: number;
memberships: ReadonlyArray;
+ memberColors: Map;
showContactModal: (contactId: string, conversationId?: string) => void;
startAddingNewMembers?: () => void;
theme: ThemeType;
@@ -79,6 +83,7 @@ export function ConversationDetailsMembershipList({
getPreferredBadge,
i18n,
maxShownMemberCount = 5,
+ memberColors,
memberships,
showContactModal,
startAddingNewMembers,
@@ -109,26 +114,50 @@ export function ConversationDetailsMembershipList({
onClick={() => startAddingNewMembers?.()}
/>
)}
- {sortedMemberships.slice(0, membersToShow).map(({ isAdmin, member }) => (
- showContactModal(member.id, conversationId)}
- icon={
- {
+ const contactNameColor = memberColors.get(member.id);
+
+ return (
+ showContactModal(member.id, conversationId)}
+ icon={
+
+ }
+ label={
+
+
+
+
+ {labelString && contactNameColor && (
+
+
+
+ )}
+
+
+ setEmojiPickerOpen(open)}
+ placement="bottom"
+ onSelectEmoji={data => {
+ const newEmoji = getEmojiVariantByKey(data.variantKey)?.value;
+
+ setLabelEmoji(newEmoji);
+ }}
+ closeOnSelect
+ theme={theme}
+ >
+
+
+ }
+ maxLengthCount={24}
+ maxByteCount={96}
+ moduleClassName="GroupMemberLabelEditor"
+ onChange={value => {
+ if (!value) {
+ setLabelEmoji(undefined);
+ }
+ setLabelString(value);
+ }}
+ ref={undefined}
+ placeholder={i18n(
+ 'icu:ConversationDetails--member-label--placeholder'
+ )}
+ value={labelString}
+ whenToShowRemainingCount={20}
+ />
+
+
+ {i18n('icu:ConversationDetails--member-label--description')}
+
+
+
+
+
{
+ popPanelForConversation();
+ }}
+ >
+ {i18n('icu:cancel')}
+
+
+
{
+ setIsSaving(true);
+ updateGroupMemberLabel(
+ {
+ conversationId: conversation.id,
+ labelEmoji,
+ labelString,
+ },
+ {
+ onSuccess() {
+ setIsSaving(false);
+ popPanelForConversation();
+ },
+ onFailure() {
+ // TODO: DESKTOP-9698
+ },
+ }
+ );
+ }}
+ >
+ {i18n('icu:save')}
+
+
+