From da2a84e99da37a65e435171cad1fab0fb30b9193 Mon Sep 17 00:00:00 2001
From: Sahariar Alam Khandoker <sahariaralamk@gmail.com>
Date: Tue, 29 Oct 2024 19:44:33 +0600
Subject: [PATCH] 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>
---
 .../search_results/files_filter_menu.tsx      | 37 ++++++++++---------
 webapp/channels/src/i18n/en.json              |  9 +++++
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/webapp/channels/src/components/search_results/files_filter_menu.tsx b/webapp/channels/src/components/search_results/files_filter_menu.tsx
index 6cf21efdb3575..6515cb1398940 100644
--- a/webapp/channels/src/components/search_results/files_filter_menu.tsx
+++ b/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'}
-                        text={'All file types'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.all_file_types', defaultMessage: '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'}
-                        text={'Documents'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.documents', defaultMessage: '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'}
-                        text={'Spreadsheets'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.spreadsheets', defaultMessage: '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'}
-                        text={'Presentations'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.presentations', defaultMessage: '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'}
-                        text={'Code'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.code', defaultMessage: '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'}
-                        text={'Images'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.images', defaultMessage: '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'}
-                        text={'Audio'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.audio', defaultMessage: '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'}
-                        text={'Videos'}
+                        ariaLabel={intl.formatMessage({id: 'channel_info_rhs.menu.files.filter.videos', defaultMessage: '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}
                     />
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 6e4f83dc22b74..5a940baf625c5 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/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",