Adding i18n support to the frontend (#194)

* Adding frontend translations

* More translated blocks

* Translations done and added the spanish translations

* Removing unneeded dependency

* Fixing linter errors

* Translating also the suggested items in the copilot

* Reviewing spanish ortography

* Adding new translations

* Simplify translations initialization

* Using random generated ids for translations

* Making the formatted message oneliners whenever makes sense

* Some extra code styling changes

* Fixing problem of messages without id

* Adding the new translations

* Polishing spanish translation

Makefile

@@ -234,13 +234,7 @@ endif
 ## Extract strings for translation from the source code.
 .PHONY: i18n-extract
 i18n-extract:
-ifneq ($(HAS_WEBAPP),)
-ifeq ($(HAS_MM_UTILITIES),)
-	@echo "You must clone github.com/mattermost/mattermost-utilities repo in .. to use this command"
-else
-	cd $(MM_UTILITIES_DIR) && npm install && npm run babel && node mmjstool/build/index.js i18n extract-webapp --webapp-dir $(PWD)/webapp
-endif
-endif
+	cd webapp && $(NPM) run i18n-extract -- --out-file src/i18n/en.json --id-interpolation-pattern '[sha512:contenthash:base64:8]' --format simple src/index.tsx src/components/**/*.{ts,tsx}
 
 ## Install NPM dependencies for e2e tests
 e2e/node_modules: e2e/package.json

webapp/babel.config.js

@@ -32,6 +32,13 @@ const config = {
                 fileName: false,
             },
         ],
+        [
+            'formatjs',
+            {
+                idInterpolationPattern: '[sha512:contenthash:base64:8]',
+                ast: true,
+            },
+        ],
     ],
 };