@pnp/spfx-controls-react 3.21.0-beta.1344790 → 4.0.0-beta.1344828

package/scripts/execute-translation.js

@@ -0,0 +1,243 @@
+/**
+ * Script executes the translation of the localization keys for the provided languages (config/supported.localization.json) with the usage of the Azure Cognitive services.
+ * In case the language localization file doesn't exist, it is going to be created.
+ * Only languages supported by Azure Cognitive services are supported.
+ *
+ * English is used as a main language. The translation is executed for the keys which are the same as in English or are missing.
+ */
+
+
+const path = require('path');
+const fs = require('fs');
+const _ = require('lodash');
+// Cognitive services
+const request = require('request-promise');
+const uuidv4 = require('uuid');
+
+// Replace with process.env.subscriptionKey to get an access to Azure Cognitive services
+const subscriptionKey = process.env.SUBSCRIPTION_KEY;
+const endpoint = "https://api.cognitive.microsofttranslator.com";
+
+const locHelper = require('./export-localization');
+// Load configuration for supported languages
+const languagesConfiguration = require('../config/supported.localization.json');
+
+/**
+ * Obtain auth token for the global cognitive services  endpoint from region (WestEurope)
+ */
+let authToken = null;
+async function getAuthToken() {
+  try {
+    // Cache AuthToken
+    if (authToken) {
+      return authToken;
+    }
+
+    const options = {
+      method: 'POST',
+      url: 'https://api.cognitive.microsoft.com/sts/v1.0/issueToken',
+      headers: {
+        'Ocp-Apim-Subscription-Key': subscriptionKey,
+        'Content-type': 'application/x-www-form-urlencoded',
+        'Content-length': 0
+      }
+    }
+
+    const token = await request(options);
+    if (!token || token.length < 0) {
+      throw new Error("Somethig went wrong when obtaining Auth token!");
+    }
+
+    // Cache Auth token
+    authToken = token;
+  return token;
+  }
+  catch (err) {
+    console.error(`[Exception]: Cannot obtain Auth token. Err=${err}`)
+    return null;
+  }
+}
+
+/**
+ * Function executes the translation using cognitive services.
+ */
+async function executeTranslation(lang, inputObj) {
+  try {
+    const authToken = await getAuthToken();
+    let options = {
+      method: 'POST',
+      baseUrl: endpoint,
+      url: 'translate',
+      qs: {
+        'api-version': '3.0',
+        'to': [`${lang}`]
+      },
+      headers: {
+        'Authorization': `Bearer ${authToken}`,
+        'Content-type': 'application/json',
+        'X-ClientTraceId': uuidv4().toString()
+      },
+      body: inputObj,
+      json: true,
+    };
+
+    const response = await request(options);
+    if (!response || response.length < 0) {
+      throw new Error("Somethig went wrong when obtaining translated text!");
+    }
+
+    // Go through all the results
+    const translations = response.map((item) => {
+      // Every translation is in a separate 1-element array -> make it flat
+      return item.translations[0];
+    })
+
+    return translations;
+  } catch (err) {
+    console.error(`[Exception]: Cannot execute translation for lang - ${lang}. Err=${err}`)
+    return null;
+  }
+}
+
+function compareTranslationKeys(srcObj, dstObj) {
+  // Extract all the keys and set them in alpabetyical order
+  let dstKeys = Object.keys(dstObj);
+
+  let toTranslate = [];
+  // Array<string>
+  try {
+    dstKeys.forEach((locKey) => {
+      if (typeof srcObj[locKey] !== "string") {
+        // In case we have nested translation objects
+        toTranslate = toTranslate.concat(compareTranslationKeys(srcObj[locKey], dstObj[locKey]));
+      } else if (srcObj[locKey] === dstObj[locKey]) {
+        // In case the english value is the same as localized one, add it to translate
+        toTranslate.push(srcObj[locKey]);
+      }
+    });
+  } catch (error) {
+    console.log(error.message);
+  }
+
+
+  return toTranslate;
+}
+
+let currentTranslationIndex = 0;
+function injectTranslatedKeys(srcObj, dstObj, translatedValues) {
+  const srcKeys = Object.keys(srcObj);
+  srcKeys.forEach((locKey) => {
+    if (typeof srcObj[locKey] !== "string") {
+      dstObj[locKey] = injectTranslatedKeys(srcObj[locKey], dstObj[locKey], translatedValues);
+    } else if (srcObj[locKey] === dstObj[locKey]) {
+      const translatedKey = translatedValues[currentTranslationIndex++];
+      dstObj[locKey] = translatedKey ? translatedKey : dstObj[locKey];
+    }
+  });
+
+  return dstObj;
+}
+
+function prepareTranslationRequestMsg(wordsToTranslate) {
+  // Execute translation for every 50 words in batch
+  const result = [];
+  const chunk = 50;
+  for (let i = 0; i < wordsToTranslate.length; i += chunk) {
+    const slicedWords = wordsToTranslate.slice(i, i + chunk);
+    const slicedMessages = [];
+    // do whatever
+    slicedWords.forEach((word) => {
+      slicedMessages.push({
+        //'text': encodeURI(word)
+        'text': word
+      });
+    });
+    result.push(slicedMessages);
+  }
+
+  return result;
+}
+
+function extranctTranslatedKeys(translatedMsgs) {
+  // Flatten the result to retrieve original structure of the keys array
+  const translatedKeys = [];
+  translatedMsgs.forEach((keys) => {
+    keys.forEach((translationMsg) => {
+      // There is often a replacement of '||' to ' | | ' during the translation
+      // Replace  ' | | ' to '||'
+      const translationResult = translationMsg.text ? translationMsg.text.replace(" | | ", "||") : translationMsg.text;
+      translatedKeys.push(translationResult);
+    })
+  });
+
+  return translatedKeys;
+}
+
+async function executeLocalizationTranslation(srcObj, langObj, lang) {
+  try {
+    // Initialize result object with all english keys and localized keys
+    const dstLoc = Object.assign({}, srcObj, langObj);
+
+    // Prepare keys to translate
+    const keysToTranslate = compareTranslationKeys(srcObj, dstLoc);
+
+    if (keysToTranslate && keysToTranslate.length <= 0) {
+      console.log(`There are no keys to translate`);
+      dstLoc;
+    }
+    console.log(`There are ${keysToTranslate.length} keys to translate.`)
+
+    // Split the array to separate calls in case max limit of carachters (5000) is reached and execute translation
+    const requestMessges = prepareTranslationRequestMsg(keysToTranslate);
+    const promises = [];
+    requestMessges.forEach((msgBody) => {
+      promises.push(executeTranslation(lang, msgBody));
+    });
+
+    const translatedMsgs = await Promise.all(promises);
+    const translatedKeys = extranctTranslatedKeys(translatedMsgs);
+
+    // Inject translated keys into dstLoc object
+    // Reset the global rec counter
+    currentTranslationIndex = 0;
+    const result = injectTranslatedKeys(srcObj, dstLoc, translatedKeys);
+
+    return result;
+  } catch (err) {
+    console.log(`[Exception]: executeLocalizationTranslation : ${err.message}`);
+    return null;
+  }
+}
+
+const run = async () => {
+  // Load files in the localization directory
+  const locDirPath = path.join(__dirname, '../src/loc');
+  let locFiles = fs.readdirSync(locDirPath);
+  locFiles = locFiles.filter(f => f !== "mystrings.d.ts" && f != "en-us.ts");
+
+  // Load main localization file
+  const mainLoc = locHelper.getSPLocalizationFileAsJSON('en-us');
+
+  // Iterate over all supported languages and prepare translation request
+  for (const lang of languagesConfiguration.langs) {
+    console.log(`Processing ${lang}.`);
+
+    // If current loc file doesn't exist - copy the original one
+    let currentLoc = locHelper.getSPLocalizationFileAsJSON(lang);
+    if (!currentLoc) {
+      currentLoc = _.cloneDeep(mainLoc);
+    }
+
+    const translatedObj = await executeLocalizationTranslation(mainLoc, currentLoc, lang);
+    // Replace translated part in .ts file
+    if (translatedObj) {
+      locHelper.replaceTranslatedKeysInJSON(translatedObj, lang)
+    }
+
+    // Set delay to wait for Azure to execute the transation
+    console.log(`Finished processing ${lang}`);
+    console.log();
+  }
+};
+run();
+

