feature flag details page overview header left code changes (#1601)

* feature flag header left code changes * addressed the review cmts
CarnegieLearningWeb · Jun 4, 2024 · bdcdcf0 · bdcdcf0
1 parent 361ccf6
commit bdcdcf0
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 13 deletions.
diff --git a/...g-overview-details-section-card/feature-flag-overview-details-section-card.component.html b/...g-overview-details-section-card/feature-flag-overview-details-section-card.component.html
@@ -1,5 +1,16 @@
 <app-common-section-card class="details-overview-card">
-  <div header-left style="background-color: beige; height: 90px; width: 100%">header-left</div>
+  <!-- header-left -->
+  <app-common-section-card-title-header
+    [title]="flagName"
+    [createdAt]="flagCreatedAt"
+    [updatedAt]="flagUpdatedAt"
+    [showViewLogs]="true"
+    [chipClass]="flagStatus"
+    (viewLogs)="viewLogsClicked($event)"
+    header-left
+  ></app-common-section-card-title-header>
+
+  <!-- header-right -->
   <div header-right style="background-color: beige; height: 90px; width: 100%">header-right</div>
   <div content style="background-color: beige; height: 90px; width: 100%">content: Details Overview</div>
   <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer>

diff --git a/...lag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts b/...lag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
@@ -1,13 +1,59 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonSectionCardComponent } from '../../../../../../../shared-standalone-component-lib/components';
+import {
+  CommonSectionCardComponent,
+  CommonSectionCardTitleHeaderComponent,
+} from '../../../../../../../shared-standalone-component-lib/components';
 import { FeatureFlagOverviewDetailsFooterComponent } from './feature-flag-overview-details-footer/feature-flag-overview-details-footer.component';
+import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
+import { FEATURE_FLAG_STATUS, FILTER_MODE } from 'upgrade_types';
+import { FeatureFlagsService } from '../../../../../../../core/feature-flags/feature-flags.service';
 
 @Component({
   selector: 'app-feature-flag-overview-details-section-card',
   standalone: true,
-  imports: [CommonSectionCardComponent, FeatureFlagOverviewDetailsFooterComponent],
+  imports: [
+    CommonSectionCardComponent,
+    CommonSectionCardTitleHeaderComponent,
+    FeatureFlagOverviewDetailsFooterComponent,
+  ],
   templateUrl: './feature-flag-overview-details-section-card.component.html',
   styleUrl: './feature-flag-overview-details-section-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeatureFlagOverviewDetailsSectionCardComponent {}
+export class FeatureFlagOverviewDetailsSectionCardComponent {
+  //temp mock data
+  featureFlag: FeatureFlag = {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '1',
+    name: 'Feature Flag 1',
+    key: 'feature_flag_1',
+    description: 'Feature Flag 1 Description',
+    status: FEATURE_FLAG_STATUS.DISABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  };
+  flagName: string;
+  flagHeaderSubtitle: string;
+  flagCreatedAt: string;
+  flagUpdatedAt: string;
+  flagStatus: FEATURE_FLAG_STATUS;
+
+  constructor(private featureFlagService: FeatureFlagsService) {}
+
+  ngOnInit() {
+    this.flagName = this.featureFlag.name;
+    this.flagCreatedAt = this.featureFlag.createdAt;
+    this.flagUpdatedAt = this.featureFlag.updatedAt;
+    this.flagStatus = this.featureFlag.status;
+  }
+
+  viewLogsClicked(event) {
+    console.log('viewLogs Clicked');
+    console.log(event);
+  }
+}
diff --git a/...mponents/common-section-card-title-header/common-section-card-title-header.component.html b/...mponents/common-section-card-title-header/common-section-card-title-header.component.html
@@ -2,14 +2,25 @@
   <h1 class="title ft-26-700">
     {{ title | translate }}
     <ng-container *ngIf="chipClass">
-      <app-common-status-indicator-chip [chipClass] = "chipClass" ></app-common-status-indicator-chip>
+      <app-common-status-indicator-chip class="status-chip" [chipClass] = "chipClass" ></app-common-status-indicator-chip>
     </ng-container>
   </h1>
   <h3 class="subtitle ft-16-400">
-    {{ subtitle | translate }}
+    <ng-container *ngIf="subtitle">
+      {{ subtitle | translate }}
+    </ng-container>
+    <ng-container *ngIf="createdAt && updatedAt">
+      <span class="ft-16-600 segment-create-date">
+        {{ ('home.view-experiment.created-on.text' | translate) + (createdAt | formatDate: 'medium date') + ' | '}}
+      </span>
+      <span class="ft-16-600 segment-update-date">
+        {{
+          ('home.view-experiment.last-updated-on.text' | translate) + (updatedAt | formatDate: 'short date')
+        }}
+      </span>
+    </ng-container>
     <ng-container *ngIf="showViewLogs">
       <a [href]="" class="view-logs-link" (click)="viewLogsClicked()"> View logs</a>
     </ng-container>
   </h3>
-</div>
-
+</div>
diff --git a/...mponents/common-section-card-title-header/common-section-card-title-header.component.scss b/...mponents/common-section-card-title-header/common-section-card-title-header.component.scss
@@ -5,11 +5,25 @@
   justify-content: center;
 
   .title {
+    display: flex;
+    align-items: center;
     margin-bottom: 0;
   }
 
+  .status-chip {
+    margin-left: 1rem;
+    vertical-align: middle;
+  }
+
   .subtitle {
     margin-bottom: 0;
     color: var(--grey-3);
   }
+
+  .view-logs-link {
+    margin-left: 0.5rem;
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
diff --git a/...components/common-section-card-title-header/common-section-card-title-header.component.ts b/...components/common-section-card-title-header/common-section-card-title-header.component.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { TranslateModule } from '@ngx-translate/core';
 import { CommonStatusIndicatorChipComponent } from '../common-status-indicator-chip/common-status-indicator-chip.component';
 import { STATUS_INDICATOR_CHIP_TYPE } from 'upgrade_types';
+import { SharedModule } from '../../../shared/shared.module';
 
 /**
  * The `app-common-section-card-search-header` component provides a common header with title and subtitle in section card.
@@ -26,12 +27,14 @@ import { STATUS_INDICATOR_CHIP_TYPE } from 'upgrade_types';
   selector: 'app-common-section-card-title-header',
   templateUrl: './common-section-card-title-header.component.html',
   styleUrls: ['./common-section-card-title-header.component.scss'],
-  imports: [CommonModule, TranslateModule, CommonStatusIndicatorChipComponent],
+  imports: [CommonModule, TranslateModule, CommonStatusIndicatorChipComponent, SharedModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommonSectionCardTitleHeaderComponent {
   @Input() title!: string;
-  @Input() subtitle!: string;
+  @Input() subtitle?: string;
+  @Input() createdAt?: string;
+  @Input() updatedAt?: string;
   @Input() chipClass?: STATUS_INDICATOR_CHIP_TYPE;
   @Input() showViewLogs?: boolean;
   @Output() viewLogs = new EventEmitter<{ clicked: boolean }>();

diff --git a/...t-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.scss b/...t-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.scss
@@ -3,6 +3,10 @@
   --mdc-chip-elevated-container-color: transparent;
 }
 
+.status-indicator {
+  margin-bottom: 5px;
+}
+
 ::ng-deep .status-indicator.global {
   --mdc-chip-label-text-color: blue;
   border: 1px solid blue;

diff --git a/frontend/projects/upgrade/src/app/shared/pipes/format-date.pipe.ts b/frontend/projects/upgrade/src/app/shared/pipes/format-date.pipe.ts
@@ -31,8 +31,7 @@ export class FormatDatePipe implements PipeTransform {
           ' ' +
           dateNumber +
           this.getSuffix(dateNumber) +
-          ' '
-          +
+          ' ' +
           experimentDate.getFullYear()
         );
       } else {
@@ -42,7 +41,6 @@ export class FormatDatePipe implements PipeTransform {
           dateNumber +
           this.getSuffix(dateNumber) +
           ', ' +
-
           (dateHours < 10 || dateHours === 12 ? '0' : '') +
           (dateHours < 12 ? dateHours : dateHours - 12) +
           ':' +