MM-51091: Fixed the checkmarks bug (#28287)

* Fixed the checkmarks bug

* Fixed indentation

* Fixing the snapshots

* resolving the comments

* check-lint issues

* react fragment removal

* Fixing the .snap files

webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category_sorting_menu.test.tsx.snap

@@ -65,6 +65,11 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           />
         }
         onClick={[Function]}
+        trailingElements={
+          <CheckIcon
+            size={16}
+          />
+        }
       />
       <MenuItem
         id="sortByMostRecent-category_id"
@@ -75,6 +80,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           />
         }
         onClick={[Function]}
+        trailingElements={null}
       />
     </SubMenu>
     <SubMenu
@@ -111,6 +117,11 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           </span>
         }
         onClick={[Function]}
+        trailingElements={
+          <CheckIcon
+            size={16}
+          />
+        }
       />
       <MenuItem
         id="showDmCount-category_id-15"
@@ -121,6 +132,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           </span>
         }
         onClick={[Function]}
+        trailingElements={null}
       />
       <MenuItem
         id="showDmCount-category_id-20"
@@ -131,6 +143,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           </span>
         }
         onClick={[Function]}
+        trailingElements={null}
       />
       <MenuItem
         id="showDmCount-category_id-40"
@@ -141,6 +154,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_sorting_menu shoul
           </span>
         }
         onClick={[Function]}
+        trailingElements={null}
       />
     </SubMenu>
     <MenuItemSeparator />

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap

@@ -95,6 +95,11 @@ exports[`components/sidebar/sidebar_category/sidebar_category_menu should match
         />
       }
       onClick={[Function]}
+      trailingElements={
+        <CheckIcon
+          size={16}
+        />
+      }
     />
     <MenuItem
       id="sortByMostRecent-test_category_id"
@@ -105,6 +110,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_menu should match
         />
       }
       onClick={[Function]}
+      trailingElements={null}
     />
     <MenuItem
       id="sortManual-test_category_id"
@@ -115,6 +121,7 @@ exports[`components/sidebar/sidebar_category/sidebar_category_menu should match
         />
       }
       onClick={[Function]}
+      trailingElements={null}
     />
   </SubMenu>
   <MenuItemSeparator />

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/index.tsx

@@ -13,6 +13,7 @@ import {
     SortAlphabeticalAscendingIcon,
     ClockOutlineIcon,
     ChevronRightIcon,
+    CheckIcon,
 } from '@mattermost/compass-icons/components';
 import type {ChannelCategory} from '@mattermost/types/channel_categories';
 import {CategorySorting} from '@mattermost/types/channel_categories';
@@ -49,7 +50,6 @@ const SidebarCategoryMenu = ({
     const showUnreadsCategory = useSelector(shouldShowUnreadsCategory);
     const getUnreadsIdsForCategory = useMemo(makeGetUnreadIdsForCategory, [category]);
     const unreadsIds = useSelector((state: GlobalState) => getUnreadsIdsForCategory(state, category));
-
     const {formatMessage} = useIntl();
 
     let muteUnmuteCategoryMenuItem: JSX.Element | null = null;
@@ -194,6 +194,7 @@ const SidebarCategoryMenu = ({
                     />
                 )}
                 onClick={() => handleSortChannels(CategorySorting.Alphabetical)}
+                trailingElements={category.sorting === CategorySorting.Alphabetical ? <CheckIcon size={16}/> : null}
             />
             <Menu.Item
                 id={`sortByMostRecent-${category.id}`}
@@ -204,6 +205,7 @@ const SidebarCategoryMenu = ({
                     />
                 )}
                 onClick={() => handleSortChannels(CategorySorting.Recency)}
+                trailingElements={category.sorting === CategorySorting.Recency ? <CheckIcon size={16}/> : null}
             />
             <Menu.Item
                 id={`sortManual-${category.id}`}
@@ -214,6 +216,7 @@ const SidebarCategoryMenu = ({
                     />
                 )}
                 onClick={() => handleSortChannels(CategorySorting.Manual)}
+                trailingElements={category.sorting === CategorySorting.Manual ? <CheckIcon size={16}/> : null}
             />
         </Menu.SubMenu>
     );

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx

@@ -14,6 +14,7 @@ import {
     AccountPlusOutlineIcon,
     DotsVerticalIcon,
     ChevronRightIcon,
+    CheckIcon,
 } from '@mattermost/compass-icons/components';
 import type {ChannelCategory} from '@mattermost/types/channel_categories';
 import {CategorySorting} from '@mattermost/types/channel_categories';
@@ -95,6 +96,7 @@ const SidebarCategorySortingMenu = ({
                     />
                 )}
                 onClick={() => handleSortDirectMessages(CategorySorting.Alphabetical)}
+                trailingElements={category.sorting === CategorySorting.Alphabetical ? <CheckIcon size={16}/> : null}
             />
             <Menu.Item
                 id={`sortByMostRecent-${category.id}`}
@@ -105,6 +107,7 @@ const SidebarCategorySortingMenu = ({
                     />
                 )}
                 onClick={() => handleSortDirectMessages(CategorySorting.Recency)}
+                trailingElements={category.sorting === CategorySorting.Recency ? <CheckIcon size={16}/> : null}
             />
         </Menu.SubMenu>
 
@@ -153,6 +156,7 @@ const SidebarCategorySortingMenu = ({
                     key={`showDmCount-${category.id}-${dmGmShowCount}`}
                     labels={<span>{dmGmShowCount}</span>}
                     onClick={() => handlelimitVisibleDMsGMs(dmGmShowCount)}
+                    trailingElements={selectedDmNumber === dmGmShowCount ? <CheckIcon size={16}/> : null}
                 />
             ))}
         </Menu.SubMenu>