Merge branch 'main' into minor-styling-fixes

Author: anandtiwary

projects/common/src/time/time-range.service.test.ts

@@ -81,4 +81,11 @@ describe('Time range service', () => {
       });
     });
   });
+
+  test('returns custom time filter', () => {
+    const spectator = buildService();
+    expect(spectator.service.toQueryParams(new Date(1642296703000), new Date(1642396703000))).toStrictEqual({
+      ['time']: new FixedTimeRange(new Date(1642296703000), new Date(1642396703000)).toUrlString()
+    });
+  });
 });

projects/common/src/time/time-range.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { isEmpty } from 'lodash-es';
 import { EMPTY, ReplaySubject } from 'rxjs';
 import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
-import { NavigationService } from '../navigation/navigation.service';
+import { NavigationService, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
 import { RelativeTimeRange } from './relative-time-range';
@@ -110,4 +110,12 @@ export class TimeRangeService {
   public static toFixedTimeRange(startTime: Date, endTime: Date): FixedTimeRange {
     return new FixedTimeRange(startTime, endTime);
   }
+
+  public toQueryParams(startTime: Date, endTime: Date): QueryParamObject {
+    const newTimeRange = new FixedTimeRange(startTime, endTime);
+
+    return {
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
+    };
+  }
 }

projects/components/src/combo-box/combo-box.component.scss

@@ -45,6 +45,13 @@
     }
   }
 
+  &.disabled {
+    background-color: $gray-2;
+    .trigger-input {
+      color: black;
+    }
+  }
+
   .trigger-control {
     height: 100%;
     width: 24px;

projects/components/src/combo-box/combo-box.component.ts

@@ -34,15 +34,21 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
     }
   ],
   template: `
-    <ht-popover (popoverOpen)="this.onPopoverOpen($event)" (popoverClose)="this.onPopoverClose()" class="combo-box">
+    <ht-popover
+      class="combo-box"
+      [disabled]="this.disabled"
+      (popoverOpen)="this.onPopoverOpen($event)"
+      (popoverClose)="this.onPopoverClose()"
+    >
       <ht-popover-trigger>
         <div
           #trigger
           class="popover-trigger"
           [ngClass]="{
             input: this.mode === '${ComboBoxMode.Input}',
             chip: this.mode === '${ComboBoxMode.Chip}',
-            'show-border': this.showBorder
+            'show-border': this.showBorder,
+            disabled: this.disabled
           }"
           [class.has-text]="this.text"
           [class.input-focused]="input.matches(':focus')"
@@ -79,6 +85,7 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
 
           <!-- Clear Button -->
           <div
+            *ngIf="!this.disabled"
             [class.has-text]="this.text"
             [class.input-focused]="input.matches(':focus')"
             [ngClass]="this.mode"
@@ -427,6 +434,10 @@ export class ComboBoxComponent<TValue = string> implements AfterViewInit, OnChan
     });
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private propagateValueChangeToFormControl(value?: string): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);

projects/components/src/copy-to-clipboard/copy-to-clipboard.component.ts

@@ -132,7 +132,7 @@ export class CopyToClipboardComponent implements OnInit, OnDestroy {
         locationPreferences: [PopoverRelativePositionLocation.AboveCentered]
       },
       componentOrTemplate: this.notificationTemplate,
-      backdrop: PopoverBackdrop.Transparent
+      backdrop: PopoverBackdrop.None
     });
 
     return of(popoverRef).pipe(

projects/components/src/input/input.component.ts

@@ -86,6 +86,7 @@ export class InputComponent<T extends string | number> implements ControlValueAc
   public registerOnTouched(onTouch: (value: T | undefined) => void): void {
     this.propagateControlValueChangeOnTouch = onTouch;
   }
+
   public setDisabledState(isDisabled?: boolean): void {
     this.disabled = isDisabled ?? false;
   }

projects/components/src/overlay/sheet/sheet-overlay.component.ts

@@ -44,7 +44,6 @@ import { SheetOverlayConfig, SheetSize } from './sheet';
           class="trigger-icon"
           icon="{{ this.isViewCollapsed ? '${IconType.ChevronUp}' : '${IconType.ChevronDown}' }}"
           size="${IconSize.Small}"
-          htTooltip="{{ this.isViewCollapsed ? 'Expand Sheet' : 'Collapse Sheet' }}"
         ></ht-icon>
         <ng-container *ngTemplateOutlet="this.attachedTriggerTemplate"></ng-container>
       </div>

projects/components/src/popover/popover-position-builder.ts

@@ -109,6 +109,11 @@ export class PopoverPositionBuilder {
         return globalPosition.centerHorizontally().centerVertically();
       case PopoverFixedPositionLocation.Right:
         return globalPosition.right('0').top('0');
+
+      case PopoverFixedPositionLocation.Custom:
+        return globalPosition
+          .left(`${popoverPosition.customLocation!.x}px`)
+          .top(`${popoverPosition.customLocation!.y}px`);
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
         return globalPosition.right('0').top(this.headerHeight ?? '0');

projects/components/src/popover/popover.ts

@@ -34,6 +34,10 @@ export interface PopoverRelativePosition {
 export interface PopoverFixedPosition {
   type: PopoverPositionType.Fixed;
   location: PopoverFixedPositionLocation;
+  customLocation?: {
+    x: number;
+    y: number;
+  };
 }
 
 export type PopoverPosition =
@@ -65,7 +69,8 @@ export const enum PopoverRelativePositionLocation {
 export const enum PopoverFixedPositionLocation {
   RightUnderHeader,
   Centered,
-  Right
+  Right,
+  Custom
 }
 
 export const POPOVER_DATA = new InjectionToken<unknown>('POPOVER_DATA');

projects/components/src/select/select.component.ts

@@ -324,6 +324,10 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     this.propagateControlValueChangeOnTouch = onTouch;
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private propagateValueChangeToFormControl(value: V | undefined): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);