docs(links): add inline links to external documentation (#462)

* docs(HelpCenter): add new links

* docs(links): add inline links to external documentation

* fix(lint): remove unused imports

packages/app-builder/public/locales/en/data.json

@@ -37,6 +37,7 @@
   "view_pivot.table": "Table",
   "view_pivot.definition": "Definition",
   "create_pivot.title": "Create a pivot",
+  "create_pivot.description": "A key in the data model used to filter or group decisions (<DocLink>learn more</DocLink>)",
   "create_pivot.select.label": "Select a pivot",
   "create_pivot.select.empty_matches": "No pivot matches your search",
   "create_pivot.button_accept": "Create pivot",

packages/app-builder/public/locales/en/scenarios.json

@@ -16,12 +16,12 @@
   "trigger.schedule_scenario.frequency_monthly": "monthly",
   "trigger.schedule_scenario.monthly_warning": "This scenario will run exactly on day {{scheduleDetail}} of the month, and only on months that have this number of days",
   "trigger.schedule_scenario.export_location_warning": "Contact Marble to configure decision export location.",
-  "trigger.trigger_object.title": "Trigger object",
-  "trigger.trigger_object.callout": "The object the scenario will make decisions on.",
+  "trigger.trigger_object.title": "Trigger conditions",
+  "trigger.trigger_object.callout": "Determines whether the scenario is relevant for each trigger object (<DocLink>learn more</DocLink>)",
   "trigger.trigger_manual_execution.button": "Launch now",
   "trigger.trigger_manual_execution.warning": "This scenario is currently being evaluated. Check the <Link>Decisions page</Link> for details.",
   "decision.score_based.title": "Score based decision",
-  "decision.score_based.callout": "The decision is made by comparing the total score computed by the rules to the thresholds defined below.",
+  "decision.score_based.callout": "The decision is made by comparing the total score computed by the rules to the thresholds defined below. (<DocLink>learn more</DocLink>)",
   "decision.score_based.approve_condition": "When score &lt; <ReviewThreshold />",
   "decision.score_based.score_review_threshold": "Score review threshold",
   "decision.score_based.score_reject_threshold": "Score reject threshold",
@@ -166,6 +166,7 @@
   "validation.evaluation_error.payload_field_not_found_other": "{{count}} payload fields not found",
   "edit_aggregation.title": "Create a variable",
   "edit_aggregation.subtitle": "From Marble database",
+  "edit_aggregation.description": "Computes aggregates on your ingested data (<DocLink>learn more</DocLink>)",
   "edit_aggregation.label_title": "Variable name",
   "edit_aggregation.label_placeholder": "Edit the name of your variable",
   "edit_aggregation.function_title": "Function",
@@ -207,6 +208,7 @@
   "edit_operand.placeholder": "Select an operand...",
   "edit_operand.operator_discovery.from": "From <Path>{{path}}</Path>",
   "edit_date.title": "Create a date",
+  "edit_date.description": "Compute a date (<DocLink>learn more</DocLink>)",
   "edit_date.duration_unit_seconds": "seconds",
   "edit_date.duration_unit_minutes": "minutes",
   "edit_date.duration_unit_hours": "hours",
@@ -221,7 +223,7 @@
   "edit_fuzzy_match.fuzzy_match": "match",
   "edit_fuzzy_match.fuzzy_match_any_of": "match any of",
   "edit_fuzzy_match.title": "Create a text match",
-  "edit_fuzzy_match.description": "Match a text field against a list of values. You can find more information in our documentation <DocLink>here</DocLink>.",
+  "edit_fuzzy_match.description": "Match a text field against a list of values (<DocLink>learn more</DocLink>)",
   "edit_fuzzy_match.algorithm.label": "Similarity algorithm",
   "edit_fuzzy_match.algorithm.ratio": "full string similarity",
   "edit_fuzzy_match.algorithm.token_set_ratio": "bag of words similarity",

packages/app-builder/public/locales/en/upload.json

@@ -1,6 +1,6 @@
 {
   "upload_cta": "Upload {{objectType}}",
-  "upload_callout_1": "You can manually add {{objectType}} to your Marble instance from this page by uploading a .csv file here.",
+  "upload_callout_1": "You can manually add {{objectType}} to your Marble instance from this page by uploading a .csv file here. (<DocLink>learn more</DocLink>)",
   "upload_callout_2": "The .csv file must follow the same schema as defined in your data model. We have build a template that you can use to get started quickly.",
   "download_template_cta": "Download template .csv",
   "drop_file_cta": "Drop your filled .csv here",

packages/app-builder/public/locales/en/workflows.json

@@ -1,5 +1,5 @@
 {
-  "workflows_description": "Workflows are a series of actions that are automatically performed based on a trigger. They help you automate your work and save time. At the moment, workflows can only be created for decisions on Scenarios.",
+  "workflows_description": "Workflows are a series of actions that are automatically performed based on a trigger. They help you automate your work and save time. At the moment, workflows can only be created for decisions on Scenarios. (<DocLink>learn more</DocLink>)",
   "no_scenarios": "Create a scenario to start creating workflows.",
   "no_matching_scenarios": "No matching scenarios found.",
   "name": "Name",

packages/app-builder/src/components/HelpCenter.tsx

@@ -1,3 +1,8 @@
+import {
+  executeAScenarioDocHref,
+  pivotValuesDocHref,
+  scenarioDecisionDocHref,
+} from '@app-builder/services/documentation-href';
 import { formatNumber, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import * as Ariakit from '@ariakit/react';
@@ -245,6 +250,10 @@ export function useMarbleCoreResources() {
           tags: ['List', 'Create'],
           href: 'https://docs.checkmarble.com/docs/introduction-copy',
         },
+        {
+          label: 'Executing a scenario',
+          href: executeAScenarioDocHref,
+        },
         {
           label: 'Edit Scenario',
           href: 'https://docs.checkmarble.com/docs/scenario-edit',
@@ -262,7 +271,7 @@ export function useMarbleCoreResources() {
         {
           label: 'Scenario Decision',
           tags: ['Outcome', 'Approve', 'Review', 'Decline'],
-          href: 'https://docs.checkmarble.com/docs/decision-1',
+          href: scenarioDecisionDocHref,
         },
         {
           label: 'Formula',
@@ -306,9 +315,13 @@ export function useMarbleCoreResources() {
         },
         {
           label: 'List in Scenario Builder',
-          tags: ['Formula', 'List operators'],
+          tags: ['Formula'],
           href: 'https://docs.checkmarble.com/docs/lists-in-scenario-builder',
         },
+        {
+          label: 'List operators',
+          href: 'https://docs.checkmarble.com/docs/list-operators',
+        },
       ],
       [t('navigation:workflows')]: [
         {
@@ -341,7 +354,7 @@ export function useMarbleCoreResources() {
         {
           label: 'Pivot values',
           tags: ['Workflow', 'Decision'],
-          href: 'https://docs.checkmarble.com/docs/pivot-values-1',
+          href: pivotValuesDocHref,
         },
         {
           label: 'Ingesting Data',

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/AggregationEdit/Modal.tsx

@@ -1,3 +1,5 @@
+import { Callout } from '@app-builder/components/Callout';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import { EvaluationErrors } from '@app-builder/components/Scenario/ScenarioValidationError';
 import {
   type AggregationAstNode,
@@ -14,6 +16,7 @@ import {
   type EvaluationError,
 } from '@app-builder/models/node-evaluation';
 import { useDataModel } from '@app-builder/services/ast-node/options';
+import { aggregationDocHref } from '@app-builder/services/documentation-href';
 import {
   adaptAstNodeFromEditorViewModel,
   type EditorNodeViewModel,
@@ -26,7 +29,7 @@ import {
 import { createSimpleContext } from '@app-builder/utils/create-context';
 import { type Namespace } from 'i18next';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Button, Input, ModalV2 } from 'ui-design-system';
 import { Logo } from 'ui-icons';
 
@@ -271,6 +274,17 @@ function AggregationEditModalContent({
       </ModalV2.Title>
       <div className="flex flex-col gap-6 p-6">
         <div className="flex flex-1 flex-col gap-4">
+          <Callout variant="outlined">
+            <ModalV2.Description className="whitespace-pre text-wrap">
+              <Trans
+                t={t}
+                i18nKey="scenarios:edit_aggregation.description"
+                components={{
+                  DocLink: <ExternalLink href={aggregationDocHref} />,
+                }}
+              />
+            </ModalV2.Description>
+          </Callout>
           <div className="flex flex-col gap-2">
             <label htmlFor="aggregation.label">
               {t('scenarios:edit_aggregation.label_title')}

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/TimeAddEdit/Modal.tsx

@@ -1,3 +1,5 @@
+import { Callout } from '@app-builder/components/Callout';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import { EvaluationErrors } from '@app-builder/components/Scenario/ScenarioValidationError';
 import {
   type AstNode,
@@ -17,6 +19,7 @@ import {
   computeValidationForNamedChildren,
   type EvaluationError,
 } from '@app-builder/models/node-evaluation';
+import { dateDocHref } from '@app-builder/services/documentation-href';
 import {
   adaptAstNodeFromEditorViewModel,
   type EditorNodeViewModel,
@@ -28,7 +31,7 @@ import {
 } from '@app-builder/services/validation';
 import { createSimpleContext } from '@app-builder/utils/create-context';
 import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Temporal } from 'temporal-polyfill';
 import { Button, Input, ModalV2 } from 'ui-design-system';
 
@@ -184,8 +187,19 @@ function TimeAddEditModalContent({
     <>
       <ModalV2.Title>{t('scenarios:edit_date.title')}</ModalV2.Title>
       <div className="flex flex-col gap-6 p-6">
-        <div>
-          <div className="flex gap-2 pb-2">
+        <div className="flex flex-col gap-4">
+          <Callout variant="outlined">
+            <ModalV2.Description className="whitespace-pre text-wrap">
+              <Trans
+                t={t}
+                i18nKey="scenarios:edit_date.description"
+                components={{
+                  DocLink: <ExternalLink href={dateDocHref} />,
+                }}
+              />
+            </ModalV2.Description>
+          </Callout>
+          <div className="flex gap-2">
             <TimestampField
               value={value.timestampField}
               onChange={(timestampField) =>

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx

@@ -5,6 +5,7 @@ import {
   Paper,
   scenarioI18n,
 } from '@app-builder/components';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import {
   FormControl,
   FormError,
@@ -14,6 +15,7 @@ import {
 } from '@app-builder/components/Form';
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
 import { EvaluationErrors } from '@app-builder/components/Scenario/ScenarioValidationError';
+import { scenarioDecisionDocHref } from '@app-builder/services/documentation-href';
 import {
   useCurrentScenarioIteration,
   useEditorMode,
@@ -198,7 +200,17 @@ export default function Decision() {
     <Paper.Container className="bg-grey-00 max-w-3xl">
       <div className="flex flex-col gap-2 lg:gap-4">
         <Paper.Title>{t('scenarios:decision.score_based.title')}</Paper.Title>
-        <Callout>{t('scenarios:decision.score_based.callout')}</Callout>
+        <Callout variant="outlined">
+          <p className="whitespace-pre text-wrap">
+            <Trans
+              t={t}
+              i18nKey="scenarios:decision.score_based.callout"
+              components={{
+                DocLink: <ExternalLink href={scenarioDecisionDocHref} />,
+              }}
+            />
+          </p>
+        </Callout>
       </div>
 
       <Form

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger.tsx

@@ -16,7 +16,10 @@ import {
 } from '@app-builder/models';
 import { useCurrentScenario } from '@app-builder/routes/_builder+/scenarios+/$scenarioId+/_layout';
 import { useTriggerValidationFetcher } from '@app-builder/routes/ressources+/scenarios+/$scenarioId+/$iterationId+/validate-with-given-trigger-or-rule';
-import { createDecisionDocHref } from '@app-builder/services/documentation-href';
+import {
+  createDecisionDocHref,
+  executeAScenarioDocHref,
+} from '@app-builder/services/documentation-href';
 import {
   useCurrentScenarioIteration,
   useEditorMode,
@@ -235,8 +238,16 @@ export default function Trigger() {
 
       <div className="flex flex-col gap-2 lg:gap-4">
         <Paper.Title>{t('scenarios:trigger.trigger_object.title')}</Paper.Title>
-        <Callout className="w-fit">
-          {t('scenarios:trigger.trigger_object.callout')}
+        <Callout className="w-fit" variant="outlined">
+          <p className="whitespace-pre text-wrap">
+            <Trans
+              t={t}
+              i18nKey="scenarios:trigger.trigger_object.callout"
+              components={{
+                DocLink: <ExternalLink href={executeAScenarioDocHref} />,
+              }}
+            />
+          </p>
         </Callout>
       </div>
 

packages/app-builder/src/routes/_builder+/upload+/$objectType.tsx

@@ -1,6 +1,8 @@
 import { Callout, Page, Paper } from '@app-builder/components';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import { type TableModel } from '@app-builder/models';
 import { useBackendInfo } from '@app-builder/services/auth/auth.client';
+import { ingestingDataByCsvDocHref } from '@app-builder/services/documentation-href';
 import { clientServices } from '@app-builder/services/init.client';
 import { serverServices } from '@app-builder/services/init.server';
 import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
@@ -15,7 +17,7 @@ import { type UploadLog } from 'marble-api';
 import { useCallback, useMemo, useState } from 'react';
 import * as reactDropzone from 'react-dropzone';
 const { useDropzone } = reactDropzone;
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Button, Modal, Table, useVirtualTable } from 'ui-design-system';
 import { Icon } from 'ui-icons';
@@ -368,7 +370,16 @@ export default function Upload() {
       <Page.Content>
         <Callout className="whitespace-normal" variant="outlined">
           <div className="leading-8">
-            <p>{t('upload:upload_callout_1', { replace: { objectType } })}</p>
+            <p className="whitespace-pre text-wrap">
+              <Trans
+                t={t}
+                i18nKey="upload:upload_callout_1"
+                components={{
+                  DocLink: <ExternalLink href={ingestingDataByCsvDocHref} />,
+                }}
+                values={{ objectType }}
+              />
+            </p>
             <p>{t('upload:upload_callout_2')}</p>
           </div>
         </Callout>

packages/app-builder/src/routes/_builder+/workflows+/_index.tsx

@@ -5,8 +5,10 @@ import {
   OffsetPaginationButtons,
   Page,
 } from '@app-builder/components';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import { Highlight } from '@app-builder/components/Highlight';
 import { type Scenario } from '@app-builder/models/scenario';
+import { workflowsDocHref } from '@app-builder/services/documentation-href';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUID } from '@app-builder/utils/short-uuid';
@@ -22,7 +24,7 @@ import {
 } from '@tanstack/react-table';
 import { type Namespace } from 'i18next';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { assertNever } from 'typescript-utils';
 import { Input, Table, Tag, Tooltip, useTable } from 'ui-design-system';
 import { Icon } from 'ui-icons';
@@ -167,7 +169,15 @@ export default function WorkflowsPage() {
       </Page.Header>
       <Page.Content className="max-w-screen-lg">
         <Callout className="w-full" variant="outlined">
-          {t('workflows:workflows_description')}
+          <p className="whitespace-pre text-wrap">
+            <Trans
+              t={t}
+              i18nKey="workflows:workflows_description"
+              components={{
+                DocLink: <ExternalLink href={workflowsDocHref} />,
+              }}
+            />
+          </p>
         </Callout>
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-2 lg:gap-4">

packages/app-builder/src/routes/ressources+/data+/create-pivot.tsx

@@ -1,4 +1,6 @@
+import { Callout } from '@app-builder/components';
 import { PivotType } from '@app-builder/components/Data/SelectedPivot';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import {
   FormControl,
   FormError,
@@ -14,6 +16,7 @@ import {
   type TableModel,
 } from '@app-builder/models';
 import { getPivotOptions } from '@app-builder/services/data/pivot';
+import { pivotValuesDocHref } from '@app-builder/services/documentation-href';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -23,7 +26,7 @@ import { matchSorter } from 'match-sorter';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { Form, FormProvider, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Button, Input, ModalV2, SelectWithCombobox } from 'ui-design-system';
 import { z } from 'zod';
 
@@ -185,6 +188,17 @@ function CreatePivotContent({
       <FormProvider {...formMethods}>
         <ModalV2.Title>{t('data:create_pivot.title')}</ModalV2.Title>
         <div className="bg-grey-00 flex flex-col gap-6 p-6">
+          <Callout variant="outlined">
+            <ModalV2.Description className="whitespace-pre text-wrap">
+              <Trans
+                t={t}
+                i18nKey="data:create_pivot.description"
+                components={{
+                  DocLink: <ExternalLink href={pivotValuesDocHref} />,
+                }}
+              />
+            </ModalV2.Description>
+          </Callout>
           <FormField
             name="pivot"
             control={control}