mirror of
https://github.com/semaphoreui/semaphore.git
synced 2025-01-20 07:19:20 +01:00
feat(ui): help toggle
This commit is contained in:
Denis Gukov
parent
d5fc539aae
commit
b7a41bf569
@ -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();
|
||||
|
||||
@ -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>
|
||||
Variables passed via <code>--extra-vars</code> (Ansible) or
|
||||
<code>-var</code> (Terraform/OpenTofu).
|
||||
</span>
|
||||
<div>
|
||||
<div><code>--extra-vars</code> for Ansible</div>
|
||||
<div><code>-var</code> for Terraform/OpenTofu</div>
|
||||
</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">
|
||||
{{ $t('Secrets') }}
|
||||
<v-subheader class="px-0">
|
||||
{{ $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">
|
||||
<v-menu
|
||||
offset-y
|
||||
>
|
||||
<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>
|
||||
<div>
|
||||
<v-subheader class="px-0 mt-4">
|
||||
{{ $t('environmentVariables') }}
|
||||
|
||||
<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':
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user