Skip to content

Commit

Permalink
added header and content component for exposures (#1697)
Browse files Browse the repository at this point in the history
Co-authored-by: danoswaltCL <[email protected]>
  • Loading branch information
Yagnik56 and danoswaltCL authored Jun 27, 2024
1 parent 85fb2da commit 4b1f359
Show file tree
Hide file tree
Showing 11 changed files with 59 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,5 @@
</app-common-section-card-action-buttons>

<!-- content -->
<app-feature-flag-exclusions-table content
class="full-width"
></app-feature-flag-exclusions-table>
<app-feature-flag-exclusions-table content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-exclusions-table>
</app-common-section-card>
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea
})
export class FeatureFlagExclusionsSectionCardComponent {
tableRowCount$ = this.featureFlagService.selectFeatureFlagExclusionsLength$;
isSectionCardExpanded = true;

constructor(private featureFlagService: FeatureFlagsService) {}

Expand All @@ -35,8 +36,6 @@ export class FeatureFlagExclusionsSectionCardComponent {
{ name: 'Delete', disabled: false },
];

isSectionCardExpanded = true;

addExcludeListClicked() {
console.log('add Exclude List Clicked');
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="exposures-data">
<span class="ft-16-500">
Add Exposures data here!
</span>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { FeatureFlagsService } from '../../../../../../../../core/feature-flags/feature-flags.service';
import { CommonDetailsParticipantListTableComponent } from '../../../../../../../../shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

@Component({
selector: 'app-feature-flag-exposures-data',
standalone: true,
templateUrl: './feature-flag-exposures-data.component.html',
styleUrl: './feature-flag-exposures-data.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonDetailsParticipantListTableComponent, CommonModule, TranslateModule],
})
export class FeatureFlagExposuresDataComponent {}
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
<app-common-section-card>
<div header-left style="background-color: lightpink; height: 90px; width: 100%">header-left</div>
<div header-right style="background-color: lightpink; height: 90px; width: 100%">header-right</div>
<div content style="background-color: lightpink; height: 90px; width: 100%">content: Exposures</div>
<!-- header-left -->
<app-common-section-card-title-header
header-left
[title]="'feature-flags.details.exposures.card.title.text' | translate"
[subtitle]="'feature-flags.details.exposures.card.subtitle.text' | translate"
></app-common-section-card-title-header>

<!-- header-right -->
<app-common-section-card-action-buttons
header-right
[isSectionCardExpanded]="isSectionCardExpanded"
(sectionCardExpandChange)="onSectionCardExpandChange($event)"
>
</app-common-section-card-action-buttons>

<!-- content -->
<app-feature-flag-exposures-data content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-exposures-data>
</app-common-section-card>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.full-width {
width: 100%;
}
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonSectionCardComponent } from '../../../../../../../shared-standalone-component-lib/components';
import { CommonSectionCardActionButtonsComponent, CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent } from '../../../../../../../shared-standalone-component-lib/components';
import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
import { TranslateModule } from '@ngx-translate/core';
import { FeatureFlagExposuresDataComponent } from './feature-flag-exposures-data/feature-flag-exposures-data.component';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-feature-flag-exposures-section-card',
standalone: true,
imports: [CommonSectionCardComponent],
imports: [CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent, CommonSectionCardActionButtonsComponent, CommonModule, TranslateModule, FeatureFlagExposuresDataComponent],
templateUrl: './feature-flag-exposures-section-card.component.html',
styleUrl: './feature-flag-exposures-section-card.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FeatureFlagExposuresSectionCardComponent {
@Input() data: FeatureFlag;
isSectionCardExpanded = true;

onSectionCardExpandChange(isSectionCardExpanded: boolean) {
this.isSectionCardExpanded = isSectionCardExpanded;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@
</app-common-section-card-action-buttons>

<!-- content -->
<app-feature-flag-inclusions-table content class="full-width"></app-feature-flag-inclusions-table>
<app-feature-flag-inclusions-table content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-inclusions-table>
</app-common-section-card>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
::ng-deep .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-labels .mat-mdc-tab:first-of-type {
margin-left: 0;
}
2 changes: 2 additions & 0 deletions frontend/projects/upgrade/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,8 @@
"feature-flags.details.exclusions.card.no-data-row.text": "No Exclude Lists defined.",
"feature-flags.details.exclusions.card.title.text": "Exclude Lists",
"feature-flags.details.exclusions.card.subtitle.text": "Define Exclude lists for this feature flag",
"feature-flags.details.exposures.card.title.text": "Exposures",
"feature-flags.details.exposures.card.subtitle.text": "View total exposures for the feature flag during the specific period.",
"feature-flags.details.add-exclude-list.button.text": "Add Exclude List",
"feature-flags.table-variation-type.text": "Variation type",
"feature-flags.overview.flag-variation-type.text": "Flag Variation Type",
Expand Down

0 comments on commit 4b1f359

Please sign in to comment.