Skip to content

Commit 713b1aa

Browse files
afreen23afreen23
authored
Merge pull request ceph#65894 from rhcs-dashboard/73192-carbonize-report-an-issue-modal
mgr/dashboard : Carbonize -> Report an issue modal Reviewed-by: Afreen Misbah <[email protected]> Reviewed-by: Nizamudeen A <[email protected]>
2 parents a476d4e + 871740f commit 713b1aa

File tree

6 files changed

+213
-142
lines changed

6 files changed

+213
-142
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { CephSharedModule } from '../shared/ceph-shared.module';
1212
import { FeedbackComponent } from '../shared/feedback/feedback.component';
1313
import { DashboardComponent } from './dashboard/dashboard.component';
1414
import { HealthPieComponent } from './health-pie/health-pie.component';
15-
import { ToggletipModule } from 'carbon-components-angular';
15+
import { InputModule, ModalModule, SelectModule, ToggletipModule } from 'carbon-components-angular';
1616

1717
@NgModule({
1818
imports: [
@@ -25,7 +25,10 @@ import { ToggletipModule } from 'carbon-components-angular';
2525
ReactiveFormsModule,
2626
DashboardV3Module,
2727
BaseChartDirective,
28-
ToggletipModule
28+
ToggletipModule,
29+
ModalModule,
30+
InputModule,
31+
SelectModule
2932
],
3033
declarations: [DashboardComponent, HealthPieComponent, FeedbackComponent],
3134
providers: [provideCharts(withDefaultRegisterables())]

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.html‎

Lines changed: 175 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,183 @@
1-
<cd-modal [modalRef]="activeModal">
2-
<div class="modal-title"
3-
i18n>Report an issue</div>
1+
<cds-modal
2+
size="md"
3+
[open]="open"
4+
[hasScrollingContent]="false"
5+
(overlaySelected)="closeModal()"
6+
>
7+
<cds-modal-header (closeSelect)="closeModal()">
8+
<h3 cdsModalHeaderHeading
9+
i18n>Report an issue</h3>
10+
</cds-modal-header>
411

5-
<div class="modal-content">
6-
<form name="feedbackForm"
7-
[formGroup]="feedbackForm"
8-
#formDir="ngForm">
9-
<div class="modal-body">
10-
<cd-alert-panel *ngIf="!isFeedbackEnabled"
11-
type="error"
12-
i18n>Feedback module is not enabled. Please enable it from <a (click)="redirect()">Cluster-> Manager Modules.</a>
13-
</cd-alert-panel>
14-
<!-- api_key -->
15-
<div class="form-group row mt-3"
16-
*ngIf="!isAPIKeySet">
17-
<label class="cd-col-form-label required"
18-
for="api_key"
19-
i18n>Ceph Tracker API Key</label>
20-
<div class="cd-col-form-input">
21-
<input id="api_key"
22-
type="password"
23-
formControlName="api_key"
24-
class="form-control"
25-
placeholder="Add Ceph tracker API key">
26-
<span class="invalid-feedback"
27-
*ngIf="feedbackForm.showError('api_key', formDir, 'required')"
28-
i18n>Ceph Tracker API key is required.</span>
29-
<span class="invalid-feedback"
30-
*ngIf="feedbackForm.showError('api_key', formDir, 'invalidApiKey')"
31-
i18n>Ceph Tracker API key is invalid.</span>
32-
</div>
33-
</div>
12+
<form name="feedbackForm"
13+
[formGroup]="feedbackForm"
14+
#formDir="ngForm">
15+
<div
16+
cdsModalContent
17+
class="modal-wrapper"
18+
>
19+
@if (!isFeedbackEnabled) {
20+
<cd-alert-panel type="error"
21+
spacingClass="mb-3"
22+
actionName="Enable"
23+
class="align-items-center"
24+
(action)="enableFeedbackModule()"
25+
i18n-actionName>
26+
In order to report an issue, Feedback module must be enabled.
27+
</cd-alert-panel>
28+
}
29+
<!-- api_key -->
30+
@if (!isAPIKeySet) {
31+
<div class="form-item">
32+
<cds-password-label
33+
labelInputID="api_key"
34+
label="Ceph Tracker API Key"
35+
cdRequiredField="Ceph Tracker API Key"
36+
[invalid]="!feedbackForm.controls.api_key.valid && feedbackForm.controls.api_key.dirty"
37+
[invalidText]="apiKeyError"
38+
[helperText]="apiKeyHelperTpl"
39+
[disabled]="!isFeedbackEnabled"
40+
i18n
41+
>
42+
<input
43+
cdsPassword
44+
id="api_key"
45+
type="password"
46+
formControlName="api_key"
47+
/>
48+
</cds-password-label>
3449

35-
<!-- project -->
36-
<div class="form-group row">
37-
<label class="cd-col-form-label required"
38-
for="project"
39-
i18n>Project name</label>
40-
<div class="cd-col-form-input">
41-
<select class="form-control"
42-
id="project"
43-
formControlName="project">
44-
<option ngValue=""
45-
i18n>-- Select a project --</option>
46-
<option *ngFor="let projectName of project"
47-
[value]="projectName">{{ projectName }}</option>
48-
</select>
49-
<span class="invalid-feedback"
50-
*ngIf="feedbackForm.showError('project', formDir, 'required')"
51-
i18n>Project name is required.</span>
52-
</div>
53-
</div>
50+
<ng-template #apiKeyError>
51+
@if (feedbackForm.showError('api_key', formDir, 'required')) {
52+
<span class="invalid-feedback"
53+
i18n> Ceph Tracker API key is required. </span>
54+
} @if (feedbackForm.showError('api_key', formDir, 'invalidApiKey')) {
55+
<span class="invalid-feedback"
56+
i18n> Ceph Tracker API key is invalid. </span>
57+
}
58+
</ng-template>
5459

55-
<!-- tracker -->
56-
<div class="form-group row">
57-
<label class="cd-col-form-label required"
58-
for="tracker"
59-
i18n>Tracker</label>
60-
<div class="cd-col-form-input">
61-
<select class="form-control"
62-
id="tracker"
63-
formControlName="tracker">
64-
<option ngValue=""
65-
i18n>-- Select a tracker --</option>
66-
<option *ngFor="let trackerName of tracker"
67-
[value]="trackerName">{{ trackerName }}</option>
68-
</select>
69-
<span class="invalid-feedback"
70-
*ngIf="feedbackForm.showError('tracker', formDir, 'required')"
71-
i18n>Tracker name is required.</span>
72-
</div>
73-
</div>
60+
<ng-template #apiKeyHelperTpl>
61+
You can obtain your API key from
62+
<a href="https://tracker.ceph.com/my/account"
63+
target="_blank">https://tracker.ceph.com/my/account
64+
</a>
65+
</ng-template>
66+
</div>
67+
}
68+
69+
<!-- project -->
70+
<div class="form-item">
71+
<cds-select
72+
label="Project name"
73+
id="project"
74+
formControlName="project"
75+
cdRequiredField="Project name"
76+
[invalid]="!feedbackForm.controls.project.valid && feedbackForm.controls.project.dirty"
77+
[invalidText]="projectError"
78+
i18n
79+
>
80+
<option value="">--- Select a project ---</option>
81+
@for (project of projects; track project) {
82+
<option [value]="project">{{ project }}</option>
83+
}
84+
</cds-select>
85+
86+
<ng-template #projectError>
87+
@if (feedbackForm.showError('project', formDir, 'required')) {
88+
<span i18n>This field is required!</span>
89+
}
90+
</ng-template>
91+
</div>
7492

75-
<!-- subject -->
76-
<div class="form-group row">
77-
<label class="cd-col-form-label required"
78-
for="subject"
79-
i18n>Subject</label>
80-
<div class="cd-col-form-input">
81-
<input id="subject"
82-
type="text"
83-
formControlName="subject"
84-
class="form-control"
85-
placeholder="Add issue title">
86-
<span class="invalid-feedback"
87-
*ngIf="feedbackForm.showError('subject', formDir, 'required')"
88-
i18n>Subject is required.</span>
89-
</div>
90-
</div>
93+
<!-- tracker -->
94+
<div class="form-item cds-select-label">
95+
<cds-select
96+
label="Tracker"
97+
id="tracker"
98+
formControlName="tracker"
99+
cdRequiredField="Tracker"
100+
[invalid]="!feedbackForm.controls.tracker.valid && feedbackForm.controls.tracker.dirty"
101+
[invalidText]="trackerError"
102+
i18n
103+
> Tracker
104+
@for (trackerName of tracker; track trackerName) {
105+
<option [value]="trackerName">{{ trackerName }}</option>
106+
}
107+
</cds-select>
91108

92-
<!-- description -->
93-
<div class="form-group row">
94-
<label class="cd-col-form-label required"
95-
for="description"
96-
i18n>Description</label>
97-
<div class="cd-col-form-input">
98-
<textarea id="description"
99-
type="text"
100-
formControlName="description"
101-
class="form-control"
102-
placeholder="Add issue description">
103-
</textarea>
104-
<span class="invalid-feedback"
105-
*ngIf="feedbackForm.showError('description', formDir, 'required')"
106-
i18n>Description is required.</span>
107-
</div>
108-
</div>
109+
<ng-template #trackerError>
110+
@if (feedbackForm.showError('tracker', formDir, 'required')) {
111+
<span i18n>Tracker name is required.</span>
112+
}
113+
</ng-template>
114+
</div>
115+
116+
<!-- subject -->
117+
<div class="form-item">
118+
<cds-text-label
119+
cdRequiredField="Subject"
120+
[invalid]="!feedbackForm.controls.subject.valid && feedbackForm.controls.subject.dirty"
121+
[invalidText]="subjectError"
122+
[disabled]="!isFeedbackEnabled"
123+
i18n
124+
>
125+
Subject
126+
<input
127+
cdsText
128+
id="subject"
129+
type="text"
130+
formControlName="subject"
131+
placeholder="Add issue title"
132+
/>
133+
</cds-text-label>
109134

135+
<ng-template #subjectError>
136+
@if (feedbackForm.showError('subject', formDir, 'required')) {
137+
<span i18n>Subject is required.</span>
138+
}
139+
</ng-template>
110140
</div>
111-
<div class="modal-footer">
112-
<cd-form-button-panel (submitActionEvent)="onSubmit()"
113-
[form]="feedbackForm"
114-
[submitText]="actionLabels.SUBMIT"
115-
wrappingClass="text-right">
116-
</cd-form-button-panel>
141+
142+
<!-- description -->
143+
<div class="form-item">
144+
<cds-text-label
145+
cdRequiredField="Description"
146+
[invalid]="!feedbackForm.controls.description.valid && feedbackForm.controls.description.dirty"
147+
[invalidText]="descriptionError"
148+
[disabled]="!isFeedbackEnabled"
149+
i18n
150+
>
151+
Description
152+
<input
153+
cdsText
154+
id="description"
155+
type="text"
156+
formControlName="description"
157+
placeholder="Explain your issue"
158+
/>
159+
</cds-text-label>
160+
161+
<ng-template #descriptionError>
162+
@if (feedbackForm.showError('description', formDir, 'required')) {
163+
<span i18n>Description is required.</span>
164+
}
165+
</ng-template>
117166
</div>
118-
</form>
119-
</div>
120-
</cd-modal>
167+
</div>
168+
@if (isFeedbackEnabled) {
169+
<cd-form-button-panel
170+
(submitActionEvent)="onSubmit()"
171+
[form]="feedbackForm"
172+
[submitText]="submit"
173+
[modalForm]="true"
174+
></cd-form-button-panel>
175+
}
176+
@else {
177+
<cd-form-button-panel
178+
[showSubmit]="false"
179+
[modalForm]="true"
180+
></cd-form-button-panel>
181+
}
182+
</form>
183+
</cds-modal>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.modal-wrapper {
2+
overflow: visible; /* allow tooltip to expand beyond this block */
3+
}

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/feedback/feedback.component.spec.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { FeedbackService } from '~/app/shared/api/feedback.service';
1111
import { ComponentsModule } from '~/app/shared/components/components.module';
1212
import { configureTestBed, FormHelper } from '~/testing/unit-test-helper';
1313
import { FeedbackComponent } from './feedback.component';
14+
import { SharedModule } from '~/app/shared/shared.module';
15+
import { SelectModule } from 'carbon-components-angular';
1416

1517
describe('FeedbackComponent', () => {
1618
let component: FeedbackComponent;
@@ -24,7 +26,9 @@ describe('FeedbackComponent', () => {
2426
HttpClientTestingModule,
2527
RouterTestingModule,
2628
ReactiveFormsModule,
27-
ToastrModule.forRoot()
29+
ToastrModule.forRoot(),
30+
SharedModule,
31+
SelectModule
2832
],
2933
declarations: [FeedbackComponent],
3034
providers: [NgbActiveModal]
@@ -43,7 +47,7 @@ describe('FeedbackComponent', () => {
4347

4448
it('should open the form in a modal', () => {
4549
const nativeEl = fixture.debugElement.nativeElement;
46-
expect(nativeEl.querySelector('cd-modal')).not.toBe(null);
50+
expect(nativeEl.querySelector('cds-modal')).not.toBe(null);
4751
});
4852

4953
it('should redirect to mgr-modules if feedback module is not enabled', () => {

0 commit comments

Comments
 (0)