@bbearai/react 0.3.1 → 0.4.0

package/dist/index.js

@@ -1543,7 +1543,16 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function TestListScreen({ nav }) {
   const { assignments, currentAssignment, refreshAssignments } = useBugBear();
   const [filter, setFilter] = (0, import_react5.useState)("all");
+  const [roleFilter, setRoleFilter] = (0, import_react5.useState)(null);
   const [collapsedFolders, setCollapsedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+  const availableRoles = (0, import_react5.useMemo)(() => {
+    const roleMap = /* @__PURE__ */ new Map();
+    for (const a of assignments) {
+      if (a.testCase.role) roleMap.set(a.testCase.role.id, a.testCase.role);
+    }
+    return Array.from(roleMap.values());
+  }, [assignments]);
+  const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = (0, import_react5.useMemo)(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const assignment of assignments) {
@@ -1597,6 +1606,7 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = (a) => {
+    if (roleFilter && a.testCase.role?.id !== roleFilter) return false;
     if (filter === "pending") return a.status === "pending" || a.status === "in_progress";
     if (filter === "completed") return a.status === "passed" || a.status === "failed";
     return true;
@@ -1629,7 +1639,7 @@ function TestListScreen({ nav }) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 8, marginBottom: 16 }, children: filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 8, marginBottom: availableRoles.length >= 2 ? 8 : 16 }, children: filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
         type: "button",
@@ -1656,6 +1666,79 @@ function TestListScreen({ nav }) {
       },
       f.key
     )) }),
+    availableRoles.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginBottom: selectedRole?.loginHint ? 8 : 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setRoleFilter(null),
+            style: {
+              paddingLeft: 10,
+              paddingRight: 10,
+              paddingTop: 4,
+              paddingBottom: 4,
+              borderRadius: 6,
+              backgroundColor: !roleFilter ? colors.card : "transparent",
+              border: !roleFilter ? `1px solid ${colors.border}` : "1px solid transparent",
+              cursor: "pointer",
+              fontSize: 11,
+              color: !roleFilter ? colors.textPrimary : colors.textMuted,
+              fontWeight: !roleFilter ? 600 : 400
+            },
+            children: "All Roles"
+          }
+        ),
+        availableRoles.map((role) => {
+          const isActive = roleFilter === role.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setRoleFilter(isActive ? null : role.id),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 5,
+                paddingLeft: 10,
+                paddingRight: 10,
+                paddingTop: 4,
+                paddingBottom: 4,
+                borderRadius: 6,
+                backgroundColor: isActive ? role.color + "20" : "transparent",
+                border: isActive ? `1px solid ${role.color}60` : "1px solid transparent",
+                cursor: "pointer",
+                fontSize: 11,
+                color: isActive ? role.color : colors.textMuted,
+                fontWeight: isActive ? 600 : 400
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: role.color,
+                  flexShrink: 0
+                } }),
+                role.name
+              ]
+            },
+            role.id
+          );
+        })
+      ] }),
+      selectedRole?.loginHint && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+        fontSize: 11,
+        color: colors.textSecondary,
+        backgroundColor: selectedRole.color + "10",
+        border: `1px solid ${selectedRole.color}30`,
+        borderRadius: 6,
+        padding: "6px 10px"
+      }, children: [
+        "Log in as: ",
+        selectedRole.loginHint
+      ] })
+    ] }),
     groupedAssignments.map((folder) => {
       const folderId = folder.group?.id || "ungrouped";
       const isCollapsed = collapsedFolders.has(folderId);
@@ -1828,7 +1911,26 @@ function TestListScreen({ nav }) {
                         },
                         children: assignment.testCase.priority
                       }
-                    )
+                    ),
+                    assignment.testCase.role && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 11, color: colors.textDim }, children: "\xB7" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 3,
+                        fontSize: 10,
+                        color: assignment.testCase.role.color,
+                        fontWeight: 500
+                      }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+                          width: 5,
+                          height: 5,
+                          borderRadius: 3,
+                          backgroundColor: assignment.testCase.role.color
+                        } }),
+                        assignment.testCase.role.name
+                      ] })
+                    ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

package/dist/index.mjs

