Merge pull request #7041 from gconsidine/ui/add-string-override-support

Ui/add string override support

awx/ui/client/assets/default.strings.json

@@ -0,0 +1,3 @@
+{
+
+}

awx/ui/client/features/credentials/add-credentials.controller.js

@@ -7,9 +7,8 @@ function AddCredentialsController (models, $state, strings) {
     let organization = models.organization;
 
     vm.mode = 'add';
-    vm.strings = strings.credentials;
+    vm.strings = strings;
-
+    vm.panelTitle = strings.get('add.PANEL_TITLE');
-    vm.panelTitle = vm.strings[vm.mode].PANEL_TITLE;
 
     vm.tab = {
         details: { _active: true },
@@ -23,12 +22,12 @@ function AddCredentialsController (models, $state, strings) {
     vm.form.organization._resource = 'organization';
     vm.form.organization._route = 'credentials.add.organization';
     vm.form.organization._model = organization;
-    vm.form.organization._placeholder = vm.strings.inputs.ORGANIZATION_PLACEHOLDER;
+    vm.form.organization._placeholder = strings.get('inputs.ORGANIZATION_PLACEHOLDER');
     
     vm.form.credential_type._resource = 'credential_type';
     vm.form.credential_type._route = 'credentials.add.credentialType';
     vm.form.credential_type._model = credentialType;
-    vm.form.credential_type._placeholder = vm.strings.inputs.CREDENTIAL_TYPE_PLACEHOLDER;
+    vm.form.credential_type._placeholder = strings.get('inputs.CREDENTIAL_TYPE_PLACEHOLDER');
 
     vm.form.inputs = {
         _get: id => {

awx/ui/client/features/credentials/add-edit-credentials.view.html

@@ -2,8 +2,8 @@
     <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>
 
     <at-tab-group>
-        <at-tab state="vm.tab.details">{{ vm.strings.tab.DETAILS }}</at-tab>
+        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
-        <at-tab state="vm.tab.permissions">{{ vm.strings.tab.PERMISSIONS }}</at-tab>
+        <at-tab state="vm.tab.permissions">{{:: vm.strings.get('tab.PERMISSIONS') }}</at-tab>
     </at-tab-group>
 
     <at-panel-body>
@@ -17,7 +17,7 @@
             <at-input-lookup col="4" tab="4" state="vm.form.credential_type"></at-input-lookup>
 
             <at-input-group col="4" tab="5" state="vm.form.inputs">
-                {{ vm.strings.inputs.GROUP_TITLE }}
+                {{:: vm.strings.get('inputs.GROUP_TITLE') }}
             </at-input-group>
 
             <at-action-group col="12" pos="right">
@@ -29,11 +29,11 @@
 </at-panel>
 
 <at-panel ng-if="$state.current.name.includes('permissions')">
-    <at-panel-heading>{{ vm.strings.permissions.TITLE }}</at-panel-heading>
+    <at-panel-heading>{{:: vm.strings.get('permissions.TITLE') }}</at-panel-heading>
 
     <at-tab-group>
-        <at-tab state="vm.tab.details">{{ vm.strings.tab.DETAILS }}</at-tab>
+        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
-        <at-tab state="vm.tab.permissions">{{ vm.strings.tab.PERMISSIONS }}</at-tab>
+        <at-tab state="vm.tab.permissions">{{:: vm.stringss.get('tab.PERMISSIONS') }}</at-tab>
     </at-tab-group>
 
     <at-panel-body>

awx/ui/client/features/credentials/edit-credentials.controller.js

@@ -8,7 +8,7 @@ function EditCredentialsController (models, $state, $scope, strings) {
     let selectedCredentialType = models.selectedCredentialType;
 
     vm.mode = 'edit';
-    vm.strings = strings.credentials;
+    vm.strings = strings;
     vm.panelTitle = credential.get('name');
 
     vm.tab = {
@@ -45,14 +45,14 @@ function EditCredentialsController (models, $state, $scope, strings) {
     vm.form.organization._route = 'credentials.edit.organization';
     vm.form.organization._value = credential.get('summary_fields.organization.id');
     vm.form.organization._displayValue = credential.get('summary_fields.organization.name');
-    vm.form.organization._placeholder = vm.strings.inputs.ORGANIZATION_PLACEHOLDER;
+    vm.form.organization._placeholder = strings.get('inputs.ORGANIZATION_PLACEHOLDER');
 
     vm.form.credential_type._resource = 'credential_type';
     vm.form.credential_type._model = credentialType;
     vm.form.credential_type._route = 'credentials.edit.credentialType';
     vm.form.credential_type._value = selectedCredentialType.get('id');
     vm.form.credential_type._displayValue = selectedCredentialType.get('name');
-    vm.form.credential_type._placeholder = vm.strings.inputs.CREDENTIAL_TYPE_PLACEHOLDER;
+    vm.form.credential_type._placeholder = strings.get('inputs.CREDENTIAL_TYPE_PLACEHOLDER');
  
     vm.form.inputs = {
         _get (id) {

awx/ui/client/features/credentials/index.js

@@ -50,13 +50,11 @@ function CredentialsConfig ($stateExtenderProvider, legacyProvider, pathProvider
     let legacy = legacyProvider.$get();
     let strings = stringProvider.$get();
 
-    strings = strings.credentials.state;
-
     stateExtender.addState({
         name: 'credentials.add',
         route: '/add',
         ncyBreadcrumb: {
-            label: strings.ADD_BREADCRUMB_LABEL
+            label: strings.get('state.ADD_BREADCRUMB_LABEL')
         },
         views: {
             'add@credentials': {
@@ -74,7 +72,7 @@ function CredentialsConfig ($stateExtenderProvider, legacyProvider, pathProvider
         name: 'credentials.edit',
         route: '/:credential_id',
         ncyBreadcrumb: {
-            label: strings.EDIT_BREADCRUMB_LABEL
+            label: strings.get('state.EDIT_BREADCRUMB_LABEL')
         },
         views: {
             'edit@credentials': {

awx/ui/client/lib/components/form/action.directive.js

@@ -36,14 +36,14 @@ function atFormActionController ($state, strings) {
     };
 
     vm.setCancelDefaults = () => {
-        scope.text = strings.CANCEL;
+        scope.text = strings.get('CANCEL'),
         scope.fill = 'Hollow';
         scope.color = 'default';
         scope.action = () => $state.go(scope.to || '^');
     };
 
     vm.setSaveDefaults = () => {
-        scope.text = strings.SAVE;
+        scope.text = strings.get('SAVE'),
         scope.fill = '';
         scope.color = 'success';
         scope.action = () => form.submit();

awx/ui/client/lib/components/form/form.directive.js

@@ -15,8 +15,6 @@ function AtFormController (eventService, strings) {
     let modal;
     let form;
 
-    strings = strings.components.forms;
-   
     vm.components = [];
     vm.state = {
         isValid: false,
@@ -101,8 +99,8 @@ function AtFormController (eventService, strings) {
 
         if (!handled) {
             let message;
-            let title = strings.SUBMISSION_ERROR_TITLE;
+            let title = strings.get('form.SUBMISSION_ERROR_TITLE');
-            let preface = strings.SUBMISSION_ERROR_PREFACE;
+            let preface = strings.get('form.SUBMISSION_ERROR_PREFACE');
 
             if (typeof err.data === 'object') {
                 message = JSON.stringify(err.data);  
@@ -115,8 +113,8 @@ function AtFormController (eventService, strings) {
     };
 
     vm.handleUnexpectedError = err => {
-        let title = strings.SUBMISSION_ERROR_TITLE;
+        let title = strings.get('form.SUBMISSION_ERROR_TITLE');
-        let message = strings.SUBMISSION_ERROR_MESSAGE;
+        let message = strings.get('form.SUBMISSION_ERROR_MESSAGE');
 
         modal.show(title, message);
 

awx/ui/client/lib/components/input/base.controller.js

@@ -51,13 +51,13 @@ function BaseInputController (strings) {
 
             if (scope.state._required && !scope.state._value && !scope.state._displayValue) {
                 isValid = false;    
-                message = vm.strings.components.message.REQUIRED_INPUT_MISSING;
+                message = vm.strings.get('message.REQUIRED_INPUT_MISSING');
             } else if (scope.state._validate) {
                 let result = scope.state._validate(scope.state._value);
 
                 if (!result.isValid) {
                     isValid = false;
-                    message = result.message || vm.strings.components.message.INVALID_INPUT;
+                    message = result.message || vm.strings.get('message.INVALID_INPUT');
                 }
             }
 
@@ -83,14 +83,14 @@ function BaseInputController (strings) {
             scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
 
             if (!scope.state._isBeingReplaced) {
-                scope.state._buttonText = vm.strings.components.REPLACE;
+                scope.state._buttonText = vm.strings.get('REPLACE');
                 scope.state._disabled = true;
                 scope.state._enableToggle = true;
                 scope.state._value = scope.state._preEditValue;
                 scope.state._activeModel = '_displayValue';
-                scope.state._placeholder = vm.strings.components.ENCRYPTED;
+                scope.state._placeholder = vm.strings.get('ENCRYPTED');
             } else {
-                scope.state._buttonText = vm.strings.components.REVERT;
+                scope.state._buttonText = vm.strings.get('REVERT');
                 scope.state._disabled = false;
                 scope.state._enableToggle = false;
                 scope.state._activeModel = '_value';

awx/ui/client/lib/components/input/checkbox.directive.js

@@ -15,7 +15,7 @@ function AtInputCheckboxController (baseInputController) {
     vm.init = (scope, element, form) => {
         baseInputController.call(vm, 'input', scope, element, form);
         scope.label = scope.state.label;
-        scope.state.label = vm.strings.components.OPTIONS;
+        scope.state.label = vm.strings.get('OPTIONS');
 
         vm.check();
     };

awx/ui/client/lib/components/input/group.directive.js

@@ -101,7 +101,7 @@ function AtInputGroupController ($scope, $compile) {
             config._data = input.choices;
             config._exp = 'index as choice for (index, choice) in state._data';
         } else {
-            let preface = vm.strings.components.UNSUPPORTED_ERROR_PREFACE;
+            let preface = vm.strings.get('group.UNSUPPORTED_ERROR_PREFACE');
             throw new Error(`${preface}: ${input.type}`)
         }
 

awx/ui/client/lib/components/input/label.partial.html

@@ -8,7 +8,7 @@
             <input type="checkbox" 
                    ng-model="state._promptOnLaunch"
                    ng-change="vm.togglePromptOnLaunch()" />
-            <p>{{ vm.strings.components.label.PROMPT_ON_LAUNCH }}</p>
+            <p>{{:: vm.strings.get('label.PROMPT_ON_LAUNCH') }}</p>
         </label>
     </div>
 </label>

awx/ui/client/lib/components/input/lookup.directive.js

@@ -68,7 +68,7 @@ function AtInputLookupController (baseInputController, $state, $stateParams) {
 
         return {
             isValid: false,
-            message: vm.strings.components.lookup.NOT_FOUND
+            message: vm.strings.get('lookup.NOT_FOUND')
         };
     };
 }

awx/ui/client/lib/components/input/secret.directive.js

@@ -20,13 +20,13 @@ function AtInputSecretController (baseInputController) {
         scope = _scope_;
 
         if (!scope.state._value || scope.state._promptOnLaunch) {
-            scope.state._buttonText = vm.strings.components.SHOW;
+            scope.state._buttonText = vm.strings.get('SHOW');
             scope.type = 'password';
 
             vm.toggle = vm.toggleShowHide;
         } else {
-            scope.state._buttonText = vm.strings.components.REPLACE;
+            scope.state._buttonText = vm.strings.get('REPLACE');
-            scope.state._placeholder = vm.strings.components.ENCRYPTED;
+            scope.state._placeholder = vm.strings.get('ENCRYPTED');
             vm.toggle = vm.toggleRevertReplace;
         }
 
@@ -36,10 +36,10 @@ function AtInputSecretController (baseInputController) {
     vm.toggleShowHide = () => {
         if (scope.type === 'password') {
             scope.type = 'text';
-            scope.state._buttonText = vm.strings.components.HIDE;
+            scope.state._buttonText = vm.strings.get('HIDE');
         } else {
             scope.type = 'password';
-            scope.state._buttonText = vm.strings.components.SHOW;
+            scope.state._buttonText = vm.strings.get('SHOW');
         }
     };
 }

awx/ui/client/lib/components/input/select.directive.js

@@ -27,7 +27,7 @@ function AtInputSelectController (baseInputController, eventService) {
 
         if (!scope.state._data || scope.state._data.length === 0) {
             scope.state._disabled = true;
-            scope.state._placeholder = vm.strings.components.EMPTY_PLACEHOLDER;
+            scope.state._placeholder = vm.strings.get('select.EMPTY_PLACEHOLDER');
         }
 
         vm.setListeners();
@@ -65,7 +65,7 @@ function AtInputSelectController (baseInputController, eventService) {
         } else if (scope.state._format === 'grouped-object') {
             scope.displayModel = scope.state._value[scope.state._display];
         } else {
-            throw new Error(vm.strings.components.UNSUPPORTED_TYPE_ERROR);
+            throw new Error(vm.strings.get('select.UNSUPPORTED_TYPE_ERROR'));
         }
     };
 }

awx/ui/client/lib/components/input/textarea-secret.directive.js

@@ -26,13 +26,13 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
         if (scope.state.format === 'ssh_private_key') {
             scope.ssh = true;
-            scope.state._hint = scope.state._hint || vm.strings.components.textarea.SSH_KEY_HINT;
+            scope.state._hint = scope.state._hint || vm.strings.get('textarea.SSH_KEY_HINT');
             input = element.find('input')[0];
         }
 
         if (scope.state._value) {
-            scope.state._buttonText = vm.strings.components.REPLACE;
+            scope.state._buttonText = vm.strings.get('REPLACE');
-            scope.state._placeholder = vm.strings.components.ENCRYPTED;
+            scope.state._placeholder = vm.strings.get('ENCRYPTED');
         } else {
             if (scope.state.format === 'ssh_private_key') {
                 vm.listeners = vm.setFileListeners(textarea, input);
@@ -52,7 +52,7 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
             vm.listeners = vm.setFileListeners(textarea, input);
         } else {
             scope.state._displayHint = false;
-            scope.state._placeholder = vm.strings.components.ENCRYPTED;
+            scope.state._placeholder = vm.strings.get('ENCRYPTED');
             eventService.remove(vm.listeners);
         }
     };

awx/ui/client/lib/components/modal/modal.partial.html

@@ -23,7 +23,7 @@
                 <div class="modal-footer">
                     <button type="button" class="btn at-ButtonHollow--default"
                             ng-click="vm.hide()">
-                        {{ vm.strings.OK }}
+                        {{:: vm.strings.get('OK') }}
                     </button>
                 </div>
             </div>

awx/ui/client/lib/components/truncate/truncate.directive.js

@@ -22,7 +22,7 @@ function AtTruncateController (strings) {
 
     vm.tooltip = {
         popover: {
-            text: vm.strings.components.truncate.DEFAULT,
+            text: vm.strings.get('truncate.DEFAULT'),
             on: 'mouseover',
             position: 'top',
             icon: 'fa fa-clone',
@@ -32,7 +32,7 @@ function AtTruncateController (strings) {
     };
 
     function copyToClipboard() {
-        vm.tooltip.popover.text = vm.strings.components.truncate.COPIED;
+        vm.tooltip.popover.text = vm.strings.get('truncate.COPIED');
 
         let textarea = el[0].getElementsByClassName('at-Truncate-textarea')[0];
         textarea.value = string;

awx/ui/client/lib/services/base-string.service.js

@@ -1,16 +1,61 @@
+import defaults from '../../assets/default.strings.json';
+
 let i18n;
 
 function BaseStringService (namespace) {
     let t = i18n._;
 
+    const ERROR_NO_NAMESPACE = t('BaseString cannot be extended without providing a namespace');
+    const ERROR_NO_STRING = t('No string exists with this name');
+
+    if (!namespace) {
+        throw new Error(ERROR_NO_NAMESPACE);
+    }
+
     this.t = t;
     this[namespace] = {};
 
+    /*
+     * These strings are globally relevant and configured to give priority to values in
+     * default.strings.json and fall back to defaults defined inline.
+     */
+    this.BRAND_NAME = defaults.BRAND_NAME || 'AWX';
+
+    /*
+     * Globally relevant strings should be defined here to avoid duplication of content across the
+     * the project.
+     */
     this.CANCEL = t('CANCEL');
     this.SAVE = t('SAVE');
     this.OK = t('OK');
-}
 
+    /**
+     * This getter searches the extending class' namespace first for a match then falls back to
+     * the more globally relevant strings defined here. Strings with with dots as delimeters are
+     * supported to give flexibility to extending classes to nest strings as necessary.
+     *
+     * If no match is found, an error is thrown to alert the developer immediately instead of
+     * failing silently.
+     */
+    this.get = name => {
+        let keys = name.split('.');
+        let value;
+
+        keys.forEach(key => {
+            if (!value) {
+                value = this[namespace][key] || this[key];
+            } else {
+                value = value[key];
+            }
+
+            if (!value) {
+                throw new Error(ERROR_NO_STRING);
+            }
+        });
+
+        return value;
+    };
+}
 
 function BaseStringServiceLoader (_i18n_) {
     i18n = _i18n_;

awx/ui/package.json

@@ -63,6 +63,7 @@
     "jshint": "^2.9.4",
     "jshint-loader": "^0.8.3",
     "jshint-stylish": "^2.2.0",
+    "json-loader": "^0.5.4",
     "karma": "^1.4.1",
     "karma-chrome-launcher": "^1.0.1",
     "karma-coverage": "^1.1.1",

awx/ui/webpack.config.js

@@ -69,19 +69,27 @@ var baseConfig = function() {
             new webpack.optimize.CommonsChunkPlugin('vendor', 'tower.vendor.js')
         ],
         module: {
-            loaders: [{
+            loaders: [
-                // disable AMD loading (broken in this lib) and default to CommonJS (not broken)
+                {
-                test: /\.angular-tz-extensions.js$/,
+                    // disable AMD loading (broken in this lib) and default to CommonJS (not broken)
-                loader: 'imports?define=>false'
+                    test: /\.angular-tz-extensions.js$/,
-            }, {
+                    loader: 'imports?define=>false'
-                // es6 -> es5
+                },
-                test: /\.js$/,
+                {
-                loader: 'babel-loader',
+                    // es6 -> es5
-                exclude: /(node_modules)/,
+                    test: /\.js$/,
-                query: {
+                    loader: 'babel-loader',
-                    presets: ['es2015']
+                    exclude: /(node_modules)/,
+                    query: {
+                        presets: ['es2015']
+                    }
+                },
+                {
+                    test: /\.json$/,
+                    loader: 'json-loader',
+                    exclude: /(node_modules)/
                 }
-            }]
+            ]
         },
         resolve: {
             alias: {