First i18next translations (#615)

* filter some non-readable strings from lint

* first translations

* react i18next hook usage

* react HOC i18next usage

* fixed translation extraction

* fixed ci

.nvmrc

@@ -0,0 +1 @@
+13.2.0

.travis.yml

@@ -80,14 +80,26 @@ jobs:
       # We can't use env(CROSS_BUILD) here because of some bug in travis - there is raw, not evaluated script body in env(CROSS_BUILD)
       if: type = pull_request
     - name: "Frontend tests"
-      before_script: if [[ `npm -v | sed 's/\..*//'` < 6 ]]; then npm i -g npm; fi
+      before_script:
+        - nvm install $(cat .nvmrc)
+        - npm install -g npm
+        - node -v
+        - npm -v
       script: ./ciFrontendTest.sh
     - stage: releases
       name: "Release sonatype packages"
-      before_script: if [[ `npm -v | sed 's/\..*//'` < 6 ]]; then npm i -g npm; fi
+      before_script:
+        - nvm install $(cat .nvmrc)
+        - npm install -g npm
+        - node -v
+        - npm -v
       script: ./ciPublish.sh "${BUILD_VERSION}-SNAPSHOT" ${NEXUS_PASSWORD} ${NEXUS_URL} ${NEXUS_USER}
     - name: "Push Docker Image"
-      before_script: if [[ `npm -v | sed 's/\..*//'` < 6 ]]; then npm i -g npm; fi
+      before_script:
+        - nvm install $(cat .nvmrc)
+        - npm install -g npm
+        - node -v
+        - npm -v
       script:
         - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin;
         - ./ciBuildDocker.sh --version=${BUILD_VERSION} --docker-publish-type=publishLocal --add-dev-model=$ADD_DEV_MODEL

ui/client/.babelrc

@@ -7,17 +7,6 @@
   "env": {
     "development": {
       "plugins": [
-        [
-          "i18next-extract",
-          {
-            "outputPath": "translations/{{locale}}/{{ns}}.json",
-            "keyAsDefaultValue": true,
-            "locales": [
-              "en",
-              "pl"
-            ]
-          }
-        ],
         "react-hot-loader/babel"
       ]
     }
@@ -49,6 +38,16 @@
     ],
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    "@babel/plugin-proposal-function-bind",
+    [
+      "i18next-extract",
+      {
+        "outputPath": "./translations/{{locale}}/{{ns}}.json",
+        "locales": [
+          "en"
+        ],
+        "defaultNS": "main"
+      }
+    ]
   ]
 }

ui/client/.eslintrc

@@ -53,20 +53,21 @@
     "no-template-curly-in-string": "error",
     "quote-props": ["error", "as-needed"],
     "object-curly-spacing": ["error", "never"],
-    "i18next/no-literal-string": [0, {
+    "i18next/no-literal-string": ["error", {
       "ignore": [
         "-icon", "glyphicon",
         ".svg", ".jpg", ".jpeg", ".png"
       ],
       "ignoreCallee": [
         "t", "withTranslation", "useTranslation",
         "reportEvent", "headerStyles",
-        "_.get",
-        "api.get",
-        "describe", "it", "expect", "toBe", "toEqual"
+        "_.get", "_.pick", "_.has",
+        "api.get", "api.post",
+        "describe"
       ],
       "ignoreAttribute": [
-        "svgFile", "bounds"
+        "svgFile", "bounds", "handle", "column", "glyph", "value",
+        "classNames", "className", "valueClassName", "rowClassName", "fieldType", "classNamePrefix"
       ]
     }]
   },
@@ -78,7 +79,10 @@
         "plugin:import/typescript",
         "plugin:@typescript-eslint/recommended",
         "plugin:react/recommended"
-      ]
+      ],
+       "rules": {
+        "@typescript-eslint/explicit-function-return-type": 0
+      }
     }
   ]
 }

ui/client/.gitignore

@@ -11,3 +11,4 @@ npm-debug.log
 flow-typed/
 
 dist/
+translations/

ui/client/actions/ActionsUtils.ts

@@ -1,17 +1,15 @@
 import {bindActionCreators, Dispatch} from "redux"
-import {$TodoType} from "./migrationTypes"
 import * as EspActions from "./nk"
 import * as NotificationActions from "./notificationActions"
 import {Action} from "./reduxTypes"
 import * as UndoRedoActions from "./undoRedoActions"
-import assignUser from "./nk/assignUser"
 
