fix: 🐛 place modal outside table (#2251)

This commit is contained in:
Dharini Jeeva authored and GitHub committed 2024-04-17 11:40:23 -07:00
1 parent 9b20b150eb
commit 086d9da028
1 file changed
+51 -57
@@ -2,6 +2,7 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<Rose::Layout::Page as |page|>
<page.breadcrumbs>
<Breadcrumbs::Container />
@@ -25,6 +26,7 @@
{{/if}}
</page.actions>
<page.body>
{{#if @model}}
<Hds::Table
@model={{@model}}
@@ -119,63 +121,6 @@
@color='critical'
{{on 'click' (fn this.toggleModal B.data.alias)}}
/>
{{#if this.showModal}}
<Hds::Modal
class='alias-deletion-modal'
@color='warning'
@onClose={{this.toggleModal}}
as |M|
>
<M.Header @icon='alert-triangle'>
{{t 'questions.delete-confirm'}}
</M.Header>
<M.Body>
<p
class='hds-typography-body-300 hds-foreground-primary'
>
{{#if this.hasDestinationId}}
{{t 'resources.alias.messages.clear-or-delete'}}
{{else}}
{{t 'resources.alias.messages.delete'}}
{{/if}}
</p>
</M.Body>
<M.Footer>
<Hds::ButtonSet>
<Hds::Button
type='button'
@text={{t 'actions.delete'}}
{{on
'click'
(fn this.deleteAlias this.selectedAlias)
}}
/>
{{#if this.hasDestinationId}}
<Hds::Button
type='button'
@text={{t 'actions.clear'}}
@color='secondary'
{{on
'click'
(fn this.clearAlias this.selectedAlias)
}}
/>
{{/if}}
<Hds::Button
type='button'
@text={{t 'actions.cancel'}}
@color='secondary'
{{on 'click' this.toggleModal}}
/>
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
{{/if}}
</Hds::Dropdown>
@@ -217,5 +162,54 @@
</Rose::Message>
</Rose::Layout::Centered>
{{/if}}
{{#if this.showModal}}
<Hds::Modal
class='alias-deletion-modal'
@color='warning'
@onClose={{this.toggleModal}}
as |M|
>
<M.Header @icon='alert-triangle'>
{{t 'questions.delete-confirm'}}
</M.Header>
<M.Body>
<p class='hds-typography-body-300 hds-foreground-primary'>
{{#if this.hasDestinationId}}
{{t 'resources.alias.messages.clear-or-delete'}}
{{else}}
{{t 'resources.alias.messages.delete'}}
{{/if}}
</p>
</M.Body>
<M.Footer>
<Hds::ButtonSet>
<Hds::Button
type='button'
@text={{t 'actions.delete'}}
{{on 'click' (fn this.deleteAlias this.selectedAlias)}}
/>
{{#if this.hasDestinationId}}
<Hds::Button
type='button'
@text={{t 'actions.clear'}}
@color='secondary'
{{on 'click' (fn this.clearAlias this.selectedAlias)}}
/>
{{/if}}
<Hds::Button
type='button'
@text={{t 'actions.cancel'}}
@color='secondary'
{{on 'click' this.toggleModal}}
/>
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
</page.body>
</Rose::Layout::Page>