@oneuptime/common 7.0.4674 → 7.0.4699

package/Server/Middleware/ProjectAuthorization.ts

@@ -96,38 +96,40 @@ export default class ProjectMiddleware {
           props: { isRoot: true },
         });
 
-        tenantId = apiKeyModel?.projectId || null;
-
-        if (!tenantId) {
-          throw new BadDataException("Invalid API Key");
-        }
-
-        (req as OneUptimeRequest).tenantId = tenantId;
-
         if (apiKeyModel) {
-          (req as OneUptimeRequest).userType = UserType.API;
-          // TODO: Add API key permissions.
-          // (req as OneUptimeRequest).permissions =
-          //     apiKeyModel.permissions || [];
-          (req as OneUptimeRequest).userGlobalAccessPermission =
-            await APIKeyAccessPermission.getDefaultApiGlobalPermission(
-              tenantId,
-            );
-
-          const userTenantAccessPermission: UserTenantAccessPermission | null =
-            await APIKeyAccessPermission.getApiTenantAccessPermission(
-              tenantId,
-              apiKeyModel.id!,
-            );
+          tenantId = apiKeyModel?.projectId || null;
 
-          if (userTenantAccessPermission) {
-            (req as OneUptimeRequest).userTenantAccessPermission = {};
-            (
-              (req as OneUptimeRequest)
-                .userTenantAccessPermission as Dictionary<UserTenantAccessPermission>
-            )[tenantId.toString()] = userTenantAccessPermission;
+          if (!tenantId) {
+            throw new BadDataException("Invalid API Key");
+          }
 
-            return next();
+          (req as OneUptimeRequest).tenantId = tenantId;
+
+          if (apiKeyModel) {
+            (req as OneUptimeRequest).userType = UserType.API;
+            // TODO: Add API key permissions.
+            // (req as OneUptimeRequest).permissions =
+            //     apiKeyModel.permissions || [];
+            (req as OneUptimeRequest).userGlobalAccessPermission =
+              await APIKeyAccessPermission.getDefaultApiGlobalPermission(
+                tenantId,
+              );
+
+            const userTenantAccessPermission: UserTenantAccessPermission | null =
+              await APIKeyAccessPermission.getApiTenantAccessPermission(
+                tenantId,
+                apiKeyModel.id!,
+              );
+
+            if (userTenantAccessPermission) {
+              (req as OneUptimeRequest).userTenantAccessPermission = {};
+              (
+                (req as OneUptimeRequest)
+                  .userTenantAccessPermission as Dictionary<UserTenantAccessPermission>
+              )[tenantId.toString()] = userTenantAccessPermission;
+
+              return next();
+            }
           }
         }
       }

package/Tests/UI/Components/NavBar.test.tsx

