sbom dependency tree enhancements

appknox · Mar 5, 2025 · 47be6f4 · 47be6f4
1 parent 351b48e
commit 47be6f4
Show file tree

Hide file tree

Showing 17 changed files with 513 additions and 152 deletions.
diff --git a/app/components/sbom/component-details/overview/index.ts b/app/components/sbom/component-details/overview/index.ts
@@ -31,6 +31,7 @@ export default class SbomComponentDetailsOverviewComponent extends Component<Sbo
   @service declare intl: IntlService;
   @service declare store: Store;
   @service declare router: RouterService;
+  @service('notifications') declare notify: NotificationService;
 
   @tracked expandedNodes: string[] = [];
   @tracked treeNodes: AkTreeNodeProps[] = [];
@@ -158,6 +159,8 @@ export default class SbomComponentDetailsOverviewComponent extends Component<Sbo
       const sbProjectId = this.sbomProject?.get('id') || '';
       const sbFileId = this.sbomFile?.get('id') || '';
 
+      this.notify.error(this.intl.t('sbomModule.parentComponentNotFound'));
+
       this.router.transitionTo(
         'authenticated.dashboard.sbom.component-details',
         sbProjectId,

diff --git a/app/components/sbom/empty-loading-view/index.hbs b/app/components/sbom/empty-loading-view/index.hbs
@@ -1,10 +1,10 @@
 {{! @glint-nocheck: or}}
 {{#if (or @empty @loading)}}
   <AkStack
-    local-class='empty-loading-container'
+    local-class='empty-loading-container 
+    {{if @skeleton "skeleton"}} 
+    {{if this.tree "" "list"}}'
     {{style height=(or @height '500px')}}
-    @alignItems='center'
-    @justifyContent='center'
     @direction='column'
     @spacing='2.5'
   >
@@ -23,7 +23,7 @@
         {{else}}
           <AkSvg::EmptyLoadingList
             width={{@loadingSvgWidth}}
-            height={{or @loadingSvgHeight '50%'}}
+            height={{or @loadingSvgHeight '40%'}}
             data-test-sbom-loadingSvg
           />
         {{/if}}

diff --git a/app/components/sbom/empty-loading-view/index.scss b/app/components/sbom/empty-loading-view/index.scss
@@ -2,12 +2,15 @@
   width: 100%;
   border: 1px solid var(--sbom-empty-loading-view-border-color);
   border-radius: var(--sbom-empty-loading-view-border-radius);
-  padding: 1em;
   justify-content: center;
   align-items: center;
 
   &.skeleton {
     justify-content: flex-start;
     align-items: flex-start;
   }
+
+  &.list {
+    border: 0px;
+  }
 }
diff --git a/app/components/sbom/scan-details/component-tree/index.hbs b/app/components/sbom/scan-details/component-tree/index.hbs
@@ -64,7 +64,7 @@
             @alignItems='center'
             @width='full'
             local-class='tree-node {{if
-              (or node.dataObject.hasNextSibling this.hasMoreComponents)
+              node.dataObject.hasNextSibling
               ""
               "last-node"
             }}'
@@ -133,7 +133,7 @@
                 @underline='hover'
                 data-test-component-tree-nodeLabel
               >
-                {{node.dataObject.bomRef}}&nbsp;:&nbsp;{{node.label}}
+                {{node.dataObject.purl}}
               </AkTypography>
             </AkButton>
 
@@ -142,14 +142,19 @@
             />
 
             {{#if node.dataObject.isHighlighted}}
-              <AkStack local-class='highlighted-return-icon-container'>
+              <AkTooltip
+                @title={{t 'highlightedNodeTooltip'}}
+                @placement='right'
+                @arrow={{true}}
+                local-class='highlighted-return-icon-container'
+              >
                 <AkIcon
                   data-test-component-tree-returnIcon
                   @iconName='keyboard-return'
                   @size='small'
                   local-class='highlighted-return-icon'
                 />
-              </AkStack>
+              </AkTooltip>
             {{/if}}
           </AkStack>
 
@@ -162,10 +167,8 @@
                     @color='secondary'
                     @underline='always'
                     @typographyFontWeight='medium'
-                    {{on
-                      'click'
-                      (fn this.handleLoadMoreChildren node.parent.key)
-                    }}
+                    {{on 'click' (fn this.handleLoadMoreChildren node.parent)}}
+                    data-test-component-tree-child-viewMore
                   >
                     <:default>{{t 'viewMore'}}</:default>
                     <:rightIcon>