MM-59835: Prevent unnecessary channel bookmarks request causing console 404 (#27745)

* hoist feature flag check

* fix test

* fix test

---------

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

webapp/channels/src/components/channel_bookmarks/channel_bookmarks.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import BookmarkItem from './bookmark_item';
 import PlusMenu from './channel_bookmarks_plus_menu';
-import {useChannelBookmarkPermission, useChannelBookmarks, useIsChannelBookmarksEnabled, MAX_BOOKMARKS_PER_CHANNEL, useCanUploadFiles} from './utils';
+import {useChannelBookmarkPermission, useChannelBookmarks, MAX_BOOKMARKS_PER_CHANNEL, useCanUploadFiles} from './utils';
 
 import './channel_bookmarks.scss';
 
@@ -17,13 +17,12 @@ type Props = {
 const ChannelBookmarks = ({
     channelId,
 }: Props) => {
-    const show = useIsChannelBookmarksEnabled();
     const {order, bookmarks} = useChannelBookmarks(channelId);
     const canUploadFiles = useCanUploadFiles();
     const canAdd = useChannelBookmarkPermission(channelId, 'add');
     const hasBookmarks = Boolean(order?.length);
 
-    if (!show || (!hasBookmarks && !canAdd)) {
+    if (!hasBookmarks && !canAdd) {
         return null;
     }
 

webapp/channels/src/components/channel_bookmarks/utils.ts

@@ -22,10 +22,6 @@ import {canUploadFiles, isPublicLinksEnabled} from 'utils/file_utils';
 
 export const MAX_BOOKMARKS_PER_CHANNEL = 50;
 
-export const useIsChannelBookmarksEnabled = () => {
-    return useSelector(getIsChannelBookmarksEnabled);
-};
-
 const {OPEN_CHANNEL, PRIVATE_CHANNEL, GM_CHANNEL, DM_CHANNEL} = Constants as {OPEN_CHANNEL: 'O'; PRIVATE_CHANNEL: 'P'; GM_CHANNEL: 'G'; DM_CHANNEL: 'D'};
 
 type TAction = 'add' | 'edit' | 'delete' | 'order';

webapp/channels/src/components/channel_view/__snapshots__/channel_view.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`components/channel_view Should match snapshot if channel is archived 1`
     enableWebSocketEventScope={false}
     goToLastViewedChannel={[MockFunction]}
     history={Object {}}
+    isChannelBookmarksEnabled={false}
     isCloud={false}
     isFirstAdmin={false}
     location={Object {}}
@@ -28,9 +29,6 @@ exports[`components/channel_view Should match snapshot if channel is archived 1`
     teamUrl="/team"
     viewArchivedChannels={false}
   />
-  <ChannelBookmarks
-    channelId="channelId"
-  />
   <DeferredRenderWrapper
     channelId="channelId"
   />
@@ -76,6 +74,7 @@ exports[`components/channel_view Should match snapshot if channel is deactivated
     enableWebSocketEventScope={false}
     goToLastViewedChannel={[MockFunction]}
     history={Object {}}
+    isChannelBookmarksEnabled={false}
     isCloud={false}
     isFirstAdmin={false}
     location={Object {}}
@@ -88,9 +87,6 @@ exports[`components/channel_view Should match snapshot if channel is deactivated
     teamUrl="/team"
     viewArchivedChannels={false}
   />
-  <ChannelBookmarks
-    channelId="channelId"
-  />
   <DeferredRenderWrapper
     channelId="channelId"
   />
@@ -135,6 +131,7 @@ exports[`components/channel_view Should match snapshot with base props 1`] = `
     enableWebSocketEventScope={false}
     goToLastViewedChannel={[MockFunction]}
     history={Object {}}
+    isChannelBookmarksEnabled={false}
     isCloud={false}
     isFirstAdmin={false}
     location={Object {}}
@@ -147,9 +144,6 @@ exports[`components/channel_view Should match snapshot with base props 1`] = `
     teamUrl="/team"
     viewArchivedChannels={false}
   />
-  <ChannelBookmarks
-    channelId="channelId"
-  />
   <DeferredRenderWrapper
     channelId="channelId"
   />

webapp/channels/src/components/channel_view/channel_view.test.tsx

@@ -25,6 +25,7 @@ describe('components/channel_view', () => {
         goToLastViewedChannel: jest.fn(),
         isFirstAdmin: false,
         enableWebSocketEventScope: false,
+        isChannelBookmarksEnabled: false,
     };
 
     it('Should match snapshot with base props', () => {

webapp/channels/src/components/channel_view/channel_view.tsx

@@ -171,7 +171,7 @@ export default class ChannelView extends React.PureComponent<Props, State> {
             >
                 <FileUploadOverlay overlayType='center'/>
                 <ChannelHeader {...this.props}/>
-                <ChannelBookmarks channelId={this.props.channelId}/>
+                {this.props.isChannelBookmarksEnabled && <ChannelBookmarks channelId={this.props.channelId}/>}
                 <DeferredPostView
                     channelId={this.props.channelId}
                     focusedPostId={this.state.focusedPostId}

webapp/channels/src/components/channel_view/index.ts

@@ -12,6 +12,8 @@ import {isFirstAdmin} from 'mattermost-redux/selectors/entities/users';
 
 import {goToLastViewedChannel} from 'actions/views/channel';
 
+import {getIsChannelBookmarksEnabled} from 'components/channel_bookmarks/utils';
+
 import type {GlobalState} from 'types/store';
 
 import ChannelView from './channel_view';
@@ -41,6 +43,7 @@ function mapStateToProps(state: GlobalState) {
         teamUrl: getCurrentRelativeTeamUrl(state),
         isFirstAdmin: isFirstAdmin(state),
         enableWebSocketEventScope,
+        isChannelBookmarksEnabled: getIsChannelBookmarksEnabled(state),
     };
 }