mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Wired up Zapier integration in AdminX (#17737)
refs https://github.com/TryGhost/Product/issues/3729
This commit is contained in:
Jono M
GitHub
parent
738ce491f4
commit
f1266c6b9f
15 changed files with 383 additions and 43 deletions
|
|
@ -9,10 +9,12 @@ import {GlobalDirtyStateProvider} from './hooks/useGlobalDirtyState';
|
|||
import {OfficialTheme, ServicesProvider} from './components/providers/ServiceProvider';
|
||||
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
|
||||
import {Toaster} from 'react-hot-toast';
|
||||
import {ZapierTemplate} from './components/settings/advanced/integrations/ZapierModal';
|
||||
|
||||
interface AppProps {
|
||||
ghostVersion: string;
|
||||
officialThemes: OfficialTheme[];
|
||||
zapierTemplates: ZapierTemplate[];
|
||||
externalNavigate: (link: ExternalLink) => void;
|
||||
}
|
||||
|
||||
|
|
@ -26,10 +28,10 @@ const queryClient = new QueryClient({
|
|||
}
|
||||
});
|
||||
|
||||
function App({ghostVersion, officialThemes, externalNavigate}: AppProps) {
|
||||
function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate}: AppProps) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes}>
|
||||
<ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes} zapierTemplates={zapierTemplates}>
|
||||
<GlobalDataProvider>
|
||||
<RoutingProvider externalNavigate={externalNavigate}>
|
||||
<GlobalDirtyStateProvider>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
|
|||
return (
|
||||
<Modal
|
||||
backDropClick={false}
|
||||
buttonsDisabled={taskState === 'running'}
|
||||
cancelLabel={cancelLabel}
|
||||
footer={customFooter}
|
||||
okColor={okColor}
|
||||
|
|
|
|||
35
apps/admin-x-settings/src/api/apiKeys.ts
Normal file
35
apps/admin-x-settings/src/api/apiKeys.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import {IntegrationsResponseType, integrationsDataType} from './integrations';
|
||||
import {createMutation} from '../utils/apiRequests';
|
||||
|
||||
// Types
|
||||
|
||||
export type APIKey = {
|
||||
id: string;
|
||||
type: 'admin' | 'content';
|
||||
secret: string;
|
||||
role_id: string;
|
||||
integration_id: string;
|
||||
user_id: string | null;
|
||||
last_seen_at: string | null;
|
||||
last_seen_version: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// Requests
|
||||
|
||||
export const useRefreshAPIKey = createMutation<IntegrationsResponseType, {integrationId: string, apiKeyId: string}>({
|
||||
method: 'POST',
|
||||
path: ({integrationId, apiKeyId}) => `/integrations/${integrationId}/api_key/${apiKeyId}/refresh/`,
|
||||
body: ({integrationId}) => ({integrations: [{id: integrationId}]}),
|
||||
updateQueries: {
|
||||
dataType: integrationsDataType,
|
||||
update: (newData, currentData) => ({
|
||||
...(currentData as IntegrationsResponseType),
|
||||
integrations: (currentData as IntegrationsResponseType).integrations.map((integration) => {
|
||||
const newIntegration = newData.integrations.find(({id}) => id === integration.id);
|
||||
return newIntegration || integration;
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
|
|
@ -13,9 +13,16 @@ export type Config = {
|
|||
};
|
||||
labs: Record<string, boolean>;
|
||||
stripeDirect: boolean;
|
||||
hostSettings?: {
|
||||
limits?: {
|
||||
customIntegrations?: {
|
||||
disabled: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Config is relatively fluid, so we only type used properties above and still support arbitrary property access when needed
|
||||
[key: string]: JSONValue;
|
||||
[key: string]: JSONValue | undefined;
|
||||
};
|
||||
|
||||
export interface ConfigResponseType {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,8 @@
|
|||
import {APIKey} from './apiKeys';
|
||||
import {Meta, createMutation, createQuery} from '../utils/apiRequests';
|
||||
|
||||
// Types
|
||||
|
||||
export type IntegrationApiKey = {
|
||||
id: string;
|
||||
type: string;
|
||||
secret: string;
|
||||
role_id: string;
|
||||
integration_id: string;
|
||||
user_id: string | null;
|
||||
last_seen_at: string | null;
|
||||
last_seen_version: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type IntegrationWebhook = {
|
||||
id: string;
|
||||
event: string;
|
||||
|
|
@ -39,7 +27,7 @@ export type Integration = {
|
|||
description: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
api_keys: IntegrationApiKey[];
|
||||
api_keys: APIKey[];
|
||||
webhooks: IntegrationWebhook[];
|
||||
}
|
||||
|
||||
|
|
|
|||
4
apps/admin-x-settings/src/assets/images/zapier-logo.svg
Normal file
4
apps/admin-x-settings/src/assets/images/zapier-logo.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="42" height="37" viewBox="0 0 80 37" xmlns="http://www.w3.org/2000/svg" class="css-1oudp6l-ZapierLogo--red500">
|
||||
<title>zapier-logo</title>
|
||||
<path fill="#ff4a00" fill-rule="evenodd" clip-rule="evenodd" d="M53.934 4.185h-2.94l2.079-2.073A5.053 5.053 0 0 0 51.886.928l-2.078 2.073V.07a5.129 5.129 0 0 0-.836-.07h-.006c-.285 0-.564.024-.836.07V3L46.052.929c-.23.163-.444.344-.642.543h-.002c-.198.198-.38.412-.543.641l2.078 2.073h-2.938s-.07.55-.07.835v.003c0 .284.024.564.07.836h2.938l-2.078 2.07a5.05 5.05 0 0 0 1.187 1.183l2.078-2.072v2.93c.272.046.55.07.835.07h.007c.285 0 .565-.024.836-.07v-2.93l2.078 2.072a5.098 5.098 0 0 0 1.186-1.184L50.995 5.86h2.94c.045-.272.07-.55.07-.834v-.007a5.08 5.08 0 0 0-.07-.833ZM58.85 25.53c-.84-.786-1.279-2.026-1.32-3.72h10.585c.02-.222.04-.488.06-.802.02-.312.031-.61.031-.892a9.263 9.263 0 0 0-.425-2.859c-.283-.877-.698-1.633-1.243-2.268a5.736 5.736 0 0 0-2.032-1.497c-.809-.364-1.75-.545-2.82-.545-1.254 0-2.341.217-3.261.65a6.532 6.532 0 0 0-2.29 1.755c-.606.736-1.056 1.603-1.349 2.6-.293 1-.44 2.073-.44 3.222 0 1.17.152 2.244.455 3.222a6.59 6.59 0 0 0 1.44 2.541c.657.716 1.492 1.27 2.503 1.664 1.01.393 2.223.59 3.64.59.97 0 1.854-.071 2.653-.212a10.191 10.191 0 0 0 2.198-.635 7.18 7.18 0 0 0-.181-1.286 4.54 4.54 0 0 0-.395-1.104 11.178 11.178 0 0 1-4.094.757c-1.638 0-2.876-.394-3.715-1.18ZM30.51 13.31a6.378 6.378 0 0 1 1.273-.121 7.115 7.115 0 0 1 1.274.12c.02.042.045.167.075.38.03.21.06.438.091.68.03.242.06.474.091.696.03.222.045.363.045.423.203-.323.445-.635.728-.938a4.85 4.85 0 0 1 1.016-.816 5.298 5.298 0 0 1 1.335-.575 6.016 6.016 0 0 1 1.653-.212c.91 0 1.753.152 2.532.454a5.068 5.068 0 0 1 2.001 1.406c.556.636.99 1.442 1.305 2.42.313.979.47 2.133.47 3.464 0 2.662-.723 4.744-2.169 6.246-1.446 1.503-3.492 2.254-6.141 2.254-.445 0-.9-.03-1.365-.09a8.095 8.095 0 0 1-1.213-.243v7.109a10.389 10.389 0 0 1-1.517.12c-.222 0-.47-.01-.742-.03-.273-.02-.52-.05-.743-.09V13.31Zm-6.218 5.294c0-1.19-.304-2.017-.91-2.481-.607-.463-1.486-.695-2.639-.695-.708 0-1.37.055-1.986.166-.617.111-1.219.257-1.804.438-.385-.665-.576-1.461-.576-2.39a14.015 14.015 0 0 1 2.274-.514 16.555 16.555 0 0 1 2.396-.181c2.021 0 3.558.46 4.61 1.376 1.05.918 1.576 2.385 1.576 4.401v9.71a47.6 47.6 0 0 1-2.577.5 18.55 18.55 0 0 1-3.094.256c-.99 0-1.885-.09-2.684-.272-.799-.181-1.476-.473-2.032-.877a4.061 4.061 0 0 1-1.289-1.543c-.303-.625-.454-1.38-.454-2.269 0-.866.176-1.628.53-2.283a4.77 4.77 0 0 1 1.44-1.634 6.427 6.427 0 0 1 2.093-.967 9.538 9.538 0 0 1 2.487-.318c.647 0 1.178.015 1.592.045.415.031.763.066 1.047.106v-.574Zm-23.625 9.8L8.855 15.7H1.637a7.356 7.356 0 0 1-.09-1.21c0-.424.03-.818.09-1.18h11.677l.15.393-8.248 12.735h7.734c.06.404.09.817.09 1.24 0 .404-.03.787-.09 1.15H.819l-.152-.424Zm22.472-6.987c.466.04.85.08 1.153.12v4.931a8.642 8.642 0 0 1-1.32.227 14.05 14.05 0 0 1-1.44.076c-.364 0-.748-.02-1.152-.06a2.9 2.9 0 0 1-1.107-.333 2.293 2.293 0 0 1-.834-.787c-.223-.342-.334-.817-.334-1.422 0-.947.328-1.653.986-2.117.656-.464 1.612-.696 2.866-.696.323 0 .717.02 1.182.061Zm11.555 5.172a5.87 5.87 0 0 1-1.183-.302v-6.292c0-.767.111-1.426.334-1.981.223-.555.515-1.014.88-1.377a3.58 3.58 0 0 1 1.243-.816c.464-.182.95-.273 1.455-.273 1.355 0 2.33.475 2.927 1.422.596.948.895 2.229.895 3.842 0 1.008-.127 1.88-.38 2.616-.253.736-.596 1.346-1.03 1.83a3.965 3.965 0 0 1-1.562 1.074 5.558 5.558 0 0 1-2.002.348c-.647 0-1.173-.03-1.577-.09Zm13.435-10.92h-1.972a3.793 3.793 0 0 1-.09-.56 6.432 6.432 0 0 1 0-1.24c.02-.211.05-.398.09-.56h4.914v15.52c-.223.039-.47.069-.743.09-.273.019-.521.03-.743.03-.203 0-.44-.011-.713-.03a7.367 7.367 0 0 1-.743-.09v-13.16Zm17.105 3.903a5.71 5.71 0 0 0-.227-1.62 4.113 4.113 0 0 0-.668-1.345 3.246 3.246 0 0 0-1.122-.922c-.455-.232-.996-.349-1.623-.349-1.233 0-2.178.374-2.836 1.12-.656.746-1.056 1.785-1.197 3.116h7.673Zm6.916-6.353a8.11 8.11 0 0 0-.637.09v15.519a10.308 10.308 0 0 0 1.517.12c.221 0 .47-.01.742-.03.273-.02.52-.05.743-.09v-7.714c0-1.048.117-1.905.35-2.57.231-.666.545-1.19.939-1.574a3.26 3.26 0 0 1 1.335-.801 5.33 5.33 0 0 1 1.562-.227h.409c.172 0 .338.02.5.06.04-.242.076-.494.107-.756a6.694 6.694 0 0 0 .014-1.392 4.99 4.99 0 0 0-.09-.575 4.641 4.641 0 0 0-.44-.045 8.203 8.203 0 0 0-.5-.015c-1.092 0-1.987.253-2.684.756a6.273 6.273 0 0 0-1.683 1.785c0-.343-.031-.76-.091-1.255a17.208 17.208 0 0 0-.182-1.195 5.019 5.019 0 0 0-.607-.09 7.54 7.54 0 0 0-.667-.031c-.223 0-.435.01-.637.03ZM50.034 6.084c.125-.33.194-.687.194-1.06v-.005c0-.373-.07-.73-.194-1.06a3.013 3.013 0 0 0-1.063-.193h-.004a3.03 3.03 0 0 0-1.064.193 3.03 3.03 0 0 0-.193 1.06v.005c0 .373.07.73.194 1.06.33.124.689.193 1.063.193h.005c.373 0 .732-.069 1.062-.193Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import React, {createContext, useContext} from 'react';
|
||||
import useSearchService, {SearchService} from '../../utils/search';
|
||||
import {ZapierTemplate} from '../settings/advanced/integrations/ZapierModal';
|
||||
|
||||
export type OfficialTheme = {
|
||||
name: string;
|
||||
|
|
@ -13,28 +14,32 @@ export type OfficialTheme = {
|
|||
interface ServicesContextProps {
|
||||
ghostVersion: string
|
||||
officialThemes: OfficialTheme[];
|
||||
zapierTemplates: ZapierTemplate[];
|
||||
search: SearchService
|
||||
}
|
||||
|
||||
interface ServicesProviderProps {
|
||||
children: React.ReactNode;
|
||||
ghostVersion: string;
|
||||
zapierTemplates: ZapierTemplate[];
|
||||
officialThemes: OfficialTheme[];
|
||||
}
|
||||
|
||||
const ServicesContext = createContext<ServicesContextProps>({
|
||||
ghostVersion: '',
|
||||
officialThemes: [],
|
||||
zapierTemplates: [],
|
||||
search: {filter: '', setFilter: () => {}, checkVisible: () => true}
|
||||
});
|
||||
|
||||
const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion, officialThemes}) => {
|
||||
const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion, zapierTemplates, officialThemes}) => {
|
||||
const search = useSearchService();
|
||||
|
||||
return (
|
||||
<ServicesContext.Provider value={{
|
||||
ghostVersion,
|
||||
officialThemes,
|
||||
zapierTemplates,
|
||||
search
|
||||
}}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -15,29 +15,51 @@ import {ReactComponent as SlackIcon} from '../../../assets/icons/slack.svg';
|
|||
import {ReactComponent as UnsplashIcon} from '../../../assets/icons/unsplash.svg';
|
||||
import {ReactComponent as ZapierIcon} from '../../../assets/icons/zapier.svg';
|
||||
import {useCreateWebhook, useDeleteWebhook, useEditWebhook} from '../../../api/webhooks';
|
||||
import {useGlobalData} from '../../providers/GlobalDataProvider';
|
||||
|
||||
const IntegrationItem: React.FC<{icon?: React.ReactNode, title: string, detail:string, action:() => void}> = ({
|
||||
const IntegrationItem: React.FC<{icon?: React.ReactNode, title: string, detail: string, action: () => void; disabled?: boolean; testId?: string}> = ({
|
||||
icon,
|
||||
title,
|
||||
detail,
|
||||
action
|
||||
action,
|
||||
disabled,
|
||||
testId
|
||||
}) => {
|
||||
const {updateRoute} = useRouting();
|
||||
|
||||
const handleClick = () => {
|
||||
if (disabled) {
|
||||
updateRoute({route: 'pro'});
|
||||
} else {
|
||||
action();
|
||||
}
|
||||
};
|
||||
|
||||
return <ListItem
|
||||
action={<Button color='green' label='Configure' link onClick={action} />}
|
||||
action={disabled ?
|
||||
<Button icon='lock-locked' label='Upgrade' link onClick={handleClick} /> :
|
||||
<Button color='green' label='Configure' link onClick={handleClick} />
|
||||
}
|
||||
avatar={icon}
|
||||
className={disabled ? 'opacity-50 saturate-0' : ''}
|
||||
detail={detail}
|
||||
hideActions={!disabled}
|
||||
testId={testId}
|
||||
title={title}
|
||||
hideActions
|
||||
onClick={action}
|
||||
onClick={handleClick}
|
||||
/>;
|
||||
};
|
||||
|
||||
const BuiltInIntegrations: React.FC = () => {
|
||||
const {config} = useGlobalData();
|
||||
const {updateRoute} = useRouting();
|
||||
|
||||
const openModal = (modal: string) => {
|
||||
updateRoute(modal);
|
||||
};
|
||||
|
||||
const zapierDisabled = config.hostSettings?.limits?.customIntegrations?.disabled;
|
||||
|
||||
return (
|
||||
<List titleSeparator={false}>
|
||||
<IntegrationItem
|
||||
|
|
@ -45,7 +67,9 @@ const BuiltInIntegrations: React.FC = () => {
|
|||
openModal('integrations/zapier');
|
||||
}}
|
||||
detail='Automation for your apps'
|
||||
disabled={zapierDisabled}
|
||||
icon={<ZapierIcon className='h-8 w-8' />}
|
||||
testId='zapier-integration'
|
||||
title='Zapier' />
|
||||
|
||||
<IntegrationItem
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import Button from '../../../../admin-x-ds/global/Button';
|
||||
import React, {ReactNode, useState} from 'react';
|
||||
|
||||
export interface APIKeyFieldProps {
|
||||
label: string;
|
||||
text?: string;
|
||||
hint?: ReactNode;
|
||||
onRegenerate?: () => void;
|
||||
}
|
||||
|
||||
const APIKeyField: React.FC<APIKeyFieldProps> = ({label, text = '', hint, onRegenerate}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copyText = () => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return <>
|
||||
<div className='p-0 py-1 pr-4 text-grey-600'>{label}</div>
|
||||
<div className='group relative overflow-hidden rounded p-1 hover:bg-grey-100'>
|
||||
{text}
|
||||
{hint}
|
||||
<div className='invisible absolute right-0 top-[50%] flex translate-y-[-50%] gap-1 group-hover:visible'>
|
||||
{onRegenerate && <Button color='grey' label='Regenerate' size='sm' onClick={onRegenerate} />}
|
||||
<Button color='black' label={copied ? 'Copied' : 'Copy'} size='sm' onClick={copyText} />
|
||||
</div>
|
||||
</div>
|
||||
</>;
|
||||
};
|
||||
|
||||
const APIKeys: React.FC<{keys: APIKeyFieldProps[]}> = ({keys}) => {
|
||||
return (
|
||||
<div className='grid grid-cols-[max-content_1fr]'>
|
||||
{keys.map(key => <APIKeyField key={key.label} {...key} />)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default APIKeys;
|
||||
|
|
@ -16,7 +16,7 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
|
|||
return (
|
||||
<div className='flex w-full gap-4'>
|
||||
<div className='h-14 w-14'>{icon}</div>
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex min-w-0 flex-1 flex-col'>
|
||||
<h3>{title}</h3>
|
||||
<div className='text-grey-600'>{detail}</div>
|
||||
{extra && (
|
||||
|
|
@ -27,4 +27,4 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default IntegrationHeader;
|
||||
export default IntegrationHeader;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,75 @@
|
|||
import APIKeys from './APIKeys';
|
||||
import Button from '../../../../admin-x-ds/global/Button';
|
||||
import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
|
||||
import IntegrationHeader from './IntegrationHeader';
|
||||
import List from '../../../../admin-x-ds/global/List';
|
||||
import ListItem from '../../../../admin-x-ds/global/ListItem';
|
||||
import Modal from '../../../../admin-x-ds/global/modal/Modal';
|
||||
import NiceModal from '@ebay/nice-modal-react';
|
||||
import useRouting from '../../../../hooks/useRouting';
|
||||
import {ReactComponent as ArrowRightIcon} from '../../../../admin-x-ds/assets/icons/arrow-right.svg';
|
||||
import {ReactComponent as Icon} from '../../../../assets/icons/zapier.svg';
|
||||
import {ReactComponent as Logo} from '../../../../assets/images/zapier-logo.svg';
|
||||
import {getGhostPaths} from '../../../../utils/helpers';
|
||||
import {useBrowseIntegrations} from '../../../../api/integrations';
|
||||
import {useEffect, useState} from 'react';
|
||||
import {useGlobalData} from '../../../providers/GlobalDataProvider';
|
||||
import {useRefreshAPIKey} from '../../../../api/apiKeys';
|
||||
import {useServices} from '../../../providers/ServiceProvider';
|
||||
|
||||
const APIKeys: React.FC = () => {
|
||||
return (
|
||||
<table className='m-0'>
|
||||
<tr>
|
||||
<td className='p-0 pb-1.5 pr-4 text-grey-600'>Admin API key</td>
|
||||
<td className='p-0 pb-1.5'>abcdef123456</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='p-0 pb-1.5 pr-4 text-grey-600'>API URL</td>
|
||||
<td className='p-0 pb-1.5'>https://example.com</td>
|
||||
</tr>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
export interface ZapierTemplate {
|
||||
ghostImage: string;
|
||||
appImage: string;
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const ZapierModal = NiceModal.create(() => {
|
||||
const modal = NiceModal.useModal();
|
||||
const {updateRoute} = useRouting();
|
||||
const {zapierTemplates} = useServices();
|
||||
const {data: {integrations} = {integrations: []}} = useBrowseIntegrations();
|
||||
const {config} = useGlobalData();
|
||||
const {adminRoot} = getGhostPaths();
|
||||
|
||||
const {mutateAsync: refreshAPIKey} = useRefreshAPIKey();
|
||||
const [regenerated, setRegenerated] = useState(false);
|
||||
|
||||
const zapierDisabled = config.hostSettings?.limits?.customIntegrations?.disabled;
|
||||
const integration = integrations.find(({slug}) => slug === 'zapier');
|
||||
const adminApiKey = integration?.api_keys.find(key => key.type === 'admin');
|
||||
|
||||
useEffect(() => {
|
||||
if (zapierDisabled) {
|
||||
updateRoute('integrations');
|
||||
}
|
||||
}, [zapierDisabled, updateRoute]);
|
||||
|
||||
const handleRegenerate = () => {
|
||||
if (!integration || !adminApiKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
setRegenerated(false);
|
||||
|
||||
NiceModal.show(ConfirmationModal, {
|
||||
title: 'Regenerate Admin API Key',
|
||||
prompt: 'You will need to locate the Ghost App within your Zapier account and click on "Reconnect" to enter the new Admin API Key.',
|
||||
okLabel: 'Regenerate Admin API Key',
|
||||
onOk: async (confirmModal) => {
|
||||
await refreshAPIKey({integrationId: integration.id, apiKeyId: adminApiKey.id});
|
||||
setRegenerated(true);
|
||||
confirmModal?.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
cancelLabel=''
|
||||
okColor='black'
|
||||
okLabel='Close'
|
||||
testId='zapier-modal'
|
||||
title=''
|
||||
onOk={() => {
|
||||
modal.remove();
|
||||
|
|
@ -33,13 +77,47 @@ const ZapierModal = NiceModal.create(() => {
|
|||
>
|
||||
<IntegrationHeader
|
||||
detail='Automation for your favorite apps'
|
||||
extra={<APIKeys />}
|
||||
extra={<APIKeys keys={[
|
||||
{
|
||||
label: 'Admin API key',
|
||||
text: adminApiKey?.secret,
|
||||
hint: regenerated ? <div className='text-green'>Admin API Key was successfully regenerated</div> : undefined,
|
||||
onRegenerate: handleRegenerate
|
||||
},
|
||||
{label: 'API URL', text: window.location.origin + getGhostPaths().subdir}
|
||||
]} />}
|
||||
icon={<Icon className='h-14 w-14' />}
|
||||
title='Zapier'
|
||||
/>
|
||||
TBD
|
||||
|
||||
<List className='mt-6'>
|
||||
{zapierTemplates.map(template => (
|
||||
<ListItem
|
||||
action={<Button color='green' href={template.url} label='Use this Zap' tag='a' target='_blank' link />}
|
||||
avatar={<>
|
||||
<img className='h-10 w-10 object-contain' role='presentation' src={`${adminRoot}${template.ghostImage}`} />
|
||||
<ArrowRightIcon className='h-4 w-4' />
|
||||
<img className='h-10 w-10 object-contain' role='presentation' src={`${adminRoot}${template.appImage}`} />
|
||||
</>}
|
||||
bgOnHover={false}
|
||||
className='flex items-center gap-3 py-2'
|
||||
title={template.title}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
|
||||
<div className='mt-6 flex'>
|
||||
<Button
|
||||
href='https://zapier.com/apps/ghost/integrations?utm_medium=partner_api&utm_source=widget&utm_campaign=Widget'
|
||||
label={<>View more Ghost integrations powered by <Logo className='relative top-[-1px] ml-1 h-6' /></>}
|
||||
rel='noopener noreferrer'
|
||||
tag='a'
|
||||
target='_blank'
|
||||
link
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export default ZapierModal;
|
||||
export default ZapierModal;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
|||
ref: 'TryGhost/Edition',
|
||||
image: 'assets/img/themes/Edition.png'
|
||||
}]}
|
||||
zapierTemplates={[]}
|
||||
/>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export interface IGhostPaths {
|
||||
subdir: string;
|
||||
adminRoot: string;
|
||||
assetRoot: string;
|
||||
apiRoot: string;
|
||||
|
|
@ -10,7 +11,7 @@ export function getGhostPaths(): IGhostPaths {
|
|||
let adminRoot = `${subdir}/ghost/`;
|
||||
let assetRoot = `${subdir}/ghost/assets/`;
|
||||
let apiRoot = `${subdir}/ghost/api/admin`;
|
||||
return {adminRoot, assetRoot, apiRoot};
|
||||
return {subdir, adminRoot, assetRoot, apiRoot};
|
||||
}
|
||||
|
||||
export function getLocalTime(timeZone: string) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
import {Integration, IntegrationsResponseType} from '../../../../src/api/integrations';
|
||||
import {expect, test} from '@playwright/test';
|
||||
import {globalDataRequests, mockApi, responseFixtures} from '../../../utils/e2e';
|
||||
|
||||
test.describe('Zapier integration settings', async () => {
|
||||
test('Showing and regenerating API keys', async ({page}) => {
|
||||
const zapierIntegration = {
|
||||
id: 'zapier-id',
|
||||
type: 'builtin',
|
||||
slug: 'zapier',
|
||||
name: 'Zapier',
|
||||
icon_image: null,
|
||||
description: 'Built-in Zapier integration',
|
||||
created_at: '2023-01-01T00:00:00.000Z',
|
||||
updated_at: '2023-01-01T00:00:00.000Z',
|
||||
api_keys: [{
|
||||
id: 'zapier-api-key-id',
|
||||
type: 'admin',
|
||||
secret: 'zapier-api-secret',
|
||||
role_id: 'role-id',
|
||||
integration_id: 'integration-id',
|
||||
user_id: 'user-id',
|
||||
last_seen_at: null,
|
||||
last_seen_version: null,
|
||||
created_at: '2023-01-01T00:00:00.000Z',
|
||||
updated_at: '2023-01-01T00:00:00.000Z'
|
||||
}],
|
||||
webhooks: []
|
||||
} satisfies Integration;
|
||||
|
||||
await mockApi({
|
||||
page,
|
||||
requests: {
|
||||
...globalDataRequests,
|
||||
browseIntegrations: {
|
||||
method: 'GET',
|
||||
path: '/integrations/?include=api_keys%2Cwebhooks',
|
||||
response: ({
|
||||
integrations: [zapierIntegration]
|
||||
} satisfies IntegrationsResponseType)
|
||||
},
|
||||
refreshAPIKey: {
|
||||
method: 'POST',
|
||||
path: /\/api_key\/.+\/refresh/,
|
||||
response: ({
|
||||
integrations: [{
|
||||
...zapierIntegration,
|
||||
api_keys: [{
|
||||
...zapierIntegration.api_keys[0],
|
||||
secret: 'new-api-key'
|
||||
}]
|
||||
}]
|
||||
} satisfies IntegrationsResponseType)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
|
||||
const integrationsSection = page.getByTestId('integrations');
|
||||
|
||||
await integrationsSection.getByTestId('zapier-integration').hover();
|
||||
await integrationsSection.getByTestId('zapier-integration').getByRole('button', {name: 'Configure'}).click();
|
||||
|
||||
const zapierModal = page.getByTestId('zapier-modal');
|
||||
|
||||
await expect(zapierModal).toHaveText(/zapier-api-secret/);
|
||||
await zapierModal.getByText('zapier-api-secret').hover();
|
||||
await zapierModal.getByRole('button', {name: 'Copy'}).click();
|
||||
|
||||
// Can't consistently check the clipboard contents, sadly https://github.com/microsoft/playwright/issues/13037
|
||||
await expect(zapierModal.getByRole('button', {name: 'Copied'})).toHaveCount(1);
|
||||
|
||||
await zapierModal.getByRole('button', {name: 'Regenerate'}).click();
|
||||
await page.getByTestId('confirmation-modal').getByRole('button', {name: 'Regenerate Admin API Key'}).click();
|
||||
|
||||
await expect(zapierModal).toHaveText(/Admin API Key was successfully regenerated/);
|
||||
await expect(zapierModal).toHaveText(/new-api-key/);
|
||||
});
|
||||
|
||||
test('Disabled by configured limitations', async ({page}) => {
|
||||
await mockApi({page, requests: {...globalDataRequests, browseConfig: {
|
||||
...globalDataRequests.browseConfig,
|
||||
response: {
|
||||
config: {
|
||||
...responseFixtures.config,
|
||||
hostSettings: {
|
||||
limits: {
|
||||
customIntegrations: {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}}});
|
||||
|
||||
await page.goto('/');
|
||||
|
||||
const integrationsSection = page.getByTestId('integrations');
|
||||
|
||||
await integrationsSection.getByTestId('zapier-integration').hover();
|
||||
await expect(integrationsSection.getByTestId('zapier-integration').getByRole('button', {name: 'Upgrade'})).toHaveCount(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -127,6 +127,53 @@ const officialThemes = [{
|
|||
image: 'assets/img/themes/Journal.png'
|
||||
}];
|
||||
|
||||
const zapierTemplates = [{
|
||||
ghostImage: 'assets/img/logos/orb-black-1.png',
|
||||
appImage: 'assets/img/twitter.svg',
|
||||
title: 'Share new posts to Twitter',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=50909'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-2.png',
|
||||
appImage: 'assets/img/slackicon.png',
|
||||
title: 'Share scheduled posts with your team in Slack',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=359499'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-3.png',
|
||||
appImage: 'assets/img/patreon.svg',
|
||||
title: 'Connect Patreon to your Ghost membership site',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=75801'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-4.png',
|
||||
appImage: 'assets/img/zero-bounce.png',
|
||||
title: 'Protect email delivery with email verification',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=359415'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-5.png',
|
||||
appImage: 'assets/img/paypal.svg',
|
||||
title: 'Add members for successful sales in PayPal',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=184423'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-3.png',
|
||||
appImage: 'assets/img/paypal.svg',
|
||||
title: 'Unsubscribe members who cancel a subscription in PayPal',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=359348'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-1.png',
|
||||
appImage: 'assets/img/google-docs.svg',
|
||||
title: 'Send new post drafts from Google Docs to Ghost',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=50924'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-4.png',
|
||||
appImage: 'assets/img/typeform.svg',
|
||||
title: 'Survey new members using Typeform',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=359407'
|
||||
}, {
|
||||
ghostImage: 'assets/img/logos/orb-black-1.png',
|
||||
appImage: 'assets/img/mailchimp.svg',
|
||||
title: 'Sync email subscribers in Ghost + Mailchimp',
|
||||
url: 'https://zapier.com/webintent/create-zap?template=359342'
|
||||
}];
|
||||
|
||||
class ErrorHandler extends React.Component {
|
||||
state = {
|
||||
hasError: false
|
||||
|
|
@ -245,6 +292,7 @@ export default class AdminXSettings extends Component {
|
|||
<AdminXApp
|
||||
ghostVersion={config.APP.version}
|
||||
officialThemes={officialThemes}
|
||||
zapierTemplates={zapierTemplates}
|
||||
externalNavigate={this.externalNavigate}
|
||||
/>
|
||||
</Suspense>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue