Added internationalization for file filter dropdown (#28809)

Co-authored-by: Sahariar Alam Khandoker <sahariar.alam@therapservices.net>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/search_results/files_filter_menu.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import {FilterVariantIcon} from '@mattermost/compass-icons/components';
 
@@ -20,6 +20,7 @@ type Props = {
 };
 
 export default function FilesFilterMenu(props: Props): JSX.Element {
+    const intl = useIntl();
     return (
         <div className='FilesFilterMenu'>
             <MenuWrapper>
@@ -46,54 +47,54 @@ export default function FilesFilterMenu(props: Props): JSX.Element {
                 </WithTooltip>
 
                 <Menu
-                    ariaLabel={'file menu'}
+                    ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.file_menu', defaultMessage: 'file menu'})}
                     openLeft={true}
                 >
                     <Menu.ItemAction
-                        ariaLabel={'All file types'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.all_file_types', defaultMessage: 'All file types'})}
-                        text={'All file types'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.all_file_types', defaultMessage: 'All file types'})}
                         onClick={() => props.onFilter('all')}
                         icon={props.selectedFilter === 'all' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Documents'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.documents', defaultMessage: 'Documents'})}
-                        text={'Documents'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.documents', defaultMessage: 'Documents'})}
                         onClick={() => props.onFilter('documents')}
                         icon={props.selectedFilter === 'documents' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Spreadsheets'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.spreadsheets', defaultMessage: 'Spreadsheets'})}
-                        text={'Spreadsheets'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.spreadsheets', defaultMessage: 'Spreadsheets'})}
                         onClick={() => props.onFilter('spreadsheets')}
                         icon={props.selectedFilter === 'spreadsheets' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Presentations'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.presentations', defaultMessage: 'Presentations'})}
-                        text={'Presentations'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.presentations', defaultMessage: 'Presentations'})}
                         onClick={() => props.onFilter('presentations')}
                         icon={props.selectedFilter === 'presentations' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Code'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.code', defaultMessage: 'Code'})}
-                        text={'Code'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.code', defaultMessage: 'Code'})}
                         onClick={() => props.onFilter('code')}
                         icon={props.selectedFilter === 'code' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Images'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.images', defaultMessage: 'Images'})}
-                        text={'Images'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.images', defaultMessage: 'Images'})}
                         onClick={() => props.onFilter('images')}
                         icon={props.selectedFilter === 'images' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Audio'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.audio', defaultMessage: 'Audio'})}
-                        text={'Audio'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.audio', defaultMessage: 'Audio'})}
                         onClick={() => props.onFilter('audio')}
                         icon={props.selectedFilter === 'audio' ? <i className='icon icon-check'/> : null}
                     />
                     <Menu.ItemAction
-                        ariaLabel={'Videos'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.videos', defaultMessage: 'Videos'})}
-                        text={'Videos'}
+                        text={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.videos', defaultMessage: 'Videos'})}
                         onClick={() => props.onFilter('video')}
                         icon={props.selectedFilter === 'video' ? <i className='icon icon-check'/> : null}
                     />

webapp/channels/src/i18n/en.json

@@ -3200,6 +3200,15 @@
   "channel_info_rhs.header.title": "Info",
   "channel_info_rhs.menu.files": "Files",
   "channel_info_rhs.menu.files.filter": "Filter",
+  "channel_info_rhs.menu.files.filter.all_file_types": "All file types",
+  "channel_info_rhs.menu.files.filter.audio": "Audio",
+  "channel_info_rhs.menu.files.filter.code": "Code",
+  "channel_info_rhs.menu.files.filter.documents": "Documents",
+  "channel_info_rhs.menu.files.filter.file_menu": "file menu",
+  "channel_info_rhs.menu.files.filter.images": "Images",
+  "channel_info_rhs.menu.files.filter.presentations": "Presentations",
+  "channel_info_rhs.menu.files.filter.spreadsheets": "Spreadsheets",
+  "channel_info_rhs.menu.files.filter.videos": "Videos",
   "channel_info_rhs.menu.members": "Members",
   "channel_info_rhs.menu.notification_preferences": "Notification Preferences",
   "channel_info_rhs.menu.pinned": "Pinned messages",