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-19478] Fix info table row value overflow #22776

Merged
merged 4 commits into from
Sep 5, 2023
Merged

UI: [VAULT-19478] Fix info table row value overflow #22776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
285f492
Pair with Angel on fixing info table row value overflow
kiannaquach Sep 5, 2023
210ff66
Update so it uses flex instead of a set width
kiannaquach Sep 5, 2023
598b087
Address feedback!
kiannaquach Sep 5, 2023
c1c599b
Remove did-insert
kiannaquach Sep 5, 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
6 changes: 6 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 @@ -97,6 +97,12 @@
overflow: hidden;
}

.text-overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

// screen reader only
.sr-only {
border: 0;
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/core/addon/components/info-table-row.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<Icon @name="minus" />
{{/if}}
</div>
<div class="column is-flex" data-test-value-div={{@label}}>
<div class="column {{if @truncateValue 'is-two-thirds is-flex-center' 'is-flex'}}" data-test-value-div={{@label}}>
{{#if @addCopyButton}}
<div class="display-only">
<CopyButton
Expand Down
1 change: 1 addition & 0 deletions ui/lib/core/addon/components/info-table-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { action } from '@ember/object';
* @param {string} helperText=null - Text to describe the value displayed beneath the label.
* @param {any} value=null - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. Overridden by block if exists
* @param {boolean} [alwaysRender=false] - Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render.
* @param {boolean} [truncateValue=false] - Indicates if the value should be truncated.
* @param {string} [defaultShown] - Text that renders as value if alwaysRender=true. Eg. "Vault default"
* @param {string} [tooltipText] - Text if a tooltip should display over the value.
* @param {boolean} [isTooltipCopyable] - Allows tooltip click to copy
Expand Down
4 changes: 2 additions & 2 deletions ui/lib/kv/addon/components/page/secret/paths.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
{{#each this.paths as |path|}}
<InfoTableRow @label={{path.label}} @labelWidth="is-one-third" @helperText={{path.text}}>
<InfoTableRow @label={{path.label}} @labelWidth="is-one-third" @helperText={{path.text}} @truncateValue={{true}}>
{{! replace with Hds::Copy::Snippet }}
<CopyButton
class="button is-compact is-transparent level-right"
Expand All @@ -25,7 +25,7 @@
>
<Icon @name="clipboard-copy" aria-label="Copy" />
</CopyButton>
<code class="has-left-margin-s level-left">
<code class="is-flex-1 text-overflow-ellipsis has-left-margin-s">
{{path.snippet}}
</code>
</InfoTableRow>
Expand Down