feature flag deatils page and details header (#1517)

* feature flag deatils page and details header

* fixed review cmts

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header-container/common-details-page-header-container.component.html

@@ -0,0 +1,6 @@
+<ng-container class="header-container">
+  <h4 class="ft-16-400">
+    <a [routerLink]="['/', rootLink]" class="ft-16-400 root-link">{{ rootName | translate }} </a>
+    > <b> {{ detailsName | translate }} </b>
+  </h4>
+</ng-container>

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header-container/common-details-page-header-container.component.scss

@@ -0,0 +1,8 @@
+::ng-deep .header-container {
+  .root-link {
+    text-decoration: none;
+    color: black;
+  }
+}
+
+

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page-header-container/common-details-page-header-container.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+/**
+ * Takes a rootName, detailsName and rootLink and displays them in a header in a common details page.
+ *
+ * Example usage:
+ *
+ * ```
+ * <app-common-details-page-header-container
+ *    [rootName]="Experiments"
+ *    [detailsName]="Simple Experiment 1"
+ *    [rootLink]="/home"
+ * ></app-common-details-page-header-container>
+ * ```
+ */
+@Component({
+  selector: 'app-common-details-page-header-container',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, MatButton, RouterModule],
+  templateUrl: './common-details-page-header-container.component.html',
+  styleUrl: './common-details-page-header-container.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommonDetailsPageHeaderContainerComponent {
+  @Input() rootName!: string;
+  @Input() detailsName!: string;
+  @Input() rootLink!: string;
+}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page/common-details-page.component.html

@@ -0,0 +1,8 @@
+<div class="common-details-page-container">
+  <header class="header-container">
+    <ng-content select="[header]"></ng-content>
+  </header>
+  <section class="content-container">
+    <ng-content select="[content]"></ng-content>
+  </section>
+</div>

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page/common-details-page.component.scss

@@ -0,0 +1,20 @@
+:host ::ng-deep .common-details-page-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #f0f2f9; // get this from global var for gray background
+  height: 100%;
+  width: 100%;
+
+  .header-container {
+    height: 60px;
+    padding: 20px;
+    // margin-top: -30px; // there's a weird ghost element in dashboard-root.html that pushes the header down by 30px
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 30px;
+  }
+}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-page/common-details-page.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonDetailsPageHeaderContainerComponent } from '../common-details-page-header-container/common-details-page-header-container.component';
+
+/**
+ * A component nested in this component can be displayed in the **header** or **content** slot.
+ * The **header** slot should contain a component that wraps a **app-common-details-page-header**.
+ * The **content** slot should contain a component that wraps a **app-common-section-card-list**.
+ * Simply nest the component and add the slot name as an attribute.
+ *
+ * Example usage:
+ *
+ * ```
+ * <app-common-details-page>
+ *   <div header>Hi I'm in the header slot</div>
+ *   <div content>Hi I'm in the content slot</div>
+ * </app-common-details-page>
+ * ```
+ */
+@Component({
+  selector: 'app-common-details-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, CommonDetailsPageHeaderContainerComponent],
+  templateUrl: './common-details-page.component.html',
+  styleUrl: './common-details-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommonDetailsPageComponent {}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-root-page/common-root-page.component.ts

@@ -6,7 +6,7 @@ import { CommonRootPageHeaderContainerComponent } from '../common-root-page-head
 /**
  * A component nested in this component can be displayed in the **header** or **content** slot.
  * The **header** slot should contain a component that wraps a **app-common-root-page-header**.
- * The **content** slot should contain a component that wraps a **app-common-root-section-card-list**.
+ * The **content** slot should contain a component that wraps a **app-common-section-card-list**.
  * Simply nest the component and add the slot name as an attribute.
  *
  * Example usage:

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts

@@ -1,5 +1,13 @@
 import { CommonSectionCardListComponent } from './common-section-card-list/common-section-card-list.component';
 import { CommonRootPageHeaderContainerComponent } from './common-root-page-header-container/common-root-page-header-container.component';
 import { CommonRootPageComponent } from './common-root-page/common-root-page.component';
+import { CommonDetailsPageComponent } from './common-details-page/common-details-page.component';
+import { CommonDetailsPageHeaderContainerComponent } from './common-details-page-header-container/common-details-page-header-container.component';
 
-export { CommonRootPageComponent, CommonRootPageHeaderContainerComponent, CommonSectionCardListComponent };
+export {
+  CommonRootPageComponent,
+  CommonRootPageHeaderContainerComponent,
+  CommonSectionCardListComponent,
+  CommonDetailsPageComponent,
+  CommonDetailsPageHeaderContainerComponent,
+};