Merge pull request #7166 from nixocio/ui_update_translation_process

Add section about issues to be translated Reviewed-by: Jake McDermott <yo@jakemcdermott.me> https://github.com/jakemcdermott
2026-01-12 02:19:58 -03:30 · 2020-06-02 15:42:26 +00:00 · 2020-06-02 15:42:26 +00:00 · 9d3b19341d
commit 9d3b19341d
parent 87607dd997 8527991cb2
1 changed files with 49 additions and 34 deletions
--- a/awx/ui_next/CONTRIBUTING.md
+++ b/awx/ui_next/CONTRIBUTING.md
@ -6,24 +6,33 @@ Have questions about this document or anything not covered here? Feel free to re

 ## Table of contents

-* [Things to know prior to submitting code](#things-to-know-prior-to-submitting-code)
-* [Setting up your development environment](#setting-up-your-development-environment)
-  * [Prerequisites](#prerequisites)
-    * [Node and npm](#node-and-npm)
-* [Build the user interface](#build-the-user-interface)
-* [Accessing the AWX web interface](#accessing-the-awx-web-interface)
-* [AWX REST API Interaction](#awx-rest-api-interaction)
-* [Handling API Errors](#handling-api-errors)
-* [Forms](#forms)
-* [Working with React](#working-with-react)
-  * [App structure](#app-structure)
-  * [Naming files](#naming-files)
-  * [Class constructors vs Class properties](#class-constructors-vs-class-properties)
-  * [Binding](#binding)
-  * [Typechecking with PropTypes](#typechecking-with-proptypes)
-  * [Naming Functions](#naming-functions)
-  * [Default State Initialization](#default-state-initialization)
-* [Internationalization](#internationalization)
+- [Ansible AWX UI With PatternFly](#ansible-awx-ui-with-patternfly)
+  - [Table of contents](#table-of-contents)
+  - [Things to know prior to submitting code](#things-to-know-prior-to-submitting-code)
+  - [Setting up your development environment](#setting-up-your-development-environment)
+    - [Prerequisites](#prerequisites)
+      - [Node and npm](#node-and-npm)
+      - [Build the User Interface](#build-the-user-interface)
+  - [Accessing the AWX web interface](#accessing-the-awx-web-interface)
+  - [AWX REST API Interaction](#awx-rest-api-interaction)
+  - [Handling API Errors](#handling-api-errors)
+  - [Forms](#forms)
+  - [Working with React](#working-with-react)
+    - [App structure](#app-structure)
+    - [Patterns](#patterns)
+      - [Bootstrapping the application (root src/ files)](#bootstrapping-the-application-root-src-files)
+    - [Naming files](#naming-files)
+      - [Naming components that use the context api](#naming-components-that-use-the-context-api)
+    - [Class constructors vs Class properties](#class-constructors-vs-class-properties)
+    - [Binding](#binding)
+    - [Typechecking with PropTypes](#typechecking-with-proptypes)
+    - [Naming Functions](#naming-functions)
+    - [Default State Initialization](#default-state-initialization)
+    - [Testing components that use contexts](#testing-components-that-use-contexts)
+  - [Internationalization](#internationalization)
+    - [Marking strings for translation and replacement in the UI](#marking-strings-for-translation-and-replacement-in-the-ui)
+    - [Setting up .po files to give to translation team](#setting-up-po-files-to-give-to-translation-team)
+    - [Marking an issue to be translated](#marking-an-issue-to-be-translated)


 ## Things to know prior to submitting code
@ -35,7 +44,7 @@ Have questions about this document or anything not covered here? Feel free to re
  - functions should adopt camelCase
  - constructors/classes should adopt PascalCase
  - constants to be exported should adopt UPPERCASE
- For strings, we adopt the `sentence capitalization` since it is a (patternfly style guide)[https://www.patternfly.org/v4/design-guidelines/content/grammar-and-terminology#capitalization].
+- For strings, we adopt the `sentence capitalization` since it is a [Patternfly style guide](https://www.patternfly.org/v4/design-guidelines/content/grammar-and-terminology#capitalization).

 ## Setting up your development environment

@ -237,21 +246,21 @@ About.defaultProps = {
 ### Naming Functions
 Here are the guidelines for how to name functions.

-| Naming Convention   |      Description   |
-|----------|-------------|
-|`handle<x>`| Use for methods that process events |
-|`on<x>`| Use for component prop names |
-|`toggle<x>`| Use for methods that flip one value to the opposite value |
-|`show<x>`| Use for methods that always set a value to show or add an element |
-|`hide<x>`| Use for methods that always set a value to hide or remove an element |
-|`create<x>`| Use for methods that make API `POST` requests |
-|`read<x>`| Use for methods that make API `GET` requests |
-|`update<x>`| Use for methods that make API `PATCH` requests |
-|`destroy<x>`| Use for methods that make API `DESTROY` requests |
-|`replace<x>`| Use for methods that make API `PUT` requests |
-|`disassociate<x>`| Use for methods that pass `{ disassociate: true }` as a data param to an endpoint |
-|`associate<x>`| Use for methods that pass a resource id as a data param to an endpoint |
-|`can<x>`| Use for props dealing with RBAC to denote whether a user has access to something |
+| Naming Convention | Description                                                                       |
+| ----------------- | --------------------------------------------------------------------------------- |
+| `handle<x>`       | Use for methods that process events                                               |
+| `on<x>`           | Use for component prop names                                                      |
+| `toggle<x>`       | Use for methods that flip one value to the opposite value                         |
+| `show<x>`         | Use for methods that always set a value to show or add an element                 |
+| `hide<x>`         | Use for methods that always set a value to hide or remove an element              |
+| `create<x>`       | Use for methods that make API `POST` requests                                     |
+| `read<x>`         | Use for methods that make API `GET` requests                                      |
+| `update<x>`       | Use for methods that make API `PATCH` requests                                    |
+| `destroy<x>`      | Use for methods that make API `DESTROY` requests                                  |
+| `replace<x>`      | Use for methods that make API `PUT` requests                                      |
+| `disassociate<x>` | Use for methods that pass `{ disassociate: true }` as a data param to an endpoint |
+| `associate<x>`    | Use for methods that pass a resource id as a data param to an endpoint            |
+| `can<x>`          | Use for props dealing with RBAC to denote whether a user has access to something  |

 ### Default State Initialization
 When declaring empty initial states, prefer the following instead of leaving them undefined:
@ -320,3 +329,9 @@ You can learn more about the ways lingui and its React helpers at [this link](ht
 3) Open up the .po file for the language you want to test and add some translations.  In production we would pass this .po file off to the translation team.
 4) Once you've edited your .po file (or we've gotten a .po file back from the translation team) run `npm run compile-strings`.  This command takes the .po files and turns them into a minified JSON object and can be seen in the `messages.js` file in each locale directory.  These files get loaded at the App root level (see: App.jsx).
 5) Change the language in your browser and reload the page.  You should see your specified translations in place of English strings.
+
+### Marking an issue to be translated
+
+1) Issues marked with `component:I10n` should not be closed after the issue was fixed.
+2) Remove the label `state:needs_devel`.
+3) Add the label `state:pending_translations`. At this point, the translations will be batch translated by a maintainer, creating relevant entries in the PO files. Then after those translations have been merged, the issue can be closed.