@oneuptime/common 7.0.3480 → 7.0.3517

package/UI/Components/ProgressButtons/ProgressButtonItem.tsx

@@ -0,0 +1,107 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Color from "../../../Types/Color";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+
+export interface ProgressItemProps {
+  id: string;
+  title: string;
+  color: Color;
+}
+
+export interface ComponentProps extends ProgressItemProps {
+  isCompletedStep?: boolean;
+  stepCount: number;
+  isCurrentStep: boolean;
+  isLastStep: boolean;
+  onClick: () => void;
+}
+
+const ProgressButtonItem: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <li
+      className="relative md:flex md:flex-1 "
+      id={props.id}
+      key={props.id}
+      onClick={() => {
+        if (!props.isCompletedStep) {
+          return props.onClick();
+        }
+      }}
+    >
+      <div
+        className={`group flex w-full items-center ${props.isCompletedStep ? "" : "hover:bg-gray-50 cursor-pointer"}`}
+      >
+        <span className="flex items-center px-6 py-4 text-sm font-medium">
+          {props.isCompletedStep && (
+            <span
+              className="flex size-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
+              style={{ backgroundColor: props.color.toString() }}
+            >
+              <Icon icon={IconProp.Check} className="size-6 text-white" />
+            </span>
+          )}
+          {props.isCurrentStep && (
+            <span
+              className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-indigo-600"
+              style={{ borderColor: props.color.toString() }}
+            >
+              <span
+                className="text-indigo-600"
+                style={{
+                  color: props.color.toString(),
+                }}
+              >
+                {props.stepCount}
+              </span>
+            </span>
+          )}
+          {!props.isCompletedStep && !props.isCurrentStep && (
+            <span
+              className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400"
+              style={{ borderColor: props.color.toString() }}
+            >
+              <span
+                className="text-gray-500 group-hover:text-gray-900"
+                style={{ color: props.color.toString() }}
+              >
+                {props.stepCount}
+              </span>
+            </span>
+          )}
+          <span
+            className="ml-4 text-sm font-medium text-gray-900"
+            style={{ color: props.color.toString() }}
+          >
+            {props.title}
+          </span>
+        </span>
+      </div>
+
+      {!props.isLastStep && (
+        <div
+          className="absolute right-0 top-0 hidden h-full w-5 md:block"
+          aria-hidden="true"
+        >
+          <svg
+            className="size-full text-gray-300"
+            viewBox="0 0 22 80"
+            fill="none"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0 -2L20 40L0 82"
+              vectorEffect="non-scaling-stroke"
+              stroke="currentcolor"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      )}
+    </li>
+  );
+};
+
+export default ProgressButtonItem;

package/UI/Components/ProgressButtons/ProgressButtons.tsx

@@ -0,0 +1,88 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import ProgressButtonItem, { ProgressItemProps } from "./ProgressButtonItem";
+
+export interface ComponentProps {
+  id: string;
+  progressButtonItems: Array<ProgressItemProps>;
+  completedStepId?: string | undefined;
+  onStepClick?: (stepId: string) => void;
+}
+
+const ProgressButtons: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  type IsStepCompletedFunction = (stepId: string) => boolean;
+
+  const isStepCompleted: IsStepCompletedFunction = (
+    stepId: string,
+  ): boolean => {
+    // if the step is on or before the completed step, return true
+    return Boolean(
+      props.completedStepId &&
+        props.progressButtonItems.findIndex(
+          (progressButtonItem: ProgressItemProps) => {
+            return progressButtonItem.id === stepId;
+          },
+        ) <=
+          props.progressButtonItems.findIndex(
+            (progressButtonItem: ProgressItemProps) => {
+              return progressButtonItem.id === props.completedStepId;
+            },
+          ),
+    );
+  };
+
+  const isCurrentStep: IsStepCompletedFunction = (stepId: string): boolean => {
+    // if this is one step ahead of the completed step, return true
+    return Boolean(
+      props.completedStepId &&
+        props.progressButtonItems.findIndex(
+          (progressButtonItem: ProgressItemProps) => {
+            return progressButtonItem.id === stepId;
+          },
+        ) ===
+          props.progressButtonItems.findIndex(
+            (progressButtonItem: ProgressItemProps) => {
+              return progressButtonItem.id === props.completedStepId;
+            },
+          ) +
+            1,
+    );
+  };
+
+  return (
+    <nav aria-label="Progress" id={props.id} className="ml-3">
+      <ol
+        role="list"
+        className="bg-white shadow divide-y divide-gray-300 rounded-md md:flex md:divide-y-0"
+      >
+        {props.progressButtonItems.map(
+          (progressButtonItem: ProgressItemProps, index: number) => {
+            return (
+              <ProgressButtonItem
+                key={progressButtonItem.id}
+                {...progressButtonItem}
+                stepCount={index + 1}
+                isLastStep={
+                  progressButtonItem.id ===
+                  props.progressButtonItems[
+                    props.progressButtonItems.length - 1
+                  ]!.id
+                }
+                isCurrentStep={isCurrentStep(progressButtonItem.id)}
+                isCompletedStep={isStepCompleted(progressButtonItem.id)}
+                onClick={() => {
+                  return props.onStepClick
+                    ? props.onStepClick(progressButtonItem.id)
+                    : undefined;
+                }}
+              />
+            );
+          },
+        )}
+      </ol>
+    </nav>
+  );
+};
+
+export default ProgressButtons;

package/UI/Components/QR/QR.tsx

