share-template.tsx•3.45 kB
import { useMutation, useQuery } from '@tanstack/react-query';
import { t } from 'i18next';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { flowsApi } from '@/features/flows/lib/flows-api';
import { authenticationSession } from '@/lib/authentication-session';
import { FlowOperationType, FlowTemplate } from '@activepieces/shared';
import { LoadingSpinner } from '../../../components/ui/spinner';
import { PieceIconList } from '../../pieces/components/piece-icon-list';
import { templatesApi } from '../lib/templates-api';
const TemplateViewer = ({ template }: { template: FlowTemplate }) => {
const navigate = useNavigate();
const { mutate, isPending } = useMutation({
mutationFn: async () => {
const flow = await flowsApi.create({
projectId: authenticationSession.getProjectId()!,
displayName: template.name,
});
const updatedFlow = await flowsApi.update(flow.id, {
type: FlowOperationType.IMPORT_FLOW,
request: {
displayName: template.template.displayName,
trigger: template.template.trigger,
schemaVersion: template.template.schemaVersion,
},
});
return updatedFlow;
},
onSuccess: (data) => {
navigate(`/flows/${data.id}`);
},
});
return (
<Card className="min-w-[500px]">
<>
<CardHeader>
<span className="font-semibold">{template.name}</span>
<Separator />
</CardHeader>
<CardContent>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 items-center justify-between mb-4">
<div className="flex flex-row w-full justify-between items-center">
<span>{t('Steps in this flow')}</span>
<PieceIconList
trigger={template.template.trigger}
maxNumberOfIconsToShow={5}
></PieceIconList>
</div>
{template.description && (
<>
<Separator className="my-2" />
<div className="flex flex-col w-full justify-start items-start">
<span className="font-semibold">{t('Description')}</span>
<span>{template.description}</span>
</div>
</>
)}
</div>
<div className="ml-auto flex items-center gap-2">
<Button variant={'accent'} onClick={() => navigate('/flows')}>
{t('Cancel')}
</Button>
<Button loading={isPending} onClick={() => mutate()}>
{t('Import')}
</Button>
</div>
</div>
</CardContent>
</>
</Card>
);
};
const ShareTemplate: React.FC<{ templateId: string }> = ({ templateId }) => {
const { data } = useQuery({
queryKey: ['template', templateId],
queryFn: () => templatesApi.getTemplate(templateId),
staleTime: 0,
});
if (!data) {
return (
<div className="w-full h-full flex items-center justify-center">
<LoadingSpinner isLarge={true}></LoadingSpinner>
</div>
);
}
return <TemplateViewer template={data}></TemplateViewer>;
};
export { ShareTemplate };