MM42267: Add member count in the browse channel modal (#23800)

* add base for calling the endpoint

* add endpoint and handler

* update store and layers

* call the endpoint

* align types

* update app layers

* generate mocks

* complete handler

* finish store query

* add todos

* add ui for member count

* add selector

* add a todo

* add cache layer

* optimize calls in FE

* handle invalidation of the cache

* fix go style

* fix test

* use existing channel layer count

* fix import error

* delete unnecessary code

* write tests for channel cache layer

* fix testname

* fix mocks

* fix cache layer test

* fix a test

* really fix the test

* write more tests for server

* address PR comments

* remove comment

* rename more_channels to browse_channels

* fix style

* update snapshot

* add translations

* Revert "add translations"

This reverts commit 56476a5dabe357703ef02be9a38b3e88f5c8b1e7.

* add only related translations

* address PR review points

* add test

* fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/channel/archived_channels_1_spec.js

@@ -98,7 +98,7 @@ describe('Leave an archived channel', () => {
             cy.get('#showMoreChannels').click();
 
             // # More channels modal opens
-            cy.get('#moreChannelsModal').should('be.visible').within(() => {
+            cy.get('#browseChannelsModal').should('be.visible').within(() => {
                 // # Click on dropdown
                 cy.findByText(channelType.public).should('be.visible').click();
 
@@ -146,7 +146,7 @@ describe('Leave an archived channel', () => {
         cy.get('#showMoreChannels').click();
 
         // # More channels modal opens
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // # Public channel list opens by default
             cy.findByText(channelType.public).should('be.visible').click();
 
@@ -199,7 +199,7 @@ describe('Leave an archived channel', () => {
         cy.get('#showMoreChannels').click();
 
         // # More channels modal opens
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // # Public channels are shown by default
             cy.findByText(channelType.public).should('be.visible').click();
 
@@ -253,7 +253,7 @@ describe('Leave an archived channel', () => {
         cy.get('#showMoreChannels').click();
 
         // # More channels modal opens
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // # Show public channels is visible by default
             cy.findByText(channelType.public).should('be.visible').click();
 
@@ -288,7 +288,7 @@ describe('Leave an archived channel', () => {
         cy.get('#showMoreChannels').click();
 
         // # More channels modal opens and lands on public channels
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             cy.findByText(channelType.public).should('be.visible').click();
 
             // # Go to archived channels

e2e-tests/cypress/tests/integration/channels/channel/browse_channels_spec.js

@@ -48,9 +48,9 @@ describe('Channels', () => {
         });
     });
 
-    it('MM-19337 Verify UI of More channels modal with archived selection', () => {
-        verifyMoreChannelsModalWithArchivedSelection(false, testUser, testTeam);
-        verifyMoreChannelsModalWithArchivedSelection(true, testUser, testTeam);
+    it('MM-19337 Verify UI of Browse channels modal with archived selection', () => {
+        verifyBrowseChannelsModalWithArchivedSelection(false, testUser, testTeam);
+        verifyBrowseChannelsModalWithArchivedSelection(true, testUser, testTeam);
     });
 
     it('MM-19337 Enable users to view archived channels', () => {
@@ -68,7 +68,7 @@ describe('Channels', () => {
         // # Go to LHS and click 'Browse channels'
         cy.uiBrowseOrCreateChannel('Browse channels').click();
 
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // * Dropdown should be visible, defaulting to "Public Channels"
             cy.get('#channelsMoreDropdown').should('be.visible').and('contain', channelType.public).wait(TIMEOUTS.HALF_SEC);
 
@@ -86,7 +86,7 @@ describe('Channels', () => {
         });
 
         // # Verify that the modal is not closed
-        cy.get('#moreChannelsModal').should('exist');
+        cy.get('#browseChannelsModal').should('exist');
         cy.url().should('include', `/${testTeam.name}/channels/${testChannel.name}`);
 
         // # Login as channel admin and go directly to the channel
@@ -111,7 +111,7 @@ describe('Channels', () => {
         // # Go to LHS and click 'Browse channels'
         cy.uiBrowseOrCreateChannel('Browse channels').click();
 
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // # CLick dropdown to open selection
             cy.get('#channelsMoreDropdown').should('be.visible').click().within((el) => {
                 // # Click on archived channels item
@@ -145,6 +145,38 @@ describe('Channels', () => {
         cy.get('#sidebar-left').should('not.contain', testChannel.display_name);
     });
 
+    it('MM-19337 Increase channel member count when user joins a channel', () => {
+        // # Login as new user and go to "/"
+        cy.apiLogin(otherUser);
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        let newChannel;
+        cy.apiCreateChannel(testTeam.id, 'channel-to-leave', 'Channel to leave').then(({channel}) => {
+            newChannel = channel;
+            cy.visit(`/${testTeam.name}/channels/${newChannel.name}`);
+
+            // # Leave the channel
+            cy.uiLeaveChannel();
+
+            // * Verify that we've switched to Town Square
+            cy.url().should('include', '/channels/town-square');
+        });
+
+        // # Go to LHS and click 'Browse channels'
+        cy.uiBrowseOrCreateChannel('Browse channels').click();
+
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
+            // * Verify that channel has zero members
+            cy.findByTestId(`channelMemberCount-${newChannel.name}`).should('be.visible').and('contain', 0);
+
+            // # Click the channel row to join the channel
+            cy.findByTestId(`ChannelRow-${newChannel.name}`).scrollIntoView().should('be.visible').click();
+
+            // * Verify that channel has one member
+            cy.findByTestId(`channelMemberCount-${newChannel.name}`).should('be.visible').and('contain', 1);
+        });
+    });
+
     it('MM-T1702 Search works when changing public/archived options in the dropdown', () => {
         cy.apiAdminLogin();
         cy.apiUpdateConfig({
@@ -210,7 +242,7 @@ describe('Channels', () => {
             cy.findByText(newChannel.display_name).should('be.visible');
         });
 
-        cy.get('#moreChannelsModal').should('be.visible').within(() => {
+        cy.get('#browseChannelsModal').should('be.visible').within(() => {
             // * Users should be able to switch to "Archived Channels" list
             cy.get('#channelsMoreDropdown').should('be.visible').and('contain', channelType.public).click().within((el) => {
                 // # Click on archived channels item
@@ -229,7 +261,7 @@ describe('Channels', () => {
     });
 });
 
-function verifyMoreChannelsModalWithArchivedSelection(isEnabled, testUser, testTeam) {
+function verifyBrowseChannelsModalWithArchivedSelection(isEnabled, testUser, testTeam) {
     // # Login as sysadmin and Update config to enable/disable viewing of archived channels
     cy.apiAdminLogin();
     cy.apiUpdateConfig({
@@ -238,22 +270,22 @@ function verifyMoreChannelsModalWithArchivedSelection(isEnabled, testUser, testT
         },
     });
 
-    // * Verify more channels modal
+    // * Verify browse channels modal
     cy.visit(`/${testTeam.name}/channels/town-square`);
-    verifyMoreChannelsModal(isEnabled);
+    verifyBrowseChannelsModal(isEnabled);
 
-    // # Login as regular user and verify more channels modal
+    // # Login as regular user and verify browse channels modal
     cy.apiLogin(testUser);
     cy.visit(`/${testTeam.name}/channels/town-square`);
-    verifyMoreChannelsModal(isEnabled);
+    verifyBrowseChannelsModal(isEnabled);
 }
 
-function verifyMoreChannelsModal(isEnabled) {
+function verifyBrowseChannelsModal(isEnabled) {
     // # Go to LHS and click 'Browse channels'
     cy.uiBrowseOrCreateChannel('Browse channels').click();
 
-    // * Verify that the more channels modal is open and with or without option to view archived channels
-    cy.get('#moreChannelsModal').should('be.visible').within(() => {
+    // * Verify that the browse channels modal is open and with or without option to view archived channels
+    cy.get('#browseChannelsModal').should('be.visible').within(() => {
         if (isEnabled) {
             cy.get('#channelsMoreDropdown').should('be.visible').and('have.text', channelType.public);
         } else {

e2e-tests/cypress/tests/integration/channels/channel/more_public_channels_spec.js

@@ -53,8 +53,12 @@ describe('more public channels', () => {
 
         // * Assert that the moreChannelsModel is visible
         cy.findByRole('dialog', {name: 'Browse Channels'}).should('be.visible').within(() => {
-            // # Click hide joined checkbox
-            cy.findByText('Hide Joined').should('be.visible').click();
+            // # Click hide joined checkbox if not already checked
+            cy.findByText('Hide Joined').should('be.visible').then(($checkbox) => {
+                if (!$checkbox.prop('checked')) {
+                    cy.wrap($checkbox).click();
+                }
+            });
 
             // * Assert that the moreChannelsList is visible and the number of channels is 31
             cy.get('#moreChannelsList').should('be.visible').children().should('have.length', 31);

e2e-tests/cypress/tests/integration/channels/channel_sidebar/new_channel_dropdown_spec.ts

@@ -68,13 +68,13 @@ describe('Channel sidebar', () => {
         cy.get('.AddChannelDropdown .MenuItem:contains(Browse channels) button').should('be.visible').click();
 
         // * Verify that the more channels modal is visible
-        cy.get('#moreChannelsModal').should('be.visible');
+        cy.get('#browseChannelsModal').should('be.visible');
 
         // Click the Off-Topic channel
         cy.findByText('Off-Topic').should('be.visible').click();
 
         // Verify that new channel is in the sidebar and is active
-        cy.get('#moreChannelsModal').should('exist');
+        cy.get('#browseChannelsModal').should('exist');
         cy.url().should('include', `/${teamName}/channels/off-topic`);
         cy.get('#channelHeaderTitle').should('contain', 'Off-Topic');
         cy.get('.SidebarChannel.active:contains(Off-Topic)').should('be.visible');