reactbridge-sdk 0.2.4 → 0.2.6

package/dist/index.js

@@ -2158,12 +2158,15 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
     const theme = customTheme || contextTheme;
     const [selectedAnalytics, setSelectedAnalytics] = React.useState(null);
     const [directiveFilter, setDirectiveFilter] = React.useState("all");
+    // Directive type filter (by action)
+    const [directiveType, setDirectiveType] = React.useState("all");
     // Fetch analytics configurations
     const { configs, isLoading: configsLoading, error: configsError, refetch: refetchConfigs, } = useAnalyticsConfigs();
     // Fetch latest result for selected analytics
     const { result, isLoading: resultLoading, error: resultError, refetch: refetchResult, } = useAnalyticsResult(selectedAnalytics);
     // Handle directive actions
     const { handleAction, isProcessing } = useDirectiveAction(onDirectiveAction);
+    const [processingId, setProcessingId] = React.useState(null);
     // Auto-select first analytics if none selected
     React.useEffect(() => {
         if (configs && configs.length > 0 && !selectedAnalytics) {
@@ -2189,14 +2192,24 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
         }
     };
     const handleDirectiveAction = (directive, action) => __awaiter(this, void 0, void 0, function* () {
+        setProcessingId(directive.directiveId);
         yield handleAction(directive, action);
+        setProcessingId(null);
         // Refetch result to get updated directive statuses
         refetchResult();
     });
+    // Get all unique directive types (actions)
+    const directiveTypes = React.useMemo(() => {
+        if (!(result === null || result === void 0 ? void 0 : result.directives))
+            return [];
+        const types = Array.from(new Set(result.directives.map((d) => d.action)));
+        return types;
+    }, [result === null || result === void 0 ? void 0 : result.directives]);
+    // Filter directives by status and type
     const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => {
-        if (directiveFilter === "all")
-            return true;
-        return d.status === directiveFilter;
+        const statusMatch = directiveFilter === "all" || d.status === directiveFilter;
+        const typeMatch = directiveType === "all" || d.action === directiveType;
+        return statusMatch && typeMatch;
     })) || [];
     const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find((c) => c.analyticsType === selectedAnalytics);
     const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "proposed").length) || 0;
@@ -2468,6 +2481,8 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                             display: "flex",
                             justifyContent: "space-between",
                             alignItems: "center",
+                            flexWrap: "wrap",
+                            gap: theme.spacing.sm,
                         } },
                         React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
                         React.createElement("div", { style: { display: "flex", gap: theme.spacing.xs } },
@@ -2502,7 +2517,22 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                         : theme.colors.text }) },
                                 "Declined (",
                                 declinedCount,
-                                ")"))),
+                                ")")),
+                        directiveTypes.length > 1 && (React.createElement("select", { value: directiveType, onChange: e => setDirectiveType(e.target.value), style: {
+                                padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                                borderRadius: theme.borderRadius,
+                                border: `1px solid ${theme.colors.border}`,
+                                background: theme.colors.surface,
+                                color: theme.colors.text,
+                                fontSize: theme.fontSizes.sm,
+                                fontWeight: 500,
+                                outline: "none",
+                                minWidth: 120,
+                                marginLeft: theme.spacing.sm,
+                                cursor: "pointer",
+                            } },
+                            React.createElement("option", { value: "all" }, "All types"),
+                            directiveTypes.map(type => (React.createElement("option", { key: type, value: type }, type)))))),
                     filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
                     React.createElement("div", { style: {
                             display: "flex",
@@ -2547,8 +2577,16 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                 ": ",
                                 param.value)))))),
                         directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
-                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, isProcessing ? "Processing..." : "Execute"),
-                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, "Decline"))))))))))))));
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing && processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing && processingId === directive.directiveId
+                                        ? "not-allowed"
+                                        : "pointer" }) }, isProcessing && processingId === directive.directiveId
+                                ? "Processing..."
+                                : "Execute"),
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing && processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing && processingId === directive.directiveId
+                                        ? "not-allowed"
+                                        : "pointer" }) }, isProcessing && processingId === directive.directiveId
+                                ? "Processing..."
+                                : "Decline"))))))))))))));
 }
 
 exports.AnalyticsAPI = AnalyticsAPI;