@@ -1514,7 +1514,16 @@ import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-run
 function TestListScreen({ nav }) {
   const { assignments, currentAssignment, refreshAssignments } = useBugBear();
   const [filter, setFilter] = useState3("all");
+  const [roleFilter, setRoleFilter] = useState3(null);
   const [collapsedFolders, setCollapsedFolders] = useState3(/* @__PURE__ */ new Set());
+  const availableRoles = useMemo(() => {
+    const roleMap = /* @__PURE__ */ new Map();
+    for (const a of assignments) {
+      if (a.testCase.role) roleMap.set(a.testCase.role.id, a.testCase.role);
+    }
+    return Array.from(roleMap.values());
+  }, [assignments]);
+  const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = useMemo(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const assignment of assignments) {
@@ -1568,6 +1577,7 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = (a) => {
+    if (roleFilter && a.testCase.role?.id !== roleFilter) return false;
     if (filter === "pending") return a.status === "pending" || a.status === "in_progress";
     if (filter === "completed") return a.status === "passed" || a.status === "failed";
     return true;
@@ -1600,7 +1610,7 @@ function TestListScreen({ nav }) {
     }
   };
   return /* @__PURE__ */ jsxs3("div", { children: [
-    /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 8, marginBottom: 16 }, children: filters.map((f) => /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 8, marginBottom: availableRoles.length >= 2 ? 8 : 16 }, children: filters.map((f) => /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -1627,6 +1637,79 @@ function TestListScreen({ nav }) {
       },
       f.key
     )) }),
+    availableRoles.length >= 2 && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginBottom: selectedRole?.loginHint ? 8 : 0 }, children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => setRoleFilter(null),
+            style: {
+              paddingLeft: 10,
+              paddingRight: 10,
+              paddingTop: 4,
+              paddingBottom: 4,
+              borderRadius: 6,
+              backgroundColor: !roleFilter ? colors.card : "transparent",
+              border: !roleFilter ? `1px solid ${colors.border}` : "1px solid transparent",
+              cursor: "pointer",
+              fontSize: 11,
+              color: !roleFilter ? colors.textPrimary : colors.textMuted,
+              fontWeight: !roleFilter ? 600 : 400
+            },
+            children: "All Roles"
+          }
+        ),
+        availableRoles.map((role) => {
+          const isActive = roleFilter === role.id;
+          return /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: () => setRoleFilter(isActive ? null : role.id),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 5,
+                paddingLeft: 10,
+                paddingRight: 10,
+                paddingTop: 4,
+                paddingBottom: 4,
+                borderRadius: 6,
+                backgroundColor: isActive ? role.color + "20" : "transparent",
+                border: isActive ? `1px solid ${role.color}60` : "1px solid transparent",
+                cursor: "pointer",
+                fontSize: 11,
+                color: isActive ? role.color : colors.textMuted,
+                fontWeight: isActive ? 600 : 400
+              },
+              children: [
+                /* @__PURE__ */ jsx4("span", { style: {
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: role.color,
+                  flexShrink: 0
+                } }),
+                role.name
+              ]
+            },
+            role.id
+          );
+        })
+      ] }),
+      selectedRole?.loginHint && /* @__PURE__ */ jsxs3("div", { style: {
+        fontSize: 11,
+        color: colors.textSecondary,
+        backgroundColor: selectedRole.color + "10",
+        border: `1px solid ${selectedRole.color}30`,
+        borderRadius: 6,
+        padding: "6px 10px"
+      }, children: [
+        "Log in as: ",
+        selectedRole.loginHint
+      ] })
+    ] }),
     groupedAssignments.map((folder) => {
       const folderId = folder.group?.id || "ungrouped";
       const isCollapsed = collapsedFolders.has(folderId);
@@ -1799,7 +1882,26 @@ function TestListScreen({ nav }) {
                         },
                         children: assignment.testCase.priority
                       }
-                    )
+                    ),
+                    assignment.testCase.role && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                      /* @__PURE__ */ jsx4("span", { style: { fontSize: 11, color: colors.textDim }, children: "\xB7" }),
+                      /* @__PURE__ */ jsxs3("span", { style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 3,
+                        fontSize: 10,
+                        color: assignment.testCase.role.color,
+                        fontWeight: 500
+                      }, children: [
+                        /* @__PURE__ */ jsx4("span", { style: {
+                          width: 5,
+                          height: 5,
+                          borderRadius: 3,
+                          backgroundColor: assignment.testCase.role.color
+                        } }),
+                        assignment.testCase.role.name
+                      ] })
+                    ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx4(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "BugBear React components for web apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,7 +41,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@bbearai/core": "^0.3.0"
+    "@bbearai/core": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",