Minor change for clear cache operation (#773) (#776)

* Minor change for clear cache operation

Signed-off-by: gaobinlong <[email protected]>

* Modify releate notes

Signed-off-by: gaobinlong <[email protected]>

---------

Signed-off-by: gaobinlong <[email protected]>
(cherry picked from commit 5c882d7)

Co-authored-by: gaobinlong <[email protected]>

Author: opensearch-trigger-bot[bot]

public/containers/ClearCacheModal/ClearCacheModal.test.tsx

@@ -5,19 +5,57 @@
 
 import React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { render, fireEvent } from "@testing-library/react";
-import ClearCacheModal from "./ClearCacheModal";
+import { browserServicesMock, coreServicesMock } from "../../../test/mocks";
+import { CoreServicesContext } from "../../components/core_services";
+import { ServicesContext } from "../../services";
+import { BrowserServices } from "../../models/interfaces";
+import { ModalProvider } from "../../components/Modal";
+import { CoreStart } from "opensearch-dashboards/public";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import ClearCacheModal, { ClearCacheModalProps } from "./ClearCacheModal";
+import { INDEX_OP_TARGET_TYPE } from "../../utils/constants";
+import { act } from "react-dom/test-utils";
 
+function renderWithRouter(
+  coreServicesContext: CoreStart | null,
+  browserServicesContext: BrowserServices | null,
+  props: ClearCacheModalProps
+) {
+  return {
+    ...render(
+      <CoreServicesContext.Provider value={coreServicesContext}>
+        <ServicesContext.Provider value={browserServicesContext}>
+          <ModalProvider>
+            <ClearCacheModal {...props} />
+          </ModalProvider>
+        </ServicesContext.Provider>
+      </CoreServicesContext.Provider>
+    ),
+  };
+}
 describe("<ClearCacheModal /> spec", () => {
   it("renders the component", async () => {
-    render(<ClearCacheModal selectedItems={[]} visible onClose={() => {}} type="indexes" />);
-
+    renderWithRouter(coreServicesMock, browserServicesMock, {
+      selectedItems: [],
+      visible: true,
+      type: INDEX_OP_TARGET_TYPE.INDEX,
+      onClose: () => {},
+    });
+    await act(async () => {});
     expect(document.body.children).toMatchSnapshot();
   });
 
-  it("calls close when cancel button clicked", () => {
+  it("calls close when cancel button clicked", async () => {
     const onClose = jest.fn();
-    const { getByTestId } = render(<ClearCacheModal selectedItems={[]} visible onClose={onClose} type="indexes" />);
+    const { getByTestId, getByText } = renderWithRouter(coreServicesMock, browserServicesMock, {
+      selectedItems: [],
+      visible: true,
+      type: INDEX_OP_TARGET_TYPE.INDEX,
+      onClose: onClose,
+    });
+    await waitFor(() => {
+      expect(getByText("Cache will be cleared for all open indexes.")).toBeInTheDocument();
+    });
     fireEvent.click(getByTestId("ClearCacheCancelButton"));
     expect(onClose).toHaveBeenCalled();
   });

public/containers/ClearCacheModal/ClearCacheModal.tsx

@@ -23,7 +23,7 @@ import {
   EuiSpacer,
 } from "@elastic/eui";
 
-interface ClearCacheModalProps {
+export interface ClearCacheModalProps {
   selectedItems: CatIndex[] | DataStream[] | IAlias[];
   visible: boolean;
   onClose: () => void;
@@ -36,7 +36,7 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
   const [blockHint, setBlockHint] = useState("");
   const [unBlockedItems, setUnBlockedItems] = useState([] as string[]);
   const [blockedItems, setBlockedItems] = useState([] as string[]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const services = useContext(ServicesContext);
   const coreServices = useContext(CoreServicesContext) as CoreStart;
@@ -49,7 +49,6 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
       INDEX_OP_BLOCKS_TYPE.READ_ONLY_ALLOW_DELETE,
     ];
     if (!!services && visible) {
-      setLoading(true);
       switch (type) {
         case INDEX_OP_TARGET_TYPE.DATA_STREAM:
           setHint("Cache will be cleared for the following data streams.");
@@ -106,7 +105,7 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
       setBlockedItems([] as string[]);
       setLoading(true);
     }
-  }, [services, visible, type, selectedItems, setLoading]);
+  }, [services, visible, type, selectedItems]);
 
   const onConfirm = useCallback(async () => {
     if (!!services) {

release-notes/opensearch-index-management-dashboards-plugin.release-notes-2.8.0.0.md

@@ -4,7 +4,7 @@ Compatible with OpenSearch 2.8.0
 
 ### Features
 * Feature: Add refresh index operation to UI  ([#761](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/761))
-* Feature: Add clear cache operation to UI  ([#728](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/728))
+* Feature: Add clear cache operation to UI  ([#728](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/728),[#773](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/773))
 * Feature: Add flush index operation to UI  ([#713](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/713),[#718](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/718),[#751](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/751),[#753](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/753))
 * Feature: Add notification settings page and runtime notification option for long running index operations  ([#731](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/731),[#732](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/732))
 * Feature: Composable templates enhancement  ([#730](https://github.com/opensearch-project/index-management-dashboards-plugin/pull/730))