From 40febdae87518dac186146b269008922f0cd5c5c Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 15 Feb 2023 16:55:47 -0500
Subject: [PATCH] fix(striker-ui): allow string header in ExpandablePanel

---
 striker-ui/components/Panels/ExpandablePanel.tsx           | 7 ++++++-
 striker-ui/components/StrikerConfig/ConfigPeersForm.tsx    | 5 +----
 .../components/StrikerConfig/ManageChangedSSHKeysForm.tsx  | 5 +----
 striker-ui/components/StrikerConfig/ManageUsersForm.tsx    | 5 +----
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/striker-ui/components/Panels/ExpandablePanel.tsx b/striker-ui/components/Panels/ExpandablePanel.tsx
index 63fd0bcf..d64e6f97 100644
--- a/striker-ui/components/Panels/ExpandablePanel.tsx
+++ b/striker-ui/components/Panels/ExpandablePanel.tsx
@@ -12,6 +12,7 @@ import InnerPanel from './InnerPanel';
 import InnerPanelBody from './InnerPanelBody';
 import InnerPanelHeader from './InnerPanelHeader';
 import Spinner from '../Spinner';
+import { BodyText } from '../Text';
 
 type ExpandablePanelOptionalProps = {
   expandInitially?: boolean;
@@ -46,6 +47,10 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
     [isExpand],
   );
   const contentHeight = useMemo(() => (isExpand ? 'auto' : '.2em'), [isExpand]);
+  const headerElement = useMemo(
+    () => (typeof header === 'string' ? <BodyText>{header}</BodyText> : header),
+    [header],
+  );
   const headerSpinner = useMemo(
     () =>
       isShowHeaderSpinner && !isExpand && isLoading ? (
@@ -74,7 +79,7 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
     <InnerPanel>
       <InnerPanelHeader>
         <FlexBox row>
-          {header}
+          {headerElement}
           {headerSpinner}
         </FlexBox>
         <IconButton
diff --git a/striker-ui/components/StrikerConfig/ConfigPeersForm.tsx b/striker-ui/components/StrikerConfig/ConfigPeersForm.tsx
index 4f18a79b..7d02c424 100644
--- a/striker-ui/components/StrikerConfig/ConfigPeersForm.tsx
+++ b/striker-ui/components/StrikerConfig/ConfigPeersForm.tsx
@@ -127,10 +127,7 @@ const ConfigPeersForm: FC<ConfigPeerFormProps> = ({
 
   return (
     <>
-      <ExpandablePanel
-        header={<BodyText>Configure striker peers</BodyText>}
-        loading={isLoading}
-      >
+      <ExpandablePanel header="Configure striker peers" loading={isLoading}>
         <Grid columns={{ xs: 1, sm: 2 }} container spacing="1em">
           <Grid item xs={1}>
             <List
diff --git a/striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx b/striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx
index 128e2c94..a7fe7c0c 100644
--- a/striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx
+++ b/striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx
@@ -85,10 +85,7 @@ const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
 
   return (
     <>
-      <ExpandablePanel
-        header={<BodyText>Manage changed SSH keys</BodyText>}
-        loading={isLoading}
-      >
+      <ExpandablePanel header="Manage changed SSH keys" loading={isLoading}>
         <FlexBox spacing=".2em">
           <BodyText>
             The identity of the following targets have unexpectedly changed.
diff --git a/striker-ui/components/StrikerConfig/ManageUsersForm.tsx b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx
index 4af37416..a861b3e4 100644
--- a/striker-ui/components/StrikerConfig/ManageUsersForm.tsx
+++ b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx
@@ -36,10 +36,7 @@ const ManageUsersForm: FC = () => {
   }, [setListMessage, setUsers, users]);
 
   return (
-    <ExpandablePanel
-      header={<BodyText>Manage users</BodyText>}
-      loading={!users}
-    >
+    <ExpandablePanel header="Manage users" loading={!users}>
       <List
         allowEdit={false}
         listEmpty={<MessageBox {...listMessage} />}