Layout the new disable form

louischan-oursky · louischan-oursky · commit 80506fae9640 · 2025-11-20T16:45:26.000+08:00
diff --git a/portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx b/portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx
@@ -1,13 +1,29 @@
 import React, { useContext, useState, useCallback, useMemo } from "react";
-import { IStyle, Label, Text, Dialog, DialogFooter } from "@fluentui/react";
+import {
+  IStyle,
+  Label,
+  Text,
+  Dialog,
+  DialogFooter,
+  ChoiceGroup,
+  IChoiceGroupOption,
+  IChoiceGroupOptionProps,
+  MessageBar,
+  MessageBarType,
+  DatePicker,
+  TimePicker,
+  IComboBox,
+} from "@fluentui/react";
 import { FormattedMessage, Context } from "@oursky/react-messageformat";
 import { useNavigate } from "react-router-dom";
+import { DateTime, SystemZone } from "luxon";
 
 import { useSystemConfig } from "../../context/SystemConfigContext";
 import ListCellLayout from "../../ListCellLayout";
 import OutlinedActionButton from "../../components/common/OutlinedActionButton";
 import PrimaryButton from "../../PrimaryButton";
 import DefaultButton from "../../DefaultButton";
+import TextField from "../../TextField";
 import ErrorDialog from "../../error/ErrorDialog";
 import { useSetDisabledStatusMutation } from "./mutations/setDisabledStatusMutation";
 import { useAnonymizeUserMutation } from "./mutations/anonymizeUserMutation";
@@ -30,6 +46,16 @@ const bodyTextStyle: IStyle = {
   maxWidth: "500px",
 };
 
+const choiceGroupStyle = {
+  flexContainer: {
+    selectors: {
+      ".ms-ChoiceField": {
+        display: "block",
+      },
+    },
+  },
+};
+
 const dialogStyles = { main: { minHeight: 0 } };
 
 export interface AccountStatus {
@@ -92,6 +118,14 @@ interface ButtonStates {
   };
 }
 
+function formatSystemZone(now: Date, locale: string): string {
+  const zone = new SystemZone();
+  return `${zone.offsetName(now.getTime(), {
+    format: "short",
+    locale,
+  })} (${zone.name})`;
+}
+
 export function getMostAppropriateAction(
   data: AccountStatus
 ):
