Skip to content

Cleanup process builder header #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nourmalaeb wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Cleanup process builder header #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a02c874
Merge branch 'dev' into update-process-builder-overview-page
nourmalaeb Feb 13, 2026
4a321b5
Update process builder header
nourmalaeb Feb 13, 2026
9fffd07
Header fetches its own data
nourmalaeb Feb 13, 2026
5f77ff6
Cleanup
nourmalaeb Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions apps/app/src/app/[locale]/(no-header)/decisions/[slug]/edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,7 @@ const EditDecisionPage = async ({
decisionProfileId={decisionProfile.id}
serverData={serverData}
/>
<ProcessBuilderHeader
processName={decisionProfile.name}
instanceId={instanceId}
slug={slug}
/>
<ProcessBuilderHeader instanceId={instanceId} slug={slug} />
<div className="flex grow flex-col overflow-y-auto sm:flex-row">
<ProcessBuilderSidebar instanceId={instanceId} />
<main className="grow">
Expand Down
62 changes: 40 additions & 22 deletions apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,40 +30,59 @@ import { Link, useTranslations } from '@/lib/i18n';
import { UserAvatarMenu } from '@/components/SiteHeader';

import { LaunchProcessModal } from './LaunchProcessModal';
import { useProcessBuilderStore } from './stores/useProcessBuilderStore';
import { useNavigationConfig } from './useNavigationConfig';
import { useProcessNavigation } from './useProcessNavigation';
import type { ValidationSummary } from './validation/processBuilderValidation';
import { useProcessBuilderValidation } from './validation/useProcessBuilderValidation';

export const ProcessBuilderHeader = ({
processName,
instanceId,
slug,
}: {
processName?: string;
instanceId?: string;
slug?: string;
}) => {
if (!instanceId) {
return <CreateModeHeader />;
}

return (
<SidebarProvider>
<ProcessBuilderHeaderContent
processName={processName}
instanceId={instanceId}
slug={slug}
/>

<ProcessBuilderHeaderContent instanceId={instanceId} slug={slug} />
<MobileSidebar instanceId={instanceId} />
</SidebarProvider>
);
};

const CreateModeHeader = () => {
const t = useTranslations();

return (
<header className="relative sticky top-0 z-20 flex h-14 w-dvw shrink-0 items-center justify-between border-b bg-white">
<div className="flex items-center gap-2 pl-4 md:pl-8">
<Link
href="/"
className="hidden items-center gap-2 text-primary md:flex"
>
<LuHouse className="size-4" />
{t('Home')}
</Link>
<LuChevronRight className="hidden size-4 md:block" />
<span>{t('New process')}</span>
</div>
<div className="pr-4 md:pr-8">
<UserAvatarMenu className="hidden md:block" />
</div>
</header>
);
};

const ProcessBuilderHeaderContent = ({
processName,
instanceId,
slug,
}: {
processName?: string;
instanceId?: string;
instanceId: string;
slug?: string;
}) => {
const t = useTranslations();
Expand All @@ -72,15 +91,17 @@ const ProcessBuilderHeaderContent = ({
useProcessNavigation(navigationConfig);
const hasSteps = visibleSteps.length > 0;

const { data: instance } = trpc.decision.getInstance.useQuery(
{ instanceId: instanceId! },
{ enabled: !!instanceId },
);
const { data: instance } = trpc.decision.getInstance.useQuery({ instanceId });

const instanceStatus = instance?.status as ProcessStatus | undefined;
const decisionProfileId = instance?.profileId ?? undefined;
const validation = useProcessBuilderValidation(decisionProfileId);

const storeInstanceName = useProcessBuilderStore((state) =>
decisionProfileId ? state.instances[decisionProfileId]?.name : undefined,
);
const displayName = instance?.name || storeInstanceName || t('New process');
Copy link
Collaborator

@scazan scazan Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should get this off the profile rather than the instance name. it is unfortunately a side effect of legacy data that this field exists. I will submit a removal PR for the column.


const { setOpen } = useSidebar();
const [isLaunchModalOpen, setIsLaunchModalOpen] = useState(false);

Expand All @@ -103,9 +124,6 @@ const ProcessBuilderHeaderContent = ({
});

const handleLaunchOrSave = () => {
if (!instanceId) {
return;
}
if (isDraft) {
setIsLaunchModalOpen(true);
} else {
Expand All @@ -132,7 +150,7 @@ const ProcessBuilderHeaderContent = ({
</Link>
<LuChevronRight className="hidden size-4 md:block" />

<span>{processName || t('New process')}</span>
<span>{displayName}</span>
</div>
{hasSteps && (
<nav className="absolute z-0 hidden h-full w-full justify-center md:flex">
Expand Down Expand Up @@ -191,12 +209,12 @@ const ProcessBuilderHeaderContent = ({
<UserAvatarMenu className="hidden md:block" />
</div>

{instanceId && slug && processName && decisionProfileId && (
{slug && decisionProfileId && (
<LaunchProcessModal
isOpen={isLaunchModalOpen}
onOpenChange={setIsLaunchModalOpen}
instanceId={instanceId}
processName={processName}
processName={displayName}
slug={slug}
decisionProfileId={decisionProfileId}
/>
Expand All @@ -205,7 +223,7 @@ const ProcessBuilderHeaderContent = ({
);
};

const MobileSidebar = ({ instanceId }: { instanceId?: string }) => {
const MobileSidebar = ({ instanceId }: { instanceId: string }) => {
const t = useTranslations();
const navigationConfig = useNavigationConfig(instanceId);
const { visibleSteps, currentStep, setStep } =
Expand Down