Merge pull request #20 from ansibleguy76/release/v2.2.1

v2.2.1 into main
ansibleguy76 · Feb 7, 2022 · e888c9d · e888c9d
2 parents 4226f51 + 73e1db5
commit e888c9d
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.2.1] - 2022-02-07
+
+### Added
+
+-   Toggle hidden fields for admins
+-   Allow expression debug for admins
+
+### Fixed
+
+-   Ignore error if no forms subdir exists
+-   Allow empty constants in designer (must be object bug)
+
 ## [2.2.0] - 2022-02-03
 
 ### Added
@@ -65,7 +77,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   JWT tokens, allow multiple devices
 -   Expression field can be `editable`
 
-
 ## [2.1.2] - 2022-01-17
 
 ### Added
@@ -130,9 +141,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Allow change password for current local user
 -   Start tracking versions
 
+[Unreleased]: https://github.com/ansibleguy76/ansibleforms/compare/2.2.1...HEAD
 
-[Unreleased]: https://github.com/ansibleguy76/ansibleforms/compare/2.2.0...HEAD
+[2.2.1]: https://github.com/ansibleguy76/ansibleforms/compare/2.2.0...2.2.1
 
 [2.2.0]: https://github.com/ansibleguy76/ansibleforms/compare/2.1.6...2.2.0
+
 [2.1.6]: https://github.com/ansibleguy76/ansibleforms/compare/2.1.5...2.1.6
+
+[2.1.6]: https://github.com/ansibleguy76/ansibleforms/compare/2.1.5...2.1.6
+
 [2.1.5]: https://github.com/ansibleguy76/ansibleforms/compare/2.1.4...2.1.5
diff --git a/app_versions.gradle b/app_versions.gradle
@@ -1,2 +1,2 @@
-ext.version_code = 20200
-ext.version_name = "2.2.0"
+ext.version_code = 20201
+ext.version_name = "2.2.1"
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ansible_forms_vue",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -25,6 +25,8 @@
     "bulma-quickview" : "*",
     "bulma-checkradio": "~2.1.3",
     "brace": "~0.11.1",
+    "highlight.js": "9.11.0",
+    "vue-highlight.js": "3.1.0",
     "vue-bulma-paginate" : "*",
     "vue-moment" : "*",
     "yaml": "*",

diff --git a/client/src/components/Form.vue b/client/src/components/Form.vue
@@ -5,7 +5,7 @@
     </BulmaQuickView>
     <div class="container" v-if="formIsReady">
       <div class="columns">
-        <div class="column">
+        <div class="column is-clipped">
           <h1 class="title">{{ currentForm.name }} <span v-if="currentForm.help" class="tag is-info is-clickable" @click="showHelp=!showHelp"><span class="icon"><font-awesome-icon icon="question-circle" /></span><span v-if="showHelp">Hide help</span><span v-else>Show help</span></span></h1>
           <article v-if="currentForm.help && showHelp" class="message is-info">
             <div class="message-body content"><VueShowdown :markdown="currentForm.help" flavor="github" :options="{ghCodeBlocks:true}" /></div>
@@ -16,6 +16,9 @@
             </span>
             <span>Show Extravars</span>
           </button>
+          <span v-if="isAdmin" class="icon is-clickable is-pulled-right" :class="{'has-text-success':!showHidden,'has-text-danger':showHidden}" @click="showHidden=!showHidden">
+              <font-awesome-icon :icon="(showHidden?'search-minus':'search-plus')" />
+          </span>
           <button @click="$emit('rerender')" class="button is-warning is-small mr-3">
             <span class="icon">
               <font-awesome-icon icon="redo" />
@@ -39,6 +42,14 @@
                       <!-- add field label -->
                       <label class="label has-text-primary">{{ field.label }} <span v-if="field.required" class="has-text-danger">*</span>
                         <span class="is-pulled-right">
+                          <span
+                            class="icon is-clickable"
+                            :class="{'has-text-success':!fieldOptions[field.name].debug,'has-text-danger':fieldOptions[field.name].debug}"
+                            @click="setExpressionFieldDebug(field.name,!fieldOptions[field.name].debug)"
+                            v-if="field.expression && isAdmin"
+                          >
+                            <font-awesome-icon :icon="(fieldOptions[field.name].debug?'search-minus':'search-plus')" />
+                          </span>
                           <span
                             class="icon is-clickable has-text-success"
                             @click="setExpressionFieldEditable(field.name,true)"
@@ -62,7 +73,7 @@
                           </span>
                           <span
                             class="icon is-clickable has-text-info"
-                            @click="clip($v.form[field.name].$model)"
+                            @click="clip((field.type=='expression')?$v.form[field.name].$model:queryresults[field.name])"
                             v-if="(field.type=='expression' || field.type=='query') && fieldOptions[field.name].viewable && !fieldOptions[field.name].editable"
                           >
                             <font-awesome-icon icon="copy" />
@@ -77,6 +88,24 @@
 
                         </span>
                       </label>
