Introduce FoldableDiv

Author: louischan-oursky

portal/src/FoldableDiv.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback } from "react";
+import ActionButton from "./ActionButton";
+import { useSystemConfig } from "./context/SystemConfigContext";
+
+export interface FoldableDivProps {
+  folded: boolean;
+  label: React.ReactElement;
+  setFolded: (folded: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default function FoldableDiv(
+  props: FoldableDivProps
+): React.ReactElement {
+  const { folded, setFolded, label, className, children } = props;
+  const { themes } = useSystemConfig();
+  const onClick = useCallback(() => {
+    setFolded(!folded);
+  }, [folded, setFolded]);
+
+  return (
+    <div className={className}>
+      <ActionButton
+        text={label}
+        iconProps={{
+          iconName: folded ? "ChevronDown" : "ChevronUp",
+        }}
+        styles={{
+          root: {
+            padding: "0",
+          },
+          flexContainer: {
+            flexDirection: "row-reverse",
+            gap: "8px",
+          },
+          label: {
+            color: themes.main.palette.themePrimary,
+            margin: "0",
+          },
+        }}
+        onClick={onClick}
+      />
+      {folded ? null : children}
+    </div>
+  );
+}

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

@@ -28,7 +28,7 @@
 }
 
 .accountValidPeriodSection {
-  @apply flex flex-col gap-2;
+  @apply flex flex-col gap-2 py-2;
 }
 
 .accountValidPeriodForm {

portal/src/graphql/adminapi/AddUserScreen.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import cn from "classnames";
 import { useNavigate, useParams } from "react-router-dom";
 import { Context, FormattedMessage } from "@oursky/react-messageformat";
@@ -44,6 +50,7 @@ import { AccountValidPeriodForm } from "./UserDetailsAccountStatus";
 import WidgetTitle from "../../WidgetTitle";
 import WidgetDescription from "../../WidgetDescription";
 import { useSystemConfig } from "../../context/SystemConfigContext";
+import FoldableDiv from "../../FoldableDiv";
 
 enum PasswordCreationType {
   ManualEntry = "manual_entry",
@@ -250,6 +257,8 @@ const AddUserContent: React.VFC<AddUserContentProps> = function AddUserContent(
   } = props;
   const { renderToString } = useContext(Context);
 
+  const [advancedFolded, setAdvancedFolded] = useState(true);
+
   const { themes } = useSystemConfig();
 
   const {
@@ -614,32 +623,34 @@ const AddUserContent: React.VFC<AddUserContentProps> = function AddUserContent(
                     }
                   />
                 </div>
-                <div
-                  className={cn(
-                    styles.widget,
-                    styles.accountValidPeriodSection
-                  )}
+                <FoldableDiv
+                  className={cn(styles.widget)}
+                  label={<FormattedMessage id="AdduserScreen.advanced" />}
+                  folded={advancedFolded}
+                  setFolded={setAdvancedFolded}
                 >
-                  <WidgetTitle>
-                    <FormattedMessage id="AddUserScreen.valid-period.title" />
-                  </WidgetTitle>
-                  <WidgetDescription
-                    styles={{
-                      root: {
-                        color: themes.main.semanticColors.bodySubtext,
-                      },
-                    }}
-                  >
-                    <FormattedMessage id="AddUserScreen.valid-period.description" />
-                  </WidgetDescription>
-                  <AccountValidPeriodForm
-                    className={styles.accountValidPeriodForm}
-                    accountValidFrom={state.accountValidFrom}
-                    accountValidUntil={state.accountValidUntil}
-                    onPickAccountValidFrom={onPickAccountValidFrom}
-                    onPickAccountValidUntil={onPickAccountValidUntil}
-                  />
-                </div>
+                  <div className={styles.accountValidPeriodSection}>
+                    <WidgetTitle>
+                      <FormattedMessage id="AddUserScreen.valid-period.title" />
+                    </WidgetTitle>
+                    <WidgetDescription
+                      styles={{
+                        root: {
+                          color: themes.main.semanticColors.bodySubtext,
+                        },
+                      }}
+                    >
+                      <FormattedMessage id="AddUserScreen.valid-period.description" />
+                    </WidgetDescription>
+                    <AccountValidPeriodForm
+                      className={styles.accountValidPeriodForm}
+                      accountValidFrom={state.accountValidFrom}
+                      accountValidUntil={state.accountValidUntil}
+                      onPickAccountValidFrom={onPickAccountValidFrom}
+                      onPickAccountValidUntil={onPickAccountValidUntil}
+                    />
+                  </div>
+                </FoldableDiv>
               </>
             ) : null}
           </>

portal/src/locale-data/en.json

@@ -344,6 +344,7 @@
   "AddUserScreen.send-password": "Send the password to user's email",
   "AddUserScreen.password-setup.label": "Password setup",
   "AddUserScreen.additional-option.label": "Additional option",
+  "AdduserScreen.advanced": "Advanced",
   "AddUserScreen.valid-period.title": "Valid Period",
   "AddUserScreen.valid-period.description": "Set a valid period during which this account can log in. Outside this period, the user cannot log in. Useful for temporary access, such as contractors or external partners.",