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: [VAULT-17365, VAULT-17613, VAULT-17614] Dashboard Secrets Engine Card Improvements #21604

Merged
merged 9 commits into from
Jul 6, 2023
Merged

UI: [VAULT-17365, VAULT-17613, VAULT-17614] Dashboard Secrets Engine Card Improvements #21604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c1b85ab
VAULT-17614 Make secret engine title bolded and underlined
kiannaquach Jul 5, 2023
4e522d5
VAULT-17613 Show ellipsis if more than one line
kiannaquach Jul 5, 2023
8666b72
Merge branch 'ui/landing-page-dashboard' into ui/new-secret-engine-ca…
kiannaquach Jul 5, 2023
d95d560
Use grid instead of flexbox
kiannaquach Jul 5, 2023
962540d
Add Show All button to indicate that there can be more secrets engine…
kiannaquach Jul 5, 2023
cf75ff7
VAULT-17365 Add rounded borders
kiannaquach Jul 6, 2023
0cc2397
Fix tests
kiannaquach Jul 6, 2023
5fb46c2
Merge branch 'ui/landing-page-dashboard' into ui/new-secret-engine-ca…
kiannaquach Jul 6, 2023
6fd735e
Revert addition of dashboard style sheet
kiannaquach Jul 6, 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
13 changes: 13 additions & 0 deletions ui/app/styles/helper-classes/general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,14 @@
overflow: hidden;
}

.truncate-first-line {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}

// screen reader only
.sr-only {
border: 0;
Expand All @@ -107,3 +115,8 @@
.border-radius-2 {
border-radius: $radius;
}

// border-spacing
.is-border-spacing-revert {
border-spacing: revert;
}
28 changes: 15 additions & 13 deletions ui/app/templates/components/dashboard/secrets-engines-card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
<div class="is-flex-between has-left-margin-xs" data-test-dashboard-secrets-engines-header>
<h3 class="title is-4">Secrets Engines</h3>
<div>
<Hds::Link::Inline @route="vault.cluster.secrets.backends" class="has-text-weight-semibold is-no-underline">
View more
</Hds::Link::Inline>
</div>
</div>
<Hds::Table @caption="Five secrets engines" class="has-border-collapse" data-test-dashboard-secrets-engines-table>
<h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets Engines</h3>
<Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
<:body as |B|>
{{#each this.filteredSecretsEngines as |backend|}}
<B.Tr data-test-secrets-engines-row={{backend.id}}>
<B.Td class="is-flex-between is-flex-center">
<B.Td class="is-flex-between is-flex-center has-gap-m">
<div>
<div class="is-flex-center">
{{#if backend.icon}}
Expand All @@ -30,7 +23,7 @@
<LinkTo
@route={{backend.backendLink}}
@model={{backend.id}}
class="has-text-black has-text-weight-semibold is-no-underline"
class="has-text-black has-text-weight-semibold"
data-test-secret-path
>
{{backend.path}}
Expand All @@ -46,7 +39,7 @@
</code>
{{/if}}
{{#if backend.description}}
<div data-test-description>
<div data-test-description class="truncate-first-line">
{{backend.description}}
</div>
{{/if}}
Expand All @@ -67,4 +60,13 @@
</B.Tr>
{{/each}}
</:body>
</Hds::Table>
</Hds::Table>
<div class="is-flex-end has-top-margin-s">
<Hds::Link::Standalone
class="has-text-weight-semibold is-no-underline"
@icon="arrow-right"
@iconPosition="trailing"
@text="Show all"
@route="vault.cluster.secrets.backends"
/>
</div>
4 changes: 1 addition & 3 deletions ui/app/templates/vault/cluster/dashboard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<h1 class="title has-top-margin-m">Vault version</h1>
<div>
<div class="is-flex-row has-gap-m has-bottom-margin-m">
<div class="is-grid grid-2-columns grid-gap-2 has-bottom-margin-m">
<Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
<Dashboard::SecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
</Hds::Card::Container>

<Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
<h3 class="title is-4">Quick Actions</h3>
</Hds::Card::Container>
</div>

<div class="is-flex-row has-gap-m">
<Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
<Dashboard::LearnMoreCard />
</Hds::Card::Container>
Expand Down
2 changes: 1 addition & 1 deletion ui/tests/helpers/components/dashboard/secrets-engines-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

const SELECTORS = {
cardTitle: '[data-test-dashboard-secrets-engines-header] h3',
cardTitle: '[data-test-dashboard-secrets-engines-header]',
secretEnginesTableRows: '[data-test-dashboard-secrets-engines-table] tr',
getSecretEngineAccessor: (engineId) => `[data-test-secrets-engines-row=${engineId}] [data-test-accessor]`,
getSecretEngineDescription: (engineId) =>
Expand Down