Follow-up from "Update dependency list location text"

The following discussion from !74643 (merged) should be addressed:

• @pgascouvaillancourt started a discussion: (+2 comments)

  thought: I feel like we should try to cleanup this helper to avoid stacking up the conditionals in there. Perhaps we could turn it into a curried function where the first argument would be the column's default class(es). Something like this:

  diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
  index 032df95f6b5..26eac86eaa8 100644
  --- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
  +++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
  @@ -14,8 +14,8 @@ import DependencyLicenseLinks from './dependency_license_links.vue';
   import DependencyLocation from './dependency_location.vue';
   import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
   
  -const tdClass = (value, key, item) => {
  -  const classes = [];
  +const tdClass = (defaultClasses = []) => (value, key, item) => {
  +  const classes = defaultClasses;
   
     // Don't draw a border between a row and its `row-details` slot
     // eslint-disable-next-line no-underscore-dangle
  @@ -23,14 +23,6 @@ const tdClass = (value, key, item) => {
       classes.push('border-bottom-0');
     }
   
  -  if (key === 'isVulnerable') {
  -    classes.push('text-right');
  -  }
  -
  -  if (key === 'location') {
  -    classes.push('gl-md-max-w-15p');
  -  }
  -
     return classes;
   };
   
  @@ -88,11 +80,11 @@ export default {
       },
     },
     fields: [
  -    { key: 'component', label: s__('Dependencies|Component'), tdClass },
  -    { key: 'packager', label: s__('Dependencies|Packager'), tdClass },
  -    { key: 'location', label: s__('Dependencies|Location'), tdClass },
  -    { key: 'license', label: s__('Dependencies|License'), tdClass },
  -    { key: 'isVulnerable', label: '', tdClass },
  +    { key: 'component', label: s__('Dependencies|Component'), tdClass: tdClass() },
  +    { key: 'packager', label: s__('Dependencies|Packager'), tdClass: tdClass() },
  +    { key: 'location', label: s__('Dependencies|Location'), tdClass: tdClass(['gl-md-max-w-15p']) },
  +    { key: 'license', label: s__('Dependencies|License'), tdClass: tdClass() },
  +    { key: 'isVulnerable', label: '', tdClass: tdClass(['text-right']) },
     ],
     DEPENDENCIES_PER_PAGE: 20,
     DEPENDENCY_PATH_LINK:

  ---

  That said, we might want to look into this logic a bit closer because it doesn't look right on mobile when you expand a row:

  

• @pgascouvaillancourt started a discussion:

  thought: I understand that we're trying to address some layout issues with the file icon on smaller viewports here. I wonder if this could be addressed by exposing some slots to prepend or append custom content in GlTruncate 🤔