From 80167508879512709a6511e9cef0dafc198261d8 Mon Sep 17 00:00:00 2001 From: Khanjan Dalwadi <80506682+KD1712@users.noreply.github.com> Date: Wed, 10 Jul 2024 19:52:20 +0530 Subject: [PATCH] Added collapsible functionality to toggle all section cards (#1741) Co-authored-by: Yagnik Hingrajiya <50392803+Yagnik56@users.noreply.github.com> --- ...ure-flag-details-page-content.component.html | 10 +++++++++- ...ature-flag-details-page-content.component.ts | 6 ++++++ ...re-flag-exclusions-section-card.component.ts | 2 +- ...ure-flag-exposures-section-card.component.ts | 17 ++++++++++++++--- ...re-flag-inclusions-section-card.component.ts | 3 +-- ...g-overview-details-section-card.component.ts | 11 +++++------ 6 files changed, 36 insertions(+), 13 deletions(-) diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html index fb374ba420..77db00743a 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html @@ -3,21 +3,29 @@ inclusions-card exclusions-card - exposures-card diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts index b352c439df..d387cd2f5b 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts @@ -28,6 +28,7 @@ import { SharedModule } from '../../../../../../shared/shared.module'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy { + isSectionCardExpanded = true; activeTabIndex$ = this.featureFlagsService.activeDetailsTabIndex$; featureFlag$: Observable; @@ -42,6 +43,11 @@ export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy this.featureFlag$ = this.featureFlagsService.selectedFeatureFlag$; } + + onSectionCardExpandChange(expanded: boolean) { + this.isSectionCardExpanded = expanded; + } + ngOnDestroy() { this.featureFlagIdSub.unsubscribe(); } diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts index 82ef722230..80aac588e1 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts @@ -26,8 +26,8 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea changeDetection: ChangeDetectionStrategy.OnPush, }) export class FeatureFlagExclusionsSectionCardComponent { + @Input() isSectionCardExpanded; tableRowCount$ = this.featureFlagService.selectFeatureFlagExclusionsLength$; - isSectionCardExpanded = true; constructor(private featureFlagService: FeatureFlagsService) {} diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts index 0bc6512dce..5ad928ccda 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts @@ -1,5 +1,9 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { CommonSectionCardActionButtonsComponent, CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent } 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'; @@ -8,14 +12,21 @@ import { CommonModule } from '@angular/common'; @Component({ selector: 'app-feature-flag-exposures-section-card', standalone: true, - imports: [CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent, CommonSectionCardActionButtonsComponent, CommonModule, TranslateModule, FeatureFlagExposuresDataComponent], + 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; + @Input() isSectionCardExpanded; onSectionCardExpandChange(isSectionCardExpanded: boolean) { this.isSectionCardExpanded = isSectionCardExpanded; diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts index 81951af67e..7dfdd8e124 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts @@ -26,6 +26,7 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea changeDetection: ChangeDetectionStrategy.OnPush, }) export class FeatureFlagInclusionsSectionCardComponent { + @Input() isSectionCardExpanded; tableRowCount$ = this.featureFlagService.selectFeatureFlagInclusionsLength$; constructor(private featureFlagService: FeatureFlagsService) {} @@ -35,8 +36,6 @@ export class FeatureFlagInclusionsSectionCardComponent { { name: 'Delete', disabled: false }, ]; - isSectionCardExpanded = true; - addIncludeListClicked() { console.log('add Include List Clicked'); } diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts index f78f82a1ff..01d235c9f6 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { CommonSectionCardActionButtonsComponent, CommonSectionCardComponent, @@ -28,6 +28,8 @@ import { DialogService } from '../../../../../../../shared/services/common-dialo changeDetection: ChangeDetectionStrategy.OnPush, }) export class FeatureFlagOverviewDetailsSectionCardComponent { + isSectionCardExpanded = true; + @Output() sectionCardExpandChange = new EventEmitter(); featureFlag$ = this.featureFlagService.selectedFeatureFlag$; flagOverviewDetails$ = this.featureFlagService.selectedFlagOverviewDetails; @@ -35,12 +37,8 @@ export class FeatureFlagOverviewDetailsSectionCardComponent { { name: 'Edit', disabled: false }, { name: 'Delete', disabled: false }, ]; - isSectionCardExpanded = true; - constructor( - private dialogService: DialogService, - private featureFlagService: FeatureFlagsService, - ) {} + constructor(private dialogService: DialogService, private featureFlagService: FeatureFlagsService) {} get FEATURE_FLAG_STATUS() { return FEATURE_FLAG_STATUS; @@ -82,5 +80,6 @@ export class FeatureFlagOverviewDetailsSectionCardComponent { onSectionCardExpandChange(isSectionCardExpanded: boolean) { this.isSectionCardExpanded = isSectionCardExpanded; + this.sectionCardExpandChange.emit(this.isSectionCardExpanded); } }