@oneuptime/common 7.0.4877 → 7.0.4892

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

@@ -0,0 +1,367 @@
+// Tremor Spark Chart [v1.0.0]
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+"use client";
+
+import React from "react";
+import {
+  Area,
+  Bar,
+  Line,
+  AreaChart as RechartsAreaChart,
+  BarChart as RechartsBarChart,
+  LineChart as RechartsLineChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import type { AxisDomain } from "recharts/types/util/types";
+
+import {
+  AvailableChartColors,
+  type AvailableChartColorsKeys,
+  constructCategoryColors,
+  getColorClassName,
+} from "../Utils/ChartColors";
+import { cx } from "../Utils/Cx";
+import { getYAxisDomain } from "../Utils/GetYAxisDomain";
+
+//#region SparkAreaChart
+
+interface SparkAreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: Record<string, any>[];
+  categories: string[];
+  index: string;
+  colors?: AvailableChartColorsKeys[];
+  autoMinValue?: boolean;
+  minValue?: number;
+  maxValue?: number;
+  connectNulls?: boolean;
+  type?: "default" | "stacked" | "percent";
+  fill?: "gradient" | "solid" | "none";
+}
+
+const SparkAreaChart: React.ForwardRefExoticComponent<
+  SparkAreaChartProps & React.RefAttributes<HTMLDivElement>
+> = React.forwardRef<HTMLDivElement, SparkAreaChartProps>(
+  (
+    props: SparkAreaChartProps,
+    forwardedRef: React.Ref<HTMLDivElement>,
+  ): React.ReactElement => {
+    const {
+      data = [],
+      categories = [],
+      index,
+      colors = AvailableChartColors,
+      autoMinValue = false,
+      minValue,
+      maxValue,
+      connectNulls = false,
+      type = "default",
+      className,
+      fill = "gradient",
+      ...other
+    } = props;
+
+    const categoryColors: Map<string, AvailableChartColorsKeys> =
+      constructCategoryColors(categories, colors);
+    const yAxisDomain: AxisDomain = getYAxisDomain(
+      autoMinValue,
+      minValue,
+      maxValue,
+    );
+    const stacked: boolean = type === "stacked" || type === "percent";
+    const areaId: string = React.useId();
+
+    const getFillContent: (
+      fillType: SparkAreaChartProps["fill"],
+    ) => React.ReactElement = (
+      fillType: SparkAreaChartProps["fill"],
+    ): React.ReactElement => {
+      switch (fillType) {
+        case "none":
+          return <stop stopColor="currentColor" stopOpacity={0} />;
+        case "gradient":
+          return (
+            <>
+              <stop offset="5%" stopColor="currentColor" stopOpacity={0.4} />
+              <stop offset="95%" stopColor="currentColor" stopOpacity={0} />
+            </>
+          );
+        case "solid":
+          return <stop stopColor="currentColor" stopOpacity={0.3} />;
+        default:
+          return <stop stopColor="currentColor" stopOpacity={0.3} />;
+      }
+    };
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cx("h-12 w-28", className)}
+        data-tremor-id="tremor-raw"
+        {...other}
+      >
+        <ResponsiveContainer>
+          <RechartsAreaChart
+            data={data}
+            margin={{
+              bottom: 1,
+              left: 1,
+              right: 1,
+              top: 1,
+            }}
+            {...(type === "percent" && { stackOffset: "expand" })}
+          >
+            <XAxis hide dataKey={index} />
+            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
+
+            {categories.map((category: string) => {
+              const categoryId: string = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`;
+              return (
+                <React.Fragment key={category}>
+                  <defs>
+                    <linearGradient
+                      key={category}
+                      className={cx(
+                        getColorClassName(
+                          categoryColors.get(
+                            category,
+                          ) as AvailableChartColorsKeys,
+                          "text",
+                        ),
+                      )}
+                      id={categoryId}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      {getFillContent(fill)}
+                    </linearGradient>
+                  </defs>
+                  <Area
+                    className={cx(
+                      getColorClassName(
+                        categoryColors.get(
+                          category,
+                        ) as AvailableChartColorsKeys,
+                        "stroke",
+                      ),
+                    )}
+                    dot={false}
+                    strokeOpacity={1}
+                    name={category}
+                    type="linear"
+                    dataKey={category}
+                    stroke=""
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                    isAnimationActive={false}
+                    connectNulls={connectNulls}
+                    {...(stacked && { stackId: "stack" })}
+                    fill={`url(#${categoryId})`}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </RechartsAreaChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  },
+);
+
+SparkAreaChart.displayName = "SparkAreaChart";
+
+//#region SparkLineChart
+
+interface SparkLineChartProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: Record<string, any>[];
+  categories: string[];
+  index: string;
+  colors?: AvailableChartColorsKeys[];
+  autoMinValue?: boolean;
+  minValue?: number;
+  maxValue?: number;
+  connectNulls?: boolean;
+}
+
+const SparkLineChart: React.ForwardRefExoticComponent<
+  SparkLineChartProps & React.RefAttributes<HTMLDivElement>
+> = React.forwardRef<HTMLDivElement, SparkLineChartProps>(
+  (
+    props: SparkLineChartProps,
+    forwardedRef: React.Ref<HTMLDivElement>,
+  ): React.ReactElement => {
+    const {
+      data = [],
+      categories = [],
+      index,
+      colors = AvailableChartColors,
+      autoMinValue = false,
+      minValue,
+      maxValue,
+      connectNulls = false,
+      className,
+      ...other
+    } = props;
+
+    const categoryColors: Map<string, AvailableChartColorsKeys> =
+      constructCategoryColors(categories, colors);
+    const yAxisDomain: AxisDomain = getYAxisDomain(
+      autoMinValue,
+      minValue,
+      maxValue,
+    );
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cx("h-12 w-28", className)}
+        data-tremor-id="tremor-raw"
+        {...other}
+      >
+        <ResponsiveContainer>
+          <RechartsLineChart
+            data={data}
+            margin={{
+              bottom: 1,
+              left: 1,
+              right: 1,
+              top: 1,
+            }}
+          >
+            <XAxis hide dataKey={index} />
+            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
+            {categories.map((category: string) => {
+              return (
+                <Line
+                  className={cx(
+                    getColorClassName(
+                      categoryColors.get(category) as AvailableChartColorsKeys,
+                      "stroke",
+                    ),
+                  )}
+                  dot={false}
+                  strokeOpacity={1}
+                  key={category}
+                  name={category}
+                  type="linear"
+                  dataKey={category}
+                  stroke=""
+                  strokeWidth={2}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                  isAnimationActive={false}
+                  connectNulls={connectNulls}
+                />
+              );
+            })}
+          </RechartsLineChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  },
+);
+
+SparkLineChart.displayName = "SparkLineChart";
+
+//#region SparkBarChart
+
+interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: Record<string, any>[];
+  index: string;
+  categories: string[];
+  colors?: AvailableChartColorsKeys[];
+  autoMinValue?: boolean;
+  minValue?: number;
+  maxValue?: number;
+  barCategoryGap?: string | number;
+  type?: "default" | "stacked" | "percent";
+}
+
+const SparkBarChart: React.ForwardRefExoticComponent<
+  BarChartProps & React.RefAttributes<HTMLDivElement>
+> = React.forwardRef<HTMLDivElement, BarChartProps>(
+  (
+    props: BarChartProps,
+    forwardedRef: React.Ref<HTMLDivElement>,
+  ): React.ReactElement => {
+    const {
+      data = [],
+      categories = [],
+      index,
+      colors = AvailableChartColors,
+      autoMinValue = false,
+      minValue,
+      maxValue,
+      barCategoryGap,
+      type = "default",
+      className,
+      ...other
+    } = props;
+
+    const categoryColors: Map<string, AvailableChartColorsKeys> =
+      constructCategoryColors(categories, colors);
+
+    const yAxisDomain: AxisDomain = getYAxisDomain(
+      autoMinValue,
+      minValue,
+      maxValue,
+    );
+    const stacked: boolean = type === "stacked" || type === "percent";
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cx("h-12 w-28", className)}
+        data-tremor-id="tremor-raw"
+        {...other}
+      >
+        <ResponsiveContainer>
+          <RechartsBarChart
+            data={data}
+            margin={{
+              bottom: 1,
+              left: 1,
+              right: 1,
+              top: 1,
+            }}
+            {...(type === "percent" && { stackOffset: "expand" })}
+            {...(barCategoryGap !== undefined && { barCategoryGap })}
+          >
+            <XAxis hide dataKey={index} />
+            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
+
+            {categories.map((category: string) => {
+              return (
+                <Bar
+                  className={cx(
+                    getColorClassName(
+                      categoryColors.get(category) as AvailableChartColorsKeys,
+                      "fill",
+                    ),
+                  )}
+                  key={category}
+                  name={category}
+                  type="linear"
+                  dataKey={category}
+                  {...(stacked && { stackId: "stack" })}
+                  isAnimationActive={false}
+                  fill=""
+                />
+              );
+            })}
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  },
+);
+
+SparkBarChart.displayName = "SparkBarChart";
+
+export { SparkAreaChart, SparkLineChart, SparkBarChart };

package/UI/Components/Checkbox/CheckboxViewer.tsx

@@ -1,4 +1,4 @@
-import Icon from "../Icon/Icon";
+import IconText from "../IconText/IconText";
 import { Green, Red } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement } from "react";
@@ -12,23 +12,12 @@ const CheckboxViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div>
-      <div className="flex">
-        <div className="h-6 w-6">
-          {props.isChecked ? (
-            <Icon
-              className="h-5 w-5"
-              icon={IconProp.CheckCircle}
-              color={Green}
-            />
-          ) : (
-            <Icon className="h-5 w-5" icon={IconProp.CircleClose} color={Red} />
-          )}
-        </div>
-        <div className="text-sm text-gray-900 flex justify-left">
-          {props.text}
-        </div>
-      </div>
+    <div className="h-6">
+      <IconText
+        text={props.text}
+        icon={props.isChecked ? IconProp.CheckCircle : IconProp.CircleClose}
+        iconColor={props.isChecked ? Green : Red}
+      />
     </div>
   );
 };

package/UI/Components/IconText/IconText.tsx

@@ -0,0 +1,91 @@
+import Icon, { SizeProp } from "../Icon/Icon";
+import Color from "../../../Types/Color";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  text: string;
+  icon: IconProp;
+  iconColor?: Color | null;
+  textColor?: Color | null;
+  iconSize?: SizeProp;
+  iconClassName?: string;
+  textClassName?: string;
+  containerClassName?: string;
+  spacing?: "sm" | "md" | "lg";
+  alignment?: "left" | "center" | "right";
+  onClick?: (() => void) | undefined;
+  "data-testid"?: string;
+}
+
+const IconText: FunctionComponent<ComponentProps> = ({
+  text,
+  icon,
+  iconColor = null,
+  textColor = null,
+  iconSize = SizeProp.Regular,
+  iconClassName = "h-5 w-5",
+  textClassName = "text-sm text-gray-900",
+  containerClassName = "",
+  spacing = "sm",
+  alignment = "left",
+  onClick,
+  "data-testid": dataTestId,
+}: ComponentProps): ReactElement => {
+  const getSpacingClass: () => string = (): string => {
+    switch (spacing) {
+      case "sm":
+        return "gap-1";
+      case "md":
+        return "gap-2";
+      case "lg":
+        return "gap-3";
+      default:
+        return "gap-1";
+    }
+  };
+
+  const getAlignmentClass: () => string = (): string => {
+    switch (alignment) {
+      case "center":
+        return "justify-center";
+      case "right":
+        return "justify-end";
+      case "left":
+      default:
+        return "justify-start";
+    }
+  };
+
+  const handleClick: () => void = (): void => {
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      className={`flex items-center ${getSpacingClass()} ${getAlignmentClass()} ${containerClassName}`}
+      onClick={handleClick}
+      data-testid={dataTestId}
+      style={{ cursor: onClick ? "pointer" : "default" }}
+    >
+      <div className="flex-shrink-0">
+        <Icon
+          className={iconClassName}
+          icon={icon}
+          color={iconColor}
+          size={iconSize}
+        />
+      </div>
+      <div
+        className={`flex ${getAlignmentClass()} ${textClassName}`}
+        style={{ color: textColor?.toString() || "inherit" }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default IconText;

package/UI/Components/IconText/Index.ts

@@ -0,0 +1,3 @@
+import IconText from "./IconText";
+
+export default IconText;

package/UI/Components/Modal/ConfirmModal.tsx

@@ -44,7 +44,7 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
     >
       <div
         data-testid="confirm-modal-description"
-        className="text-gray-500 mt-5 text-sm"
+        className="text-gray-500 mt-5 text-sm text-wrap"
       >
         {props.description}
       </div>

package/build/dist/Models/DatabaseModels/Incident.js

@@ -35,6 +35,7 @@ import TenantColumn from "../../Types/Database/TenantColumn";
 import IconProp from "../../Types/Icon/IconProp";
 import ObjectID from "../../Types/ObjectID";
 import Permission from "../../Types/Permission";
+import StatusPageSubscriberNotificationStatus from "../../Types/StatusPage/StatusPageSubscriberNotificationStatus";
 import { Column, Entity, Index, JoinColumn, JoinTable, ManyToMany, ManyToOne, } from "typeorm";
 let Incident = class Incident extends BaseModel {
     constructor() {
@@ -57,7 +58,8 @@ let Incident = class Incident extends BaseModel {
         this.incidentSeverityId = undefined;
         this.changeMonitorStatusTo = undefined;
         this.changeMonitorStatusToId = undefined;
-        this.isStatusPageSubscribersNotifiedOnIncidentCreated = undefined;
+        this.subscriberNotificationStatusOnIncidentCreated = undefined;
+        this.subscriberNotificationStatusMessage = undefined;
         this.shouldStatusPageSubscribersBeNotifiedOnIncidentCreated = undefined;
         this.customFields = undefined;
         this.isOwnerNotifiedOfResourceCreation = undefined;
@@ -697,30 +699,73 @@ __decorate([
 ], Incident.prototype, "changeMonitorStatusToId", void 0);
 __decorate([
     ColumnAccessControl({
-        create: [],
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateProjectIncident,
+        ],
         read: [
             Permission.ProjectOwner,
             Permission.ProjectAdmin,
             Permission.ProjectMember,
             Permission.ReadProjectIncident,
         ],
-        update: [],
+        update: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.EditProjectIncident,
+        ],
     }),
     TableColumn({
         isDefaultValueColumn: true,
         computed: true,
         hideColumnInDocumentation: true,
-        type: TableColumnType.Boolean,
-        title: "Are subscribers notified?",
-        description: "Are subscribers notified about this incident?",
-        defaultValue: false,
+        type: TableColumnType.ShortText,
+        title: "Subscriber Notification Status",
+        description: "Status of notification sent to subscribers about this incident",
+        defaultValue: StatusPageSubscriberNotificationStatus.Pending,
     }),
     Column({
-        type: ColumnType.Boolean,
-        default: false,
+        type: ColumnType.ShortText,
+        default: StatusPageSubscriberNotificationStatus.Pending,
     }),
-    __metadata("design:type", Boolean)
-], Incident.prototype, "isStatusPageSubscribersNotifiedOnIncidentCreated", void 0);
+    __metadata("design:type", String)
+], Incident.prototype, "subscriberNotificationStatusOnIncidentCreated", void 0);
+__decorate([
+    ColumnAccessControl({
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateProjectIncident,
+        ],
+        read: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.ReadProjectIncident,
+        ],
+        update: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.EditProjectIncident,
+        ],
+    }),
+    TableColumn({
+        type: TableColumnType.VeryLongText,
+        title: "Notification Status Message",
+        description: "Status message for subscriber notifications - includes success messages, failure reasons, or skip reasons",
+        required: false,
+    }),
+    Column({
+        type: ColumnType.VeryLongText,
+        nullable: true,
+    }),
+    __metadata("design:type", String)
+], Incident.prototype, "subscriberNotificationStatusMessage", void 0);
 __decorate([
     ColumnAccessControl({
         create: [