@@ -612,6 +646,183 @@ export function AccountStatusDialog(
   const { isHidden, onDismiss, mode, accountStatus } = props;
   const buttonStates = getButtonStates(accountStatus);
   const { themes } = useSystemConfig();
+  const { locale, renderToString } = useContext(Context);
+
+  const [disableChoiceGroupKey, setDisableChoiceGroupKey] = useState<
+    "indefinitely" | "temporarily"
+  >("indefinitely");
+  const [minDate] = useState(() => {
+    return new Date();
+  });
+  const [maxDate] = useState(() => {
+    return DateTime.now().plus({ years: 1 }).toJSDate();
+  });
+  const [temporarilyDisabledUntil_date, setTemporarilyDisabledUntil_date] =
+    useState(() => {
+      return DateTime.now().plus({ days: 1 }).toJSDate();
+    });
+  const [temporarilyDisabledUntil_time, setTemporarilyDisabledUntil_time] =
+    useState(() => {
+      return DateTime.now()
+        .plus({ days: 1 })
+        .set({
+          minute: 30,
+          second: 0,
+          millisecond: 0,
+        })
+        .toJSDate();
+    });
+
+  const [disableReason, setDisableReason] = useState("");
+  const onSelectTemporarilyDisabledUntil_date = useCallback(
+    (date: Date | null | undefined) => {
+      if (date == null) {
+        return;
+      }
+      setTemporarilyDisabledUntil_date(date);
+    },
+    []
+  );
+  const onChangeTemporarilyDisabledUntil_time = useCallback(
+    (_e: React.FormEvent<IComboBox>, time: Date) => {
+      setTemporarilyDisabledUntil_time(time);
+    },
+    []
+  );
+
+  const onRenderTemporarilyDisableFormField = useCallback(
+    (
+      props?: IChoiceGroupOption & IChoiceGroupOptionProps,
+      render?: (
+        props?: IChoiceGroupOption & IChoiceGroupOptionProps
+      ) => JSX.Element | null
+    ) => {
+      const formattedZone = formatSystemZone(new Date(), locale);
+      return (
+        <div className="flex flex-col gap-2">
+          {render?.(props)}
+          <div className="flex flex-col ml-6 gap-2">
+            <MessageBar
+              messageBarType={MessageBarType.info}
+              styles={{
+                iconContainer: {
+                  display: "none",
+                },
+              }}
+            >
+              <FormattedMessage
+                id="AccountStatusDialog.disable-user.timezone-description"
+                values={{
+                  timezone: formattedZone,
+                }}
+              />
+            </MessageBar>
+            <div className="flex flex-row gap-2">
+              <DatePicker
+                className="flex-1"
+                disabled={disableChoiceGroupKey !== "temporarily"}
+                minDate={minDate}
+                maxDate={maxDate}
+                value={temporarilyDisabledUntil_date}
+                onSelectDate={onSelectTemporarilyDisabledUntil_date}
+              />
+              <TimePicker
+                className="flex-1"
+                disabled={disableChoiceGroupKey !== "temporarily"}
+                allowFreeform={false}
+                increments={30}
+                showSeconds={false}
+                useHour12={false}
+                value={temporarilyDisabledUntil_time}
+                onChange={onChangeTemporarilyDisabledUntil_time}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    },
+    [
+      disableChoiceGroupKey,
+      locale,
+      maxDate,
+      minDate,
+      onChangeTemporarilyDisabledUntil_time,
+      onSelectTemporarilyDisabledUntil_date,
+      temporarilyDisabledUntil_date,
+      temporarilyDisabledUntil_time,
+    ]
+  );
+
+  const disableChoiceGroupOptions: IChoiceGroupOption[] = useMemo(() => {
+    return [
+      {
+        key: "indefinitely",
+        text: renderToString(
+          "AccountStatusDialog.disable-user.disable-period.options.indefinitely"
+        ),
+      },
+      {
+        key: "temporarily",
+        text: renderToString(
+          "AccountStatusDialog.disable-user.disable-period.options.temporarily"
+        ),
+        onRenderField: onRenderTemporarilyDisableFormField,
+      },
+    ];
+  }, [onRenderTemporarilyDisableFormField, renderToString]);
+
+  const onChangeDisableChoiceGroup = useCallback(
+    (
+      _?: React.FormEvent<HTMLElement | HTMLInputElement>,
+      option?: IChoiceGroupOption
+    ) => {
+      if (!option?.key) return;
+      setDisableChoiceGroupKey(option.key as any);
+    },
+    []
+  );
+  const onChangeDisableReason = useCallback(
+    (
+      _e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+      value?: string
+    ) => {
+      setDisableReason(value ?? "");
+    },
+    []
+  );
+  const disableForm = useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <ChoiceGroup
+          styles={choiceGroupStyle}
+          // @ts-expect-error
+          label={
+            <FormattedMessage id="AccountStatusDialog.disable-user.disable-period.label" />
+          }
+          options={disableChoiceGroupOptions}
+          selectedKey={disableChoiceGroupKey}
+          onChange={onChangeDisableChoiceGroup}
+        />
+        <TextField
+          // @ts-expect-error
+          label={
+            <FormattedMessage id="AccountStatusDialog.disable-user.disable-reason.label" />
+          }
+          placeholder={renderToString(
+            "AccountStatusDialog.disable-user.disable-reason.placeholder"
+          )}
+          value={disableReason}
+          onChange={onChangeDisableReason}
+        />
+      </div>
+    );
+  }, [
+    disableChoiceGroupKey,
+    disableChoiceGroupOptions,
+    disableReason,
+    onChangeDisableChoiceGroup,
+    onChangeDisableReason,
+  ]);
 
   const {
     setDisabledStatus,
@@ -768,6 +979,7 @@ export function AccountStatusDialog(
       title: React.ReactElement | null;
       subText: React.ReactElement | null;
     };
+    body: React.ReactElement | null;
     button1: React.ReactElement | null;
     button2: React.ReactElement | null;
   } = useMemo(() => {
@@ -778,6 +990,7 @@ export function AccountStatusDialog(
 
     let title: React.ReactElement | null = null;
     let subText: React.ReactElement | null = null;
+    let body: React.ReactElement | null = null;
     let button1: React.ReactElement | null = null;
     let button2: React.ReactElement | null = null;
 
@@ -850,6 +1063,7 @@ export function AccountStatusDialog(
           values={args}
         />
       );
+      body = disableForm;
       button1 = (
         <PrimaryButton
           theme={themes.destructive}
@@ -1003,10 +1217,11 @@ export function AccountStatusDialog(
         break;
       }
     }
-    return { dialogContentProps: { title, subText }, button1, button2 };
+    return { dialogContentProps: { title, subText }, body, button1, button2 };
   }, [
     accountStatus,
     buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily,
+    disableForm,
     loading,
     mode,
     onClickAnonymize,
@@ -1031,6 +1246,7 @@ export function AccountStatusDialog(
         styles={dialogStyles}
         minWidth={560}
       >
+        {dialogContentPropsAndDialogSlots.body}
         <DialogFooter>
           {dialogContentPropsAndDialogSlots.button1}
           {dialogContentPropsAndDialogSlots.button2}
diff --git a/portal/src/locale-data/en.json b/portal/src/locale-data/en.json
@@ -457,10 +457,16 @@
   "UserDetailsAccountStatus.remove-user.action.cancel": "Cancel removal",
 
   "AccountStatusDialog.disable-user.title": "Disable User",
-  "AccountStatusDialog.disable-user.description": "Do you really want to disable user {username}? Disabling the user {username} will forbid them from logging in. Their existing sessions will also be removed.",
+  "AccountStatusDialog.disable-user.description": "Are you sure you want to disable user {strong, react, children{{username}}}? {br, react} While disabled, the user cannot log in and all active sessions will be terminated.",
+  "AccountStatusDialog.disable-user.timezone-description": "All times in {timezone}",
+  "AccountStatusDialog.disable-user.disable-period.label": "Disable Period",
+  "AccountStatusDialog.disable-user.disable-period.options.indefinitely": "Disable indefinitely",
+  "AccountStatusDialog.disable-user.disable-period.options.temporarily": "Disable until a specific date",
+  "AccountStatusDialog.disable-user.disable-reason.label": "Disable reason (optional)",
+  "AccountStatusDialog.disable-user.disable-reason.placeholder": "Employee on temporary leave",
   "AccountStatusDialog.disable-user.action.disable": "Disable",
   "AccountStatusDialog.reenable-user.title": "Re-enable User",
-  "AccountStatusDialog.reenable-user.description": "Do you really want to re-enable user {username}? Re-enable the user {username} so that they can login again.",
+  "AccountStatusDialog.reenable-user.description": "Are you sure you want to re-enable user {strong, react, children{{username}}}? Re-enable the user {strong, react, children{{username}}} so that they can login again.",
   "AccountStatusDialog.reenable-user.action.reenable": "Re-enable",
   "AccountStatusDialog.delete-user.title": "Remove User",
   "AccountStatusDialog.delete-user.description": "Are you really want to remove user {username}? This action cannot be undone.",
