Merge pull request #3886 from signalco-io/feat/doprocess/runs-empty-p…

…laceholder feat(doprocess): Runs list empty placeholder with CTA
signalco-io · Nov 18, 2023 · b2aa9bb · b2aa9bb
2 parents 1c1c28b + 50a3bb6
commit b2aa9bb
Show file tree

Hide file tree

Showing 25 changed files with 105 additions and 70 deletions.
diff --git a/web/apps/doprocess.app/app/(embedded)/processes/[id]/embedded/page.tsx b/web/apps/doprocess.app/app/(embedded)/processes/[id]/embedded/page.tsx
@@ -1,5 +1,5 @@
 import { TaskDetails } from '../../../../../components/processes/tasks/TaskDetails';
-import { ProcessDetails } from '../../../../../components/processes/ProcessDetails';
+import { ProcessDetails } from '../../../../../components/processes/processes/ProcessDetails';
 import { SplitView } from '../../../../../components/layouts/SplitView';
 
 export default function ProcessEmbeddedPage({ params }: { params: { id: string } }) {

diff --git a/web/apps/doprocess.app/app/(embedded)/processes/[id]/runs/[runId]/embedded/page.tsx b/web/apps/doprocess.app/app/(embedded)/processes/[id]/runs/[runId]/embedded/page.tsx
@@ -1,5 +1,5 @@
 import { TaskDetails } from '../../../../../../../components/processes/tasks/TaskDetails';
-import { ProcessDetails } from '../../../../../../../components/processes/ProcessDetails';
+import { ProcessDetails } from '../../../../../../../components/processes/processes/ProcessDetails';
 import { SplitView } from '../../../../../../../components/layouts/SplitView';
 
 export default function ProcessEmbeddedPage({ params }: { params: { id: string, runId: string } }) {

diff --git a/web/apps/doprocess.app/app/(rest)/(app)/processes/[id]/layout.tsx b/web/apps/doprocess.app/app/(rest)/(app)/processes/[id]/layout.tsx
@@ -5,8 +5,8 @@ import { usePathname } from 'next/navigation';
 import { Stack } from '@signalco/ui/dist/Stack';
 import { Breadcrumbs } from '@signalco/ui/dist/Breadcrumbs';
 import { KnownPages } from '../../../../../src/knownPages';
-import { TypographyProcessName } from '../../../../../components/processes/TypographyProcessName';
-import { ProcessDetails } from '../../../../../components/processes/ProcessDetails';
+import { TypographyProcessName } from '../../../../../components/processes/processes/TypographyProcessName';
+import { ProcessDetails } from '../../../../../components/processes/processes/ProcessDetails';
 import { SplitView } from '../../../../../components/layouts/SplitView';
 
 export default function ProcessLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {

diff --git a/web/apps/doprocess.app/app/(rest)/(app)/processes/[id]/runs/page.tsx b/web/apps/doprocess.app/app/(rest)/(app)/processes/[id]/runs/page.tsx
@@ -1,4 +1,4 @@
-import { RunsListView } from '../../../../../../components/processes/RunsListView';
+import { RunsListView } from '../../../../../../components/processes/processes/RunsListView';
 
 export default function ProcessRunsPage({ params }: { params: { id: string } }) {
     const processId = params.id;

diff --git a/web/apps/doprocess.app/app/(rest)/(app)/processes/page.tsx b/web/apps/doprocess.app/app/(rest)/(app)/processes/page.tsx
@@ -1,4 +1,4 @@
-import { ProcessesListView } from '../../../../components/processes/ProcessesListView';
+import { ProcessesListView } from '../../../../components/processes/processes/ProcessesListView';
 
 export default function ProcessesPage() {
     return (

diff --git a/web/apps/doprocess.app/app/(rest)/(app)/runs/page.tsx b/web/apps/doprocess.app/app/(rest)/(app)/runs/page.tsx
@@ -1,4 +1,4 @@
-import { RunsListView } from '../../../../components/processes/RunsListView';
+import { RunsListView } from '../../../../components/processes/processes/RunsListView';
 
 export default function RunsPage() {
     return (

diff --git a/web/apps/doprocess.app/components/PageNav.tsx b/web/apps/doprocess.app/components/PageNav.tsx
@@ -29,7 +29,7 @@ function NavMenu({ cta }: { cta?: boolean }) {
             ))}
             <SignedOut>
                 <SignInButton
-                    redirectUrl={KnownPages.Processes}
+                    redirectUrl={KnownPages.Runs}
                     mode="modal">
                     <Button variant="plain">Sign in</Button>
                 </SignInButton>
@@ -47,7 +47,7 @@ function NavMenu({ cta }: { cta?: boolean }) {
                 {cta && (
                     <Button
                         variant="solid"
-                        href={KnownPages.Processes}
+                        href={KnownPages.Runs}
                         endDecorator={<Navigate />}>
                             Go to app
                     </Button>

diff --git a/web/apps/doprocess.app/components/processes/RunsList.tsx b/web/apps/doprocess.app/components/processes/RunsList.tsx
diff --git a/web/apps/doprocess.app/components/processes/documents/DocumentsList.tsx b/web/apps/doprocess.app/components/processes/documents/DocumentsList.tsx
@@ -11,7 +11,7 @@ export function DocumentsList() {
             query={useDocuments}
             itemRender={(item) => (<DocumentsListItem document={item} />)}
             editable
-            itemCreateLabel="Create new document"
+            itemCreateLabel="New document"
             createForm={<DocumentCreateForm redirect />}
         />
     );

diff --git a/...omponents/processes/ProcessCreateForm.tsx → ...processes/processes/ProcessCreateForm.tsx b/...omponents/processes/ProcessCreateForm.tsx → ...processes/processes/ProcessCreateForm.tsx
@@ -7,8 +7,8 @@ import { Tooltip } from '@signalco/ui/dist/Tooltip';
 import { Stack } from '@signalco/ui/dist/Stack';
 import { Input } from '@signalco/ui/dist/Input';
 import { Button } from '@signalco/ui/dist/Button';
-import { KnownPages } from '../../src/knownPages';
-import { useProcessCreate } from '../../src/hooks/useProcessCreate';
+import { KnownPages } from '../../../src/knownPages';
+import { useProcessCreate } from '../../../src/hooks/useProcessCreate';
 
 export function ProcessCreateForm({ redirect }: { redirect?: boolean }) {
     const router = useRouter();

diff --git a/...p/components/processes/ProcessDetails.tsx → ...ts/processes/processes/ProcessDetails.tsx b/...p/components/processes/ProcessDetails.tsx → ...ts/processes/processes/ProcessDetails.tsx
@@ -1,5 +1,5 @@
 import { Stack } from '@signalco/ui/dist/Stack';
-import { TaskList } from './tasks/TaskList';
+import { TaskList } from '../tasks/TaskList';
 import { ProcessDetailsHeader } from './ProcessDetailsHeader';
 
 type ProcessDetailsProps = {

diff --git a/...onents/processes/ProcessDetailsHeader.tsx → ...cesses/processes/ProcessDetailsHeader.tsx b/...onents/processes/ProcessDetailsHeader.tsx → ...cesses/processes/ProcessDetailsHeader.tsx
@@ -1,14 +1,15 @@
 'use client';
+
 import { useState } from 'react';
 import { cx } from 'classix';
 import { Delete, ListChecks, MoreHorizontal, Play } from '@signalco/ui-icons';
 import { Skeleton } from '@signalco/ui/dist/Skeleton';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui/dist/Menu';
 import { Loadable } from '@signalco/ui/dist/Loadable';
 import { IconButton } from '@signalco/ui/dist/IconButton';
-import { ListHeader } from '../shared/ListHeader';
-import { KnownPages } from '../../src/knownPages';
-import { useProcess } from '../../src/hooks/useProcess';
+import { ListHeader } from '../../shared/ListHeader';
+import { KnownPages } from '../../../src/knownPages';
+import { useProcess } from '../../../src/hooks/useProcess';
 import { TypographyProcessRunName } from './TypographyProcessRunName';
 import { TypographyProcessName } from './TypographyProcessName';
 import { ProcessRunCreateModal } from './ProcessRunCreateModal';
@@ -38,7 +39,7 @@ export function ProcessDetailsHeader({
                     ? (<TypographyProcessRunName id={processId} runId={runId} level="h5" editable={editable} noWrap />)
                     : (<TypographyProcessName id={processId} level="h5" editable={editable} noWrap />)}
                 actions={[
-                    (process && editable && !isRun) && <ProcessRunCreateModal process={process} />,
+                    (process && editable && !isRun) && <ProcessRunCreateModal processId={processId} />,
                     (editable) && (
                         <DropdownMenu>
                             <DropdownMenuTrigger

diff --git a/...nts/processes/ProcessOrRunDeleteModal.tsx → ...ses/processes/ProcessOrRunDeleteModal.tsx b/...nts/processes/ProcessOrRunDeleteModal.tsx → ...ses/processes/ProcessOrRunDeleteModal.tsx
@@ -2,8 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 import { ModalConfirm, ModalConfirmProps } from '@signalco/ui/dist/ModalConfirm';
-import { useProcessRunDelete } from '../../src/hooks/useProcessRunDelete';
-import { useProcessDelete } from '../../src/hooks/useProcessDelete';
+import { useProcessRunDelete } from '../../../src/hooks/useProcessRunDelete';
+import { useProcessDelete } from '../../../src/hooks/useProcessDelete';
 
 type ProcessDeleteModalProps = Omit<ModalConfirmProps, 'header' | 'onConfirm' | 'children' | 'expectedConfirm' | 'promptLabel'> & {
     processId: string;

diff --git a/...onents/processes/ProcessRunCreateForm.tsx → ...cesses/processes/ProcessRunCreateForm.tsx b/...onents/processes/ProcessRunCreateForm.tsx → ...cesses/processes/ProcessRunCreateForm.tsx
@@ -1,21 +1,26 @@
 'use client';
-import { useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Play } from '@signalco/ui-icons';
 import { Stack } from '@signalco/ui/dist/Stack';
 import { Row } from '@signalco/ui/dist/Row';
 import { Input } from '@signalco/ui/dist/Input';
 import { Button } from '@signalco/ui/dist/Button';
-import { KnownPages } from '../../src/knownPages';
-import { useProcessRunCreate } from '../../src/hooks/useProcessRunCreate';
-import { ProcessDto } from '../../app/api/dtos/dtos';
+import { KnownPages } from '../../../src/knownPages';
+import { useProcessRunCreate } from '../../../src/hooks/useProcessRunCreate';
+import { useProcess } from '../../../src/hooks/useProcess';
 
-export function ProcessRunCreateForm({ process }: { process: ProcessDto; }) {
-    const { id: processId, name: processName } = process;
+export function ProcessRunCreateForm({ processId, redirect }: { processId: string, redirect?: boolean }) {
+    const { data: process } = useProcess(processId);
 
     const router = useRouter();
     const processRunCreate = useProcessRunCreate();
-    const [name, setName] = useState(`${processName} - ${new Date().toLocaleString()} run`);
+    const [name, setName] = useState(`${process?.name} - ${new Date().toLocaleString()} run`);
+
+    useEffect(() => {
+        setName(`${process?.name} - ${new Date().toLocaleString()} run`);
+    }, [process?.name]);
 
     const handleRunProcess = async () => {
         if (!name.length) {
@@ -26,7 +31,7 @@ export function ProcessRunCreateForm({ process }: { process: ProcessDto; }) {
             processId: processId.toString(),
             name
         });
-        if (result?.id) {
+        if (redirect && result?.id) {
             router.push(KnownPages.ProcessRun(processId, result.id));
         }
     };

diff --git a/...nents/processes/ProcessRunCreateModal.tsx → ...esses/processes/ProcessRunCreateModal.tsx b/...nents/processes/ProcessRunCreateModal.tsx → ...esses/processes/ProcessRunCreateModal.tsx
@@ -7,14 +7,13 @@ import { Stack } from '@signalco/ui/dist/Stack';
 import { Row } from '@signalco/ui/dist/Row';
 import { Modal } from '@signalco/ui/dist/Modal';
 import { IconButton } from '@signalco/ui/dist/IconButton';
-import { ProcessDto } from '../../app/api/dtos/dtos';
 import { ProcessRunCreateForm } from './ProcessRunCreateForm';
 
 type ProcessRunCreateModalProps = {
-    process: ProcessDto;
+    processId: string;
 };
 
-export function ProcessRunCreateModal({ process }: ProcessRunCreateModalProps) {
+export function ProcessRunCreateModal({ processId }: ProcessRunCreateModalProps) {
     return (
         <Modal trigger={(
             <Tooltip title="Run process">
@@ -26,7 +25,7 @@ export function ProcessRunCreateModal({ process }: ProcessRunCreateModalProps) {
                     <Play />
                     <Typography level="h5">Run process</Typography>
                 </Row>
-                <ProcessRunCreateForm process={process} />
+                <ProcessRunCreateForm processId={processId} redirect />
             </Stack>
         </Modal>
     );

diff --git a/...pp/components/processes/ProcessesList.tsx → ...nts/processes/processes/ProcessesList.tsx b/...pp/components/processes/ProcessesList.tsx → ...nts/processes/processes/ProcessesList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { List } from '../shared/List';
-import { useProcesses } from '../../src/hooks/useProcesses';
+import { List } from '../../shared/List';
+import { useProcesses } from '../../../src/hooks/useProcesses';
 import { ProcessesListItem } from './ProcessesListItem';
 import { ProcessCreateForm } from './ProcessCreateForm';
 
@@ -11,7 +11,7 @@ export function ProcessesList() {
             query={useProcesses}
             itemRender={(item) => (<ProcessesListItem process={item} />)}
             editable
-            itemCreateLabel="Create new process"
+            itemCreateLabel="New process"
             createForm={<ProcessCreateForm redirect />} />
     );
 }
diff --git a/...omponents/processes/ProcessesListItem.tsx → ...processes/processes/ProcessesListItem.tsx b/...omponents/processes/ProcessesListItem.tsx → ...processes/processes/ProcessesListItem.tsx
@@ -1,7 +1,7 @@
 import { ListChecks, Navigate } from '@signalco/ui-icons';
-import { ListItem } from '../shared/ListItem';
-import { KnownPages } from '../../src/knownPages';
-import { ProcessDto } from '../../app/api/dtos/dtos';
+import { ListItem } from '../../shared/ListItem';
+import { KnownPages } from '../../../src/knownPages';
+import { ProcessDto } from '../../../app/api/dtos/dtos';
 
 export type ProcessListItemProps = {
     process: ProcessDto;

diff --git a/...omponents/processes/ProcessesListView.tsx → ...processes/processes/ProcessesListView.tsx b/...omponents/processes/ProcessesListView.tsx → ...processes/processes/ProcessesListView.tsx
@@ -1,5 +1,5 @@
 import { Stack } from '@signalco/ui/dist/Stack';
-import { ListHeader } from '../shared/ListHeader';
+import { ListHeader } from '../../shared/ListHeader';
 import { ProcessesList } from './ProcessesList';
 
 export function ProcessesListView() {

diff --git a/web/apps/doprocess.app/components/processes/processes/RunsList.tsx b/web/apps/doprocess.app/components/processes/processes/RunsList.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Play } from '@signalco/ui-icons';
+import { Typography } from '@signalco/ui/dist/Typography';
+import { Stack } from '@signalco/ui/dist/Stack';
+import { NavigatingButton } from '@signalco/ui/dist/NavigatingButton';
+import { List } from '../../shared/List';
+import { KnownPages } from '../../../src/knownPages';
+import { useProcessRuns } from '../../../src/hooks/useProcessRuns';
+import { useProcessesRuns } from '../../../src/hooks/useProcessesRuns';
+import { RunsListItem } from './RunsListItem';
+import { ProcessRunCreateForm } from './ProcessRunCreateForm';
+
+function RunsListEmptyPlaceholder() {
+    return (
+        <Stack spacing={4} alignItems="center" className="px-4 py-12 text-center sm:py-24 md:py-40 lg:py-60">
+            <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>
+            </Stack>
+            <NavigatingButton href={KnownPages.Processes}>Processes</NavigatingButton>
+        </Stack>
+    );
+}
+
+export function RunsList({ processId }: { processId?: string }) {
+    const processRuns = useProcessRuns(processId);
+    const processesRuns = useProcessesRuns(!processId);
+
+    return (
+        <List
+            query={() => processId ? processRuns : processesRuns}
+            itemRender={(item) => (<RunsListItem run={item} />)}
+            editable={Boolean(processId)}
+            itemCreateLabel="New process run"
+            createForm={processId ? <ProcessRunCreateForm processId={processId} redirect /> : undefined}
+            emptyPlaceholder={<RunsListEmptyPlaceholder />}
+        />
+    );
+}
diff --git a/...app/components/processes/RunsListItem.tsx → ...ents/processes/processes/RunsListItem.tsx b/...app/components/processes/RunsListItem.tsx → ...ents/processes/processes/RunsListItem.tsx
@@ -1,8 +1,8 @@
 import { ListChecks, Navigate, Play } from '@signalco/ui-icons';
 import { Row } from '@signalco/ui/dist/Row';
-import { ListItem } from '../shared/ListItem';
-import { KnownPages } from '../../src/knownPages';
-import { ProcessRunDto } from '../../app/api/dtos/dtos';
+import { ListItem } from '../../shared/ListItem';
+import { KnownPages } from '../../../src/knownPages';
+import { ProcessRunDto } from '../../../app/api/dtos/dtos';
 import { TypographyProcessName } from './TypographyProcessName';
 
 export type RunsListItemProps = {

diff --git a/...app/components/processes/RunsListView.tsx → ...ents/processes/processes/RunsListView.tsx b/...app/components/processes/RunsListView.tsx → ...ents/processes/processes/RunsListView.tsx
@@ -3,7 +3,7 @@
 import { Typography } from '@signalco/ui/dist/Typography';
 import { Stack } from '@signalco/ui/dist/Stack';
 import { useSearchParam } from '@signalco/hooks/dist/useSearchParam';
-import { ListHeader } from '../shared/ListHeader';
+import { ListHeader } from '../../shared/ListHeader';
 import { TypographyProcessName } from './TypographyProcessName';
 import { RunsList } from './RunsList';
 

diff --git a/...nents/processes/TypographyProcessName.tsx → ...esses/processes/TypographyProcessName.tsx b/...nents/processes/TypographyProcessName.tsx → ...esses/processes/TypographyProcessName.tsx
@@ -3,8 +3,8 @@
 import { TypographyEditable, TypographyEditableProps } from '@signalco/ui/dist/TypographyEditable';
 import { Typography } from '@signalco/ui/dist/Typography';
 import { Loadable } from '@signalco/ui/dist/Loadable';
-import { useProcessUpdate } from '../../src/hooks/useProcessUpdate';
-import { useProcess } from '../../src/hooks/useProcess';
+import { useProcessUpdate } from '../../../src/hooks/useProcessUpdate';
+import { useProcess } from '../../../src/hooks/useProcess';
 
 export type TypographyProcessNameProps = Omit<TypographyEditableProps, 'children' | 'onChange'> & {
     id: string | undefined;

diff --git a/...ts/processes/TypographyProcessRunName.tsx → ...es/processes/TypographyProcessRunName.tsx b/...ts/processes/TypographyProcessRunName.tsx → ...es/processes/TypographyProcessRunName.tsx
@@ -3,8 +3,8 @@
 import { TypographyEditable, TypographyEditableProps } from '@signalco/ui/dist/TypographyEditable';
 import { Typography } from '@signalco/ui/dist/Typography';
 import { Loadable } from '@signalco/ui/dist/Loadable';
-import { useProcessRunUpdate } from '../../src/hooks/useProcessRunUpdate';
-import { useProcessRun } from '../../src/hooks/useProcessRun';
+import { useProcessRunUpdate } from '../../../src/hooks/useProcessRunUpdate';
+import { useProcessRun } from '../../../src/hooks/useProcessRun';
 
 export type TypographyProcessRunNameProps = Omit<TypographyEditableProps, 'children' | 'onChange'> & {
     id: string | undefined;

diff --git a/web/apps/doprocess.app/components/shared/List.tsx b/web/apps/doprocess.app/components/shared/List.tsx
@@ -19,9 +19,10 @@ type ListProps<T> = {
     itemCreateLabel?: string;
     itemRender?: (item: T) => ReactElement;
     createForm?: ReactNode;
+    emptyPlaceholder?: ReactNode;
 };
 
-export function List<T>({ query, itemRender, editable, itemCreateLabel, createForm }: ListProps<T>) {
+export function List<T>({ query, itemRender, editable, itemCreateLabel, createForm, emptyPlaceholder }: ListProps<T>) {
     const { data, isLoading, error } = query();
     const [showCreateModal, setShowCreateModal] = useState(false);
 
@@ -57,10 +58,16 @@ export function List<T>({ query, itemRender, editable, itemCreateLabel, createFo
                 ) : (
                     <>
                         {!data?.length && (
-                            <ListItem
-                                disabled
-                                className={'text-muted-foreground'}
-                                label="No items" />
+                            <>
+                                {emptyPlaceholder ? (
+                                    emptyPlaceholder
+                                ) : (
+                                    <ListItem
+                                        disabled
+                                        className={'text-muted-foreground'}
+                                        label="No items" />
+                                )}
+                            </>
                         )}
                     </>
                 )}

diff --git a/web/packages/ui/src/TypographyEditable/TypographyEditable.tsx b/web/packages/ui/src/TypographyEditable/TypographyEditable.tsx
@@ -60,7 +60,7 @@ export function TypographyEditable({ children, className, onChange, onEditingCha
             {...rest}>
             {children || placeholder}
             {!hideEditIcon && (
-                <Edit size={20} className="uitw-ml-2 uitw-inline uitw-align-baseline uitw-opacity-0 uitw-transition-opacity group-hover:uitw-opacity-60" />
+                <Edit size={20} className="uitw-ml-2 uitw-inline uitw-opacity-0 uitw-transition-opacity group-hover:uitw-opacity-60" />
             )}
         </Typography>
     );