feat(ui): help toggle

web/src/components/EditDialog.vue

@@ -21,6 +21,15 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
 
         <v-spacer></v-spacer>
 
+        <v-btn
+          icon
+          @click="toggleHelp()"
+          class="mr-3"
+          :style="{opacity: needHelp ? 1 : 0.3}"
+        >
+          <v-icon>mdi-help-box</v-icon>
+        </v-btn>
+
         <v-btn icon @click="toggleFullscreen()" class="mr-3" v-if="expandable">
           <v-icon>mdi-arrow-{{ fullscreen ? 'collapse' : 'expand' }}</v-icon>
         </v-btn>
@@ -37,6 +46,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
           :onError="clearFlags"
           :needSave="needSave"
           :needReset="needReset"
+          :needHelp="needHelp"
         ></slot>
       </v-card-text>
 
@@ -93,6 +103,7 @@ export default {
       type: String,
       default: 'Unnamed',
     },
+    helpButton: Boolean,
   },
 
   data() {
@@ -101,6 +112,7 @@ export default {
       needSave: false,
       needReset: false,
       fullscreen: null,
+      needHelp: false,
     };
   },
 
@@ -133,6 +145,10 @@ export default {
   },
 
   methods: {
+    toggleHelp() {
+      this.needHelp = !this.needHelp;
+    },
+
     onSave(e) {
       if (this.dontCloseOnSave) {
         this.clearFlags();

web/src/components/EnvironmentForm.vue

@@ -4,6 +4,7 @@
     lazy-validation
     v-model="formValid"
     v-if="item != null"
+    class="pb-3"
   >
     <v-alert
       :value="formError"
@@ -17,31 +18,32 @@
       :rules="[v => !!v || $t('name_required')]"
       required
       :disabled="formSaving"
-      class="mb-4"
+      class="mb-2"
     ></v-text-field>
 
-    <v-tabs grow v-model="tab">
+    <v-tabs grow v-model="tab" class="mb-7">
       <v-tab key="variables">Variables</v-tab>
       <v-tab key="secrets">Secrets</v-tab>
     </v-tabs>
 
     <v-tabs-items v-model="tab">
       <v-tab-item key="variables">
+
         <v-subheader class="px-0">
           {{ $t('extraVariables') }}
 
-          <v-tooltip bottom color="black" open-delay="300" max-width="400">
+          <v-tooltip v-if="needHelp" bottom color="black" open-delay="300" max-width="400">
             <template v-slot:activator="{ on, attrs }">
               <v-icon
                 class="ml-1"
                 v-bind="attrs"
                 v-on="on"
-              >mdi-help-circle</v-icon>
+              >mdi-help-box</v-icon>
             </template>
-            <span>
+            <div>
-          Variables passed via <code>--extra-vars</code> (Ansible) or
+              <div><code>--extra-vars</code> for Ansible</div>
-          <code>-var</code> (Terraform/OpenTofu).
+              <div><code>-var</code> for Terraform/OpenTofu</div>
-        </span>
+            </div>
           </v-tooltip>
 
           <v-spacer />
@@ -58,6 +60,13 @@
               JSON
             </v-btn>
           </v-btn-toggle>
+
+          <v-btn icon @click="addExtraVar()">
+            <v-icon>
+              mdi-plus
+            </v-icon>
+          </v-btn>
+
         </v-subheader>
 
         <codemirror
@@ -112,19 +121,21 @@
               </tr>
             </template>
           </v-data-table>
-          <div class="mt-2 mb-4" v-if="extraVars != null">
+
-            <v-btn
-              color="primary"
-              @click="addExtraVar()"
-            >{{ $t('New Extra Variable') }}</v-btn>
-          </div>
           <v-alert color="error" v-else>Can't be displayed as table.</v-alert>
         </div>
 
         <div>
           <v-subheader class="px-0 mt-4">
-            <v-icon class="mr-1">mdi-application-settings</v-icon>
             {{ $t('environmentVariables') }}
+
+            <v-spacer />
+
+            <v-btn icon @click="addEnvVar()">
+              <v-icon>
+                mdi-plus
+              </v-icon>
+            </v-btn>
           </v-subheader>
           <v-data-table
             :items="env"
@@ -168,23 +179,24 @@
               </tr>
             </template>
           </v-data-table>
-          <div class="mt-2 mb-4">
-            <v-btn
-              color="primary"
-              @click="addEnvVar()"
-            >{{ $t('New Environment Variable') }}</v-btn>
-          </div>
         </div>
       </v-tab-item>
+
       <v-tab-item key="secrets">
 
         <div>
-          <v-subheader class="px-0 mt-4">
+          <v-subheader class="px-0">
-            {{ $t('Secrets') }}
+            {{ $t('extraVariables') }}
+            <v-spacer />
+            <v-btn icon @click="addSecret('var')">
+              <v-icon>
+                mdi-plus
+              </v-icon>
+            </v-btn>
           </v-subheader>
 
           <v-data-table
-            :items="secrets.filter(s => !s.remove)"
+            :items="secrets.filter(s => !s.remove && s.type === 'var')"
             :items-per-page="-1"
             class="elevation-1"
             hide-default-footer
@@ -193,11 +205,6 @@
           >
             <template v-slot:item="props">
               <tr>
-                <td class="pa-1">
-                  <v-icon>
-                    {{ props.item.type === 'var' ? 'mdi-variable' : 'mdi-application-settings' }}
-                  </v-icon>
-                </td>
                 <td class="pa-1">
                   <v-text-field
                     solo-inverted
@@ -208,6 +215,7 @@
                     :placeholder="$t('name')"
                   ></v-text-field>
                 </td>
+
                 <td class="pa-1">
                   <v-text-field
                     solo-inverted
@@ -218,6 +226,7 @@
                     class="v-text-field--solo--no-min-height"
                   ></v-text-field>
                 </td>
+
                 <td style="width: 38px;">
                   <v-icon
                     small
@@ -230,41 +239,65 @@
               </tr>
             </template>
           </v-data-table>
+        </div>
 
-          <div class="mt-2 mb-4">
+        <div>
-            <v-menu
+          <v-subheader class="px-0 mt-4">
-              offset-y
+            {{ $t('environmentVariables') }}
-            >
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  v-bind="attrs"
-                  v-on="on"
-                  color="primary"
-                >New Secret</v-btn>
-              </template>
-              <v-list>
-                <v-list-item
-                  link
-                  @click="addSecret('var')"
-                >
-                  <v-list-item-icon>
-                    <v-icon>mdi-variable</v-icon>
-                  </v-list-item-icon>
-                  <v-list-item-title>{{ $t('Secret Extra Variable') }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item
-                  link
-                  @click="addSecret('env')"
-                >
-                  <v-list-item-icon>
-                    <v-icon>mdi-application-settings</v-icon>
-                  </v-list-item-icon>
-                  <v-list-item-title>{{ $t('Secret Environment Variable') }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </div>
 
+            <v-spacer />
+
+            <v-btn icon @click="addSecret('env')">
+              <v-icon>
+                mdi-plus
+              </v-icon>
+            </v-btn>
+          </v-subheader>
+
+          <v-data-table
+            :items="secrets.filter(s => !s.remove && s.type === 'env')"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+            :no-data-text="$t('noValues')"
+            style="background: #8585850f"
+          >
+            <template v-slot:item="props">
+              <tr>
+                <td class="pa-1">
+                  <v-text-field
+                    solo-inverted
+                    flat
+                    hide-details
+                    v-model="props.item.name"
+                    class="v-text-field--solo--no-min-height"
+                    :placeholder="$t('name')"
+                  ></v-text-field>
+                </td>
+
+                <td class="pa-1">
+                  <v-text-field
+                    solo-inverted
+                    flat
+                    hide-details
+                    v-model="props.item.value"
+                    placeholder="*******"
+                    class="v-text-field--solo--no-min-height"
+                  ></v-text-field>
+                </td>
+
+                <td style="width: 38px;">
+                  <v-icon
+                    small
+                    class="pa-1"
+                    @click="removeSecret(props.item)"
+                  >
+                    mdi-delete
+                  </v-icon>
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
         </div>
 
       </v-tab-item>
@@ -283,17 +316,14 @@ import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/vue/vue.js';
 import 'codemirror/addon/display/placeholder.js';
 import { getErrorMessage } from '@/lib/error';
-// import EventBus from '@/event-bus';
-// import { getErrorMessage } from '@/lib/error';
-
-// const PREDEFINED_ENV_VARS = [{
-//   name: 'ANSIBLE_HOST_KEY_CHECKING',
-//   value: 'False',
-//   description: 'Avoid host key checking by the tools Ansible uses to connect to the host.',
-// }];
 
 export default {
   mixins: [ItemFormBase],
+
+  props: {
+    needHelp: Boolean,
+  },
+
   components: {
     codemirror,
   },
@@ -366,7 +396,6 @@ export default {
       },
 
       extraVarsEditMode: 'json',
-      // predefinedEnvVars: [],
     };
   },
 
@@ -414,23 +443,6 @@ export default {
       }
     },
 
-    // setExtraVar(name, value) {
-    //   try {
-    //     const obj = JSON.parse(this.json || '{}');
-    //     if (value == null) {
-    //       delete obj[name];
-    //     } else {
-    //       obj[name] = value;
-    //     }
-    //     this.json = JSON.stringify(obj, null, 2);
-    //   } catch (err) {
-    //     EventBus.$emit('i-snackbar', {
-    //       color: 'error',
-    //       text: getErrorMessage(err),
-    //     });
-    //   }
-    // },
-
     beforeSave() {
       switch (this.extraVarsEditMode) {
         case 'json':

web/src/views/project/Environment.vue

@@ -6,8 +6,9 @@
       :title="$t('editEnvironment')"
       :max-width="500"
       @save="loadItems"
+      :help-button="true"
     >
-      <template v-slot:form="{ onSave, onError, needSave, needReset }">
+      <template v-slot:form="{ onSave, onError, needSave, needReset, needHelp }">
         <EnvironmentForm
           :project-id="projectId"
           :item-id="itemId"
@@ -15,6 +16,7 @@
           @error="onError"
           :need-save="needSave"
           :need-reset="needReset"
+          :need-help="needHelp"
         />
       </template>
     </EditDialog>