Revert "Revert "Instance configuration in user interface (#3943)" (#3996

)"

This reverts commit 0b1507a.

.eslintignore

@@ -1,8 +1,8 @@
 missing-translations-strings.js
 language-mapping-list.js
-*.d.ts
 scripts/extensions/*/node_modules
 scripts/extensions/**/dist
+scripts/extensions/**/refs.d.ts
 end-to-end-testing-helpers/dist
 end-to-end-testing-helpers/node_modules
 spec/**/*.js

.github/workflows/tests.yml

@@ -20,6 +20,12 @@ jobs:
     - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
 
     - run: npm ci
+
+    # running @superdesk/build-tools is required to generate instance configuration schema
+    # otherwise imports would not be found and linting/unit tests would fail
+    - run: npm install && npm run build
+      working-directory: e2e/client
+
     - run: npm run test
 
   e2e:

.gitignore

@@ -12,6 +12,7 @@ e2e-test-results
 templates-cache.generated.js
 styles/extension-styles.generated.css
 e2e/client/specs/**/*.js
+*.generated.ts
 .env
 npm-debug.log
 index.html

build-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdesk/build-tools",
-  "version": "1.0.16",
+  "version": "2.0.1",
   "publishConfig": {
     "access": "public"
   },

build-tools/src/extensions/extract-translations.js

@@ -3,16 +3,17 @@ const fs = require('fs');
 const path = require('path');
 const getExtensionDirectoriesSync = require('./get-extension-directories-sync');
 
-const {GettextExtractor, JsExtractors} = require('gettext-extractor');
+const {GettextExtractor, JsExtractors, HtmlExtractors} = require('gettext-extractor');
 const extractor = new GettextExtractor();
 
 function extractTranslations(clientDir) {
     for (const {extensionRootPath} of getExtensionDirectoriesSync(clientDir)) {
         const package = JSON.parse(fs.readFileSync(path.join(extensionRootPath, 'package.json'), 'utf-8'));
         const paths = _.get(package, 'superdeskExtension.translations-extract-paths');
 
+
         if (paths == null || !Array.isArray(paths)) {
-            return null;
+            continue;
         }
 
         const pathsAbsolute = paths.map((p) => path.join(extensionRootPath, p));
@@ -38,6 +39,19 @@ function extractTranslations(clientDir) {
             jsParser.parseFilesGlob(`${_path}/**/*.@(ts|js|tsx|jsx)`);
         }
 
+        const htmlParser = extractor
+            .createHtmlParser([
+                HtmlExtractors.elementContent('[translate]', {
+                    attributes: {
+                        textPlural: 'translate-plural',
+                    },
+                }),
+            ]);
+
+        for (const _path of pathsAbsolute) {
+            htmlParser.parseFilesGlob(`${_path}/**/*.@(html)`);
+        }
+
         extractor.savePotFile(`${extensionRootPath}/translations.generated.pot`);
     }
 }

build-tools/src/generate-instance-configuration-schema.js

@@ -0,0 +1,71 @@
+const fs = require('fs');
+const path = require('path');
+var execSync = require('child_process').execSync;
+var _ = require('lodash');
+
+function escapeSingleQuoteAsHtml(str) {
+    return str.replace(/'/g, ''');
+}
+
+function unescapeSingleQuoteAsHtml(str) {
+    return str.replace(/'/g, '\\\'');
+}
+
+function addTranslations(branch) {
+    if (branch.properties == null) {
+        return branch;
+    }
+
+    branch.translations = Object.keys(branch.properties).reduce((acc, property) => {
+        // gettext call will be unwrapped from the string later with regex
+        acc[property] = `gettext('${_.lowerCase(escapeSingleQuoteAsHtml(property))}')`;
+
+        return acc;
+    }, {});
+
+    for (const property of Object.keys(branch.properties)) {
+        // handle nested properties
+        branch.properties[property] = addTranslations(branch.properties[property]);
+
+        // handle nested properties inside arrays
+        if (branch.properties[property].items != null && branch.properties[property].items.properties != null) {
+            branch.properties[property].items = addTranslations(branch.properties[property].items);
+        }
+
+        // translate description
+        if (typeof branch.properties[property].description === 'string') {
+            branch.properties[property].description =
+                `gettext('${escapeSingleQuoteAsHtml(branch.properties[property].description)}')`;
+        }
+    }
+
+    return branch;
+}
+
+function generateInstanceConfigurationSchema(clientDirAbs) {
+    const file = path.join(clientDirAbs, 'node_modules/superdesk-core/scripts/core/superdesk-api.d.ts');
+    const configFile = path.join(
+        clientDirAbs,
+        'node_modules/superdesk-core/scripts/instance-settings.generated.ts'
+    );
+    const generatedSchema = JSON.parse(
+        execSync(`npx typescript-json-schema "${file}" IInstanceSettings --strictNullChecks --required`).toString()
+    );
+    const schemaWithTranslations = unescapeSingleQuoteAsHtml(
+        JSON.stringify(addTranslations(generatedSchema), null, 4)
+            .replace(/"(gettext.+?)"/g, '$1')
+    );
+
+    const contents =
+`/* eslint-disable quotes, comma-dangle */
+/* tslint:disable: trailing-comma max-line-length */
+
+export const getInstanceConfigSchema = (gettext) => (${schemaWithTranslations});
+`;
+
+    fs.writeFileSync(configFile, contents, 'utf-8');
+}
+
+module.exports = {
+    generateInstanceConfigurationSchema,
+};

