Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Wired staff users list in admin-x settings

Browse source 
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:
Rishabh 2023-05-25 15:59:27 +05:30
parent c01af74265
commit 6f2424976c
11 changed files with 270 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin-x-settings/src/App.tsx
View file

@ -1,9 +1,9 @@
import Button from './admin-x-ds/global/Button';
import DataProvider from './components/providers/DataProvider';
import Heading from './admin-x-ds/global/Heading';
import NiceModal from '@ebay/nice-modal-react';
import Settings from './components/Settings';
import Sidebar from './components/Sidebar';
import {SettingsProvider} from './components/SettingsProvider';
function App() {
return (
@ -26,9 +26,9 @@ function App() {
</div>
</div>
<div className="flex-auto pt-[3vmin] md:ml-[280px] md:pt-[84px]">
<SettingsProvider>
<DataProvider>
<Settings />
</SettingsProvider>
</DataProvider>
</div>
</div>
</NiceModal.Provider>

2
ghost/admin-x-settings/src/components/Settings.tsx
View file

@ -3,7 +3,7 @@ import React, {useContext} from 'react';
import EmailSettings from './settings/email/EmailSettings';
import GeneralSettings from './settings/general/GeneralSettings';
import MembershipSettings from './settings/membership/MembershipSettings';
import {SettingsContext} from './SettingsProvider';
import {SettingsContext} from './providers/SettingsProvider';
const Settings: React.FC = () => {
const {settings} = useContext(SettingsContext) || {};

19
ghost/admin-x-settings/src/components/providers/DataProvider.tsx Normal file
View file

@ -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;

4
ghost/admin-x-settings/src/components/SettingsProvider.tsx → ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx
View file

@ -1,6 +1,6 @@
import React, {createContext, useEffect, useState} from 'react';
import {Setting} from '../types/api';
import {getSettings, updateSettings} from '../utils/api';
import {Setting} from '../../types/api';
import {getSettings, updateSettings} from '../../utils/api';
// Define the Settings Context
interface SettingsContextProps {

42
ghost/admin-x-settings/src/components/providers/UsersProvider.tsx Normal file
View file

@ -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
ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
View file

@ -2,7 +2,7 @@ import React, {useContext, useState} from 'react';
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 {SettingsContext} from '../../SettingsProvider';
import {SettingsContext} from '../../providers/SettingsProvider';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
import {getSettingValue} from '../../../utils/helpers';

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

@ -7,14 +7,61 @@ import React from 'react';
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';
const Users: React.FC = () => {
const showInviteModal = () => {
NiceModal.show(InviteUserModal);
const Owner: React.FC<any> = ({user}) => {
if (!user) {
return null;
}
return (
<div className='flex flex-col'>
<span>{user.name} &mdash; <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 = () => {
NiceModal.show(UserDetailModal);
if (!users || !users.length) {
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 = (
@ -23,52 +70,35 @@ const Users: React.FC = () => {
}} />
);
const owner = (
<div className='flex flex-col'>
<span>Cristofer Vaccaro &mdash; <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 = [
{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 (
<SettingGroup
<SettingGroup
customButtons={buttons}
title='Users and permissions'
>
{owner}
<Owner user={ownerUser} />
<TabView tabs={tabs} />
</SettingGroup>
);

2
ghost/admin-x-settings/src/hooks/useSettingGroup.tsx
View file

@ -1,6 +1,6 @@
import React, {useEffect} from 'react';
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 {useContext, useReducer, useRef, useState} from 'react';

39
ghost/admin-x-settings/src/hooks/useStaffUsers.tsx Normal file
View 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;

40
ghost/admin-x-settings/src/types/api.ts
View file

@ -4,3 +4,43 @@ export type Setting = {
key: string;
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;
};

56
ghost/admin-x-settings/src/utils/api.ts
View file

@ -1,20 +1,40 @@
import {Setting} from '../types/api';
import {Setting, User} from '../types/api';
import {getGhostPaths} from './helpers';
interface IQueryParams {
type ApiQueryParams = {
limit: string;
include: string;
[key: string]: string;
}
type SettingApiQueryParams = {
group: string;
[key: string]: string;
}
// Define the SettingsResponse type
export interface ISettingsResponse {
meta: any;
type Meta = {
pagination: {
page: number;
limit: number;
pages: number;
total: number;
next: number;
prev: number;
}
}
export type SettingsResponseType = {
meta: Meta;
settings: Setting[];
}
export type UsersResponseType = {
meta: Meta;
users: User[];
}
export async function getSettings() {
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) => {
return `${key}=${queryParams[key] || ''}`;
}).join('&');
@ -28,7 +48,7 @@ export async function getSettings() {
mode: 'cors',
credentials: 'include'
});
const data: ISettingsResponse = await response.json();
const data: SettingsResponseType = await response.json();
return data;
}
@ -51,6 +71,26 @@ export async function updateSettings(newSettings: Setting[]) {
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;
}