Small UI changes in the sync report

README.md

@@ -50,6 +50,14 @@ export const App = () => {
 };
 ```
 
+#### Group-by selector
+
+By default, the "Show by:" dropdown (which groups issues by file, category, ID, or type) is visible. Pass `showGroupBySelector={false}` to hide it:
+
+```tsx
+<Report data={report} workflowMapping={mapping} showGroupBySelector={false} />
+```
+
 ### 4. Advanced usage
 
 This package uses a composition approach to provide extreme flexibility. Smaller components are exported and can be passed as `children` of `Report`, which

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/synchronization-report-react",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "files": [
     "dist"
   ],

src/components/Report.tsx

@@ -104,6 +104,7 @@ export const Report = ({
   applicationInsightInstrumentationKey,
   SyncReportOpenedEventProps,
   issueArticleOpenEventProps,
+  showGroupBySelector = true,
 }: {
   /** The report data should be compatible with the type definitions. */
   data: ReportData;
@@ -114,6 +115,8 @@ export const Report = ({
   workflowMapping?: WorkflowMapping;
   className?: string;
   children?: React.ReactNode;
+  /** When false, hides the "Show by:" group-by dropdown. Defaults to true. */
+  showGroupBySelector?: boolean;
 }) => {
   const [selectedTable, setSelectedTable] = React.useState<Tables>('problems');
   const [currentAuditInfo, setCurrentAuditInfo] = React.useState<AuditInfo | undefined>();
@@ -237,9 +240,11 @@ export const Report = ({
               <Label as='span'>Issues found by severity</Label>
               <ReportBanner />
             </ReportHeaderBannerWrapper>
-            <ReportTableSelectWrapper>
-              <ReportTableSelect />
-            </ReportTableSelectWrapper>
+            {showGroupBySelector && (
+              <ReportTableSelectWrapper>
+                <ReportTableSelect />
+              </ReportTableSelectWrapper>
+            )}
             <ReportInfoPanelWrapper>
               <ProblemsTable />
               <ReportInfoPanel />

src/components/ReportBanner.scss

@@ -5,7 +5,11 @@
 
 .isr-banner-container {
   display: flex;
-  padding: var(--iui-size-s) var(--iui-size-xs);
-  width: fit-content;
-  gap: var(--iui-size-xs);
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  border: 2px solid var(--iui-color-border);
+  border-radius: var(--iui-border-radius-1);
+  overflow: hidden;
 }

src/components/ReportBanner.tsx

@@ -7,7 +7,7 @@ import { FileRecord, SourceFile } from './report-data-typings';
 import './ReportBanner.scss';
 import { BannerTile, StatusIcon } from './utils';
 import { Issues, ReportContext } from './Report';
-import { Surface, Text } from '@itwin/itwinui-react';
+import { Surface } from '@itwin/itwinui-react';
 import SvgFlag from '@itwin/itwinui-icons-react/esm/icons/Flag';
 
 const defaultDisplayStrings = {
@@ -124,45 +124,35 @@ export const ReportBanner = (props: ReportBannerProps) => {
   const onClickIssue = React.useCallback((issue: Issues) => context?.setFocusedIssue(issue), [context]);
 
   return (
-    <Surface elevation={1} className='isr-banner-container'>
-      <>
-        <BannerTile icon={<SvgFlag />} onClick={() => onClickIssue('All')} selected={context?.focusedIssue === 'All'}>
-          <Text variant='title' style={{ fontWeight: 'bold' }}>
-            {issuesCount}
-          </Text>
-          <Text variant='small'>{displayStrings.totalIssues}</Text>
-        </BannerTile>
-        <BannerTile
-          onClick={() => onClickIssue('Error')}
-          selected={context?.focusedIssue === 'Error'}
-          icon={<StatusIcon status='error' />}
-        >
-          <Text variant='title' style={{ fontWeight: 'bold' }}>
-            {errorCount}
-          </Text>
-          <Text variant='small'>{displayStrings.errors}</Text>
-        </BannerTile>
-        <BannerTile
-          onClick={() => onClickIssue('Warning')}
-          selected={context?.focusedIssue === 'Warning'}
-          icon={<StatusIcon status='warning' />}
-        >
-          <Text variant='title' style={{ fontWeight: 'bold' }}>
-            {warningCount}
-          </Text>
-          <Text variant='small'>{displayStrings.warnings}</Text>
-        </BannerTile>
-        <BannerTile
-          onClick={() => onClickIssue('Info')}
-          selected={context?.focusedIssue === 'Info'}
-          icon={<StatusIcon status='informational' />}
-        >
-          <Text variant='title' style={{ fontWeight: 'bold' }}>
-            {infoCount}
-          </Text>
-          <Text variant='small'>{displayStrings.otherIssues}</Text>
-        </BannerTile>
-      </>
-    </Surface>
+    <div className='isr-banner-container'>
+      <BannerTile icon={<SvgFlag />} onClick={() => onClickIssue('All')} selected={context?.focusedIssue === 'All'}>
+        {displayStrings.totalIssues}
+        {issuesCount}
+      </BannerTile>
+      <BannerTile
+        onClick={() => onClickIssue('Error')}
+        selected={context?.focusedIssue === 'Error'}
+        icon={<StatusIcon status='error' />}
+      >
+        {displayStrings.errors}
+        {errorCount}
+      </BannerTile>
+      <BannerTile
+        onClick={() => onClickIssue('Warning')}
+        selected={context?.focusedIssue === 'Warning'}
+        icon={<StatusIcon status='warning' />}
+      >
+        {displayStrings.warnings}
+        {warningCount}
+      </BannerTile>
+      <BannerTile
+        onClick={() => onClickIssue('Info')}
+        selected={context?.focusedIssue === 'Info'}
+        icon={<StatusIcon status='informational' />}
+      >
+        {displayStrings.otherIssues}
+        {infoCount}
+      </BannerTile>
+    </div>
   );
 };

src/components/utils/BannerTile.scss

@@ -4,47 +4,46 @@
  *--------------------------------------------------------------------------------------------*/
 
 .isr-banner-tile-item {
-  display: flex;
-  flex-direction: column;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: var(--iui-size-s);
-  padding: calc(var(--iui-size-s) / 2) var(--iui-size-l);
-  border-right: 1px solid var(--iui-color-border-subtle);
-  width: calc(var(--iui-size-m) * 11);
+  justify-content: center;
+  gap: var(--iui-size-xs);
+  padding: 0 var(--iui-size-m);
+  border-right: 2px solid var(--iui-color-border-subtle);
+  flex: 1;
+  height: 100%;
+  font-size: var(--iui-font-size-0);
+  background-color: var(--iui-color-background);
 
   &-on-click {
     cursor: pointer;
   }
 
   &:last-child {
-    border: 0;
+    border-right: 0;
   }
 
   .isr-banner-tile-icon {
-    fill: var(--iui-color-icon-muted);
-    width: var(--iui-size-l);
-    height: var(--iui-size-l);
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
   }
 
   .isr-banner-tile-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
     font-weight: bold;
-    height: calc(var(--iui-size-s) * 6);
+    white-space: nowrap;
   }
 
   .isr-banner-tile-footer {
-    display: flex;
-    font-style: italic;
-    text-align: center;
-    flex: 1;
+    white-space: nowrap;
   }
 
   &-selected {
-    outline: solid 2px var(--iui-color-border-accent);
     background-color: var(--iui-color-background-accent-muted);
+    outline: solid 2px var(--iui-color-border-accent);
   }
 }

src/components/utils/BannerTile.tsx

@@ -28,7 +28,7 @@ export const BannerTile = (props: BannerTileProps) => {
     >
       {icon && <div className='isr-banner-tile-icon'>{icon}</div>}
       <span className='isr-banner-tile-body'>{children[0]}</span>
-      <span className='isr-banner-tile-footer'>{children[1]}</span>
+      <span className='isr-banner-tile-footer'>({children[1]})</span>
     </div>
   );
 };

src/components/utils/StatusIcon.scss

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .isr-status-icon {
-  width: var(--iui-size-l);
-  height: var(--iui-size-l);
+  width: var(--iui-size-m);
+  height: var(--iui-size-m);
 
   &-success {
     fill: var(--iui-color-icon-positive);