Fix/scripts search empty state

.changeset/whole-colts-thank.md

@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add a message for when scripts search returns no results.

.gitignore

@@ -35,3 +35,4 @@ src/**/*.module.scss.d.ts
 /playwright-report/
 /playwright/
 .cert
+.prettierrc.json

src/features/scripts/components/ScriptList/ScriptList.test.tsx

@@ -35,6 +35,11 @@ const authContextValuesWithoutFeatureFlag: AuthContextProps = {
 
 describe("ScriptList", () => {
   const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.mocked(useAuth).mockReturnValue(authContextValues);
+  });
+
   assert(activeScript);
   assert(inactiveScript);
 
@@ -109,4 +114,14 @@ describe("ScriptList", () => {
     expect(inactiveStatusCell).toBeInTheDocument();
     expect(inactiveStatusCell).toHaveIcon("status-queued-small");
   });
+
+  it("should show the search-specific empty message for an empty list", () => {
+    vi.mocked(useAuth).mockReturnValue(authContextValues);
+
+    renderWithProviders(<ScriptList scripts={[]} />);
+
+    expect(
+      screen.getByText("No scripts found according to your search parameters."),
+    ).toBeInTheDocument();
+  });
 });

src/features/scripts/components/ScriptList/ScriptList.tsx

@@ -14,7 +14,7 @@ import type { SelectOption } from "@/types/SelectOption";
 import { Button } from "@canonical/react-components";
 import moment from "moment";
 import type { FC, ReactElement } from "react";
-import { lazy, Suspense, useMemo } from "react";
+import { lazy, Suspense, useCallback, useMemo } from "react";
 import type { CellProps, Column } from "react-table";
 import { formatTitleCase } from "../../helpers";
 import { useOpenScriptDetails } from "../../hooks";
@@ -37,14 +37,17 @@ const ScriptList: FC<ScriptListProps> = ({ scripts }) => {
   const { expandedRowIndex, getTableRowsRef, handleExpand } =
     useExpandableRow();
 
-  const openViewPanel = (script: Script) => {
-    setSidePanelContent(
-      script.title,
-      <Suspense fallback={<LoadingState />}>
-        <ScriptDetails scriptId={script.id} />
-      </Suspense>,
-    );
-  };
+  const openViewPanel = useCallback(
+    (script: Script) => {
+      setSidePanelContent(
+        script.title,
+        <Suspense fallback={<LoadingState />}>
+          <ScriptDetails scriptId={script.id} />
+        </Suspense>,
+      );
+    },
+    [setSidePanelContent],
+  );
 
   useOpenScriptDetails((profile) => {
     openViewPanel(profile);
@@ -177,10 +180,17 @@ const ScriptList: FC<ScriptListProps> = ({ scripts }) => {
     return isFeatureEnabled("script-profiles")
       ? result
       : result.filter((column) => column.id !== "associated_profiles");
-  }, [scripts, accessGroupOptions, expandedRowIndex]);
+  }, [
+    accessGroupOptions,
+    expandedRowIndex,
+    handleExpand,
+    isFeatureEnabled,
+    openViewPanel,
+  ]);
 
   return (
     <ResponsiveTable
+      emptyMsg="No scripts found according to your search parameters."
       ref={getTableRowsRef}
       columns={columns}
       data={scripts}

src/features/scripts/components/ScriptsContainer/ScriptsContainer.test.tsx

@@ -3,10 +3,14 @@ import { expectLoadingState } from "@/tests/helpers";
 import { scripts } from "@/tests/mocks/script";
 import { renderWithProviders } from "@/tests/render";
 import { screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 import ScriptsContainer from "./ScriptsContainer";
 
 describe("Scripts Empty State", () => {
+  beforeEach(() => {
+    setEndpointStatus("default");
+  });
+
   it("should empty state when there are no scripts", async () => {
     setEndpointStatus("empty");
 
@@ -19,8 +23,6 @@ describe("Scripts Empty State", () => {
   });
 
   it("should show scripts when there are scripts", async () => {
-    setEndpointStatus("default");
-
     renderWithProviders(<ScriptsContainer />);
 
     await expectLoadingState();
@@ -31,17 +33,39 @@ describe("Scripts Empty State", () => {
 
   it("should show scripts when there are scripts with search", async () => {
     const searchText = scripts[0].title;
+    const encodedSearchText = encodeURIComponent(searchText);
 
     renderWithProviders(
       <ScriptsContainer />,
       undefined,
-      `/scripts?search=${searchText}`,
+      `/scripts?search=${encodedSearchText}`,
     );
 
+    await expectLoadingState();
+
+    expect(screen.getByText(searchText)).toBeInTheDocument();
+
     scripts
       .filter(({ title }) => !title.includes(searchText))
       .forEach((script) => {
         expect(screen.queryByText(script.title)).not.toBeInTheDocument();
       });
   });
+
+  it("should show search-specific empty message when there are no search results", async () => {
+    setEndpointStatus("empty");
+
+    renderWithProviders(
+      <ScriptsContainer />,
+      undefined,
+      "/scripts?search=non-existent-script",
+    );
+
+    await expectLoadingState();
+
+    const emptyStateTitle = screen.getByText(
+      "No scripts found according to your search parameters.",
+    );
+    expect(emptyStateTitle).toBeInTheDocument();
+  });
 });