@oneuptime/common 7.0.2928 → 7.0.2972

package/UI/Components/Pill/Pill.tsx

@@ -0,0 +1,67 @@
+import { Black } from "Common/Types/BrandColors";
+import Color from "Common/Types/Color";
+import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
+
+export enum PillSize {
+  Small = "10px",
+  Normal = "13px",
+  Large = "15px",
+  ExtraLarge = "18px",
+}
+
+export interface ComponentProps {
+  text: string;
+  color: Color;
+  size?: PillSize | undefined;
+  style?: CSSProperties;
+  isMinimal?: boolean | undefined;
+}
+
+const Pill: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  if (props.isMinimal) {
+    return (
+      <span className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm">
+        <span className="absolute flex flex-shrink-0 items-center justify-center">
+          <span
+            className="h-1.5 w-1.5 rounded-full bg-rose-500"
+            style={{
+              backgroundColor:
+                props.style?.backgroundColor || props.color
+                  ? props.color.toString()
+                  : Black.toString(),
+            }}
+            aria-hidden="true"
+          ></span>
+        </span>
+        <span className="ml-3.5 font-medium text-gray-900">{props.text}</span>
+      </span>
+    );
+  }
+  return (
+    <span
+      data-testid="pill"
+      className="rounded-full p-1 pl-3 pr-3"
+      style={{
+        // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+
+        color:
+          props.style?.color || Color.shouldUseDarkText(props.color || Black)
+            ? "#000000"
+            : "#ffffff",
+        backgroundColor:
+          props.style?.backgroundColor || props.color
+            ? props.color.toString()
+            : Black.toString(),
+        fontSize: props.size ? props.size.toString() : PillSize.Normal,
+        ...props.style,
+      }}
+    >
+      {" "}
+      {props.text}{" "}
+    </span>
+  );
+};
+
+export default Pill;

package/UI/Components/Probe/Probe.tsx