-export default {
-  mapDispatchWithEspActions(dispatch: Dispatch<Action>): $TodoType {
-    return {
-      actions: bindActionCreators({...EspActions, assignUser}, dispatch),
-      undoRedoActions: bindActionCreators(UndoRedoActions, dispatch),
-      notificationActions: bindActionCreators(NotificationActions, dispatch),
-    }
-  },
+export const mapDispatchWithEspActions = function (dispatch: Dispatch<Action>) {
+  return {
+    actions: bindActionCreators(EspActions, dispatch),
+    undoRedoActions: bindActionCreators(UndoRedoActions, dispatch),
+    notificationActions: bindActionCreators(NotificationActions, dispatch),
+  }
 }
+
+export default {mapDispatchWithEspActions}

ui/client/actions/nk/displayProcessActivity.ts

@@ -1,11 +1,12 @@
 import HttpService from "../../http/HttpService"
+import {Attachment} from "../../reducers/processActivity"
 import {$TodoType} from "../migrationTypes"
 import {ThunkAction} from "../reduxTypes"
 
 export type DisplayProcessActivityAction = {
   type: "DISPLAY_PROCESS_ACTIVITY";
   comments: $TodoType[];
-  attachments: $TodoType[];
+  attachments: Attachment[];
 }
 
 export function displayProcessActivity(processId: string): ThunkAction {

ui/client/actions/nk/models.ts

@@ -13,3 +13,4 @@ export type NodeType = {
 };
 
 export type Process = $TodoType
+export type ProcessId = string

ui/client/analytics/AnalyticsEngine.js

@@ -1,5 +1,6 @@
 export default class AnalyticsEngine {
   sendEvent = (event) => {
+    // eslint-disable-next-line i18next/no-literal-string
     throw new Error("You have to implement method send event!")
   }
 }

ui/client/analytics/TrackingEvents.js

@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
 export const events = {
   categories: {
     rightPanel: "right_panel",

ui/client/common/DialogMessages.ts

@@ -0,0 +1,40 @@
+import i18next from "i18next"
+import {ProcessId} from "../actions/nk/models"
+
+export const unsavedProcessChanges = () => {
+  return i18next.t(
+      "dialogMessages.unsavedProcessChanges",
+      "There are some unsaved process changes. Do you want to discard unsaved changes?",
+  )
+}
+
+export const deploy = (processId: ProcessId) => {
+  return i18next.t("dialogMessages.deploy", "Are you sure you want to deploy {{processId}}?", {processId})
+}
+
+export const migrate = (processId, environmentId) => {
+  return i18next.t(
+      "dialogMessages.migrate",
+      "Are you sure you want to migrate {{processId}} to {{environmentId}}?",
+      {processId, environmentId},
+  )
+}
+
+export const stop = (processId: ProcessId) => {
+  return i18next.t("dialogMessages.stop", "Are you sure you want to stop {{processId}}?", {processId})
+}
+
+export const archiveProcess = (processId: ProcessId) => {
+  return i18next.t("dialogMessages.archiveProcess", "Are you sure you want to archive {{processId}}?", {processId})
+}
+
+export const deleteComment = () => {
+  return i18next.t("dialogMessages.deleteComment", "Are you sure you want to delete comment?")
+}
+
+export const cantArchiveRunningProcess = () => {
+  return i18next.t(
+      "dialogMessages.cantArchiveRunningProcess",
+      "You can't archive running process! Stop it first and then click 'archive' button again.",
+  )
+}

ui/client/common/EspModalStyles.js

@@ -1,3 +1,5 @@
+/* eslint-disable i18next/no-literal-string */
+
 //fixme remove
 class EspModalStyles {
 

ui/client/common/ProcessUtils.js

@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
 import _ from "lodash"
 import NodeUtils from "../components/graph/NodeUtils"
 

ui/client/common/SystemUtils.js

@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
 import {v4 as uuid4} from "uuid"
 import api from "../api"
 

ui/client/common/TestResultUtils.js

@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
 import _ from "lodash"
 
 //TODO move it to backend

ui/client/common/Validators.ts

@@ -1,3 +1,4 @@
+import i18next from "i18next"
 import _ from "lodash"
 
 export type Validator = {
@@ -12,8 +13,8 @@ type ErrorType = {
   description: string;
 }
 
-export const canNotBeEmpty = "This field cannot be empty"
-export const duplicateValue = "This value is already taken"
+export const canNotBeEmpty = i18next.t("validation.canNotBeEmpty","This field cannot be empty")
+export const duplicateValue = i18next.t("validation.duplicateValue","This value is already taken")
 
 export const notEmptyValidator: Validator = {
   isValid: value => !_.isEmpty(value),
@@ -25,13 +26,13 @@ export function errorValidator(errors: Array<ErrorType>, fieldName: string): Val
   const error = errors.find(error => error.fieldName === fieldName)
   return error ?
     {
-      isValid: _ => false,
+      isValid: () => false,
       message: error.message,
       description: error.description,
     }
     :
     {
-      isValid: _ => true,
+      isValid: () => true,
       message: null,
       description: null,
     }

ui/client/common/VisualizationUrl.js

@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
 import _ from "lodash"
 import Moment from "moment"
 import * as  queryString from "query-string"

ui/client/components/CommentInput.tsx

@@ -0,0 +1,20 @@
+import React, {ChangeEventHandler, ReactNode} from "react"
+import {useTranslation} from "react-i18next"
+
+type Props = {
+  onChange: ChangeEventHandler<HTMLTextAreaElement>;
+  value: string | string[] | number;
+}
+
+const CommentInput = (props: Props): ReactNode => {
+  const {t} = useTranslation()
+  return (
+      <textarea
+          value={props.value || ""}
+          placeholder={t("commentInput.placeholder", "Write a comment...")}
+          onChange={props.onChange}
+      />
+  )
+}
+
+export default CommentInput

ui/client/components/Process/ListState.js

@@ -43,6 +43,7 @@ export default class ListState extends React.Component {
     const {process, state, isStateLoaded} = this.props
     const icon = this.getIcon(process, state, isStateLoaded)
     const tooltip = this.getTooltip(process, state, isStateLoaded)
+    // eslint-disable-next-line i18next/no-literal-string
     const iconClass = `state-list${isStateLoaded === false ? " state-pending" : ""}`
     const transitionKey = `${process.id}-${icon}`