Improve display of documents tab when multiple documents are loaded

rhyskoedijk · Jan 3, 2025 · 6d4a891 · 6d4a891
1 parent 5606e00
commit 6d4a891
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 20 deletions.
diff --git a/ui/components/sbom/SbomDocumentHeader.tsx b/ui/components/sbom/SbomDocumentHeader.tsx
@@ -87,7 +87,7 @@ export class SbomDocumentHeader extends React.Component<Props, State> {
         id: 'exportSvg',
         text: 'Export to SVG',
         iconProps: {
-          iconName: 'BranchFork2',
+          iconName: 'FlowChart',
         },
         important: false,
         disabled: artifact.loadSvgDocumentAsync === undefined,

diff --git a/ui/components/sbom/SbomDocumentPage.tsx b/ui/components/sbom/SbomDocumentPage.tsx
@@ -109,7 +109,7 @@ export class SbomDocumentPage extends React.Component<Props, State> {
     }
     // TODO: Use page providers; https://developer.microsoft.com/en-us/azure-devops/components/page#page-with-providers
     return (
-      <Page orientation={Orientation.Vertical}>
+      <Page orientation={Orientation.Vertical} className="flex-grow">
         <SbomDocumentHeader artifact={this.props.artifact} onLoadArtifact={this.props.onLoadArtifact} />
         <TabBar
           onSelectedTabChanged={this.onSelectedTabChanged}
@@ -136,7 +136,7 @@ export class SbomDocumentPage extends React.Component<Props, State> {
             <Tab
               id="relationships"
               name="Relationship View"
-              iconProps={{ iconName: 'BranchFork2', className: 'margin-right-4' }}
+              iconProps={{ iconName: 'FlowChart', className: 'margin-right-4' }}
             />
           ) : null}
         </TabBar>

diff --git a/ui/components/sbom/SpdxFileTableCard.tsx b/ui/components/sbom/SpdxFileTableCard.tsx
@@ -153,7 +153,7 @@ export class SpdxFileTableCard extends React.Component<Props, State> {
     if (!this.state?.tableItems?.length) {
       return (
         <ZeroData
-          iconProps={{ iconName: 'Package' }}
+          iconProps={{ iconName: 'TextDocument' }}
           primaryText={this.props.filter.getFilterItemValue('keyword') ? 'No Match' : 'No Files'}
           secondaryText={
             this.props.filter.getFilterItemValue('keyword')

diff --git a/ui/components/sbom/SpdxRelationshipCard.tsx b/ui/components/sbom/SpdxRelationshipCard.tsx
@@ -75,7 +75,7 @@ export class SpdxRelationshipCard extends React.Component<Props, State> {
             <Spinner label="Loading graph data..." />
           ) : !this.state.documentSvgMarkup ? (
             <ZeroData
-              iconProps={{ iconName: 'BranchFork2' }}
+              iconProps={{ iconName: 'FlowChart' }}
               primaryText="Graph Data Missing"
               secondaryText="Document does not contain graph data."
               imageAltText=""

diff --git a/ui/sbom-report-tab.scss b/ui/sbom-report-tab.scss
@@ -17,10 +17,6 @@ $severity-none-background: var(--status-neutral-background);
   display: flex;
 }
 
-.text-on-communication-background {
-  color: var(--text-on-communication-background);
-}
-
 .flex-gap-4 {
   gap: 4px;
 }
@@ -40,3 +36,18 @@ $severity-none-background: var(--status-neutral-background);
 .overflow-hidden {
   overflow: hidden !important;
 }
+
+.text-on-communication-background {
+  color: var(--text-on-communication-background);
+}
+
+.bolt-tabbar-compact .bolt-tablist-title,
+.bolt-tabbar-compact .bolt-tablist-subtitle,
+.bolt-tabbar-compact .bolt-tablist-heading,
+.bolt-tabbar-compact .bolt-tab {
+  padding-left: 8px;
+}
+
+.bolt-tabbar-compact .bolt-tab-text {
+  overflow: hidden !important;
+}
diff --git a/ui/sbom-report-tab.tsx b/ui/sbom-report-tab.tsx
@@ -8,7 +8,7 @@ import { ObservableValue } from 'azure-devops-ui/Core/Observable';
 import { MessageCard, MessageCardSeverity } from 'azure-devops-ui/MessageCard';
 import { Observer } from 'azure-devops-ui/Observer';
 import { Spinner } from 'azure-devops-ui/Spinner';
-import { Tab, TabBar, TabContent, TabSize } from 'azure-devops-ui/Tabs';
+import { Tab, TabContent, TabList, TabSize } from 'azure-devops-ui/Tabs';
 import { ZeroData } from 'azure-devops-ui/ZeroData';
 
 import '../shared/extensions/ArrayExtensions';
@@ -204,7 +204,7 @@ export class Root extends React.Component<{}, State> {
         ) : this.state.artifacts.length == 0 ? (
           <ZeroData
             iconProps={{ iconName: 'Certificate' }}
-            primaryText="Empty"
+            primaryText="No artifacts found"
             secondaryText="Unable to find any SBOM artifacts for this build."
             imageAltText=""
           />
@@ -214,19 +214,24 @@ export class Root extends React.Component<{}, State> {
             onLoadArtifact={(file) => this.loadSbomArtifactFromFileUpload(file)}
           />
         ) : (
-          <div className="flex flex-column">
-            <TabBar
+          <div className="flex flex-row">
+            <TabList
               onSelectedTabChanged={this.onSelectedArtifactTabChanged}
               selectedTabId={this.selectedArtifactId}
               tabSize={TabSize.Compact}
-              className="bolt-tabbar-grey margin-bottom-16"
-              tabsClassName="flex-wrap flex-shrink"
-              disableSticky={true}
+              className="bolt-tabbar-grey bolt-tabbar-compact flex-shrink"
+              tabGroups={[{ id: 'manifests', name: 'Manifests' }]}
             >
               {this.state.artifacts.map((artifact, index) => (
-                <Tab key={index} id={artifact.id} name={getDisplayNameForDocument(artifact.spdxDocument)} />
+                <Tab
+                  key={index}
+                  id={artifact.id}
+                  groupId="manifests"
+                  name={getDisplayNameForDocument(artifact.spdxDocument)}
+                  iconProps={{ iconName: 'Certificate', className: 'margin-right-4' }}
+                />
               ))}
-            </TabBar>
+            </TabList>
             <TabContent>
               <Observer selectedArtifactId={this.selectedArtifactId}>
                 {(props: { selectedArtifactId: string }) =>
@@ -238,9 +243,10 @@ export class Root extends React.Component<{}, State> {
                     />
                   ) : (
                     <ZeroData
+                      className="flex-grow"
                       iconProps={{ iconName: 'Certificate' }}
-                      primaryText="No document selected"
-                      secondaryText="Please select an SBOM build artifact to view its details."
+                      primaryText="Artifact not found"
+                      secondaryText="Unable to find the selected SBOM artifact."
                       imageAltText=""
                     />
                   )