style: updating the scenario homepage

checkmarble · Jan 15, 2025 · 8cd1e81 · 8cd1e81
1 parent 767d91f
commit 8cd1e81
Show file tree

Hide file tree

Showing 5 changed files with 318 additions and 314 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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),
   };
 }