Merge pull request #3941 from signalco-io/next

Next

web/apps/doprocess/app/(rest)/(marketing)/page.tsx

@@ -1,4 +1,4 @@
-import { ListChecks, Play, Share } from '@signalco/ui-icons';
+import { ListTodo, Play, Share } from '@signalco/ui-icons';
 import { NavigatingButton } from '@signalco/ui/NavigatingButton';
 import { KnownPages } from '../../../src/knownPages';
 import { ImagePlaceholder } from '../../../components/images/ImagePlaceholder';
@@ -15,7 +15,7 @@ function FeaturesSection() {
                 </div>
                 <div className="grid gap-6 md:grid-cols-3 md:gap-12">
                     <div className="flex flex-col items-center space-y-4 text-center">
-                        <ListChecks className="opacity-60" />
+                        <ListTodo className="opacity-60" />
                         <h2 className="text-xl font-bold tracking-tighter sm:text-2xl md:text-3xl">Document</h2>
                         <p className="mx-auto max-w-[700px] text-zinc-500 dark:text-zinc-400 md:text-lg">
                             Create and manage your documents in one place.

web/apps/doprocess/app/api/documents/route.ts

@@ -1,4 +1,4 @@
-import { documentCreate, documentGet, documentsGet } from '../../../src/lib/repo/documentsRepository';
+import { documentCreate, documentGet, documentsGet, documentSetData } from '../../../src/lib/repo/documentsRepository';
 import { ensureUserId } from '../../../src/lib/auth/apiAuth';
 
 export async function GET() {
@@ -10,11 +10,17 @@ export async function GET() {
 
 export async function POST(request: Request) {
     const data = await request.json();
-    const name = data != null && typeof data === 'object' && 'name' in data && typeof data.name === 'string' ? data.name : '';
+    const name = data != null && typeof data === 'object' && 'name' in data && typeof data.name === 'string' ? data.name : null;
+    if (name == null) {
+        throw new Error('Missing name');
+    }
 
     const { userId } = ensureUserId();
 
-    const id = await documentCreate(userId, name);
-    const document = await documentGet(userId, Number(id));
+    const basedOn = data != null && typeof data === 'object' && 'basedOn' in data && typeof data.basedOn === 'string' ? data.basedOn : undefined;
+
+    const id = await documentCreate(userId, name, basedOn);
+
+    const document = await documentGet(userId, id);
     return Response.json({ id: document?.publicId });
 }

web/apps/doprocess/app/api/processes/[id]/task-definitions/route.ts

@@ -34,6 +34,6 @@ export async function POST(request: Request, { params }: { params: { id: string
         return new Response(null, { status: 404 });
 
     const id = await createTaskDefinition(userId, processId, text);
-    const taskDefinition = await getTaskDefinition(userId, processId, Number(id));
+    const taskDefinition = await getTaskDefinition(userId, processId, id);
     return Response.json({ id: taskDefinition?.publicId });
 }

web/apps/doprocess/app/api/processes/route.ts

@@ -14,7 +14,10 @@ export async function POST(request: Request) {
     const name = typeof req === 'object' && req != null && 'name' in req && typeof req.name === 'string' ? req.name.toString() : null;
     if (name == null)
         throw new Error('Missing name');
-    const id = await createProcess(userId, name);
+
+    const basedOn = typeof req === 'object' && req != null && 'basedOn' in req && typeof req.basedOn === 'string' ? req.basedOn.toString() : undefined;
+    const id = await createProcess(userId, name, basedOn);
+
     const process = await getProcess(userId, Number(id));
     return Response.json({ id: process?.publicId });
 }

web/apps/doprocess/components/layouts/Sidebar.tsx

@@ -6,15 +6,15 @@ import { ListItem } from '@signalco/ui-primitives/ListItem';
 import { List } from '@signalco/ui-primitives/List';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
-import { FileText, ListChecks, Play, Right } from '@signalco/ui-icons';
+import { FileText, ListTodo, Play, Right } from '@signalco/ui-icons';
 import { KnownPages } from '../../src/knownPages';
 
 export function Sidebar({ open, onOpenChange }: { open: boolean, onOpenChange?: (open: boolean) => void }) {
     const pathname = usePathname();
 
     const links = useMemo(() => [
         { href: KnownPages.Runs, label: 'Runs', Icon: Play },
-        { href: KnownPages.Processes, label: 'Processes', Icon: ListChecks },
+        { href: KnownPages.Processes, label: 'Processes', Icon: ListTodo },
         { href: KnownPages.Documents, label: 'Documents', Icon: FileText },
     ], []);
 

web/apps/doprocess/components/layouts/SplitView.tsx

@@ -41,7 +41,7 @@ export function SplitView({ children, size, minSize, maxSize, collapsable, colla
                     onTouchStart={handlers.handleTouchStart}
                     orientation="vertical"
                 />
-                <div className="md:w-full">
+                <div className="md:w-full md:pr-1">
                     {children && children[1]}
                 </div>
             </div>

web/apps/doprocess/components/processes/documents/DocumentDetailsToolbar.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
-import { Delete, Embed, Globe, MoreHorizontal } from '@signalco/ui-icons';
+import { Delete, Duplicate, Embed, Globe, MoreHorizontal } from '@signalco/ui-icons';
 import { Toolbar } from '../../shared/Toolbar';
 import { ShareModal } from '../../shared/ShareModal';
 import { SavingIndicator } from '../../shared/SavingIndicator';
@@ -13,6 +13,7 @@ import { ShareableEntity } from '../../../src/types/ShareableEntity';
 import { KnownPages } from '../../../src/knownPages';
 import { useDocumentUpdate } from '../../../src/hooks/useDocumentUpdate';
 import { useDocument } from '../../../src/hooks/useDocument';
+import { DocumentDuplicateModal } from './DocumentDuplicateModal';
 import { DocumentDeleteModal } from './DocumentDeleteModal';
 
 type DocumentDetailsToolbarProps = {
@@ -25,6 +26,7 @@ export function DocumentDetailsToolbar({ id, saving }: DocumentDetailsToolbarPro
     const [deleteModalOpen, setDeleteModalOpen] = useState(false);
     const [embedOpen, setEmbedOpen] = useState(false);
     const [sharePublicOpen, setSharePublicOpen] = useState(false);
+    const [duplicateOpen, setDuplicateOpen] = useState(false);
 
     const isPublic = document && document.sharedWithUsers.includes('public');
     const documentUpdate = useDocumentUpdate();
@@ -60,6 +62,9 @@ export function DocumentDetailsToolbar({ id, saving }: DocumentDetailsToolbarPro
                         </IconButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
+                        <DropdownMenuItem startDecorator={<Duplicate />} onClick={() => setDuplicateOpen(true)}>
+                            Duplicate...
+                        </DropdownMenuItem>
                         {!isPublic && (
                             <DropdownMenuItem startDecorator={<Globe />} onClick={() => setSharePublicOpen(true)}>
                                 Make public...
@@ -88,6 +93,12 @@ export function DocumentDetailsToolbar({ id, saving }: DocumentDetailsToolbarPro
                 src={`https://doprocess.app${KnownPages.Document(id)}/embedded`}
                 open={embedOpen}
                 onOpenChange={setEmbedOpen} />
+            {document && (
+                <DocumentDuplicateModal
+                    document={document}
+                    open={duplicateOpen}
+                    onOpenChange={setDuplicateOpen} />
+            )}
         </>
     );
 }

web/apps/doprocess/components/processes/documents/DocumentDuplicateModal.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Row } from '@signalco/ui-primitives/Row';
+import { Modal } from '@signalco/ui-primitives/Modal';
+import { Input } from '@signalco/ui-primitives/Input';
+import { Button } from '@signalco/ui-primitives/Button';
+import { Duplicate } from '@signalco/ui-icons';
+import { KnownPages } from '../../../src/knownPages';
+import { useDocumentCreate } from '../../../src/hooks/useDocumentCreate';
+import { DocumentDto } from '../../../app/api/dtos/dtos';
+
+type DocumentDuplicateModalProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    document: DocumentDto;
+};
+
+export function DocumentDuplicateModal({
+    open, onOpenChange, document
+}: DocumentDuplicateModalProps) {
+    const router = useRouter();
+    const [name, setName] = useState(document.name + ' (copy)');
+    const documentCreate = useDocumentCreate();
+
+    const handleDuplicate = async () => {
+        const response = await documentCreate.mutateAsync({
+            name,
+            basedOn: document.id
+        });
+        if (response?.id) {
+            onOpenChange(false);
+            router.push(KnownPages.Document(response.id));
+        }
+    };
+
+    return (
+        <Modal open={open} onOpenChange={onOpenChange}>
+            <Stack spacing={2}>
+                <Row spacing={2}>
+                    <Duplicate />
+                    <Typography level="h5">Duplicate document</Typography>
+                </Row>
+                <Typography level="body2">
+                    This will create a new document with the same name and content.
+                </Typography>
+                <Typography level="body2">
+                    You can edit the new document after it is created.
+                </Typography>
+                <Input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    label="Name"
+                    placeholder="example: Onboarding manual" />
+                <Row justifyContent="end" spacing={1}>
+                    <Button variant="plain" onClick={() => onOpenChange(false)}>Cancel</Button>
+                    <Button variant="solid" onClick={handleDuplicate}>Duplicate</Button>
+                </Row>
+            </Stack>
+        </Modal>
+    );
+}

web/apps/doprocess/components/processes/processes/ProcessDetailsHeader.tsx

@@ -8,10 +8,9 @@ import { Row } from '@signalco/ui-primitives/Row';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
-import { Delete, Embed, Globe, ListChecks, MoreHorizontal, Play } from '@signalco/ui-icons';
+import { Delete, Duplicate, Embed, Globe, ListTodo, MoreHorizontal, Play } from '@signalco/ui-icons';
 import { Loadable } from '@signalco/ui/Loadable';
 import { ShareModal } from '../../shared/ShareModal';
-import { SharedWithIndicator } from '../../shared/SharedWithIndicator';
 import { ListHeader } from '../../shared/ListHeader';
 import { EmbedModal } from '../../shared/EmbedModal';
 import { ShareableEntity } from '../../../src/types/ShareableEntity';
@@ -23,6 +22,7 @@ import { TypographyProcessName } from './TypographyProcessName';
 import { RunProgress } from './RunProgress';
 import { ProcessRunCreateModal } from './ProcessRunCreateModal';
 import { ProcessOrRunDeleteModal } from './ProcessOrRunDeleteModal';
+import { ProcessDuplicateModal } from './ProcessDuplicateModal';
 
 export function ProcessDetailsHeader({
     processId, runId, editable
@@ -35,6 +35,7 @@ export function ProcessDetailsHeader({
     const [deleteOpen, setDeleteOpen] = useState(false);
     const [embedOpen, setEmbedOpen] = useState(false);
     const [shareOpen, setShareOpen] = useState(false);
+    const [duplicateOpen, setDuplicateOpen] = useState(false);
 
     const isRun = Boolean(runId);
 
@@ -55,7 +56,7 @@ export function ProcessDetailsHeader({
             error={errorProcess}>
             <Stack spacing={1}>
                 <ListHeader
-                    icon={isRun ? <Play /> : <ListChecks />}
+                    icon={isRun ? <Play /> : <ListTodo />}
                     header={isRun
                         ? (<TypographyProcessRunName id={processId} runId={runId} level="h5" editable={editable} noWrap />)
                         : (<TypographyProcessName id={processId} level="h5" editable={editable} noWrap />)}
@@ -73,6 +74,9 @@ export function ProcessDetailsHeader({
                                     </IconButton>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
+                                    <DropdownMenuItem startDecorator={<Duplicate />} onClick={() => setDuplicateOpen(true)}>
+                                        Duplicate...
+                                    </DropdownMenuItem>
                                     {!isPublic && (
                                         <DropdownMenuItem startDecorator={<Globe />} onClick={() => setShareOpen(true)}>
                                             Make public...
@@ -83,12 +87,12 @@ export function ProcessDetailsHeader({
                                     </DropdownMenuItem>
                                     {!isRun && (
                                         <DropdownMenuItem startDecorator={<Play />} href={KnownPages.ProcessRuns(processId)}>
-                                        View process runs
+                                            View process runs
                                         </DropdownMenuItem>
                                     )}
                                     <DropdownMenuSeparator />
                                     <DropdownMenuItem startDecorator={<Delete />} onClick={() => setDeleteOpen(true)}>
-                                    Delete...
+                                        Delete...
                                     </DropdownMenuItem>
                                 </DropdownMenuContent>
                             </DropdownMenu>
@@ -129,6 +133,12 @@ export function ProcessDetailsHeader({
                 src={`https://doprocess.app${runId ? KnownPages.ProcessRun(processId, runId) : KnownPages.Process(processId)}/embedded`}
                 open={embedOpen}
                 onOpenChange={setEmbedOpen} />
+            {process && (
+                <ProcessDuplicateModal
+                    process={process}
+                    open={duplicateOpen}
+                    onOpenChange={setDuplicateOpen} />
+            )}
         </Loadable>
     );
 }

web/apps/doprocess/components/processes/processes/ProcessDuplicateModal.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Row } from '@signalco/ui-primitives/Row';
+import { Modal } from '@signalco/ui-primitives/Modal';
+import { Input } from '@signalco/ui-primitives/Input';
+import { Button } from '@signalco/ui-primitives/Button';
+import { Duplicate } from '@signalco/ui-icons';
+import { KnownPages } from '../../../src/knownPages';
+import { useProcessCreate } from '../../../src/hooks/useProcessCreate';
+import { ProcessDto } from '../../../app/api/dtos/dtos';
+
+type ProcessDuplicateModalProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    process: ProcessDto;
+};
+
+export function ProcessDuplicateModal({
+    open, onOpenChange, process
+}: ProcessDuplicateModalProps) {
+    const router = useRouter();
+    const [name, setName] = useState(process.name + ' (copy)');
+    const processCreate = useProcessCreate();
+
+    const handleDuplicate = async () => {
+        const response = await processCreate.mutateAsync({
+            name,
+            basedOn: process.id
+        });
+        if (response?.id) {
+            onOpenChange(false);
+            router.push(KnownPages.Process(response.id));
+        }
+    };
+
+    return (
+        <Modal open={open} onOpenChange={onOpenChange}>
+            <Stack spacing={2}>
+                <Row spacing={2}>
+                    <Duplicate />
+                    <Typography level="h5">Duplicate process</Typography>
+                </Row>
+                <Typography level="body2">
+                    This will create a new process with the same name and tasks.
+                </Typography>
+                <Typography level="body2">
+                    You can edit the new process after it is created.
+                </Typography>
+                <Input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    label="Name"
+                    placeholder="example: Onboarding process" />
+                <Row justifyContent="end" spacing={1}>
+                    <Button variant="plain" onClick={() => onOpenChange(false)}>Cancel</Button>
+                    <Button variant="solid" onClick={handleDuplicate}>Duplicate</Button>
+                </Row>
+            </Stack>
+        </Modal>
+    );
+}

web/apps/doprocess/components/processes/processes/ProcessesListItem.tsx

@@ -1,5 +1,5 @@
 import { Row } from '@signalco/ui-primitives/Row';
-import { ListChecks, Navigate } from '@signalco/ui-icons';
+import { ListTodo, Navigate } from '@signalco/ui-icons';
 import { SharedWithIndicator } from '../../shared/SharedWithIndicator';
 import { ListItem } from '../../shared/ListItem';
 import { KnownPages } from '../../../src/knownPages';
@@ -13,7 +13,7 @@ export function ProcessesListItem({ process }: ProcessListItemProps) {
     return (
         <ListItem
             label={process.name}
-            startDecorator={<ListChecks />}
+            startDecorator={<ListTodo />}
             endDecorator={(
                 <Row spacing={1}>
                     <SharedWithIndicator shareableEntity={process} />

web/apps/doprocess/components/processes/processes/RunsList.tsx

@@ -24,7 +24,7 @@ export function RunsList({ processId }: { processId?: string }) {
                     editable={Boolean(processId) && showComplated !== 'true'}
                     itemCreateLabel="New process run"
                     createForm={processId ? <ProcessRunCreateForm processId={processId} redirect /> : undefined}
-                    emptyPlaceholder={<RunsListEmptyPlaceholder />}
+                    emptyPlaceholder={<RunsListEmptyPlaceholder showCompleted={showComplated === 'true'} />}
                 />
             </SignedIn>
             <SignedOut>

web/apps/doprocess/components/processes/processes/RunsListEmptyPlaceholder.tsx

@@ -5,13 +5,17 @@ import { NavigatingButton } from '@signalco/ui/NavigatingButton';
 import { KnownPages } from '../../../src/knownPages';
 import { ViewEmptyPlaceholder } from './ViewEmptyPlaceholder';
 
-export function RunsListEmptyPlaceholder() {
+export function RunsListEmptyPlaceholder({ showCompleted }: { showCompleted?: boolean }) {
     return (
         <ViewEmptyPlaceholder>
             <Play size={64} className="opacity-60" />
             <Stack spacing={2}>
                 <Typography level="h4" secondary>No runs</Typography>
-                <Typography secondary>You do not have any process runs yet. You can start by creating a process.</Typography>
+                {showCompleted ? (
+                    <Typography secondary>You do not have any completed process runs.</Typography>
+                ) : (
+                    <Typography secondary>You do not have any process runs in progress. You can start by creating a process.</Typography>
+                )}
             </Stack>
             <NavigatingButton href={KnownPages.Processes}>Processes</NavigatingButton>
         </ViewEmptyPlaceholder>