@@ -1,9 +1,13 @@
-import Navbar, { ComponentProps } from "../../../UI/Components/Navbar/NavBar";
+import Navbar, {
+  ComponentProps,
+  NavItem,
+} from "../../../UI/Components/Navbar/NavBar";
 import { describe, expect, it } from "@jest/globals";
 import "@testing-library/jest-dom/extend-expect";
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { ReactElement } from "react-markdown/lib/react-markdown";
+import Route from "../../../Types/API/Route";
+import IconProp from "../../../Types/Icon/IconProp";
 
 describe("Navbar", () => {
   const defaultProps: ComponentProps = {
@@ -26,7 +30,12 @@ describe("Navbar", () => {
   });
 
   it("renders with a rightElement", () => {
-    const rightElement: ReactElement = <div>Right Element</div>;
+    const rightElement: NavItem = {
+      id: "test-right-element",
+      title: "Right Element",
+      icon: IconProp.User,
+      route: new Route("/test"),
+    };
     const customProps: ComponentProps = { ...defaultProps, rightElement };
     render(<Navbar {...customProps} />);
     expect(screen.getByText("Right Element")).toBeInTheDocument();

package/UI/Components/ActionButton/ActionButtonSchema.ts

@@ -9,6 +9,7 @@ interface ActionButtonSchema<T extends GenericObject> {
   buttonStyleType: ButtonStyleType;
   isLoading?: boolean | undefined;
   isVisible?: (item: T) => boolean | undefined;
+  hideOnMobile?: boolean | undefined;
   onClick: (
     item: T,
     onCompleteAction: VoidFunction,

package/UI/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -14,7 +14,7 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
   links,
 }: ComponentProps): ReactElement => {
   return (
-    <nav className="flex" aria-label="Breadcrumb">
+    <nav className="flex hidden md:block" aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-1">
         {links &&
           links.length > 0 &&

package/UI/Components/Card/Card.tsx

@@ -33,9 +33,9 @@ const Card: FunctionComponent<ComponentProps> = (
   return (
     <React.Fragment>
       <div data-testid="card" className={props.className}>
-        <div className="shadow sm:rounded-md">
-          <div className="bg-white py-6 px-4 sm:p-6">
-            <div className="flex justify-between">
+        <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">
               <div className={`${noRightElementsOrButtons ? "w-full" : ""}`}>
                 {props.title && (
                   <h2
@@ -55,49 +55,60 @@ const Card: FunctionComponent<ComponentProps> = (
                   </p>
                 )}
               </div>
-              <div className="flex w-fit">
-                {props.rightElement}
-                {props.buttons?.map(
-                  (button: CardButtonSchema | ReactElement, i: number) => {
-                    return (
-                      <div
-                        style={
-                          i > 0
-                            ? {
-                                marginLeft: "10px",
-                              }
-                            : {}
-                        }
-                        key={i}
-                      >
-                        {React.isValidElement(button) ? button : null}
-                        {React.isValidElement(button) ? null : (
-                          <Button
-                            key={i}
-                            title={(button as CardButtonSchema).title}
-                            buttonStyle={
-                              (button as CardButtonSchema).buttonStyle
-                            }
-                            className={(button as CardButtonSchema).className}
-                            onClick={() => {
-                              if ((button as CardButtonSchema).onClick) {
-                                (button as CardButtonSchema).onClick();
-                              }
-                            }}
-                            disabled={(button as CardButtonSchema).disabled}
-                            icon={(button as CardButtonSchema).icon}
-                            shortcutKey={
-                              (button as CardButtonSchema).shortcutKey
-                            }
-                            dataTestId="card-button"
-                            isLoading={(button as CardButtonSchema).isLoading}
-                          />
-                        )}
-                      </div>
-                    );
-                  },
-                )}
-              </div>
+              {(props.rightElement ||
+                (props.buttons && props.buttons.length > 0)) && (
+                <div className="flex flex-col md:flex-row md:w-fit mt-4 md:mt-0 gap-2 md:gap-0">
+                  {props.rightElement && (
+                    <div className="mb-2 md:mb-0 md:mr-2">
+                      {props.rightElement}
+                    </div>
+                  )}
+                  {props.buttons && props.buttons.length > 0 && (
+                    <div className="flex flex-wrap gap-2 md:gap-0">
+                      {props.buttons.map(
+                        (
+                          button: CardButtonSchema | ReactElement,
+                          i: number,
+                        ) => {
+                          return (
+                            <div className="md:ml-2 first:md:ml-0" key={i}>
+                              {React.isValidElement(button) ? button : null}
+                              {React.isValidElement(button) ? null : (
+                                <Button
+                                  key={i}
+                                  title={(button as CardButtonSchema).title}
+                                  buttonStyle={
+                                    (button as CardButtonSchema).buttonStyle
+                                  }
+                                  className={
+                                    (button as CardButtonSchema).className
+                                  }
+                                  onClick={() => {
+                                    if ((button as CardButtonSchema).onClick) {
+                                      (button as CardButtonSchema).onClick();
+                                    }
+                                  }}
+                                  disabled={
+                                    (button as CardButtonSchema).disabled
+                                  }
+                                  icon={(button as CardButtonSchema).icon}
+                                  shortcutKey={
+                                    (button as CardButtonSchema).shortcutKey
+                                  }
+                                  dataTestId="card-button"
+                                  isLoading={
+                                    (button as CardButtonSchema).isLoading
+                                  }
+                                />
+                              )}
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
 
             {props.children && (

package/UI/Components/Detail/Detail.tsx

@@ -20,7 +20,7 @@ import Dictionary from "../../../Types/Dictionary";
 import BadDataException from "../../../Types/Exception/BadDataException";
 import GenericObject from "../../../Types/GenericObject";
 import get from "lodash/get";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   item: T;
@@ -36,6 +36,22 @@ type DetailFunction = <T extends GenericObject>(
 const Detail: DetailFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  // Track mobile view for responsive behavior
+  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);
+    };
+  }, []);
+
   type GetMarkdownViewerFunction = (text: string) => ReactElement;
 
   const getMarkdownViewer: GetMarkdownViewerFunction = (
@@ -410,6 +426,11 @@ const Detail: DetailFunction = <T extends GenericObject>(
         props.fields.length > 0 &&
         props.fields
           .filter((field: Field<T>) => {
+            // Filter out fields with hideOnMobile on mobile devices
+            if (field.hideOnMobile && isMobile) {
+              return false;
+            }
+
             // check if showIf exists.
             if (field.showIf) {
               return field.showIf(props.item);

package/UI/Components/Detail/Field.ts

@@ -23,6 +23,7 @@ export interface FieldBase<T> {
   alignItem?: AlignItem | undefined;
   contentClassName?: string | undefined;
   showIf?: ((item: T) => boolean) | undefined;
+  hideOnMobile?: boolean | undefined; // Hide field on mobile devices
   getElement?:
     | ((
         item: T,

package/UI/Components/EventHistoryList/EventHistoryDayList.tsx

@@ -2,7 +2,12 @@ import EventHistoryItem, {
   ComponentProps as ItemComponentProps,
 } from "../EventItem/EventItem";
 import OneUptimeDate from "../../../Types/Date";
-import React, { FunctionComponent, ReactElement, useState, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useEffect,
+} from "react";
 
 export interface ComponentProps {
   date: Date;
@@ -14,52 +19,54 @@ const EventHistoryDayList: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [windowWidth, setWindowWidth] = useState<number>(
-    typeof window !== "undefined" ? window.innerWidth : 1024
+    typeof window !== "undefined" ? window.innerWidth : 1024,
   );
 
   useEffect(() => {
-    const handleResize = () => {
+    const handleResize: () => void = (): void => {
       setWindowWidth(window.innerWidth);
     };
 
     window.addEventListener("resize", handleResize);
-    
+
     // Cleanup event listener on component unmount
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
 
-  const isMobile = windowWidth <= 768;
+  const isMobile: boolean = windowWidth <= 768;
   return (
     <div
       className="md:flex bottom-Gray500-border"
       style={{
-      marginLeft: "-10px",
-      marginRight: "-10px",
-      marginBottom: props.isLastItem ? "0px" : "20px",
-      borderBottomWidth: props.isLastItem ? "0px" : "1px",
+        marginLeft: "-10px",
+        marginRight: "-10px",
+        marginBottom: props.isLastItem ? "0px" : "20px",
+        borderBottomWidth: props.isLastItem ? "0px" : "1px",
       }}
     >
       <div
-      className="text-gray-400 mt-2 text-sm"
-      style={{
-        padding: "20px",
-        paddingLeft: "10px",
-        paddingRight: "0px",
-        width: isMobile ? "100%" : "15%",
-      }}
+        className="text-gray-400 mt-2 text-sm"
+        style={{
+          padding: "20px",
+          paddingLeft: "10px",
+          paddingRight: "0px",
+          width: isMobile ? "100%" : "15%",
+        }}
       >
-      {OneUptimeDate.getDateAsLocalFormattedString(props.date, true)}
+        {OneUptimeDate.getDateAsLocalFormattedString(props.date, true)}
       </div>
-      <div style={{ 
-        padding: "10px", 
-        paddingTop: "0px", 
-        width: isMobile ? "100%" : "85%" 
-      }}>
-      {props.items.map((item: ItemComponentProps, i: number) => {
-        return <EventHistoryItem key={i} {...item} />;
-      })}
+      <div
+        style={{
+          padding: "10px",
+          paddingTop: "0px",
+          width: isMobile ? "100%" : "85%",
+        }}
+      >
+        {props.items.map((item: ItemComponentProps, i: number) => {
+          return <EventHistoryItem key={i} {...item} />;
+        })}
       </div>
     </div>
   );

package/UI/Components/Feed/FeedItem.tsx

@@ -135,7 +135,7 @@ const FeedItem: FunctionComponent<ComponentProps> = (
                 )}
                 {props.element && <div>{props.element}</div>}
                 {props.moreTextInMarkdown && (
-                  <div className="-ml-3">
+                  <div className="-ml-3 w-fit">
                     <Button
                       onClick={() => {
                         return setShowMoreInformationModal(true);

package/UI/Components/Footer/Footer.tsx

@@ -23,7 +23,7 @@ const Footer: FunctionComponent<ComponentProps> = (
   return (
     <React.Fragment>
       <footer
-        className={props.className || "bg-white h-16 inset-x-0 bottom-0"}
+        className={props.className || "bg-white min-h-16"}
         style={props.style}
       >
         <div className="mx-auto w-full py-5 px-6 md:flex md:items-center md:justify-between lg:px-0">

package/UI/Components/Forms/BasicForm.tsx

@@ -592,7 +592,10 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
             <div className="flex">
               {formSteps && currentFormStepId && (
-                <div style={{ flex: "0 1 auto" }} className="mr-10">
+                <div
+                  style={{ flex: "0 1 auto" }}
+                  className="mr-10 hidden lg:block"
+                >
                   {/* Form Steps */}
 
                   <Steps

package/UI/Components/Icon/Icon.tsx

@@ -187,9 +187,11 @@ const Icon: FunctionComponent<ComponentProps> = ({
     });
   } else if (icon === IconProp.Bars3) {
     return getSvgWrapper(
-     
-  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+      />,
     );
   } else if (icon === IconProp.ShieldCheck) {
     return getSvgWrapper(

package/UI/Components/List/ListRow.tsx

@@ -6,7 +6,7 @@ import Icon, { ThickProp } from "../Icon/Icon";
 import ConfirmModal from "../Modal/ConfirmModal";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useState, useEffect } from "react";
 import { Draggable, DraggableProvided } from "react-beautiful-dnd";
 
 export interface ListDetailProps {
@@ -39,6 +39,22 @@ const ListRow: ListRowFunction = <T extends GenericObject>(
 
   const [error, setError] = useState<string>("");
 
+  // Track mobile view for responsive behavior
+  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);
+    };
+  }, []);
+
   type GetRowFunction = (provided?: DraggableProvided) => ReactElement;
 
   const getRow: GetRowFunction = (
@@ -91,6 +107,11 @@ const ListRow: ListRowFunction = <T extends GenericObject>(
                 return <></>;
               }
 
+              // Hide button on mobile if hideOnMobile is true
+              if (button.hideOnMobile && isMobile) {
+                return <></>;
+              }
+
               return (
                 <div key={i}>
                   <Button

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -398,6 +398,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         colSpan: column.colSpan,
         contentClassName: column.contentClassName,
         alignItem: column.alignItem,
+        hideOnMobile: column.hideOnMobile, // Propagate hideOnMobile property
         getElement: column.getElement
           ? (item: TBaseModel): ReactElement => {
               return column.getElement!(item, onBeforeFetchData);
@@ -1130,6 +1131,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       actionsSchema.push({
         title: "Show ID",
         buttonStyleType: ButtonStyleType.OUTLINE,
+        hideOnMobile: true,
         onClick: async (
           item: TBaseModel,
           onCompleteAction: VoidFunction,

package/UI/Components/ModelTable/Column.ts

@@ -28,6 +28,7 @@ export default interface Columns<
   actionButtons?: Array<ActionButton>;
   alignItem?: AlignItem | undefined;
   noValueMessage?: string | undefined;
+  hideOnMobile?: boolean | undefined; // Hide column on mobile devices
   getElement?:
     | ((item: TEntity, onBeforeFetchData?: TEntity | undefined) => ReactElement)
     | undefined;