feat: add channels [WPB-15758] #18852

e-maad · 2025-03-12T02:44:30Z

WPB-15758 [Web] Start a channel

Description

Added conversation creation flow

Checklist

mentions the JIRA issue in the PR name (Ex. [WPB-XXXX])
PR has been self reviewed by the author;
Hard-to-understand areas of the code have been commented;
If it is a core feature, unit tests have been added;

* feat: add channel avatars [WPB-15756] * PR feedback changes

…#18857)

V-Gira · 2025-03-28T10:28:57Z

src/script/components/ConversationListCell/ConversationListCell.tsx

+          {isChannel &&
+            (isChannelsEnabled ? (


There's an edgecase we need to worry about where channels exist but are not enabled on the client?

Yes, including both sides (BE and FE) feature flags.

V-Gira · 2025-03-28T17:04:55Z

src/script/components/Avatar/ChannelAvatar.styles.ts

@@ -0,0 +1,55 @@
+/*


V-Gira · 2025-03-28T17:08:15Z

src/script/components/Avatar/ChannelAvatar.tsx

@@ -0,0 +1,49 @@
+/*


V-Gira · 2025-03-28T17:08:57Z

src/script/components/Avatar/GroupAvatar.tsx

@@ -17,8 +17,6 @@
 *


V-Gira · 2025-03-28T17:09:38Z

src/script/components/ConversationListCell/ConversationListCell.tsx

@@ -19,16 +19,19 @@



V-Gira · 2025-03-28T17:10:07Z

src/script/components/Conversation/Conversation.tsx

@@ -439,7 +439,7 @@ export const Conversation = ({
        if (conversationEntity.is1to1()) {


V-Gira · 2025-03-28T17:12:39Z

...cript/components/Modals/CreateConversation/ConversationType/ConfirmConversationTypeModal.tsx

@@ -0,0 +1,89 @@
+/*


V-Gira · 2025-03-28T17:17:05Z

src/script/components/Modals/CreateConversation/ConversationType/ConversationFeature.tsx

@@ -0,0 +1,72 @@
+/*


e-maad · 2025-04-02T07:22:10Z

server/config/env.ts

+  /** Feature to enable channels */
+  FEATURE_ENABLE_CHANNELS: string;
+
+  /** Feature to enable channels history sharing */
+  FEATURE_ENABLE_CHANNELS_HISTORY_SHARING: string;
+
+  /** Feature to enable channels public channels */
+  FEATURE_ENABLE_PUBLIC_CHANNELS: string;
+


Different feature flag for each feature to follow the rollout strategy.

e-maad · 2025-04-02T07:29:38Z

src/script/entity/Conversation.ts

+    this.isGroupOrChannel = ko.pureComputed(() => {
+      return this.isGroup() || this.isChannel();
+    });
+


The whole app was designed to support group conversations before, Channel is also a group conversation.
But now we treat Channels separately, we introduced another property isGroupOrChannel to refer all types of group conversations.

e-maad · 2025-04-02T07:32:39Z

src/script/components/Modals/CreateConversation/hooks/useCreateConversationModal.ts

+import {create} from 'zustand';
+
+import {User} from 'src/script/entity/User';
+
+import {
+  ConversationAccess,
+  ConversationModerator,
+  ChatHistory,
+  ConversationType,
+  ConversationCreationStep,
+  HistorySharingUnit,
+} from '../types';
+
+/**
+ * Type representing the state of the Create Conversation Modal.
+ */
+type CreateConversationModalState = {
+  isOpen?: boolean;
+  conversationName: string;
+  access: ConversationAccess;
+  moderator: ConversationModerator;
+  chatHistory: ChatHistory;
+  conversationType: ConversationType;
+  conversationCreationStep: ConversationCreationStep;
+  error: string;
+  isReadReceiptsEnabled: boolean;
+  isGuestsEnabled: boolean;
+  selectedContacts: User[];
+  historySharingQuantity: number;
+  historySharingUnit: HistorySharingUnit;
+  isCustomHistoryModalOpen: boolean;
+  isConfirmConversationTypeModalOpen: boolean;
+  isCreateTeamModalOpen: boolean;
+  isUpgradeTeamModalOpen: boolean;
+  isServicesEnabled: boolean;
+
+  showModal: () => void;
+  hideModal: () => void;
+  setConversationName: (name: string) => void;
+  setAccess: (access: ConversationAccess) => void;
+  setModerator: (access: ConversationModerator) => void;
+  setChatHistory: (history: ChatHistory) => void;
+  setConversationType: (type: ConversationType) => void;
+  setConversationCreationStep: (step: ConversationCreationStep) => void;
+  gotoNextStep: () => void;
+  gotoPreviousStep: () => void;
+  setError: (error: string) => void;
+  setIsReadReceiptsEnabled: (isReadReceiptsEnabled: boolean) => void;
+  setIsGuestsEnabled: (isGuestsEnabled: boolean) => void;
+  setSelectedContacts: (contacts: User[]) => void;
+  setHistorySharingQuantity: (quantity: number) => void;
+  setHistorySharingUnit: (unit: HistorySharingUnit) => void;
+  setIsCustomHistoryModalOpen: (isOpen: boolean) => void;
+  setIsConfirmConversationTypeModalOpen: (isOpen: boolean) => void;
+  setIsCreateTeamModalOpen: (isOpen: boolean) => void;
+  setIsUpgradeTeamModalOpen: (isOpen: boolean) => void;
+  gotoLastStep: () => void;
+  setIsServicesEnabled: (isServicesEnabled: boolean) => void;
+};
+
+/**
+ * Initial state of the Create Conversation Modal.
+ */
+const initialState = {
+  isOpen: false,
+  conversationName: '',
+  access: ConversationAccess.Private,
+  moderator: ConversationModerator.AdminsAndMembers,
+  chatHistory: ChatHistory.Off,
+  conversationType: ConversationType.Channel,
+  conversationCreationStep: ConversationCreationStep.ConversationDetails,
+  error: '',
+  isReadReceiptsEnabled: true,
+  isServicesEnabled: true,
+  isGuestsEnabled: true,
+  selectedContacts: [] as User[],
+  historySharingUnit: HistorySharingUnit.Days,
+  historySharingQuantity: 1,
+  isCustomHistoryModalOpen: false,
+  isConfirmConversationTypeModalOpen: false,
+  isCreateTeamModalOpen: false,
+  isUpgradeTeamModalOpen: false,
+};
+
+/**
+ * Hook to manage the state of the Create Conversation Modal.
+ */
+export const useCreateConversationModal = create<CreateConversationModalState>(set => ({
+  ...initialState,
+  showModal: () => set(state => ({...state, isOpen: true})),
+  hideModal: () => set({...initialState}),
+  setConversationName: (name: string) => set({conversationName: name}),
+  setAccess: (access: ConversationAccess) =>
+    set(state => ({
+      access,
+      manager: access === ConversationAccess.Public ? ConversationModerator.AdminsAndMembers : state.moderator,
+    })),
+  setModerator: (moderator: ConversationModerator) => set({moderator}),
+  setChatHistory: (history?: ChatHistory) => set({chatHistory: history || ChatHistory.Off}),
+  setConversationType: (type: ConversationType) => set({conversationType: type}),
+  setConversationCreationStep: (step: ConversationCreationStep) => set({conversationCreationStep: step}),
+  gotoNextStep: () => set(state => ({...state, conversationCreationStep: state.conversationCreationStep + 1})),
+  gotoLastStep: () => set({conversationCreationStep: ConversationCreationStep.ParticipantsSelection}),
+  gotoPreviousStep: () => set(state => ({...state, conversationCreationStep: state.conversationCreationStep - 1})),
+  setError: (error: string) => set({error}),
+  setIsReadReceiptsEnabled: (isReadReceiptsEnabled: boolean) => set({isReadReceiptsEnabled}),
+  setIsGuestsEnabled: (isGuestsEnabled: boolean) => set({isGuestsEnabled}),
+  setSelectedContacts: (contacts: User[]) => set({selectedContacts: contacts}),
+  setHistorySharingQuantity: (quantity: number) => set({historySharingQuantity: quantity}),
+  setHistorySharingUnit: (unit: HistorySharingUnit) => set({historySharingUnit: unit}),
+  setIsCustomHistoryModalOpen: (isOpen: boolean) => set({isCustomHistoryModalOpen: isOpen}),
+  setIsConfirmConversationTypeModalOpen: (isOpen: boolean) => set({isConfirmConversationTypeModalOpen: isOpen}),
+  setIsCreateTeamModalOpen: (isOpen: boolean) => set({isCreateTeamModalOpen: isOpen}),
+  setIsUpgradeTeamModalOpen: (isOpen: boolean) => set({isUpgradeTeamModalOpen: isOpen}),
+  setIsServicesEnabled: (isServicesEnabled: boolean) => set({isServicesEnabled}),
+}));


This is an encapsulated state of CreateConversationModal, including all the inputs taken during the flow.

src/script/components/Modals/CreateConversation/CreateConversation.styles.ts

...als/CreateConversation/CreateConversationSteps/ConversationDetails/ConversationNameInput.tsx

...ipt/components/Modals/CreateConversation/CreateConversationSteps/CreateConversationSteps.tsx

src/script/components/Modals/CreateConversation/CreateConversationSubmit.tsx

src/script/components/Modals/CreateConversation/hooks/useCreateConversation.ts

olafsulich · 2025-04-02T07:32:43Z

src/script/components/Modals/CreateConversation/hooks/useCreateConversation.ts

+    return access;
+  };
+
+  const onSubmit = async (


suggestion: there's a lot logic in here, I would consider splitting it to multiple functions

I just moved this functionality, will look into it.

Please have a look.

sonarqubecloud · 2025-04-02T14:48:38Z

Quality Gate passed

Issues
38 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

feat: add conversation creation flow [WPB-15758]

8289b1d

otto-the-bot added type: feature / request ✨ 👕 size: XXL labels Mar 12, 2025

e-maad and others added 7 commits March 12, 2025 15:24

Merge branch 'dev' into feat/channels

8e0278b

feat: add channel avatars [WPB-15756] (#18855)

916dcb1

* feat: add channel avatars [WPB-15756] * PR feedback changes

feat: add access and conversation history settings option [WPB-15764]

079daf8

fixed custom field

ca4e606

feat: add access and conversation history settings option [WPB-15764] (…

384e9e1

…#18857)

Finalized changes

9eee0db

Merge branch 'feat/channel-ui-and-api-int' into feat/channels

9c9efd2

e-maad changed the title ~~feat: add conversation creation flow [WPB-15758]~~ feat: add channels [WPB-15758] Mar 25, 2025

Merge branch 'dev' into feat/channels

f08d060

otto-the-bot added the comp: calling label Mar 25, 2025

added links for sales banner

e9f25bd

e-maad marked this pull request as ready for review March 26, 2025 11:29

e-maad requested review from a team and otto-the-bot as code owners March 26, 2025 11:29

e-maad and others added 8 commits March 26, 2025 12:36

Merge branch 'dev' into feat/channels

38461b9

fixed yarn.lock file

cbbcb5c

fixed lint and tests

13ebfbd

Merge branch 'dev' into feat/channels

9726df0

Merge branch 'dev' into feat/channels

1644a57

fixed sonar cloud issue

9678fbf

Merge branch 'dev' into feat/channels

c56659e

fixed icon size

246daf6