ui: allow docHelp override using config.json

config.json can have a property named 'docHelpMappings' which can be used to override docHelp suffixes.
In config.json admin can add mappings as follows:

"docHelpMappings": {
  "virtual_machine.html": "some.html",
  "some_string": "override_string"
}

UI will use these mappings and will make appropriate replacements in the documentation links for different sections and forms.

Addresses #4731

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Author: shwstppr

ui/public/config.json

@@ -46,5 +46,6 @@
     "jp": "label.japanese.keyboard",
     "sc": "label.simplified.chinese.keyboard"
   },
-  "plugins": []
+  "plugins": [],
+  "docHelpMappings": {}
 }

ui/src/components/widgets/Breadcrumb.vue

@@ -45,7 +45,7 @@
           <a
             v-if="item.meta.docHelp"
             style="margin-right: 12px"
-            :href="$config.docBase + '/' + $route.meta.docHelp"
+            :href="$config.docBase + '/' + docHelp"
             target="_blank">
             <a-icon type="question-circle-o"></a-icon>
           </a>
@@ -72,6 +72,7 @@ export default {
   data () {
     return {
       name: '',
+      docHelp: '',
       breadList: []
     }
   },
@@ -86,6 +87,7 @@ export default {
   methods: {
     getBreadcrumb () {
       this.name = this.$route.name
+      this.docHelp = this.$applyDocHelpMappings(this.$route.meta.docHelp)
       this.breadList = []
       this.$route.matched.forEach((item) => {
         if (item && item.parent && item.parent.name !== 'index' && !item.path.endsWith(':id')) {

ui/src/main.js

@@ -26,7 +26,7 @@ import './core/lazy_use'
 import './core/ext'
 import './permission' // permission control
 import './utils/filter' // global filter
-import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin } from './utils/plugins'
+import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin } from './utils/plugins'
 import { VueAxios } from './utils/request'
 
 Vue.config.productionTip = false
@@ -49,3 +49,5 @@ fetch('config.json').then(response => response.json()).then(config => {
     }).$mount('#app')
   })
 })
+
+Vue.use(configUtilPlugin)

ui/src/utils/plugins.js

@@ -167,3 +167,22 @@ export const toLocaleDatePlugin = {
     }
   }
 }
+
+export const configUtilPlugin = {
+  install (Vue) {
+    Vue.prototype.$applyDocHelpMappings = function (docHelp) {
+      var helpDocMappings = this.$config.helpDocMappings
+      if (docHelp !== null && docHelp !== undefined && docHelp !== '' &&
+        helpDocMappings !== null && helpDocMappings !== undefined &&
+        helpDocMappings.constructor === Object && Object.keys(helpDocMappings).length > 0) {
+        for (var key in helpDocMappings) {
+          if (docHelp.includes(key)) {
+            docHelp = docHelp.replace(key, helpDocMappings[key])
+            break
+          }
+        }
+      }
+      return docHelp
+    }
+  }
+}

ui/src/views/AutogenView.vue

@@ -103,7 +103,7 @@
             <a
               v-if="currentAction.docHelp || $route.meta.docHelp"
               style="margin-left: 5px"
-              :href="$config.docBase + '/' + (currentAction.docHelp || $route.meta.docHelp)"
+              :href="$config.docBase + '/' + this.$applyDocHelpMappings(currentAction.docHelp || $route.meta.docHelp)"
               target="_blank">
               <a-icon type="question-circle-o"></a-icon>
             </a>

ui/tests/common/index.js

@@ -21,10 +21,11 @@ import mockRouter from '../mock/mockRouter'
 
 import localVue from '../setup'
 import { mount } from '@vue/test-utils'
-import { pollJobPlugin, notifierPlugin } from '@/utils/plugins'
+import { pollJobPlugin, notifierPlugin, configUtilPlugin } from '@/utils/plugins'
 
 localVue.use(pollJobPlugin)
 localVue.use(notifierPlugin)
+localVue.use(configUtilPlugin)
 
 function createMockRouter (newRoutes = []) {
   let routes = []