Skip to content

Commit

Permalink
Simplify secret field (#389)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonatanklosko
jonatanklosko authored Jan 30, 2024
1 parent ef50675 commit f8802d0
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 205 deletions.
81 changes: 16 additions & 65 deletions assets/remote_execution_cell/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,35 +82,25 @@ button {
font-weight: 500;
}

.inline-input-label {
.field-wrapper {
display: flex;
align-items: center;
gap: 6px;
}

.inline-label {
display: block;
margin-bottom: 2px;
color: var(--gray-600);
font-weight: 500;
padding-right: 6px;
font-size: 0.875rem;
text-transform: uppercase;
position: relative;
top: 2px;
}

.input-container {
flex-grow: 1;
display: flex;
align-items: center;
}

.field {
display: flex;
flex-direction: column;
}

.inline-field {
display: flex;
flex-direction: row;
align-items: center;
}

.required {
border: 1px solid var(--red--300);
}
Expand All @@ -132,29 +122,23 @@ select.input {
display: none;
}

.input-icon {
border: 1px solid var(--gray-200);
outline: none;
padding: 8px 12px 8px 42px;
max-width: 175px;
}

.input-icon:hover {
cursor: pointer;
.input-icon-container {
position: relative;
display: flex;
}

.input-icon.unavailable {
border-color: var(--red-300);
.input-icon-container .input {
padding: 8px 12px 8px 42px;
}

.input-icon-container {
position: relative;
.input.secret-input:hover {
cursor: pointer;
}

.icon-container {
position: absolute;
top: 20px;
left: 4px;
bottom: 1px;
left: 1px;
padding: 5px 6px;
border-right: 1px solid var(--gray-200);
width: 22px;
Expand All @@ -163,42 +147,9 @@ select.input {
border-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: 1px;
}

.icon-container.inline {
position: absolute;
top: 1px;
}

.icon-container.inline.md {
left: 59px;
}

.icon-container.inline.sm {
left: 46px;
}

.icon-container:hover {
cursor: pointer;
background-color: var(--gray-300);
}

.input-icon-text {
border: 1px solid var(--gray-200);
outline: none;
padding: 8px 12px 8px 42px;
max-width: 175px;
}

.input-icon.required {
border: 1px solid var(--red--300);
}

.input-icon-text.required {
border: 1px solid var(--red--300);
}

.hidden-checkbox:hover {
cursor: pointer;
}
154 changes: 79 additions & 75 deletions assets/remote_execution_cell/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function init(ctx, payload) {
props: {
label: {
type: String,
default: "",
default: null,
},
inputClass: {
type: String,
Expand All @@ -24,31 +24,44 @@ export function init(ctx, payload) {
type: [String, Number],
default: "",
},
inline: {
type: Boolean,
default: false,
},
required: {
type: Boolean,
default: false,
},
},

template: `
<div :class="[inline ? 'inline-field' : 'field']">
<label :class="inline ? 'inline-input-label' : 'input-label'">
<div class="field">
<label v-if="label" class="input-label">
{{ label }}
</label>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
v-bind="$attrs"
:class="[inputClass, { required: !modelValue && required }]"
:class="[inputClass, { required: !(modelValue || $attrs.value) && required }]"
>
</div>
`,
};

const InlineLabel = {
name: "InlineLabel",

props: {
label: {
type: String,
default: null,
},
},

template: `
<label class="inline-label">
{{ label }}
</label>
`,
};

const BaseSecret = {
name: "BaseSecret",

Expand All @@ -71,7 +84,7 @@ export function init(ctx, payload) {
},
label: {
type: String,
default: "",
default: null,
},
toggleInputValue: {
type: [String, Number],
Expand All @@ -89,18 +102,10 @@ export function init(ctx, payload) {
type: String,
default: "Select secret",
},
inline: {
type: Boolean,
default: false,
},
required: {
type: Boolean,
default: false,
},
iconOffset: {
type: String,
default: "md",
},
},

methods: {
Expand All @@ -127,92 +132,91 @@ export function init(ctx, payload) {
:name="secretInputName"
:label="label"
:value="secretInputValue"
inputClass="input input-icon"
inputClass="input secret-input"
readonly
@click="selectSecret"
@input="$emit('update:secretInputValue', $event.target.value)"
:required="required"
:inline="inline"
/>
<BaseInput
v-else
:name="textInputName"
:label="label"
type="text"
:value="textInputValue"
inputClass="input input-icon-text"
inputClass="input"
@input="$emit('update:textInputValue', $event.target.value)"
:required="required"
:inline="inline"
/>
<div :class="['icon-container', { inline: inline }, iconOffset]">
<label class="hidden-checkbox">
<input
type="checkbox"
:name="toggleInputName"
:checked="toggleInputValue"
@input="$emit('update:toggleInputValue', $event.target.checked)"
class="hidden-checkbox-input"
/>
<svg v-if="toggleInputValue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="22" height="22">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M18 8h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2V7a6 6 0 1 1 12 0v1zM5
10v10h14V10H5zm6 4h2v2h-2v-2zm-4 0h2v2H7v-2zm8 0h2v2h-2v-2zm1-6V7a4 4 0 1 0-8 0v1h8z" fill="#000"/>
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M21 3v18H3V3h18zm-8.001 3h-2L6.6 17h2.154l1.199-3h4.09l1.201 3h2.155l-4.4-11zm-1 2.885L13.244
12h-2.492l1.247-3.115z" fill="#445668"/>
</svg>
</label>
</div>
<label class="icon-container">
<input
type="checkbox"
:name="toggleInputName"
:checked="toggleInputValue"
@input="$emit('update:toggleInputValue', $event.target.checked)"
class="hidden-checkbox-input"
/>
<svg v-if="toggleInputValue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="22" height="22">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M18 8h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2V7a6 6 0 1 1 12 0v1zM5
10v10h14V10H5zm6 4h2v2h-2v-2zm-4 0h2v2H7v-2zm8 0h2v2h-2v-2zm1-6V7a4 4 0 1 0-8 0v1h8z" fill="#000"/>
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M21 3v18H3V3h18zm-8.001 3h-2L6.6 17h2.154l1.199-3h4.09l1.201 3h2.155l-4.4-11zm-1 2.885L13.244
12h-2.492l1.247-3.115z" fill="#445668"/>
</svg>
</label>
</div>
`,
};

const app = Vue.createApp({
components: {
BaseInput,
InlineLabel,
BaseSecret,
},

template: `
<div class="app">
<form @change="handleFieldChange">
<div class="header">
<BaseSecret
textInputName="node"
secretInputName="node_secret"
toggleInputName="use_node_secret"
label="Node"
v-model:textInputValue="fields.node"
v-model:secretInputValue="fields.node_secret"
v-model:toggleInputValue="fields.use_node_secret"
modalTitle="Set node value"
iconOffset="sm"
inline
required
/>
<BaseSecret
textInputName="cookie"
secretInputName="cookie_secret"
toggleInputName="use_cookie_secret"
label="Cookie"
v-model:textInputValue="fields.cookie"
v-model:secretInputValue="fields.cookie_secret"
v-model:toggleInputValue="fields.use_cookie_secret"
modalTitle="Set cookie value"
inline
required
/>
<BaseInput
name="assign_to"
label="Assign to"
v-model="fields.assign_to"
inputClass="input input--xs"
inline
/>
<div class="field-wrapper">
<InlineLabel label="Node" />
<BaseSecret
textInputName="node"
secretInputName="node_secret"
toggleInputName="use_node_secret"
v-model:textInputValue="fields.node"
v-model:secretInputValue="fields.node_secret"
v-model:toggleInputValue="fields.use_node_secret"
modalTitle="Set node value"
required
/>
</div>
<div class="field-wrapper">
<InlineLabel label="Cookie" />
<BaseSecret
textInputName="cookie"
secretInputName="cookie_secret"
toggleInputName="use_cookie_secret"
v-model:textInputValue="fields.cookie"
v-model:secretInputValue="fields.cookie_secret"
v-model:toggleInputValue="fields.use_cookie_secret"
modalTitle="Set cookie value"
required
/>
</div>
<div class="field-wrapper">
<InlineLabel label="Assign to" />
<BaseInput
name="assign_to"
v-model="fields.assign_to"
inputClass="input input--xs"
/>
</div>
</div>
</form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/assets/remote_execution_cell/build/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f8802d0

Please sign in to comment.