@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/lib/mergeKeys.ts

@@ -0,0 +1,86 @@
+export function mergeKeys(_base: string[], _curr: string[]) {
+  // Merge keys from base, target tables. Unlike default union, it preserves the order for column rename, added, removed.
+  const base = [..._base];
+  const curr = [..._curr];
+
+  const results: string[] = [];
+  while (base.length > 0 && curr.length > 0) {
+    if (results.includes(base[0])) {
+      base.shift();
+    } else if (results.includes(curr[0])) {
+      curr.shift();
+    } else if (base[0] === curr[0]) {
+      results.push(base[0]);
+      base.shift();
+      curr.shift();
+    } else if (curr.includes(base[0])) {
+      const idx = curr.indexOf(base[0]);
+      for (let i = 0; i < idx; i++) {
+        if (!results.includes(curr[i])) {
+          results.push(curr[i]);
+        }
+      }
+      results.push(base[0]);
+      base.shift();
+      curr.splice(0, idx + 1);
+    } else {
+      results.push(base[0]);
+      base.shift();
+    }
+  }
+
+  base.forEach((key) => {
+    if (!results.includes(key)) {
+      results.push(key);
+    }
+  });
+
+  curr.forEach((key) => {
+    if (!results.includes(key)) {
+      results.push(key);
+    }
+  });
+
+  return results;
+}
+
+type MergeStatus = "added" | "removed" | "reordered" | undefined;
+
+export function mergeKeysWithStatus(
+  _base: string[],
+  _curr: string[],
+): Record<string, MergeStatus> {
+  const merged = mergeKeys(_base, _curr);
+  const result: ReturnType<typeof mergeKeysWithStatus> = {};
+
+  for (const item of merged) {
+    if (!_base.includes(item)) {
+      result[item] = "added";
+    } else if (!_curr.includes(item)) {
+      result[item] = "removed";
+    } else {
+      result[item] = undefined;
+    }
+  }
+
+  // reorder case
+  const baseIndexMap: Record<string, number | undefined> = {};
+  _base.forEach((item, index) => {
+    baseIndexMap[item] = index;
+  });
+  let last = -1;
+  for (const item of merged) {
+    const curr = baseIndexMap[item];
+    if (curr == null) {
+      continue;
+    }
+
+    if (curr > last) {
+      last = curr;
+    } else {
+      result[item] = "reordered";
+    }
+  }
+
+  return result;
+}

package/recce-source/js/src/lib/result/ResultErrorFallback.tsx

@@ -0,0 +1,9 @@
+import MuiAlert from "@mui/material/Alert";
+import { FallbackRender } from "@sentry/react";
+import * as React from "react";
+
+const ResultErrorFallback: FallbackRender = (errorData) => {
+  return <MuiAlert severity="error">{String(errorData.error)}</MuiAlert>;
+};
+
+export default ResultErrorFallback;

package/recce-source/js/src/lib/utils/formatTime.ts

