Show edit disable schedule button

Author: louischan-oursky

portal/src/graphql/adminapi/UserDetailsAccountStatus.module.css

@@ -1,25 +1,16 @@
-.cell--not-first {
-  @apply mt-6;
-}
-
-.cell--last {
-  @apply border-b-0;
-}
-
 .actionCell {
-  padding-left: 1px;
-  display: grid;
   grid-template:
-    "plabel    paction"
-    "pbody     paction"
-    "pspacer   pspacer"
+    "plabel         paction"
+    "pbody          paction"
+    "pdescription   paction"
     / auto min-content min-content;
-  grid-gap: 4px 8px;
+  @apply grid;
+  @apply gap-x-2 gap-y-1;
+  @apply py-6;
 }
 
-.actionCellSpacer {
-  grid-area: pspacer;
-  @apply h-4;
+.actionCell:last-child {
+  @apply border-b-0;
 }
 
 .actionCellLabel {
@@ -30,8 +21,13 @@
   grid-area: pbody;
 }
 
+.actionCellDescription {
+  grid-area: pdescription;
+  @apply flex flex-col;
+}
+
 .actionCellActionButtonContainer {
-  @apply flex flex-row place-self-center justify-between items-center gap-2;
+  @apply flex flex-col place-self-center justify-between items-end gap-4;
   grid-area: paction;
 }
 

portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx

@@ -1,7 +1,6 @@
 import { IStyle, Label, Text } from "@fluentui/react";
 import { FormattedMessage, Context } from "@oursky/react-messageformat";
 import React, { useContext } from "react";
-import cn from "classnames";
 import styles from "./UserDetailsAccountStatus.module.css";
 import ListCellLayout from "../../ListCellLayout";
 import { useSystemConfig } from "../../context/SystemConfigContext";
@@ -120,9 +119,7 @@ const DisableUserCell: React.VFC<DisableUserCellProps> =
     const { data } = props;
     const buttonStates = useButtonStates(data);
     return (
-      <ListCellLayout
-        className={cn(styles.actionCell, styles["cell--not-first"])}
-      >
+      <ListCellLayout className={styles.actionCell}>
         <div className={styles.actionCellLabel}>
           <Text
             styles={{
@@ -140,66 +137,75 @@ const DisableUserCell: React.VFC<DisableUserCellProps> =
           >
             <FormattedMessage id="UserDetailsAccountStatus.disable-user.body" />
           </Text>
+        </div>
+        {buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily &&
+        (buttonStates.toggleDisable.disableReason != null ||
+          buttonStates.toggleDisable.temporarilyDisabledUntil != null) ? (
+          <div className={styles.actionCellDescription}>
+            {buttonStates.toggleDisable.disableReason != null ? (
+              <>
+                <Text
+                  styles={{
+                    root: labelTextStyle,
+                  }}
+                >
+                  {buttonStates.toggleDisable.disableReason}
+                </Text>
+              </>
+            ) : null}
 
-          {buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily &&
-          buttonStates.toggleDisable.disableReason != null ? (
-            <>
-              <br />
-              <Text
-                styles={{
-                  root: labelTextStyle,
-                }}
-              >
-                {buttonStates.toggleDisable.disableReason}
-              </Text>
-            </>
-          ) : null}
-
-          {buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily &&
-          buttonStates.toggleDisable.temporarilyDisabledUntil != null ? (
-            <>
-              <br />
-              <Text
-                styles={{
-                  root: labelTextStyle,
-                }}
-              >
-                <FormattedMessage
-                  id="UserDetailsAccountStatus.disable-user.until"
-                  values={{
-                    until:
-                      formatDatetime(
-                        locale,
-                        buttonStates.toggleDisable.temporarilyDisabledUntil
-                      ) ?? "",
+            {buttonStates.toggleDisable.temporarilyDisabledUntil != null ? (
+              <>
+                <Text
+                  styles={{
+                    root: labelTextStyle,
                   }}
-                />
-              </Text>
-            </>
-          ) : null}
-        </div>
-        <OutlinedActionButton
-          disabled={buttonStates.toggleDisable.buttonDisabled}
-          theme={
-            buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily
-              ? themes.actionButton
-              : themes.destructive
-          }
-          className={cn(styles.actionCellActionButton)}
-          iconProps={
-            buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily
-              ? { iconName: "Play" }
-              : { iconName: "Blocked" }
-          }
-          text={
-            buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily ? (
-              <FormattedMessage id="UserDetailsAccountStatus.disable-user.action.enable" />
-            ) : (
+                >
+                  <FormattedMessage
+                    id="UserDetailsAccountStatus.disable-user.until"
+                    values={{
+                      until:
+                        formatDatetime(
+                          locale,
+                          buttonStates.toggleDisable.temporarilyDisabledUntil
+                        ) ?? "",
+                    }}
+                  />
+                </Text>
+              </>
+            ) : null}
+          </div>
+        ) : null}
+        {buttonStates.toggleDisable.isDisabledIndefinitelyOrTemporarily ? (
+          <div className={styles.actionCellActionButtonContainer}>
+            <OutlinedActionButton
+              disabled={buttonStates.toggleDisable.buttonDisabled}
+              theme={themes.actionButton}
+              iconProps={{ iconName: "Play" }}
+              text={
+                <FormattedMessage id="UserDetailsAccountStatus.disable-user.action.enable" />
+              }
+            />
+            <OutlinedActionButton
+              disabled={buttonStates.toggleDisable.buttonDisabled}
+              theme={themes.destructive}
+              iconProps={{ iconName: "Calendar" }}
+              text={
+                <FormattedMessage id="UserDetailsAccountStatus.disable-user.action.edit-schedule" />
+              }
+            />
+          </div>
+        ) : (
+          <OutlinedActionButton
+            disabled={buttonStates.toggleDisable.buttonDisabled}
+            theme={themes.destructive}
+            className={styles.actionCellActionButton}
+            iconProps={{ iconName: "Blocked" }}
+            text={
               <FormattedMessage id="UserDetailsAccountStatus.disable-user.action.disable" />
-            )
-          }
-        />
-        <div className={cn(styles.actionCellSpacer)} />
+            }
+          />
+        )}
       </ListCellLayout>
     );
   };
@@ -210,19 +216,17 @@ const AnonymizeUserCell: React.VFC<AnonymizeUserCellProps> =
     const { data } = props;
     const buttonStates = useButtonStates(data);
     return (
-      <ListCellLayout
-        className={cn(styles.actionCell, styles["cell--not-first"])}
-      >
+      <ListCellLayout className={styles.actionCell}>
         <Text
-          className={cn(styles.actionCellLabel)}
+          className={styles.actionCellLabel}
           styles={{
             root: labelTextStyle,
           }}
         >
           <FormattedMessage id="UserDetailsAccountStatus.anonymize-user.title" />
         </Text>
         <Text
-          className={cn(styles.actionCellBody)}
+          className={styles.actionCellBody}
           styles={{
             root: bodyTextStyle,
           }}
@@ -236,7 +240,7 @@ const AnonymizeUserCell: React.VFC<AnonymizeUserCellProps> =
               ? themes.actionButton
               : themes.destructive
           }
-          className={cn(styles.actionCellActionButton)}
+          className={styles.actionCellActionButton}
           iconProps={
             buttonStates.anonymize.anonymizeAt != null
               ? { iconName: "Undo" }
@@ -250,7 +254,6 @@ const AnonymizeUserCell: React.VFC<AnonymizeUserCellProps> =
             )
           }
         />
-        <div className={cn(styles.actionCellSpacer)} />
       </ListCellLayout>
     );
   };
@@ -262,35 +265,29 @@ const RemoveUserCell: React.VFC<RemoveUserCellProps> = function RemoveUserCell(
   const { data } = props;
   const buttonStates = useButtonStates(data);
   return (
-    <ListCellLayout
-      className={cn(
-        styles.actionCell,
-        styles["cell--not-first"],
-        styles["cell--last"]
-      )}
-    >
+    <ListCellLayout className={styles.actionCell}>
       <Text
-        className={cn(styles.actionCellLabel)}
+        className={styles.actionCellLabel}
         styles={{
           root: labelTextStyle,
         }}
       >
         <FormattedMessage id="UserDetailsAccountStatus.remove-user.title" />
       </Text>
       <Text
-        className={cn(styles.actionCellBody)}
+        className={styles.actionCellBody}
         styles={{
           root: bodyTextStyle,
         }}
       >
         <FormattedMessage id="UserDetailsAccountStatus.remove-user.body" />
       </Text>
       {buttonStates.delete.deleteAt != null ? (
-        <div className={cn(styles.actionCellActionButtonContainer)}>
+        <div className={styles.actionCellActionButtonContainer}>
           <OutlinedActionButton
             disabled={buttonStates.delete.buttonDisabled}
             theme={themes.actionButton}
-            className={cn(styles.actionCellActionButton)}
+            className={styles.actionCellActionButton}
             iconProps={{ iconName: "Undo" }}
             text={
               <FormattedMessage id="UserDetailsAccountStatus.remove-user.action.cancel" />
@@ -299,7 +296,7 @@ const RemoveUserCell: React.VFC<RemoveUserCellProps> = function RemoveUserCell(
           <OutlinedActionButton
             disabled={buttonStates.delete.buttonDisabled}
             theme={themes.destructive}
-            className={cn(styles.actionCellActionButton)}
+            className={styles.actionCellActionButton}
             iconProps={{ iconName: "Delete" }}
             text={
               <FormattedMessage id="UserDetailsAccountStatus.remove-user.action.remove-now" />
@@ -310,14 +307,13 @@ const RemoveUserCell: React.VFC<RemoveUserCellProps> = function RemoveUserCell(
         <OutlinedActionButton
           disabled={buttonStates.delete.buttonDisabled}
           theme={themes.destructive}
-          className={cn(styles.actionCellActionButton)}
+          className={styles.actionCellActionButton}
           iconProps={{ iconName: "Delete" }}
           text={
             <FormattedMessage id="UserDetailsAccountStatus.remove-user.action.remove" />
           }
         />
       )}
-      <div className={cn(styles.actionCellSpacer)} />
     </ListCellLayout>
   );
 };

portal/src/locale-data/en.json

@@ -458,6 +458,7 @@
   "UserDetailsAccountStatus.disable-user.until": "Disabled until {until}",
   "UserDetailsAccountStatus.disable-user.action.disable": "Disable user",
   "UserDetailsAccountStatus.disable-user.action.enable": "Enable user",
+  "UserDetailsAccountStatus.disable-user.action.edit-schedule": "Edit Disable Schedule",
   "UserDetailsAccountStatus.anonymize-user.title": "Anonymize User",
   "UserDetailsAccountStatus.anonymize-user.body": "Delete all data of this user, only the user ID is retained.",
   "UserDetailsAccountStatus.anonymize-user.action.anonymize": "Anonymize user",