Move i18n logic back to ExampleInfo

app/client/ui/ExampleCard.ts

@@ -1,4 +1,3 @@
-import {makeT} from 'app/client/lib/localization';
 import {IExampleInfo} from 'app/client/ui/ExampleInfo';
 import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions';
 import {mediaXSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
@@ -7,8 +6,6 @@ import {cssLink} from 'app/client/ui2018/links';
 import {dom, styled} from 'grainjs';
 import {AutomaticHelpToolInfo} from "app/client/ui/Tools";
 
-const t = makeT('ExampleCard')
-
 let prevCardClose: (() => void)|null = null;
 
 // Open a popup with a card introducing this example, if the user hasn't dismissed it in the past.
@@ -29,10 +26,10 @@ export function showExampleCard(
   const cardElem = cssCard(
     cssImage({src: example.imgUrl}),
     cssBody(
-      cssTitle(t(...card.title)),
-      cssInfo(t(...card.text)),
+      cssTitle(card.title),
+      cssInfo(card.text),
       cssButtons(
-        cssLinkBtn(cssLinkIcon('Page'), t(...card.tutorialName),
+        cssLinkBtn(cssLinkIcon('Page'), card.tutorialName,
           {href: example.tutorialUrl, target: '_blank'},
         ),
         // TODO: Add a link to the overview video (as popup or to a support page that shows the

app/client/ui/ExampleInfo.ts

@@ -1,51 +1,53 @@
+import {makeT} from 'app/client/lib/localization'
+
+const t = makeT('ExampleInfo');
+
 export interface IExampleInfo {
   id: number;
   urlId: string;
-  title: KeyAndContext;
+  title: string;
   imgUrl: string;
   tutorialUrl: string;
   welcomeCard: WelcomeCard;
 }
 
 interface WelcomeCard {
-  title: KeyAndContext;
-  text: KeyAndContext;
-  tutorialName: KeyAndContext;
+  title: string;
+  text: string;
+  tutorialName: string;
 }
 
-type KeyAndContext = [string, Record<string, string>];
-
-export const examples: IExampleInfo[] = [{
+export const buildExamples = (): IExampleInfo[] => [{
   id: 1,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'lightweight-crm',
-  title: ['Title', {context: "CRM"}],
+  title: t('Title', {context: "CRM"}),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/lightweight-crm.png',
   tutorialUrl: 'https://support.getgrist.com/lightweight-crm/',
   welcomeCard: {
-    title: ['WelcomeTitle', {context: "CRM"}],
-    text: ['WelcomeText', {context: "CRM"}],
-    tutorialName: ['WelcomeTutorialName', {context: "CRM"}],
+    title: t('WelcomeTitle', {context: "CRM"}),
+    text: t('WelcomeText', {context: "CRM"}),
+    tutorialName: t('WelcomeTutorialName', {context: "CRM"}),
   },
 }, {
   id: 2,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'investment-research',
-  title: ['Title', {context: "investmentResearch"}],
+  title: t('Title', {context: "investmentResearch"}),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/data-visualization.png',
   tutorialUrl: 'https://support.getgrist.com/investment-research/',
   welcomeCard: {
-    title: ['WelcomeTitle', {context: "investmentResearch"}],
-    text: ['WelcomeText', {context: "investmentResearch"}],
-    tutorialName: ['WelcomeTutorialName', {context: "investmentResearch"}],
+    title: t('WelcomeTitle', {context: "investmentResearch"}),
+    text: t('WelcomeText', {context: "investmentResearch"}),
+    tutorialName: t('WelcomeTutorialName', {context: "investmentResearch"}),
   },
 }, {
   id: 3,    // Identifies the example in UserPrefs.seenExamples
   urlId: 'afterschool-program',
-  title: ['Title', {context: "afterschool"}],
+  title: t('Title', {context: "afterschool"}),
   imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/business-management.png',
   tutorialUrl: 'https://support.getgrist.com/afterschool-program/',
   welcomeCard: {
-    title: ['WelcomeTitle', {context: "afterschool"}],
-    text: ['WelcomeText', {context: "afterschool"}],
-    tutorialName: ['WelcomeTutorialName', {context: "afterschool"}],
+    title: t('WelcomeTitle', {context: "afterschool"}),
+    text: t('WelcomeText', {context: "afterschool"}),
+    tutorialName: t('WelcomeTutorialName', {context: "afterschool"}),
   },
 }];

app/client/ui/Tools.ts

@@ -3,7 +3,7 @@ import {GristDoc} from 'app/client/components/GristDoc';
 import {urlState} from 'app/client/models/gristUrlState';
 import {getUserOrgPrefObs, markAsSeen} from 'app/client/models/UserPrefs';
 import {showExampleCard} from 'app/client/ui/ExampleCard';
-import {examples} from 'app/client/ui/ExampleInfo';
+import {buildExamples} from 'app/client/ui/ExampleInfo';
 import {createHelpTools, cssLinkText, cssPageEntry, cssPageEntryMain, cssPageEntrySmall,
         cssPageIcon, cssPageLink, cssSectionHeader, cssSpacer, cssSplitPageEntry,
         cssTools} from 'app/client/ui/LeftPanelCommon';
@@ -78,7 +78,7 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
     ),
     cssSpacer(),
     dom.maybe(docPageModel.currentDoc, (doc) => {
-      const ex = examples.find(e => e.urlId === doc.urlId);
+      const ex = buildExamples().find(e => e.urlId === doc.urlId);
       if (!ex || !ex.tutorialUrl) { return null; }
       return cssPageEntry(
         cssPageLink(cssPageIcon('Page'), cssLinkText(t('HowToTutorial')), testId('tutorial'),

static/locales/en.client.json

@@ -218,7 +218,7 @@
     "MakeIntoDataColumn": "Make into data column",
     "TriggerFormula": "TRIGGER FORMULA"
   },
-  "ExampleCard": {
+  "ExampleInfo": {
     "Title_CRM": "Lightweight CRM",
     "WelcomeTitle_CRM": "Welcome to the Lightweight CRM template",
     "WelcomeText_CRM": "Check out our related tutorial for how to link data, and create high-productivity layouts.",

static/locales/fr.client.json

@@ -217,7 +217,7 @@
     "MakeIntoDataColumn": "Transformer en colonne de données",
     "TriggerFormula": "TRIGGER FORMULA"
   },
-  "ExampleCard": {
+  "ExampleInfo": {
     "Title_CRM": "CRM léger",
     "WelcomeTitle_CRM": "Bienvenue dans le modèle de CRM léger",
     "WelcomeText_CRM": "Consultez le tutoriel associé pour savoir comment lier des données et créer des mises en page de haute productivité.",