+                      <div class="mb-3"
+                        @dblclick="clip(field.expression,true)"
+                        v-if="field.expression && fieldOptions[field.name].debug">
+                        <highlight-code
+                          lang="javascript"
+                          :code="field.expression"
+                        />
+                      </div>
+
+                      <div class="mb-3"
+                        @dblclick="clip(fieldOptions[field.name].expressionEval,true)"
+                        v-if="field.expression && fieldOptions[field.name].debug && dynamicFieldStatus[field.name]!='fixed'">
+                        <highlight-code
+                          lang="javascript"
+                          :code="fieldOptions[field.name].expressionEval"
+                        />
+                      </div>
+
                       <!-- type = checkbox -->
                       <div v-if="field.type=='checkbox'">
                         <BulmaCheckRadio checktype="checkbox" v-model="$v.form[field.name].$model" :name="field.name" :type="{'is-danger is-block':$v.form[field.name].$invalid}" :label="field.placeholder" @change="evaluateDynamicFields(field.name)" />
@@ -104,9 +133,11 @@
                           :sticky="field.sticky||false"
                           >
                         </BulmaAdvancedSelect>
+
                         <div @dblclick="setExpressionFieldViewable(field.name,false)" v-if="fieldOptions[field.name].viewable" class="box limit-height mb-3">
                           <vue-json-pretty :data="queryresults[field.name]||[]"></vue-json-pretty>
                         </div>
+
                       </div>
                       <!-- type = radio -->
                       <div v-if="field.type=='radio'" >
@@ -129,9 +160,11 @@
                             <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && !field.isHtml" class="input has-text-info" :class="{'is-danger':$v.form[field.name].$invalid}" v-text="stringify($v.form[field.name].$model)"></p>
                             <p @dblclick="setExpressionFieldViewable(field.name,true)" v-if="!fieldOptions[field.name].editable && field.isHtml" class="input has-text-info" :class="{'is-danger':$v.form[field.name].$invalid}" v-html="stringify($v.form[field.name].$model)"></p>
                           </div>
-                          <div @dblclick="setExpressionFieldViewable(field.name,false)" v-else class="box limit-height mb-3">
+
+                          <div @dblclick="setExpressionFieldViewable(field.name,false)" v-else  class="box limit-height mb-3">
                             <vue-json-pretty :data="$v.form[field.name].$model"></vue-json-pretty>
                           </div>
+
                         </div>
                         <!-- type = text or password-->
                         <input v-if="field.type=='text' || field.type=='password'"
@@ -239,7 +272,7 @@
             <span>Close output</span>
           </button>
         </div>
-        <div v-if="showJson" class="column">
+        <div v-if="showJson" class="column is-clipped">
           <h1 class="title">Extravars</h1>
           <button @click="showJson=false" class="button is-danger is-small">
             <span class="icon">
@@ -259,7 +292,7 @@
             </span>
             <span>Copy to clipboard</span>
           </button>
-          <div class="box mt-4">
+          <div class="box mt-4 is-limited">
             <vue-json-pretty :data="formdata"></vue-json-pretty>
           </div>
         </div>
@@ -277,6 +310,12 @@
   import BulmaQuickView from './BulmaQuickView.vue'
   import BulmaCheckRadio from './BulmaCheckRadio.vue'
   import BulmaEditTable from './BulmaEditTable.vue'
+
+  import 'highlight.js/styles/monokai-sublime.css'
+  import VueHighlightJS from 'vue-highlight.js';
+  import javascript from 'highlight.js/lib/languages/javascript';
+  import vue from 'vue-highlight.js/lib/languages/vue';
+
   import Helpers from './../lib/Helpers'
   import Copy from 'copy-to-clipboard'
   import 'vue-json-pretty/lib/styles.css';
@@ -285,13 +324,20 @@
 
   Vue.use(Vuelidate)
   Vue.use(VueShowdown)
