Commit 0d04ba49 authored by Alexander Turinske's avatar Alexander Turinske

Update dependency list location text

- truncate it if it is too long

Changelog: changed

EE: true
parent 36253cf0
...@@ -27,6 +27,10 @@ const tdClass = (value, key, item) => { ...@@ -27,6 +27,10 @@ const tdClass = (value, key, item) => {
classes.push('text-right'); classes.push('text-right');
} }
if (key === 'location') {
classes.push('gl-md-max-w-15p');
}
return classes; return classes;
}; };
......
<script> <script>
import { GlIcon, GlLink, GlPopover, GlIntersperse } from '@gitlab/ui'; import { GlIcon, GlIntersperse, GlLink, GlPopover, GlTruncate } from '@gitlab/ui';
import { n__ } from '~/locale'; import { n__ } from '~/locale';
import DependencyPathViewer from './dependency_path_viewer.vue'; import DependencyPathViewer from './dependency_path_viewer.vue';
...@@ -10,9 +10,10 @@ export default { ...@@ -10,9 +10,10 @@ export default {
components: { components: {
DependencyPathViewer, DependencyPathViewer,
GlIcon, GlIcon,
GlIntersperse,
GlLink, GlLink,
GlPopover, GlPopover,
GlIntersperse, GlTruncate,
}, },
props: { props: {
location: { location: {
...@@ -50,9 +51,14 @@ export default { ...@@ -50,9 +51,14 @@ export default {
<gl-intersperse separator=" / " class="gl-text-gray-500"> <gl-intersperse separator=" / " class="gl-text-gray-500">
<!-- We need to put an extra span to avoid separator between path & top level label --> <!-- We need to put an extra span to avoid separator between path & top level label -->
<span> <span>
<gl-link :href="location.blob_path"> <gl-link class="gl-display-inline-block gl-lg-display-block!" :href="location.blob_path">
<gl-icon name="doc-text" class="gl-vertical-align-middle!" /> <gl-icon name="doc-text" />
{{ location.path }} <gl-truncate
class="gl-lg-max-w-80p gl-display-none gl-lg-display-inline-flex"
:text="location.path"
with-tooltip
/>
<span class="gl-lg-display-none">{{ location.path }}</span>
</gl-link> </gl-link>
<span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span> <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
</span> </span>
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
align-items: flex-start; align-items: flex-start;
} }
.gl-md-max-w-30p { .gl-md-max-w-15p {
@media (min-width: $breakpoint-md) { @media (min-width: $breakpoint-md) {
max-width: 30%; max-width: $gl-spacing-scale-15;
} }
} }
.gl-md-w-50p { .gl-lg-max-w-80p {
@media (min-width: $breakpoint-md) { @media (min-width: $breakpoint-lg) {
width: 50%; max-width: 80%;
} }
} }
...@@ -44,7 +44,7 @@ describe('DependenciesTable component', () => { ...@@ -44,7 +44,7 @@ describe('DependenciesTable component', () => {
const locationLink = locationCell.find(GlLink); const locationLink = locationCell.find(GlLink);
expect(locationLink.attributes().href).toBe(dependency.location.blob_path); expect(locationLink.attributes().href).toBe(dependency.location.blob_path);
expect(locationLink.text()).toBe(dependency.location.path); expect(locationLink.text()).toContain(dependency.location.path);
const licenseLinks = licenseCell.find(DependencyLicenseLinks); const licenseLinks = licenseCell.find(DependencyLicenseLinks);
expect(licenseLinks.exists()).toBe(true); expect(licenseLinks.exists()).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment