mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Wired staff users list in admin-x settings
refs https://github.com/TryGhost/Team/issues/3151 - adds api to fetch staff users - adds provider to use users data in the application - wires Users UI to show real owner and other staff users - combines all data providers for application under a single provider
This commit is contained in:
parent
c01af74265
commit
6f2424976c
11 changed files with 270 additions and 60 deletions
|
@ -1,9 +1,9 @@
|
||||||
import Button from './admin-x-ds/global/Button';
|
import Button from './admin-x-ds/global/Button';
|
||||||
|
import DataProvider from './components/providers/DataProvider';
|
||||||
import Heading from './admin-x-ds/global/Heading';
|
import Heading from './admin-x-ds/global/Heading';
|
||||||
import NiceModal from '@ebay/nice-modal-react';
|
import NiceModal from '@ebay/nice-modal-react';
|
||||||
import Settings from './components/Settings';
|
import Settings from './components/Settings';
|
||||||
import Sidebar from './components/Sidebar';
|
import Sidebar from './components/Sidebar';
|
||||||
import {SettingsProvider} from './components/SettingsProvider';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
@ -26,9 +26,9 @@ function App() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-auto pt-[3vmin] md:ml-[280px] md:pt-[84px]">
|
<div className="flex-auto pt-[3vmin] md:ml-[280px] md:pt-[84px]">
|
||||||
<SettingsProvider>
|
<DataProvider>
|
||||||
<Settings />
|
<Settings />
|
||||||
</SettingsProvider>
|
</DataProvider>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NiceModal.Provider>
|
</NiceModal.Provider>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React, {useContext} from 'react';
|
||||||
import EmailSettings from './settings/email/EmailSettings';
|
import EmailSettings from './settings/email/EmailSettings';
|
||||||
import GeneralSettings from './settings/general/GeneralSettings';
|
import GeneralSettings from './settings/general/GeneralSettings';
|
||||||
import MembershipSettings from './settings/membership/MembershipSettings';
|
import MembershipSettings from './settings/membership/MembershipSettings';
|
||||||
import {SettingsContext} from './SettingsProvider';
|
import {SettingsContext} from './providers/SettingsProvider';
|
||||||
|
|
||||||
const Settings: React.FC = () => {
|
const Settings: React.FC = () => {
|
||||||
const {settings} = useContext(SettingsContext) || {};
|
const {settings} = useContext(SettingsContext) || {};
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {SettingsProvider} from './SettingsProvider';
|
||||||
|
import {UsersProvider} from './UsersProvider';
|
||||||
|
|
||||||
|
type DataProviderProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DataProvider: React.FC<DataProviderProps> = ({children}) => {
|
||||||
|
return (
|
||||||
|
<SettingsProvider>
|
||||||
|
<UsersProvider>
|
||||||
|
{children}
|
||||||
|
</UsersProvider>
|
||||||
|
</SettingsProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataProvider;
|
|
@ -1,6 +1,6 @@
|
||||||
import React, {createContext, useEffect, useState} from 'react';
|
import React, {createContext, useEffect, useState} from 'react';
|
||||||
import {Setting} from '../types/api';
|
import {Setting} from '../../types/api';
|
||||||
import {getSettings, updateSettings} from '../utils/api';
|
import {getSettings, updateSettings} from '../../utils/api';
|
||||||
|
|
||||||
// Define the Settings Context
|
// Define the Settings Context
|
||||||
interface SettingsContextProps {
|
interface SettingsContextProps {
|
|
@ -0,0 +1,42 @@
|
||||||
|
import React, {createContext, useEffect, useState} from 'react';
|
||||||
|
import {User} from '../../types/api';
|
||||||
|
import {getUsers} from '../../utils/api';
|
||||||
|
|
||||||
|
interface UsersContextProps {
|
||||||
|
users: User[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UsersProviderProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UsersContext = createContext<UsersContextProps>({
|
||||||
|
users: []
|
||||||
|
});
|
||||||
|
|
||||||
|
const UsersProvider: React.FC<UsersProviderProps> = ({children}) => {
|
||||||
|
const [users, setUsers] = useState <User[]> ([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUsers = async (): Promise<void> => {
|
||||||
|
try {
|
||||||
|
// get list of staff users from the API
|
||||||
|
const data = await getUsers();
|
||||||
|
setUsers(data.users);
|
||||||
|
} catch (error) {
|
||||||
|
// Log error in API
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUsers();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Provide the settings and the saveSettings function to the children components
|
||||||
|
return (
|
||||||
|
<UsersContext.Provider value={{users}}>
|
||||||
|
{children}
|
||||||
|
</UsersContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {UsersContext, UsersProvider};
|
|
@ -2,7 +2,7 @@ import React, {useContext, useState} from 'react';
|
||||||
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
||||||
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
|
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
|
||||||
import TextField from '../../../admin-x-ds/global/TextField';
|
import TextField from '../../../admin-x-ds/global/TextField';
|
||||||
import {SettingsContext} from '../../SettingsProvider';
|
import {SettingsContext} from '../../providers/SettingsProvider';
|
||||||
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
|
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
|
||||||
import {getSettingValue} from '../../../utils/helpers';
|
import {getSettingValue} from '../../../utils/helpers';
|
||||||
|
|
||||||
|
|
|
@ -7,14 +7,61 @@ import React from 'react';
|
||||||
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
||||||
import TabView from '../../../admin-x-ds/global/TabView';
|
import TabView from '../../../admin-x-ds/global/TabView';
|
||||||
import UserDetailModal from './modals/UserDetailModal';
|
import UserDetailModal from './modals/UserDetailModal';
|
||||||
|
import useStaffUsers from '../../../hooks/useStaffUsers';
|
||||||
|
|
||||||
const Users: React.FC = () => {
|
const Owner: React.FC<any> = ({user}) => {
|
||||||
const showInviteModal = () => {
|
if (!user) {
|
||||||
NiceModal.show(InviteUserModal);
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<span>{user.name} — <strong>Owner</strong></span>
|
||||||
|
<span className='text-xs text-grey-700'>{user.email}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const UsersList: React.FC<any> = ({users}) => {
|
||||||
|
const showDetailModal = () => {
|
||||||
|
NiceModal.show(UserDetailModal);
|
||||||
};
|
};
|
||||||
|
|
||||||
const showDetailModal = () => {
|
if (!users || !users.length) {
|
||||||
NiceModal.show(UserDetailModal);
|
return (
|
||||||
|
<div className='mt-2 text-grey-700'>
|
||||||
|
<p>No users found</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List>
|
||||||
|
{users.map((user: any) => {
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
key={user.id}
|
||||||
|
action={<Button color='green' label='Edit' link={true} onClick={showDetailModal} />}
|
||||||
|
detail={user.email}
|
||||||
|
hideActions={true}
|
||||||
|
id={`list-item-${user.id}`}
|
||||||
|
title={user.name} />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Users: React.FC = () => {
|
||||||
|
const {
|
||||||
|
ownerUser,
|
||||||
|
adminUsers,
|
||||||
|
editorUsers,
|
||||||
|
authorUsers,
|
||||||
|
contributorUsers
|
||||||
|
} = useStaffUsers();
|
||||||
|
|
||||||
|
const showInviteModal = () => {
|
||||||
|
NiceModal.show(InviteUserModal);
|
||||||
};
|
};
|
||||||
|
|
||||||
const buttons = (
|
const buttons = (
|
||||||
|
@ -23,52 +70,35 @@ const Users: React.FC = () => {
|
||||||
}} />
|
}} />
|
||||||
);
|
);
|
||||||
|
|
||||||
const owner = (
|
|
||||||
<div className='flex flex-col'>
|
|
||||||
<span>Cristofer Vaccaro — <strong>Owner</strong></span>
|
|
||||||
<span className='text-xs text-grey-700'>cristofer@example.com</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const admins = (
|
|
||||||
<List>
|
|
||||||
<ListItem
|
|
||||||
action={<Button color='green' label='Edit' link={true} onClick={showDetailModal} />}
|
|
||||||
detail='alena@press.com'
|
|
||||||
hideActions={true}
|
|
||||||
id='list-item-1'
|
|
||||||
title='Alena Press' />
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
|
|
||||||
const editors = (
|
|
||||||
<List>
|
|
||||||
<ListItem
|
|
||||||
action={<Button color='green' label='Edit' link={true} />}
|
|
||||||
detail='lydia@siphron.com'
|
|
||||||
hideActions={true}
|
|
||||||
id='list-item-1'
|
|
||||||
title='Lydia Siphron' />
|
|
||||||
<ListItem
|
|
||||||
action={<Button color='green' label='Edit' link={true} />}
|
|
||||||
detail='james@korsgaard.com'
|
|
||||||
hideActions={true}
|
|
||||||
id='list-item-1'
|
|
||||||
title='James Korsgaard' />
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{id: 'users-admins', title: 'Administrators', contents: admins},
|
{
|
||||||
{id: 'users-editors', title: 'Editors', contents: editors}
|
id: 'users-admins',
|
||||||
|
title: 'Administrators',
|
||||||
|
contents: (<UsersList users={adminUsers} />)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'users-editors',
|
||||||
|
title: 'Editors',
|
||||||
|
contents: (<UsersList users={editorUsers} />)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'users-authors',
|
||||||
|
title: 'Authors',
|
||||||
|
contents: (<UsersList users={authorUsers} />)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'users-contributors',
|
||||||
|
title: 'Contributors',
|
||||||
|
contents: (<UsersList users={contributorUsers} />)
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingGroup
|
<SettingGroup
|
||||||
customButtons={buttons}
|
customButtons={buttons}
|
||||||
title='Users and permissions'
|
title='Users and permissions'
|
||||||
>
|
>
|
||||||
{owner}
|
<Owner user={ownerUser} />
|
||||||
<TabView tabs={tabs} />
|
<TabView tabs={tabs} />
|
||||||
</SettingGroup>
|
</SettingGroup>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, {useEffect} from 'react';
|
import React, {useEffect} from 'react';
|
||||||
import {Setting, SettingValue} from '../types/api';
|
import {Setting, SettingValue} from '../types/api';
|
||||||
import {SettingsContext} from '../components/SettingsProvider';
|
import {SettingsContext} from '../components/providers/SettingsProvider';
|
||||||
import {TSettingGroupStates} from '../admin-x-ds/settings/SettingGroup';
|
import {TSettingGroupStates} from '../admin-x-ds/settings/SettingGroup';
|
||||||
import {useContext, useReducer, useRef, useState} from 'react';
|
import {useContext, useReducer, useRef, useState} from 'react';
|
||||||
|
|
||||||
|
|
39
ghost/admin-x-settings/src/hooks/useStaffUsers.tsx
Normal file
39
ghost/admin-x-settings/src/hooks/useStaffUsers.tsx
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
import {User} from '../types/api';
|
||||||
|
import {UsersContext} from '../components/providers/UsersProvider';
|
||||||
|
import {useContext} from 'react';
|
||||||
|
|
||||||
|
export type UsersHook = {
|
||||||
|
users: User[];
|
||||||
|
ownerUser: User;
|
||||||
|
adminUsers: User[];
|
||||||
|
editorUsers: User[];
|
||||||
|
authorUsers: User[];
|
||||||
|
contributorUsers: User[];
|
||||||
|
};
|
||||||
|
|
||||||
|
function getUsersByRole(users: User[], role: string): User[] {
|
||||||
|
return users.filter((user) => {
|
||||||
|
return user.roles.find((userRole) => {
|
||||||
|
return userRole.name === role;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const useStaffUsers = (): UsersHook => {
|
||||||
|
const {users} = useContext(UsersContext);
|
||||||
|
const ownerUser = getUsersByRole(users, 'Owner')[0] || null;
|
||||||
|
const adminUsers = getUsersByRole(users, 'Administrator');
|
||||||
|
const editorUsers = getUsersByRole(users, 'Editor');
|
||||||
|
const authorUsers = getUsersByRole(users, 'Author');
|
||||||
|
const contributorUsers = getUsersByRole(users, 'Contributor');
|
||||||
|
return {
|
||||||
|
users,
|
||||||
|
ownerUser,
|
||||||
|
adminUsers,
|
||||||
|
editorUsers,
|
||||||
|
authorUsers,
|
||||||
|
contributorUsers
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useStaffUsers;
|
|
@ -4,3 +4,43 @@ export type Setting = {
|
||||||
key: string;
|
key: string;
|
||||||
value: SettingValue;
|
value: SettingValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type User = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
email: string;
|
||||||
|
profile_image: string;
|
||||||
|
cover_image: string|null;
|
||||||
|
bio: string;
|
||||||
|
website: string;
|
||||||
|
location: string;
|
||||||
|
facebook: string;
|
||||||
|
twitter: string;
|
||||||
|
accessibility: string|null;
|
||||||
|
status: string;
|
||||||
|
meta_title: string|null;
|
||||||
|
meta_description: string|null;
|
||||||
|
tour: string|null;
|
||||||
|
last_seen: string|null;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
comment_notifications: boolean;
|
||||||
|
free_member_signup_notification: boolean;
|
||||||
|
paid_subscription_canceled_notification: boolean;
|
||||||
|
paid_subscription_started_notification: boolean;
|
||||||
|
mention_notifications: boolean;
|
||||||
|
milestone_notifications: boolean;
|
||||||
|
roles: UserRole[];
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UserRoleType = 'Owner' | 'Administrator' | 'Editor' | 'Author' | 'Contributor';
|
||||||
|
|
||||||
|
export type UserRole = {
|
||||||
|
id: string;
|
||||||
|
name: UserRoleType;
|
||||||
|
description: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
};
|
||||||
|
|
|
@ -1,20 +1,40 @@
|
||||||
import {Setting} from '../types/api';
|
import {Setting, User} from '../types/api';
|
||||||
import {getGhostPaths} from './helpers';
|
import {getGhostPaths} from './helpers';
|
||||||
|
|
||||||
interface IQueryParams {
|
type ApiQueryParams = {
|
||||||
|
limit: string;
|
||||||
|
include: string;
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type SettingApiQueryParams = {
|
||||||
group: string;
|
group: string;
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define the SettingsResponse type
|
type Meta = {
|
||||||
export interface ISettingsResponse {
|
pagination: {
|
||||||
meta: any;
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
pages: number;
|
||||||
|
total: number;
|
||||||
|
next: number;
|
||||||
|
prev: number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SettingsResponseType = {
|
||||||
|
meta: Meta;
|
||||||
settings: Setting[];
|
settings: Setting[];
|
||||||
}
|
}
|
||||||
|
export type UsersResponseType = {
|
||||||
|
meta: Meta;
|
||||||
|
users: User[];
|
||||||
|
}
|
||||||
|
|
||||||
export async function getSettings() {
|
export async function getSettings() {
|
||||||
const {apiRoot} = getGhostPaths();
|
const {apiRoot} = getGhostPaths();
|
||||||
const queryParams: IQueryParams = {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics,announcement,pintura'};
|
const queryParams: SettingApiQueryParams = {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics,announcement,pintura'};
|
||||||
const queryString = Object.keys(queryParams).map((key) => {
|
const queryString = Object.keys(queryParams).map((key) => {
|
||||||
return `${key}=${queryParams[key] || ''}`;
|
return `${key}=${queryParams[key] || ''}`;
|
||||||
}).join('&');
|
}).join('&');
|
||||||
|
@ -28,7 +48,7 @@ export async function getSettings() {
|
||||||
mode: 'cors',
|
mode: 'cors',
|
||||||
credentials: 'include'
|
credentials: 'include'
|
||||||
});
|
});
|
||||||
const data: ISettingsResponse = await response.json();
|
const data: SettingsResponseType = await response.json();
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,6 +71,26 @@ export async function updateSettings(newSettings: Setting[]) {
|
||||||
credentials: 'include'
|
credentials: 'include'
|
||||||
});
|
});
|
||||||
|
|
||||||
const data: ISettingsResponse = await response.json();
|
const data: SettingsResponseType = await response.json();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUsers() {
|
||||||
|
const {apiRoot} = getGhostPaths();
|
||||||
|
const queryParams: ApiQueryParams = {limit: 'all', include: 'roles'};
|
||||||
|
const queryString = Object.keys(queryParams).map((key) => {
|
||||||
|
return `${key}=${queryParams[key] || ''}`;
|
||||||
|
}).join('&');
|
||||||
|
|
||||||
|
const response = await fetch(`${apiRoot}/users/?${queryString}`, {
|
||||||
|
headers: {
|
||||||
|
'app-pragma': 'no-cache',
|
||||||
|
'x-ghost-version': '5.47'
|
||||||
|
},
|
||||||
|
method: 'GET',
|
||||||
|
mode: 'cors',
|
||||||
|
credentials: 'include'
|
||||||
|
});
|
||||||
|
const data: UsersResponseType = await response.json();
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue