Skip to content

Commit a54a33b

Browse files
stevenlestevenle
committed
feat: [v2] cms ui updates for translations v2 (#422)
1 parent 05f2ddc commit a54a33b

File tree

21 files changed

+1282
-500
lines changed

21 files changed

+1282
-500
lines changed

‎docs/collections/PagesSandbox.schema.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import PagesSchema from './Pages.schema.js';
2+
3+
export default {
4+
...PagesSchema,
5+
name: 'Pages [SANDBOX]',
6+
description: 'Sandbox Pages',
7+
url: '/sandbox/[...slug]',
8+
};

‎docs/layouts/BaseLayout.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import {Body, Head, Html, Script, useTranslations} from '@blinkk/root';
1+
import {
2+
Body,
3+
Head,
4+
Html,
5+
Script,
6+
useRequestContext,
7+
useTranslations,
8+
} from '@blinkk/root';
29
import {ComponentChildren} from 'preact';
310
import {GlobalFooter} from '@/components/GlobalFooter/GlobalFooter.js';
411
import {GlobalHeader} from '@/components/GlobalHeader/GlobalHeader.js';
@@ -39,9 +46,10 @@ export function BaseLayout(props: BaseLayoutProps) {
3946
width: 1200,
4047
jpg: true,
4148
});
49+
const ctx = useRequestContext();
4250