package/scripts/export-localization.js

@@ -0,0 +1,49 @@
+/**
+ * Scripts exports english localization keys to the .csv file
+ */
+
+const path = require('path');
+const fs = require('fs');
+const ts =  require("typescript");
+require('amd-loader');
+
+const jsPlaceholder =
+`declare var define: any;
+
+define([], () => {
+  return {0};
+});`;
+
+const getSPLocalizationFileAsJSON = (locale) => {
+  const locFilePath = path.join(__dirname, `../src/loc/${locale}.ts`);
+  const tmpLocJSFilePath = path.join(__dirname, `${locale}-tmp.js`);
+
+  // Localization file doesn't exist
+  if (!fs.existsSync(locFilePath)) {
+    return null;
+  }
+
+  // Read en-us localization file and transpile if to JS
+  // Add named module to avoid amdefine excpetion
+  const enLocFileContent = fs.readFileSync(locFilePath, 'utf-8');
+  let result = ts.transpileModule(enLocFileContent, { compilerOptions: { module: ts.ModuleKind.CommonJS }});
+
+  // Create temp JS file
+  fs.writeFileSync(tmpLocJSFilePath, result.outputText);
+
+  var locResources = require(`./${locale}-tmp`);
+
+  // Remove tmp file
+  fs.unlinkSync(tmpLocJSFilePath);
+  return locResources;
+}
+
+const replaceTranslatedKeysInJSON = (translatedObj, locale) => {
+  const locFilePath = path.join(__dirname, `../src/loc/${locale}.ts`);
+  const fileContent = jsPlaceholder.replace('{0}', JSON.stringify(translatedObj, null, 2));
+
+  // Save file content
+  fs.writeFileSync(locFilePath, fileContent);
+}
+
+module.exports = { getSPLocalizationFileAsJSON , replaceTranslatedKeysInJSON }

