Feat: move GridToolbar to uicore

package.json

@@ -95,7 +95,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.70",
+    "openstack-uicore-foundation": "5.0.71",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",

src/pages/admin_access/__tests__/admin-access-list-page.test.js

@@ -63,16 +63,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => {
   return MockMuiTable;
 });
 
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/search-input",
-  () => ({
-    __esModule: true,
-    default: ({ onSearch }) => (
-      <input placeholder="search" onChange={(e) => onSearch(e.target.value)} />
-    )
-  })
-);
-
 jest.mock("../../../components/forms/admin-access-form", () => {
   const MockAdminAccessForm = ({ onSubmit, isSaving }) => (
     <div data-testid="admin-access-form">
@@ -202,9 +192,11 @@ describe("AdminAccessListPage", () => {
 
     it("requests data with search term and resets to page 1", async () => {
       renderPage();
-      fireEvent.change(screen.getByPlaceholderText("search"), {
-        target: { value: "admins" }
-      });
+      const searchInput = screen.getByPlaceholderText(
+        "admin_access.placeholders.search"
+      );
+      fireEvent.change(searchInput, { target: { value: "admins" } });
+      fireEvent.keyDown(searchInput, { key: "Enter" });
       await waitFor(() => {
         expect(mockGetAdminAccesses).toHaveBeenCalledWith(
           "admins",

src/pages/admin_access/admin-access-list-page.js

@@ -18,7 +18,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import {
   getAdminAccesses,
   deleteAdminAccess,

src/pages/companies/company-list-page.js

@@ -17,7 +17,7 @@ import T from "i18n-react/dist/i18n-react";
 import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import { getCompanies, deleteCompany } from "../../actions/company-actions";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 

src/pages/email_flow_events/__tests__/email-flow-events-list-page.test.js

@@ -36,18 +36,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
   )
 }));
 
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/search-input",
-  () => ({
-    __esModule: true,
-    default: ({ onSearch }) => (
-      <button type="button" onClick={() => onSearch("newterm")}>
-        search-trigger
-      </button>
-    )
-  })
-);
-
 jest.mock("i18n-react/dist/i18n-react", () => ({
   __esModule: true,
   default: { translate: (key) => key }
@@ -121,8 +109,9 @@ describe("EmailFlowEventListPage", () => {
       initialState
     });
 
-    await userEvent.click(
-      screen.getByRole("button", { name: "search-trigger" })
+    await userEvent.type(
+      screen.getByPlaceholderText("email_flow_event_list.placeholders.search"),
+      "newterm{Enter}"
     );
 
     expect(getEmailFlowEvents).toHaveBeenCalledWith(

src/pages/email_flow_events/email-flow-events-list-page.js

@@ -15,7 +15,7 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import { getSummitById } from "../../actions/summit-actions";
 import { getEmailFlowEvents } from "../../actions/email-flows-events-actions";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";

src/pages/emails/email-template-list-page.js

@@ -18,7 +18,7 @@ import AddIcon from "@mui/icons-material/Add";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 import {
   getEmailTemplates,

src/pages/events/__tests__/event-type-list-page.test.js

@@ -52,18 +52,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
   )
 }));
 
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/search-input",
-  () => ({
-    __esModule: true,
-    default: ({ onSearch }) => (
-      <button type="button" onClick={() => onSearch("foo")}>
-        search-foo
-      </button>
-    )
-  })
-);
-
 // The stub mirrors the real popup contract from the popup-dialog pattern:
 // it closes only when the promise returned by onSave resolves.
 jest.mock("../components/event-type-dialog", () => ({
@@ -125,7 +113,10 @@ describe("EventTypeListPage", () => {
   it("threads search, pagination and sort params to getEventTypes", async () => {
     renderWithRedux(<EventTypeListPage />, { initialState });
 
-    await userEvent.click(screen.getByRole("button", { name: "search-foo" }));
+    await userEvent.type(
+      screen.getByPlaceholderText("Search..."),
+      "foo{Enter}"
+    );
     // search resets to the first page and keeps current order
     expect(getEventTypes).toHaveBeenLastCalledWith("foo", 1, 10, "id", 1);
 

src/pages/events/event-type-list-page.js

@@ -19,7 +19,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import {
   getEventTypes as getEventTypesAction,
   getEventType as getEventTypeAction,

src/pages/marketing/__tests__/marketing-setting-list-page.test.js

@@ -53,18 +53,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
   )
 }));
 
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/search-input",
-  () => ({
-    __esModule: true,
-    default: ({ onSearch }) => (
-      <button type="button" onClick={() => onSearch("newterm")}>
-        search-trigger
-      </button>
-    )
-  })
-);
-
 jest.mock("i18n-react/dist/i18n-react", () => ({
   __esModule: true,
   default: { translate: (key) => key }
@@ -154,8 +142,9 @@ describe("MarketingSettingListPage", () => {
     });
 
     await act(async () => {
-      await userEvent.click(
-        screen.getByRole("button", { name: "search-trigger" })
+      await userEvent.type(
+        screen.getByPlaceholderText("marketing.placeholders.search_settings"),
+        "newterm{Enter}"
       );
     });
 

src/pages/marketing/marketing-setting-list-page.js

@@ -18,7 +18,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import SummitDropdown from "../../components/summit-dropdown";
 import showConfirmDialog from "../../components/mui/showConfirmDialog";
 import { getSummitById } from "../../actions/summit-actions";

src/pages/media_file_types/__tests__/media-file-type-list-page.test.js

@@ -33,26 +33,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
   )
 }));
 
-jest.mock("openstack-uicore-foundation/lib/components/mui/search-input", () => {
-  const React = require("react");
-  return {
-    __esModule: true,
-    default: ({ onSearch, term }) => {
-      const [value, setValue] = React.useState(term || "");
-      return (
-        <input
-          data-testid="search-input"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onSearch(value);
-          }}
-        />
-      );
-    }
-  };
-});
-
 jest.mock("../components/media-file-type-dialog", () => ({
   __esModule: true,
   default: ({ onClose, onSave }) => (
@@ -207,7 +187,7 @@ describe("MediaFileTypeListPage", () => {
       initialState: buildInitialState()
     });
 
-    await user.type(screen.getByTestId("search-input"), "pdf{Enter}");
+    await user.type(screen.getByPlaceholderText("Search..."), "pdf{Enter}");
 
     await waitFor(() => {
       expect(mediaFileTypeActions.getMediaFileTypes).toHaveBeenCalledWith(

src/pages/media_file_types/media-file-type-list-page.js

@@ -17,7 +17,7 @@ import T from "i18n-react/dist/i18n-react";
 import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
-import GridToolbar from "../../components/mui/grid-toolbar";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import {
   getMediaFileTypes,
   getMediaFileType,

src/pages/media_uploads/__tests__/media-upload-list-page.test.js

@@ -40,18 +40,6 @@ jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
   )
 }));
 
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/search-input",
-  () => ({
-    __esModule: true,
-    default: ({ onSearch }) => (
-      <button type="button" onClick={() => onSearch("foo")}>
-        search-foo
-      </button>
-    )
-  })
-);
-
 jest.mock("../../../components/summit-dropdown", () => ({
   __esModule: true,
   default: ({ onClick }) => (
@@ -106,7 +94,10 @@ describe("MediaUploadListPage", () => {
   it("threads search, pagination and sort params to getMediaUploads", async () => {
     renderPage();
 
-    await userEvent.click(screen.getByRole("button", { name: "search-foo" }));
+    await userEvent.type(
+      screen.getByPlaceholderText("Search..."),
+      "foo{Enter}"
+    );
     expect(getMediaUploads).toHaveBeenLastCalledWith("foo", 1, 10, "id", 1);
 
     await userEvent.click(screen.getByRole("button", { name: "page-2" }));

src/pages/media_uploads/media-upload-list-page.js

@@ -20,8 +20,8 @@ import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import RawHTML from "openstack-uicore-foundation/lib/components/raw-html";
+import GridToolbar from "openstack-uicore-foundation/lib/components/mui/grid-toolbar";
 import SummitDropdown from "../../components/summit-dropdown";
-import GridToolbar from "../../components/mui/grid-toolbar";
 import {
   getMediaUploads as getMediaUploadsAction,
   deleteMediaUpload as deleteMediaUploadAction,