Skip to content

Commit bfd26ae

Browse files
chahat99chahat99
authored
Merge branch 'main' into privacy_new_tab
2 parents 50e0acf + c31de98 commit bfd26ae

19 files changed

+315
-132
lines changed

‎.github/workflows/stats.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: Pull Request Stats
2+
3+
on:
4+
pull_request:
5+
types: [opened]
6+
7+
jobs:
8+
stats:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Run pull request stats
12+
uses: flowwer-dev/pull-request-stats@master

‎package-lock.json‎

Lines changed: 28 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"@types/d3-hierarchy": "^2.0.2",
4444
"@types/d3-transition": "1.1.5",
4545
"apollo-angular": "^2.6.0",
46-
"core-js": "^3.23.5",
46+
"core-js": "^3.24.0",
4747
"d3-array": "^2.12.0",
4848
"d3-axis": "^2.1.0",
4949
"d3-brush": "^1.1.6",
@@ -66,11 +66,11 @@
6666
"lodash-es": "^4.17.21",
6767
"mixpanel-browser": "^2.45.0",
6868
"ngx-color": "7.0.0",
69-
"rudder-sdk-js": "^2.9.1",
69+
"rudder-sdk-js": "^2.9.2",
7070
"rxjs": "~6.6.7",
7171
"tslib": "^2.4.0",
7272
"uuid": "^8.3.2",
73-
"zone.js": "~0.11.6"
73+
"zone.js": "~0.11.7"
7474
},
7575
"devDependencies": {
7676
"@angular-builders/jest": "^11.2.0",
@@ -97,7 +97,7 @@
9797
"@types/jest": "^27.4.1",
9898
"@types/lodash-es": "^4.17.6",
9999
"@types/mixpanel-browser": "^2.38.0",
100-
"@types/node": "^18.0.6",
100+
"@types/node": "^18.6.1",
101101
"@types/uuid": "^8.3.4",
102102
"@types/webpack-env": "^1.17.0",
103103
"codelyzer": "^6.0.2",

‎projects/components/src/file-upload/file-display/file-display.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
@import 'mixins';
22

3+
.file-display-container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
width: 100%;
8+
9+
.progress-bar {
10+
width: 100%;
11+
}
12+
}
13+
314
.file-display {
415
display: flex;
516
align-items: center;

‎projects/components/src/file-upload/file-display/file-display.component.test.ts‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FormattingModule } from '@hypertrace/common';
22
import { createComponentFactory } from '@ngneat/spectator/jest';
33
import { MockComponent } from 'ng-mocks';
44
import { IconComponent } from '../../icon/icon.component';
5-
import { FileUploadState } from './file-display';
5+
import { FileUploadEventType } from '../file-upload.service';
66
import { FileDisplayComponent } from './file-display.component';
77

