@oneuptime/common 7.0.3162 → 7.0.3172

package/UI/Components/Filters/FilterViewer.tsx

@@ -28,7 +28,7 @@ export interface ComponentProps<T extends GenericObject> {
   onFilterModalOpen: () => void;
   isModalLoading?: boolean;
   onFilterRefreshClick?: undefined | (() => void);
-  initialFilterData?: FilterData<T> | undefined;
+  filterData?: FilterData<T> | undefined;
 }
 
 type FilterComponentFunction = <T extends GenericObject>(
@@ -38,9 +38,6 @@ type FilterComponentFunction = <T extends GenericObject>(
 const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const [filterData, setFilterData] = useState<FilterData<T>>(
-    props.initialFilterData || {},
-  );
   const [tempFilterDataForModal, setTempFilterDataForModal] = useState<
     FilterData<T>
   >({});
@@ -50,14 +47,13 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   const changeFilterData: ChangeFilterDataFunction = (
     filterData: FilterData<T>,
   ) => {
-    setFilterData(filterData);
     setTempFilterDataForModal(filterData);
     props.onFilterChanged?.(filterData);
   };
 
   useEffect(() => {
     if (props.showFilterModal) {
-      setTempFilterDataForModal({ ...filterData });
+      setTempFilterDataForModal({ ...props.filterData });
     }
   }, [props.showFilterModal]);
 
@@ -337,7 +333,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
 
   const filterTexts: Array<ReactElement> = translateFilterToText({
     filters: props.filters,
-    filterData: filterData,
+    filterData: props.filterData || {},
   });
 
   if (props.filterError) {
@@ -419,7 +415,6 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
             props.onFilterModalClose();
           }}
           onSubmit={() => {
-            setFilterData({ ...tempFilterDataForModal });
             setTempFilterDataForModal({});
             if (props.onFilterChanged) {
               props.onFilterChanged({

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -233,6 +233,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
+  const [tableView, setTableView] = useState<TableView | null>(null);
+
   const matchBulkSelectedItemByField: keyof TBaseModel =
     props.bulkActions?.matchBulkSelectedItemByField || "_id";
 
@@ -800,23 +802,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     }
 
     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) => {
+          tableView={tableView}
+          currentQuery={query}
+          currentSortBy={sortBy}
+          currentItemsOnPage={itemsOnPage}
+          currentSortOrder={sortOrder}
+          onViewChange={async (tableView: TableView | null) => {
+            setTableView(tableView);
+
             if (tableView) {
               const sortBy: string | undefined = Object.keys(
                 tableView.sort || {},
@@ -831,9 +827,14 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
               // then set query, sort and items on the page
               setQuery(tableView.query || {});
+              setFilterData(tableView.query || {});
               setItemsOnPage(tableView.itemsOnPage || 10);
-              setSortBy(sortBy as keyof TBaseModel);
+              setSortBy((sortBy as keyof TBaseModel) || null);
               setSortOrder(sortOrder);
+
+              if (classicTableFilters.length === 0) {
+                await getFilterDropdownItems();
+              }
             } else {
               setQuery({});
               setSortBy(null);
@@ -906,9 +907,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       headerbuttons.push({
         title: "",
         buttonStyle: ButtonStyleType.ICON,
-        className: props.showRefreshButton
-          ? "p-1 px-1 pr-0 pl-0 py-0 mt-1"
-          : "py-0 pr-0 pl-1 mt-1",
+        className: "py-0 pr-0 pl-1 mt-1",
         onClick: () => {
           setQuery({});
           setShowFilterModal(true);
@@ -1238,6 +1237,10 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     setActionButtonSchema(actionsSchema);
   };
 
+  const [filterData, setFilterData] = useState<FilterData<TBaseModel>>(
+    props.initialFilterData || {},
+  );
+
   type OnFilterChangedFunction = (filterData: FilterData<TBaseModel>) => void;
 
   const onFilterChanged: OnFilterChangedFunction = (
@@ -1245,6 +1248,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   ): void => {
     const newQuery: Query<TBaseModel> = {};
 
+    setFilterData(filterData);
+
     for (const key in filterData) {
       if (filterData[key] && typeof filterData[key] === Typeof.String) {
         newQuery[key as keyof TBaseModel] = (filterData[key] || "").toString();
@@ -1349,8 +1354,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       <Table
         onFilterChanged={(filterData: FilterData<TBaseModel>) => {
           onFilterChanged(filterData);
+          setTableView(null);
         }}
-        initialFilterData={props.initialFilterData}
+        filterData={filterData}
         className={
           props.cardProps
             ? ""
@@ -1400,6 +1406,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             }),
           );
         }}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
         onBulkSelectItemsOnCurrentPage={() => {
           const items: TBaseModel[] = [...bulkSelectedItems, ...data];
 
@@ -1452,6 +1460,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         ) => {
           setSortBy(sortBy);
           setSortOrder(sortOrder);
+          setTableView(null);
         }}
         singularLabel={props.singularName || model.singularName || "Item"}
         pluralLabel={props.pluralName || model.pluralName || "Items"}
@@ -1483,9 +1492,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           await fetchItems();
         }}
         disablePagination={props.disablePagination || false}
-        onNavigateToPage={async (pageNumber: number, itemsOnPage: number) => {
+        onNavigateToPage={async (
+          pageNumber: number,
+          newItemsOnPage: number,
+        ) => {
           setCurrentPageNumber(pageNumber);
-          setItemsOnPage(itemsOnPage);
+
+          if (newItemsOnPage !== itemsOnPage) {
+            setTableView(null);
+          }
+
+          setItemsOnPage(newItemsOnPage);
         }}
         noItemsMessage={props.noItemsMessage || ""}
         onRefreshClick={async () => {

package/UI/Components/ModelTable/TableView.tsx

@@ -1,9 +1,4 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useState,
-} from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 import TableView from "../../../Models/DatabaseModels/TableView";
 import ObjectID from "../../../Types/ObjectID";
 import MoreMenu from "../MoreMenu/MoreMenu";
@@ -14,7 +9,7 @@ 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 { ButtonStyleType } from "../Button/Button";
 import IconProp from "../../../Types/Icon/IconProp";
 import { BarLoader } from "react-spinners";
 import ConfirmModal from "../Modal/ConfirmModal";
@@ -22,18 +17,30 @@ 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 { GetReactElementArrayFunction } from "../../Types/FunctionTypes";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
+import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
+import GenericObject from "../../../Types/GenericObject";
+import Query from "../../../Types/BaseDatabase/Query";
+import DatabaseBaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
+import Sort from "../../../Types/BaseDatabase/Sort";
 
-export interface ComponentProps {
+export interface ComponentProps<T extends GenericObject> {
   tableId: string;
   onViewChange: (tableView: TableView | null) => void;
-  currentTableView: TableView | null;
+  currentQuery: Query<T>;
+  currentSortOrder: SortOrder | null;
+  currentSortBy: keyof T | null;
+  currentItemsOnPage: number;
+  tableView: TableView | null;
 }
 
-const TableViewElement: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
+const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
+  props: ComponentProps<T>,
+) => ReactElement = <T extends DatabaseBaseModel | AnalyticsBaseModel>(
+  props: ComponentProps<T>,
 ): ReactElement => {
   const [error, setError] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -47,9 +54,15 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
   const [showCreateNewViewModal, setShowCreateNewViewModel] =
     useState<boolean>(false);
 
+  const moreMenuRef: React.MutableRefObject<undefined> = useRef();
+
   const [currentlySelectedView, setCurrentlySelectedView] =
     useState<TableView | null>(null);
 
+  useEffect(() => {
+    setCurrentlySelectedView(props.tableView);
+  }, [props.tableView]);
+
   // load all the filters for this user and for this project.
   const fetchTableViews: PromiseVoidFunction = async (): Promise<void> => {
     try {
@@ -122,21 +135,28 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
     (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 className="h-4 w-4 mr-2">
+            <Icon
+              icon={IconProp.Edit}
+              className="text-gray-400 hover:text-gray-600"
+              size={SizeProp.Regular}
+              thick={ThickProp.Thick}
+              onClick={() => {
+                setTableViewToEdit(item);
+              }}
+            />
+          </div>
+          <div className="h-4 w-4">
+            <Icon
+              className="text-gray-400 hover:text-gray-600"
+              icon={IconProp.Trash}
+              size={SizeProp.Regular}
+              thick={ThickProp.Thick}
+              onClick={() => {
+                setTableViewToDelete(item);
+              }}
+            />
+          </div>
         </div>
       );
     };
@@ -150,6 +170,8 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
           key={index}
           rightElement={getRightElementForTableViewMenuItem(item)}
           text={item.name || ""}
+          className="text-gray-600 hover:text-gray-800"
+          icon={IconProp.Window}
           onClick={() => {
             props.onViewChange && props.onViewChange(item);
             setCurrentlySelectedView(item);
@@ -159,42 +181,36 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
     });
   };
 
-  const getMenuContents: GetReactElementFunction = (): ReactElement => {
-    if (isLoading) {
-      return <BarLoader />;
-    }
+  const getMenuContents: GetReactElementArrayFunction =
+    (): Array<ReactElement> => {
+      if (isLoading) {
+        return [<BarLoader />];
+      }
 
-    return (
-      <>
-        {allTableViews.length > 0 ? (
+      const elements: Array<ReactElement> = [];
+
+      if (allTableViews.length > 0) {
+        elements.push(
           <MoreMenuSection title="Saved Views">
             {getViewItems()}
-          </MoreMenuSection>
-        ) : (
-          <></>
-        )}
-
-        {currentlySelectedView ? (
-          <MoreMenuItem
-            text="Deselect View"
-            onClick={() => {
-              setCurrentlySelectedView(null);
-              props.onViewChange && props.onViewChange(null);
-            }}
-          ></MoreMenuItem>
-        ) : (
-          <></>
-        )}
+          </MoreMenuSection>,
+        );
+      }
 
+      elements.push(
         <MoreMenuItem
-          text="Save View"
+          text="Save as New View"
+          className="bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 font-medium -mt-2"
+          icon={IconProp.Add}
+          iconClassName=""
           onClick={() => {
             setShowCreateNewViewModel(true);
           }}
-        ></MoreMenuItem>
-      </>
-    );
-  };
+        ></MoreMenuItem>,
+      );
+
+      return elements;
+    };
 
   if (error) {
     return (
@@ -224,6 +240,7 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
         submitButtonText="Save Changes"
         onSuccess={async () => {
           setTableViewToEdit(undefined);
+
           await fetchTableViews();
         }}
         formProps={{
@@ -279,15 +296,28 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
         }}
         submitButtonText="Save Changes"
         onBeforeCreate={(tableView: TableView) => {
+          let sort: Sort<T> = {};
+
+          if (props.currentSortOrder && props.currentSortBy) {
+            sort = {
+              [props.currentSortBy]: props.currentSortOrder,
+            } as Sort<T>;
+          }
+
           tableView.tableId = props.tableId;
-          tableView.query = props.currentTableView?.query || {};
-          tableView.itemsOnPage = props.currentTableView?.itemsOnPage || 10;
-          tableView.sort = props.currentTableView?.sort || {};
+          tableView.query =
+            (props.currentQuery as Query<
+              DatabaseBaseModel | AnalyticsBaseModel
+            >) || {};
+          tableView.itemsOnPage = props?.currentItemsOnPage || 10;
+          tableView.sort = sort || {};
           return Promise.resolve(tableView);
         }}
-        onSuccess={async () => {
+        onSuccess={async (tableView: TableView) => {
           setShowCreateNewViewModel(false);
           await fetchTableViews();
+          // set as current view
+          props.onViewChange && props.onViewChange(tableView);
         }}
         formProps={{
           name: "Save New View",
@@ -311,7 +341,61 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
     );
   }
 
-  return <MoreMenu>{getMenuContents()}</MoreMenu>;
+  type GetElementToBeShownInsteadOfButtonFunction = () =>
+    | ReactElement
+    | undefined;
+
+  const getElementToBeShownInsteadOfButton: GetElementToBeShownInsteadOfButtonFunction =
+    (): ReactElement | undefined => {
+      if (!currentlySelectedView) {
+        return undefined;
+      }
+
+      return (
+        <div className="ml-2 mt-1 cursor-pointer font-semibold flex rounded-full border-2 border-gray-600 text-gray-600 text-xs p-1 pl-2 pr-2">
+          <div
+            onClick={() => {
+              flipDropdown();
+            }}
+          >
+            {currentlySelectedView.name}
+          </div>
+          <div className="h-4 w-4 rounded-full bg-gray-500 text-white hover:bg-gray-800 ml-3 -mr-1 p-1">
+            <Icon
+              icon={IconProp.Close}
+              size={SizeProp.Regular}
+              thick={ThickProp.Thick}
+              onClick={() => {
+                setCurrentlySelectedView(null);
+                props.onViewChange && props.onViewChange(null);
+                closeDropdownMenu();
+              }}
+            />
+          </div>
+        </div>
+      );
+    };
+
+  const closeDropdownMenu: VoidFunction = (): void => {
+    if (moreMenuRef.current) {
+      (moreMenuRef.current as any).closeDropdown();
+    }
+  };
+
+  const flipDropdown: VoidFunction = (): void => {
+    if (moreMenuRef.current) {
+      (moreMenuRef.current as any).flipDropdown();
+    }
+  };
+
+  return (
+    <MoreMenu
+      elementToBeShownInsteadOfButton={getElementToBeShownInsteadOfButton()}
+      ref={moreMenuRef}
+    >
+      {getMenuContents()}
+    </MoreMenu>
+  );
 };
 
 export default TableViewElement;

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -1,54 +1,94 @@
 import React, {
-  FunctionComponent,
+  forwardRef,
   ReactElement,
   useEffect,
+  useImperativeHandle,
   useState,
 } from "react";
-import Button, { ButtonStyleType } from "../Button/Button";
 import IconProp from "../../../Types/Icon/IconProp";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
+import Icon from "../Icon/Icon";
 
 export interface ComponentProps {
-  children: Array<ReactElement> | ReactElement;
+  children: Array<ReactElement>;
+  elementToBeShownInsteadOfButton?: ReactElement | undefined;
 }
 
-const MoreMenu: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const { ref, isComponentVisible, setIsComponentVisible } =
-    useComponentOutsideClick(false);
-
-  const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
-
-  useEffect(() => {
-    setDropdownVisible(isComponentVisible);
-  }, [isComponentVisible]);
-
-  return (
-    <div className="relative inline-block text-left">
-      <div>
-        <Button
-          icon={IconProp.More}
-          buttonStyle={ButtonStyleType.ICON}
-          onClick={() => {
-            setIsComponentVisible(!isDropdownVisible);
-          }}
-        />
+const MoreMenu: React.ForwardRefExoticComponent<
+  ComponentProps & React.RefAttributes<unknown>
+> = forwardRef(
+  (props: ComponentProps, componentRef: React.ForwardedRef<unknown>) => {
+    const { ref, isComponentVisible, setIsComponentVisible } =
+      useComponentOutsideClick(false);
+
+    useImperativeHandle(componentRef, () => {
+      return {
+        closeDropdown() {
+          setIsComponentVisible(false);
+        },
+        openDropdown() {
+          setIsComponentVisible(true);
+        },
+        flipDropdown() {
+          setIsComponentVisible(!isDropdownVisible);
+        },
+      };
+    });
+
+    const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
+
+    useEffect(() => {
+      setDropdownVisible(isComponentVisible);
+    }, [isComponentVisible]);
+
+    return (
+      <div className="relative inline-block text-left">
+        {!props.elementToBeShownInsteadOfButton && (
+          <div className="h-7 w-7 text-gray-600 mt-1 cursor-pointer">
+            <Icon
+              icon={IconProp.More}
+              className="p-1"
+              onClick={() => {
+                setIsComponentVisible(!isDropdownVisible);
+              }}
+            />
+          </div>
+        )}
+
+        {props.elementToBeShownInsteadOfButton && (
+          <div>{props.elementToBeShownInsteadOfButton}</div>
+        )}
+
+        {isComponentVisible && (
+          <div
+            ref={ref}
+            className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="menu-button"
+          >
+            {props.children.map((child: ReactElement, index: number) => {
+              return (
+                <div
+                  key={index}
+                  role="menuitem"
+                  onClick={() => {
+                    if (isComponentVisible) {
+                      setIsComponentVisible(false);
+                    }
+                  }}
+                >
+                  {child}
+                </div>
+              );
+            })}
+          </div>
+        )}
       </div>
+    );
+  },
+);
 
-      {isComponentVisible && (
-        <div
-          ref={ref}
-          className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="menu-button"
-        >
-          {props.children}
-        </div>
-      )}
-    </div>
-  );
-};
+MoreMenu.displayName = "MoreMenu";
 
 export default MoreMenu;

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -7,6 +7,8 @@ export interface ComponentProps {
   text: string;
   onClick: () => void;
   rightElement?: Array<ReactElement> | ReactElement | undefined;
+  className?: string | undefined;
+  iconClassName?: string | undefined;
 }
 
 const MoreMenuItem: FunctionComponent<ComponentProps> = (
@@ -14,7 +16,7 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <a
-      className="cursor-pointer group flex items-center px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+      className={`cursor-pointer group flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-700 hover:bg-gray-50 ${props.className}`}
       role="menuitem"
       onClick={() => {
         props.onClick();
@@ -23,10 +25,10 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
       {props.icon && (
         <Icon
           icon={props.icon}
-          className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+          className={`mr-3 h-5 w-5 text-gray-400 text-gray-700 hover:text-gray-900 ${props.iconClassName}`}
         />
       )}
-      <div className="flex justify-between">
+      <div className="flex w-full justify-between">
         <div>{props.text}</div>
         <div>{props.rightElement}</div>
       </div>

package/UI/Components/MoreMenu/MoreMenuSection.tsx

@@ -10,8 +10,8 @@ const MoreMenuSection: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <div>
-      <div className="text-gray-400 text-sm font-medium">
-        {props.title.toLocaleUpperCase()}
+      <div className="text-gray-400 text-xs font-medium pt-2 pl-3 pr-3 pb-2">
+        {props.title.toUpperCase()}
       </div>
       {props.children}
       <MoreMenuDivider />