package/scripts/sonarcloud.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+const path = require("path");
+
+const params = process.argv;
+let token = "";
+let branchName = "";
+if (params && params.length > 0) {
+  branchName = params.pop();
+  token = params.pop();
+}
+
+const package = fs.readFileSync(path.join(__dirname, "../package.json"), "UTF8");
+let sonarProps = fs.readFileSync(path.join(__dirname, "../sonar-project.properties"), "UTF8");
+if (package && sonarProps) {
+  const pkg = JSON.parse(package);
+  sonarProps += `sonar.login=${token}\n`;
+  sonarProps += `sonar.projectVersion=${pkg.version}\n`;
+  sonarProps += `sonar.branch.name=${branchName}\n`;
+  fs.writeFileSync(path.join(__dirname, "../sonar-project.properties"), sonarProps, { encoding: "UTF8" })
+}

package/scripts/sync-changelogs.js

@@ -0,0 +1,4 @@
+const fs = require('fs');
+const path = require('path');
+const changelog = fs.readFileSync(path.join(__dirname, '../CHANGELOG.md'), 'utf8');
+fs.writeFileSync(path.join(__dirname, '../../../common/docs/documentation/docs/about/release-notes.md'), changelog, 'utf-8');

package/scripts/update-package-version.js

@@ -0,0 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+const packageJson = require('../package.json');
+packageJson.version += `-beta.${process.argv[process.argv.length-1].substr(0, 7)}`;
+console.log(packageJson.version);
+fs.writeFileSync(path.join(path.resolve('.'), 'package.json'), JSON.stringify(packageJson, null, 2));

package/sharepoint/assets/ClientSideInstance.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <ClientSideComponentInstance
+        Title="testApp"
+        Location="ClientSideExtension.ApplicationCustomizer"
+        ComponentId="ca9eac70-7343-4972-88d6-672d50e9cf38"
+        Properties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
+    </ClientSideComponentInstance>
+</Elements>

package/sharepoint/assets/elements.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <CustomAction
+        Title="testApp"
+        Location="ClientSideExtension.ApplicationCustomizer"
+        ClientSideComponentId="ca9eac70-7343-4972-88d6-672d50e9cf38"
+        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
+    </CustomAction>
+</Elements>

package/typings/@ms/odsp.d.ts

@@ -0,0 +1,11 @@
+// Type definitions for Microsoft ODSP projects
+// Project: ODSP
+
+/* Global definition for UNIT_TEST builds
+   Code that is wrapped inside an if(UNIT_TEST) {...}
+   block will not be included in the final bundle when the
+   --ship flag is specified */
+declare const UNIT_TEST: boolean;
+
+/* Global defintion for SPO builds */
+declare const DATACENTER: boolean;

package/typings/tsd.d.ts

@@ -0,0 +1 @@
+/// <reference path="@ms/odsp.d.ts" />

package/.hintrc

@@ -1,15 +0,0 @@
-{
-  "extends": [
-    "development"
-  ],
-  "hints": {
-    "axe/aria": "off",
-    "no-inline-styles": "off",
-    "axe/text-alternatives": [
-      "default",
-      {
-        "frame-title": "off"
-      }
-    ]
-  }
-}

package/README.md

@@ -1,40 +0,0 @@
-# SharePoint Framework React Controls
-
-This is a open source library that shares a set of reusable React control that can be used in your SharePoint Framework solutions.
-
-> If you are looking for web part property controls, please check following repository for those - [https://github.com/pnp/sp-dev-fx-property-controls](https://github.com/pnp/sp-dev-fx-property-controls)
-
-## Get Started
-
-More information to get started can be found documentation of this repository: [documentation](https://pnp.github.io/sp-dev-fx-controls-react/).
-
-# Have issues or questions?
-
-Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.
-
-* You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/sharepoint/sp-dev-docs/issues).
-* You have issue on specific controls in this package - use [issue list in this repository](https://github.com/pnp/sp-dev-fx-controls-react/issues).
-
-## Contributing
-
-We'd love your help! If you have ideas for new features or feedback, let us know by creating an issue in the [issues list](https://github.com/pnp/sp-dev-fx-controls-react/issues). Before you submit a PR with your improvements, please review our [project guides](https://pnp.github.io/sp-dev-fx-controls-react/guides).
-
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
-Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
-the rights to use your contribution. For details, visit https://cla.microsoft.com.
-
-When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
-a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
-provided by the bot. You will only need to do this once across all repos using our CLA.
-
-## Code of Conduct
-
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
-For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
-
-## "Sharing is Caring"
-
-## Disclaimer
-
-**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**