88
describe('File Display Component', () => {
@@ -23,19 +23,32 @@ describe('File Display Component', () => {
2323
expect(spectator.query('.file-display')).toExist();
2424
expect(spectator.query('.file-name')).toHaveText('file.txt');
2525
expect(spectator.query('.file-size')).toHaveText('4');
26+
expect(spectator.query('.delete-icon')).not.toExist();
27+
28+
// Success state
29+
spectator.setInput({
30+
file: file,
31+
latestUploadEvent: {
32+
type: FileUploadEventType.Success,
33+
response: {}
34+
}
35+
});
36+
expect(spectator.query('.success-icon')).toExist();
37+
expect(spectator.query('.delete-icon')).toExist();
2638

2739
// Delete file action
2840
spyOn(spectator.component.deleteClick, 'emit');
2941
spectator.click(spectator.query('.delete-icon') as Element);
3042
expect(spectator.component.deleteClick.emit).toHaveBeenCalled();
3143

32-
// Success state
33-
spectator.setInput({ file: file, state: FileUploadState.Success, showState: true });
34-
expect(spectator.query('.success-icon')).toExist();
35-
expect(spectator.query('.delete-icon')).not.toExist();
36-
3744
// Failure state
38-
spectator.setInput({ file: file, state: FileUploadState.Failure, showState: true });
45+
spectator.setInput({
46+
file: file,
47+
latestUploadEvent: {
48+
type: FileUploadEventType.Failure,
49+
error: 'Failed'
50+
}
51+
});
3952
expect(spectator.query('.file-display.error')).toExist();
4053
expect(spectator.query('.failure-icon')).toExist();
4154
});

‎projects/components/src/file-upload/file-display/file-display.component.ts‎

Lines changed: 62 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,63 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
22
import { IconType } from '@hypertrace/assets-library';
33
import { Color } from '@hypertrace/common';
44
import { IconSize } from '../../icon/icon-size';
5-
import { FileUploadState } from './file-display';
5+
import {
6+
FileUploadEvent,
7+
FileUploadEventType,
8+
FileUploadFailureEvent,
9+
FileUploadProgressEvent
10+
} from '../file-upload.service';
611

712
@Component({
813
selector: 'ht-file-display',
914
styleUrls: ['./file-display.component.scss'],
1015
changeDetection: ChangeDetectionStrategy.OnPush,
1116
template: `
12-
<div *ngIf="this.file" class="file-display" [ngClass]="{ error: this.state === '${FileUploadState.Failure}' }">
13-
<ht-icon class="note-icon" icon="${IconType.Note}" size="${IconSize.Medium}" color="${Color.Blue4}"></ht-icon>
14-
<div class="file-info">
15-
<div class="basic-detail">
16-
<div class="file-name" [htTooltip]="this.file.name">{{ this.file.name }}</div>
17-
<div class="file-size">{{ this.file.size | htDisplayFileSize }}</div>
17+
<div class="file-display-container">
18+
<ht-progress-bar
19+
*ngIf="this.latestUploadEvent?.type === '${FileUploadEventType.Progress}'"
20+
class="progress-bar"
21+
[progress]="this.getProgress()"
22+
></ht-progress-bar>
23+
<div
24+
*ngIf="this.file"
25+
class="file-display"
26+
[ngClass]="{ error: this.latestUploadEvent?.type === '${FileUploadEventType.Failure}' }"
27+
>
28+
<ht-icon class="note-icon" icon="${IconType.Note}" size="${IconSize.Medium}" color="${Color.Blue4}"></ht-icon>
29+
<div class="file-info">
30+
<div class="basic-detail">
31+
<div class="file-name" [htTooltip]="this.file.name">{{ this.file.name }}</div>
32+
<div class="file-size">{{ this.file.size | htDisplayFileSize }}</div>
33+
</div>
1834
</div>
35+
<ng-container *ngIf="this.latestUploadEvent">
36+
<ng-container [ngSwitch]="this.latestUploadEvent?.type"
37+
><ng-container *ngSwitchCase="'${FileUploadEventType.Success}'"
38+
><ht-icon class="success-icon" icon="${IconType.CheckCircle}" color="${Color.Green5}"></ht-icon
39+
></ng-container>
40+
<ng-container *ngSwitchCase="'${FileUploadEventType.Failure}'"
41+
><ht-icon
42+
class="failure-icon"
43+
icon="${IconType.Alert}"
44+
color="${Color.Red6}"
45+
[htTooltip]="this.getError()"
46+
></ht-icon>
47+
</ng-container>
48+
<ng-container *ngSwitchCase="'${FileUploadEventType.Progress}'">
49+
<ht-loader class="progress-icon" htTooltip="Progress"></ht-loader>
50+
</ng-container>
51+
</ng-container>
52+
</ng-container>
53+
<ht-icon
54+
class="delete-icon"
55+
*ngIf="this.showDelete"
56+
icon="${IconType.CloseCircleFilled}"
57+
size="${IconSize.Small}"
58+
color="${Color.Gray9}"
59+
(click)="this.onDeleteClick()"
60+
></ht-icon>
1961
</div>
20-
<ng-container *ngIf="this.showState">
21-
<ng-container [ngSwitch]="this.state"
22-
><ng-container *ngSwitchCase="'${FileUploadState.Success}'"
23-
><ht-icon
24-
class="success-icon"
25-
icon="${IconType.CheckCircle}"
26-
color="${Color.Green5}"
27-
></ht-icon></ng-container
28-
><ng-container *ngSwitchCase="'${FileUploadState.Failure}'"
29-
><ht-icon
30-
class="failure-icon"
31-
icon="${IconType.Alert}"
32-
color="${Color.Red6}"
33-
[htTooltip]="this.errorStateTooltipText"
34-
></ht-icon></ng-container
35-
></ng-container>
36-
</ng-container>
37-
<ht-icon
38-
*ngIf="this.showDelete"
39-
class="delete-icon"
40-
icon="${IconType.CloseCircleFilled}"
41-
size="${IconSize.Small}"
42-
color="${Color.Gray9}"
43-
(click)="this.onDeleteClick()"
44-
></ht-icon>
4562
</div>
4663
`
4764
})
@@ -50,23 +67,27 @@ export class FileDisplayComponent {
5067
public file?: File;
5168

5269
@Input()
53-
public state: FileUploadState = FileUploadState.NotStarted;
54-
55-
@Input()
56-
public showState: boolean = false;
57-
58-
@Input()
59-
public errorStateTooltipText: string = '';
70+
public latestUploadEvent?: FileUploadEvent<unknown>;
6071

6172
@Output()
6273
public readonly deleteClick: EventEmitter<void> = new EventEmitter();
6374

64-
// Only show file delete option if file upload has not started or it has resulted in failure
6575
public get showDelete(): boolean {
66-
return this.state === FileUploadState.NotStarted || this.state === FileUploadState.Failure;
76+
return (
77+
this.latestUploadEvent?.type === FileUploadEventType.Failure ||
78+
this.latestUploadEvent?.type === FileUploadEventType.Success
79+
);
6780
}
6881

6982
public onDeleteClick(): void {
7083
this.deleteClick.emit();
7184
}
85+
86+
public getError(): string {
87+
return (this.latestUploadEvent as FileUploadFailureEvent)?.error ?? '';
88+
}
89+
90+
public getProgress(): number {
91+
return (this.latestUploadEvent as FileUploadProgressEvent)?.progress ?? 0;
92+
}
7293
}

‎projects/components/src/file-upload/file-display/file-display.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { FormattingModule } from '@hypertrace/common';
44
import { IconModule } from '../../icon/icon.module';
5+
import { LoaderModule } from '../../load-async/loader/loader.module';
56
import { TooltipModule } from '../../tooltip/tooltip.module';
7+
import { ProgressBarModule } from './../../progress-bar/progress-bar.module';
68
import { FileDisplayComponent } from './file-display.component';
79

810
@NgModule({
9-
imports: [CommonModule, IconModule, FormattingModule, TooltipModule],
11+
imports: [CommonModule, IconModule, FormattingModule, TooltipModule, LoaderModule, ProgressBarModule],
1012
declarations: [FileDisplayComponent],
1113
exports: [FileDisplayComponent]
1214
})

0 commit comments

Comments
 (0)