Skip to content

Add translation plugin #5385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

AlexMayants
Copy link
Contributor

Description

Inject translate function into all components that require localization.

Built-in support for English (default) and Russian.

Support for custom localization via translations config option.

Add lint rule to avoid naked (untranslated) strings in react components.

Added configuration options: translations, translationLanguage, defaultTranslationLanguage.

Motivation and Context

Fixes #2488

How Has This Been Tested?

All existing tests are in the green.

Screenshots (if appropriate):

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

Inject `translation` function into all components that require
localization. Built-in support for English (default) and Russian.
Support for custom localization via `translations` config option. Add
lint rule to avoid naked strings in react components.

Should fix swagger-api#2488
@e455a81e-d3ba-41a2-bc6d-7aafb1d9a5cd
Copy link

e455a81e-d3ba-41a2-bc6d-7aafb1d9a5cd commented Aug 27, 2019

@shockey This seems to be exactly what I need for my application. In a globalized age we can not expect every user to understand english. Would it be possible to get this merged soon?

@martinszy
Copy link

Hello, any chance to see this merged?

@mmodolo
Copy link

mmodolo commented Apr 23, 2020

Hi, when can we expect to see this merge?

@tim-lai
Copy link
Contributor

tim-lai commented Jun 12, 2020

@AlexMayants Thanks for the PR! It is very comprehensive. However, such a translation plugin should be an independent and separately maintained project from the SwaggerUI.

@tim-lai tim-lai closed this Jun 12, 2020
@AlexMayants
Copy link
Contributor Author

@tim-lai I see your point. However, I'm not sure how to implement such a plugin without recreating a large percentage of SwaggerUI components. It seems to me that SwaggerUI should provide at least some way to alter localizable values: via config, maybe. Could you suggest a way to approach this?

@e455a81e-d3ba-41a2-bc6d-7aafb1d9a5cd

Really disappointing to see this getting closed. Not everyone speaks english.

@fenomeno83
Copy link

fenomeno83 commented Jul 13, 2020

Hi.
I've created a system to "translate" swagger ui 3.x react based.

It is not more elegant, but I think is fastest way to do this.

The concept is:
1-when sections where there is a label in English are loaded, we want replace dom html with translation

To do this, we need to include:
1-jquery 3.3.1
2-jquery initialize https://github.com/pie6k/jquery.initialize
3-a translation json (example https://drive.google.com/file/d/1YEtbSEDwlnDwrcjewS-tEKr6bPJ0SRb2/view?usp=sharing )
In this italian example we try to localize some "name" and "description" labels:

var resource_globalization = {
"Name": "Nome",
"Description": "Descrizione"
};

4-translate.js that makes translation (example https://drive.google.com/file/d/1FkpAXV1oOpA4-VxrrHBABHBxkZTveTkI/view?usp=sharing ...we need to add all the other translation code)

Jquery initialize keeps listening when a specific element is load
So we need to found all elements/sections to translate and replace html

Here my actual code of translate.js like in downloaded file

$(document).ready(function () {

	$.initialize('.opblock-title', function() {		
		$(this).find('span').html(resource_globalization["Description"]);
     });
	 
	 $.initialize('table.parameters', function() {		
	 
		 $(this).find('th.parameters-col_name').html(resource_globalization["Name"]);
		 $(this).find('th.parameters-col_description').html(resource_globalization["Description"]);
     });
	 		
});

In this case we listen for example when .opblock-title is loaded and find span to replace text using json file.

I need help to find all section to translate (we can use old swagger-ui 2.x translation files to have example of section to translate?) and than I can use the same method used in the translate.js example to complete this file

PS: if you use last swashbucke .net core, you need to:
1-create a wwwroot folder (if doesn't exists) in the root api folder with the 4 files
2-add static filesupport in startup.cs

 app.UseStaticFiles();

3-inject js files in swaggerui configuration in startup.cs

app.UseSwaggerUI(c =>
        {
            
            c.SwaggerEndpoint("/swagger/v1/swagger.json", "Public API");

            c.HeadContent = "<script src='./jquery-3.3.1.min.js'></script><script src='./jquery.initialize.min.js'></script><script src='./it.js'></script><script src='./translate.js'></script>";

            c.RoutePrefix = string.Empty;
        });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[improvement] Translation: automatic and manual language selection
6 participants