Merged in r2-3086-mobile-sort-disabled (pull request #6974)

R2-3086 - Disable sort for mobile when a phonetic search is performed

Approved-by: Joshua Toliver

app/javascript/components/record-list/components/sort-container/sort-button.jsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { IconButton, Tooltip } from "@mui/material";
+import ImportExportIcon from "@mui/icons-material/ImportExport";
+
+import { useI18n } from "../../../i18n";
+
+function Component({ phonetic = false, toggleSortDrawer }) {
+  const i18n = useI18n();
+
+  const Wrapper = phonetic ? Tooltip : Fragment;
+  const props = phonetic ? { title: i18n.t("messages.record_list.sort_disabled_name_fields") } : {};
+
+  return (
+    <Wrapper {...props}>
+      <span>
+        <IconButton size="large" onClick={toggleSortDrawer} color="primary" disabled={phonetic}>
+          <ImportExportIcon />
+        </IconButton>
+      </span>
+    </Wrapper>
+  );
+}
+
+Component.displayName = "SortButton";
+
+Component.propTypes = {
+  phonetic: PropTypes.bool,
+  toggleSortDrawer: PropTypes.func.isRequired
+};
+
+export default Component;

app/javascript/components/record-list/container.jsx

@@ -171,6 +171,7 @@ function Container({ match, location }) {
           currentPage={currentPage}
           selectedRecords={selectedRecords}
           clearSelectedRecords={clearSelectedRecords}
+          phonetic={phonetic}
         />
         <PageContent flex>
           <div className={css.tableContainer}>
@@ -191,7 +192,9 @@ function Container({ match, location }) {
             </div>
           </div>
 
-          {mobileDisplay && <SortContainer columns={columns} recordType={recordType} applyFilters={applyFilters} />}
+          {mobileDisplay && !phonetic && (
+            <SortContainer columns={columns} recordType={recordType} applyFilters={applyFilters} />
+          )}
           <FilterContainer mobileDisplay={mobileDisplay}>
             <Filters recordType={recordType} setSelectedRecords={handleSelectedRecords} metadata={metadata} />
           </FilterContainer>

app/javascript/components/record-list/record-list-toolbar/component.jsx

@@ -3,30 +3,28 @@
 import PropTypes from "prop-types";
 import { Box, IconButton } from "@mui/material";
 import FilterListIcon from "@mui/icons-material/FilterList";
-import ImportExportIcon from "@mui/icons-material/ImportExport";
 
 import { PageHeading } from "../../page";
 import RecordActions from "../../record-actions";
 import Permission, { CREATE_RECORDS } from "../../permissions";
 import AddRecordMenu from "../add-record-menu";
 import { useDrawer } from "../../drawer";
+import SortButton from "../components/sort-container/sort-button";
 import { FILTER_DRAWER } from "../components/filter-container/constants";
 import { SORT_DRAWER } from "../components/sort-container/constants";
 
 import { NAME } from "./constants";
 
 const mode = { isShow: true };
 
-function Component({ title, recordType, selectedRecords, currentPage, clearSelectedRecords }) {
+function Component({ title, recordType, selectedRecords, currentPage, clearSelectedRecords, phonetic = false }) {
   const { toggleDrawer: toggleFilterDrawer } = useDrawer(FILTER_DRAWER);
   const { toggleDrawer: toggleSortDrawer } = useDrawer(SORT_DRAWER);
 
   return (
     <PageHeading title={title}>
       <Box sx={{ display: { md: "none", xs: "block" } }}>
-        <IconButton size="large" onClick={toggleSortDrawer} color="primary">
-          <ImportExportIcon />
-        </IconButton>
+        <SortButton phonetic={phonetic} toggleSortDrawer={toggleSortDrawer} />
         <IconButton size="large" onClick={toggleFilterDrawer} color="primary">
           <FilterListIcon />
         </IconButton>
@@ -49,6 +47,7 @@ function Component({ title, recordType, selectedRecords, currentPage, clearSelec
 Component.propTypes = {
   clearSelectedRecords: PropTypes.func,
   currentPage: PropTypes.number,
+  phonetic: PropTypes.bool,
   recordType: PropTypes.string.isRequired,
   selectedRecords: PropTypes.object,
   title: PropTypes.string.isRequired