@oneuptime/common 7.0.4707 → 7.0.4717

package/UI/Components/Button/Button.tsx

@@ -107,7 +107,7 @@ const Button: FunctionComponent<ComponentProps> = ({
     }
   };
 
-  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   let loadingIconClassName: string = `w-5 h-5 mr-3 -ml-1 mr-1 animate-spin`;
   let iconClassName: string = `w-5 h-5`;
 
@@ -139,20 +139,20 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.DANGER) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-red-700" : ""
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${
       disabled ? "hover:bg-red-50" : ""
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.PRIMARY) {
     loadingIconClassName += ` text-indigo-100`;
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-indigo-700" : ""
-    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
 
     if (disabled) {
       buttonStyleCssClass += ` bg-indigo-300`;
@@ -188,7 +188,7 @@ const Button: FunctionComponent<ComponentProps> = ({
     buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE ||
     buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE
   ) {
-    buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover sm:text-sm ml-1`;
+    buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover md:text-sm ml-1`;
 
     if (buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE) {
       buttonStyleCssClass += ` hover:text-red-500`;
@@ -206,25 +206,25 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.SUCCESS) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-green-700" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${
       disabled ? "hover:bg-green-50" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${
       disabled ? "hover:bg-yellow-700" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${
       disabled ? "hover:bg-yellow-50" : ""
-    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   buttonStyleCssClass += ` ` + buttonSize;

package/UI/Components/Card/Card.tsx

@@ -32,7 +32,7 @@ const Card: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div data-testid="card" className={props.className}>
+      <div data-testid="card" className={`mb-4 ${props.className || ""}`}>
         <div className="shadow md:rounded-md">
           <div className="bg-white py-6 px-4 md:p-6">
             <div className="flex flex-col md:flex-row md:justify-between">
@@ -49,7 +49,7 @@ const Card: FunctionComponent<ComponentProps> = (
                 {props.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full"
+                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
                   >
                     {props.description}
                   </p>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -29,7 +29,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const syncId: string = Text.generateRandomText(10);
 
   return (
-    <div className="lg:grid grid-cols-1 gap-5">
+    <div className="lg:grid grid-cols-1 gap-5 space-y-5 lg:space-y-0">
       {props.charts.map((chart: Chart, index: number) => {
         switch (chart.type) {
           case ChartType.LINE:
@@ -48,7 +48,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                 {chart.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full"
+                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
                   >
                     {chart.description}
                   </p>

package/UI/Components/Date/StartAndEndDate.tsx

@@ -126,8 +126,8 @@ const StartAndEndDate: DateFilterFunction = (
   ) {
     return (
       <div>
-        <div className="flex space-x-3 mt-1">
-          <div className="w-1/2">
+        <div className="flex flex-col md:flex-row md:space-x-3 space-y-3 md:space-y-0 mt-1">
+          <div className="w-full md:w-1/2">
             <div className="text-xs text-gray-500">From:</div>
             <div>
               <Input
@@ -161,7 +161,7 @@ const StartAndEndDate: DateFilterFunction = (
               />
             </div>
           </div>
-          <div className="w-1/2">
+          <div className="w-full md:w-1/2">
             <div className="text-xs text-gray-500">To:</div>
             <div>
               <Input
@@ -240,6 +240,7 @@ const StartAndEndDate: DateFilterFunction = (
                   );
                 }}
                 title="3 hours"
+                className="hidden md:block"
               />
             )}
 
@@ -295,6 +296,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="2 weeks"
+              className="hidden md:block"
             />
 
             <Button
@@ -313,6 +315,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 weeks"
+              className="hidden md:block"
             />
 
             <Button
@@ -331,6 +334,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="1 month"
+              className="hidden md:block"
             />
 
             <Button
@@ -349,6 +353,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 months"
+              className="hidden md:block"
             />
           </div>
         )}

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -20,6 +20,7 @@ export interface ComponentProps {
   alertType: HeaderAlertType;
   tooltip?: string | undefined;
   colorSwatch?: ColorSwatch | undefined;
+  suffix?: string | undefined;
 }
 
 const HeaderAlert: (props: ComponentProps) => ReactElement = (
@@ -82,9 +83,16 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
             />
           </div>
           <div className="ml-1 flex-1 md:flex md:justify-between">
-            <p className={`text-sm font-semibold ${textColor} hidden md:block`}>
+            <p className={`text-sm font-semibold ${textColor}`}>
               {props.title}
             </p>
+            {props.suffix && (
+              <span
+                className={`ml-1 ${textColor} text-sm font-semibold hidden md:block`}
+              >
+                {props.suffix}
+              </span>
+            )}
           </div>
         </div>
       </div>

package/UI/Components/HeaderAlert/HeaderModelAlert.tsx

@@ -82,7 +82,8 @@ const HeaderModelAlert: <TBaseModel extends BaseModel>(
 
   return (
     <HeaderAlert
-      title={`${count} ${count > 1 ? props.pluralName : props.singularName}`}
+      title={`${count}`}
+      suffix={`${count > 1 ? props.pluralName : props.singularName}`}
       icon={props.icon}
       onClick={props.onClick}
       className={props.className}

package/UI/Components/Modal/Modal.tsx

@@ -60,21 +60,21 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
 
       <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-screen items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div className="flex min-h-screen items-end justify-center p-0 text-center md:items-center md:p-4">
           <div
-            className={`relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${
+            className={`relative transform bg-white text-left shadow-xl transition-all w-full h-full md:h-auto md:w-auto md:rounded-lg md:my-8 ${
               props.modalWidth && props.modalWidth === ModalWidth.Large
-                ? "sm:max-w-7xl"
+                ? "md:max-w-7xl"
                 : ""
             } ${
               props.modalWidth && props.modalWidth === ModalWidth.Medium
-                ? "sm:max-w-3xl"
+                ? "md:max-w-3xl"
                 : ""
-            } ${!props.modalWidth ? "sm:max-w-lg" : ""} `}
+            } ${!props.modalWidth ? "md:max-w-lg" : ""} `}
             data-testid="modal"
           >
             {props.onClose && (
-              <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+              <div className="absolute top-0 right-0 z-10 pt-4 pr-4 md:hidden lg:block">
                 <Button
                   buttonStyle={ButtonStyleType.ICON}
                   icon={IconProp.Close}
@@ -85,10 +85,10 @@ const Modal: FunctionComponent<ComponentProps> = (
                 />
               </div>
             )}
-            <div className="sm:p-6">
+            <div className="p-4 md:p-6">
               {props.icon && (
                 <div
-                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} sm:mx-0 sm:h-10 sm:w-10`}
+                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} md:mx-0 md:h-10 md:w-10`}
                   data-testid="icon"
                 >
                   <Icon
@@ -104,13 +104,13 @@ const Modal: FunctionComponent<ComponentProps> = (
                   />
                 </div>
               )}
-              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:mr-4 sm:text-left">
-                <div className="flex justify-between">
-                  <div>
+              <div className="text-left md:mt-0 md:ml-4 md:mr-4">
+                <div className="flex flex-col md:flex-row md:justify-between">
+                  <div className="flex-1">
                     <h3
                       data-testid="modal-title"
                       className={`text-lg font-medium leading-6 text-gray-900 ${
-                        props.icon ? "ml-10 -mt-8 mb-5" : ""
+                        props.icon ? "mt-4 md:ml-10 md:-mt-8 md:mb-5" : ""
                       }`}
                       id="modal-title"
                     >
@@ -119,14 +119,16 @@ const Modal: FunctionComponent<ComponentProps> = (
                     {props.description && (
                       <h3
                         data-testid="modal-description"
-                        className="text-sm leading-6 text-gray-500"
+                        className="text-sm leading-6 text-gray-500 mt-2"
                       >
                         {props.description}
                       </h3>
                     )}
                   </div>
                   {props.rightElement && (
-                    <div data-testid="right-element">{props.rightElement}</div>
+                    <div data-testid="right-element" className="mt-4 md:mt-0">
+                      {props.rightElement}
+                    </div>
                   )}
                 </div>
                 <div className="mt-2">

package/UI/Components/Modal/ModalFooter.tsx

@@ -18,7 +18,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+    <div className="bg-gray-50 px-4 py-3 flex flex-row gap-3 md:flex-row-reverse md:px-6">
       {props.onSubmit ? (
         <Button
           buttonStyle={

package/UI/Components/Page/Page.tsx

@@ -69,7 +69,7 @@ const Page: FunctionComponent<ComponentProps> = (
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 sm:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
+              <div className="space-y-6 md:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
                 {props.children}
               </div>
             )}

package/UI/Components/Table/Table.tsx

@@ -88,6 +88,20 @@ const Table: TableFunction = <T extends GenericObject>(
 
   const [isAllItemsSelected, setIsAllItemsSelected] = useState<boolean>(false);
   const [bulkSelectedItems, setBulkSelectedItems] = useState<Array<T>>([]);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkMobile: () => void = (): void => {
+      setIsMobile(window.innerWidth < 768); // md breakpoint
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
 
   useEffect(() => {
     if (props.bulkSelectedItems) {
@@ -189,6 +203,7 @@ const Table: TableFunction = <T extends GenericObject>(
         }}
         selectedItems={bulkSelectedItems}
         matchBulkSelectedItemByField={props.matchBulkSelectedItemByField}
+        isMobile={isMobile}
       />
     );
   };
@@ -259,7 +274,7 @@ const Table: TableFunction = <T extends GenericObject>(
           }
         }}
       >
-        <div className="-my-2 overflow-x-auto -mx-6">
+        <div className="-my-2 overflow-x-auto md:-mx-6">
           <div className="inline-block min-w-full py-2 align-middle">
             <div
               className={
@@ -268,33 +283,41 @@ const Table: TableFunction = <T extends GenericObject>(
                   : "overflow-hidden border-t border-gray-200"
               }
             >
-              <table className="min-w-full divide-y divide-gray-200">
-                <TableHeader
-                  id={`${props.id}-header`}
-                  columns={props.columns}
-                  onSortChanged={props.onSortChanged}
-                  enableDragAndDrop={props.enableDragAndDrop}
-                  sortBy={props.sortBy}
-                  sortOrder={props.sortOrder}
-                  isBulkActionsEnabled={isBulkActionsEnabled}
-                  onAllItemsDeselected={() => {
-                    setIsAllItemsSelected(false);
-                    props.onBulkClearAllItems?.();
-                  }}
-                  onAllItemsOnThePageSelected={() => {
-                    if (props.onBulkSelectItemsOnCurrentPage) {
-                      props.onBulkSelectItemsOnCurrentPage();
-                    }
-                  }}
-                  isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
-                  hasTableItems={props.data.length > 0}
-                />
-                {getTablebody()}
-              </table>
+              {isMobile ? (
+                // Mobile view: render as list
+                <div className="min-w-full divide-y divide-gray-200">
+                  {getTablebody()}
+                </div>
+              ) : (
+                // Desktop view: render as table
+                <table className="min-w-full divide-y divide-gray-200">
+                  <TableHeader
+                    id={`${props.id}-header`}
+                    columns={props.columns}
+                    onSortChanged={props.onSortChanged}
+                    enableDragAndDrop={props.enableDragAndDrop}
+                    sortBy={props.sortBy}
+                    sortOrder={props.sortOrder}
+                    isBulkActionsEnabled={isBulkActionsEnabled}
+                    onAllItemsDeselected={() => {
+                      setIsAllItemsSelected(false);
+                      props.onBulkClearAllItems?.();
+                    }}
+                    onAllItemsOnThePageSelected={() => {
+                      if (props.onBulkSelectItemsOnCurrentPage) {
+                        props.onBulkSelectItemsOnCurrentPage();
+                      }
+                    }}
+                    isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
+                    hasTableItems={props.data.length > 0}
+                  />
+                  {getTablebody()}
+                </table>
+              )}
             </div>
           </div>
         </div>
-        <div className="bg-gray-50 text-right -mr-6 -ml-6 -mb-6">
+        <div className="bg-gray-50 text-right md:-mx-6 -mb-6">
           {!props.disablePagination && (
             <Pagination
               singularLabel={props.singularLabel}

package/UI/Components/Table/TableBody.tsx

@@ -21,6 +21,9 @@ export interface ComponentProps<T extends GenericObject> {
   onItemDeselected?: undefined | ((item: T) => void);
   selectedItems: Array<T>;
   matchBulkSelectedItemByField: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+
+  // responsive
+  isMobile?: boolean;
 }
 
 type TableBodyFunction = <T extends GenericObject>(
@@ -35,6 +38,54 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
   const getBody: GetBodyFunction = (
     provided?: DroppableProvided,
   ): ReactElement => {
+    // Mobile view: render as list
+    if (props.isMobile) {
+      return (
+        <div
+          id={props.id}
+          ref={provided?.innerRef}
+          {...provided?.droppableProps}
+          className="divide-y divide-gray-200 bg-white"
+        >
+          {props.data &&
+            props.data.map((item: T, i: number) => {
+              return (
+                <TableRow
+                  isBulkActionsEnabled={props.isBulkActionsEnabled}
+                  onItemSelected={props.onItemSelected}
+                  onItemDeselected={props.onItemDeselected}
+                  isItemSelected={
+                    props.selectedItems?.filter((selectedItem: T) => {
+                      if (props.matchBulkSelectedItemByField === undefined) {
+                        return false;
+                      }
+
+                      return (
+                        selectedItem[
+                          props.matchBulkSelectedItemByField
+                        ]?.toString() ===
+                        item[props.matchBulkSelectedItemByField]?.toString()
+                      );
+                    }).length > 0 || false
+                  }
+                  dragAndDropScope={props.dragAndDropScope}
+                  enableDragAndDrop={props.enableDragAndDrop}
+                  key={i}
+                  item={item}
+                  columns={props.columns}
+                  actionButtons={props.actionButtons}
+                  dragDropIdField={props.dragDropIdField}
+                  dragDropIndexField={props.dragDropIndexField}
+                  isMobile={true}
+                />
+              );
+            })}
+          {provided?.placeholder}
+        </div>
+      );
+    }
+
+    // Desktop view: render as table
     return (
       <tbody
         id={props.id}
@@ -71,6 +122,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
                 actionButtons={props.actionButtons}
                 dragDropIdField={props.dragDropIdField}
                 dragDropIndexField={props.dragDropIndexField}
+                isMobile={false}
               />
             );
           })}