@oneuptime/common 11.5.0 → 11.5.2

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -27,9 +27,11 @@ import { AxisDomain } from "recharts/types/util/types";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import {
   AvailableChartColors,
-  AvailableChartColorsKeys,
+  ChartColorValue,
   constructCategoryColors,
   getColorClassName,
+  getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -40,8 +42,8 @@ import ChartCurve from "../../Types/ChartCurve";
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
-  onClick?: (name: string, color: AvailableChartColorsKeys) => void;
+  color: ChartColorValue;
+  onClick?: (name: string, color: ChartColorValue) => void;
   activeLegend?: string;
 }
 
@@ -77,6 +79,11 @@ const LegendItem: ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -166,7 +173,7 @@ const ScrollButton: ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -310,7 +317,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 onClick={onClickLegendItem as any}
                 activeLegend={activeLegend!}
               />
@@ -356,7 +363,7 @@ Legend.displayName = "Legend";
 
 const ChartLegend: (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -365,7 +372,7 @@ const ChartLegend: (
   yAxisWidth?: number,
 ) => React.JSX.Element = (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -432,7 +439,7 @@ export type PayloadItem = {
   // eslint-disable-next-line react/no-unused-prop-types
   index: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   // eslint-disable-next-line react/no-unused-prop-types
   type?: string;
   // eslint-disable-next-line react/no-unused-prop-types
@@ -499,6 +506,11 @@ const ChartTooltip: ({
                         "h-[3px] w-3.5 shrink-0 rounded-full",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -551,7 +563,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -628,7 +640,7 @@ const LineChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, string | number> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -828,7 +840,7 @@ const LineChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -887,14 +899,14 @@ const LineChart: React.ForwardRefExoticComponent<
               />
             ) : null}
             {categories.map((category: string) => {
+              const lineColor: ChartColorValue = categoryColors.get(
+                category,
+              ) as ChartColorValue;
+              const isCustomColor: boolean = isHexColorValue(lineColor);
+              const lineHex: string = getColorHex(lineColor);
               return (
                 <Line
-                  className={cx(
-                    getColorClassName(
-                      categoryColors.get(category) as AvailableChartColorsKeys,
-                      "stroke",
-                    ),
-                  )}
+                  className={cx(getColorClassName(lineColor, "stroke"))}
                   strokeOpacity={
                     activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
@@ -908,24 +920,18 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeLinecap,
                       strokeLinejoin,
                       strokeWidth,
-                      dataKey,
                     } = props;
                     return (
                       <Dot
                         className={cx(
                           "stroke-white",
                           onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(
-                            categoryColors.get(
-                              dataKey,
-                            ) as AvailableChartColorsKeys,
-                            "fill",
-                          ),
+                          getColorClassName(lineColor, "fill"),
                         )}
                         cx={cxCoord}
                         cy={cyCoord}
                         r={5}
-                        fill=""
+                        fill={isCustomColor ? lineHex : ""}
                         stroke={stroke}
                         strokeLinecap={strokeLinecap}
                         strokeLinejoin={strokeLinejoin}
@@ -944,7 +950,6 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeWidth,
                       cx: cxCoord,
                       cy: cyCoord,
-                      dataKey,
                       index,
                     } = props;
 
@@ -964,19 +969,14 @@ const LineChart: React.ForwardRefExoticComponent<
                           cy={cyCoord}
                           r={5}
                           stroke={stroke}
-                          fill=""
+                          fill={isCustomColor ? lineHex : ""}
                           strokeLinecap={strokeLinecap}
                           strokeLinejoin={strokeLinejoin}
                           strokeWidth={strokeWidth}
                           className={cx(
                             "stroke-white",
                             onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(
-                              categoryColors.get(
-                                dataKey,
-                              ) as AvailableChartColorsKeys,
-                              "fill",
-                            ),
+                            getColorClassName(lineColor, "fill"),
                           )}
                         />
                       );
@@ -987,7 +987,11 @@ const LineChart: React.ForwardRefExoticComponent<
                   name={category}
                   type={props.curve || ChartCurve.LINEAR}
                   dataKey={category}
-                  stroke=""
+                  /*
+                   * Custom hex → set the stroke inline; named palette → keep ""
+                   * so the `stroke-*` Tailwind class on the Line applies.
+                   */
+                  stroke={isCustomColor ? lineHex : ""}
                   strokeWidth={2}
                   strokeLinejoin="round"
                   strokeLinecap="round"

package/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx

@@ -21,6 +21,7 @@ import type { AxisDomain } from "recharts/types/util/types";
 import {
   AvailableChartColors,
   type AvailableChartColorsKeys,
+  type ChartColorValue,
   constructCategoryColors,
   getColorClassName,
 } from "../Utils/ChartColors";
@@ -64,7 +65,7 @@ const SparkAreaChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -209,7 +210,7 @@ const SparkLineChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -304,7 +305,7 @@ const SparkBarChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: AxisDomain = getYAxisDomain(

package/UI/Components/Charts/ChartLibrary/Utils/ChartColors.ts

@@ -92,16 +92,38 @@ export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys(
   chartColors,
 ) as Array<AvailableChartColorsKeys>;
 
+/*
+ * A chart color value can be either a named palette key (e.g. "indigo") or
+ * a raw hex string (e.g. "#6366f1"). Named keys resolve to Tailwind classes;
+ * hex values are applied via inline styles by the chart renderers. This lets
+ * users pick arbitrary custom/brand colors per series while the default
+ * palette continues to use theme-safe named colors.
+ */
+export type ChartColorValue = AvailableChartColorsKeys | string;
+
+/*
+ * True when the value is a raw hex color rather than a named palette key.
+ * The chart renderers use this to decide between an inline style (hex) and
+ * a Tailwind color class (named key). Accepts ChartColorValue (which widens
+ * to `string | number` because `chartColors` has a string index signature) —
+ * only actual `#…` strings return true.
+ */
+export const isHexColorValue: (
+  color: ChartColorValue | undefined | null,
+) => boolean = (color: ChartColorValue | undefined | null): boolean => {
+  return typeof color === "string" && color.trim().startsWith("#");
+};
+
 export const constructCategoryColors: (
   categories: string[],
-  colors: AvailableChartColorsKeys[],
-) => Map<string, AvailableChartColorsKeys> = (
+  colors: Array<ChartColorValue>,
+) => Map<string, ChartColorValue> = (
   categories: string[],
-  colors: AvailableChartColorsKeys[],
-): Map<string, AvailableChartColorsKeys> => {
-  const categoryColors: Map<string, AvailableChartColorsKeys> = new Map<
+  colors: Array<ChartColorValue>,
+): Map<string, ChartColorValue> => {
+  const categoryColors: Map<string, ChartColorValue> = new Map<
     string,
-    AvailableChartColorsKeys
+    ChartColorValue
   >();
   categories.forEach((category: string, index: number) => {
     categoryColors.set(category, colors[index % colors.length]!);
@@ -110,9 +132,9 @@ export const constructCategoryColors: (
 };
 
 export const getColorClassName: (
-  color: AvailableChartColorsKeys,
+  color: ChartColorValue,
   type: ColorUtility,
-) => string = (color: AvailableChartColorsKeys, type: ColorUtility): string => {
+) => string = (color: ChartColorValue, type: ColorUtility): string => {
   const fallbackColor: {
     bg: string;
     stroke: string;
@@ -124,11 +146,27 @@ export const getColorClassName: (
     fill: "fill-gray-500",
     text: "text-gray-500",
   };
+  /*
+   * Hex values have no Tailwind class — callers apply them via inline style,
+   * so return an empty string here rather than the gray fallback (which would
+   * otherwise paint a custom-colored series gray).
+   */
+  if (isHexColorValue(color)) {
+    return "";
+  }
   return chartColors[color]?.[type] ?? fallbackColor[type];
 };
 
-export const getColorHex: (color: AvailableChartColorsKeys) => string = (
-  color: AvailableChartColorsKeys,
+/*
+ * Resolve any chart color value to a concrete hex string. Named palette keys
+ * map to their `chartColors` hex; raw hex values pass through unchanged. Used
+ * for SVG fill/stroke and inline style props where a class name won't work.
+ */
+export const getColorHex: (color: ChartColorValue) => string = (
+  color: ChartColorValue,
 ): string => {
+  if (isHexColorValue(color)) {
+    return color as string;
+  }
   return chartColors[color]?.hex ?? "#6b7280";
 };

package/UI/Components/Charts/Line/LineChart.tsx

@@ -1,5 +1,8 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
-import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
+import {
+  AvailableChartColorsKeys,
+  ChartColorValue,
+} from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -41,6 +44,12 @@ export interface ComponentProps {
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   showLegend?: boolean | undefined;
+  /*
+   * Optional per-series color override (named palette keys or hex strings).
+   * When provided, replaces the default LineChartPalette. Indexed by series
+   * position (index % length).
+   */
+  colors?: Array<ChartColorValue> | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -118,7 +127,11 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         tickGap={30}
         index={"Time"}
         categories={categories}
-        colors={LineChartPalette}
+        colors={
+          props.colors && props.colors.length > 0
+            ? props.colors
+            : LineChartPalette
+        }
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -15,6 +15,12 @@ import Button, { ButtonStyleType } from "../Button/Button";
 export interface ComponentProps {
   children: Array<ReactElement>;
   elementToBeShownInsteadOfButton?: ReactElement | undefined;
+  /*
+   * Classes applied to the custom-trigger wrapper (the focusable element that
+   * opens the menu). Lets callers style a custom trigger — e.g. to match a
+   * button group — while keeping the menu's keyboard/ARIA behavior.
+   */
+  triggerClassName?: string | undefined;
   menuIcon?: IconProp | undefined;
   text?: string | undefined;
 }
@@ -63,6 +69,23 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [focusedIndex]);
 
+    const restoreFocusToTrigger: () => void = useCallback((): void => {
+      /*
+       * Return focus to the trigger after the menu closes via Escape or item
+       * selection (WAI-ARIA menu-button pattern). Deferred to the next frame so
+       * the menu has unmounted, and only reclaimed if focus fell back to
+       * <body> — so we never steal focus that the activated item intentionally
+       * moved elsewhere (e.g. into a dialog it opened). Not called on
+       * outside-click dismissal, which should leave focus where the user clicked.
+       */
+      requestAnimationFrame(() => {
+        const activeElement: Element | null = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+          document.getElementById(buttonId)?.focus();
+        }
+      });
+    }, [buttonId]);
+
     const handleKeyDown: (event: React.KeyboardEvent) => void = useCallback(
       (event: React.KeyboardEvent): void => {
         if (!isComponentVisible) {
@@ -75,6 +98,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
           case "Escape":
             event.preventDefault();
             setIsComponentVisible(false);
+            restoreFocusToTrigger();
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -98,7 +122,12 @@ const MoreMenu: React.ForwardRefExoticComponent<
             break;
         }
       },
-      [isComponentVisible, props.children.length, setIsComponentVisible],
+      [
+        isComponentVisible,
+        props.children.length,
+        setIsComponentVisible,
+        restoreFocusToTrigger,
+      ],
     );
 
     return (
@@ -124,13 +153,42 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
         {props.elementToBeShownInsteadOfButton && (
           <div
+            /*
+             * The id lets the menu's aria-labelledby resolve and lets focus
+             * return here on close. But the menu-button ARIA (haspopup/expanded/
+             * label) is only applied when a caller opts in with triggerClassName
+             * — callers that pass their own element (some already a real
+             * <button>) keep a bare wrapper to avoid layering redundant button
+             * semantics on top.
+             */
+            id={buttonId}
+            className={props.triggerClassName}
             onClick={() => {
               setIsComponentVisible(!isDropdownVisible);
             }}
             role="button"
             tabIndex={0}
+            aria-label={
+              props.triggerClassName ? props.text || "More options" : undefined
+            }
+            aria-haspopup={props.triggerClassName ? "menu" : undefined}
+            aria-expanded={
+              props.triggerClassName ? isComponentVisible : undefined
+            }
+            aria-controls={
+              props.triggerClassName && isComponentVisible ? menuId : undefined
+            }
             onKeyDown={(e: React.KeyboardEvent) => {
-              if (e.key === "Enter" || e.key === " ") {
+              /*
+               * Only respond to the wrapper's own keys, never a focusable
+               * child's (e.g. an input inside a custom trigger), so typing
+               * isn't hijacked.
+               */
+              if (
+                (e.key === "Enter" || e.key === " ") &&
+                e.target === e.currentTarget
+              ) {
+                e.preventDefault();
                 setIsComponentVisible(!isDropdownVisible);
               }
             }}
@@ -160,6 +218,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
                   onClick={() => {
                     if (isComponentVisible) {
                       setIsComponentVisible(false);
+                      restoreFocusToTrigger();
                     }
                   }}
                   onKeyDown={(e: React.KeyboardEvent) => {

package/build/dist/Server/Infrastructure/Postgres/SchemaMigrations/1783650000000-AddAdditionalParamsToLlmProvider.js

@@ -3,10 +3,10 @@ export class AddAdditionalParamsToLlmProvider1783650000000 {
         this.name = "AddAdditionalParamsToLlmProvider1783650000000";
     }
     async up(queryRunner) {
-        await queryRunner.query(`ALTER TABLE "LlmProvider" ADD "additionalParams" jsonb`);
+        await queryRunner.query(`ALTER TABLE "LlmProvider" ADD COLUMN IF NOT EXISTS "additionalParams" jsonb`);
     }
     async down(queryRunner) {
-        await queryRunner.query(`ALTER TABLE "LlmProvider" DROP COLUMN "additionalParams"`);
+        await queryRunner.query(`ALTER TABLE "LlmProvider" DROP COLUMN IF EXISTS "additionalParams"`);
     }
 }
 //# sourceMappingURL=1783650000000-AddAdditionalParamsToLlmProvider.js.map

package/build/dist/Server/Infrastructure/Postgres/SchemaMigrations/1783650000000-AddAdditionalParamsToLlmProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"1783650000000-AddAdditionalParamsToLlmProvider.js","sourceRoot":"","sources":["../../../../../../Server/Infrastructure/Postgres/SchemaMigrations/1783650000000-AddAdditionalParamsToLlmProvider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,6CAA6C;IAA1D;QAGS,SAAI,GAAG,+CAA+C,CAAC;IAahE,CAAC;IAXQ,KAAK,CAAC,EAAE,CAAC,WAAwB;QACtC,MAAM,WAAW,CAAC,KAAK,CACrB,wDAAwD,CACzD,CAAC;IACJ,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,WAAwB;QACxC,MAAM,WAAW,CAAC,KAAK,CACrB,0DAA0D,CAC3D,CAAC;IACJ,CAAC;CACF"}
+{"version":3,"file":"1783650000000-AddAdditionalParamsToLlmProvider.js","sourceRoot":"","sources":["../../../../../../Server/Infrastructure/Postgres/SchemaMigrations/1783650000000-AddAdditionalParamsToLlmProvider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,6CAA6C;IAA1D;QAGS,SAAI,GAAG,+CAA+C,CAAC;IAahE,CAAC;IAXQ,KAAK,CAAC,EAAE,CAAC,WAAwB;QACtC,MAAM,WAAW,CAAC,KAAK,CACrB,6EAA6E,CAC9E,CAAC;IACJ,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,WAAwB;QACxC,MAAM,WAAW,CAAC,KAAK,CACrB,oEAAoE,CACrE,CAAC;IACJ,CAAC;CACF"}