UX Enhancement for Middleware Override Workflow

src/components/Assets/AssetType/HL7Monitor.tsx

@@ -100,20 +100,13 @@ const HL7Monitor = (props: HL7MonitorProps) => {
                     label={
                       <div className="flex flex-row gap-1">
                         <p>Middleware Hostname</p>
-                        {resolvedMiddleware?.source != "asset" && (
-                          <div className="tooltip">
-                            <CareIcon
-                              icon="l-info-circle"
-                              className="tooltip text-indigo-500 hover:text-indigo-600"
-                            />
-                            <span className="tooltip-text w-56 whitespace-normal">
-                              Middleware hostname sourced from asset{" "}
-                              {resolvedMiddleware?.source}
-                            </span>
-                          </div>
-                        )}
                       </div>
                     }
+                    message={
+                      resolvedMiddleware?.source != "asset"
+                        ? `Middleware hostname sourced from asset ${resolvedMiddleware?.source}`
+                        : undefined
+                    }
                     placeholder={resolvedMiddleware?.hostname}
                     value={middlewareHostname}
                     onChange={(e) => setMiddlewareHostname(e.value)}

src/components/CameraFeed/ConfigureCamera.tsx

@@ -152,22 +152,16 @@ export default function ConfigureCamera(props: Props) {
               label={
                 <div className="flex flex-row gap-1">
                   <p>{t("middleware_hostname")}</p>
-                  {!!props.asset.resolved_middleware &&
-                    props.asset.resolved_middleware.source != "asset" && (
-                      <div className="tooltip">
-                        <CareIcon
-                          icon="l-info-circle"
-                          className="tooltip text-indigo-500 hover:text-indigo-600"
-                        />
-                        <span className="tooltip-text w-56 whitespace-normal">
-                          {t("middleware_hostname_sourced_from", {
-                            source: props.asset.resolved_middleware?.source,
-                          })}
-                        </span>
-                      </div>
-                    )}
                 </div>
               }
+              message={
+                !!props.asset.resolved_middleware &&
+                props.asset.resolved_middleware.source != "asset"
+                  ? t("middleware_hostname_sourced_from", {
+                      source: props.asset.resolved_middleware?.source,
+                    })
+                  : undefined
+              }
               placeholder={
                 props.asset.resolved_middleware?.hostname ??
                 t("middleware_hostname_example")

src/components/Facility/AddLocationForm.tsx

@@ -212,6 +212,7 @@ export const AddLocationForm = ({ facilityId, locationId }: Props) => {
                   name="Location Middleware Address"
                   type="text"
                   label="Location Middleware Address"
+                  message="Leave blank to apply facility middleware to assets"
                   value={middlewareAddress}
                   onChange={(e) => setMiddlewareAddress(e.value)}
                   error={errors.middlewareAddress}

src/components/Facility/FacilityConfigure.tsx

@@ -150,6 +150,7 @@ export const FacilityConfigure = (props: IProps) => {
                 <TextFormField
                   name="middleware_address"
                   label="Facility Middleware Address"
+                  message="This address will be applied to all assets when asset and location middleware are Unspecified"
                   required
                   value={state.form.middleware_address}
                   onChange={handleChange}

src/components/Facility/LocationManagement.tsx

@@ -1,9 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 
 import RecordMeta from "@/CAREUI/display/RecordMeta";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
+import { Badge } from "@/components/ui/badge";
+
 import ButtonV2, { Cancel } from "@/components/Common/ButtonV2";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import DialogModal from "@/components/Common/Dialog";
@@ -17,6 +20,7 @@ import useAuthUser from "@/hooks/useAuthUser";
 import AuthorizeFor, { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 
@@ -27,6 +31,7 @@ interface Props {
 interface LocationProps extends LocationModel {
   facilityId: string;
   disabled: boolean;
+  facilityMiddleware?: string;
   setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void;
 }
 
@@ -43,6 +48,15 @@ export default function LocationManagement({ facilityId }: Props) {
     id: "",
   });
 
+  const { data } = useQuery({
+    queryKey: [routes.getPermittedFacility.path, facilityId],
+    queryFn: query(routes.getPermittedFacility, {
+      pathParams: { id: facilityId },
+    }),
+  });
+
+  const facilityMiddleware = data?.middleware_address;
+
   const closeDeleteFailModal = () => {
     setShowDeleteFailModal({ ...showDeleteFailModal, open: false });
   };
@@ -121,6 +135,7 @@ export default function LocationManagement({ facilityId }: Props) {
                 <Location
                   setShowDeletePopup={setShowDeletePopup}
                   facilityId={facilityId}
+                  facilityMiddleware={facilityMiddleware}
                   {...item}
                   disabled={
                     ["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)
@@ -221,6 +236,7 @@ const Location = ({
   name,
   description,
   middleware_address,
+  facilityMiddleware,
   location_type,
   created_date,
   modified_date,
@@ -252,14 +268,9 @@ const Location = ({
             >
               {name}
             </p>
-            <div
-              className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
-              id="location-type"
-            >
-              <p className="text-xs font-bold text-primary-500">
-                {location_type}
-              </p>
-            </div>
+            <Badge className="rounded-full bg-primary-100 text-primary-500 hover:bg-primary-100 border-2 border-primary-500 font-bold px-3 py-[3px] ml-2">
+              {location_type}
+            </Badge>
           </div>
         </div>
         <p
@@ -268,14 +279,19 @@ const Location = ({
         >
           {description || "-"}
         </p>
-        <p className="mt-3 text-sm font-semibold text-secondary-700">
+        <span className="mt-3 text-sm font-semibold text-secondary-700">
           Middleware Address:
-        </p>
+        </span>
+        {!middleware_address && facilityMiddleware && (
+          <Badge className="rounded-full bg-primary-100 text-primary-500 hover:bg-primary-100 border-2 border-primary-500 font-bold px-3 py-[3px] ml-2">
+            Fetched from facility
+          </Badge>
+        )}
         <p
           className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
           id="view-location-middleware"
         >
-          {middleware_address || "-"}
+          {middleware_address || facilityMiddleware || "-"}
         </p>
         <Uptime
           route={routes.listFacilityAssetLocationAvailability}

src/components/Form/FormFields/FormField.tsx

@@ -1,3 +1,5 @@
+import { Label } from "@/components/ui/label";
+
 import { FieldError } from "@/components/Form/FieldValidators";
 import { FormFieldBaseProps } from "@/components/Form/FormFields/Utils";
 
@@ -14,7 +16,7 @@ type LabelProps = {
 
 export const FieldLabel = (props: LabelProps) => {
   return (
-    <label
+    <Label
       id={props.id}
       className={classNames(
         "block text-base font-normal text-secondary-900",
@@ -25,7 +27,7 @@ export const FieldLabel = (props: LabelProps) => {
     >
       {props.children}
       {props.required && <span className="text-danger-500">{" *"}</span>}
-    </label>
+    </Label>
   );
 };
 
@@ -48,6 +50,25 @@ export const FieldErrorText = (props: ErrorProps) => {
   );
 };
 
+type MessageProps = {
+  message: string | undefined;
+  className?: string | undefined;
+};
+
+export const FieldMessageText = (props: MessageProps) => {
+  return (
+    <span
+      className={classNames(
+        "text-secondary-700 ml-1 mt-2 text-xs tracking-wide transition-opacity duration-300",
+        props.message ? "opacity-80" : "opacity-0",
+        props.className,
+      )}
+    >
+      {props.message}
+    </span>
+  );
+};
+
 const FormField = ({
   field,
   ...props
@@ -73,6 +94,10 @@ const FormField = ({
       </div>
       <div className={field?.className}>{props.children}</div>
       <FieldErrorText error={field?.error} className={field?.errorClassName} />
+      <FieldMessageText
+        message={field?.message}
+        className={field?.messageClassName}
+      />
     </div>
   );
 };

src/components/Form/FormFields/Utils.ts

@@ -20,9 +20,11 @@ export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
 export type FormFieldBaseProps<T> = {
   label?: React.ReactNode;
   labelSuffix?: React.ReactNode;
+  message?: string;
   disabled?: boolean;
   className?: string;
   required?: boolean;
+  messageClassName?: string;
   labelClassName?: string;
   errorClassName?: string;
   name: string;