@@ -26,7 +26,7 @@ const QRCodeElement: FunctionComponent<ComponentProps> = (
   }, [props.text]);
 
   if (error) {
-    return <ErrorMessage error={error} />;
+    return <ErrorMessage message={error} />;
   }
 
   return (

package/UI/Components/Table/Table.tsx

@@ -119,7 +119,7 @@ const Table: TableFunction = <T extends GenericObject>(
           <tr>
             <td colSpan={colspan} className="pl-10 pr-10">
               <ErrorMessage
-                error={props.error}
+                message={props.error}
                 onRefreshClick={props.onRefreshClick}
               />
             </td>
@@ -134,7 +134,7 @@ const Table: TableFunction = <T extends GenericObject>(
           <tr>
             <td colSpan={colspan}>
               <ErrorMessage
-                error={
+                message={
                   props.noItemsMessage
                     ? props.noItemsMessage
                     : `No ${props.singularLabel.toLocaleLowerCase()}`

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -56,7 +56,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
         {component.metadata.arguments &&
           component.metadata.arguments.length === 0 && (
             <ErrorMessage
-              error={"This component does not take any arguments."}
+              message={"This component does not take any arguments."}
             />
           )}
         {component.metadata.arguments &&

package/UI/Components/Workflow/ComponentArgumentsViewer.tsx

@@ -18,7 +18,7 @@ const ComponentArgumentViewer: FunctionComponent<ComponentProps> = (
       <h2 className="text-base font-medium text-gray-500">{props.name}</h2>
       <p className="text-sm font-medium text-gray-400">{props.description}</p>
       {props.arguments && props.arguments.length === 0 && (
-        <ErrorMessage error={"This component does not take any arguments."} />
+        <ErrorMessage message={"This component does not take any arguments."} />
       )}
       <div className="mt-3">
         {props.arguments &&

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -16,7 +16,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
       <h2 className="text-base font-medium text-gray-500">{props.name}</h2>
       <p className="text-sm font-medium text-gray-400">{props.description}</p>
       {props.ports && props.ports.length === 0 && (
-        <ErrorMessage error={"This component does not have any ports."} />
+        <ErrorMessage message={"This component does not have any ports."} />
       )}
       <div className="mt-3">
         {props.ports &&

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -18,7 +18,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
       <h2 className="text-base font-medium text-gray-500">{props.name}</h2>
       <p className="text-sm font-medium text-gray-400">{props.description}</p>
       {props.returnValues && props.returnValues.length === 0 && (
-        <ErrorMessage error={"This component does not return any value."} />
+        <ErrorMessage message={"This component does not return any value."} />
       )}
       <div className="mt-3">
         {props.returnValues &&

package/UI/Components/Workflow/ComponentValuePickerModal.tsx

@@ -109,7 +109,7 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
 
         <div className="max-h-96 mt-5 mb-5 overflow-y-auto">
           {props.components.length === 0 ? (
-            <ErrorMessage error={"No components in this workflow."} />
+            <ErrorMessage message={"No components in this workflow."} />
           ) : (
             <></>
           )}
@@ -117,7 +117,7 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
           {props.components.length > 0 &&
           searchText &&
           searchedComponents.length === 0 ? (
-            <ErrorMessage error={"No components match your search"} />
+            <ErrorMessage message={"No components match your search"} />
           ) : (
             <></>
           )}
@@ -137,7 +137,7 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
 
                     {component.metadata.returnValues &&
                       component.metadata.returnValues.length === 0 && (
-                        <ErrorMessage error="This component does not have any return values." />
+                        <ErrorMessage message="This component does not have any return values." />
                       )}
                     {component.metadata.returnValues &&
                       component.metadata.returnValues.map(

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -111,7 +111,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
             {!componentsToShow ||
               (componentsToShow.length === 0 && (
                 <div className="w-full flex justify-center mt-20">
-                  <ErrorMessage error="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like. If you are an enterprise customer, feel free to talk to us and we will build it for you." />
+                  <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like. If you are an enterprise customer, feel free to talk to us and we will build it for you." />
                 </div>
               ))}
 

package/UI/Components/Workflow/DocumentationViewer.tsx

@@ -66,7 +66,7 @@ const DocumentationViewer: FunctionComponent<ComponentProps> = (
         Here is some documentation for this component.
       </p>
 
-      {error ? <ErrorMessage error={error} /> : <></>}
+      {error ? <ErrorMessage message={error} /> : <></>}
       {isLoading ? <ComponentLoader /> : <></>}
 
       <div className="mt-3">

package/UI/Components/Workflow/RunForm.tsx

@@ -48,7 +48,7 @@ const RunForm: FunctionComponent<ComponentProps> = (
         {component.metadata.returnValues &&
           component.metadata.returnValues.length === 0 && (
             <ErrorMessage
-              error={
+              message={
                 'This workflow trigger does not take any return values. You can run it by clicking the "Run" button below.'
               }
             />

package/UI/Components/Workflow/RunModal.tsx

@@ -111,7 +111,7 @@ const RunModal: FunctionComponent<ComponentProps> = (
         )}
 
         {component.nodeType === NodeType.PlaceholderNode && (
-          <ErrorMessage error="No trigger added. Please add a trigger in order to run this workflow" />
+          <ErrorMessage message="No trigger added. Please add a trigger in order to run this workflow" />
         )}
       </>
     </SideOver>

package/UI/Utils/User.ts

@@ -12,7 +12,7 @@ import API from "Common/Utils/API";
 import Cookie from "./Cookie";
 import CookieName from "Common/Types/CookieName";
 
-export default class User {
+export default class UserUtil {
   public static setProfilePicId(id: ObjectID | null): void {
     if (!id) {
       LocalStorage.removeItem("profile_pic_id");

package/UI/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.gif";