Wired data to user detail modal in adminX

refs https://github.com/TryGhost/Team/issues/3151

- wires user data in the user detail modal from the api

ghost/admin-x-settings/src/components/settings/general/Users.tsx

@@ -8,10 +8,11 @@ import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import TabView from '../../../admin-x-ds/global/TabView';
 import UserDetailModal from './modals/UserDetailModal';
 import useStaffUsers from '../../../hooks/useStaffUsers';
+import {User} from '../../../types/api';
 
-const Owner: React.FC<any> = ({user}) => {
+const Owner: React.FC<{user: User}> = ({user}) => {
     const showDetailModal = () => {
-        NiceModal.show(UserDetailModal);
+        NiceModal.show(UserDetailModal, {user});
     };
 
     if (!user) {
@@ -25,9 +26,13 @@ const Owner: React.FC<any> = ({user}) => {
     );
 };
 
-const UsersList: React.FC<any> = ({users}) => {
+interface UsersListProps {
-    const showDetailModal = () => {
+    users: User[];
-        NiceModal.show(UserDetailModal);
+}
+
+const UsersList: React.FC<UsersListProps> = ({users}) => {
+    const showDetailModal = (user: User) => {
+        NiceModal.show(UserDetailModal, {user});
     };
 
     if (!users || !users.length) {
@@ -40,16 +45,16 @@ const UsersList: React.FC<any> = ({users}) => {
 
     return (
         <List>
-            {users.map((user: any) => {
+            {users.map((user) => {
                 return (
                     <ListItem
                         key={user.id}
-                        action={<Button color='green' label='Edit' link={true} onClick={showDetailModal} />}
+                        action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
                         detail={user.email}
                         hideActions={true}
                         id={`list-item-${user.id}`}
                         title={user.name}
-                        onClick={showDetailModal} />
+                        onClick={() => showDetailModal(user)} />
                 );
             })}
         </List>

ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx

@@ -8,31 +8,35 @@ import SettingGroup from '../../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../../admin-x-ds/global/TextField';
 import Toggle from '../../../../admin-x-ds/global/Toggle';
+import {User} from '../../../../types/api';
 
 interface CustomHeadingProps {
     children?: React.ReactNode;
 }
 
+interface UserDetailProps {
+    user: User;
+}
+
 const CustomHeader: React.FC<CustomHeadingProps> = ({children}) => {
     return (
         <Heading level={4} separator={true}>{children}</Heading>
     );
 };
-
+const BasicInputs: React.FC<UserDetailProps> = ({user}) => {
-const Basic: React.FC = () => {
+    return (
-    const inputs = (
         <SettingGroupContent>
             <TextField
                 hint="Use real name so people can recognize you"
                 title="Full name"
-                value="Martin Culhane"
+                value={user.name}
             />
             <TextField
                 title="Email"
-                value="martin@culhane.com"
+                value={user.email}
             />
             <Radio
-                defaultSelectedOption="administrator"
+                defaultSelectedOption={user.roles[0].name.toLowerCase()}
                 id='role'
                 options={[
                     {
@@ -61,83 +65,98 @@ const Basic: React.FC = () => {
             />
         </SettingGroupContent>
     );
+};
 
+const Basic: React.FC<UserDetailProps> = ({user}) => {
     return (
         <SettingGroup
             border={false}
             customHeader={<CustomHeader>Basic info</CustomHeader>}
             title='Basic'
         >
-            {inputs}
+            <BasicInputs user={user} />
         </SettingGroup>
     );
 };
 
-const Details: React.FC = () => {
+const DetailsInputs: React.FC<UserDetailProps> = ({user}) => {
-    const inputs = (
+    return (
         <SettingGroupContent>
             <TextField
                 hint="https://example.com/author"
                 title="Slug"
+                value={user.slug}
             />
             <TextField
                 title="Location"
+                value={user.location}
             />
             <TextField
                 title="Website"
+                value={user.website}
             />
             <TextField
                 title="Facebook profile"
+                value={user.facebook}
             />
             <TextField
                 title="Twitter profile"
+                value={user.twitter}
             />
             <TextField
                 hint="Recommended: 200 characters."
                 title="Bio"
+                value={user.bio}
             />
         </SettingGroupContent>
     );
+};
 
+const Details: React.FC<UserDetailProps> = ({user}) => {
     return (
         <SettingGroup
             border={false}
             customHeader={<CustomHeader>Details</CustomHeader>}
             title='Details'
         >
-            {inputs}
+            <DetailsInputs user={user} />
         </SettingGroup>
     );
 };
 
-const EmailNotifications: React.FC = () => {
+const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user}) => {
-    const inputs = (
+    return (
         <SettingGroupContent>
             <Toggle
+                checked={user.comment_notifications}
                 direction='rtl'
                 hint='Every time a member comments on one of your posts'
                 id='comments'
                 label='Comments'
             />
             <Toggle
+                checked={user.free_member_signup_notification}
                 direction='rtl'
                 hint='Every time a new free member signs up'
                 id='new-signups'
                 label='New signups'
             />
             <Toggle
+                checked={user.paid_subscription_started_notification}
                 direction='rtl'
                 hint='Every time a member starts a new paid subscription'
                 id='new-paid-members'
                 label='New paid members'
             />
             <Toggle
+                checked={user.paid_subscription_canceled_notification}
                 direction='rtl'
                 hint='Every time a member cancels their paid subscription'
                 id='paid-member-cancellations'
                 label='Paid member cancellations'
             />
             <Toggle
+                checked={user.milestone_notifications}
                 direction='rtl'
                 hint='Occasional summaries of your audience & revenue growth'
                 id='milestones'
@@ -145,14 +164,16 @@ const EmailNotifications: React.FC = () => {
             />
         </SettingGroupContent>
     );
+};
 
+const EmailNotifications: React.FC<UserDetailProps> = ({user}) => {
     return (
         <SettingGroup
             border={false}
             customHeader={<CustomHeader>Email notifications</CustomHeader>}
             title='Email notifications'
         >
-            {inputs}
+            <EmailNotificationsInputs user={user} />
         </SettingGroup>
     );
 };
@@ -198,7 +219,11 @@ const Password: React.FC = () => {
     );
 };
 
-const UserDetailModal = NiceModal.create(() => {
+interface UserDetailModalProps {
+    user: User;
+}
+
+const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => {
     return (
         <Modal
             okColor='green'
@@ -211,19 +236,19 @@ const UserDetailModal = NiceModal.create(() => {
             <div>
                 <div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12 text-white'>
                     <div className='mt-60'>
-                        <Heading styles='text-white'>Martin Culhane</Heading>
+                        <Heading styles='text-white'>{user.name}</Heading>
                         <span className='text-md font-semibold'>Administrator</span>
                     </div>
                 </div>
                 <div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'>
-                    <Basic />
+                    <Basic user={user} />
-                    <Details />
+                    <Details user={user} />
-                    <EmailNotifications />
+                    <EmailNotifications user={user} />
                     <Password />
                 </div>
             </div>
         </Modal>
     );
-});
+};
 
-export default UserDetailModal;
+export default NiceModal.create(UserDetailModal);