Make sure that `vulnerabilities` is always defined in the Dependency List

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35171

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -63,8 +63,13 @@ export default {
     // passed to it in order to track the visibilty of each row's `row-details`
     // slot. So, create a deep clone of them here to avoid mutating the
     // `dependencies` prop.
+    // We also make sure that `vulnerabilities` is always defined to prevent rendering
+    // errors when the user is allowe to see dependencies but not their vulnerabilities.
     transformDependenciesForUI(dependencies) {
-      return cloneDeep(dependencies);
+      return dependencies.map(({ vulnerabilities, ...dep }) => ({
+        ...cloneDeep(dep),
+        vulnerabilities: vulnerabilities ? cloneDeep(vulnerabilities) : [],
+      }));
     },
   },
   fields: [

ee/changelogs/unreleased/218497-vulnerabilities-undefined.yml

+---
+title: Fixes a bug that would prevent the dependencies list from rendering for user that aren't authorized to see the vulnerabilities
+merge_request: 35171
+author:
+type: fixed

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

@@ -54,7 +54,7 @@ describe('DependenciesTable component', () => {
     });
 
     const isVulnerableCellText = normalizeWhitespace(isVulnerableCell.text());
-    if (dependency.vulnerabilities.length) {
+    if (dependency?.vulnerabilities?.length) {
       expect(isVulnerableCellText).toContain(`${dependency.vulnerabilities.length} vuln`);
     } else {
       expect(isVulnerableCellText).toBe('');
@@ -105,13 +105,17 @@ describe('DependenciesTable component', () => {
     });
   });
 
-  describe('given dependencies with no vulnerabilities', () => {
+  describe.each`
+    description                                                             | vulnerabilitiesPayload
+    ${'given dependencies with no vulnerabilities'}                         | ${{ vulnerabilities: [] }}
+    ${'given dependencies when user is not allowed to see vulnerabilities'} | ${{}}
+  `('$description', ({ vulnerabilitiesPayload }) => {
     let dependencies;
 
     beforeEach(() => {
       dependencies = [
-        makeDependency({ vulnerabilities: [] }),
-        makeDependency({ name: 'foo', vulnerabilities: [] }),
+        makeDependency({ ...vulnerabilitiesPayload }),
+        makeDependency({ name: 'foo', ...vulnerabilitiesPayload }),
       ];
 
       createComponent({