claire bontempo 61ee28ba3b
UI: HDS adoption update <AlertInline> component to use Hds::Alert (#24299)
* replace paddingTop with clas

* use hds alert for AlertInline component

* remve isSmall arg

* add test selector back

* remove mimicRefresh arg

* update assertion for alert inline component

* update string-list

* use alert inline for string-list

* add changelog

* update block instances of alert inline

* remove p tags from test selectors

* minor cleanup
2023-12-01 00:57:32 +00:00

68 lines
1.9 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create Secret">
<:toolbarFilters>
<Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
<span class="has-text-grey">JSON</span>
</Toggle>
</:toolbarFilters>
</KvPageHeader>
<form {{on "submit" (perform this.save)}}>
<div class="box is-sideless is-fullwidth is-bottomless">
<NamespaceReminder @mode="create" @noun="secret" />
<MessageError @errorMessage={{this.errorMessage}} />
<KvDataFields
@showJson={{this.showJsonView}}
@secret={{@secret}}
@modelValidations={{this.modelValidations}}
@pathValidations={{this.pathValidations}}
@type="create"
/>
<ToggleButton
@isOpen={{this.showMetadata}}
@openLabel="Hide secret metadata"
@closedLabel="Show secret metadata"
@onClick={{fn (mut this.showMetadata)}}
class="is-block"
data-test-metadata-toggle
/>
{{#if this.showMetadata}}
<div class="box has-container" data-test-metadata-section>
<KvMetadataFields @metadata={{@metadata}} @modelValidations={{this.modelValidations}} />
</div>
{{/if}}
</div>
<div class="box is-fullwidth is-bottomless">
<div class="control">
<Hds::Button
@text="Save"
@icon={{if this.save.isRunning "loading"}}
type="submit"
disabled={{this.save.isRunning}}
data-test-kv-save
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.onCancel}}
data-test-kv-cancel
/>
</div>
{{#if this.invalidFormAlert}}
<AlertInline
data-test-invalid-form-alert
class="has-top-padding-s"
@type="danger"
@message={{this.invalidFormAlert}}
/>
{{/if}}
</div>
</form>