@@ -0,0 +1,69 @@
+import { FILE_URL } from "../../Config";
+import Icon from "../Icon/Icon";
+import Image from "../Image/Image";
+import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import URL from "Common/Types/API/URL";
+import IconProp from "Common/Types/Icon/IconProp";
+import { JSONObject } from "Common/Types/JSON";
+import Probe from "Common/Models/DatabaseModels/Probe";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  probe?: Probe | JSONObject | undefined | null;
+  suffix?: string | undefined;
+}
+
+const ProbeElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  let probe: JSONObject | null | undefined = null;
+
+  if (props.probe instanceof Probe) {
+    probe = BaseModel.toJSONObject(props.probe, Probe);
+  } else {
+    probe = props.probe;
+  }
+
+  if (!probe) {
+    return (
+      <div className="flex">
+        <div className="bold" data-testid="probe-not-found">
+          No probe found.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex">
+      <div>
+        {props.probe?.iconFileId && (
+          <Image
+            className="h-6 w-6 rounded-full"
+            data-testid="probe-image"
+            imageUrl={URL.fromString(FILE_URL.toString()).addRoute(
+              "/image/" + props.probe?.iconFileId.toString(),
+            )}
+            alt={probe["name"]?.toString() || "Probe"}
+          />
+        )}
+        {!props.probe?.iconFileId && (
+          <Icon
+            data-testid="probe-icon"
+            icon={IconProp.Signal}
+            className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-0.5 mt-0.5 h-6 w-6"
+          />
+        )}
+      </div>
+      <div className="mt-1 mr-1 ml-3">
+        <div>
+          <span data-testid="probe-name">{`${
+            (probe["name"]?.toString() as string) || ""
+          } ${props.suffix || ""}`}</span>{" "}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProbeElement;

package/UI/Components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,69 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export enum ProgressBarSize {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+}
+
+export interface ComponentProps {
+  count: number;
+  totalCount: number;
+  suffix: string;
+  size?: ProgressBarSize;
+}
+
+const ProgressBar: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [percent, setPercent] = useState<number>(0);
+
+  useEffect(() => {
+    let percent: number = 0;
+
+    try {
+      percent = (props.count * 100) / props.totalCount;
+    } catch (err) {
+      // do nothing.
+    }
+
+    if (percent > 100) {
+      percent = 100;
+    }
+
+    setPercent(Math.ceil(percent));
+  }, [props.count, props.totalCount]);
+
+  let progressBarSize: string = "h-4";
+
+  if (props.size === ProgressBarSize.Small) {
+    progressBarSize = "h-2";
+  } else if (props.size === ProgressBarSize.Large) {
+    progressBarSize = "h-6";
+  }
+
+  return (
+    <div className={`w-full ${progressBarSize} mb-4 bg-gray-200 rounded-full`}>
+      <div
+        data-testid="progress-bar"
+        className={`${progressBarSize} bg-indigo-600 rounded-full `}
+        style={{ width: percent + "%" }}
+      ></div>
+      <div className="text-sm text-gray-400 mt-1 flex justify-between">
+        <div data-testid="progress-bar-count">
+          {props.count} {props.suffix}
+        </div>
+        <div data-testid="progress-bar-total-count">
+          {props.totalCount} {props.suffix}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/UI/Components/QR/QR.tsx

@@ -0,0 +1,41 @@
+import QRCode from "qrcode";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+
+export interface ComponentProps {
+  text: string;
+}
+
+const QRCodeElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [error, setError] = React.useState<string | null>(null);
+  const [data, setData] = React.useState<string | null>(null);
+
+  useEffect(() => {
+    QRCode.toDataURL(
+      props.text,
+      (err: Error | null | undefined, data: string) => {
+        if (err) {
+          setError(err.message);
+          return;
+        }
+        setData(data);
+      },
+    );
+  }, [props.text]);
+
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
+
+  return (
+    <img
+      className="h-42 w-42 flex align-center item-center"
+      src={data || undefined}
+      alt={props.text}
+    />
+  );
+};
+
+export default QRCodeElement;

package/UI/Components/Radio/Radio.tsx

@@ -0,0 +1,66 @@
+import { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
+import Text from "Common/Types/Text";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface RadioOption extends DropdownOption {}
+
+export type RadioValue = DropdownValue;
+
+export interface ComponentProps {
+  options: Array<RadioOption>;
+  initialValue?: undefined | RadioOption;
+  className?: undefined | string;
+  onChange?:
+    | undefined
+    | ((value: RadioValue | Array<RadioValue> | null) => void);
+  value?: RadioOption | undefined;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  tabIndex?: number | undefined;
+  error?: string | undefined;
+}
+
+const Radio: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [value, setValue] = useState<RadioOption | undefined>(
+    props.initialValue || props.value,
+  );
+
+  const groupName: string = Text.generateRandomText();
+
+  return (
+    <div className={`mt-2 space-y-2 ${props.className}`}>
+      {props.options.map((option: RadioOption, index: number) => {
+        return (
+          <div key={index} className="flex items-center gap-x-3">
+            <input
+              tabIndex={props.tabIndex}
+              defaultChecked={value?.value === option.value}
+              onClick={() => {
+                setValue(option);
+                props.onChange && props.onChange(option.value);
+                props.onBlur && props.onBlur();
+                props.onFocus && props.onFocus();
+              }}
+              name={groupName}
+              type="radio"
+              className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+            />
+            <label className="block text-sm font-medium leading-6 text-gray-900">
+              {option.label}
+            </label>
+          </div>
+        );
+      })}
+
+      {props.error && (
+        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+          {props.error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Radio;

package/UI/Components/RadioButtons/BasicRadioButtons.tsx

@@ -0,0 +1,93 @@
+import ObjectID from "Common/Types/ObjectID";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface BasicRadioButtonOption {
+  title: string;
+  description?: string | undefined;
+  value: string;
+  children?: ReactElement | undefined;
+}
+
+export interface ComponentProps {
+  onChange: (value: string) => void;
+  initialValue?: string | undefined;
+  options: Array<BasicRadioButtonOption>;
+  error?: string | undefined;
+  id?: string | undefined;
+}
+
+const BasicRadioButton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [id] = useState<string>(props.id || ObjectID.generate().toString());
+
+  const [value, setValue] = useState<string>("");
+
+  useEffect(() => {
+    if (props.initialValue) {
+      setValue(props.initialValue);
+      props.onChange(props.initialValue);
+    } else {
+      setValue("");
+      props.onChange("");
+    }
+  }, [props.initialValue]);
+
+  type HandleChangeFunction = (content: string) => void;
+
+  const handleChange: HandleChangeFunction = (content: string): void => {
+    setValue(content);
+    props.onChange(content);
+  };
+
+  return (
+    <div>
+      <fieldset id={id} className="mt-4">
+        <div className="space-y-4">
+          {props.options.map(
+            (radioButton: BasicRadioButtonOption, i: number) => {
+              const checked: boolean = value === radioButton.value;
+
+              return (
+                <div key={i}>
+                  <div className="flex items-center">
+                    <input
+                      type="radio"
+                      name={id}
+                      checked={checked}
+                      onClick={() => {
+                        handleChange(radioButton.value);
+                      }}
+                      className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    />
+                    <label className="ml-3 block text-sm font-medium leading-6 text-gray-900">
+                      <span className="font-medium text-gray-900">
+                        {radioButton.title}
+                      </span>
+                      <span className="ml-1 text-gray-500 sm:ml-0">
+                        {radioButton.description}
+                      </span>
+                    </label>
+                  </div>
+                  {checked && radioButton.children}
+                </div>
+              );
+            },
+          )}
+        </div>
+      </fieldset>
+      {props.error && (
+        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+          {props.error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default BasicRadioButton;

package/UI/Components/RadioButtons/GroupRadioButtons.tsx

@@ -0,0 +1,125 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+import "react-toggle/style.css";
+
+export interface RadioButton {
+  title: string;
+  description?: string | undefined;
+  value: string;
+  sideTitle?: string | undefined;
+  sideDescription?: string | undefined;
+}
+
+export interface ComponentProps {
+  onChange: (value: string) => void;
+  initialValue?: string | undefined;
+  options: Array<RadioButton>;
+  error?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+const RadioButtons: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [value, setValue] = useState<string>("");
+
+  useEffect(() => {
+    if (props.initialValue) {
+      setValue(props.initialValue);
+      props.onChange(props.initialValue);
+    } else {
+      setValue("");
+      props.onChange("");
+    }
+  }, [props.initialValue]);
+
+  type HandleChangeFunction = (content: string) => void;
+
+  const handleChange: HandleChangeFunction = (content: string): void => {
+    setValue(content);
+    props.onChange(content);
+  };
+
+  return (
+    <div>
+      <fieldset role="radiogroup" data-testid={props.dataTestId}>
+        <div className="space-y-2 mt-2">
+          {props.options &&
+            props.options.map((radioButton: RadioButton, i: number) => {
+              let className: string =
+                "relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
+
+              if (value === radioButton.value) {
+                className =
+                  "relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between border-indigo-500 ring-2 ring-indigo-500";
+              }
+
+              return (
+                <label
+                  key={i}
+                  className={className}
+                  onClick={() => {
+                    handleChange(radioButton.value);
+                  }}
+                >
+                  <input
+                    type="radio"
+                    className="sr-only"
+                    aria-labelledby={`server-size-${i}-label`}
+                    aria-describedby={`server-size-${i}-description-0 server-size-${i}-description-1`}
+                    defaultChecked={props.initialValue === radioButton.value}
+                  />
+                  <span className="flex items-center">
+                    <span className="flex flex-col text-sm">
+                      <span
+                        id={`server-size-${i}-label`}
+                        className="font-medium text-gray-900"
+                      >
+                        {radioButton.title}
+                      </span>
+                      <span
+                        id={`server-size-${i}-description-0`}
+                        className="text-gray-500"
+                      >
+                        <span className="block sm:inline">
+                          {" "}
+                          {radioButton.description}
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <span
+                    id={`server-size-${i}-description-1`}
+                    className="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right"
+                  >
+                    <span className="font-medium text-gray-900">
+                      {radioButton.sideTitle}
+                    </span>
+                    <span className="ml-1 text-gray-500 sm:ml-0">
+                      {radioButton.sideDescription}
+                    </span>
+                  </span>
+
+                  <span
+                    className="pointer-events-none absolute -inset-px rounded-lg border-2"
+                    aria-hidden="true"
+                  ></span>
+                </label>
+              );
+            })}
+        </div>
+      </fieldset>
+      {props.error && (
+        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+          {props.error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default RadioButtons;

package/UI/Components/ResetObjectID/ResetObjectID.tsx

@@ -0,0 +1,139 @@
+import API from "../../Utils/API/API";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import { ButtonStyleType } from "../Button/Button";
+import Card from "../Card/Card";
+import ConfirmModal from "../Modal/ConfirmModal";
+import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { TableColumnMetadata } from "Common/Types/Database/TableColumn";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import IconProp from "Common/Types/Icon/IconProp";
+import ObjectID from "Common/Types/ObjectID";
+import React, { ReactElement, useState } from "react";
+
+export interface ComponentProps<TBaseModel extends BaseModel> {
+  modelType: { new (): TBaseModel };
+  fieldName: keyof TBaseModel;
+  title: string;
+  description: string | ReactElement;
+  modelId: ObjectID;
+  onUpdateComplete?: undefined | ((updatedValue: ObjectID) => void);
+}
+
+const ResetObjectID: <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+) => ReactElement = <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+): ReactElement => {
+  const model: TBaseModel = new props.modelType();
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+  const [showResultModal, setShowResultModal] = useState<boolean>(false);
+
+  const [newId, setNewId] = useState<ObjectID | null>(null);
+
+  const resetKey: PromiseVoidFunction = async (): Promise<void> => {
+    setIsLoading(true);
+    try {
+      const resetIdTo: ObjectID = ObjectID.generate();
+      setNewId(resetIdTo);
+      await ModelAPI.updateById<TBaseModel>({
+        modelType: props.modelType,
+        id: props.modelId,
+        data: {
+          [props.fieldName]: resetIdTo.toString(),
+        },
+      });
+      setNewId(resetIdTo);
+      setShowModal(false);
+      setShowResultModal(true);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+      setShowErrorModal(true);
+    }
+
+    setIsLoading(false);
+  };
+
+  const tableColumn: TableColumnMetadata | undefined = props.fieldName
+    ? model.getTableColumnMetadata(props.fieldName as string)
+    : undefined;
+  const tableColumnName: string =
+    tableColumn?.title || (props.fieldName as string);
+
+  return (
+    <>
+      <Card
+        title={`${props.title}`}
+        description={props.description}
+        buttons={[
+          {
+            title: `${props.title}`,
+            buttonStyle: ButtonStyleType.NORMAL,
+            onClick: () => {
+              setShowModal(true);
+            },
+            isLoading: isLoading,
+            icon: IconProp.Reload,
+          },
+        ]}
+      />
+
+      {showModal ? (
+        <ConfirmModal
+          description={`Are you sure you want to reset ${tableColumnName}?`}
+          title={`Reset ${tableColumnName}`}
+          onSubmit={async () => {
+            await resetKey();
+          }}
+          isLoading={isLoading}
+          onClose={() => {
+            setShowModal(false);
+          }}
+          submitButtonText={`Reset`}
+          submitButtonType={ButtonStyleType.DANGER}
+        />
+      ) : (
+        <></>
+      )}
+
+      {showErrorModal ? (
+        <ConfirmModal
+          description={error}
+          title={`Reset Error`}
+          onSubmit={() => {
+            setShowErrorModal(false);
+            setError("");
+          }}
+          submitButtonText={`Close`}
+          submitButtonType={ButtonStyleType.NORMAL}
+        />
+      ) : (
+        <></>
+      )}
+
+      {showResultModal ? (
+        <ConfirmModal
+          description={`Your new ${tableColumnName} is ${
+            newId?.toString() || ""
+          }`}
+          title={`New ${tableColumnName}`}
+          onSubmit={() => {
+            if (props.onUpdateComplete && newId) {
+              props.onUpdateComplete(newId);
+            }
+            setShowResultModal(false);
+            setError("");
+          }}
+          submitButtonText={`Close`}
+          submitButtonType={ButtonStyleType.NORMAL}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default ResetObjectID;

package/UI/Components/ShortcutKey/Shortcut.tsx

@@ -0,0 +1,20 @@
+import Char from "Common/Types/Char";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  shortcuts: Array<Char>;
+}
+
+const Shortcut: FunctionComponent<ComponentProps> = ({
+  shortcuts,
+}: ComponentProps): ReactElement => {
+  return (
+    <div className="shortcut">
+      {shortcuts.map((shortcut: Char, index: number) => {
+        return <code key={index}>{shortcut}</code>;
+      })}
+    </div>
+  );
+};
+
+export default Shortcut;