[MM-56758] Enhance search implementation for Admin console (#26099)

webapp/channels/src/components/admin_console/admin_console.tsx

@@ -12,6 +12,7 @@ import type {Role} from '@mattermost/types/roles';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import SchemaAdminSettings from 'components/admin_console/schema_admin_settings';
+import SearchKeywordMarking from 'components/admin_console/search_keyword_marking';
 import AnnouncementBarController from 'components/announcement_bar';
 import BackstageNavbar from 'components/backstage/components/backstage_navbar';
 import DiscardChangesModal from 'components/discard_changes_modal';
@@ -23,7 +24,6 @@ import {applyTheme, resetTheme} from 'utils/utils';
 import {LhsItemType} from 'types/store/lhs';
 
 import AdminSidebar from './admin_sidebar';
-import Highlight from './highlight';
 import type {AdminDefinitionSubSection, AdminDefinitionSection} from './types';
 
 import type {PropsFromRedux} from './index';
@@ -31,7 +31,7 @@ import type {PropsFromRedux} from './index';
 export type Props = PropsFromRedux & RouteComponentProps;
 
 type State = {
-    filter: string;
+    search: string;
 }
 
 // not every page in the system console will need the license and config, but the vast majority will
@@ -48,11 +48,11 @@ type ExtraProps = {
     isCurrentUserSystemAdmin: boolean;
 }
 
-export default class AdminConsole extends React.PureComponent<Props, State> {
+class AdminConsole extends React.PureComponent<Props, State> {
     public constructor(props: Props) {
         super(props);
         this.state = {
-            filter: '',
+            search: '',
         };
     }
 
@@ -73,8 +73,8 @@ export default class AdminConsole extends React.PureComponent<Props, State> {
         applyTheme(this.props.currentTheme);
     }
 
-    private onFilterChange = (filter: string) => {
-        this.setState({filter});
+    private handleSearchChange = (search: string) => {
+        this.setState({search});
     };
 
     private mainRolesLoaded(roles: Record<string, Role>) {
@@ -192,14 +192,6 @@ export default class AdminConsole extends React.PureComponent<Props, State> {
             );
         }
 
-        const discardChangesModal: JSX.Element = (
-            <DiscardChangesModal
-                show={showNavigationPrompt}
-                onConfirm={confirmNavigation}
-                onCancel={cancelNavigation}
-            />
-        );
-
         const extraProps: ExtraProps = {
             enterpriseReady: this.props.buildEnterpriseReady,
             license,
@@ -212,23 +204,33 @@ export default class AdminConsole extends React.PureComponent<Props, State> {
             cloud: this.props.cloud,
             isCurrentUserSystemAdmin: this.props.isCurrentUserSystemAdmin,
         };
+
         return (
             <>
                 <AnnouncementBarController/>
                 <SystemNotice/>
                 <BackstageNavbar team={this.props.team}/>
-                <AdminSidebar onFilterChange={this.onFilterChange}/>
+                <AdminSidebar onSearchChange={this.handleSearchChange}/>
                 <div
                     className='admin-console__wrapper admin-console'
                     id='adminConsoleWrapper'
                 >
-                    <Highlight filter={this.state.filter}>
+                    <SearchKeywordMarking
+                        keyword={this.state.search}
+                        pathname={this.props.location.pathname}
+                    >
                         {this.renderRoutes(extraProps)}
-                    </Highlight>
+                    </SearchKeywordMarking>
                 </div>
-                {discardChangesModal}
+                <DiscardChangesModal
+                    show={showNavigationPrompt}
+                    onConfirm={confirmNavigation}
+                    onCancel={cancelNavigation}
+                />
                 <ModalController/>
             </>
         );
     }
 }
+
+export default AdminConsole;