Codeline Search (#9605)

* Review Search Box Logic to search codeLines * Coide Line Search Navigation * CodeLine Search Navigation * 'Improve CodeLine Scrolling * Search and Scroll * Improve Search functionality * Add tests for codeline serach
Azure · Jan 28, 2025 · 7f6ee75 · 7f6ee75
1 parent c476b1e
commit 7f6ee75
Show file tree

Hide file tree

Showing 15 changed files with 452 additions and 29 deletions.
diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss
@@ -30,6 +30,7 @@
     /*----Shadows and Glows------------------------------------------*/
     --outer-glow: #{tint-color($primary, 80%)};
     --shadow-color: rgba(#{$black}, .15);
+    --shadow-color-primary: 0 0 0 0.15rem #{rgba($primary, 0.5)};
     --box-shadow: 0 .5rem 1rem #{rgba($black, .15)};
     --box-shadow-sm: 0 .125rem .25rem #{rgba($black, .075)};
     --box-shadow-lg: 0 1rem 3rem #{rgba($black, .175)};
@@ -120,6 +121,7 @@
     /*----Shadows and Glows------------------------------------------*/
     --outer-glow: #{tint-color($primary-color, 80%)};
     --shadow-color: rgba(#{$white}, .15);
+    --shadow-color-primary: 0 0 0 0.15rem #{rgba($primary-color, 0.5)};
     --box-shadow: 0 .5rem 1rem #{rgba($white, .15)};
     --box-shadow-sm: 0 .125rem .25rem #{rgba($white, .075)};
     --box-shadow-lg: 0 1rem 3rem #{rgba($white, .175)};

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.html
@@ -2,7 +2,7 @@
 <div *ngIf="isLoading" class="spinner-border m-3" role="status">
     <span class="visually-hidden">Loading...</span>
 </div>
-<div *ngIf="codePanelRowSource;" class="viewport {{languageSafeName!}}" (click)="onCodePanelItemClick($event)">
+<div *ngIf="codePanelRowSource;" id="viewport" class="{{languageSafeName!}}" (click)="onCodePanelItemClick($event)">
   <p-messages class="sticky-top" *ngIf="showNoDiffInContentMessage()" [(value)]="noDiffInContentMessage" [closable]="false" />
   <div *uiScroll="let item of codePanelRowSource; let index = index" class="code-line" [attr.data-node-id]="item.nodeIdHashed"
     [attr.data-row-position-in-group]="item.rowPositionInGroup" [attr.data-row-type]="item.type" [ngClass]="getRowClassObject(item)">

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.scss
@@ -9,7 +9,7 @@
     line-height: 1.5;
     display: block;
 
-    .viewport {
+    #viewport {
         overflow: auto;
         height: calc(100vh - 132px);
         will-change: scroll-position, contents;
@@ -219,6 +219,18 @@
         text-decoration: line-through;
     }
 
+    .codeline-search-match-highlight {
+        background-color: var(--primary-color);
+        color: var(--primary-btn-color);
+        padding: 0px;
+        margin: 0px;
+
+        &.active {
+            background-color: red;
+        }
+    }
+
+
 
     .java {
         .javadoc {

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts
@@ -115,5 +115,47 @@ describe('CodePanelComponent', () => {
       expect(clipboardSpy).toHaveBeenCalledWith('\ttoken1\ntoken2');
     });
   });
+
+  describe('searchCodePanelRowData', () => {
+    it('should be defined', () => {
+      expect(component.searchCodePanelRowData).toBeDefined();
+    });
+
+    it('should handle no matches gracefully', () => {
+      const token1 = new StructuredToken();
+      token1.value = 'token1';
+      const token2 = new StructuredToken();
+      token2.value = 'token2';
+      const codePanelRowData1 = new CodePanelRowData();
+      codePanelRowData1.rowOfTokens = [token1, token2];
+      component.codePanelRowData = [codePanelRowData1];
+      component.searchCodePanelRowData('nonexistent');
+      expect(component.codeLineSearchMatchInfo?.length).toBeUndefined();
+    });
+
+    it('should handle an empty search term', () => {
+      const token1 = new StructuredToken();
+      token1.value = 'token1';
+      const token2 = new StructuredToken();
+      token2.value = 'token2';
+      const codePanelRowData1 = new CodePanelRowData();
+      codePanelRowData1.rowOfTokens = [token1, token2];
+      component.codePanelRowData = [codePanelRowData1];
+      component.searchCodePanelRowData('');
+      expect(component.codeLineSearchMatchInfo?.length).toBeUndefined();
+    });
+  });
+
+  describe('highlightSearchMatches', () => {
+    it('should be defined', () => {
+      expect(component.highlightSearchMatches).toBeDefined();
+    });
+
+    it('should clear previous highlights', () => {
+      spyOn(component, 'clearSearchMatchHighlights');
+      component.highlightSearchMatches();
+      expect(component.clearSearchMatchHighlights).toHaveBeenCalled();
+    });
+  });
 
 });