4351
return (
44-
<Html>
52+
<Html lang={ctx.locale}>
4553
<Head>
4654
<title>{t(title)}</title>
4755
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎docs/root-cms.d.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,27 @@ export interface PagesFields {
196196
/** Generated from `/collections/Pages.schema.ts`. */
197197
export type PagesDoc = RootCMSDoc<PagesFields>;
198198

199+
/** Generated from `/collections/PagesSandbox.schema.ts`. */
200+
export interface PagesSandboxFields {
201+
/** Meta */
202+
meta?: {
203+
/** Title. Page title. */
204+
title?: string;
205+
/** Description. Description for SEO and social shares. */
206+
description?: string;
207+
/** Image. Meta image for social shares. Recommended: 1400x600 JPG. */
208+
image?: RootCMSImage;
209+
};
210+
/** Content */
211+
content?: {
212+
/** Modules. Compose the page by adding one or more modules. */
213+
modules?: RootCMSOneOf[];
214+
};
215+
}
216+
217+
/** Generated from `/collections/PagesSandbox.schema.ts`. */
218+
export type PagesSandboxDoc = RootCMSDoc<PagesSandboxFields>;
219+
199220
/** Generated from `/components/Button/Button.schema.ts`. */
200221
export interface ButtonFields {
201222
/** Button Options */

‎docs/routes/sandbox/[sandbox].tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {cmsRoute} from '@/utils/cms-route.js';
2+
import Page from '../[[...page]].js';
3+
4+
export default Page;
5+
6+
export const {handle} = cmsRoute({
7+
collection: 'PagesSandbox',
8+
slugParam: 'sandbox',
9+
});

‎packages/root-cms/core/client.ts‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@ export interface TranslationsDoc {
4242
sys: {
4343
modifiedAt: Timestamp;
4444
modifiedBy: string;
45+
publishedAt?: Timestamp;
46+
publishedBy?: string;
47+
linkedSheet?: {
48+
spreadsheetId: string;
49+
gid: number;
50+
linkedAt: Timestamp;
51+
linkedBy: string;
52+
};
4553
};
4654
strings: TranslationsMap;
4755
}
@@ -643,31 +651,39 @@ export class RootCMSClient {
643651
}
644652

645653
/**
646-
* Loads translations saved in the translations collection, optionally
647-
* filtered by tag.
654+
* Loads all published strings in the db.
648655
*
649-
* Returns a map like:
650656
* ```
651657
* {
652658
* "<hash>": {"source": "Hello", "es": "Hola", "fr": "Bonjour"},
653659
* }
654660
* ```
661+
*
662+
* @deprecated Use `createBatchRequest()` to fetch draft/published translations.
655663
*/
656664
async loadTranslations(
657665
options?: LoadTranslationsOptions
658666
): Promise<TranslationsMap> {
659-
const dbPath = `Projects/${this.projectId}/Translations`;
660-
let query: Query = this.db.collection(dbPath);
661-
if (options?.tags) {
662-
query = query.where('tags', 'array-contains-any', options.tags);
663-
}
664-
665-
const querySnapshot = await query.get();
667+
const dbPath = `Projects/${this.projectId}/TranslationsManager/published/Translations`;
668+
const query: Query = this.db.collection(dbPath);
669+
const snapshot = await query.get();
666670
const translationsMap: TranslationsMap = {};
667-
querySnapshot.forEach((doc) => {
668-
const hash = doc.id;
669-
translationsMap[hash] = doc.data() as Translation;
671+
672+
const addTranslations = (hash: string, translations: Translation) => {
673+
translationsMap[hash] = Object.assign(
674+
translationsMap[hash] || {},
675+
translations
676+
);
677+
};
678+
679+
snapshot.forEach((doc) => {
680+
const data = doc.data();
681+
const strings = (data.strings || {}) as Record<string, Translation>;
682+
Object.entries(strings).forEach(([hash, translations]) => {
683+
addTranslations(hash, translations);
684+
});
670685
});
686+
671687
return translationsMap;
672688
}
673689

@@ -678,6 +694,9 @@ export class RootCMSClient {
678694
* "Hello": {"es": "Hola", "fr": "Bonjour"},
679695
* });
680696
* ```
697+
*
698+
* @deprecated Use `saveDraftTranslations()` and `publishTranslations()`
699+
* instead.
681700
*/
682701
async saveTranslations(
683702
translations: {
@@ -707,6 +726,35 @@ export class RootCMSClient {
707726
await batch.commit();
708727
}
709728

729+
async saveDraftTranslations(
730+
translationsId: string,
731+
translations: {[source: string]: {[locale: string]: string}},
732+
options?: {modifiedby?: string}
733+
) {
734+
const docSlug = translationsId.replaceAll('/', '--');
735+
const docPath = `Projects/${this.projectId}/TranslationsManager/draft/${docSlug}`;
736+
const docRef = this.db.doc(docPath);
737+
738+
const snapshot = await docRef.get();
739+
const data = snapshot.data() || {
740+
id: translationsId.replaceAll('--', '/'),
741+
sys: {},
742+
strings: {},
743+
};
744+
data.sys.modifiedAt = Timestamp.now();
745+
data.sys.modifiedBy = options?.modifiedby || 'root-cms-client';
746+
747+
const strings = data.strings || {};
748+
Object.entries(translations).forEach(([source, row]) => {
749+
const normalizedSource = this.normalizeString(source);
750+
const hash = this.getTranslationKey(normalizedSource);
751+
strings[hash] = {...strings[hash], ...row, source: normalizedSource};
752+
});
753+
data.strings = strings;
754+
await docRef.set(data);
755+
this.logAction('translations.save', {metadata: {translationsId}});
756+
}
757+
710758
/**
711759
* Returns the "key" used for a translation as stored in the db. Translations
712760
* are stored under `Projects/<project id>/Translations/<sha1 hash>`.
@@ -1479,6 +1527,7 @@ export function translationsForLocale(
14791527
for (const fallbackLocale of fallbackLocales) {
14801528
if (string[fallbackLocale]) {
14811529
translation = string[fallbackLocale];
1530+
break;
14821531
}
14831532
}
14841533
localeTranslations[source] = translation;

‎packages/root-cms/core/compatibility.ts‎

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {RootConfig} from '@blinkk/root';
2-
import {FieldValue} from 'firebase-admin/firestore';
3-
import type {CMSPlugin} from './plugin.js';
2+
import {Timestamp} from 'firebase-admin/firestore';
3+
import {RootCMSClient, Translation, TranslationsDoc} from './client.js';
44

55
/**
66
* Runs compatibility checks to ensure the current version of root supports
@@ -11,12 +11,10 @@ import type {CMSPlugin} from './plugin.js';
1111
* latest version, a backwards-friendly "migration" is done to ensure
1212
* compatibility on both the old and new versions.
1313
*/
14-
export async function runCompatibilityChecks(
15-
rootConfig: RootConfig,
16-
cmsPlugin: CMSPlugin
17-
) {
18-
const projectId = cmsPlugin.getConfig().id || 'default';
19-
const db = cmsPlugin.getFirestore();
14+
export async function runCompatibilityChecks(rootConfig: RootConfig) {
15+
const cmsClient = new RootCMSClient(rootConfig);
16+
const projectId = cmsClient.projectId;
17+
const db = cmsClient.db;
2018
const projectConfigDocRef = db.doc(`Projects/${projectId}`);
2119
const projectConfigDoc = await projectConfigDocRef.get();
2220
const projectConfig = projectConfigDoc.data() || {};
@@ -26,7 +24,7 @@ export async function runCompatibilityChecks(
2624

2725
const translationsVersion = compatibilityVersions.translations || 0;
2826
if (translationsVersion < 2) {
29-
await migrateTranslationsToV2(rootConfig, cmsPlugin);
27+
await migrateTranslationsToV2(rootConfig, cmsClient);
3028
compatibilityVersions.translations = 2;
3129
versionsChanged = true;
3230
}
@@ -42,14 +40,14 @@ export async function runCompatibilityChecks(
4240
*/
4341
async function migrateTranslationsToV2(
4442
rootConfig: RootConfig,
45-
cmsPlugin: CMSPlugin
43+
cmsClient: RootCMSClient
4644
) {
4745
if (rootConfig.experiments?.rootCmsDisableTranslationsToV2Check) {
4846
return;
4947
}
5048

51-
const projectId = cmsPlugin.getConfig().id || 'default';
52-
const db = cmsPlugin.getFirestore();
49+
const projectId = cmsClient.projectId;
50+
const db = cmsClient.db;
5351
const dbPath = `Projects/${projectId}/Translations`;
5452
const query = db.collection(dbPath);
5553
const querySnapshot = await query.get();
@@ -58,42 +56,65 @@ async function migrateTranslationsToV2(
5856
}
5957

6058
console.log('[root cms] updating translations v2 compatibility');
61-
const translationsFiles: Record<string, Record<string, any>> = {};
59+
60+
const translationsDocs: Record<string, TranslationsDoc> = {};
6261
querySnapshot.forEach((doc) => {
6362
const hash = doc.id;
64-
const translation = doc.data();
63+
const translation = doc.data() as Translation;
6564
const tags = translation.tags || [];
6665
delete translation.tags;
6766
for (const tag of tags) {
6867
if (tag.includes('/')) {
69-
const translationsId = tag.replaceAll('/', '--');
70-
translationsFiles[translationsId] ??= {};
71-
translationsFiles[translationsId][hash] = translation;
68+
const translationsId = tag;
69+
translationsDocs[translationsId] ??= {
70+
id: translationsId,
71+
sys: {
72+
modifiedAt: Timestamp.now(),
73+
modifiedBy: 'root-cms-client',
74+
publishedAt: Timestamp.now(),
75+
publishedBy: 'root-cms-client',
76+
},
77+
strings: {},
78+
};
79+
translationsDocs[translationsId].strings[hash] = translation;
7280
}
7381
}
7482
});
7583

84+
if (Object.keys(translationsDocs).length === 0) {
85+
console.log('[root cms] no translations to save');
86+
return;
87+
}
88+
89+
// Move the doc's "l10nSheet" to the translations doc's "linkedSheet".
90+
91+
for (const docId in translationsDocs) {
92+
const [collection, slug] = docId.split('/');
93+
if (collection && slug) {
94+
const doc: any = await cmsClient.getDoc(collection, slug, {
95+
mode: 'draft',
96+
});
97+
const linkedSheet = doc?.sys?.l10nSheet;
98+
if (linkedSheet) {
99+
translationsDocs[docId].sys.linkedSheet = linkedSheet;
100+
}
101+
}
102+
}
103+
76104
const batch = db.batch();
77-
Object.entries(translationsFiles).forEach(([translationsId, strings]) => {
78-
const updates = {
79-
id: translationsId.replaceAll('--', '/'),
80-
sys: {
81-
modifiedAt: FieldValue.serverTimestamp(),
82-
modifiedBy: 'root-cms-client',
83-
},
84-
strings: strings,
85-
};
105+
Object.entries(translationsDocs).forEach(([translationsId, data]) => {
86106
const draftRef = db.doc(
87107
`Projects/${projectId}/TranslationsManager/draft/Translations/${translationsId}`
88108
);
89109
const publishedRef = db.doc(
90110
`Projects/${projectId}/TranslationsManager/published/Translations/${translationsId}`
91111
);
92-
batch.set(draftRef, updates, {merge: true});
93-
batch.set(publishedRef, updates, {merge: true});
94-
const len = Object.keys(strings).length;
112+
batch.set(draftRef, data, {merge: true});
113+
batch.set(publishedRef, data, {merge: true});
114+
const len = Object.keys(data.strings).length;
95115
console.log(`[root cms] saving ${len} string(s) to ${translationsId}...`);
96116
});
97117
await batch.commit();
118+
98119
console.log('[root cms] done migrating translations to v2');
99120
}

‎packages/root-cms/core/plugin.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -447,8 +447,7 @@ export function cmsPlugin(options: CMSPluginOptions): CMSPlugin {
447447
*/
448448
startup: async ({command, rootConfig}) => {
449449
if (command === 'dev' || command === 'build') {
450-
const cmsPlugin = getCmsPlugin(rootConfig);
451-
await runCompatibilityChecks(rootConfig, cmsPlugin);
450+
await runCompatibilityChecks(rootConfig);
452451
}
453452
},
454453
},

0 commit comments

Comments
 (0)