fix(striker-ui): allow string header in ExpandablePanel

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

striker-ui/components/StrikerConfig/ConfigPeersForm.tsx

@@ -127,10 +127,7 @@ const ConfigPeersForm: FC<ConfigPeerFormProps> = ({
 
   return (
     <>
-      <ExpandablePanel
+      <ExpandablePanel header="Configure striker peers" loading={isLoading}>
-        header={<BodyText>Configure striker peers</BodyText>}
-        loading={isLoading}
-      >
         <Grid columns={{ xs: 1, sm: 2 }} container spacing="1em">
           <Grid item xs={1}>
             <List

striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx

@@ -85,10 +85,7 @@ const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
 
   return (
     <>
-      <ExpandablePanel
+      <ExpandablePanel header="Manage changed SSH keys" loading={isLoading}>
-        header={<BodyText>Manage changed SSH keys</BodyText>}
-        loading={isLoading}
-      >
         <FlexBox spacing=".2em">
           <BodyText>
             The identity of the following targets have unexpectedly changed.

striker-ui/components/StrikerConfig/ManageUsersForm.tsx

@@ -36,10 +36,7 @@ const ManageUsersForm: FC = () => {
   }, [setListMessage, setUsers, users]);
 
   return (
-    <ExpandablePanel
+    <ExpandablePanel header="Manage users" loading={!users}>
-      header={<BodyText>Manage users</BodyText>}
-      loading={!users}
-    >
       <List
         allowEdit={false}
         listEmpty={<MessageBox {...listMessage} />}