From: Abhishek Desai <abhishek.desai1@ibm.com>
Date: Sat, 11 Oct 2025 20:39:08 +0000 (+0530)
Subject: mgr/dashboard : Carbonize -> Report an issue modal
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F65894%2Fhead;p=ceph.git

mgr/dashboard : Carbonize -> Report an issue modal
fixes : https://tracker.ceph.com/issues/73192
Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
index b338a7b863af..56cdf1ea40d0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
@@ -12,7 +12,7 @@ import { CephSharedModule } from '../shared/ceph-shared.module';
 import { FeedbackComponent } from '../shared/feedback/feedback.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HealthPieComponent } from './health-pie/health-pie.component';
-import { ToggletipModule } from 'carbon-components-angular';
+import { InputModule, ModalModule, SelectModule, ToggletipModule } from 'carbon-components-angular';
 
 @NgModule({
   imports: [
@@ -25,7 +25,10 @@ import { ToggletipModule } from 'carbon-components-angular';
     ReactiveFormsModule,
     DashboardV3Module,
     BaseChartDirective,
-    ToggletipModule
+    ToggletipModule,
+    ModalModule,
+    InputModule,
+    SelectModule
   ],
   declarations: [DashboardComponent, HealthPieComponent, FeedbackComponent],
   providers: [provideCharts(withDefaultRegisterables())]
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.html
index 88ef32507a45..50a1804f35d3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.html
@@ -1,120 +1,183 @@
-<cd-modal [modalRef]="activeModal">
-  <div class="modal-title"
-       i18n>Report an issue</div>
+<cds-modal
+  size="md"
+  [open]="open"
+  [hasScrollingContent]="false"
+  (overlaySelected)="closeModal()"
+  >
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        i18n>Report an issue</h3>
+  </cds-modal-header>
 
-  <div class="modal-content">
-    <form name="feedbackForm"
-          [formGroup]="feedbackForm"
-          #formDir="ngForm">
-      <div class="modal-body">
-        <cd-alert-panel *ngIf="!isFeedbackEnabled"
-                        type="error"
-                        i18n>Feedback module is not enabled. Please enable it from <a (click)="redirect()">Cluster-> Manager Modules.</a>
-        </cd-alert-panel>
-        <!-- api_key -->
-        <div class="form-group row mt-3"
-             *ngIf="!isAPIKeySet">
-          <label class="cd-col-form-label required"
-                 for="api_key"
-                 i18n>Ceph Tracker API Key</label>
-          <div class="cd-col-form-input">
-            <input id="api_key"
-                   type="password"
-                   formControlName="api_key"
-                   class="form-control"
-                   placeholder="Add Ceph tracker API key">
-            <span class="invalid-feedback"
-                  *ngIf="feedbackForm.showError('api_key', formDir, 'required')"
-                  i18n>Ceph Tracker API key is required.</span>
-            <span class="invalid-feedback"
-                  *ngIf="feedbackForm.showError('api_key', formDir, 'invalidApiKey')"
-                  i18n>Ceph Tracker API key is invalid.</span>
-          </div>
-        </div>
+  <form name="feedbackForm"
+        [formGroup]="feedbackForm"
+        #formDir="ngForm">
+    <div
+      cdsModalContent
+      class="modal-wrapper"
+    >
+      @if (!isFeedbackEnabled) {
+      <cd-alert-panel type="error"
+                      spacingClass="mb-3"
+                      actionName="Enable"
+                      class="align-items-center"
+                      (action)="enableFeedbackModule()"
+                      i18n-actionName>
+        In order to report an issue, Feedback module must be enabled.
+      </cd-alert-panel>
+      }
+      <!-- api_key -->
+      @if (!isAPIKeySet) {
+      <div class="form-item">
+        <cds-password-label
+          labelInputID="api_key"
+          label="Ceph Tracker API Key"
+          cdRequiredField="Ceph Tracker API Key"
+          [invalid]="!feedbackForm.controls.api_key.valid && feedbackForm.controls.api_key.dirty"
+          [invalidText]="apiKeyError"
+          [helperText]="apiKeyHelperTpl"
+          [disabled]="!isFeedbackEnabled"
+          i18n
+        >
+          <input
+            cdsPassword
+            id="api_key"
+            type="password"
+            formControlName="api_key"
+          />
+        </cds-password-label>
 
-        <!-- project -->
-        <div class="form-group row">
-          <label class="cd-col-form-label required"
-                 for="project"
-                 i18n>Project name</label>
-          <div class="cd-col-form-input">
-            <select class="form-control"
-                    id="project"
-                    formControlName="project">
-              <option ngValue=""
-                      i18n>-- Select a project --</option>
-              <option *ngFor="let projectName of project"
-                      [value]="projectName">{{ projectName }}</option>
-            </select>
-            <span class="invalid-feedback"
-                  *ngIf="feedbackForm.showError('project', formDir, 'required')"
-                  i18n>Project name is required.</span>
-          </div>
-        </div>
+        <ng-template #apiKeyError>
+          @if (feedbackForm.showError('api_key', formDir, 'required')) {
+          <span class="invalid-feedback"
+                i18n> Ceph Tracker API key is required. </span>
+          } @if (feedbackForm.showError('api_key', formDir, 'invalidApiKey')) {
+          <span class="invalid-feedback"
+                i18n> Ceph Tracker API key is invalid. </span>
+          }
+        </ng-template>
 
-        <!-- tracker -->
-        <div class="form-group row">
-          <label class="cd-col-form-label required"
-                 for="tracker"
-                 i18n>Tracker</label>
-          <div class="cd-col-form-input">
-            <select class="form-control"
-                    id="tracker"
-                    formControlName="tracker">
-              <option ngValue=""
-                      i18n>-- Select a tracker --</option>
-              <option *ngFor="let trackerName of tracker"
-                      [value]="trackerName">{{ trackerName }}</option>
-            </select>
-            <span  class="invalid-feedback"
-                   *ngIf="feedbackForm.showError('tracker', formDir, 'required')"
-                   i18n>Tracker name is required.</span>
-          </div>
-        </div>
+        <ng-template #apiKeyHelperTpl>
+          You can obtain your API key from
+          <a href="https://tracker.ceph.com/my/account"
+             target="_blank">https://tracker.ceph.com/my/account
+          </a>
+        </ng-template>
+      </div>
+      }
+
+      <!-- project -->
+      <div class="form-item">
+        <cds-select
+          label="Project name"
+          id="project"
+          formControlName="project"
+          cdRequiredField="Project name"
+          [invalid]="!feedbackForm.controls.project.valid && feedbackForm.controls.project.dirty"
+          [invalidText]="projectError"
+          i18n
+        >
+          <option value="">--- Select a project ---</option>
+          @for (project of projects; track project) {
+          <option [value]="project">{{ project }}</option>
+          }
+        </cds-select>
+
+        <ng-template #projectError>
+          @if (feedbackForm.showError('project', formDir, 'required')) {
+          <span i18n>This field is required!</span>
+          }
+        </ng-template>
+      </div>
 
-        <!-- subject -->
-        <div class="form-group row">
-          <label class="cd-col-form-label required"
-                 for="subject"
-                 i18n>Subject</label>
-          <div class="cd-col-form-input">
-            <input id="subject"
-                   type="text"
-                   formControlName="subject"
-                   class="form-control"
-                   placeholder="Add issue title">
-            <span class="invalid-feedback"
-                  *ngIf="feedbackForm.showError('subject', formDir, 'required')"
-                  i18n>Subject is required.</span>
-          </div>
-        </div>
+      <!-- tracker -->
+      <div class="form-item cds-select-label">
+        <cds-select
+          label="Tracker"
+          id="tracker"
+          formControlName="tracker"
+          cdRequiredField="Tracker"
+          [invalid]="!feedbackForm.controls.tracker.valid && feedbackForm.controls.tracker.dirty"
+          [invalidText]="trackerError"
+          i18n
+        > Tracker
+          @for (trackerName of tracker; track trackerName) {
+          <option [value]="trackerName">{{ trackerName }}</option>
+          }
+        </cds-select>
 
-        <!-- description -->
-        <div class="form-group row">
-          <label class="cd-col-form-label required"
-                 for="description"
-                 i18n>Description</label>
-          <div class="cd-col-form-input">
-            <textarea id="description"
-                      type="text"
-                      formControlName="description"
-                      class="form-control"
-                      placeholder="Add issue description">
-            </textarea>
-            <span class="invalid-feedback"
-                  *ngIf="feedbackForm.showError('description', formDir, 'required')"
-                  i18n>Description is required.</span>
-          </div>
-        </div>
+        <ng-template #trackerError>
+          @if (feedbackForm.showError('tracker', formDir, 'required')) {
+          <span i18n>Tracker name is required.</span>
+          }
+        </ng-template>
+      </div>
+
+      <!-- subject -->
+      <div class="form-item">
+        <cds-text-label
+          cdRequiredField="Subject"
+          [invalid]="!feedbackForm.controls.subject.valid && feedbackForm.controls.subject.dirty"
+          [invalidText]="subjectError"
+          [disabled]="!isFeedbackEnabled"
+          i18n
+        >
+          Subject
+          <input
+            cdsText
+            id="subject"
+            type="text"
+            formControlName="subject"
+            placeholder="Add issue title"
+          />
+        </cds-text-label>
 
+        <ng-template #subjectError>
+          @if (feedbackForm.showError('subject', formDir, 'required')) {
+          <span i18n>Subject is required.</span>
+          }
+        </ng-template>
       </div>
-      <div class="modal-footer">
-        <cd-form-button-panel (submitActionEvent)="onSubmit()"
-                              [form]="feedbackForm"
-                              [submitText]="actionLabels.SUBMIT"
-                              wrappingClass="text-right">
-        </cd-form-button-panel>
+
+      <!-- description -->
+      <div class="form-item">
+        <cds-text-label
+          cdRequiredField="Description"
+          [invalid]="!feedbackForm.controls.description.valid && feedbackForm.controls.description.dirty"
+          [invalidText]="descriptionError"
+          [disabled]="!isFeedbackEnabled"
+          i18n
+        >
+          Description
+          <input
+            cdsText
+            id="description"
+            type="text"
+            formControlName="description"
+            placeholder="Explain your issue"
+          />
+        </cds-text-label>
+
+        <ng-template #descriptionError>
+          @if (feedbackForm.showError('description', formDir, 'required')) {
+          <span i18n>Description is required.</span>
+          }
+        </ng-template>
       </div>
-    </form>
-  </div>
-</cd-modal>
+    </div>
+    @if (isFeedbackEnabled) {
+    <cd-form-button-panel
+      (submitActionEvent)="onSubmit()"
+      [form]="feedbackForm"
+      [submitText]="submit"
+      [modalForm]="true"
+    ></cd-form-button-panel>
+    }
+    @else {
+    <cd-form-button-panel
+      [showSubmit]="false"
+      [modalForm]="true"
+    ></cd-form-button-panel>
+    }
+  </form>
+</cds-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.scss
index e69de29bb2d1..c817c1872197 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.scss
@@ -0,0 +1,3 @@
+.modal-wrapper {
+  overflow: visible; /* allow tooltip to expand beyond this block */
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.spec.ts
index 2deea36a74ce..c82f159f5a20 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.spec.ts
@@ -11,6 +11,8 @@ import { FeedbackService } from '~/app/shared/api/feedback.service';
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { configureTestBed, FormHelper } from '~/testing/unit-test-helper';
 import { FeedbackComponent } from './feedback.component';
+import { SharedModule } from '~/app/shared/shared.module';
+import { SelectModule } from 'carbon-components-angular';
 
 describe('FeedbackComponent', () => {
   let component: FeedbackComponent;
@@ -24,7 +26,9 @@ describe('FeedbackComponent', () => {
       HttpClientTestingModule,
       RouterTestingModule,
       ReactiveFormsModule,
-      ToastrModule.forRoot()
+      ToastrModule.forRoot(),
+      SharedModule,
+      SelectModule
     ],
     declarations: [FeedbackComponent],
     providers: [NgbActiveModal]
@@ -43,7 +47,7 @@ describe('FeedbackComponent', () => {
 
   it('should open the form in a modal', () => {
     const nativeEl = fixture.debugElement.nativeElement;
-    expect(nativeEl.querySelector('cd-modal')).not.toBe(null);
+    expect(nativeEl.querySelector('cds-modal')).not.toBe(null);
   });
 
   it('should redirect to mgr-modules if feedback module is not enabled', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.ts
index ac53edef28b8..e95621fc5250 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.ts
@@ -1,13 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormControl, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
 
 import { FeedbackService } from '~/app/shared/api/feedback.service';
+import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
+import { CdForm } from '~/app/shared/forms/cd-form';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { NotificationService } from '~/app/shared/services/notification.service';
 
@@ -16,9 +15,9 @@ import { NotificationService } from '~/app/shared/services/notification.service'
   templateUrl: './feedback.component.html',
   styleUrls: ['./feedback.component.scss']
 })
-export class FeedbackComponent implements OnInit, OnDestroy {
+export class FeedbackComponent extends CdForm implements OnInit, OnDestroy {
   title = 'Feedback';
-  project: any = [
+  projects: any = [
     'dashboard',
     'block',
     'objects',
@@ -31,19 +30,20 @@ export class FeedbackComponent implements OnInit, OnDestroy {
   tracker: string[] = ['bug', 'feature'];
   api_key: string;
   keySub: Subscription;
-
+  submit: string;
   feedbackForm: CdFormGroup;
   isAPIKeySet = false;
   isFeedbackEnabled = true;
 
   constructor(
     private feedbackService: FeedbackService,
-    public activeModal: NgbActiveModal,
     public actionLabels: ActionLabelsI18n,
-    public secondaryModal: NgbModal,
-    private notificationService: NotificationService,
-    private router: Router
-  ) {}
+    public mgrModuleService: MgrModuleService,
+    private notificationService: NotificationService
+  ) {
+    super();
+    this.submit = $localize`Submit`;
+  }
 
   ngOnInit() {
     this.createForm();
@@ -64,7 +64,7 @@ export class FeedbackComponent implements OnInit, OnDestroy {
   private createForm() {
     this.feedbackForm = new CdFormGroup({
       project: new UntypedFormControl('', Validators.required),
-      tracker: new UntypedFormControl('', Validators.required),
+      tracker: new UntypedFormControl(this.tracker[0], Validators.required),
       subject: new UntypedFormControl('', Validators.required),
       description: new UntypedFormControl('', Validators.required),
       api_key: new UntypedFormControl('', Validators.required)
@@ -97,13 +97,19 @@ export class FeedbackComponent implements OnInit, OnDestroy {
           this.feedbackForm.setErrors({ cdSubmitButton: true });
         },
         complete: () => {
-          this.activeModal.close();
+          this.closeModal();
         }
       });
   }
 
-  redirect() {
-    this.activeModal.close();
-    this.router.navigate(['/mgr-modules']);
+  enableFeedbackModule() {
+    this.mgrModuleService.updateModuleState(
+      'feedback',
+      false,
+      null,
+      null,
+      'Enabled Feedback Module',
+      true
+    );
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
index 30bf6f8efc0c..bc9a04ba28bb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
@@ -1,14 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-
 import { Icons } from '~/app/shared/enum/icons.enum';
 import { DocService } from '~/app/shared/services/doc.service';
 
 import { AboutComponent } from '../about/about.component';
 import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { FeedbackComponent } from '~/app/ceph/shared/feedback/feedback.component';
-import { ModalService } from '~/app/shared/services/modal.service';
 
 @Component({
   selector: 'cd-dashboard-help',
@@ -18,13 +15,8 @@ import { ModalService } from '~/app/shared/services/modal.service';
 export class DashboardHelpComponent implements OnInit {
   docsUrl: string;
   icons = Icons;
-  bsModalRef: NgbModalRef;
 
-  constructor(
-    private docService: DocService,
-    private modalCdsService: ModalCdsService,
-    private modalService: ModalService
-  ) {}
+  constructor(private docService: DocService, private modalCdsService: ModalCdsService) {}
 
   ngOnInit() {
     this.docService.subscribeOnce('dashboard', (url: string) => {
@@ -37,6 +29,6 @@ export class DashboardHelpComponent implements OnInit {
   }
 
   openFeedbackModal() {
-    this.bsModalRef = this.modalService.show(FeedbackComponent, null, { size: 'lg' });
+    this.modalCdsService.show(FeedbackComponent);
   }
 }