mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2025-08-06 06:37:02 +02:00
Code Issues Projects Releases Wiki Activity

UI: Replace buttons for HDS in component templates (#23698)

Browse Source
This commit is contained in:
Chelsea Shaw 2023-10-20 09:23:55 -05:00 committed by GitHub
parent 28e3b78e8e
commit 0c59d51e3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
93 changed files with 673 additions and 1004 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/loading-dropdown-option.hbs Normal file
View File

@ -0,0 +1 @@
<Hds::Button disabled @text="loading" class="link loading-dropdown" @icon="loading" @isIconOnly={{true}} />

6
ui/app/models/role-jwt.js
View File

@ -15,7 +15,7 @@ const DOMAIN_STRINGS = {
'auth0.com': 'Auth0',
};
const PROVIDER_WITH_LOGO = ['GitLab', 'Google', 'Auth0'];
const PROVIDER_WITH_LOGO = ['GitHub', 'GitLab', 'Google', 'Okta', 'Auth0'];
export { DOMAIN_STRINGS, PROVIDER_WITH_LOGO };
@ -28,8 +28,8 @@ export default class RoleJwtModel extends Model {
return DOMAIN_STRINGS[firstMatch] || null;
}
get providerButtonComponent() {
get providerIcon() {
const { providerName } = this;
return PROVIDER_WITH_LOGO.includes(providerName) ? `auth-button-${providerName.toLowerCase()}` : null;
return PROVIDER_WITH_LOGO.includes(providerName) ? providerName.toLowerCase() : null;
}
}

27
ui/app/styles/components/auth-buttons.scss
View File

@ -1,27 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.auth-button-tile {
height: 31px;
width: 31px;
background: $white;
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.auth-button-type-google {
position: relative;
top: -10px;
left: -1.05rem;
}
.auth-button-type-auth0,
.auth-button-type-gitlab {
position: relative;
top: -6px;
left: -0.75rem;
}
[class*='auth-button-type'] .text {
padding-left: $spacing-m;
}

13
ui/app/styles/components/calendar-widget.scss
View File

@ -23,22 +23,11 @@ $dark-gray: #535f73;
.select-year {
grid-area: select-year;
margin-left: 24px;
margin-top: 10px;
margin: 10px 24px;
font-weight: $font-weight-bold;
display: flex;
justify-content: space-between;
align-items: first baseline;
// spacing of < year > icons when the tooltip is added or removed from DOM.
> .padding-right {
// if no tooltip
padding-right: 26px;
}
> .negative-margin {
// if tooltip
margin-right: -50px;
}
}
.calendar-widget {

4
ui/app/styles/components/popup-menu.scss
View File

@ -83,6 +83,10 @@
cursor: default;
}
}
&.loading-dropdown {
display: flex;
align-items: center;
}
}
.menu-label {

1
ui/app/styles/core.scss
View File

@ -52,7 +52,6 @@
@import './helper-classes/typography';
// Component specific styling
@import './components/auth-buttons';
@import './components/auth-form';
@import './components/autocomplete-input';
@import './components/b64-toggle';

53
ui/app/templates/components/alphabet-edit.hbs
View File

@ -31,9 +31,13 @@
<Toolbar>
<ToolbarActions>
{{#if this.capabilities.canDelete}}
<button type="button" class="toolbar-link" onclick={{action "delete"}} data-test-transformation-alphabet-delete>
Delete alphabet
</button>
<Hds::Button
@text="Delete alphabet"
@color="secondary"
class="toolbar-button"
{{on "click" (action "delete")}}
data-test-transformation-alphabet-delete
/>
<div class="toolbar-separator"></div>
{{/if}}
{{#if this.capabilities.canUpdate}}
@ -79,27 +83,30 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if (eq this.mode "create") "Create alphabet" "Save"}}
type="submit"
disabled={{this.buttonDisabled}}
class="button is-primary"
data-test-alphabet-transform-create={{true}}
>
{{#if (eq this.mode "create")}}
Create alphabet
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink
@mode={{if (eq this.mode "create") "list" "show"}}
class="button"
@secret={{concat this.model.idPrefix this.model.id}}
>
Cancel
</SecretLink>
</div>
data-test-alphabet-transform-create
/>
{{#if (eq this.mode "create")}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
@query={{hash tab="alphabet"}}
/>
{{else}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend (concat "alphabet/" this.model.id)}}
@query={{hash tab="alphabet"}}
/>
{{/if}}
</Hds::ButtonSet>
</div>
</form>
{{else}}

24
ui/app/templates/components/auth-button-auth0.hbs
View File

@ -1,24 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="is-flex-v-centered auth-button-type-auth0">
<div class="auth-button-tile is-flex-column is-flex-v-centered">
{{! template-lint-disable no-forbidden-elements }}
<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.71 216.56">
<defs>
<style>.cls-1{fill:#eb5424;}</style>
</defs>
<path
class="cls-1"
d="M189,66.92,167.22,0H96.85L118.6,66.92ZM96.85,0H26.49L4.75,66.92H75.11ZM4.75,66.92Zm0,0h0A96.85,96.85,0,0,0,39.93,175.2l21.74-66.92Zm184.21,0h0L132,108.28l21.74,66.92h0A96.85,96.85,0,0,0,189,66.92ZM39.93,175.2h0l56.93,41.36,56.92-41.36L96.85,133.84Z"
>
</path>
</svg>
{{! template-lint-enable no-forbidden-elements }}
</div>
<div class="text">
Sign in with Auth0
</div>
</div>

53
ui/app/templates/components/auth-button-gitlab.hbs
View File

@ -1,53 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="is-flex-v-centered auth-button-type-gitlab">
{{! template-lint-disable no-forbidden-elements }}
<svg class="auth-button-tile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586 559">
<defs>
<style>.cls-1{fill:#fc6d26;}.cls-2{fill:#e24329;}.cls-3{fill:#fca326;}</style>
</defs>
<g id="g44">
<path
id="path46"
class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39"
></path>
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"></path>
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"></path>
</g>
<g id="g64">
<path
id="path66"
class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z"
></path>
</g>
<g id="g72">
<path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z"></path>
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"></path>
</g>
<g id="g80">
<path
id="path82"
class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z"
></path>
</g>
<g id="g84">
<path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z"></path>
</g>
</svg>
{{! template-lint-enable no-forbidden-elements }}
<div class="text">
Sign in with GitLab
</div>
</div>

75
ui/app/templates/components/auth-button-google.hbs
View File

@ -1,75 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="is-flex-v-centered auth-button-type-google">
<svg
width="39"
height="39"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 46 46"
>
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.168 0"
in="shadowBlurOuter1"
result="shadowMatrixOuter1"
></feColorMatrix>
<feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.084 0"
in="shadowBlurOuter2"
result="shadowMatrixOuter2"
></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="b" width="40" height="40" rx="2"></rect>
<rect id="c" x="5" y="5" width="38" height="38" rx="1"></rect>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(3 3)" filter="url(#a)">
<use fill="#4285F4" xlink:href="#b"></use>
<use xlink:href="#b"></use>
<use xlink:href="#b"></use>
<use xlink:href="#b"></use>
</g>
<g transform="translate(-1 -1)">
<use fill="#FFF" xlink:href="#c"></use>
<use xlink:href="#c"></use>
<use xlink:href="#c"></use>
<use xlink:href="#c"></use>
</g>
<path
d="M31.64 23.20454545c0-.63818181-.0572727-1.25181818-.1636364-1.84090909H23V24.845h4.8436364c-.2086364 1.125-.8427273 2.0781818-1.7959091 2.7163636v2.2581819h2.9086363C30.6581818 28.2527273 31.64 25.9454545 31.64 23.20454545z"
fill="#4285F4"
></path>
<path
d="M23 32c2.43 0 4.4672727-.8059091 5.9563636-2.1804545l-2.9086363-2.2581819c-.8059091.54-1.8368182.8590909-3.0477273.8590909-2.34409091 0-4.32818182-1.5831818-5.03590909-3.7104545h-3.00681818v2.3318182C16.43818182 29.9831818 19.48181818 32 23 32z"
fill="#34A853"
></path>
<path
d="M17.96409091 24.71c-.18-.54-.28227273-1.11681818-.28227273-1.71 0-.59318182.10227273-1.17.28227273-1.71v-2.33181818h-3.00681818C14.34772727 20.17318182 14 21.54772727 14 23c0 1.4522727.34772727 2.8268182.95727273 4.0418182L17.9640909 24.71z"
fill="#FBBC05"
></path>
<path
d="M23 17.57954545c1.3213636 0 2.5077273.45409091 3.4404545 1.3459091l2.5813637-2.58136364C27.4631818 14.89181818 25.4259091 14 23 14c-3.51818182 0-6.56181818 2.01681818-8.04272727 4.95818182L17.9640909 21.29C18.67181818 19.16272727 20.65590909 17.57954545 23 17.57954545z"
fill="#EA4335"
></path>
<path d="M14 14h18v18H14V14z"></path>
</g>
</svg>
<div class="is-flex-grow-1 text">
Sign in with Google
</div>
</div>

9
ui/app/templates/components/auth-config-form/config.hbs
View File

@ -16,13 +16,12 @@
{{/if}}
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<button
<Hds::Button
@text="Save"
@icon={{if this.saveModel.isRunning "loading"}}
type="submit"
data-test-save-config="true"
class="button is-primary {{if this.saveModel.isRunning 'loading'}}"
disabled={{this.saveModel.isRunning}}
>
Save
</button>
/>
</div>
</form>

9
ui/app/templates/components/auth-config-form/options.hbs
View File

@ -12,13 +12,12 @@
{{/each}}
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<button
<Hds::Button
@text="Update options"
@icon={{if this.saveModel.isRunning "loading"}}
type="submit"
data-test-save-config="true"
class="button is-primary {{if this.saveModel.isRunning 'loading'}}"
disabled={{this.saveModel.isRunning}}
>
Update Options
</button>
/>
</div>
</form>

9
ui/app/templates/components/auth-form.hbs
View File

@ -181,15 +181,14 @@
@selectedAuthIsPath={{this.selectedAuthIsPath}}
/>
{{/if}}
<button
<Hds::Button
@text="Sign in"
@icon={{if this.authenticate.isRunning "loading"}}
data-test-auth-submit={{true}}
type="submit"
disabled={{this.authenticate.isRunning}}
class="button is-primary {{if this.authenticate.isRunning 'is-loading'}}"
id="auth-submit"
>
Sign In
</button>
/>
{{#if (and this.delayAuthMessageReminder.isIdle this.showLoading)}}
<AlertInline
@paddingTop={{true}}

38
ui/app/templates/components/auth-jwt.hbs
View File

@ -46,22 +46,24 @@
<div data-test-yield-content>
{{yield}}
</div>
<button
data-test-auth-submit={{true}}
type="submit"
disabled={{@disabled}}
class="button is-primary {{if @disabled 'is-loading'}}"
id="auth-submit"
>
{{#if this.isOIDC}}
{{#if this.role.providerButtonComponent}}
{{component this.role.providerButtonComponent}}
{{else}}
Sign in with
{{or this.role.providerName "OIDC Provider"}}
{{/if}}
{{else}}
Sign In
{{/if}}
</button>
{{#if this.isOIDC}}
<Hds::Button
@text={{concat "Sign in with " (or this.role.providerName "OIDC Provider")}}
@icon={{if @disabled "loading" this.role.providerIcon}}
data-test-auth-submit
type="submit"
disabled={{@disabled}}
id="auth-submit"
/>
{{else}}
<Hds::Button
@text="Sign in"
@icon={{if @disabled "loading"}}
data-test-auth-submit
type="submit"
disabled={{@disabled}}
id="auth-submit"
/>
{{/if}}
</form>

9
ui/app/templates/components/auth-saml.hbs
View File

@ -31,15 +31,14 @@
<div data-test-yield-content>
{{yield}}
</div>
<button
<Hds::Button
@text="Sign in with SAML provider"
@icon={{if @disabled "loading"}}
data-test-auth-submit={{true}}
type="submit"
disabled={{@disabled}}
class="button is-primary {{if @disabled 'is-loading'}}"
id="auth-submit"
>
Sign in with SAML provider
</button>
/>
</form>
{{else}}
<Hds::Alert @type="inline" @color="warning" data-test-saml-auth-not-allowed as |A|>

44
ui/app/templates/components/calendar-widget.hbs
View File

@ -15,6 +15,7 @@
<div class="calendar-title is-subtitle-gray">
DATE OPTIONS
</div>
{{! TODO Hds::Dropdown swapout }}
<ul class="menu-list">
<li class="action">
<button
@ -58,34 +59,29 @@
{{#if this.showCalendar}}
<div class="calendar-widget-container" data-test-calendar-widget-container>
<div class="select-year">
<button
<Hds::Button
data-test-previous-year
id="previous-year"
type="button"
class="button is-transparent"
disabled={{this.disablePastYear}}
{{on "click" this.subYear}}
>
<Chevron
@direction="left"
@size="s"
class="has-text-grey"
{{on "mouseover" this.addTooltip}}
{{on "mouseleave" this.removeTooltip}}
/>
</button>
@color="secondary"
@text="previous year"
@icon="chevron-left"
@isIconOnly={{true}}
/>
<p data-test-display-year>
{{this.displayYear}}
</p>
<button
<Hds::Button
data-test-next-year
type="button"
class={{concat "button is-transparent " (if (or this.tooltipTarget) "negative-margin" "padding-right")}}
id="next-year"
disabled={{this.disableFutureYear}}
{{on "click" this.addYear}}
>
<Chevron @direction="right" @size="s" class="has-text-grey" />
</button>
@color="secondary"
@text="next year"
@icon="chevron-right"
@isIconOnly={{true}}
/>
{{#if this.tooltipTarget}}
{{! Component must be in curly bracket notation }}
{{! template-lint-disable no-curly-component-invocation }}
@ -107,15 +103,15 @@
</div>
<div class="calendar-widget-grid calendar-widget">
{{#each this.widgetMonths as |month|}}
<button
data-test-calendar-month={{month.name}}
type="button"
<Hds::Button
@text={{month.name}}
@color="secondary"
@size="small"
class="is-month-list {{if month.readonly 'is-readOnly'}}"
data-test-calendar-month={{month.name}}
id={{month.index}}
{{on "click" (fn this.selectMonth month D.actions)}}
>
{{month.name}}
</button>
/>
{{/each}}
</div>
</div>

4
ui/app/templates/components/clients/config.hbs
View File

@ -37,9 +37,7 @@
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{this.buttonDisabled}} class="button is-primary" data-test-clients-config-save>
Save
</button>
<Hds::Button @text="Save" type="submit" disabled={{this.buttonDisabled}} data-test-clients-config-save />
<LinkTo @route="vault.cluster.clients.config" class="button">
Cancel
</LinkTo>

12
ui/app/templates/components/clients/dashboard.hbs
View File

@ -16,9 +16,13 @@
<div data-test-start-date-editor class="is-flex-align-baseline">
{{#if this.formattedStartDate}}
<p class="is-size-6" data-test-date-display>{{this.formattedStartDate}}</p>
<button type="button" class="button is-link" {{on "click" (fn (mut this.showBillingStartModal) true)}}>
Edit
</button>
<Hds::Button
@text="Edit"
@color="tertiary"
@icon="edit"
@iconPosition="trailing"
{{on "click" (fn (mut this.showBillingStartModal) true)}}
/>
{{else}}
<DateDropdown @handleSubmit={{this.handleClientActivityQuery}} @dateType="startDate" @submitText="Save" />
{{/if}}
@ -113,7 +117,7 @@
or viewing the current month filtered down to auth method }}
<Clients::UsageStats
@title="Total usage"
@description="These totals are within
@description="These totals are within
{{if this.selectedAuthMethod this.selectedAuthMethod 'this namespace and all its children'}}.
{{if
this.isCurrentMonth

8
ui/app/templates/components/configure-aws-secret.hbs
View File

@ -52,9 +52,7 @@
@onChange={{fn this.handleTtlChange "leaseMax"}}
/>
<div class="box is-bottomless is-fullwidth">
<button data-test-aws-input="lease-save" type="submit" class="button is-primary">
Save
</button>
<Hds::Button @text="Save" data-test-aws-input="lease-save" type="submit" />
</div>
</form>
{{else}}
@ -151,9 +149,7 @@
{{/if}}
<div class="box is-bottomless is-fullwidth">
<button data-test-aws-input="root-save" type="submit" class="button is-primary">
Save
</button>
<Hds::Button @text="Save" data-test-aws-input="root-save" type="submit" />
</div>
</form>
{{/if}}

9
ui/app/templates/components/configure-ssh-secret.hbs
View File

@ -74,14 +74,13 @@
</div>
<div class="field box is-fullwidth is-bottomless is-marginless">
<div class="control">
<button
<Hds::Button
@text="Save"
@icon={{if @loading "loading"}}
type="submit"
class="button is-primary {{if @loading 'is-loading'}}"
disabled={{@loading}}
data-test-ssh-input="configure-submit"
>
Save
</button>
/>
</div>
</div>
</form>

8
ui/app/templates/components/control-group-success.hbs
View File

@ -9,9 +9,7 @@
<code>{{this.model.requestPath}}</code>. Be careful, you can only access this data once. If you need access again in the
future you will need to get authorized again.
<div class="box is-shadowless is-fullwidth is-marginless has-slim-padding">
<button data-test-navigate-button type="button" class="button is-primary" {{action (perform this.markAndNavigate)}}>
Visit
</button>
<Hds::Button @text="Visit" data-test-navigate-button {{on "click" (action (perform this.markAndNavigate))}} />
</div>
</div>
{{else}}
@ -63,9 +61,7 @@
/>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<button data-test-unwrap-button type="submit" class="button is-primary" disabled={{not this.token}}>
Access
</button>
<Hds::Button @text="Access" data-test-unwrap-button type="submit" disabled={{not this.token}} />
</div>
</form>
</div>

24
ui/app/templates/components/control-group.hbs
View File

@ -109,24 +109,20 @@
Back
</LinkTo>
{{else}}
<button
type="button"
class="button is-primary {{if this.authorize.isRunning 'is-loading'}}"
{{action (perform this.authorize)}}
<Hds::Button
@text="Authorize"
@icon={{if this.authorize.isRunning "loading"}}
{{on "click" (action (perform this.authorize))}}
data-test-authorize-button
>
Authorize
</button>
/>
{{/if}}
{{else}}
<button
type="button"
class="button is-primary {{if this.refresh.isRunning 'is-loading'}}"
{{action (perform this.refresh)}}
<Hds::Button
@text="Refresh"
@icon={{if this.refresh.isRunning "loading"}}
{{on "click" (action (perform this.refresh))}}
data-test-refresh-button
>
Refresh
</button>
/>
{{/if}}
</div>
{{/unless}}

10
ui/app/templates/components/dashboard/quick-actions-card.hbs
View File

@ -54,15 +54,13 @@
/>
<div>
<button
type="button"
class="button is-primary has-top-margin-m"
<Hds::Button
@text={{this.searchSelectParams.buttonText}}
class="has-top-margin-m"
disabled={{(not (and this.selectedAction this.selectedEngine this.paramValue))}}
{{on "click" this.navigateToPage}}
data-test-button={{this.searchSelectParams.buttonText}}
>
{{this.searchSelectParams.buttonText}}
</button>
/>
</div>
{{/if}}
{{else}}

51
ui/app/templates/components/database-connection.hbs
View File

@ -25,14 +25,13 @@
<Toolbar>
<ToolbarActions>
{{#if @model.canDelete}}
<button
type="button"
class="toolbar-link"
onclick={{action (mut this.isDeleteModalActive) true}}
<Hds::Button
@text="Delete connection"
@color="secondary"
class="toolbar-button"
{{on "click" (action (mut this.isDeleteModalActive) true)}}
data-test-database-connection-delete
>
Delete connection
</button>
/>
{{/if}}
{{#if @model.canReset}}
<ConfirmAction
@ -171,16 +170,15 @@
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
<div class="field is-grouped">
<div class="control">
<button data-test-secret-save type="submit" disabled={{this.buttonDisabled}} class="button is-primary">
Create database
</button>
</div>
<div class="control">
<SecretLink @mode="list" class="button">
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text="Create database" type="submit" data-test-secret-save />
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{@model.backend}}
/>
</Hds::ButtonSet>
</div>
</div>
</form>
@ -293,16 +291,15 @@
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
<div class="field is-grouped">
<div class="control">
<button data-test-secret-save type="submit" disabled={{this.buttonDisabled}} class="button is-primary">
Save
</button>
</div>
<div class="control">
<SecretLink @mode="list" class="button">
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text="Save" type="submit" data-test-secret-save />
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{@model.backend}}
/>
</Hds::ButtonSet>
</div>
</div>
</form>

84
ui/app/templates/components/database-role-edit.hbs
View File

@ -37,9 +37,12 @@
<div class="toolbar-separator"></div>
{{/if}}
{{#if (and @model.canRotateRoleCredentials (eq @model.type "static"))}}
<button type="button" class="toolbar-link" {{on "click" (fn this.rotateRoleCred @model.id)}}>
Rotate credentials
</button>
<Hds::Button
@text="Rotate credentials"
@color="secondary"
class="toolbar-button"
{{on "click" (fn this.rotateRoleCred @model.id)}}
/>
{{/if}}
{{#if
(or
@ -47,14 +50,13 @@
(and (eq @model.type "dynamic") @model.canGenerateCredentials)
)
}}
<button
type="button"
class="toolbar-link"
<Hds::Button
@text={{if (eq @model.type "static") "Get credentials" "Generate credentials"}}
@color="secondary"
class="toolbar-button"
{{on "click" (fn this.generateCreds @model.id @model.type)}}
data-test-database-role-creds={{@model.type}}
>
{{if (eq @model.type "static") "Get credentials" "Generate credentials"}}
</button>
/>
{{/if}}
{{#if @model.canEditRole}}
<ToolbarSecretLink
@ -123,45 +125,35 @@
@mode={{@mode}}
@dbType={{await this.databaseType}}
/>
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
<div class="field is-grouped">
<div class="control">
{{#if (is-empty-value this.warningMessages)}}
<button
data-test-secret-save
type="submit"
disabled={{this.loading}}
class="button is-primary {{if this.loading 'is-loading'}}"
>
{{#if (eq @mode "create")}}
Create role
{{else}}
Save
{{/if}}
</button>
{{else}}
<ToolTip @horizontalPosition="left" as |T|>
<T.Trigger>
<button data-test-secret-save type="submit" disabled={{true}} class="button is-primary">
Save
</button>
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box">
You don't have permissions required to
{{if (eq @mode "create") "create" "update"}}
this role. See form for details.
</div>
</T.Content>
</ToolTip>
{{/if}}
</div>
<div class="control">
<SecretLink @mode="list" class="button" data-test-database-role-cancel>
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button
@text={{if (eq @mode "create") "Create role" "Save"}}
@icon={{if this.loading "loading"}}
type="submit"
disabled={{this.loading}}
data-test-secret-save
/>
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{@model.backend}}
@query={{hash tab="role"}}
data-test-database-role-cancel
/>
</Hds::ButtonSet>
{{#if (not (is-empty-value this.warningMessages))}}
<Hds::Alert @type="compact" @color="warning" class="has-left-margin-s" as |A|>
<A.Title>Warning</A.Title>
<A.Description>
You don't have permissions required to
{{if (eq @mode "create") "create" "update"}}
this role. See form for details.
</A.Description>
</Hds::Alert>
{{/if}}
</div>
</div>
</form>

4
ui/app/templates/components/date-dropdown.hbs
View File

@ -4,7 +4,7 @@
~}}
<Hds::SegmentedGroup ...attributes as |S|>
<S.Dropdown @height="200px" as |dd|>
<S.Dropdown @listPosition="bottom-left" @height="200px" as |dd|>
<dd.ToggleButton data-test-toggle-month @text={{or this.selectedMonth.name "Month"}} @color="secondary" />
{{#each this.dropdownMonths as |month|}}
<dd.Interactive
@ -15,7 +15,7 @@
/>
{{/each}}
</S.Dropdown>
<S.Dropdown data-test-year-list @height="200px" as |dd|>
<S.Dropdown data-test-year-list @listPosition="bottom-left" @height="200px" as |dd|>
<dd.ToggleButton data-test-toggle-year @text={{or this.selectedYear "Year"}} @color="secondary" />
{{#each this.dropdownYears as |year|}}
<dd.Interactive

12
ui/app/templates/components/file-to-array-buffer.hbs
View File

@ -19,15 +19,15 @@
{{or this.filename "No file chosen"}}
</span>
{{#if this.filename}}
<button
type="button"
<Hds::Button
@text="Clear file selection"
@icon="x-circle"
@isIconOnly={{true}}
@color="secondary"
class="file-delete-button"
aria-label="Clear file selection"
{{on "click" this.fileChange}}
data-test-text-clear
>
<Icon @name="x-circle" />
</button>
/>
{{/if}}
</div>
</div>

9
ui/app/templates/components/generate-credentials-database.hbs
View File

@ -83,12 +83,5 @@
{{/if}}
</div>
<div class="has-top-bottom-margin">
<button
type="button"
onclick={{action "redirectPreviousPage"}}
class="button is-primary"
data-test-secret-generate-back="true"
>
Back
</button>
<Hds::Button @text="Back" {{on "click" (action "redirectPreviousPage")}} data-test-secret-generate-back="true" />
</div>

18
ui/app/templates/components/generate-credentials.hbs
View File

@ -110,9 +110,12 @@
Back
</LinkTo>
{{else}}
<button type="button" {{action "newModel"}} class="button" data-test-secret-generate-back="true">
Back
</button>
<Hds::Button
@text="Back"
@color="secondary"
{{on "click" (action "newModel")}}
data-test-secret-generate-back="true"
/>
{{/if}}
</div>
</div>
@ -134,14 +137,13 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text="Generate"
@icon={{if this.loading "loading"}}
type="submit"
disabled={{this.loading}}
class="button is-primary {{if this.loading 'is-loading'}}"
data-test-secret-generate={{true}}
>
Generate
</button>
/>
</div>
<div class="control">
<LinkTo

9
ui/app/templates/components/generated-item.hbs
View File

@ -75,14 +75,13 @@
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text="Save"
@icon={{if this.saveModel.isRunning "loading"}}
type="submit"
data-test-save-config="true"
class="button is-primary {{if this.saveModel.isRunning 'loading'}}"
disabled={{this.saveModel.isRunning}}
>
Save
</button>
/>
{{#if (eq this.mode "create")}}
<LinkTo @route="vault.cluster.access.method.item.list" class="button" data-test-cancel-link={{true}}>
Cancel

34
ui/app/templates/components/identity/edit-form.hbs
View File

@ -62,34 +62,26 @@
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
<div class="field is-grouped">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if (eq this.mode "create") "Create" "Save"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
data-test-identity-submit={{true}}
class="button is-primary {{if this.save.isRunning 'loading'}}"
data-test-identity-submit
disabled={{this.save.isRunning}}
>
{{#if (eq this.mode "create")}}
Create
{{else}}
Save
{{/if}}
</button>
/>
{{#if (or (eq this.mode "merge") (eq this.mode "create"))}}
<LinkTo @route={{this.cancelLink}} class="button" data-test-cancel-link={{true}}>
Cancel
</LinkTo>
<Hds::Button @text="Cancel" @color="secondary" @route={{this.cancelLink}} data-test-cancel-link />
{{else}}
<LinkTo
<Hds::Button
@text="Cancel"
@color="secondary"
@route={{this.cancelLink}}
@models={{array this.model.id "details"}}
class="button"
data-test-cancel-link={{true}}
>
Cancel
</LinkTo>
data-test-cancel-link
/>
{{/if}}
</div>
</Hds::ButtonSet>
</div>
</div>
</form>

2
ui/app/templates/components/identity/lookup-input.hbs
View File

@ -26,7 +26,7 @@
<Input class="input" @value={{this.paramValue}} placeholder={{capitalize this.param}} />
</div>
<div class="control">
<button type="submit" class="button is-hidden">Lookup</button>
<Hds::Button @text="Lookup" @color="secondary" class="is-hidden" type="submit" />
</div>
</div>
</form>

4
ui/app/templates/components/identity/popup-alias.hbs
View File

@ -18,9 +18,7 @@
</li>
{{#if item.updatePath.isPending}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if item.canEdit}}

4
ui/app/templates/components/keymgmt/distribute.hbs
View File

@ -167,9 +167,7 @@
</button>
</div>
<div class="control">
<button type="button" class="button" {{on "click" @onClose}}>
Cancel
</button>
<Hds::Button @text="Cancel" @color="secondary" {{on "click" @onClose}} />
</div>
</div>
</form>

59
ui/app/templates/components/keymgmt/key-edit.hbs
View File

@ -55,25 +55,23 @@
<Toolbar>
<ToolbarActions>
{{#unless @model.distribution}}
<button
type="button"
class="toolbar-link"
<Hds::Button
@text="Distribute key"
@color="secondary"
class="toolbar-button"
{{on "click" (fn (mut this.isDistributing) true)}}
data-test-keymgmt-key-distribute
>
Distribute key
</button>
/>
{{/unless}}
{{#if @model.canDelete}}
<button
type="button"
class="toolbar-link"
<Hds::Button
@text="Destroy key"
@color="secondary"
class="toolbar-button"
disabled={{not @model.deletionAllowed}}
{{on "click" (fn (mut this.isDeleteModalOpen) true)}}
data-test-keymgmt-key-destroy
>
Destroy key
</button>
/>
{{/if}}
{{#if @model.provider}}
<ConfirmAction
@ -125,28 +123,24 @@
<FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
{{/each}}
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if this.isCreating "Create key" "Update"}}
@icon={{if this.saveTask.isRunning "loading"}}
type="submit"
disabled={{this.saveTask.isRunning}}
class="button is-primary {{if this.saveTask.isRunning 'is-loading'}}"
data-test-keymgmt-key-submit
>
{{if this.isCreating "Create key" "Update"}}
</button>
</div>
<div class="control">
<LinkTo
/>
<Hds::Button
@text="Cancel"
@color="secondary"
@route={{if this.isCreating @root.path "vault.cluster.secrets.backend.show"}}
@model={{if this.isCreating @root.model @model.id}}
@query={{unless this.isCreating (hash itemType="key") (hash itemType="")}}
@disabled={{this.savekey.isRunning}}
class="button"
disabled={{this.savekey.isRunning}}
data-test-keymgmt-key-cancel
>
Cancel
</LinkTo>
</div>
/>
</Hds::ButtonSet>
</div>
{{/let}}
</div>
@ -208,10 +202,13 @@
data-test-keymgmt-dist-empty-state
>
{{#if @model.canListProviders}}
<button type="button" class="link" {{on "click" (fn (mut this.isDistributing) true)}}>
Distribute key
<Icon @name="chevron-right" />
</button>
<Hds::Button
@text="Distribute key"
@icon="chevron-right"
@iconPosition="trailing"
@color="tertiary"
{{on "click" (fn (mut this.isDistributing) true)}}
/>
{{/if}}
</EmptyState>
{{else}}

40
ui/app/templates/components/keymgmt/provider-edit.hbs
View File

@ -73,15 +73,15 @@
<div class="toolbar-separator"></div>
{{/if}}
{{#if (or @model.canListKeys @model.canCreateKeys)}}
<button
type="button"
class="toolbar-link"
<Hds::Button
@text="Distribute key"
@icon="chevron-right"
@iconPosition="trailing"
@color="secondary"
class="toolbar-button"
{{on "click" (fn (mut this.isDistributing) true)}}
data-test-distribute-key
>
Distribute key
<Icon @name="chevron-right" />
</button>
/>
{{/if}}
{{#if @model.canEdit}}
<ToolbarSecretLink
@ -132,28 +132,24 @@
{{/each}}
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if this.isCreating "Create provider" "Update"}}
@icon={{if this.saveTask.isRunning "loading"}}
type="submit"
disabled={{this.saveTask.isRunning}}
class="button is-primary {{if this.saveTask.isRunning 'is-loading'}}"
data-test-kms-provider-submit
>
{{if this.isCreating "Create provider" "Update"}}
</button>
</div>
<div class="control">
<LinkTo
/>
<Hds::Button
@text="Cancel"
@color="secondary"
@route={{if this.isCreating @root.path "vault.cluster.secrets.backend.show"}}
@model={{if this.isCreating @root.model @model.id}}
@query={{if this.isCreating (hash tab="provider") (hash itemType="provider")}}
@disabled={{this.saveTask.isRunning}}
class="button"
disabled={{this.saveTask.isRunning}}
data-test-kms-provider-cancel
>
Cancel
</LinkTo>
</div>
/>
</Hds::ButtonSet>
</div>
</form>
{{/if}}

48
ui/app/templates/components/link-status.hbs
View File

@ -12,47 +12,15 @@
HCP.
</ExternalLink>
{{else}}
There was an error connecting to HCP. Click
<button type="button" class="text-button is-underline" {{on "click" (fn (mut this.showModal))}}>
here
</button>
for more information.
Error connecting to HCP
{{/if}}
</A.Title>
{{#if this.error}}
<A.Description data-test-link-error>
Since
{{this.timestamp}},
{{this.error}}. Check the logs for more information.
</A.Description>
{{/if}}
</Hds::Alert>
{{/if}}
{{#if this.showModal}}
<Hds::Modal id="hcp-link-error-modal" @color="warning" @size="small" @onClose={{fn (mut this.showModal) false}} as |M|>
<M.Header @icon="alert-triangle">
HCP Link error
</M.Header>
<M.Body>
<div>
<p class="has-text-weight-bold">Timestamp</p>
<p data-test-link-status-timestamp>
{{or this.timestamp "Not available"}}
</p>
</div>
<div class="has-top-bottom-margin">
<p class="has-text-weight-bold">Error</p>
{{#if this.error}}
<code class="tag has-text-danger" data-test-link-status-error>
{{this.error}}
</code>
{{else}}
<p data-test-link-status-error>
Not available
</p>
{{/if}}
</div>
<div>
<p class="has-text-weight-bold">Additional information</p>
<p>Check the logs for more information</p>
</div>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} data-test-link-status-close />
</M.Footer>
</Hds::Modal>
{{/if}}

23
ui/app/templates/components/mfa/method-form.hbs
View File

@ -10,21 +10,16 @@
</div>
{{#if @hasActions}}
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
data-test-mfa-save
type="button"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
<Hds::ButtonSet>
<Hds::Button
@text="Save"
@icon={{if this.save.isRunning "loading"}}
{{on "click" this.initSave}}
disabled={{this.save.isRunning}}
onclick={{this.initSave}}
data-test-mfa-method-save
>
Save
</button>
<button type="button" class="button has-left-margin-s" disabled={{this.save.isRunning}} {{on "click" this.cancel}}>
Cancel
</button>
</div>
data-test-mfa-save
/>
<Hds::Button @text="Cancel" @color="secondary" disabled={{this.save.isRunning}} {{on "click" this.cancel}} />
</Hds::ButtonSet>
</div>
{{/if}}

9
ui/app/templates/components/mfa/mfa-form.hbs
View File

@ -61,15 +61,14 @@
<AlertInline @type="danger" @sizeSmall={{true}} @message={{this.codeDelayMessage}} />
</div>
{{/if}}
<button
<Hds::Button
@text="Verify"
@icon={{if this.validate.isRunning "loading"}}
id="validate"
type="submit"
disabled={{or this.validate.isRunning this.newCodeDelay.isRunning}}
class="button is-primary {{if this.validate.isRunning 'is-loading'}}"
data-test-mfa-validate
>
Verify
</button>
/>
{{#if this.newCodeDelay.isRunning}}
<Icon @name="delay" class="has-text-grey" />
<span class="has-text-grey is-v-centered" data-test-mfa-countdown>{{this.countdown}}</span>

57
ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
View File

@ -66,14 +66,14 @@
{{target.value}}
{{/if}}
</InfoTableRow>
<button
type="button"
class="button"
<Hds::Button
@text="Remove target"
@icon="trash"
@isIconOnly={{true}}
@color="secondary"
data-test-mlef-remove-target={{target.label}}
{{on "click" (fn this.removeTarget target)}}
>
<Icon @name="trash" />
</button>
/>
</div>
{{/each}}
<div class="is-flex-row {{if this.targets 'has-top-padding-s has-border-top-light'}}">
@ -118,15 +118,14 @@
/>
{{/if}}
</div>
<button
type="button"
class="button has-left-margin-s"
<Hds::Button
@text="Add"
@color="secondary"
class="has-left-margin-s"
disabled={{not this.selectedTargetValue}}
data-test-mlef-add-target
{{on "click" this.addTarget}}
>
Add
</button>
/>
</div>
{{#if this.errors.targets.errors}}
<AlertInline @type="danger" @message={{join ", " this.errors.targets.errors}} />
@ -135,24 +134,22 @@
{{#unless @isInline}}
<hr />
<div class="has-top-padding-s">
<button
type="button"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-mlef-save
{{on "click" (perform this.save)}}
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
disabled={{this.save.isRunning}}
data-test-mlef-cancel
{{on "click" this.cancel}}
>
Cancel
</button>
<Hds::ButtonSet>
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
disabled={{this.save.isRunning}}
data-test-mlef-save
{{on "click" (perform this.save)}}
/>
<Hds::Button
@text="Cancel"
@color="secondary"
disabled={{this.save.isRunning}}
data-test-mlef-cancel
{{on "click" this.cancel}}
/>
</Hds::ButtonSet>
</div>
{{/unless}}
</div>

12
ui/app/templates/components/mfa/mfa-setup-step-one.hbs
View File

@ -30,13 +30,9 @@
/>
</div>
<div class="is-flex-start has-gap">
<button id="continue" type="submit" class="button is-primary" disabled={{(is-empty-value this.UUID)}} data-test-verify>
Verify
</button>
<button id="cancel" type="button" {{on "click" this.redirectPreviousPage}} class="button">
Cancel
</button>
</div>
<Hds::ButtonSet>
<Hds::Button @text="Verify" id="continue" type="submit" disabled={{(is-empty-value this.UUID)}} data-test-verify />
<Hds::Button @text="Cancel" @color="secondary" id="cancel" {{on "click" this.redirectPreviousPage}} />
</Hds::ButtonSet>
</form>
</div>

14
ui/app/templates/components/mfa/mfa-setup-step-two.hbs
View File

@ -46,18 +46,8 @@
</div>
{{/if}}
<div class="is-flex-start has-gap has-top-margin-l">
<button
id="restart"
type="button"
class="button is-danger-outlined"
{{on "click" this.restartSetup}}
data-test-restart
>
Restart setup
</button>
<button id="cancel" type="button" {{on "click" this.redirectPreviousPage}} class="button is-primary" data-test-done>
Done
</button>
<Hds::Button @text="Restart setup" @color="critical" id="restart" {{on "click" this.restartSetup}} data-test-restart />
<Hds::Button @text="Done" id="cancel" {{on "click" this.redirectPreviousPage}} data-test-done />
</div>
</div>
</div>

17
ui/app/templates/components/mount-backend-form.hbs
View File

@ -39,23 +39,16 @@
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text={{if (eq @mountType "secret") "Enable engine" "Enable method"}}
@icon={{if this.mountBackend.isRunning "loading"}}
type="submit"
data-test-mount-submit="true"
class="button is-primary {{if this.mountBackend.isRunning 'loading'}}"
disabled={{this.mountBackend.isRunning}}
>
{{#if (eq @mountType "secret")}}
Enable Engine
{{else}}
Enable Method
{{/if}}
</button>
/>
</div>
<div class="control">
<button data-test-mount-back type="button" class="button" {{on "click" (fn this.setMountType "")}}>
Back
</button>
<Hds::Button @text="Back" @color="secondary" data-test-mount-back {{on "click" (fn this.setMountType "")}} />
</div>
{{#if this.invalidFormAlert}}
<div class="control">

14
ui/app/templates/components/namespace-picker.hbs
View File

@ -91,14 +91,14 @@
</LinkTo>
</span>
<span class="level-right">
<button
type="button"
class="button is-ghost icon has-right-margin-m"
<Hds::Button
@text="Refresh namespace list"
@icon="reload"
@isIconOnly={{true}}
@color="tertiary"
data-test-refresh-namespaces
onclick={{action "refreshNamespaceList"}}
>
<Icon @name="reload" class="has-text-grey" />
</button>
{{on "click" (action "refreshNamespaceList")}}
/>
</span>
</div>
</div>

20
ui/app/templates/components/oidc/assignment-form.hbs
View File

@ -47,23 +47,21 @@
/>
</div>
<div class="has-top-padding-s">
<button
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-assignment-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-assignment-cancel
>
Cancel
</button>
/>
{{#if this.modelValidations.targets.errors}}
<AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} @paddingTop={{true}} />
{{/if}}

20
ui/app/templates/components/oidc/client-form.hbs
View File

@ -79,23 +79,21 @@
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-client-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-client-cancel
>
Cancel
</button>
/>
</div>
{{#if this.invalidFormAlert}}
<div class="control">

20
ui/app/templates/components/oidc/key-form.hbs
View File

@ -80,23 +80,21 @@
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-key-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-key-cancel
>
Cancel
</button>
/>
</div>
{{#if this.invalidFormAlert}}
<div class="control">

20
ui/app/templates/components/oidc/provider-form.hbs
View File

@ -107,23 +107,21 @@
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-provider-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-provider-cancel
>
Cancel
</button>
/>
</div>
{{#if this.invalidFormAlert}}
<div class="control">

20
ui/app/templates/components/oidc/scope-form.hbs
View File

@ -55,23 +55,21 @@
</p>
</div>
<div class="has-top-margin-l has-bottom-margin-l">
<button
<Hds::Button
@text={{if @model.isNew "Create" "Update"}}
@icon={{if this.save.isRunning "loading"}}
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-oidc-scope-save
>
{{if @model.isNew "Create" "Update"}}
</button>
<button
type="button"
class="button has-left-margin-s"
/>
<Hds::Button
@text="Cancel"
@color="secondary"
class="has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-oidc-scope-cancel
>
Cancel
</button>
/>
</div>
{{#if this.invalidFormAlert}}
<div class="control">

8
ui/app/templates/components/okta-number-challenge.hbs
View File

@ -11,12 +11,12 @@
{{#if @hasError}}
<div class="has-top-margin-s">
<MessageError @errorMessage="There was a problem" />
<button
type="button"
class="button"
<Hds::Button
@text="Return to login"
@color="secondary"
{{on "click" @onReturnToLogin}}
data-test-return-from-okta-number-challenge
>Return to login</button>
/>
</div>
{{else if @correctAnswer}}
<div class="has-top-margin-s">

12
ui/app/templates/components/pgp-file.hbs
View File

@ -70,9 +70,15 @@
{{/if}}
</label>
{{#if this.key.filename}}
<button type="button" class="file-delete-button" {{action "clearKey"}} data-test-pgp-clear={{true}}>
<Icon @name="x" aria-label="Close" />
</button>
<Hds::Button
@text="Clear key"
@icon="x"
@isIconOnly={{true}}
@color="secondary"
class="file-delete-button"
{{on "click" (action "clearKey")}}
data-test-pgp-clear={{true}}
/>
{{/if}}
</span>
</div>

4
ui/app/templates/components/raft-join.hbs
View File

@ -52,9 +52,7 @@
</div>
</div>
<div class="box is-marginless is-shadowless">
<button type="submit" class="button is-primary" data-test-next>
Next
</button>
<Hds::Button @text="Next" type="submit" data-test-next />
</div>
</form>
{{/if}}

12
ui/app/templates/components/raft-storage-overview.hbs
View File

@ -34,13 +34,11 @@
Download
</ExternalLink>
{{else}}
<button
type="button"
class="link is-ghost"
onclick={{queue (action "downloadSnapshot") (action D.actions.close)}}
>
Download
</button>
<Hds::Button
@text="Download"
class="link"
{{on "click" (queue (action "downloadSnapshot") (action D.actions.close))}}
/>
{{/if}}
</li>
<li class="action">

4
ui/app/templates/components/raft-storage-restore.hbs
View File

@ -34,9 +34,7 @@
</Hds::Alert>
</div>
<div class="box is-fullwidth is-shadowless">
<button type="button" class="button" onclick={{action "cancelUpload"}}>
Cancel upload
</button>
<Hds::Button @text="Cancel upload" @color="secondary" {{on "click" (action "cancelUpload")}} />
</div>
{{else}}
<div class="box is-sideless is-fullwidth is-marginless">

30
ui/app/templates/components/role-aws-edit.hbs
View File

@ -72,18 +72,24 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{this.buttonDisabled}} class="button is-primary" data-test-role-aws-create={{true}}>
{{#if (eq this.mode "create")}}
Create role
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink @mode={{if (eq this.mode "create") "list" "show"}} class="button" @secret={{this.model.id}}>
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text={{if (eq this.mode "create") "Create role" "Save"}} type="submit" data-test-role-aws-create />
{{#if (eq this.mode "create")}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
/>
{{else}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend this.model.id}}
/>
{{/if}}
</Hds::ButtonSet>
</div>
</form>
{{else}}

31
ui/app/templates/components/role-ssh-edit.hbs
View File

@ -67,18 +67,25 @@
<FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{this.buttonDisabled}} class="button is-primary" data-test-role-ssh-create={{true}}>
{{#if (eq this.mode "create")}}
Create role
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink @mode={{if (eq this.mode "create") "list" "show"}} class="button" @secret={{this.model.id}}>
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text={{if (eq this.mode "create") "Create role" "Save"}} type="submit" data-test-role-ssh-create />
{{#if (eq this.mode "create")}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
@query={{hash tab="role"}}
/>
{{else}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend this.model.id}}
/>
{{/if}}
</Hds::ButtonSet>
</div>
</form>
{{else}}

74
ui/app/templates/components/secret-create-or-update.hbs
View File

@ -6,7 +6,7 @@
{{#if (eq @mode "create")}}
<form
class={{if @showAdvancedMode "advanced-edit" "simple-edit"}}
onsubmit={{action "createOrUpdateKey" @mode}}
{{on "submit" (fn this.createOrUpdateKey @mode)}}
aria-label="secret create form"
{{did-insert this.setup @secretData @mode}}
>
@ -59,8 +59,8 @@
<JsonEditor
@title="Secret Data"
@value={{this.codemirrorString}}
@valueUpdated={{action "codemirrorUpdated"}}
@onFocusOut={{action "formatJSON"}}
@valueUpdated={{this.codemirrorUpdated}}
@onFocusOut={{this.formatJSON}}
/>
</div>
{{else}}
@ -75,7 +75,7 @@
data-test-secret-key={{true}}
@value={{secret.name}}
placeholder="key"
{{on "change" (action "handleChange")}}
{{on "change" this.handleChange}}
class="input"
autocomplete="off"
spellcheck="false"
@ -91,23 +91,15 @@
</div>
<div class="column is-narrow info-table-row-edit">
{{#if (eq @secretData.length (inc index))}}
<button
type="button"
{{action "addRow"}}
class="button is-outlined is-primary"
data-test-secret-add-row="true"
>
Add
</button>
<Hds::Button @text="Add" @color="secondary" {{on "click" this.addRow}} data-test-secret-add-row="true" />
{{else}}
<button
class="button has-text-grey is-expanded is-icon"
type="button"
<Hds::Button
@text="Delete row"
@icon="trash"
@isIconOnly={{true}}
@color="secondary"
{{on "click" (fn this.deleteRow secret.name)}}
aria-label="Delete row"
>
<Icon @name="trash" class="has-text-grey-light" />
</button>
/>
{{/if}}
</div>
</div>
@ -125,9 +117,7 @@
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{@buttonDisabled}} class="button is-primary" data-test-secret-save={{true}}>
Save
</button>
<Hds::Button @text="Save" type="submit" disabled={{@buttonDisabled}} data-test-secret-save={{true}} />
</div>
<div class="control">
<SecretLink @mode="list" @secret={{@model.parentKey}} class="button">
@ -140,7 +130,7 @@
{{#if (eq @mode "edit")}}
<form
onsubmit={{action "createOrUpdateKey" "edit"}}
{{on "submit" (fn this.createOrUpdateKey "edit")}}
aria-label="secret edit form"
{{did-insert this.setup @secretData @mode}}
>
@ -166,8 +156,8 @@
<JsonEditor
@title="Secret Data"
@value={{this.codemirrorString}}
@valueUpdated={{action "codemirrorUpdated"}}
@onFocusOut={{action "formatJSON"}}
@valueUpdated={{this.codemirrorUpdated}}
@onFocusOut={{this.formatJSON}}
/>
</div>
{{else}}
@ -182,7 +172,7 @@
data-test-secret-key={{true}}
@value={{secret.name}}
placeholder="key"
{{on "change" (action "handleChange")}}
{{on "change" this.handleChange}}
class="input"
autocomplete="off"
spellcheck="false"
@ -198,23 +188,15 @@
</div>
<div class="column is-narrow">
{{#if (eq @secretData.length (inc index))}}
<button
type="button"
{{action "addRow"}}
class="button is-outlined is-primary"
data-test-secret-add-row="true"
>
Add
</button>
<Hds::Button @text="Add" @color="secondary" {{on "click" this.addRow}} data-test-secret-add-row="true" />
{{else}}
<button
class="button has-text-grey is-expanded is-icon"
type="button"
{{action "deleteRow" secret.name}}
aria-label="Delete row"
>
<Icon @name="trash" class="has-text-grey-light" />
</button>
<Hds::Button
@text="Delete row"
@icon="trash"
@isIconOnly={{true}}
@color="secondary"
{{on "click" (fn this.deleteRow secret.name)}}
/>
{{/if}}
</div>
</div>
@ -225,14 +207,12 @@
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
<div class="field is-grouped">
<div class="control">
<button
<Hds::Button
@text="Save"
data-test-secret-save
type="submit"
disabled={{or @buttonDisabled this.validationErrorCount}}
class="button is-primary"
>
Save
</button>
/>
</div>
<div class="control">
<SecretLink @mode="show" @secret={{@model.id}} @queryParams={{hash version=@modelForData.version}} class="button">

12
ui/app/templates/components/secret-list/aws-role-item.hbs
View File

@ -29,9 +29,7 @@
<ul class="menu-list">
{{#if @item.generatePath.isPending}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else if @item.canGenerate}}
<li class="action">
@ -46,14 +44,10 @@
{{/if}}
{{#if @item.updatePath.isPending}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if @item.canRead}}

29
ui/app/templates/components/secret-list/database-list-item.hbs
View File

@ -31,7 +31,7 @@
<ul class="menu-list">
{{#if @item.canEdit}}
<li class="action">
<SecretLink @mode="show" @secret={{@item.id}} class="has-text-black has-text-weight-semibold">
<SecretLink @mode="edit" @secret={{@item.id}} class="has-text-black has-text-weight-semibold">
Edit connection
</SecretLink>
</li>
@ -45,9 +45,12 @@
{{/if}}
{{#if @item.canReset}}
<li class="action">
<button type="button" class="link" {{on "click" (fn this.resetConnection @item.id)}}>
Reset connection
</button>
<Hds::Button
@text="Reset connection"
@color="secondary"
class="link"
{{on "click" (fn this.resetConnection @item.id)}}
/>
</li>
{{/if}}
{{#if (and (eq @item.type "dynamic") @item.canGenerateCredentials)}}
@ -73,16 +76,22 @@
{{/if}}
{{#if (and @item.canRotateRoleCredentials (eq this.keyTypeValue "static"))}}
<li class="action">
<button type="button" class="link" {{on "click" (fn this.rotateRoleCred @item.id)}}>
Rotate credentials
</button>
<Hds::Button
@text="Rotate credentials"
@color="secondary"
class="link"
{{on "click" (fn this.rotateRoleCred @item.id)}}
/>
</li>
{{/if}}
{{#if @item.canRotateRoot}}
<li class="action">
<button type="button" class="link" {{on "click" (fn this.rotateRootCred @item.id)}}>
Rotate root credentials
</button>
<Hds::Button
@text="Rotate root credentials"
@color="secondary"
class="link"
{{on "click" (fn this.rotateRootCred @item.id)}}
/>
</li>
{{/if}}
</ul>

4
ui/app/templates/components/secret-list/item.hbs
View File

@ -41,9 +41,7 @@
{{else}}
{{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if @item.canRead}}

4
ui/app/templates/components/secret-list/transform-transformation-item.hbs
View File

@ -31,9 +31,7 @@
<ul class="menu-list">
{{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if @item.updatePath.canRead}}

8
ui/app/templates/components/tool-hash.hbs
View File

@ -25,9 +25,7 @@
<Hds::Copy::Button @text="Copy" @textToCopy={{@sum}} class="primary" />
</div>
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button" data-test-tools-back={{true}}>
Back
</button>
<Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} data-test-tools-back={{true}} />
</div>
</div>
{{else}}
@ -77,9 +75,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" data-test-tools-submit="true">
Hash
</button>
<Hds::Button @text="Hash" type="submit" data-test-tools-submit="true" />
</div>
</div>
{{/if}}

8
ui/app/templates/components/tool-lookup.hbs
View File

@ -23,9 +23,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button">
Back
</button>
<Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />
</div>
</div>
{{else}}
@ -44,9 +42,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" data-test-tools-submit="true" class="button is-primary">
Lookup token
</button>
<Hds::Button @text="Lookup token" type="submit" data-test-tools-submit="true" />
</div>
</div>
{{/if}}

8
ui/app/templates/components/tool-random.hbs
View File

@ -21,9 +21,7 @@
<Hds::Copy::Button @text="Copy" @textToCopy={{@random_bytes}} class="primary" />
</div>
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button">
Back
</button>
<Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />
</div>
</div>
{{else}}
@ -60,9 +58,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" data-test-tools-submit="true">
Generate
</button>
<Hds::Button @text="Generate" type="submit" data-test-tools-submit="true" />
</div>
</div>
{{/if}}

8
ui/app/templates/components/tool-rewrap.hbs
View File

@ -32,9 +32,7 @@
<Hds::Copy::Button @text="Copy" @textToCopy={{@rewrap_token}} class="primary" />
</div>
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button">
Back
</button>
<Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />
</div>
</div>
{{else}}
@ -53,9 +51,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" data-test-tools-submit="true" class="button is-primary">
Rewrap token
</button>
<Hds::Button @text="Rewrap token" type="submit" data-test-tools-submit="true" />
</div>
</div>
{{/if}}

6
ui/app/templates/components/tool-unwrap.hbs
View File

@ -44,7 +44,7 @@
</Hds::Tabs>
<Hds::ButtonSet class="has-top-padding-m">
<Hds::Copy::Button @text="Copy unwrapped data" @textToCopy={{stringify @unwrap_data}} class="primary" />
<Hds::Button {{on "click" this.onClear}} type="button" class="button" @text="Back" />
<Hds::Button {{on "click" this.onClear}} @color="secondary" @text="Back" />
</Hds::ButtonSet>
{{else}}
<div class="box is-sideless is-fullwidth is-marginless">
@ -70,9 +70,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" data-test-tools-submit="true" class="button is-primary">
Unwrap data
</button>
<Hds::Button @text="Unwrap data" type="submit" data-test-tools-submit="true" />
</div>
</div>
{{/if}}

8
ui/app/templates/components/tool-wrap.hbs
View File

@ -32,9 +32,7 @@
<Hds::Copy::Button @text="Copy" @textToCopy={{@token}} class="primary" />
</div>
<div class="control">
<button {{on "click" this.onClear}} type="button" class="button">
Back
</button>
<Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />
</div>
</div>
{{else}}
@ -62,9 +60,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" data-test-tools-submit="true" disabled={{@buttonDisabled}}>
Wrap data
</button>
<Hds::Button @text="Wrap data" type="submit" data-test-tools-submit="true" disabled={{@buttonDisabled}} />
</div>
</div>
{{/if}}

21
ui/app/templates/components/transform-create-form.hbs
View File

@ -12,17 +12,14 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{this.buttonDisabled}} class="button is-primary" data-test-transform-create={{true}}>
{{#if (eq this.mode "create")}}
Create transformation
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink @mode={{if (eq this.mode "create") "list" "show"}} class="button" @secret={{this.model.id}}>
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text="Create transformation" type="submit" data-test-transform-create />
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
/>
</Hds::ButtonSet>
</div>
</form>

26
ui/app/templates/components/transform-edit-form.hbs
View File

@ -43,22 +43,14 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
type="submit"
disabled={{this.buttonDisabled}}
class="button is-primary"
data-test-transformation-save-button={{true}}
>
{{#if (eq this.mode "create")}}
Create transformation
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink @mode={{if (eq this.mode "create") "list" "show"}} class="button" @secret={{this.model.id}}>
Cancel
</SecretLink>
</div>
<Hds::ButtonSet>
<Hds::Button @text="Save" type="submit" data-test-transformation-save-button />
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend this.model.id}}
/>
</Hds::ButtonSet>
</div>
</form>

41
ui/app/templates/components/transform-role-edit.hbs
View File

@ -71,29 +71,30 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if (eq this.mode "create") "Create role" "Save"}}
type="submit"
disabled={{this.buttonDisabled}}
class="button is-primary"
data-test-role-transform-create={{true}}
>
{{#if (eq this.mode "create")}}
Create role
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
data-test-role-transform-create
/>
{{#if (eq this.mode "create")}}
<LinkTo @route={{"vault.cluster.secrets.backend.list-root"}} @query={{hash tab="role"}} class="button">
Cancel
</LinkTo>
{{else if (eq this.mode "edit")}}
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{concat "role/" this.model.id}} class="button">
Cancel
</LinkTo>
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
@query={{hash tab="role"}}
/>
{{else}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend (concat "role/" this.model.id)}}
@query={{hash tab="role"}}
/>
{{/if}}
</div>
</Hds::ButtonSet>
</div>
</form>
{{else}}

53
ui/app/templates/components/transform-template-edit.hbs
View File

@ -31,9 +31,13 @@
<Toolbar>
<ToolbarActions>
{{#if this.capabilities.canDelete}}
<button type="button" class="toolbar-link" onclick={{action "delete"}} data-test-transformation-template-delete>
Delete template
</button>
<Hds::Button
@text="Delete template"
@color="secondary"
class="toolbar-button"
{{on "click" (action "delete")}}
data-test-transformation-template-delete
/>
<div class="toolbar-separator"></div>
{{/if}}
{{#if this.capabilities.canUpdate}}
@ -82,27 +86,30 @@
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::ButtonSet>
<Hds::Button
@text={{if (eq this.mode "create") "Create template" "Save"}}
type="submit"
disabled={{this.buttonDisabled}}
class="button is-primary"
data-test-template-transform-create={{true}}
>
{{#if (eq this.mode "create")}}
Create template
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink
@mode={{if (eq this.mode "create") "list" "show"}}
class="button"
@secret={{concat this.model.idPrefix this.model.id}}
>
Cancel
</SecretLink>
</div>
data-test-template-transform-create
/>
{{#if (eq this.mode "create")}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.list-root"
@model={{this.model.backend}}
@query={{hash tab="template"}}
/>
{{else}}
<Hds::Button
@text="Cancel"
@color="secondary"
@route="vault.cluster.secrets.backend.show"
@models={{array this.model.backend (concat "template/" this.model.id)}}
@query={{hash tab="template"}}
/>
{{/if}}
</Hds::ButtonSet>
</div>
</form>
{{else}}

19
ui/app/templates/components/transformation-edit.hbs
View File

@ -34,9 +34,13 @@
{{#if (gt this.model.allowed_roles.length 0)}}
<ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
<T.Trigger @tabindex="-1">
<button class="toolbar-link" aria-disabled="true" type="button" disabled>
Delete transformation
</button>
<Hds::Button
@text="Delete transformation"
@color="secondary"
class="toolbar-button"
aria-disabled="true"
disabled
/>
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box">
@ -45,9 +49,12 @@
</T.Content>
</ToolTip>
{{else}}
<button class="toolbar-link" onclick={{action (mut this.isDeleteModalActive) true}} type="button">
Delete transformation
</button>
<Hds::Button
@text="Delete transformation"
@color="secondary"
class="toolbar-button"
{{on "click" (action (mut this.isDeleteModalActive) true)}}
/>
{{/if}}
<div class="toolbar-separator"></div>
{{/if}}

9
ui/app/templates/components/transit-form-create.hbs
View File

@ -125,14 +125,13 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
<Hds::Button
@text="Create encryption key"
@icon={{if @requestInFlight "loading"}}
data-test-transit-key="create"
type="submit"
disabled={{@requestInFlight}}
class="button is-primary {{if @requestInFlight 'is-loading'}}"
>
Create encryption key
</button>
/>
</div>
<div class="control">
<SecretLink @mode="list" class="button">

9
ui/app/templates/components/transit-form-edit.hbs
View File

@ -91,9 +91,12 @@
<div class="field is-grouped">
{{#if @capabilities.canUpdate}}
<div class="control">
<button type="submit" disabled={{@requestInFlight}} class="button is-primary {{if @requestInFlight 'is-loading'}}">
Update transit key
</button>
<Hds::Button
@text="Update transit key"
@icon={{if @requestInFlight "loading"}}
type="submit"
disabled={{@requestInFlight}}
/>
</div>
{{/if}}
<div class="control">

4
ui/app/templates/components/transit-key-action/datakey.hbs
View File

@ -68,9 +68,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary">
Create datakey
</button>
<Hds::Button @text="Create datakey" type="submit" />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/decrypt.hbs
View File

@ -49,9 +49,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" id="decrypt" data-test-button-decrypt>
Decrypt
</button>
<Hds::Button @text="Decrypt" type="submit" id="decrypt" data-test-button-decrypt />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/encrypt.hbs
View File

@ -63,9 +63,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary" data-test-button-encrypt>
Encrypt
</button>
<Hds::Button @text="Encrypt" type="submit" data-test-button-encrypt />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/export.hbs
View File

@ -59,9 +59,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary">
Export key
</button>
<Hds::Button @text="Export key" type="submit" />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/hmac.hbs
View File

@ -45,9 +45,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" class="button is-primary">
HMAC
</button>
<Hds::Button @text="HMAC" type="submit" />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/rewrap.hbs
View File

@ -57,9 +57,7 @@
</p>
</div>
<div class="control">
<button type="submit" class="button is-primary">
Rewrap
</button>
<Hds::Button @text="Rewrap" type="submit" />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/sign.hbs
View File

@ -114,9 +114,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{@loading}} class="button is-primary {{if @loading 'is-loading'}}">
Sign
</button>
<Hds::Button @text="Sign" @icon={{if @loading "loading"}} type="submit" disabled={{@loading}} />
</div>
</div>
</form>

4
ui/app/templates/components/transit-key-action/verify.hbs
View File

@ -186,9 +186,7 @@
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button type="submit" disabled={{@loading}} class="button is-primary {{if @loading 'is-loading'}}">
Verify
</button>
<Hds::Button @text="Verify" @icon={{if @loading "loading"}} type="submit" disabled={{@loading}} />
</div>
</div>
</form>

4
ui/app/templates/components/wizard-content.hbs
View File

@ -9,9 +9,7 @@
<nav class="menu">
<ul class="menu-list">
<li class="action">
<button type="button" class="button link" onclick={{action "dismissWizard"}}>
Dismiss
</button>
<Hds::Button @text="Dismiss" @color="secondary" class="link" {{on "click" (action "dismissWizard")}} />
</li>
</ul>
</nav>

4
ui/app/templates/vault/cluster/access/identity/index.hbs
View File

@ -43,9 +43,7 @@
</li>
{{#if (or item.isReloading item.updatePath.isPending item.aliasPath.isPending)}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if item.canAddAlias}}

8
ui/app/templates/vault/cluster/policies/index.hbs
View File

@ -97,14 +97,10 @@
<ul class="menu-list">
{{#if item.updatePath.isPending}}
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
<li class="action">
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
</li>
{{else}}
{{#if item.canRead}}

4
ui/lib/core/addon/components/menu-loader.hbs
View File

@ -5,9 +5,7 @@
<li class="action">
{{#if @loadingParam}}
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
<LoadingDropdownOption />
{{else}}
{{yield}}
{{/if}}

14
ui/scripts/codemods/hds/button.js
View File

@ -171,6 +171,18 @@ class Transforms {
});
}
filterModifiers() {
const params = [this.builders.string('click')];
this.node.modifiers.forEach((modifier) => {
if (modifier.path === 'action') {
// Replaces {{action "blah"}} with {{on "click" (action "blah")}}
params.push(this.builders.sexpr(modifier.path, modifier.params));
const onClickModifier = this.builders.elementModifier('on', params);
this.modifiers.push(onClickModifier);
}
});
}
textToString(node) {
// filter out escape charaters like \n and whitespace from TextNode and rebuild as StringLiteral
const text = decodeURI(node.chars).trim();
@ -249,6 +261,7 @@ class Transforms {
} else if (this.hasIcon) {
// if there was an icon node but no text we need to add the @isIconOnly arg
this.addAttr('@isIconOnly', this.builders.mustache(this.builders.boolean(true)));
this.addAttr('@text', 'REPLACE_ME');
}
}
@ -273,6 +286,7 @@ module.exports = (env) => {
if (transforms.shouldTransform()) {
transforms.childNodesToArgs();
transforms.filterAttributes();
transforms.filterModifiers();
return transforms.buildElement();
}
} catch (error) {

4
ui/tests/acceptance/mfa-login-test.js
View File

@ -84,8 +84,8 @@ module('Acceptance | mfa-login', function (hooks) {
.hasText('Check device for push notification', 'Push notification instruction renders');
assert.dom('[data-test-mfa-validate]').isDisabled('Button is disabled while validating');
assert
.dom('[data-test-mfa-validate]')
.hasClass('is-loading', 'Loading class applied to button while validating');
.dom('[data-test-mfa-validate] [data-test-icon="loading"]')
.exists('Loading icon shows while validating');
return validationHandler(schema, req);
});

2
ui/tests/acceptance/mfa-method-test.js
View File

@ -282,7 +282,7 @@ module('Acceptance | mfa-method', function (hooks) {
const SHA1radioBtn = this.element.querySelectorAll('input[name=algorithm]')[0];
await click(SHA1radioBtn);
await fillIn('[data-test-input="max_validation_attempts"]', 10);
await click('[data-test-mfa-method-save]');
await click('[data-test-mfa-save]');
await fillIn('[data-test-confirmation-modal-input]', model.type);
await click('[data-test-confirm-button]');

6
ui/tests/acceptance/secrets/backend/database/secret-test.js
View File

@ -318,7 +318,11 @@ module('Acceptance | secrets/database/*', function (hooks) {
'Database connection is pre-selected on the form'
);
await click('[data-test-database-role-cancel]');
assert.strictEqual(currentURL(), `/vault/secrets/${backend}/list`, 'Cancel button links to list view');
assert.strictEqual(
currentURL(),
`/vault/secrets/${backend}/list?tab=role`,
'Cancel button links to role list view'
);
});
}
test('database connection create and edit: vault-plugin-database-oracle', async function (assert) {

53
ui/tests/integration/components/link-status-test.js
View File

@ -5,7 +5,7 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render } from '@ember/test-helpers';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { statuses } from '../../../mirage/handlers/hcp-link';
@ -69,37 +69,50 @@ module('Integration | Component | link-status', function (hooks) {
assert.dom(SELECTORS.bannerWarning).exists('Warning banner renders for error state');
assert
.dom('[data-test-link-status]')
.hasText('Error connecting to HCP', 'Banner title renders for error state');
assert
.dom('[data-test-link-error]')
.hasText(
'There was an error connecting to HCP. Click here for more information.',
'Banner copy renders for error state'
'Since 2022-09-21T11:25:02.196835-07:00, unable to establish a connection with HCP. Check the logs for more information.',
'Error renders for case 1'
);
await click(SELECTORS.modalOpen);
// unable to establish connection error
await render(hbs`
<LinkStatus @status={{get this.statuses 2}} />
`);
assert
.dom('[data-test-link-status-timestamp]')
.hasText('2022-09-21T11:25:02.196835-07:00', 'Timestamp renders');
assert
.dom('[data-test-link-status-error]')
.hasText('unable to establish a connection with HCP', 'Error renders');
.dom('[data-test-link-error]')
.hasText(
'Since 2022-09-21T11:25:02.196835-07:00, unable to establish a connection with HCP. Check the logs for more information.',
'Error renders for case 2'
);
await click(SELECTORS.modalClose);
// connecting error
// no permissions error
await render(hbs`
<LinkStatus @status={{get this.statuses 3}} />
`);
await click(SELECTORS.modalOpen);
assert
.dom('[data-test-link-status-error]')
.hasText('principal does not have the permission to register as a provider', 'Error renders');
await click(SELECTORS.modalClose);
.dom('[data-test-link-error]')
.hasText(
'Since 2022-09-21T11:25:02.196835-07:00, principal does not have the permission to register as a provider. Check the logs for more information.',
'Error renders for case 3'
);
// could not obtain token error
await render(hbs`
<LinkStatus @status={{get this.statuses 4}} />
`);
assert
.dom('[data-test-link-error]')
.hasText(
'Since 2022-09-21T11:25:02.196835-07:00, could not obtain a token with the supplied credentials. Check the logs for more information.',
'Error renders for case 3'
);
// this shouldn't happen but placeholders should render if disconnected/connecting status is returned without timestamp and/or error
await render(hbs`
<LinkStatus @status="connecting" />
`);
await click(SELECTORS.modalOpen);
assert.dom('[data-test-link-status-timestamp]').hasText('Not available', 'Timestamp placeholder renders');
assert.dom('[data-test-link-status-error]').hasText('Not available', 'Error placeholder renders');
assert.dom('[data-test-link-error]').doesNotExist('No errors rendered when link is in connected state');
});
});

4
ui/tests/integration/components/mfa-form-test.js
View File

@ -148,7 +148,9 @@ module('Integration | Component | mfa-form', function (hooks) {
// override to avoid authSuccess method since it expects an auth payload
async totpValidate(authData) {
await waitUntil(() =>
assert.dom('[data-test-mfa-validate]').hasClass('is-loading', 'Loading class applied to button')
assert
.dom('[data-test-mfa-validate] [data-test-icon="loading"]')
.exists('Loading icon shows on button')
);
assert.dom('[data-test-mfa-validate]').isDisabled('Button is disabled while loading');
assert.deepEqual(authData, expectedAuthData, 'Mfa auth data passed to validate method');

20
ui/tests/unit/models/role-jwt-test.js
View File

@ -15,7 +15,7 @@ module('Unit | Model | role-jwt', function (hooks) {
const model = this.owner.lookup('service:store').createRecord('role-jwt');
assert.ok(!!model);
assert.strictEqual(model.providerName, null, 'no providerName');
assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent');
assert.strictEqual(model.providerIcon, null, 'no providerIcon');
});
test('it computes providerName when known provider url match fails', function (assert) {
@ -24,7 +24,7 @@ module('Unit | Model | role-jwt', function (hooks) {
});
assert.strictEqual(model.providerName, null, 'no providerName');
assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent');
assert.strictEqual(model.providerIcon, null, 'no providerIcon');
});
test('it provides a providerName for listed known providers', function (assert) {
@ -36,19 +36,11 @@ module('Unit | Model | role-jwt', function (hooks) {
const expectedName = DOMAIN_STRINGS[domain];
assert.strictEqual(model.providerName, expectedName, `computes providerName: ${expectedName}`);
let expectedIcon = null;
if (PROVIDER_WITH_LOGO.includes(expectedName)) {
assert.strictEqual(
model.providerButtonComponent,
`auth-button-${expectedName.toLowerCase()}`,
`computes providerButtonComponent: ${domain}`
);
} else {
assert.strictEqual(
model.providerButtonComponent,
null,
`computes providerButtonComponent: ${domain}`
);
expectedIcon = expectedName.toLowerCase();
}
assert.strictEqual(model.providerIcon, expectedIcon, `computes providerIcon: ${domain}`);
});
});
@ -58,6 +50,6 @@ module('Unit | Model | role-jwt', function (hooks) {
authUrl: `http://custom-auth0-provider.com`,
});
assert.strictEqual(model.providerName, null, `no providerName for custom URL`);
assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent for custom URL');
assert.strictEqual(model.providerIcon, null, 'no providerIcon for custom URL');
});
});