build-tools/src/index.js

@@ -9,6 +9,7 @@ const installExtensions = require('./extensions/install-extensions');
 const {mergeTranslationsFromExtensions} = require('./extensions/translations');
 const {extractTranslations} = require('./extensions/extract-translations');
 const {namespaceCSS, watchCSS} = require('./extensions/css');
+const {generateInstanceConfigurationSchema} = require('./generate-instance-configuration-schema');
 
 const {Command} = require('commander');
 const program = new Command();
@@ -26,6 +27,14 @@ program.configureHelp({
     },
 });
 
+program.command('generate-instance-configuration-schema <main-client-dir>')
+    .description('reads typescript interfaces and generates JSON schema that will be used to generate the UI')
+    .action((mainClientDir) => {
+        const clientDirAbs = path.join(currentDir, mainClientDir);
+
+        generateInstanceConfigurationSchema(clientDirAbs);
+    });
+
 program.command('po-to-json <source-dir-po> <output-dir-json>')
     .description('convert .po files in the directory to .json format that is used by Superdesk')
     .action((sourcePo, outputJson) => {
@@ -39,8 +48,8 @@ program.command('build-root-repo <main-client-dir>')
     .description('executes all actions required to prepare the main repo for usage')
     .action((mainClientDir) => {
         const clientDirAbs = path.join(currentDir, mainClientDir);
-        const poDir = path.join(clientDirAbs, 'node_modules/superdesk-core/po');
-        const translationsDir = path.join(currentDir, mainClientDir, 'dist/languages');
+
+        generateInstanceConfigurationSchema(clientDirAbs);
 
         // build will fail if extensions are not installed
         installExtensions(clientDirAbs);
@@ -51,6 +60,9 @@ program.command('build-root-repo <main-client-dir>')
             {stdio: 'inherit'}
         );
 
+        const poDir = path.join(clientDirAbs, 'node_modules/superdesk-core/po');
+        const translationsDir = path.join(currentDir, mainClientDir, 'dist/languages');
+
         // translationsDir is only created after the build and would get removed if created before build
         poToJson(poDir, translationsDir);
         mergeTranslationsFromExtensions(clientDirAbs);

e2e/client/specs/globals.d.ts

@@ -1,10 +1,18 @@
 // testing
 declare const describe: any;
+
 declare const xdescribe: any;
+
 declare const fdescribe: any;
+
 declare const beforeEach: any;
+
 declare const afterEach: any;
+
 declare const expect: any;
+
 declare const it: any;
+
 declare const fit: any;
+
 declare const xit: any;

e2e/client/specs/users_spec.ts

@@ -39,7 +39,7 @@ describe('users', () => {
 
         it('can save and use language preferences', () => {
             userPreferences.setLang('Deutsch');
-            browser.wait(() => userPreferences.btnSave.isDisplayed(), 3000);
+            browser.wait(ECE.elementToBeClickable(userPreferences.btnSave), 3000);
             userPreferences.btnSave.click();
 
             browser.sleep(500); // wait for modal