@@ -0,0 +1,84 @@
+/**
+ * Time formatting utilities for idle timeout display
+ */
+
+export type TimeFormatStyle = "compact" | "verbose";
+
+interface TimeComponents {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+/**
+ * Break down seconds into hours, minutes, seconds
+ */
+function getTimeComponents(totalSeconds: number): TimeComponents {
+  const seconds = Math.floor(totalSeconds);
+  return {
+    hours: Math.floor(seconds / 3600),
+    minutes: Math.floor((seconds % 3600) / 60),
+    seconds: seconds % 60,
+  };
+}
+
+/**
+ * Format time in compact style (MM:SS or HH:MM:SS)
+ * Used for countdown badges where space is limited
+ */
+function formatCompact({ hours, minutes, seconds }: TimeComponents): string {
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Format time in verbose style (human-readable)
+ * Used for messages where clarity is more important than brevity
+ *
+ * Examples:
+ * - Less than 1 minute: "30 seconds"
+ * - Exact minutes: "5 mins"
+ * - Minutes with seconds: "2 mins 30 seconds"
+ * - With hours: "1 hour 30 mins"
+ */
+function formatVerbose({ hours, minutes, seconds }: TimeComponents): string {
+  const parts: string[] = [];
+
+  // Add hours if present
+  if (hours > 0) {
+    parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
+  }
+
+  // Add minutes if present (or if hours present and minutes > 0)
+  if (minutes > 0) {
+    parts.push(`${minutes} min${minutes !== 1 ? "s" : ""}`);
+  }
+
+  // Add seconds only if no hours (keep message concise for long durations)
+  // or if it's the only component
+  if (hours === 0 && (parts.length === 0 || seconds > 0)) {
+    parts.push(`${seconds} second${seconds !== 1 ? "s" : ""}`);
+  }
+
+  return parts.join(" ");
+}
+
+/**
+ * Format seconds into human-readable time string
+ *
+ * @param totalSeconds - Total seconds to format
+ * @param style - "compact" for MM:SS, "verbose" for human-readable
+ */
+export function formatDuration(
+  totalSeconds: number,
+  style: TimeFormatStyle = "verbose",
+): string {
+  const components = getTimeComponents(totalSeconds);
+
+  if (style === "compact") {
+    return formatCompact(components);
+  }
+  return formatVerbose(components);
+}

package/recce-source/js/src/lib/utils/urls.ts

@@ -0,0 +1,16 @@
+import { RECCE_SUPPORT_CALENDAR_URL } from "@/constants/urls";
+import { RecceInstanceInfo } from "@/lib/api/instanceInfo";
+
+/**
+ * Generate the settings URL based on instance info
+ * @param instanceInfo - Recce instance information containing web_url and organization_name
+ * @returns Absolute URL to settings page or fallback to calendar booking
+ */
+export function getSettingsUrl(instanceInfo?: RecceInstanceInfo): string {
+  if (instanceInfo?.organization_name && instanceInfo.web_url) {
+    // Use absolute URL from Recce Cloud
+    return `${instanceInfo.web_url}/organizations/${instanceInfo.organization_name}/settings`;
+  }
+  // Fallback to calendar booking if not in cloud environment
+  return RECCE_SUPPORT_CALENDAR_URL;
+}

package/recce-source/js/src/utils/DropdownValuesInput.tsx

@@ -0,0 +1,297 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import InputBase from "@mui/material/InputBase";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import MuiTooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import _ from "lodash";
+import React, { type MouseEvent, useRef, useState } from "react";
+
+export interface DropdownValuesInputProps {
+  unitName: string;
+  suggestionList?: string[];
+  defaultValues?: string[];
+  onValuesChange: (values: string[]) => void;
+  className?: string;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg";
+  width?: string | number;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const DropdownValuesInput = (props: DropdownValuesInputProps) => {
+  const { defaultValues, suggestionList, onValuesChange, className } = props;
+  const [values, setValues] = useState<string[]>(defaultValues ?? []);
+  const [filter, setFilter] = useState<string>("");
+  const [isTyping, setIsTyping] = useState<boolean>(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const open = Boolean(anchorEl);
+
+  const showNumberOfValuesSelected = (tags: string[]) => {
+    if (tags.length > 1) {
+      return `${tags.length} ${props.unitName}s selected`;
+    } else if (tags.length === 1) {
+      return tags[0];
+    }
+    return "";
+  };
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+    // Focus input after menu opens
+    setTimeout(() => inputRef.current?.focus(), 100);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setIsTyping(false);
+  };
+
+  const handleSelect = (value: string) => {
+    if (!values.includes(value)) {
+      setFilter("");
+      setValues([...values, value]);
+      onValuesChange([...values, value]);
+    }
+  };
+
+  const handleClear = () => {
+    setFilter("");
+    setValues([]);
+    onValuesChange([]);
+  };
+
+  const handleRemoveValue = (value: string) => {
+    setValues(values.filter((v) => v !== value));
+    onValuesChange(values.filter((v) => v !== value));
+  };
+
+  // Filter the suggestion list without case sensitivity based on the current input
+  const lowerCaseFilter = filter.toLowerCase();
+  const filteredList =
+    suggestionList
+      ?.filter(
+        (value) =>
+          lowerCaseFilter === "" ||
+          value.toLowerCase().includes(lowerCaseFilter),
+      )
+      .filter((value) => !values.includes(value)) ?? [];
+  const limit = 10;
+
+  // Size mapping for font sizes
+  const getFontSize = () => {
+    switch (props.size) {
+      case "2xs":
+        return "0.625rem";
+      case "xs":
+        return "0.75rem";
+      case "sm":
+        return "0.875rem";
+      default:
+        return "0.875rem";
+    }
+  };
+
+  const getHeight = () => {
+    switch (props.size) {
+      case "2xs":
+        return 24;
+      case "xs":
+        return 28;
+      case "sm":
+        return 32;
+      default:
+        return 36;
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: props.width,
+      }}
+      className={className}
+    >
+      <Button
+        variant="outlined"
+        color="neutral"
+        size="small"
+        onClick={handleClick}
+        disabled={props.disabled}
+        sx={{
+          width: "100%",
+          height: getHeight(),
+          justifyContent: "space-between",
+          textTransform: "none",
+          fontSize: getFontSize(),
+          fontWeight: "normal",
+          px: 1,
+        }}
+      >
+        <Typography
+          component="span"
+          sx={{
+            fontSize: getFontSize(),
+            color: values.length > 0 ? "text.primary" : "text.secondary",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {showNumberOfValuesSelected(values) || props.placeholder || ""}
+        </Typography>
+        {values.length > 0 && (
+          <Typography
+            component="span"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleClear();
+            }}
+            sx={{
+              fontSize: getFontSize(),
+              color: "primary.main",
+              cursor: "pointer",
+              ml: 1,
+              "&:hover": { textDecoration: "underline" },
+            }}
+          >
+            Clear
+          </Typography>
+        )}
+      </Button>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        slotProps={{
+          paper: {
+            sx: {
+              width: props.width,
+              fontSize: getFontSize(),
+            },
+          },
+        }}
+      >
+        {/* Input Filter & Show Tags */}
+        <Box sx={{ px: 0.5, py: 0.5 }}>
+          <Box
+            sx={{
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: 1,
+              p: 0.5,
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 0.5,
+              alignItems: "center",
+            }}
+            className="no-track-pii-safe"
+          >
+            {values.map((value) => (
+              <Chip
+                key={value}
+                label={value}
+                size="small"
+                onDelete={() => handleRemoveValue(value)}
+                sx={{ height: 22, fontSize: getFontSize() }}
+              />
+            ))}
+            <InputBase
+              inputRef={inputRef}
+              placeholder="Filter or add custom keys"
+              value={filter}
+              onChange={(e) => {
+                setFilter(e.target.value);
+                setIsTyping(true);
+              }}
+              onKeyDown={(e) => {
+                // Stop propagation to prevent MUI Menu's typeahead navigation
+                // from intercepting key presses (except Escape to close menu)
+                if (e.key !== "Escape") {
+                  e.stopPropagation();
+                }
+
+                const target = e.target as HTMLInputElement;
+                const newText = target.value.trim().replace(",", "");
+                switch (e.key) {
+                  case ",":
+                  case "Enter":
+                    e.preventDefault();
+                    if (newText) {
+                      handleSelect(newText);
+                      setFilter("");
+                    }
+                    break;
+                  case "Backspace":
+                    if (target.value === "" && values.length > 0) {
+                      setValues(values.slice(0, -1));
+                      onValuesChange(values.slice(0, -1));
+                    }
+                    break;
+                  default:
+                    break;
+                }
+              }}
+              onBlur={() => {
+                if (inputRef.current && isTyping) {
+                  inputRef.current.focus();
+                }
+              }}
+              sx={{
+                flex: 1,
+                minWidth: 120,
+                fontSize: getFontSize(),
+                "& input": {
+                  p: 0.5,
+                },
+              }}
+            />
+          </Box>
+        </Box>
+
+        <Divider />
+
+        {/* Suggestion List */}
+        {filter !== "" && !suggestionList?.includes(filter) && (
+          <MenuItem
+            onClick={() => {
+              handleSelect(filter);
+              setIsTyping(false);
+            }}
+            sx={{ fontSize: getFontSize() }}
+          >
+            Add &apos;{filter}&apos; to the list
+          </MenuItem>
+        )}
+        {filteredList.slice(0, limit).map((value, cid) => (
+          <MenuItem
+            key={_.uniqueId(`option-${cid}`)}
+            onClick={() => {
+              handleSelect(value);
+            }}
+            sx={{ fontSize: getFontSize() }}
+          >
+            {value}
+          </MenuItem>
+        ))}
+        {filteredList.length > limit && (
+          <MuiTooltip
+            title="Please use filter to find more items"
+            placement="top"
+          >
+            <Box px={1.5} py={0.5} color="text.secondary" fontSize="8pt">
+              and {filteredList.length - limit} more items...
+            </Box>
+          </MuiTooltip>
+        )}
+      </Menu>
+    </Box>
+  );
+};