Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX Enhancement for Middleware Override Workflow #9358

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
17 changes: 5 additions & 12 deletions src/components/Assets/AssetType/HL7Monitor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
22 changes: 8 additions & 14 deletions src/components/CameraFeed/ConfigureCamera.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,22 +149,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")
Expand Down
1 change: 1 addition & 0 deletions src/components/Facility/AddLocationForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,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}
Expand Down
1 change: 1 addition & 0 deletions src/components/Facility/FacilityConfigure.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
28 changes: 25 additions & 3 deletions src/components/Facility/LocationManagement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface Props {
interface LocationProps extends LocationModel {
facilityId: string;
disabled: boolean;
facilityMiddleware?: string;
setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void;
}

Expand All @@ -42,6 +43,18 @@ export default function LocationManagement({ facilityId }: Props) {
name: "",
id: "",
});
const [facilityMiddleware, setFacilityMiddleware] = useState<
string | undefined
>(undefined);

useQuery(routes.getPermittedFacility, {
pathParams: { id: facilityId },
onResponse: (res) => {
if (res.data) {
setFacilityMiddleware(res.data?.middleware_address);
}
},
});

const closeDeleteFailModal = () => {
setShowDeleteFailModal({ ...showDeleteFailModal, open: false });
Expand Down Expand Up @@ -121,6 +134,7 @@ export default function LocationManagement({ facilityId }: Props) {
<Location
setShowDeletePopup={setShowDeletePopup}
facilityId={facilityId}
facilityMiddleware={facilityMiddleware}
{...item}
disabled={
["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)
Expand Down Expand Up @@ -221,6 +235,7 @@ const Location = ({
name,
description,
middleware_address,
facilityMiddleware,
location_type,
created_date,
modified_date,
Expand Down Expand Up @@ -268,14 +283,21 @@ 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 && (
<span className="ml-2 mt-2 text-xs h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]">
Copy link
Contributor

@Jacobjeevan Jacobjeevan Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make use of the badge component (src/components/ui) here instead of custom logic.

As for the UI feedback, I'd wait for design team to respond.

<span className="text-xs font-bold text-primary-500">
Fetched from facility
</span>
</span>
)}
<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}
Expand Down
29 changes: 27 additions & 2 deletions src/components/Form/FormFields/FormField.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Label } from "@/components/ui/label";

import { FieldError } from "@/components/Form/FieldValidators";
import { FormFieldBaseProps } from "@/components/Form/FormFields/Utils";

Expand All @@ -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",
Expand All @@ -25,7 +27,7 @@ export const FieldLabel = (props: LabelProps) => {
>
{props.children}
{props.required && <span className="text-danger-500">{" *"}</span>}
</label>
</Label>
);
};

Expand All @@ -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
Expand All @@ -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>
);
};
Expand Down
2 changes: 2 additions & 0 deletions src/components/Form/FormFields/Utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down