fix: error displayed when activating workspace (#305)

* fix(table empty state): smaller size for loader

* fix(empty state): spacing tweaks requested by James

* fix(workspace selector): navigate back to home on activating workspace

* fix(table empty state): default to loading state, handle error state separately

* fix: tidy ups to empty state

Author: alex-mcgovern

src/components/empty-state.tsx

@@ -30,8 +30,8 @@ export function EmptyState({
   actions: [ReactNode, ReactNode?] | null;
 }) {
   return (
-    <div className="max-w-[40rem] mx-auto py-20 flex items-center flex-col text-center text-balance">
-      <Illustration className="size-28" />
+    <div className="max-w-[40rem] mx-auto py-32 flex items-center justify-center flex-col text-center text-balance">
+      <Illustration className="size-32 mb-4" />
       <Heading level={4} className="font-bold text-gray-900 mb-2">
         {title}
       </Heading>

src/features/dashboard-messages/components/__tests__/table-messages.empty-state.test.tsx

@@ -6,9 +6,9 @@ import { useSearchParams } from "react-router-dom";
 import { delay, http, HttpHandler, HttpResponse } from "msw";
 import { mockAlert } from "../../../../mocks/msw/mockers/alert.mock";
 import { AlertsFilterView } from "../../hooks/use-messages-filter-search-params";
-import { TableMessages } from "../table-messages";
 import { hrefs } from "@/lib/hrefs";
 import { mswEndpoint } from "@/test/msw-endpoint";
+import { TableMessagesEmptyState } from "../table-messages-empty-state";
 
 enum IllustrationTestId {
   ALERT = "illustration-alert",
@@ -48,7 +48,7 @@ type TestCase = {
 vi.mock("react-router-dom", async () => {
   const original =
     await vi.importActual<typeof import("react-router-dom")>(
-      "react-router-dom"
+      "react-router-dom",
     );
   return {
     ...original,
@@ -59,7 +59,7 @@ vi.mock("react-router-dom", async () => {
 vi.mock("@stacklok/ui-kit", async () => {
   const original =
     await vi.importActual<typeof import("@stacklok/ui-kit")>(
-      "@stacklok/ui-kit"
+      "@stacklok/ui-kit",
     );
   return {
     ...original,
@@ -116,7 +116,7 @@ const TEST_CASES: TestCase[] = [
         mswEndpoint("/api/v1/workspaces/:workspace_name/messages"),
         () => {
           return HttpResponse.json([]);
-        }
+        },
       ),
     ],
     searchParams: {
@@ -158,9 +158,9 @@ const TEST_CASES: TestCase[] = [
         mswEndpoint("/api/v1/workspaces/:workspace_name/messages"),
         () => {
           return HttpResponse.json(
-            Array.from({ length: 10 }, () => mockAlert({ type: "malicious" }))
+            Array.from({ length: 10 }, () => mockAlert({ type: "malicious" })),
           );
-        }
+        },
       ),
     ],
     searchParams: { search: "foo-bar", view: AlertsFilterView.ALL },
@@ -202,7 +202,7 @@ const TEST_CASES: TestCase[] = [
         mswEndpoint("/api/v1/workspaces/:workspace_name/messages"),
         () => {
           return HttpResponse.json([]);
-        }
+        },
       ),
     ],
     searchParams: {
@@ -248,9 +248,9 @@ const TEST_CASES: TestCase[] = [
         mswEndpoint("/api/v1/workspaces/:workspace_name/messages"),
         () => {
           return HttpResponse.json(
-            Array.from({ length: 10 }).map(() => mockAlert({ type: "secret" }))
+            Array.from({ length: 10 }).map(() => mockAlert({ type: "secret" })),
           );
-        }
+        },
       ),
     ],
     searchParams: {
@@ -291,10 +291,10 @@ const TEST_CASES: TestCase[] = [
         () => {
           return HttpResponse.json(
             Array.from({ length: 10 }).map(() =>
-              mockAlert({ type: "malicious" })
-            )
+              mockAlert({ type: "malicious" }),
+            ),
           );
-        }
+        },
       ),
     ],
     searchParams: {
@@ -321,11 +321,13 @@ test.each(TEST_CASES)("$testDescription", async (testCase) => {
     () => {},
   ]);
 
-  const { getByText, getByRole, getByTestId } = render(<TableMessages />);
+  const { getByText, getByRole, getByTestId } = render(
+    <TableMessagesEmptyState />,
+  );
 
   await waitFor(() => {
     expect(
-      getByRole("heading", { level: 4, name: testCase.expected.title })
+      getByRole("heading", { level: 4, name: testCase.expected.title }),
     ).toBeVisible();
     expect(getByText(testCase.expected.body)).toBeVisible();
     expect(getByTestId(testCase.expected.illustrationTestId)).toBeVisible();

src/features/dashboard-messages/components/table-messages-empty-state.tsx

@@ -20,13 +20,16 @@ import {
 } from "../hooks/use-messages-filter-search-params";
 import { match, P } from "ts-pattern";
 import { useQueryGetWorkspaceMessages } from "@/hooks/use-query-get-workspace-messages";
+import { twMerge } from "tailwind-merge";
 
 function EmptyStateLoading() {
   return (
     <EmptyState
       title={emptyStateStrings.title.loading}
       body={emptyStateStrings.body.loading}
-      illustration={Loader}
+      illustration={(props) => (
+        <Loader {...props} className={twMerge(props.className, "!size-16")} />
+      )}
       actions={null}
     />
   );
@@ -117,7 +120,7 @@ function EmptyStateSecrets() {
   );
 }
 
-function EmptyStateError() {
+export function EmptyStateError() {
   return (
     <EmptyState
       title={emptyStateStrings.title.anErrorOccurred}
@@ -157,7 +160,7 @@ type MatchInput = {
   view: AlertsFilterView | null;
 };
 
-export function TableAlertsEmptyState() {
+export function TableMessagesEmptyState() {
   const { state, setSearch } = useMessagesFilterSearchParams();
 
   const { data: messages = [], isLoading: isMessagesLoading } =
@@ -176,22 +179,13 @@ export function TableAlertsEmptyState() {
     search: state.search || null,
     view: state.view,
   })
-    .with(
-      {
-        isLoading: true,
-        hasWorkspaceMessages: P._,
-        hasMultipleWorkspaces: P._,
-        search: P._,
-        view: P._,
-      },
-      () => <EmptyStateLoading />,
-    )
     .with(
       {
         hasWorkspaceMessages: false,
         hasMultipleWorkspaces: false,
-        search: P._,
-        view: P._,
+        search: P.any,
+        view: P.any,
+        isLoading: false,
       },
       () => <EmptyStateGetStarted />,
     )
@@ -200,25 +194,28 @@ export function TableAlertsEmptyState() {
         hasWorkspaceMessages: true,
         hasMultipleWorkspaces: P.any,
         search: P.string.select(),
-        view: P._,
+        view: P.any,
+        isLoading: false,
       },
       (search) => <EmptyStateSearch search={search} setSearch={setSearch} />,
     )
     .with(
       {
         hasWorkspaceMessages: false,
         hasMultipleWorkspaces: P.any,
-        search: P._,
+        search: P.any,
         view: P.any,
+        isLoading: false,
       },
       () => <EmptyStateNoMessagesInWorkspace />,
     )
     .with(
       {
         hasWorkspaceMessages: true,
         hasMultipleWorkspaces: P.any,
-        search: P._,
+        search: P.any,
         view: AlertsFilterView.MALICIOUS,
+        isLoading: false,
       },
       () => <EmptyStateMalicious />,
     )
@@ -227,8 +224,9 @@ export function TableAlertsEmptyState() {
         hasWorkspaceMessages: true,
         hasMultipleWorkspaces: P.any,
         view: AlertsFilterView.SECRETS,
+        isLoading: false,
       },
       () => <EmptyStateSecrets />,
     )
-    .otherwise(() => <EmptyStateError />);
+    .otherwise(() => <EmptyStateLoading />);
 }

src/features/dashboard-messages/components/table-messages.tsx

@@ -17,7 +17,10 @@ import { TableAlertTokenUsage } from "./table-alert-token-usage";
 
 import { useMessagesFilterSearchParams } from "../hooks/use-messages-filter-search-params";
 import { Key01, PackageX } from "@untitled-ui/icons-react";
-import { TableAlertsEmptyState } from "./table-messages-empty-state";
+import {
+  EmptyStateError,
+  TableMessagesEmptyState,
+} from "./table-messages-empty-state";
 import { hrefs } from "@/lib/hrefs";
 import { isAlertMalicious } from "../../../lib/is-alert-malicious";
 import { isAlertSecret } from "../../../lib/is-alert-secret";
@@ -145,7 +148,7 @@ function CellRenderer({
 export function TableMessages() {
   const { state, prevPage, nextPage } = useMessagesFilterSearchParams();
 
-  const { data = [] } = useQueryGetWorkspaceMessagesTable();
+  const { data = [], isError } = useQueryGetWorkspaceMessagesTable();
   const { dataView, hasNextPage, hasPreviousPage } = useClientSidePagination(
     data,
     state.page,
@@ -160,7 +163,11 @@ export function TableMessages() {
             {(column) => <Column {...column} id={column.id} />}
           </TableHeader>
           <TableBody
-            renderEmptyState={() => <TableAlertsEmptyState />}
+            renderEmptyState={() => {
+              if (isError) return <EmptyStateError />;
+
+              return <TableMessagesEmptyState />;
+            }}
             items={dataView}
           >
             {(row) => (

src/features/header/components/header-active-workspace-selector.tsx

@@ -19,10 +19,17 @@ import { hrefs } from "@/lib/hrefs";
 import { twMerge } from "tailwind-merge";
 import ChevronDown from "@untitled-ui/icons-react/build/cjs/ChevronDown";
 import { SearchMd, Settings01 } from "@untitled-ui/icons-react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const ROUTES_REQUIRING_REDIRECT = [/^\/$/, /^\/prompt\/(.*)$/];
 
 export function HeaderActiveWorkspaceSelector() {
   const queryClient = useQueryClient();
 
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname } = location;
+
   const { data: workspacesResponse } = useQueryListWorkspaces();
   const { mutateAsync: activateWorkspace } = useMutationActivateWorkspace();
 
@@ -32,13 +39,16 @@ export function HeaderActiveWorkspaceSelector() {
   const [searchWorkspace, setSearchWorkspace] = useState("");
   const workspaces = workspacesResponse?.workspaces ?? [];
   const filteredWorkspaces = workspaces.filter((workspace) =>
-    workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),
+    workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase())
   );
 
   const handleWorkspaceClick = (name: string) => {
     activateWorkspace({ body: { name } }).then(() => {
       // eslint-disable-next-line no-restricted-syntax
       queryClient.invalidateQueries({ refetchType: "all" }); // Global setting, refetch **everything**
+      if (ROUTES_REQUIRING_REDIRECT.some((route) => route.test(pathname))) {
+        navigate("/");
+      }
       setIsOpen(false);
     });
   };
@@ -86,7 +96,7 @@ export function HeaderActiveWorkspaceSelector() {
                   {
                     "!bg-gray-900 hover:bg-gray-900 !text-gray-25 hover:!text-gray-25":
                       item.is_active,
-                  },
+                  }
                 )}
               >
                 <span className="block truncate">{item.name}</span>
@@ -100,12 +110,12 @@ export function HeaderActiveWorkspaceSelector() {
                     "ml-auto size-6 group-hover/selector:opacity-100 opacity-0 transition-opacity",
                     item.is_active
                       ? "hover:bg-gray-800 pressed:bg-gray-700"
-                      : "hover:bg-gray-50 hover:text-primary",
+                      : "hover:bg-gray-50 hover:text-primary"
                   )}
                 >
                   <Settings01
                     className={twMerge(
-                      item.is_active ? "text-gray-25" : "text-secondary",
+                      item.is_active ? "text-gray-25" : "text-secondary"
                     )}
                   />
                 </LinkButton>