chore: Remove sorting and filtering from serial logs table

Author: steverydz

static/js/publisher/pages/SerialLog/SerialLog.tsx

@@ -1,17 +1,13 @@
 import { useEffect } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { useParams, useSearchParams } from "react-router-dom";
-import { Notification, Icon, Row, Col } from "@canonical/react-components";
+import { useParams } from "react-router-dom";
+import { Notification, Icon } from "@canonical/react-components";
 
 import { useSerialLogs } from "../../hooks";
-import {
-  serialLogsListFilterState,
-  serialLogsListState,
-} from "../../state/serialLogsState";
+import { serialLogsListState } from "../../state/serialLogsState";
 import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 import { setPageTitle } from "../../utils";
 
-import Filter from "../../components/Filter";
 import SerialLogTable from "./SerialLogTable";
 
 import type { UseQueryResult } from "react-query";
@@ -30,9 +26,7 @@ function SerialLog(): React.JSX.Element {
     modelId,
   );
   const setSerialLogs = useSetAtom(serialLogsListState);
-  const setFilter = useSetAtom(serialLogsListFilterState);
   const brandStore = useAtomValue(brandStoreState(id));
-  const [searchParams] = useSearchParams();
 
   brandStore
     ? setPageTitle(`Serial logs in ${brandStore.name}`)
@@ -41,7 +35,6 @@ function SerialLog(): React.JSX.Element {
   useEffect(() => {
     if (!isLoading && !isError && data) {
       setSerialLogs(data.data?.items || []);
-      setFilter(searchParams.get("filter") || "");
     }
   }, [isLoading, error, data, brandId, id]);
 
@@ -63,20 +56,9 @@ function SerialLog(): React.JSX.Element {
             {data.message || "Unable to fetch serial logs"}
           </Notification>
         ) : (
-          <>
-            <Row>
-              <Col size={6}>
-                <Filter
-                  state={serialLogsListFilterState}
-                  label="Search serial logs"
-                  placeholder="Search serial logs"
-                />
-              </Col>
-            </Row>
-            <div className="u-flex-column u-flex-grow">
-              <SerialLogTable />
-            </div>
-          </>
+          <div className="u-flex-column u-flex-grow">
+            <SerialLogTable />
+          </div>
         )}
       </div>
     </>

static/js/publisher/pages/SerialLog/SerialLogTable.tsx

@@ -4,26 +4,19 @@ import { MainTable, TablePagination } from "@canonical/react-components";
 import { format } from "date-fns";
 
 import { brandStoreState } from "../../state/brandStoreState";
-import { filteredSerialLogsListState } from "../../state/serialLogsState";
-import { useSortTableData } from "../../hooks";
+import { serialLogsListState } from "../../state/serialLogsState";
 
 import type { SerialLog } from "../../types/shared";
 
 function SerialLogTable(): React.JSX.Element {
   const { id } = useParams();
-  const serialLogs = useAtomValue(filteredSerialLogsListState);
+  const serialLogs = useAtomValue(serialLogsListState);
   const brandStore = useAtomValue(brandStoreState(id));
 
   const headers = [
     { content: "Brand" },
-    {
-      content: "Model",
-      sortKey: "model-name",
-    },
-    {
-      content: "Serial",
-      sortKey: "serial",
-    },
+    { content: "Model" },
+    { content: "Serial" },
     {
       content: "Created date",
       className: "u-align--right",
@@ -44,20 +37,16 @@ function SerialLogTable(): React.JSX.Element {
     };
   });
 
-  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
-
   return (
     <TablePagination
-      data={sortedRows}
+      data={rows}
       pageLimits={[25, 50, 100, 200]}
       position="below"
     >
       <MainTable
         data-testid="serial-log-table"
-        sortable
         emptyStateMsg="No serial logs match this filter"
         headers={headers}
-        onUpdateSort={updateSort}
       />
     </TablePagination>
   );

static/js/publisher/pages/SerialLog/__tests__/SerialLog.test.tsx

@@ -94,14 +94,6 @@ describe("SerialLog", () => {
     ).toBeInTheDocument();
   });
 
-  it("doesn't display filter if user has no serial logs access", () => {
-    mockuseSerialLogs.mockReturnValue(useSerialLogsNoPermissions);
-    renderComponent();
-    expect(
-      screen.queryByLabelText("Search serial logs"),
-    ).not.toBeInTheDocument();
-  });
-
   it("doesn't display table if user has no serial logs access", () => {
     mockuseSerialLogs.mockReturnValue(useSerialLogsNoPermissions);
     renderComponent();
@@ -116,12 +108,6 @@ describe("SerialLog", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("displays filter if user has serial logs access", () => {
-    mockuseSerialLogs.mockReturnValue(useSerialLogsPermissions);
-    renderComponent();
-    expect(screen.getByLabelText("Search serial logs")).toBeInTheDocument();
-  });
-
   it("displays table if user has serial logs access", () => {
     mockuseSerialLogs.mockReturnValue(useSerialLogsPermissions);
     renderComponent();

static/js/publisher/state/serialLogsState.ts

@@ -4,34 +4,4 @@ import type { SerialLog } from "../types/shared";
 
 const serialLogsListState = atom([] as SerialLog[]);
 
-const serialLogsListFilterState = atom("" as string);
-
-function getFilteredSerialLogs(
-  serialLogs: Array<SerialLog>,
-  filterQuery?: string | null,
-) {
-  if (!filterQuery) {
-    return serialLogs;
-  }
-
-  return serialLogs.filter((serialLog: SerialLog) => {
-    if (serialLog.serial && serialLog.serial.includes(filterQuery)) {
-      return true;
-    }
-
-    return false;
-  });
-}
-
-const filteredSerialLogsListState = atom<Array<SerialLog>>((get) => {
-  const filter = get(serialLogsListFilterState);
-  const SerialLogs = get(serialLogsListState);
-
-  return getFilteredSerialLogs(SerialLogs, filter);
-});
-
-export {
-  serialLogsListState,
-  serialLogsListFilterState,
-  filteredSerialLogsListState,
-};
+export { serialLogsListState };