From ae5a69fe47fd9279b547c1a502e2ccd6ae1fced0 Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Wed, 15 Jan 2025 13:11:34 +0100
Subject: [PATCH] style: updating the scenario homepage

---
 .../Scenario/TestRun/TestRunNudge.tsx         |  35 +-
 .../Scenario/Workflow/WorkflowNudge.tsx       |  36 +-
 .../src/repositories/LicenseRepository.ts     |  41 +-
 .../src/repositories/init.server.ts           |   3 +-
 .../scenarios+/$scenarioId+/home.tsx          | 517 +++++++++---------
 5 files changed, 318 insertions(+), 314 deletions(-)

diff --git a/packages/app-builder/src/components/Scenario/TestRun/TestRunNudge.tsx b/packages/app-builder/src/components/Scenario/TestRun/TestRunNudge.tsx
index c4dfff95..461a4702 100644
--- a/packages/app-builder/src/components/Scenario/TestRun/TestRunNudge.tsx
+++ b/packages/app-builder/src/components/Scenario/TestRun/TestRunNudge.tsx
@@ -8,26 +8,23 @@ export const TestRunNudge = () => {
   const { t } = useTranslation(['scenarios']);
 
   return (
-    <section className="flex flex-col gap-8">
-      <h2 className="text-grey-00 text-m font-semibold">
+    <section className="bg-grey-100 border-purple-82 relative flex h-fit max-w-[500px] flex-col gap-4 rounded-lg border-2 p-8">
+      <h3 className="text-grey-00 text-l font-bold">
         {t('scenarios:home.testrun')}
-      </h2>
-      <div className="flex max-w-[500px] flex-row gap-4">
-        <div className="bg-grey-100 border-purple-82 relative flex h-fit flex-col gap-4 rounded-lg border-2 p-8">
-          <Nudge
-            className="absolute -right-3 -top-3 size-6"
-            content={t('scenarios:testrun.nudge')}
-          />
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>{t('scenarios:testrun.description')}</span>
-            </div>
-          </CalloutV2>
-          <Button variant="primary" disabled className="isolate h-10 w-fit">
-            <Icon icon="plus" className="size-6" aria-hidden />
-            {t('scenarios:create_testrun.title')}
-          </Button>
-        </div>
+      </h3>
+
+      <Nudge
+        className="absolute -right-3 -top-3 size-6"
+        content={t('scenarios:testrun.nudge')}
+      />
+
+      <CalloutV2>{t('scenarios:testrun.description')}</CalloutV2>
+
+      <div className="flex flex-row gap-4">
+        <Button variant="primary" disabled className="isolate h-10 w-fit">
+          <Icon icon="plus" className="size-6" aria-hidden />
+          {t('scenarios:create_testrun.title')}
+        </Button>
       </div>
     </section>
   );
diff --git a/packages/app-builder/src/components/Scenario/Workflow/WorkflowNudge.tsx b/packages/app-builder/src/components/Scenario/Workflow/WorkflowNudge.tsx
index 472051e5..2795d294 100644
--- a/packages/app-builder/src/components/Scenario/Workflow/WorkflowNudge.tsx
+++ b/packages/app-builder/src/components/Scenario/Workflow/WorkflowNudge.tsx
@@ -8,27 +8,23 @@ export const WorkflowNudge = () => {
   const { t } = useTranslation(['scenarios', 'workflows']);
 
   return (
-    <section className="flex flex-col gap-8">
-      <h2 className="text-grey-00 text-m font-semibold">
+    <section className="bg-grey-100 border-purple-82 relative flex h-fit max-w-[500px] flex-col gap-4 rounded-lg border-2 p-8">
+      <h3 className="text-grey-00 text-l font-bold">
         {t('scenarios:home.workflow')}
-      </h2>
-      <div className="flex max-w-[500px] flex-row gap-4">
-        <div className="bg-grey-100 border-purple-82 relative flex h-fit flex-col gap-4 rounded-lg border-2 p-8">
-          <Nudge
-            className="absolute -right-3 -top-3 size-6"
-            content={t('workflows:nudge')}
-            link="https://docs.checkmarble.com/docs/introduction-5"
-          />
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>{t('scenarios:home.workflow_description')}</span>
-            </div>
-          </CalloutV2>
-          <Button variant="primary" disabled className="isolate h-10 w-fit">
-            <Icon icon="plus" className="size-6" aria-hidden />
-            {t('scenarios:home.workflow.create')}
-          </Button>
-        </div>
+      </h3>
+
+      <Nudge
+        className="absolute -right-3 -top-3 size-6"
+        content={t('workflows:nudge')}
+      />
+
+      <CalloutV2>{t('scenarios:home.workflow_description')}</CalloutV2>
+
+      <div className="flex flex-row gap-4">
+        <Button variant="primary" disabled className="isolate h-10 w-fit">
+          <Icon icon="plus" className="size-6" aria-hidden />
+          {t('scenarios:home.workflow.create')}
+        </Button>
       </div>
     </section>
   );
diff --git a/packages/app-builder/src/repositories/LicenseRepository.ts b/packages/app-builder/src/repositories/LicenseRepository.ts
index 7149f361..04ad72c9 100644
--- a/packages/app-builder/src/repositories/LicenseRepository.ts
+++ b/packages/app-builder/src/repositories/LicenseRepository.ts
@@ -9,27 +9,30 @@ export interface LicenseRepository {
   isSsoEnabled(): Promise<boolean>;
 }
 
-export const makeGetLicenseRepository = () => {
-  return (client: LicenseApi): LicenseRepository => ({
+export const makeGetLicenseRepository =
+  (isDev: boolean) =>
+  (client: LicenseApi): LicenseRepository => ({
     getEntitlements: async (organizationId: string) => {
-      if (import.meta.env.PROD) {
-        const { feature_access } = await client.getEntitlements(organizationId);
-        if (!import.meta.env.PROD) {
-          feature_access.webhooks = 'restricted';
-          feature_access.analytics = 'restricted';
-        }
-        return adaptLicenseEntitlements(feature_access);
+      const accesses: LicenseEntitlements = !isDev
+        ? adaptLicenseEntitlements(
+            (await client.getEntitlements(organizationId)).feature_access,
+          )
+        : {
+            sanctions: 'allowed',
+            ruleSnoozes: 'allowed',
+            userRoles: 'allowed',
+            workflows: 'allowed',
+            testRun: 'allowed',
+            analytics: 'allowed',
+            webhooks: 'allowed',
+          };
+
+      if (isDev) {
+        accesses.webhooks = 'restricted';
+        accesses.analytics = 'restricted';
       }
-      return Promise.resolve({
-        sanctions: 'allowed',
-        ruleSnoozes: 'test',
-        userRoles: 'allowed',
-        webhooks: 'restricted',
-        analytics: 'restricted',
-        workflows: 'allowed',
-        testRun: 'allowed',
-      });
+
+      return accesses;
     },
     isSsoEnabled: async () => (await client.isSsoEnabled()).is_sso_enabled,
   });
-};
diff --git a/packages/app-builder/src/repositories/init.server.ts b/packages/app-builder/src/repositories/init.server.ts
index 3618aae0..5037b3f8 100644
--- a/packages/app-builder/src/repositories/init.server.ts
+++ b/packages/app-builder/src/repositories/init.server.ts
@@ -33,6 +33,7 @@ import { makeGetUserRepository } from './UserRepository';
 import { makeGetWebhookRepository } from './WebhookRepository';
 
 export function makeServerRepositories({
+  devEnvironment,
   sessionStorageRepositoryOptions,
   getLicenseApiClientWithoutAuth,
   getLicenseAPIClientWithAuth,
@@ -80,7 +81,7 @@ export function makeServerRepositories({
     getWebhookRepository: makeGetWebhookRepository(),
     getRuleSnoozeRepository: makeGetRuleSnoozeRepository(),
     getTestRunRepository: makeGetTestRunRepository(),
-    getLicenseRepository: makeGetLicenseRepository(),
+    getLicenseRepository: makeGetLicenseRepository(devEnvironment),
   };
 }
 
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
index eb041a46..5505cb48 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
@@ -185,30 +185,41 @@ export default function ScenarioHome() {
         ) : null}
         <Page.Content>
           <VersionSection scenarioIterations={scenarioIterations} />
-          <ExecutionSection
-            scenarioId={currentScenario.id}
-            isManualTriggerScenarioAvailable={
-              featureAccess.isManualTriggerScenarioAvailable
-            }
-            scheduledExecutions={scheduledExecutions}
-            liveScenarioIteration={liveScenarioIteration}
-          />
-          {featureAccess.isTestRunAvailable === 'restricted' ? (
-            <TestRunNudge />
-          ) : (
-            <TestRunSection
-              scenarioId={currentScenario.id}
-              access={featureAccess.isTestRunAvailable}
-            />
-          )}
-          {featureAccess.isWorkflowsAvailable === 'restricted' ? (
-            <WorkflowNudge />
-          ) : (
-            <WorkflowSection
-              scenario={currentScenario}
-              access={featureAccess.isWorkflowsAvailable}
-            />
-          )}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-grey-00 text-m font-semibold">
+              {t('scenarios:home.execution')}
+            </h2>
+            <div className="grid max-w-[1000px] grid-cols-2 gap-8">
+              <RealTimeSection
+                scenarioId={currentScenario.id}
+                liveScenarioIteration={liveScenarioIteration}
+              />
+              <BatchSection
+                scenarioId={currentScenario.id}
+                isManualTriggerScenarioAvailable={
+                  featureAccess.isManualTriggerScenarioAvailable
+                }
+                scheduledExecutions={scheduledExecutions}
+                liveScenarioIteration={liveScenarioIteration}
+              />
+              {featureAccess.isTestRunAvailable === 'restricted' ? (
+                <TestRunNudge />
+              ) : (
+                <TestRunSection
+                  scenarioId={currentScenario.id}
+                  access={featureAccess.isTestRunAvailable}
+                />
+              )}
+              {featureAccess.isWorkflowsAvailable === 'restricted' ? (
+                <WorkflowNudge />
+              ) : (
+                <WorkflowSection
+                  scenario={currentScenario}
+                  access={featureAccess.isWorkflowsAvailable}
+                />
+              )}
+            </div>
+          </section>
           <ResourcesSection />
         </Page.Content>
       </Page.Container>
@@ -354,92 +365,137 @@ function TestRunSection({
   );
 
   return (
-    <section className="flex flex-col gap-8">
-      <h2 className="text-grey-00 text-m font-semibold">
+    <section
+      className={clsx(
+        'bg-grey-100 border-grey-90 relative flex h-fit max-w-[500px] flex-col gap-4 rounded-lg border p-8',
+        isExecutionOngoing && 'border-purple-65',
+      )}
+    >
+      <h3 className="text-grey-00 text-l font-bold">
         {t('scenarios:home.testrun')}
-      </h2>
-      <div className="flex max-w-[500px] flex-row gap-4">
-        <div
-          className={clsx(
-            'bg-grey-100 border-grey-90 relative flex h-fit flex-col gap-4 rounded-lg border p-8',
-            isExecutionOngoing && 'border-purple-65',
-          )}
-        >
-          {access === 'test' ? (
-            <Nudge
-              className="absolute -right-3 -top-3 size-6"
-              content={t('scenarios:testrun.nudge')}
-              kind="test"
-            />
-          ) : null}
-          {isExecutionOngoing ? (
-            <div className="text-grey-100 text-s bg-purple-65 absolute -top-6 start-8 flex h-6 w-fit flex-row items-center gap-1 rounded-t px-2 font-semibold">
-              <Spinner className="size-3" />
-              {t('scenarios:home.execution.batch.ongoing')}
-            </div>
-          ) : null}
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>{t('scenarios:testrun.description')}</span>
-            </div>
-          </CalloutV2>
-
-          <div className="flex flex-row gap-4">
-            <CreateTestRun
-              currentScenario={currentScenario}
-              scenarioIterations={scenarioIterations}
-              atLeastOneActiveTestRun={currentTestRun.length > 0}
-            >
-              <Button variant="primary" className="isolate h-10 w-fit">
-                <Icon icon="plus" className="size-6" aria-hidden />
-                {t('scenarios:create_testrun.title')}
-              </Button>
-            </CreateTestRun>
-            {currentTestRun.length > 0 ? (
-              <Link
-                className={CtaClassName({
-                  variant: 'secondary',
-                  color: 'grey',
-                })}
-                to={getRoute('/scenarios/:scenarioId/test-run/:testRunId', {
-                  scenarioId: fromUUID(scenarioId),
-                  testRunId: fromUUID(currentTestRun[0]!.id),
-                })}
-              >
-                {t('scenarios:testrun.current_run')}
-              </Link>
-            ) : null}
-            {testRuns.length > 1 ? (
-              <Link
-                className={CtaClassName({
-                  variant: 'secondary',
-                  color: 'grey',
-                })}
-                to={getRoute('/scenarios/:scenarioId/test-run/', {
-                  scenarioId: fromUUID(scenarioId),
-                })}
-              >
-                {t('scenarios:home.other_versions_other', {
-                  count: testRuns.filter((tr) => tr.status != 'up').length,
-                })}
-              </Link>
-            ) : null}
-          </div>
+      </h3>
+
+      {access === 'test' ? (
+        <Nudge
+          className="absolute -right-3 -top-3 size-6"
+          content={t('scenarios:testrun.nudge')}
+          kind="test"
+        />
+      ) : null}
+
+      {isExecutionOngoing ? (
+        <div className="text-grey-100 text-s bg-purple-65 absolute -top-6 start-8 flex h-6 w-fit flex-row items-center gap-1 rounded-t px-2 font-semibold">
+          <Spinner className="size-3" />
+          {t('scenarios:home.execution.batch.ongoing')}
         </div>
+      ) : null}
+
+      <CalloutV2>{t('scenarios:testrun.description')}</CalloutV2>
+
+      <div className="flex flex-row gap-4">
+        <CreateTestRun
+          currentScenario={currentScenario}
+          scenarioIterations={scenarioIterations}
+          atLeastOneActiveTestRun={currentTestRun.length > 0}
+        >
+          <Button variant="primary" className="isolate h-10 w-fit">
+            <Icon icon="plus" className="size-6" aria-hidden />
+            {t('scenarios:create_testrun.title')}
+          </Button>
+        </CreateTestRun>
+        {currentTestRun.length > 0 ? (
+          <Link
+            className={CtaClassName({
+              variant: 'secondary',
+              color: 'grey',
+            })}
+            to={getRoute('/scenarios/:scenarioId/test-run/:testRunId', {
+              scenarioId: fromUUID(scenarioId),
+              testRunId: fromUUID(currentTestRun[0]!.id),
+            })}
+          >
+            {t('scenarios:testrun.current_run')}
+          </Link>
+        ) : null}
+
+        {testRuns.length > 1 ? (
+          <Link
+            className={CtaClassName({
+              variant: 'secondary',
+              color: 'grey',
+            })}
+            to={getRoute('/scenarios/:scenarioId/test-run/', {
+              scenarioId: fromUUID(scenarioId),
+            })}
+          >
+            {t('scenarios:home.other_versions_other', {
+              count: testRuns.filter((tr) => tr.status != 'up').length,
+            })}
+          </Link>
+        ) : null}
       </div>
     </section>
   );
 }
 
-function ExecutionSection({
+function RealTimeSection({
+  scenarioId,
+  liveScenarioIteration,
+}: {
+  scenarioId: string;
+  liveScenarioIteration?: ScenarioIterationWithType;
+}) {
+  const { t } = useTranslation(['scenarios']);
+  const isLive = liveScenarioIteration !== undefined;
+
+  return (
+    <div className="bg-grey-100 border-grey-90 flex h-fit flex-1 flex-col gap-4 rounded-lg border p-8">
+      <h3 className="text-grey-00 text-l font-bold">
+        {t('scenarios:home.execution.real_time')}
+      </h3>
+      <CalloutV2>
+        <div className="flex flex-col gap-4">
+          <span>
+            <Trans
+              t={t}
+              i18nKey="scenarios:home.execution.real_time.callout"
+              components={{
+                DocLink: <ExternalLink href={createDecisionDocHref} />,
+              }}
+            />
+          </span>
+          <span className="text-grey-00 text-s inline-flex items-center whitespace-pre font-semibold">
+            {isLive ? (
+              <Trans
+                t={t}
+                i18nKey="scenarios:home.execution.real_time.callout.scenario_id"
+                components={{
+                  CopyScenarioId: (
+                    <CopyToClipboardButton toCopy={scenarioId}>
+                      <code>scenario_id</code>
+                    </CopyToClipboardButton>
+                  ),
+                }}
+              />
+            ) : (
+              t('scenarios:home.execution.real_time.callout.no_live_version')
+            )}
+          </span>
+        </div>
+      </CalloutV2>
+    </div>
+  );
+}
+
+function BatchSection({
   scenarioId,
-  isManualTriggerScenarioAvailable,
   scheduledExecutions,
   liveScenarioIteration,
+  isManualTriggerScenarioAvailable,
 }: {
   scenarioId: string;
-  isManualTriggerScenarioAvailable: boolean;
   scheduledExecutions: ScheduledExecution[];
+  isManualTriggerScenarioAvailable: boolean;
   liveScenarioIteration?: ScenarioIterationWithType;
 }) {
   const {
@@ -467,104 +523,60 @@ function ExecutionSection({
   );
 
   return (
-    <section className="flex flex-col gap-4">
-      <h2 className="text-grey-00 text-m font-semibold">
-        {t('scenarios:home.execution')}
-      </h2>
-      <div className="flex max-w-5xl flex-row gap-4">
-        <div className="bg-grey-100 border-grey-90 flex h-fit flex-1 flex-col gap-4 rounded-lg border p-8">
-          <h3 className="text-grey-00 text-l font-bold">
-            {t('scenarios:home.execution.real_time')}
-          </h3>
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>
-                <Trans
-                  t={t}
-                  i18nKey="scenarios:home.execution.real_time.callout"
-                  components={{
-                    DocLink: <ExternalLink href={createDecisionDocHref} />,
-                  }}
-                />
-              </span>
-              <span className="text-grey-00 text-s inline-flex items-center whitespace-pre font-semibold">
-                {isLive ? (
-                  <Trans
-                    t={t}
-                    i18nKey="scenarios:home.execution.real_time.callout.scenario_id"
-                    components={{
-                      CopyScenarioId: (
-                        <CopyToClipboardButton toCopy={scenarioId}>
-                          <code>scenario_id</code>
-                        </CopyToClipboardButton>
-                      ),
-                    }}
-                  />
-                ) : (
-                  t(
-                    'scenarios:home.execution.real_time.callout.no_live_version',
-                  )
-                )}
-              </span>
-            </div>
-          </CalloutV2>
+    <div
+      className={clsx(
+        'bg-grey-100 border-grey-90 relative flex h-fit flex-1 flex-col gap-4 rounded-lg border p-8',
+        isExecutionOngoing && 'border-purple-65',
+      )}
+    >
+      {isExecutionOngoing ? (
+        <div className="text-grey-100 text-s bg-purple-65 absolute -top-6 start-8 flex h-6 w-fit flex-row items-center gap-1 rounded-t px-2 font-semibold">
+          <Spinner className="size-3" />
+          {t('scenarios:home.execution.batch.ongoing')}
         </div>
-        <div
-          className={clsx(
-            'bg-grey-100 border-grey-90 relative flex h-fit flex-1 flex-col gap-4 rounded-lg border p-8',
-            isExecutionOngoing && 'border-purple-65',
-          )}
-        >
-          {isExecutionOngoing ? (
-            <div className="text-grey-100 text-s bg-purple-65 absolute -top-6 start-8 flex h-6 w-fit flex-row items-center gap-1 rounded-t px-2 font-semibold">
-              <Spinner className="size-3" />
-              {t('scenarios:home.execution.batch.ongoing')}
-            </div>
-          ) : null}
-          <h3 className="text-grey-00 text-l font-bold">
-            {t('scenarios:home.execution.batch')}
-          </h3>
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>{t('scenarios:home.execution.batch.callout')}</span>
-              {formattedSchedule ? (
-                <span className="text-grey-00 text-s text-balance font-semibold">
-                  <Trans
-                    t={t}
-                    i18nKey="scenarios:scheduled"
-                    components={{
-                      ScheduleLocale: <span className="text-purple-65" />,
-                    }}
-                    values={{
-                      schedule: formattedSchedule,
-                    }}
-                  />
-                </span>
-              ) : null}
-            </div>
-          </CalloutV2>
-
-          <div className="flex flex-row gap-4">
-            {isManualTriggerScenarioAvailable && isLive ? (
-              <ManualTriggerScenarioExecutionForm
-                iterationId={liveScenarioIteration.id}
-                disabled={isExecutionOngoing}
+      ) : null}
+      <h3 className="text-grey-00 text-l font-bold">
+        {t('scenarios:home.execution.batch')}
+      </h3>
+      <CalloutV2>
+        <div className="flex flex-col gap-4">
+          <span>{t('scenarios:home.execution.batch.callout')}</span>
+          {formattedSchedule ? (
+            <span className="text-grey-00 text-s text-balance font-semibold">
+              <Trans
+                t={t}
+                i18nKey="scenarios:scheduled"
+                components={{
+                  ScheduleLocale: <span className="text-purple-65" />,
+                }}
+                values={{
+                  schedule: formattedSchedule,
+                }}
               />
-            ) : null}
-            <Link
-              className={CtaClassName({ variant: 'secondary', color: 'grey' })}
-              to={getRoute('/scenarios/:scenarioId/scheduled-executions', {
-                scenarioId: fromUUID(scenarioId),
-              })}
-            >
-              {t('scenarios:home.execution.batch.scheduled_execution', {
-                count: scheduledExecutions.length,
-              })}
-            </Link>
-          </div>
+            </span>
+          ) : null}
         </div>
+      </CalloutV2>
+
+      <div className="flex flex-row gap-4">
+        {isManualTriggerScenarioAvailable && isLive ? (
+          <ManualTriggerScenarioExecutionForm
+            iterationId={liveScenarioIteration.id}
+            disabled={isExecutionOngoing}
+          />
+        ) : null}
+        <Link
+          className={CtaClassName({ variant: 'secondary', color: 'grey' })}
+          to={getRoute('/scenarios/:scenarioId/scheduled-executions', {
+            scenarioId: fromUUID(scenarioId),
+          })}
+        >
+          {t('scenarios:home.execution.batch.scheduled_execution', {
+            count: scheduledExecutions.length,
+          })}
+        </Link>
       </div>
-    </section>
+    </div>
   );
 }
 
@@ -629,73 +641,68 @@ function WorkflowSection({
   }
 
   return (
-    <section className="flex flex-col gap-4">
-      <h2 className="text-grey-00 text-m flex flex-row items-center gap-2 font-semibold">
+    <section className="bg-grey-100 border-grey-90 relative flex h-fit max-w-[500px] flex-col gap-4 rounded-lg border p-8">
+      <h3 className="text-grey-00 text-l font-bold">
         {t('scenarios:home.workflow')}
-      </h2>
-      <div className="flex max-w-[500px] flex-row gap-4">
-        <div className="bg-grey-100 border-grey-90 relative flex h-fit flex-col gap-4 rounded-lg border p-8">
-          {access === 'test' ? (
-            <Nudge
-              className="absolute -right-3 -top-3 size-6"
-              content={t('workflows:nudge')}
-              link="https://docs.checkmarble.com/docs/introduction-5"
-              kind="test"
-            />
-          ) : null}
-          <CalloutV2>
-            <div className="flex flex-col gap-4">
-              <span>{t('scenarios:home.workflow_description')}</span>
-            </div>
-          </CalloutV2>
-
-          <div className="flex flex-row gap-4">
-            {tag ? (
-              <div className="bg-purple-98 text-s text-purple-65 flex h-10 flex-row items-center gap-2 rounded px-2 uppercase">
-                {tag}
-                {tooltip ? (
-                  <Ariakit.HovercardProvider
-                    showTimeout={0}
-                    hideTimeout={0}
-                    placement="right"
-                  >
-                    <Ariakit.HovercardAnchor
-                      tabIndex={-1}
-                      className="text-purple-82 hover:text-purple-65 cursor-pointer transition-colors"
-                    >
-                      <Icon icon="tip" className="size-5" />
-                    </Ariakit.HovercardAnchor>
-                    <Ariakit.Hovercard
-                      portal
-                      gutter={8}
-                      className="bg-grey-100 border-grey-90 flex w-fit max-w-80 rounded border p-2 shadow-md"
-                    >
-                      {tooltip}
-                    </Ariakit.Hovercard>
-                  </Ariakit.HovercardProvider>
-                ) : null}
-              </div>
+      </h3>
+
+      {access === 'test' ? (
+        <Nudge
+          className="absolute -right-3 -top-3 size-6"
+          content={t('workflows:nudge')}
+          link="https://docs.checkmarble.com/docs/introduction-5"
+          kind="test"
+        />
+      ) : null}
+
+      <CalloutV2>{t('scenarios:home.workflow_description')}</CalloutV2>
+
+      <div className="flex flex-row gap-4">
+        {tag ? (
+          <div className="bg-purple-98 text-s text-purple-65 flex h-10 flex-row items-center gap-2 rounded px-2 uppercase">
+            {tag}
+            {tooltip ? (
+              <Ariakit.HovercardProvider
+                showTimeout={0}
+                hideTimeout={0}
+                placement="right"
+              >
+                <Ariakit.HovercardAnchor
+                  tabIndex={-1}
+                  className="text-purple-82 hover:text-purple-65 cursor-pointer transition-colors"
+                >
+                  <Icon icon="tip" className="size-5" />
+                </Ariakit.HovercardAnchor>
+                <Ariakit.Hovercard
+                  portal
+                  gutter={8}
+                  className="bg-grey-100 border-grey-90 flex w-fit max-w-80 rounded border p-2 shadow-md"
+                >
+                  {tooltip}
+                </Ariakit.Hovercard>
+              </Ariakit.HovercardProvider>
             ) : null}
-            <Link
-              className={CtaClassName({
-                variant: isEdit ? 'secondary' : 'primary',
-                color: isEdit ? 'grey' : 'purple',
-              })}
-              to={getRoute('/scenarios/:scenarioId/workflow', {
-                scenarioId: fromUUID(scenario.id),
-              })}
-            >
-              <Icon icon={isEdit ? 'edit-square' : 'plus'} className="size-6" />
-              <p>
-                {t(
-                  isEdit
-                    ? 'scenarios:home.workflow.edit'
-                    : 'scenarios:home.workflow.create',
-                )}
-              </p>
-            </Link>
           </div>
-        </div>
+        ) : null}
+
+        <Link
+          className={CtaClassName({
+            variant: isEdit ? 'secondary' : 'primary',
+            color: isEdit ? 'grey' : 'purple',
+          })}
+          to={getRoute('/scenarios/:scenarioId/workflow', {
+            scenarioId: fromUUID(scenario.id),
+          })}
+        >
+          <Icon icon={isEdit ? 'edit-square' : 'plus'} className="size-6" />
+          <p>
+            {t(
+              isEdit
+                ? 'scenarios:home.workflow.edit'
+                : 'scenarios:home.workflow.create',
+            )}
+          </p>
+        </Link>
       </div>
     </section>
   );