+  Vue.use(VueHighlightJS, {
+    // Register only languages that you want
+      languages: {
+        javascript
+      }
+    });
 
   export default{
     name:"Form",
     components:{VueJsonPretty,BulmaAdvancedSelect,BulmaEditTable,BulmaCheckRadio,BulmaQuickView},
     props:{
       currentForm:{type:Object},
-      constants:{type:Object}
+      constants:{type:Object},
+      isAdmin:{type:Boolean}
     },
     data(){
       return  {
@@ -324,6 +370,7 @@
           validationsLoaded:false,
           timeout:undefined,     // determines how long we should show the result of run
           showHelp:false,
+          showHidden:false,
           ansibleJobId:undefined,
           awxJobId:undefined,
           abortTriggered:false
@@ -440,6 +487,9 @@
       setExpressionFieldViewable(fieldname,value){
         Vue.set(this.fieldOptions[fieldname],'viewable',value)   // flag editable
       },
+      setExpressionFieldDebug(fieldname,value){
+        Vue.set(this.fieldOptions[fieldname],'debug',value)   // flag editable
+      },
       stringify(v){
         if(v){
           if(Array.isArray(v)){
@@ -453,21 +503,27 @@
           return v
         }
       },
-      clip(v){
+      clip(v,doNotStringify=false){
         try{
-          Copy(JSON.stringify(v))
+          if(doNotStringify){
+            Copy(v)
+          }else{
+            Copy(JSON.stringify(v))
+          }
+
           this.$toast.success("Copied to clipboard")
         }catch(e){
           this.$toast.error("Error copying to clipboard : \n" + e)
         }
 
       },
       filterfieldsByGroup(group){                   // creates a list of field per group
+        var ref=this
         return this.currentForm.fields.filter(function (el) {
           return (
             (("group" in el && el.group === group)
               || !("group" in el) && (group==""))
-            && el.hide!==true)
+            && (el.hide!==true || ref.showHidden))
         });
       },
       checkDependencies(field){
@@ -788,6 +844,7 @@
                   // set flag running
                   ref.setFieldStatus(item.name,"running",false)
                   placeholderCheck = ref.replacePlaceholders(item)     // check and replace placeholders
+                  Vue.set(ref.fieldOptions[item.name],"expressionEval",placeholderCheck.value||"undefined")
                   // console.log(`[${item.name}] 1 : ${placeholderCheck.value}`)
                   if(placeholderCheck.value!=undefined){                       // expression is clean ?
                       // console.log(`[${item.name}] 2 : ${placeholderCheck.value}`)
@@ -1347,7 +1404,7 @@
       }
       this.$v.form.$reset();
       // find all variable dependencies
-      this.findVariableDependencies()      
+      this.findVariableDependencies()
       this.findVariableDependentOf()
       this.startDynamicFieldsLoop();
     },
@@ -1364,6 +1421,14 @@ pre{
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+.is-limited {
+  text-overflow: ellipsis;
+  width:100%;
+  overflow: hidden;
+}
+.is-nowrap{
+  white-space:nowrap;
+}
 .limit-height{
   max-height:300px;
   overflow-y:scroll;
@@ -1391,9 +1456,6 @@ pre{
   0% {
     transform: scale(0);
   }
-  50% {
-    transform: scale(1.5);
-  }
   100% {
     transform: scale(1);
   }

diff --git a/client/src/views/Designer.vue b/client/src/views/Designer.vue
@@ -346,7 +346,7 @@
       },
       formConfig(){
         try{
-          return YAML.stringify({categories: YAML.parse(this.categories),roles: YAML.parse(this.roles),constants: YAML.parse(this.constants),forms: this.formsObj})
+          return YAML.stringify({categories: YAML.parse(this.categories),roles: YAML.parse(this.roles),constants: this.constantsObj,forms: this.formsObj})
         }catch{
           return ""
         }

diff --git a/client/src/views/Form.vue b/client/src/views/Form.vue
@@ -1,5 +1,5 @@
 <template>
-    <Form v-if="currentForm" :constants="formConfig.constants||{}" :token="token" :key="componentKey" @rerender="load" :currentForm="currentForm" />
+    <Form v-if="currentForm" :isAdmin="isAdmin" :constants="formConfig.constants||{}" :token="token" :key="componentKey" @rerender="load" :currentForm="currentForm" />
 </template>
 <script>
   import Vue from 'vue'
@@ -10,7 +10,8 @@
     name:"FormContainer",
     components:{Form},
     props:{
-      token:{type:String}
+      token:{type:String},
+      isAdmin:{type:Boolean}
     },
     data(){
       return  {

diff --git a/server/package.json b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ansible_forms",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "repository": {
     "type": "git",
     "url": "git://github.com/ansibleguy76/ansibleforms.git"

diff --git a/server/src/models/form.model.js b/server/src/models/form.model.js
@@ -183,10 +183,12 @@ Form.backup = function(){
   Form.removeOld(10)
   logger.silly(`Copying forms file '${appConfig.formsPath}'->'${backupformsfile}'`)
   fse.copySync(appConfig.formsPath,backupformsfile)
-  logger.silly(`Copying forms directory '${formsdir}'->'${backupformsdir}'`)
-  fse.removeSync(backupformsdir) // just in case, remove it (unlikely hit)
-  fse.ensureDirSync(backupformsdir) // make backupdir
-  fse.copySync(formsdir,backupformsdir) // make backup
+  if(fs.existsSync(formsdir)){
+    logger.silly(`Copying forms directory '${formsdir}'->'${backupformsdir}'`)
+    fse.removeSync(backupformsdir) // just in case, remove it (unlikely hit)
+    fse.ensureDirSync(backupformsdir) // make backupdir
+    fse.copySync(formsdir,backupformsdir) // make backup
+  }
   return backupfile
 }
 Form.remove = function(backupName){

diff --git a/server/src/swagger.json b/server/src/swagger.json
@@ -2,7 +2,7 @@
   "swagger": "2.0",
   "info": {
     "description": "This is the swagger interface for AnsibleForms.\r\nUse the `/auth/login` api with basic authentication to obtain a JWT token.\r\nThen use the access token, prefixed with the word '**Bearer**' to use all other api's.\r\nNote that the access token is limited in time.  You can then either login again and get a new set of tokens or use the `/token` api and the refresh token to obtain a new set (preferred).",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "title": "AnsibleForms",
     "contact": {
       "email": "[email protected]"