Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] CC-4031: change from Action, a and button to hds::Button #16251

Merged
merged 11 commits into from
Feb 22, 2023
Merged

[UI] CC-4031: change from Action, a and button to hds::Button #16251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9f3ae23
change from Action, a and button to hds::Button
valeriia-ruban Feb 14, 2023
7d47724
updates
valeriia-ruban Feb 15, 2023
b2cda5d
intermediate commit
valeriia-ruban Feb 15, 2023
bb31b59
intr
valeriia-ruban Feb 15, 2023
d2f454c
fixed tests
valeriia-ruban Feb 15, 2023
d8ea1a9
added changelog file and fixed test
valeriia-ruban Feb 15, 2023
b14f102
fixed styles
valeriia-ruban Feb 18, 2023
2cf683e
added fix for disabled buttons on submit
valeriia-ruban Feb 21, 2023
1eaba42
fix
valeriia-ruban Feb 21, 2023
320d2bd
fix
valeriia-ruban Feb 21, 2023
8602c21
fixed partition
valeriia-ruban Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changelog/16251.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: update from <button> and <a> to design-system-components button <Hds::Button>
```
18 changes: 9 additions & 9 deletions ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
</AuthForm>
</BlockSlot>
<BlockSlot @name="actions">
<Action
{{on "click" modal.close}}
>
Continue without logging in
</Action>
<Hds::Button
@color='secondary'
@text='Continue without logging in'
{{on 'click' modal.close}}
/>
</BlockSlot>
</ModalDialog>
</:unauthorized>
Expand Down Expand Up @@ -106,11 +106,11 @@
</AuthForm>
</BlockSlot>
<BlockSlot @name="actions">
<Action
<Hds::Button
@color='secondary'
@text='Continue without logging in'
{{on 'click' modal.close}}
>
Continue without logging in
</Action>
/>
</BlockSlot>
</ModalDialog>
<Portal @target="app-before-skip-links">
Expand Down
47 changes: 25 additions & 22 deletions ui/packages/consul-lock-sessions/app/components/consul/lock-session/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@
<dd>{{@item.ID}}</dd>
<dt>Node</dt>
<dd>
<a
href={{href-to 'dc.nodes.show' @item.Node}}
>
{{@item.Node}}
</a>
<Hds::Button
@text={{@item.Node}}
@icon='git-commit'
@href={{href-to 'dc.nodes.show' @item.Node}}
@isHrefExternal={{false}}
@size='small'
@color='tertiary'
/>
</dd>
<dt>Delay</dt>
<dd>{{duration-from @item.LockDelay}}</dd>
Expand All @@ -74,30 +77,30 @@
{{#if (can 'delete session' item=@item)}}
<ConfirmationDialog @message="Are you sure you want to invalidate this Lock Session?">
<BlockSlot @name="action" as |confirm|>
<Action
<Hds::Button
@text='Invalidate Session'
@color='critical'
data-test-delete
class="type-delete"
{{on 'click' (fn confirm (fn writer.delete @item))}}
>
Invalidate Session
</Action>
/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
<p>
{{message}}
</p>
<Action
class="type-delete"
{{on 'click' (fn execute)}}
>
Confirm Invalidation
</Action>
<Action
class="type-cancel"
{{on 'click' (fn cancel)}}
>
Cancel
</Action>
<Hds::ButtonSet>
<Hds::Button
@text='Confirm Invalidation'
@color='critical'
data-test-delete
{{on 'click' (fn execute)}}
/>
<Hds::Button
@text='Cancel'
@color='secondary'
{{on 'click' (fn cancel)}}
/>
</Hds::ButtonSet>
</BlockSlot>
</ConfirmationDialog>
{{/if}}
Expand Down
34 changes: 17 additions & 17 deletions ui/packages/consul-lock-sessions/app/components/consul/lock-session/list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,30 +81,30 @@ as |item index|>
@message="Are you sure you want to invalidate this session?"
>
<BlockSlot @name="action" as |confirm|>
<Action
<Hds::Button
@text='Invalidate'
@color='critical'
data-test-delete
class="type-delete"
{{on 'click' (fn confirm (fn @ondelete item))}}
>
Invalidate
</Action>
/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
<p>
{{message}}
</p>
<Action
class="type-delete"
{{on 'click' (fn execute)}}
>
Confirm Invalidate
</Action>
<Action
class="type-cancel"
{{on 'click' (fn cancel)}}
>
Cancel
</Action>
<Hds::ButtonSet>
<Hds::Button
@text='Confirm Invalidate'
@color='critical'
data-test-delete
{{on 'click' (fn execute)}}
/>
<Hds::Button
@text='Cancel'
@color='secondary'
{{on 'click' (fn cancel)}}
/>
</Hds::ButtonSet>
</BlockSlot>
</ConfirmationDialog>
</BlockSlot>
Expand Down
28 changes: 15 additions & 13 deletions ui/packages/consul-lock-sessions/app/templates/dc/nodes/show/sessions.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,21 +85,23 @@ as |route|>
</BlockSlot>

<BlockSlot @name="actions">
<li class="docs-link">
<Action
<li>
<Hds::Link::Standalone
@text='Documentation on Lock Sessions'
@href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html"
@external={{true}}
>
Documentation on Lock Sessions
</Action>
@icon='docs-link'
@iconPosition='trailing'
@size='small'
/>
</li>
<li class="learn-link">
<Action
@href="{{env 'CONSUL_DOCS_LEARN_URL'}}/tutorials/consul/distributed-semaphore"
@external={{true}}
>
Take the tutorial
</Action>
<li>
<Hds::Link::Standalone
@text='Take the tutorial'
@href='{{env 'CONSUL_DOCS_LEARN_URL'}}/tutorials/consul/distributed-semaphore'
@icon='learn-link'
@iconPosition='trailing'
@size='small'
/>
</li>
</BlockSlot>

Expand Down
39 changes: 21 additions & 18 deletions ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,25 +102,29 @@
</fieldset>
{{/if}}
<div>
<Hds::ButtonSet>
{{#if (and (is "new nspace" item=item) (can "create nspaces"))}}
<Action
@type="submit"
{{disabled
(or
<Hds::Button
type="submit"
disabled={{or
(is "pristine nspace" item=item)
(state-matches state "error")
)
}}
>
Save
</Action>
@text='Save'
/>
{{else if (can "write nspace" item=item)}}
<Action @type="submit">Save</Action>
<Hds::Button
type='submit'
@text='Save'
/>
{{/if}}

<Action @type="reset" {{on "click" (fn this.onCancel item)}}>
Cancel
</Action>
<Hds::Button
type='reset'
@color='secondary'
@text='Cancel'
{{on 'click' (fn this.onCancel item)}}
/>

{{#if
(and
Expand All @@ -132,13 +136,12 @@
@message="Are you sure you want to delete this Namespace?"
>
<BlockSlot @name="action" as |confirm|>
<Action
<Hds::Button
data-test-delete
class="type-delete"
@color='critical'
@text='Delete'
{{on "click" (fn confirm (fn writer.delete item))}}
>
Delete
</Action>
/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
<DeleteConfirmation
Expand All @@ -149,7 +152,7 @@
</BlockSlot>
</ConfirmationDialog>
{{/if}}

</Hds::ButtonSet>
</div>
</StateChart>
</form>
Expand Down
26 changes: 21 additions & 5 deletions ui/packages/consul-nspaces/app/templates/dc/nspaces/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,11 @@ as |route|>
</BlockSlot>
<BlockSlot @name="actions">
{{#if (can "create nspaces")}}
<a data-test-create href="{{href-to 'dc.nspaces.create'}}" class="type-create">Create</a>
<Hds::Button
@text='Create'
@route='dc.nspaces.create'
data-test-create
/>
{{/if}}
</BlockSlot>
<BlockSlot @name="toolbar">
Expand Down Expand Up @@ -117,11 +121,23 @@ as |route|>
</p>
</BlockSlot>
<BlockSlot @name="actions">
<li class="docs-link">
<a href="{{env 'CONSUL_DOCS_URL'}}/commands/namespace" rel="noopener noreferrer" target="_blank">Documentation on namespaces</a>
<li>
<Hds::Link::Standalone
@text='Documentation on namespaces'
@href="{{env 'CONSUL_DOCS_URL'}}/commands/namespace"
@icon='docs-link'
@iconPosition='trailing'
@size='small'
/>
</li>
<li class="learn-link">
<a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/namespaces/secure-namespaces" rel="noopener noreferrer" target="_blank">Read the guide</a>
<li>
<Hds::Link::Standalone
@text='Read the guide'
@href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/namespaces/secure-namespaces"
@icon='learn-link'
@iconPosition='trailing'
@size='small'
/>
</li>
</BlockSlot>
</EmptyState>
Expand Down
43 changes: 23 additions & 20 deletions ui/packages/consul-partitions/app/components/consul/partition/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,34 +84,37 @@ as |State Guard ChartAction dispatch state|>
</fieldset>

<div>
<Hds::ButtonSet>


{{#if (and (is "new partition" item=item) (can "create partitions")) }}
<Action
@type="submit"
{{disabled (or (is "pristine partition" item=item) (state-matches state "error"))}}
>
Save
</Action>
<Hds::Button
@text='Save'
type='submit'
disabled={{or (is "pristine partition" item=item) (state-matches state "error")}}
/>
{{else if (not readOnly)}}
<Action @type="submit">Save</Action>
<Hds::Button
@text='Save'
type='submit'
/>
{{/if}}

<Action
@type="reset"
{{on 'click' (if @oncancel (fn @oncancel item) (fn @onsubmit item))}}
>
Cancel
</Action>
<Hds::Button
@text='Cancel'
type='reset'
@color='secondary'
{{on 'click' (if @oncancel (fn (optional @oncancel item)) (fn (optional @onsubmit item)))}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

niiiice

/>

{{#if (and (not (is "new partition" item=item)) (can "delete partition" item=item))}}
<ConfirmationDialog @message="Are you sure you want to delete this Partition?">
<BlockSlot @name="action" as |confirm|>
<Action
<Hds::Button
@text='Delete'
data-test-delete
class="type-delete"
@color='critical'
{{on 'click' (fn confirm (fn writer.delete item))}}
>
Delete
</Action>
/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
<DeleteConfirmation
Expand All @@ -122,7 +125,7 @@ as |State Guard ChartAction dispatch state|>
</BlockSlot>
</ConfirmationDialog>
{{/if}}

</Hds::ButtonSet>
</div>

</StateChart>
Expand Down
12 changes: 5 additions & 7 deletions ui/packages/consul-partitions/app/templates/dc/partitions/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,11 @@ as |route|>
</BlockSlot>
<BlockSlot @name="actions">
{{#if (can 'create partitions')}}
<a
data-test-create
class="type-create"
href="{{href-to 'dc.partitions.create'}}"
>
Create
</a>
<Hds::Button
@text='Create'
@route='dc.partitions.create'
data-test-create
/>
{{/if}}
</BlockSlot>
<BlockSlot @name="toolbar">
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
as |address index|
>
<li
class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0 flex items-center justify-between group"
class="px-3 h-12 border-bottom-primary flex items-center justify-between group"
>
<div
class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold"
Expand Down
3 changes: 3 additions & 0 deletions ui/packages/consul-peerings/app/components/consul/peer/address/list/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.border-bottom-primary {
border-bottom: 1px solid var(--token-color-border-primary);
}
Loading