@oneuptime/common 7.0.3148 → 7.0.3153

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -1,34 +1,93 @@
-import Icon from "../Icon/Icon";
+import Icon, { ThickProp } from "../Icon/Icon";
 import IconProp from "Common/Types/Icon/IconProp";
 import React, { ReactElement } from "react";
+import Tooltip from "../Tooltip/Tooltip";
+import { GetReactElementFunction } from "../../Types/FunctionTypes";
+
+export enum HeaderAlertType {
+  SUCCESS = "Success",
+  ERROR = "Error",
+  WARNING = "Warning",
+  INFO = "Info",
+}
 
 export interface ComponentProps {
   icon: IconProp;
   onClick?: (() => void) | undefined;
   title: string;
   className?: string | undefined;
+  alertType: HeaderAlertType;
+  tooltip?: string | undefined;
 }
 
 const HeaderAlert: (props: ComponentProps) => ReactElement = (
   props: ComponentProps,
 ): ReactElement => {
-  return (
-    <div
-      className={`rounded-md ${props.className} p-3 pr-4`}
-      onClick={() => {
-        props.onClick && props.onClick();
-      }}
-    >
-      <div className="flex ">
-        <div className="flex-shrink-0">
-          <Icon icon={props.icon} className="h-5 w-5 text-white" />
-        </div>
-        <div className="ml-1 flex-1 md:flex md:justify-between">
-          <p className={`text-sm text-white`}>{props.title}</p>
+  let textColor: string = "text-indigo-500"; // default color info.
+
+  switch (props.alertType) {
+    case HeaderAlertType.SUCCESS:
+      textColor = "text-green-500 hover:text-green-600";
+      break;
+    case HeaderAlertType.ERROR:
+      textColor = "text-red-500 hover:text-red-600";
+      break;
+    case HeaderAlertType.WARNING:
+      textColor = "text-yellow-500 hover:text-yellow-600";
+      break;
+    case HeaderAlertType.INFO:
+      textColor = "text-indigo-500 hover:text-indigo-600";
+      break;
+  }
+
+  let bgColor: string = "bg-gray";
+
+  switch (props.alertType) {
+    case HeaderAlertType.SUCCESS:
+      bgColor = "bg-green";
+      break;
+    case HeaderAlertType.ERROR:
+      bgColor = "bg-red";
+      break;
+    case HeaderAlertType.WARNING:
+      bgColor = "bg-yellow";
+      break;
+    case HeaderAlertType.INFO:
+      bgColor = "bg-indigo";
+      break;
+  }
+
+  const getElement: GetReactElementFunction = (): ReactElement => {
+    return (
+      <div
+        className={`cursor-pointer ${bgColor}-50 hover:${bgColor}-200 mr-2 ml-2 p-1 h-7 pl-2 pr-2 rounded-full ${props.className}`}
+        onClick={() => {
+          props.onClick && props.onClick();
+        }}
+      >
+        <div className="flex ">
+          <div className={`flex-shrink-0 mt-0.5 ${textColor}`}>
+            <Icon
+              icon={props.icon}
+              thick={ThickProp.Thick}
+              className={`h-4 w-4 stroke-[3px] font-bold ${textColor}`}
+            />
+          </div>
+          <div className="ml-1 flex-1 md:flex md:justify-between">
+            <p className={`text-sm font-semibold ${textColor}`}>
+              {props.title}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  };
+
+  if (props.tooltip) {
+    return <Tooltip text={props.tooltip}>{getElement()}</Tooltip>;
+  }
+
+  return getElement();
 };
 
 export default HeaderAlert;

package/UI/Components/HeaderAlert/HeaderAlertGroup.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement } from "react";
+
+export interface ComponentProps {
+  children: Array<ReactElement | false>;
+}
+
+const HeaderAlertGroup: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  let children: Array<ReactElement | false> = props.children || [];
+
+  children = children.filter((child: ReactElement | false) => {
+    if (!child) {
+      return false;
+    }
+
+    // check if this child has inner div.
+    if (child.props.children) {
+      return true;
+    }
+
+    return true;
+  });
+
+  if (!children || children.length === 0) {
+    return <></>;
+  }
+
+  // const className: string = "rounded-lg m-3 h-10 pr-0 pl-0 flex border-2 border-gray-200";
+  const className: string = "rounded-lg m-3 mt-5 h-10 pr-0 pl-0 flex";
+
+  return (
+    <div className={className}>
+      {children.map((child: ReactElement | false, index: number) => {
+        // const isLastElement: boolean = index === props.children.length - 1;
+
+        return (
+          <div key={index} className="flex">
+            {child}
+            {/* {!isLastElement && (
+              <div className="border-r-2 border-gray-200"></div>
+            )} */}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default HeaderAlertGroup;

package/UI/Components/HeaderAlert/HeaderModelAlert.tsx

@@ -1,7 +1,7 @@
 import API from "../../Utils/API/API";
 import Query from "../../../Types/BaseDatabase/Query";
 import ModelAPI, { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
-import HeaderAlert from "./HeaderAlert";
+import HeaderAlert, { HeaderAlertType } from "./HeaderAlert";
 import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
 import IconProp from "Common/Types/Icon/IconProp";
@@ -18,6 +18,8 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   onClick?: (() => void) | undefined;
   refreshToggle?: string | undefined;
   className?: string | undefined;
+  alertType: HeaderAlertType;
+  tooltip?: string | undefined;
 }
 
 const HeaderModelAlert: <TBaseModel extends BaseModel>(
@@ -84,6 +86,8 @@ const HeaderModelAlert: <TBaseModel extends BaseModel>(
       icon={props.icon}
       onClick={props.onClick}
       className={props.className}
+      alertType={props.alertType}
+      tooltip={props.tooltip}
     />
   );
 };

package/UI/Components/Icon/Icon.tsx

@@ -194,6 +194,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"
       />,
     );
+  } else if (icon === IconProp.ExclaimationCircle) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+      />,
+    );
   } else if (icon === IconProp.Reload) {
     return getSvgWrapper(
       <path

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -39,7 +39,9 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
-  const [cardButtons, setCardButtons] = useState<Array<CardButtonSchema>>([]);
+  const [cardButtons, setCardButtons] = useState<
+    Array<CardButtonSchema | ReactElement>
+  >([]);
   const [showModel, setShowModal] = useState<boolean>(false);
   const [item, setItem] = useState<TBaseModel | null>(null);
   const [refresher, setRefresher] = useState<boolean>(false);
@@ -65,7 +67,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
           ),
       ) || User.isMasterAdmin();
 
-    let cardButtons: Array<CardButtonSchema> = [];
+    let cardButtons: Array<CardButtonSchema | ReactElement> = [];
 
     if (props.isEditable && hasPermissionToEdit) {
       cardButtons.push({

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -84,6 +84,8 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import TableViewElement from "./TableView";
+import TableView from "../../../Models/DatabaseModels/TableView";
 
 export enum ShowAs {
   Table,
@@ -91,6 +93,10 @@ export enum ShowAs {
   OrderedStatesList,
 }
 
+export interface SaveFilterProps {
+  tableId: string;
+}
+
 export interface BaseTableCallbacks<
   TBaseModel extends BaseModel | AnalyticsBaseModel,
 > {
@@ -207,6 +213,8 @@ export interface BaseTableProps<
   onShowFormType?: (formType: ModalType) => void;
 
   initialFilterData?: FilterData<TBaseModel> | undefined;
+
+  saveFilterProps?: SaveFilterProps | undefined;
 }
 
 export interface ComponentProps<
@@ -254,7 +262,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     Array<ClassicFilterType<TBaseModel>>
   >([]);
 
-  const [cardButtons, setCardButtons] = useState<Array<CardButtonSchema>>([]);
+  const [cardButtons, setCardButtons] = useState<
+    Array<CardButtonSchema | ReactElement>
+  >([]);
 
   const [actionButtonSchema, setActionButtonSchema] = useState<
     Array<ActionButtonSchema<TBaseModel>>
@@ -784,9 +794,63 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     return selectFields;
   };
 
+  const getSaveFilterDropdown: GetReactElementFunction = (): ReactElement => {
+    if (!props.saveFilterProps) {
+      return <></>;
+    }
+
+    if (props.saveFilterProps && props.saveFilterProps.tableId) {
+      const currentTableView: TableView = new TableView();
+      currentTableView.query = (query || {}) as any;
+      currentTableView.itemsOnPage = itemsOnPage || 10;
+
+      if (sortBy && sortOrder) {
+        currentTableView.sort = {
+          [sortBy as string]: sortOrder,
+        };
+      } else {
+        currentTableView.sort = {};
+      }
+
+      return (
+        <TableViewElement
+          tableId={props.saveFilterProps.tableId}
+          currentTableView={currentTableView}
+          onViewChange={(tableView: TableView | null) => {
+            if (tableView) {
+              const sortBy: string | undefined = Object.keys(
+                tableView.sort || {},
+              )[0];
+              let sortOrder: SortOrder = SortOrder.Descending;
+
+              if (sortBy && tableView.sort) {
+                sortOrder =
+                  ((tableView.sort as any)[sortBy as any] as any) ||
+                  SortOrder.Descending;
+              }
+
+              // then set query, sort and items on the page
+              setQuery(tableView.query || {});
+              setItemsOnPage(tableView.itemsOnPage || 10);
+              setSortBy(sortBy as keyof TBaseModel);
+              setSortOrder(sortOrder);
+            } else {
+              setQuery({});
+              setSortBy(null);
+              setSortOrder(SortOrder.Descending);
+              setItemsOnPage(10);
+            }
+          }}
+        />
+      );
+    }
+
+    return <></>;
+  };
+
   const setHeaderButtons: VoidFunction = (): void => {
     // add header buttons.
-    let headerbuttons: Array<CardButtonSchema> = [];
+    let headerbuttons: Array<CardButtonSchema | ReactElement> = [];
 
     if (props.cardProps?.buttons && props.cardProps?.buttons.length > 0) {
       headerbuttons = [...props.cardProps.buttons];
@@ -854,6 +918,10 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       });
     }
 
+    if (props.saveFilterProps) {
+      headerbuttons.push(getSaveFilterDropdown());
+    }
+
     setCardButtons(headerbuttons);
   };
 

package/UI/Components/ModelTable/TableView.tsx

@@ -0,0 +1,317 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+import TableView from "../../../Models/DatabaseModels/TableView";
+import ObjectID from "../../../Types/ObjectID";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import MoreMenuItem from "../MoreMenu/MoreMenuItem";
+import ListResult from "../../Utils/BaseDatabase/ListResult";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import API from "../../../Utils/API";
+import MoreMenuSection from "../MoreMenu/MoreMenuSection";
+import Button, { ButtonStyleType } from "../Button/Button";
+import IconProp from "../../../Types/Icon/IconProp";
+import { BarLoader } from "react-spinners";
+import ConfirmModal from "../Modal/ConfirmModal";
+import ModelFormModal from "../ModelFormModal/ModelFormModal";
+import { FormType } from "../Forms/ModelForm";
+import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
+import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
+import { GetReactElementFunction } from "../../Types/FunctionTypes";
+import ProjectUtil from "../../Utils/Project";
+import User from "../../Utils/User";
+
+export interface ComponentProps {
+  tableId: string;
+  onViewChange: (tableView: TableView | null) => void;
+  currentTableView: TableView | null;
+}
+
+const TableViewElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [error, setError] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [allTableViews, setAllTableViews] = useState<Array<TableView>>([]);
+  const [tableViewToDelete, setTableViewToDelete] = useState<
+    TableView | undefined
+  >(undefined);
+  const [tableViewToEdit, setTableViewToEdit] = useState<TableView | undefined>(
+    undefined,
+  );
+  const [showCreateNewViewModal, setShowCreateNewViewModel] =
+    useState<boolean>(false);
+
+  const [currentlySelectedView, setCurrentlySelectedView] =
+    useState<TableView | null>(null);
+
+  // load all the filters for this user and for this project.
+  const fetchTableViews: PromiseVoidFunction = async (): Promise<void> => {
+    try {
+      setError("");
+      setIsLoading(true);
+
+      const tableViews: ListResult<TableView> = await ModelAPI.getList({
+        modelType: TableView,
+        query: {
+          projectId: ProjectUtil.getCurrentProjectId()!,
+          createdByUserId: User.getUserId(),
+          tableId: props.tableId,
+        },
+        limit: LIMIT_PER_PROJECT,
+        skip: 0,
+        select: {
+          sort: true,
+          itemsOnPage: true,
+          query: true,
+          name: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
+
+      setAllTableViews(tableViews.data);
+    } catch (err) {
+      setError(API.getFriendlyErrorMessage(err as Error));
+    }
+
+    setIsLoading(false);
+  };
+
+  type DeleteTableViewFunction = (tableView: TableView) => Promise<void>;
+
+  const deleteTableView: DeleteTableViewFunction = async (
+    tableView: TableView,
+  ): Promise<void> => {
+    const tableViewId: ObjectID = tableView.id!;
+
+    try {
+      setError("");
+      setIsLoading(true);
+
+      await ModelAPI.deleteItem({
+        modelType: TableView,
+        id: tableViewId,
+      });
+
+      await fetchTableViews();
+    } catch (err) {
+      setError(API.getFriendlyErrorMessage(err as Error));
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchTableViews().catch((err: Error) => {
+      setError(API.getFriendlyErrorMessage(err as Error));
+    });
+  }, []);
+
+  type GetRightElementForTableViewMenuItemFunction = (
+    item: TableView,
+  ) => React.JSX.Element;
+
+  const getRightElementForTableViewMenuItem: GetRightElementForTableViewMenuItemFunction =
+    (item: TableView): ReactElement => {
+      return (
+        <div className="flex">
+          <Button
+            icon={IconProp.Edit}
+            buttonStyle={ButtonStyleType.ICON_LIGHT}
+            onClick={() => {
+              setTableViewToEdit(item);
+            }}
+          />
+
+          <Button
+            icon={IconProp.Trash}
+            buttonStyle={ButtonStyleType.ICON_LIGHT}
+            onClick={() => {
+              setTableViewToDelete(item);
+            }}
+          />
+        </div>
+      );
+    };
+
+  type GetViewItemsFunction = () => Array<ReactElement>;
+
+  const getViewItems: GetViewItemsFunction = (): Array<ReactElement> => {
+    return allTableViews.map((item: TableView, index: number) => {
+      return (
+        <MoreMenuItem
+          key={index}
+          rightElement={getRightElementForTableViewMenuItem(item)}
+          text={item.name || ""}
+          onClick={() => {
+            props.onViewChange && props.onViewChange(item);
+            setCurrentlySelectedView(item);
+          }}
+        />
+      );
+    });
+  };
+
+  const getMenuContents: GetReactElementFunction = (): ReactElement => {
+    if (isLoading) {
+      return <BarLoader />;
+    }
+
+    return (
+      <>
+        {allTableViews.length > 0 ? (
+          <MoreMenuSection title="Saved Views">
+            {getViewItems()}
+          </MoreMenuSection>
+        ) : (
+          <></>
+        )}
+
+        {currentlySelectedView ? (
+          <MoreMenuItem
+            text="Deselect View"
+            onClick={() => {
+              setCurrentlySelectedView(null);
+              props.onViewChange && props.onViewChange(null);
+            }}
+          ></MoreMenuItem>
+        ) : (
+          <></>
+        )}
+
+        <MoreMenuItem
+          text="Save View"
+          onClick={() => {
+            setShowCreateNewViewModel(true);
+          }}
+        ></MoreMenuItem>
+      </>
+    );
+  };
+
+  if (error) {
+    return (
+      <ConfirmModal
+        title={`Something went wrong...`}
+        description={error}
+        isLoading={false}
+        submitButtonText={"Close"}
+        onSubmit={() => {
+          return setError("");
+        }}
+      />
+    );
+  }
+
+  if (tableViewToEdit) {
+    return (
+      <ModelFormModal<TableView>
+        modelType={TableView}
+        modelIdToEdit={tableViewToEdit.id!}
+        name="Edit View"
+        title="Edit View"
+        description="You can rename this table view to any name you like."
+        onClose={() => {
+          setTableViewToEdit(undefined);
+        }}
+        submitButtonText="Save Changes"
+        onSuccess={async () => {
+          setTableViewToEdit(undefined);
+          await fetchTableViews();
+        }}
+        formProps={{
+          name: "Edit View",
+          modelType: TableView,
+          id: "edit-table-view",
+          fields: [
+            {
+              field: {
+                name: true,
+              },
+              fieldType: FormFieldSchemaType.Text,
+              placeholder: "Name of the view",
+              description: "Please enter the new name of the view",
+              title: "Name",
+              required: true,
+            },
+          ],
+          formType: FormType.Update,
+        }}
+      />
+    );
+  }
+
+  if (tableViewToDelete) {
+    return (
+      <ConfirmModal
+        description={`Are you sure you want to delete view - ${tableViewToDelete.name}?`}
+        title={`Delete ${tableViewToDelete.name}`}
+        isLoading={isLoading}
+        onSubmit={async () => {
+          await deleteTableView(tableViewToDelete);
+          setTableViewToDelete(undefined);
+        }}
+        onClose={() => {
+          setTableViewToDelete(undefined);
+        }}
+        submitButtonText={`Delete`}
+        submitButtonType={ButtonStyleType.DANGER}
+      />
+    );
+  }
+
+  if (showCreateNewViewModal) {
+    return (
+      <ModelFormModal<TableView>
+        modelType={TableView}
+        name="Save New View"
+        title="Save New View"
+        description="You can save the current table settings as a new view."
+        onClose={() => {
+          setShowCreateNewViewModel(false);
+        }}
+        submitButtonText="Save Changes"
+        onBeforeCreate={(tableView: TableView) => {
+          tableView.tableId = props.tableId;
+          tableView.query = props.currentTableView?.query || {};
+          tableView.itemsOnPage = props.currentTableView?.itemsOnPage || 10;
+          tableView.sort = props.currentTableView?.sort || {};
+          return Promise.resolve(tableView);
+        }}
+        onSuccess={async () => {
+          setShowCreateNewViewModel(false);
+          await fetchTableViews();
+        }}
+        formProps={{
+          name: "Save New View",
+          modelType: TableView,
+          id: "save-table-view",
+          fields: [
+            {
+              field: {
+                name: true,
+              },
+              fieldType: FormFieldSchemaType.Text,
+              placeholder: "Name of the view",
+              description: "Please enter the new name of the view",
+              title: "Name",
+              required: true,
+            },
+          ],
+          formType: FormType.Create,
+        }}
+      />
+    );
+  }
+
+  return <MoreMenu>{getMenuContents()}</MoreMenu>;
+};
+
+export default TableViewElement;

package/UI/Components/MoreMenu/Divider.tsx

@@ -0,0 +1,7 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+const MoreMenuDivider: FunctionComponent = (): ReactElement => {
+  return <div className="py-1" role="none"></div>;
+};
+
+export default MoreMenuDivider;