MM-54416: Channel Bookmarks Web UI (#25889)

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
Co-authored-by: Miguel de la Cruz <miguel@mcrx.me>
Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>

webapp/platform/client/src/client4.ts

@@ -10,6 +10,7 @@ import type {AppBinding, AppCallRequest, AppCallResponse} from '@mattermost/type
 import type {Audit} from '@mattermost/types/audits';
 import type {UserAutocomplete, AutocompleteSuggestion} from '@mattermost/types/autocomplete';
 import type {Bot, BotPatch} from '@mattermost/types/bots';
+import type {ChannelBookmark, ChannelBookmarkCreate, ChannelBookmarkPatch} from '@mattermost/types/channel_bookmarks';
 import type {ChannelCategory, OrderedChannelCategories} from '@mattermost/types/channel_categories';
 import type {
     Channel,
@@ -314,6 +315,12 @@ export default class Client4 {
     getChannelSchemeRoute(channelId: string) {
         return `${this.getChannelRoute(channelId)}/scheme`;
     }
+    getChannelBookmarksRoute(channelId: string) {
+        return `${this.getChannelRoute(channelId)}/bookmarks`;
+    }
+    getChannelBookmarkRoute(channelId: string, bookmarkId: string) {
+        return `${this.getChannelRoute(channelId)}/bookmarks/${bookmarkId}`;
+    }
 
     getChannelCategoriesRoute(userId: string, teamId: string) {
         return `${this.getBaseRoute()}/users/${userId}/teams/${teamId}/channels/categories`;
@@ -1605,7 +1612,15 @@ export default class Client4 {
         includeDeleted: boolean | undefined,
         excludePolicyConstrained: boolean | undefined
     ): Promise<ChannelsWithTotalCount>;
-    getAllChannels(page = 0, perPage = PER_PAGE_DEFAULT, notAssociatedToGroup = '', excludeDefaultChannels = false, includeTotalCount = false, includeDeleted = false, excludePolicyConstrained = false) {
+    getAllChannels(
+        page = 0,
+        perPage = PER_PAGE_DEFAULT,
+        notAssociatedToGroup = '',
+        excludeDefaultChannels = false,
+        includeTotalCount = false,
+        includeDeleted = false,
+        excludePolicyConstrained = false,
+    ) {
         const queryData = {
             page,
             per_page: perPage,
@@ -1961,7 +1976,44 @@ export default class Client4 {
         );
     };
 
-    // Channel Category Routes
+    // Channel Bookmark Routes
+
+    getChannelBookmarks = (channelId: string, bookmarksSince?: number) => {
+        return this.doFetch<ChannelBookmark[]>(
+            `${this.getChannelBookmarksRoute(channelId)}${buildQueryString({bookmarks_since: bookmarksSince})}`,
+            {method: 'get'},
+        );
+    };
+
+    createChannelBookmark = (channelId: string, channelBookmark: ChannelBookmarkCreate, connectionId: string) => {
+        return this.doFetch<ChannelBookmark>(
+            `${this.getChannelBookmarksRoute(channelId)}`,
+            {method: 'post', body: JSON.stringify(channelBookmark), headers: {'Connection-Id': connectionId}},
+        );
+    };
+
+    deleteChannelBookmark = (channelId: string, channelBookmarkId: string, connectionId: string) => {
+        return this.doFetch<ChannelBookmark>(
+            `${this.getChannelBookmarkRoute(channelId, channelBookmarkId)}`,
+            {method: 'delete', headers: {'Connection-Id': connectionId}},
+        );
+    };
+
+    updateChannelBookmark = (channelId: string, channelBookmarkId: string, patch: ChannelBookmarkPatch, connectionId: string) => {
+        return this.doFetch<{updated: ChannelBookmark; deleted: ChannelBookmark}>(
+            `${this.getChannelBookmarkRoute(channelId, channelBookmarkId)}`,
+            {method: 'PATCH', body: JSON.stringify(patch), headers: {'Connection-Id': connectionId}},
+        );
+    };
+
+    updateChannelBookmarkSortOrder = (channelId: string, channelBookmarkId: string, newOrder: number, connectionId: string) => {
+        return this.doFetch<ChannelBookmark[]>(
+            `${this.getChannelBookmarksRoute(channelId)}/${channelBookmarkId}/sort_order`,
+            {method: 'post', body: JSON.stringify(newOrder), headers: {'Connection-Id': connectionId}},
+        );
+    };
+
+    //  Channel Category Routes
 
     getChannelCategories = (userId: string, teamId: string) => {
         return this.doFetch<OrderedChannelCategories>(
@@ -2383,7 +2435,7 @@ export default class Client4 {
         return url;
     }
 
-    uploadFile = (fileFormData: any) => {
+    uploadFile = (fileFormData: any, isBookmark?: boolean) => {
         this.trackEvent('api', 'api_files_upload');
         const request: any = {
             method: 'post',
@@ -2391,7 +2443,7 @@ export default class Client4 {
         };
 
         return this.doFetch<FileUploadResponse>(
-            `${this.getFilesRoute()}`,
+            `${this.getFilesRoute()}${buildQueryString({bookmark: isBookmark})}`,
             request,
         );
     };

webapp/platform/types/src/channel_bookmarks.ts

@@ -0,0 +1,57 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {Channel} from './channels';
+import type {FileInfo} from './files';
+import type {IDMappedObjects} from './utilities';
+
+type ChannelBookmarkType = 'link' | 'file';
+
+export type ChannelBookmark = {
+    id: string;
+    create_at: number;
+    update_at: number;
+    delete_at: number;
+    channel_id: string;
+    owner_id: string;
+    file_id?: string;
+    file?: FileInfo;
+    display_name: string;
+    sort_order: number;
+    link_url?: string;
+    image_url?: string;
+    emoji?: string;
+    type: ChannelBookmarkType;
+    original_id?: string;
+    parent_id?: string;
+}
+
+export type ChannelBookmarkCreate = {
+    display_name: string;
+    image_url?: string;
+    emoji?: string;
+    type: ChannelBookmarkType;
+} & ({
+    type: 'link';
+    link_url: string;
+} | {
+    type: 'file';
+    file_id: string;
+})
+
+export type ChannelBookmarkPatch = {
+    file_id?: string;
+    display_name?: string;
+    sort_order?: number;
+    link_url?: string;
+    image_url?: string;
+    emoji?: string;
+}
+
+export type ChannelBookmarkWithFileInfo = ChannelBookmark & {
+    file: FileInfo;
+}
+
+export type ChannelBookmarksState = {
+    byChannelId: {[channelId: Channel['id']]: IDMappedObjects<ChannelBookmark>};
+}

webapp/platform/types/src/client4.ts

@@ -20,6 +20,7 @@ export type Options = {
     url?: string;
     credentials?: 'omit' | 'same-origin' | 'include';
     body?: any;
+    signal?: RequestInit['signal'];
     ignoreStatus?: boolean; /** If true, status codes > 300 are ignored and don't cause an error */
 };
 

webapp/platform/types/src/store.ts

@@ -4,6 +4,7 @@
 import type {AdminState} from './admin';
 import type {AppsState} from './apps';
 import type {Bot} from './bots';
+import type {ChannelBookmarksState} from './channel_bookmarks';
 import type {ChannelCategoriesState} from './channel_categories';
 import type {ChannelsState} from './channels';
 import type {CloudState, CloudUsage} from './cloud';
@@ -38,6 +39,7 @@ export type GlobalState = {
         limits: LimitsState;
         teams: TeamsState;
         channels: ChannelsState;
+        channelBookmarks: ChannelBookmarksState;
         posts: PostsState;
         threads: ThreadsState;
         bots: {