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: Part 1 - hds adoption replace <Modal> #23363

Merged
merged 20 commits into from
Sep 28, 2023
Merged

UI: Part 1 - hds adoption replace <Modal> #23363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ae781b5
replace policy-form modal
hellobontempo Sep 28, 2023
8d3bbfd
replace clients/attribution modal
hellobontempo Sep 28, 2023
a557905
clients/config modal
hellobontempo Sep 28, 2023
c5c3fb6
scope form odal
hellobontempo Sep 28, 2023
a0dd4f9
remove button type
hellobontempo Sep 28, 2023
a884455
include toolbar to match other example templates
hellobontempo Sep 28, 2023
5977606
rotate credentials modal
hellobontempo Sep 28, 2023
7ae2cb4
add toolbar button class for hds buttons
hellobontempo Sep 28, 2023
19e2a7d
transformation-edit modal
hellobontempo Sep 28, 2023
d6d9923
add back test selector
hellobontempo Sep 28, 2023
90d2fba
add route arg to button!
hellobontempo Sep 28, 2023
69f0bac
update link status
hellobontempo Sep 28, 2023
e3a0aa0
fix link-status tests
hellobontempo Sep 28, 2023
5648440
remove prevent default
hellobontempo Sep 28, 2023
ed168c7
update db tests
hellobontempo Sep 28, 2023
713d9c1
update tests
hellobontempo Sep 28, 2023
552817a
use page alert for hcp link status banner
hellobontempo Sep 28, 2023
1444a41
fix scopy button selector
hellobontempo Sep 28, 2023
a7e9c66
fix sidebar test
hellobontempo Sep 28, 2023
4ab8c97
change to neutral banner
hellobontempo Sep 28, 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
8 changes: 4 additions & 4 deletions ui/app/components/database-connection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@ export default class DatabaseConnectionEdit extends Component {
}

@action
continueWithoutRotate(evt) {
evt.preventDefault();
continueWithoutRotate() {
this.showSaveModal = false;
const { name } = this.args.model;
this.transitionToRoute(SHOW_ROUTE, name);
}

@action
continueWithRotate(evt) {
evt.preventDefault();
continueWithRotate() {
this.showSaveModal = false;
const { backend, name } = this.args.model;
this.rotateCredentials(backend, name)
.then(() => {
Expand Down
122 changes: 52 additions & 70 deletions ui/app/components/policy-form.hbs
View file
Open in desktop
Copy link
Contributor Author

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 🧹

Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,24 @@
</div>
{{/if}}
<div class="field">
{{#if @model.isNew}}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

policy-old

<Toolbar>
<label class="has-text-weight-bold">Policy</label>
<ToolbarActions>
<div class="toolbar-separator"></div>
<Toolbar>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

policy-new

<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"
Expand All @@ -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}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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"
Expand All @@ -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 }}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These links were incorrect - this copy and correct links already render below the example policy in the modal
Screenshot 2023-09-27 at 5 39 23 PM

{{#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|}}
Expand Down Expand Up @@ -128,26 +110,26 @@
</div>
</div>
</form>
{{! SAMPLE POLICY MODAL. Only renders modal if not already in create policy modal }}
{{#if @renderPolicyExampleModal}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 data-test-modal-title>
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-modal-close-button />
</M.Footer>
</Hds::Modal>
{{/if}}
26 changes: 0 additions & 26 deletions ui/app/styles/components/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,3 @@
color: $black;
}
}

.link-status {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: $size-7;
font-weight: $font-weight-semibold;

&.connected {
background-color: var(--token-color-surface-action);
color: var(--token-color-foreground-action-active);

a {
color: var(--token-color-foreground-action-active);
}
}
&.warning {
background-color: var(--token-color-surface-warning);
color: var(--token-color-palette-amber-300);

a {
color: var(--token-color-palette-amber-300);
}
}
}
16 changes: 16 additions & 0 deletions ui/app/styles/core/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ a.button.disabled {
}
}

// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
// Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
.hds-copy-button {
font-weight: $font-weight-semibold;
Expand Down Expand Up @@ -386,3 +387,18 @@ a.button.disabled {
}
}
}

// Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
.hds-button {
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 .button class we can audit these with design

Copy link
Contributor

Choose a reason for hiding this comment

The 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yep - there's a comment for this section above the .hds-copy-button class changes. I can add another here

&.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;
}
}
}
86 changes: 42 additions & 44 deletions ui/app/templates/components/clients/attribution.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@
</div>
<div class="header-right">
{{#if this.hasCsvData}}
<button
<Hds::Button
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screenshot 2023-09-27 at 5 41 54 PM

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>
Expand Down Expand Up @@ -91,41 +89,41 @@
</div>

{{! MODAL FOR CSV DOWNLOAD }}
<Modal
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screenshot 2023-09-27 at 5 42 29 PM

@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" data-test-export-modal-title>
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" data-test-export-date-range>
{{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}}
Loading
Loading