-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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: Part 1 - hds adoption replace <Modal> #23363
Changes from 11 commits
ae781b5
8d3bbfd
a557905
c5c3fb6
a0dd4f9
a884455
5977606
7ae2cb4
19e2a7d
d6d9923
90d2fba
69f0bac
e3a0aa0
5648440
ed168c7
713d9c1
552817a
1444a41
a7e9c66
4ab8c97
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,11 +23,24 @@ | |
</div> | ||
{{/if}} | ||
<div class="field"> | ||
{{#if @model.isNew}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<Toolbar> | ||
<label class="has-text-weight-bold">Policy</label> | ||
<ToolbarActions> | ||
<div class="toolbar-separator"></div> | ||
<Toolbar> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<label class="has-text-weight-bold has-right-margin-xxs">Policy</label> | ||
{{#if @renderPolicyExampleModal}} | ||
{{! only true in policy create and edit routes }} | ||
<ToolbarFilters> | ||
<Hds::Button | ||
@text="How to write a policy" | ||
@icon="bulb" | ||
@size="small" | ||
@color="tertiary" | ||
{{on "click" (fn (mut this.showTemplateModal))}} | ||
data-test-policy-example-button | ||
/> | ||
</ToolbarFilters> | ||
{{/if}} | ||
<ToolbarActions> | ||
<div class="toolbar-separator"></div> | ||
{{#if @model.isNew}} | ||
<div class="control is-flex"> | ||
<Input | ||
id="fileUploadToggle" | ||
|
@@ -40,25 +53,24 @@ | |
/> | ||
<label for="fileUploadToggle">Upload file</label> | ||
</div> | ||
</ToolbarActions> | ||
</Toolbar> | ||
{{#if this.showFileUpload}} | ||
<TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} /> | ||
{{else}} | ||
<JsonEditor | ||
@title="Policy" | ||
@showToolbar={{false}} | ||
@value={{@model.policy}} | ||
@valueUpdated={{action (mut @model.policy)}} | ||
@mode="ruby" | ||
@extraKeys={{hash Shift-Enter=(perform this.save)}} | ||
data-test-policy-editor | ||
/> | ||
{{/if}} | ||
{{else}} | ||
{{! EDITING - no file upload toggle}} | ||
<Hds::Copy::Button | ||
@text="Copy" | ||
@isIconOnly={{true}} | ||
@textToCopy={{@model.policy}} | ||
class="transparent" | ||
data-test-copy-button | ||
/> | ||
{{/if}} | ||
</ToolbarActions> | ||
</Toolbar> | ||
{{#if this.showFileUpload}} | ||
<TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} /> | ||
{{else}} | ||
{{! EDITING - no file upload toggle}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. no need to render another JsonEditor, the only difference between create/edit is create has a file upload toggle and edit renders a copy button |
||
<JsonEditor | ||
@title="Policy" | ||
@showToolbar={{false}} | ||
@value={{@model.policy}} | ||
@valueUpdated={{action (mut @model.policy)}} | ||
@mode="ruby" | ||
|
@@ -70,36 +82,6 @@ | |
<span class="is-size-9 has-text-grey has-bottom-margin-l"> | ||
You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field. | ||
</span> | ||
{{! Only renders button (and modal) if not already in the "create policy" modal }} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
{{#if @renderPolicyExampleModal}} | ||
<span class="is-size-9 has-text-grey has-bottom-margin-l"> | ||
See | ||
<button | ||
type="button" | ||
class="text-button has-text-info" | ||
{{on "click" (fn (mut this.showTemplateModal))}} | ||
data-test-policy-example-button | ||
> | ||
example template | ||
</button>. | ||
</span> | ||
{{! Only renders more information if already in the "create policy" modal }} | ||
{{else}} | ||
<p class="has-top-margin-l"> | ||
More information about | ||
{{uppercase @model.policyType}} | ||
policies can be found | ||
<DocLink | ||
@path={{if | ||
(eq @model.policyType "acl") | ||
"/vault/docs/concepts/policies#capabilities" | ||
"/vault/tutorials/policies/sentinel#role-governing-policies-rgps" | ||
}} | ||
> | ||
here. | ||
</DocLink> | ||
</p> | ||
{{/if}} | ||
</div> | ||
</div> | ||
{{#each @model.additionalAttrs as |attr|}} | ||
|
@@ -128,26 +110,26 @@ | |
</div> | ||
</div> | ||
</form> | ||
{{! SAMPLE POLICY MODAL. Only renders modal if not already in create policy modal }} | ||
{{#if @renderPolicyExampleModal}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this arg is only used to hide/show the Modal toggle button in the toolbar above |
||
<Modal | ||
@title="Example {{uppercase @model.policyType}} Policy" | ||
|
||
{{! SAMPLE POLICY MODAL. Only renders in policy create and edit routes }} | ||
{{#if this.showTemplateModal}} | ||
<Hds::Modal | ||
id="policy-example-modal" | ||
@size="large" | ||
@onClose={{fn (mut this.showTemplateModal) false}} | ||
@isActive={{this.showTemplateModal}} | ||
@showCloseButton={{true}} | ||
data-test-policy-example-modal | ||
as |M| | ||
> | ||
<section class="modal-card-body"> | ||
{{! code-mirror modifier does not render value initially until focus event fires }} | ||
{{! wait until the Modal is rendered and then show the PolicyExample (contains JsonEditor) }} | ||
{{#if this.showTemplateModal}} | ||
<PolicyExample @policyType={{@model.policyType}} /> | ||
{{/if}} | ||
</section> | ||
<div class="modal-card-head has-border-top-light"> | ||
<button type="button" class="button" {{on "click" (fn (mut this.showTemplateModal) false)}} data-test-close-modal> | ||
Close | ||
</button> | ||
</div> | ||
</Modal> | ||
<M.Header> | ||
Example | ||
{{uppercase @model.policyType}} | ||
Policy | ||
</M.Header> | ||
<M.Body> | ||
<PolicyExample @policyType={{@model.policyType}} /> | ||
</M.Body> | ||
<M.Footer as |F|> | ||
<Hds::Button @text="Close" {{on "click" F.close}} data-test-close-modal /> | ||
</M.Footer> | ||
</Hds::Modal> | ||
{{/if}} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -386,3 +386,17 @@ a.button.disabled { | |
} | ||
} | ||
} | ||
|
||
.hds-button { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Doing the same thing as we did for copy button, making new classes to match structure. When we remove finally There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok so this is to preserve the existing styling but ultimately we will want consistent HDS styling once the button component is adopted and this can be removed? If so a comment might be helpful just so it's easy to spot when it comes time to remove. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yep - there's a comment for this section above the |
||
&.toolbar-button { | ||
font-weight: $font-weight-semibold; | ||
background: none; | ||
border: none; | ||
box-shadow: none; | ||
&:hover:not(.disabled) { | ||
background-color: $ui-gray-100; | ||
border: 0; | ||
color: $blue; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,14 +15,12 @@ | |
</div> | ||
<div class="header-right"> | ||
{{#if this.hasCsvData}} | ||
<button | ||
<Hds::Button | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
data-test-attribution-export-button | ||
type="button" | ||
class="button is-secondary" | ||
@text="Export attribution data" | ||
@color="secondary" | ||
{{on "click" (fn (mut this.showCSVDownloadModal) true)}} | ||
> | ||
Export attribution data | ||
</button> | ||
/> | ||
{{/if}} | ||
</div> | ||
</div> | ||
|
@@ -91,41 +89,40 @@ | |
</div> | ||
|
||
{{! MODAL FOR CSV DOWNLOAD }} | ||
<Modal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
@title="Export attribution data" | ||
@type="info" | ||
@isActive={{this.showCSVDownloadModal}} | ||
@showCloseButton={{true}} | ||
@onClose={{action (mut this.showCSVDownloadModal) false}} | ||
> | ||
<section class="modal-card-body"> | ||
<p class="has-bottom-margin-s"> | ||
This export will include the namespace path, authentication method path, and the associated total, entity, and | ||
non-entity clients for the below | ||
{{if this.formattedEndDate "date range" "month"}}. | ||
</p> | ||
<p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p> | ||
<p class="has-bottom-margin-s">{{this.formattedStartDate}} {{if this.formattedEndDate "-"}} {{this.formattedEndDate}}</p> | ||
</section> | ||
<footer class="modal-card-foot modal-card-foot-outlined"> | ||
<button type="button" class="button is-primary" {{on "click" (fn this.exportChartData this.formattedCsvFileName)}}> | ||
Export | ||
</button> | ||
<button type="button" class="button is-secondary" onclick={{action (mut this.showCSVDownloadModal) false}}> | ||
Cancel | ||
</button> | ||
{{#if @upgradeExplanation}} | ||
<div class="has-text-grey is-size-8"> | ||
<AlertInline @type="warning" @isMarginless={{true}}> | ||
Your data contains an upgrade. | ||
<DocLink | ||
@path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts" | ||
> | ||
Learn more here. | ||
</DocLink> | ||
</AlertInline> | ||
<p class="has-left-padding-l">{{@upgradeExplanation}}</p> | ||
</div> | ||
{{/if}} | ||
</footer> | ||
</Modal> | ||
{{#if this.showCSVDownloadModal}} | ||
<Hds::Modal id="attribution-csv-download-modal" @onClose={{fn (mut this.showCSVDownloadModal) false}} as |M|> | ||
<M.Header @icon="info"> | ||
Export attribution data | ||
</M.Header> | ||
<M.Body> | ||
<p class="has-bottom-margin-s"> | ||
This export will include the namespace path, authentication method path, and the associated total, entity, and | ||
non-entity clients for the below | ||
{{if this.formattedEndDate "date range" "month"}}. | ||
</p> | ||
<p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p> | ||
<p class="has-bottom-margin-s">{{this.formattedStartDate}} | ||
{{if this.formattedEndDate "-"}} | ||
{{this.formattedEndDate}}</p> | ||
</M.Body> | ||
<M.Footer as |F|> | ||
<Hds::ButtonSet> | ||
<Hds::Button @text="Export" {{on "click" (fn this.exportChartData this.formattedCsvFileName)}} /> | ||
<Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} /> | ||
</Hds::ButtonSet> | ||
{{#if @upgradeExplanation}} | ||
<div class="has-text-grey is-size-8 has-top-padding-m"> | ||
<AlertInline @type="warning"> | ||
Your data contains an upgrade. | ||
<DocLink | ||
@path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts" | ||
> | ||
Learn more here. | ||
</DocLink> | ||
</AlertInline> | ||
<p class="has-left-padding-l">{{@upgradeExplanation}}</p> | ||
</div> | ||
{{/if}} | ||
</M.Footer> | ||
</Hds::Modal> | ||
{{/if}} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -47,47 +47,34 @@ | |
</div> | ||
</form> | ||
|
||
<Modal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
@title={{this.modalTitle}} | ||
@onClose={{action (mut this.modalOpen) false}} | ||
@isActive={{this.modalOpen}} | ||
@type="warning" | ||
@showCloseButton={{true}} | ||
> | ||
<section class="modal-card-body"> | ||
{{#if (eq @model.enabled "On")}} | ||
<p class="has-bottom-margin-s" data-test-clients-config-modal="on"> | ||
Vault will start tracking data starting from today’s date, | ||
{{date-format (now) "MMMM d, yyyy"}}. If you’ve previously enabled usage tracking, that historical data will still | ||
be available to you. | ||
</p> | ||
{{else}} | ||
<p class="has-bottom-margin-s" data-test-clients-config-modal="off"> | ||
Turning usage tracking off means that all data for the current month will be deleted. You will still be able to | ||
query previous months. | ||
</p> | ||
<p>Are you sure?</p> | ||
{{/if}} | ||
</section> | ||
<footer class="modal-card-foot modal-card-foot-outlined"> | ||
<button | ||
type="button" | ||
class="button is-primary" | ||
data-test-clients-config-modal="continue" | ||
{{on "click" (perform this.save)}} | ||
> | ||
Continue | ||
</button> | ||
<button | ||
type="button" | ||
class="button is-secondary" | ||
{{on "click" (fn (mut this.modalOpen) false)}} | ||
data-test-clients-config-modal="cancel" | ||
> | ||
Cancel | ||
</button> | ||
</footer> | ||
</Modal> | ||
{{#if this.modalOpen}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<Hds::Modal id="clients-config-modal" @color="warning" @onClose={{fn (mut this.modalOpen) false}} as |M|> | ||
<M.Header @icon="alert-triangle"> | ||
{{this.modalTitle}} | ||
</M.Header> | ||
<M.Body> | ||
{{#if (eq @model.enabled "On")}} | ||
<p class="has-bottom-margin-s" data-test-clients-config-modal="on"> | ||
Vault will start tracking data starting from today’s date, | ||
{{date-format (now) "MMMM d, yyyy"}}. If you’ve previously enabled usage tracking, that historical data will | ||
still be available to you. | ||
</p> | ||
{{else}} | ||
<p class="has-bottom-margin-s" data-test-clients-config-modal="off"> | ||
Turning usage tracking off means that all data for the current month will be deleted. You will still be able to | ||
query previous months. | ||
</p> | ||
<p>Are you sure?</p> | ||
{{/if}} | ||
</M.Body> | ||
<M.Footer as |F|> | ||
<Hds::ButtonSet> | ||
<Hds::Button @text="Continue" {{on "click" (perform this.save)}} data-test-clients-config-modal="continue" /> | ||
<Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} /> | ||
</Hds::ButtonSet> | ||
</M.Footer> | ||
</Hds::Modal> | ||
{{/if}} | ||
{{else}} | ||
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-clients-config-table> | ||
{{#each this.infoRows as |item|}} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cleaned up this view a bit while I was here 🧹