search the copy job

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.test.tsx

@@ -11,9 +11,17 @@ jest.mock("../../Actions/CopyJobActions", () => ({
 
 jest.mock("./CopyJobColumns", () => ({
   getColumns: jest.fn(() => [
+    {
+      key: "LastUpdatedTime",
+      name: "Date & time",
+      fieldName: "LastUpdatedTime",
+      minWidth: 140,
+      maxWidth: 300,
+      isResizable: true,
+    },
     {
       key: "Name",
-      name: "Name",
+      name: "Job name",
       fieldName: "Name",
       minWidth: 140,
       maxWidth: 300,
@@ -165,6 +173,166 @@ describe("CopyJobsList", () => {
       expect(screen.getByTestId("action-menu-job-2")).toBeInTheDocument();
       expect(screen.getByTestId("action-menu-job-3")).toBeInTheDocument();
     });
+
+    it("renders filter TextField with data-test attribute", () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterTextField = document.querySelector('[data-test="CopyJobsList/FilterTextField"]');
+      expect(filterTextField).toBeInTheDocument();
+    });
+
+    it("renders filter Dropdown with data-test attribute", () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterDropdown = document.querySelector('[data-test="CopyJobsList/FilterColumnDropdown"]');
+      expect(filterDropdown).toBeInTheDocument();
+    });
+
+    it("renders filter Dropdown with Name column selected by default", () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const dropdownInput = screen.getByRole("combobox");
+      expect(dropdownInput).toHaveTextContent("Job name");
+    });
+  });
+
+  describe("Filtering", () => {
+    it("filters jobs by Name column when text is entered", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Job 1" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
+        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
+      });
+    });
+
+    it("filters jobs case-insensitively", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "test job 1" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
+      });
+    });
+
+    it("shows all jobs when filter text is empty", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Job 1" } });
+
+      await waitFor(() => {
+        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
+      });
+
+      fireEvent.change(filterInput, { target: { value: "" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+        expect(screen.getByText("Test Job 2")).toBeInTheDocument();
+        expect(screen.getByText("Test Job 3")).toBeInTheDocument();
+      });
+    });
+
+    it("filters jobs by Status column when selected", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      // Open dropdown and select Status
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      const statusOption = await screen.findByRole("option", { name: "Status" });
+      fireEvent.click(statusOption);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: CopyJobStatusType.Running } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
+        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
+      });
+    });
+
+    it("shows no results when filter matches no jobs", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "NonExistentJob" } });
+
+      await waitFor(() => {
+        expect(screen.queryByText("Test Job 1")).not.toBeInTheDocument();
+        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
+        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
+      });
+    });
+
+    it("filters by partial text match", async () => {
+      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Test" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+        expect(screen.getByText("Test Job 2")).toBeInTheDocument();
+        expect(screen.getByText("Test Job 3")).toBeInTheDocument();
+      });
+    });
+
+    it("resets pagination when filter changes", async () => {
+      const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
+        ...mockJobs[0],
+        ID: `job-${i + 1}`,
+        Name: `Test Job ${i + 1}`,
+      }));
+
+      render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
+
+      // Navigate to page 2
+      fireEvent.click(screen.getByLabelText("Go to next page"));
+
+      await waitFor(() => {
+        expect(screen.getByText("Showing 11 - 20 of 25 items")).toBeInTheDocument();
+      });
+
+      // Apply filter - should reset to page 1
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Job 1" } });
+
+      await waitFor(() => {
+        // Filtered results show from the beginning
+        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
+      });
+    });
+
+    it("updates filtered count in pager", async () => {
+      const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
+        ...mockJobs[0],
+        ID: `job-${i + 1}`,
+        Name: i < 5 ? `Alpha Job ${i + 1}` : `Beta Job ${i + 1}`,
+      }));
+
+      render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
+
+      expect(screen.getByText("Showing 1 - 10 of 25 items")).toBeInTheDocument();
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Alpha" } });
+
+      await waitFor(() => {
+        expect(screen.queryByText("Showing 1 - 10 of 25 items")).not.toBeInTheDocument();
+        // Pager should not be visible since filtered results (5) are less than page size (10)
+        expect(screen.queryByLabelText("Go to next page")).not.toBeInTheDocument();
+      });
+    });
   });
 
   describe("Pagination", () => {
@@ -342,7 +510,7 @@ describe("CopyJobsList", () => {
 
   describe("Component Props", () => {
     it("uses default page size when not provided", () => {
-      const manyJobs: CopyJobType[] = Array.from({ length: 12 }, (_, i) => ({
+      const manyJobs: CopyJobType[] = Array.from({ length: 20 }, (_, i) => ({
         ...mockJobs[0],
         ID: `job-${i + 1}`,
         Name: `Test Job ${i + 1}`,
@@ -351,7 +519,7 @@ describe("CopyJobsList", () => {
       render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} />);
 
       expect(screen.getByLabelText("Go to next page")).toBeInTheDocument();
-      expect(screen.getByText("Showing 1 - 10 of 12 items")).toBeInTheDocument();
+      expect(screen.getByText("Showing 1 - 15 of 20 items")).toBeInTheDocument();
     });
 
     it("passes correct props to getColumns function", async () => {
@@ -440,7 +608,33 @@ describe("CopyJobsList", () => {
         render(<CopyJobsList jobs={largeJobsList} handleActionClick={mockHandleActionClick} />);
       }).not.toThrow();
 
-      expect(screen.getByText("Showing 1 - 10 of 1000 items")).toBeInTheDocument();
+      expect(screen.getByText("Showing 1 - 15 of 1000 items")).toBeInTheDocument();
+    });
+
+    it("handles filtering with null or undefined values gracefully", async () => {
+      const jobsWithNullValues: CopyJobType[] = [
+        {
+          ...mockJobs[0],
+          ID: "job-with-values",
+          Name: "Valid Job",
+        },
+        {
+          ...mockJobs[1],
+          ID: "job-null-name",
+          Name: undefined as unknown as string,
+        },
+      ];
+
+      expect(() => {
+        render(<CopyJobsList jobs={jobsWithNullValues} handleActionClick={mockHandleActionClick} />);
+      }).not.toThrow();
+
+      const filterInput = screen.getByPlaceholderText("Filter by value...");
+      fireEvent.change(filterInput, { target: { value: "Valid" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("Valid Job")).toBeInTheDocument();
+      });
     });
   });
 });

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.tsx

@@ -4,20 +4,24 @@ import {
   ConstrainMode,
   DetailsListLayoutMode,
   DetailsRow,
+  Dropdown,
   IColumn,
   IDetailsRowProps,
+  IDropdownOption,
   ScrollablePane,
   ScrollbarVisibility,
   ShimmeredDetailsList,
   Stack,
   Sticky,
   StickyPositionType,
+  TextField,
 } from "@fluentui/react";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import Pager from "../../../../Common/Pager";
 import { useThemeStore } from "../../../../hooks/useTheme";
 import { getThemeTokens } from "../../../Theme/ThemeUtil";
 import { openCopyJobDetailsPanel } from "../../Actions/CopyJobActions";
+import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
 import { getColumns } from "./CopyJobColumns";
 
@@ -30,9 +34,22 @@ interface CopyJobsListProps {
 const styles = {
   container: { height: "100%" } as React.CSSProperties,
   stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
+  filterContainer: {
+    display: "flex",
+    flexDirection: "row" as const,
+    gap: "16px",
+    margin: "15px 5px",
+  },
+  textFieldContainer: { width: "80%" },
+  dropdownContainer: { width: "20%" },
 };
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 15;
+const columnsAddedToFilter = [
+  ContainerCopyMessages.MonitorJobs.Columns.name,
+  ContainerCopyMessages.MonitorJobs.Columns.status,
+  ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime,
+];
 
 const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
@@ -41,6 +58,36 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
   const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
   const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
   const [isSortedDescending, setIsSortedDescending] = React.useState<boolean>(false);
+  const [filterText, setFilterText] = React.useState<string>("");
+  const [selectedFilterColumn, setSelectedFilterColumn] = React.useState<string | undefined>("Name");
+
+  // Get columns to derive dropdown options
+  const columns: IColumn[] = getColumns(() => {}, handleActionClick, sortedColumnKey, isSortedDescending);
+
+  // Generate dropdown options from column headers
+  const filterDropdownOptions: IDropdownOption[] = useMemo(() => {
+    return columns
+      .filter((col) => col.fieldName && columnsAddedToFilter.includes(col.name))
+      .map((col) => ({
+        key: col.fieldName as string,
+        text: col.name,
+      }));
+  }, [columns]);
+
+  // Filter jobs based on filterText and selectedFilterColumn
+  const filteredJobs = useMemo(() => {
+    if (!filterText || !selectedFilterColumn) {
+      return sortedJobs;
+    }
+    const lowerFilterText = filterText.toLowerCase();
+    return sortedJobs.filter((job: any) => {
+      const value = job[selectedFilterColumn];
+      if (value === undefined || value === null) {
+        return false;
+      }
+      return String(value).toLowerCase().includes(lowerFilterText);
+    });
+  }, [sortedJobs, filterText, selectedFilterColumn]);
 
   useEffect(() => {
     setSortedJobs(jobs);
@@ -64,7 +111,23 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
     setStartIndex(0);
   };
 
-  const columns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
+  // Reset start index when filter changes
+  useEffect(() => {
+    setStartIndex(0);
+  }, [filterText, selectedFilterColumn]);
+
+  const sortableColumns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
+
+  const handleFilterTextChange = (
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string,
+  ) => {
+    setFilterText(newValue || "");
+  };
+
+  const handleFilterColumnChange = (_event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+    setSelectedFilterColumn(option?.key as string | undefined);
+  };
 
   const _handleRowClick = (job: CopyJobType) => {
     openCopyJobDetailsPanel(job);
@@ -81,14 +144,36 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
   return (
     <div style={styles.container}>
       <Stack verticalFill={true}>
+        <Stack.Item>
+          <div style={styles.filterContainer}>
+            <div style={styles.textFieldContainer}>
+              <TextField
+                data-test="CopyJobsList/FilterTextField"
+                placeholder="Filter by value..."
+                value={filterText}
+                onChange={handleFilterTextChange}
+              />
+            </div>
+            <div style={styles.dropdownContainer}>
+              <Dropdown
+                data-test="CopyJobsList/FilterColumnDropdown"
+                placeholder="Select column"
+                options={filterDropdownOptions}
+                selectedKey={selectedFilterColumn}
+                onChange={handleFilterColumnChange}
+              />
+            </div>
+          </div>
+        </Stack.Item>
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
+          {/* add the code here */}
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
               className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
-              columns={columns}
-              items={sortedJobs.slice(startIndex, startIndex + pageSize)}
+              columns={sortableColumns}
+              items={filteredJobs.slice(startIndex, startIndex + pageSize)}
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
@@ -117,12 +202,12 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
             />
           </ScrollablePane>
         </Stack.Item>
-        {sortedJobs.length > pageSize && (
+        {filteredJobs.length > pageSize && (
           <Stack.Item>
             <Pager
               disabled={false}
               startIndex={startIndex}
-              totalCount={sortedJobs.length}
+              totalCount={filteredJobs.length}
               pageSize={pageSize}
               onLoadPage={(startIdx /* pageSize */) => {
                 setStartIndex(startIdx);

test/sql/containercopy/offlineMigration.spec.ts

@@ -248,6 +248,12 @@ test.describe("Container Copy - Offline Migration", () => {
     // Verify panel closes and job appears in the list
     await expect(panel).not.toBeVisible({ timeout: 5000 });
 
+    // Use the filter functionality to search for the created job
+    const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
+    await filterTextField.waitFor({ state: "visible", timeout: 5000 });
+    await filterTextField.fill(validJobName);
+
+    // Wait for the job to be visible in the filtered list
     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
     await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
 

test/sql/containercopy/onlineMigration.spec.ts

@@ -122,6 +122,10 @@ test.describe("Container Copy - Online Migration", () => {
     // Verify panel closes and job appears in the list
     await expect(panel).not.toBeVisible({ timeout: 5000 });
 
+    const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
+    await filterTextField.waitFor({ state: "visible", timeout: 5000 });
+    await filterTextField.fill(onlineMigrationJobName);
+
     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
     await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });