action page

console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.html

@@ -1,7 +1,5 @@
 <h2>{{ 'ACTIONSTWO.EXECUTION.TITLE' | translate }}</h2>
-<cnsl-info-section [type]="InfoSectionType.ALERT">
+
-  {{ 'ACTIONSTWO.BETA_NOTE' | translate }}
-</cnsl-info-section>
 <p class="cnsl-secondary-text">{{ 'ACTIONSTWO.EXECUTION.DESCRIPTION' | translate }}</p>
 
 <cnsl-actions-two-actions-table

console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.html

@@ -1,7 +1,5 @@
 <h2>{{ 'ACTIONSTWO.TARGET.TITLE' | translate }}</h2>
-<cnsl-info-section [type]="InfoSectionType.ALERT">
+
-  {{ 'ACTIONSTWO.BETA_NOTE' | translate }}
-</cnsl-info-section>
 <p class="cnsl-secondary-text">{{ 'ACTIONSTWO.TARGET.DESCRIPTION' | translate }}</p>
 
 <cnsl-actions-two-targets-table

console/src/app/modules/nav/nav.component.scss

@@ -72,7 +72,6 @@
           color: map-get($foreground, text);
           opacity: 0.8;
 
-          // Active indicator line
           &::after {
             content: '';
             position: absolute;
@@ -80,9 +79,9 @@
             left: 0;
             right: 0;
             width: 0;
-            height: 1px;
+            height: 2px;
             background-color: map-get($foreground, text);
-            transition: width 0.2s ease;
+            // transition: width 0.2s ease;
             border-radius: 2px;
             z-index: 999;
           }
@@ -130,7 +129,7 @@
             color: map-get($primary, default-contrast);
 
             &::after {
-              width: 100%; // Full width for testing
+              width: 100%;
             }
 
             .c_label {

console/src/app/pages/actions/actions.component.html

@@ -1,14 +1,23 @@
 <div class="max-width-container">
   <div class="enlarged-container">
-    <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
+    <h1>{{ 'ACTIONSTWO.EXECUTION.TITLE' | translate }}</h1>
-    <p class="org-desc cnsl-secondary-text">{{ 'ORG.PAGES.LISTDESCRIPTION' | translate }}</p>
+    <cnsl-info-section [type]="InfoSectionType.ALERT">
+      {{ 'ACTIONSTWO.BETA_NOTE' | translate }}
+    </cnsl-info-section>
 
-    <cnsl-meta-layout>
+    <cnsl-sidenav
-      <cnsl-sidenav [(setting)]="currentSetting" [settingsList]="settingsList">
+      [indented]="true"
-        <ng-container *ngIf="currentSetting.id === 'actions'"> actions </ng-container>
+      [setting]="currentSetting$()"
+      (settingChange)="currentSetting$.set($event)"
+      [settingsList]="settingsList"
+    >
+      <ng-container *ngIf="currentSetting$().id === 'actions'">
+        <cnsl-actions-two-actions></cnsl-actions-two-actions>
+      </ng-container>
 
-        <ng-container *ngIf="currentSetting.id === 'targets'"> targets </ng-container>
+      <ng-container *ngIf="currentSetting$().id === 'targets'">
-      </cnsl-sidenav>
+        <cnsl-actions-two-targets></cnsl-actions-two-targets>
-    </cnsl-meta-layout>
+      </ng-container>
+    </cnsl-sidenav>
   </div>
 </div>

console/src/app/pages/actions/actions.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { enterAnimations } from 'src/app/animations';
+import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 
-const ACTIONS: SidenavSetting = { id: 'general', i18nKey: 'MENU.ACTIONS' };
+const ACTIONS: SidenavSetting = { id: 'actions', i18nKey: 'MENU.ACTIONS' };
-const TARGETS: SidenavSetting = { id: 'roles', i18nKey: 'MENU.TARGETS' };
+const TARGETS: SidenavSetting = { id: 'targets', i18nKey: 'MENU.TARGETS' };
 
 @Component({
   selector: 'cnsl-actions',
@@ -14,7 +15,8 @@ const TARGETS: SidenavSetting = { id: 'roles', i18nKey: 'MENU.TARGETS' };
 })
 export class ActionsComponent {
   public settingsList: SidenavSetting[] = [ACTIONS, TARGETS];
-  public currentSetting = this.settingsList[0];
+  protected readonly currentSetting$ = signal<SidenavSetting>(this.settingsList[0]);
+  protected readonly InfoSectionType = InfoSectionType;
 
   constructor(breadcrumbService: BreadcrumbService) {
     const iamBread = new Breadcrumb({

console/src/app/pages/actions/actions.module.ts

@@ -7,10 +7,23 @@ import { ActionsRoutingModule } from './actions-routing.module';
 import { ActionsComponent } from './actions.component';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { SidenavModule } from 'src/app/modules/sidenav/sidenav.module';
+import { ActionsTwoActionsComponent } from 'src/app/modules/actions-two/actions-two-actions/actions-two-actions.component';
+import ActionsTwoModule from 'src/app/modules/actions-two/actions-two.module';
+import { FormsModule } from '@angular/forms';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 
 @NgModule({
   declarations: [ActionsComponent],
-  imports: [CommonModule, ActionsRoutingModule, OrgTableModule, TranslateModule, MetaLayoutModule, SidenavModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ActionsRoutingModule,
+    OrgTableModule,
+    TranslateModule,
+    InfoSectionModule,
+    SidenavModule,
+    ActionsTwoModule,
+  ],
   exports: [ActionsComponent],
 })
 export default class ActionsModule {}

console/src/assets/i18n/en.json

@@ -431,6 +431,7 @@
     "SHOWORGS": "Show All Organizations",
     "GRANTS": "Authorizations",
     "ACTIONS": "Actions",
+    "TARGETS": "Targets",
     "PRIVACY": "Privacy",
     "TOS": "Terms of Service",
     "OPENSHORTCUTSTOOLTIP": "Type ? to show keyboard shortcuts",