@oneuptime/common 7.0.2928 → 7.0.2972

package/UI/Components/OrderedStatesList/Item.tsx

@@ -0,0 +1,114 @@
+import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import Button, { ButtonSize } from "../Button/Button";
+import ConfirmModal from "../Modal/ConfirmModal";
+import GenericObject from "Common/Types/GenericObject";
+import React, { ReactElement, useState } from "react";
+
+export interface ComponentProps<T extends GenericObject> {
+  item: T;
+  actionButtons?: undefined | Array<ActionButtonSchema<T>>;
+  titleField: keyof T;
+  descriptionField?: keyof T | undefined;
+  getTitleElement?: ((item: T) => ReactElement) | undefined;
+  getDescriptionElement?: ((item: T) => ReactElement) | undefined;
+}
+
+type ItemFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+const Item: ItemFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  const [isButtonLoading, setIsButtonLoading] = useState<Array<boolean>>(
+    props.actionButtons?.map(() => {
+      return false;
+    }) || [],
+  );
+
+  const [error, setError] = useState<string>("");
+
+  return (
+    <div className="text-center border border-gray-300 rounded p-10 space-y-4 w-fit">
+      {error && (
+        <ConfirmModal
+          title={`Error`}
+          description={error}
+          submitButtonText={"Close"}
+          onSubmit={() => {
+            return setError("");
+          }}
+        />
+      )}
+
+      {!props.getTitleElement && (
+        <div>
+          {props.item[props.titleField]
+            ? (props.item[props.titleField] as string)
+            : ""}
+        </div>
+      )}
+      {props.getTitleElement && (
+        <div className="justify-center flex">
+          {props.getTitleElement(props.item)}
+        </div>
+      )}
+      <div className="text-gray-500">
+        {props.getDescriptionElement && (
+          <div className="justify-center flex">
+            {props.getDescriptionElement(props.item)}
+          </div>
+        )}
+        {!props.getDescriptionElement && (
+          <div>
+            {props.descriptionField && props.item[props.descriptionField]
+              ? (props.item[props.descriptionField] as string)
+              : ""}
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center">
+        {props.actionButtons?.map(
+          (button: ActionButtonSchema<T>, i: number) => {
+            if (button.isVisible && !button.isVisible(props.item)) {
+              return <></>;
+            }
+
+            return (
+              <div key={i} className="">
+                <Button
+                  buttonSize={ButtonSize.Small}
+                  title={button.title}
+                  icon={button.icon}
+                  buttonStyle={button.buttonStyleType}
+                  isLoading={isButtonLoading[i]}
+                  onClick={() => {
+                    if (button.onClick) {
+                      isButtonLoading[i] = true;
+                      setIsButtonLoading(isButtonLoading);
+                      button.onClick(
+                        props.item,
+                        () => {
+                          // on action complete
+                          isButtonLoading[i] = false;
+                          setIsButtonLoading(isButtonLoading);
+                        },
+                        (err: Error) => {
+                          isButtonLoading[i] = false;
+                          setIsButtonLoading(isButtonLoading);
+                          setError((err as Error).message);
+                        },
+                      );
+                    }
+                  }}
+                />
+              </div>
+            );
+          },
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Item;

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -0,0 +1,155 @@
+import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import ComponentLoader from "../ComponentLoader/ComponentLoader";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import Icon, { SizeProp } from "../Icon/Icon";
+import Item from "./Item";
+import GenericObject from "Common/Types/GenericObject";
+import IconProp from "Common/Types/Icon/IconProp";
+import React, { ReactElement } from "react";
+
+export interface ComponentProps<T extends GenericObject> {
+  data: Array<T>;
+  onCreateNewItem?: ((order: number) => void) | undefined;
+  noItemsMessage?: string | ReactElement | undefined;
+  error?: string | undefined;
+  isLoading?: boolean | undefined;
+  onRefreshClick?: (() => void) | undefined;
+  singularLabel: string;
+  id?: string;
+  actionButtons?: undefined | Array<ActionButtonSchema<T>>;
+  titleField: keyof T;
+  descriptionField?: keyof T | undefined;
+  orderField: keyof T;
+  getTitleElement?: ((item: T) => ReactElement) | undefined;
+  getDescriptionElement?: ((item: T) => ReactElement) | undefined;
+  shouldAddItemInTheEnd?: boolean | undefined;
+  shouldAddItemInTheBeginning?: boolean | undefined;
+}
+
+type OrderedStatesListFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  if (props.isLoading) {
+    return <ComponentLoader />;
+  }
+
+  if (props.error) {
+    return (
+      <ErrorMessage error={props.error} onRefreshClick={props.onRefreshClick} />
+    );
+  }
+
+  if (props.data.length === 0) {
+    return (
+      <ErrorMessage
+        error={
+          props.noItemsMessage
+            ? props.noItemsMessage
+            : `No ${props.singularLabel.toLocaleLowerCase()}`
+        }
+        onRefreshClick={props.onRefreshClick}
+      />
+    );
+  }
+
+  return (
+    <div className="m-32 text-center">
+      {props.error && <p>{props.error}</p>}
+      {!props.error &&
+        props.data &&
+        props.data.length > 0 &&
+        props.data.map((item: T, i: number) => {
+          const isEnd: boolean = !(i + 1 < props.data.length);
+          const isBeginning: boolean = !(i === 0);
+
+          return (
+            <div key={i} id={props.id} className="items-center w-fit m-auto">
+              {props.onCreateNewItem &&
+                isBeginning &&
+                props.shouldAddItemInTheBeginning && (
+                  <div className="text-center">
+                    <div
+                      className="m-auto rounded-full items-center cursor-pointer text-gray-400 hover:bg-gray-50 hover:text-gray-600 items-center border border-gray-300 p-5 w-fit"
+                      onClick={() => {
+                        props.onCreateNewItem &&
+                          props.onCreateNewItem(
+                            item[props.orderField]
+                              ? (item[props.orderField] as number) + 1
+                              : 0,
+                          );
+                      }}
+                    >
+                      <div className="flex text-center">
+                        <Icon icon={IconProp.Add} className="m-auto h-5 w-5" />{" "}
+                        <span className="text-sm ml-2">Add New Item</span>
+                      </div>
+                    </div>
+
+                    <div className="items-center m-10 ">
+                      <Icon
+                        icon={IconProp.ChevronDown}
+                        size={SizeProp.Regular}
+                        className="m-auto h-5 w-5 text-gray-500"
+                      />
+                    </div>
+                  </div>
+                )}
+              <Item
+                item={item}
+                titleField={props.titleField}
+                descriptionField={props.descriptionField}
+                actionButtons={props.actionButtons}
+                getTitleElement={props.getTitleElement}
+                getDescriptionElement={props.getDescriptionElement}
+              />
+              {((isEnd && props.shouldAddItemInTheEnd) || !isEnd) && (
+                <div className="vertical-list items-center m-10 ">
+                  <Icon
+                    icon={IconProp.ChevronDown}
+                    size={SizeProp.Regular}
+                    className="m-auto h-5 w-5 text-gray-500"
+                  />
+                </div>
+              )}
+              {props.onCreateNewItem &&
+                ((isEnd && props.shouldAddItemInTheEnd) || !isEnd) && (
+                  <div className="text-center">
+                    <div
+                      className="m-auto items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5 w-fit"
+                      onClick={() => {
+                        props.onCreateNewItem &&
+                          props.onCreateNewItem(
+                            item[props.orderField]
+                              ? (item[props.orderField] as number) + 1
+                              : 0,
+                          );
+                      }}
+                    >
+                      <div className="flex items-center ">
+                        <Icon icon={IconProp.Add} className="m-auto h-5 w-5" />{" "}
+                        <span className="text-sm ml-2">Add New Item</span>
+                      </div>
+                    </div>
+                    {!isEnd && (
+                      <div className="items-center m-10">
+                        <Icon
+                          icon={IconProp.ChevronDown}
+                          size={SizeProp.Larger}
+                          className="m-auto h-5 w-5 text-gray-500"
+                        />
+                      </div>
+                    )}
+                  </div>
+                )}
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default OrderedStatesList;

package/UI/Components/Page/ModelPage.tsx

@@ -0,0 +1,79 @@
+import API from "../../Utils/API/API";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import Page from "./Page";
+import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Link from "Common/Types/Link";
+import ObjectID from "Common/Types/ObjectID";
+import React, { ReactElement, useState } from "react";
+import useAsyncEffect from "use-async-effect";
+
+export interface ComponentProps<TBaseModel extends BaseModel> {
+  title?: string | undefined;
+  breadcrumbLinks?: Array<Link> | undefined;
+  children: Array<ReactElement> | ReactElement;
+  sideMenu?: undefined | ReactElement;
+  className?: string | undefined;
+  modelType: { new (): TBaseModel };
+  modelId: ObjectID;
+  modelNameField: string;
+}
+
+const ModelPage: <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+) => ReactElement = <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+): ReactElement => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const [error, setError] = useState<string>("");
+
+  const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
+    // get item.
+    setIsLoading(true);
+
+    setError("");
+    try {
+      const item: TBaseModel | null = await ModelAPI.getItem({
+        modelType: props.modelType,
+        id: props.modelId,
+        select: {
+          [props.modelNameField]: true,
+        } as any,
+        requestOptions: {},
+      });
+
+      if (!item) {
+        setError(
+          `Cannot load ${(
+            new props.modelType()?.singularName || "item"
+          ).toLowerCase()}. It could be because you don't have enough permissions to read this ${(
+            new props.modelType()?.singularName || "item"
+          ).toLowerCase()}.`,
+        );
+
+        return;
+      }
+
+      setTitle(
+        `${props.title || ""} - ${
+          (item as any)[props.modelNameField] as string
+        }`,
+      );
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
+    setIsLoading(false);
+  };
+
+  const [title, setTitle] = useState<string | undefined>(props.title);
+
+  useAsyncEffect(async () => {
+    // fetch the model
+    await fetchItem();
+  }, []);
+
+  return <Page {...props} isLoading={isLoading} error={error} title={title} />;
+};
+
+export default ModelPage;

package/UI/Components/Page/Page.tsx

@@ -0,0 +1,91 @@
+import Analytics from "../../Utils/Analytics";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import PageLoader from "../Loader/PageLoader";
+import Link from "Common/Types/Link";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+
+export interface ComponentProps {
+  title?: string | undefined;
+  breadcrumbLinks?: Array<Link> | undefined;
+  children: Array<ReactElement> | ReactElement;
+  sideMenu?: undefined | ReactElement;
+  className?: string | undefined;
+  isLoading?: boolean | undefined;
+  error?: string | undefined;
+}
+
+const Page: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  useEffect(() => {
+    if (props.breadcrumbLinks && props.breadcrumbLinks.length > 0) {
+      Analytics.capture(
+        "Page View: " +
+          props.breadcrumbLinks
+            .map((link: Link) => {
+              return link.title;
+            })
+            .join(" > ")
+            .toString() || "",
+      );
+    }
+  }, [props.breadcrumbLinks]);
+
+  if (props.error) {
+    return <ErrorMessage error={props.error} />;
+  }
+
+  return (
+    <div
+      className={
+        props.className ||
+        "mb-auto max-w-full px-4 sm:px-6 lg:px-8 mt-5 mb-20 h-max"
+      }
+    >
+      {((props.breadcrumbLinks && props.breadcrumbLinks.length > 0) ||
+        props.title) && (
+        <div className="mb-5">
+          {props.breadcrumbLinks && props.breadcrumbLinks.length > 0 && (
+            <div className="mt-2">
+              <Breadcrumbs links={props.breadcrumbLinks} />
+            </div>
+          )}
+          {props.title && (
+            <div className="mt-2 md:flex md:items-center md:justify-between">
+              <div className="min-w-0">
+                <h2 className="text-xl leading-7  text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
+                  {props.title}
+                </h2>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {props.sideMenu && (
+        <main className="mx-auto max-w-full pb-10 mr-5">
+          <div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
+            {props.sideMenu}
+
+            {!props.isLoading && (
+              <div className="space-y-6 sm:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
+                {props.children}
+              </div>
+            )}
+            {props.isLoading && (
+              <div className="col-span-10">
+                <PageLoader isVisible={true} />
+              </div>
+            )}
+          </div>
+        </main>
+      )}
+
+      {!props.sideMenu && !props.isLoading && props.children}
+      {!props.sideMenu && props.isLoading && <PageLoader isVisible={true} />}
+    </div>
+  );
+};
+
+export default Page;

package/UI/Components/Pagination/Pagination.tsx

@@ -0,0 +1,243 @@
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import BasicFormModal from "../FormModal/BasicFormModal";
+import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
+import IconProp from "Common/Types/Icon/IconProp";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface PaginationNavigationItem {
+  pageNumber: number;
+  itemsOnPage: number;
+}
+
+export interface ComponentProps {
+  currentPageNumber: number;
+  totalItemsCount: number;
+  itemsOnPage: number;
+  onNavigateToPage: (pageNumber: number, itemsOnPage: number) => void;
+  isLoading: boolean;
+  isError: boolean;
+  singularLabel: string;
+  pluralLabel: string;
+  dataTestId?: string;
+}
+
+const Pagination: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [minPageNumber, setMinPageNumber] = useState<number>(1);
+  const [maxPageNumber, setMaxPageNumber] = useState<number>(1);
+
+  const setMinAndMaxPageNumber: () => void = (): void => {
+    setMinPageNumber(1);
+    let maxPageNo: number =
+      props.totalItemsCount % props.itemsOnPage === 0
+        ? props.totalItemsCount / props.itemsOnPage + 1
+        : props.totalItemsCount / props.itemsOnPage;
+
+    if (maxPageNo < 1) {
+      maxPageNo = 1;
+    }
+
+    setMaxPageNumber(Math.ceil(maxPageNo));
+  };
+
+  useEffect(() => {
+    setMinAndMaxPageNumber();
+  }, []);
+
+  useEffect(() => {
+    setMinAndMaxPageNumber();
+  }, [props.totalItemsCount, props.itemsOnPage]);
+
+  const isPreviousDisabled: boolean =
+    props.currentPageNumber === 1 || props.isLoading || props.isError;
+  const isNextDisabled: boolean =
+    props.currentPageNumber * props.itemsOnPage >= props.totalItemsCount ||
+    props.isLoading ||
+    props.isError;
+  const isCurrentPageButtonDisabled: boolean =
+    props.totalItemsCount === 0 || props.isLoading || props.isError;
+
+  const [showPaginationModel, setShowPaginationModel] =
+    useState<boolean>(false);
+
+  return (
+    <div
+      className="flex items-center justify-between border-t border-gray-200 bg-white px-4"
+      data-testid={props.dataTestId}
+    >
+      <div>
+        <p className="text-sm text-gray-500">
+          {!props.isLoading && (
+            <span>
+              {props.totalItemsCount.toLocaleString()}{" "}
+              {props.totalItemsCount > 1
+                ? props.pluralLabel
+                : props.singularLabel}{" "}
+              {`in total. Showing ${
+                props.itemsOnPage * (props.currentPageNumber - 1) + 1
+              } to ${
+                props.itemsOnPage * props.currentPageNumber
+              } on this page.`}
+            </span>
+          )}
+        </p>
+      </div>
+      <div>
+        <nav className="inline-flex -space-x-px rounded-md shadow-sm">
+          <div className="my-2">
+            <Button
+              dataTestId="show-pagination-modal-button"
+              className="mx-2 my-2"
+              buttonSize={ButtonSize.ExtraSmall}
+              icon={IconProp.AdjustmentHorizontal}
+              buttonStyle={ButtonStyleType.ICON_LIGHT}
+              onClick={() => {
+                setShowPaginationModel(true);
+              }}
+            />
+          </div>
+
+          <ul className="py-3">
+            <li
+              onClick={() => {
+                let currentPageNumber: number = props.currentPageNumber;
+
+                if (typeof currentPageNumber === "string") {
+                  currentPageNumber = parseInt(currentPageNumber);
+                }
+
+                if (props.onNavigateToPage && !isPreviousDisabled) {
+                  props.onNavigateToPage(
+                    currentPageNumber - 1,
+                    props.itemsOnPage,
+                  );
+                }
+              }}
+              className={` inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500   ${
+                isPreviousDisabled
+                  ? "bg-gray-100"
+                  : "hover:bg-gray-50 cursor-pointer"
+              }`}
+            >
+              <span className="page-link">Previous</span>
+            </li>
+            <li
+              data-testid="current-page-link"
+              className={` z-10 inline-flex items-center border border-x-0 border-gray-300 hover:bg-gray-50 px-4 py-2 text-sm font-medium text-text-600  cursor-pointer ${
+                isCurrentPageButtonDisabled ? "bg-gray-100" : ""
+              }`}
+              onClick={() => {
+                setShowPaginationModel(true);
+              }}
+            >
+              <span>{props.currentPageNumber}</span>
+            </li>
+            <li
+              onClick={() => {
+                let currentPageNumber: number = props.currentPageNumber;
+
+                if (typeof currentPageNumber === "string") {
+                  currentPageNumber = parseInt(currentPageNumber);
+                }
+
+                if (props.onNavigateToPage && !isNextDisabled) {
+                  props.onNavigateToPage(
+                    currentPageNumber + 1,
+                    props.itemsOnPage,
+                  );
+                }
+              }}
+              className={` inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500  ${
+                isNextDisabled
+                  ? "bg-gray-100"
+                  : " hover:bg-gray-50 cursor-pointer"
+              }`}
+            >
+              <span>Next</span>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      {showPaginationModel && (
+        <BasicFormModal<PaginationNavigationItem>
+          data-testid="pagination-modal"
+          title={"Navigate to Page"}
+          onClose={() => {
+            setShowPaginationModel(false);
+          }}
+          submitButtonText={"Go to Page"}
+          onSubmit={(item: PaginationNavigationItem) => {
+            if (props.onNavigateToPage) {
+              props.onNavigateToPage(item.pageNumber, item.itemsOnPage);
+            }
+            setShowPaginationModel(false);
+          }}
+          formProps={{
+            initialValues: {
+              pageNumber: props.currentPageNumber,
+              itemsOnPage: props.itemsOnPage,
+            },
+            fields: [
+              {
+                title: "Page Number",
+                description: `You can enter page numbers from ${
+                  minPageNumber !== maxPageNumber
+                    ? minPageNumber + " to " + maxPageNumber
+                    : minPageNumber
+                }. Please enter it here:`,
+                field: {
+                  pageNumber: true,
+                },
+                disabled: minPageNumber === maxPageNumber,
+                placeholder: "1",
+                required: true,
+                validation: {
+                  minValue: minPageNumber,
+                  maxValue: maxPageNumber,
+                },
+                fieldType: FormFieldSchemaType.PositiveNumber,
+              },
+              {
+                title: `${props.pluralLabel} on Page `,
+                description: `Enter the number of ${props.pluralLabel.toLowerCase()} you would like to see on the page:`,
+                field: {
+                  itemsOnPage: true,
+                },
+                placeholder: "10",
+                required: true,
+                fieldType: FormFieldSchemaType.Dropdown,
+                dropdownOptions: [
+                  {
+                    value: 10,
+                    label: "10",
+                  },
+                  {
+                    value: 20,
+                    label: "20",
+                  },
+                  {
+                    value: 25,
+                    label: "25",
+                  },
+                  {
+                    value: 50,
+                    label: "50",
+                  },
+                ],
+              },
+            ],
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Pagination;