RepoMirrors/ceph
1
0
Fork 0
mirror of https://github.com/ceph/ceph synced 2025-01-04 02:02:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

mgr/dashboard: replace cdCopy2ClipboardButton Directive with a component

Browse Source 
Replaces Directive-Based copy2ClipboardButton with a Component-based version.
Further replaces all instances of Directive use with Component version.
Similar toastr logic used.
Fixes: https://tracker.ceph.com/issues/44960

Signed-off-by: Courtney Caldwell <ccaldwel@redhat.com>
This commit is contained in:
Courtney Caldwell 2020-12-15 11:41:18 -05:00
parent 4e9da32ab7
commit 065fbf9603
16 changed files with 73 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
View File

@ -48,10 +48,8 @@
class="btn btn-light"
cdPasswordButton="password">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="password">
</button>
<cd-copy-2-clipboard-button source="password">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"
@ -107,10 +105,8 @@
class="btn btn-light"
cdPasswordButton="mutual_password">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="mutual_password">
</button>
<cd-copy-2-clipboard-button source="mutual_password">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"

24
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
View File

@ -248,10 +248,8 @@
class="btn btn-light"
cdPasswordButton="target_password">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="target_password">
</button>
<cd-copy-2-clipboard-button source="target_password">
</cd-copy-2-clipboard-button>
</span>
</div>
@ -311,10 +309,8 @@
class="btn btn-light"
cdPasswordButton="target_mutual_password">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="target_mutual_password">
</button>
<cd-copy-2-clipboard-button source="target_mutual_password">
</cd-copy-2-clipboard-button>
</span>
</div>
@ -418,10 +414,8 @@
class="btn btn-light"
[cdPasswordButton]="'password' + ii">
</button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="'password' + ii">
</button>
<cd-copy-2-clipboard-button [source]="'password' + ii">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"
@ -478,10 +472,8 @@
class="btn btn-light"
[cdPasswordButton]="'mutual_password' + ii">
</button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="'mutual_password' + ii">
</button>
<cd-copy-2-clipboard-button [source]="'mutual_password' + ii">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"

11
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
View File

@ -71,14 +71,9 @@
readonly>
</textarea>
</div>
<button class="btn btn-primary mb-3 float-right"
aria-label="Copy to Clipboard"
i18n-aria-label
title="Copy to Clipboard"
i18n-title
cdCopy2ClipboardButton="token">
<ng-container i18n>Copy to Clipboard</ng-container>
</button>
<cd-copy-2-clipboard-button class="float-right"
source="token">
</cd-copy-2-clipboard-button>
</div>
<div class="modal-footer">

16
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
View File

@ -19,10 +19,10 @@
[textItem]="logText"
fileName="cluster_log">
</cd-download-button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="logText"
[byId]="false"></button>
<cd-copy-2-clipboard-button
[source]="logText"
[byId]="false">
</cd-copy-2-clipboard-button>
</div>
<div class="card-body">
<p *ngFor="let line of clog">
@ -50,10 +50,10 @@
[textItem]="logText"
fileName="audit_log">
</cd-download-button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="logText"
[byId]="false"></button>
<cd-copy-2-clipboard-button
[source]="logText"
[byId]="false">
</cd-copy-2-clipboard-button>
</div>
<div class="card-body">
<p *ngFor="let line of audit_log">

6
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
View File

@ -319,10 +319,8 @@
class="btn btn-light"
cdPasswordButton="api_password">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="api_password">
</button>
<cd-copy-2-clipboard-button source="api_password">
</cd-copy-2-clipboard-button>
</span>
<span class="invalid-feedback"
*ngIf="serviceForm.showError('api_password', frm, 'required')"

8
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
View File

@ -207,7 +207,7 @@
<button type="button"
class="btn btn-light"
(click)="next()">
<ng-container i18n>{{ actionLabels.NEXT }}</ng-container>
<ng-container>{{ actionLabels.NEXT }}</ng-container>
</button>
</div>
</div>
@ -267,10 +267,8 @@
<cd-download-button [objectItem]="report"
fileName="telemetry_report">
</cd-download-button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="report">
</button>
<cd-copy-2-clipboard-button source="report">
</cd-copy-2-clipboard-button>
</div>
</div>
</div>

12
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
View File

@ -155,10 +155,8 @@
class="btn btn-light"
cdPasswordButton="access_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="access_key">
</button>
<cd-copy-2-clipboard-button source="access_key">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"
@ -184,10 +182,8 @@
class="btn btn-light"
cdPasswordButton="secret_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="secret_key">
</button>
<cd-copy-2-clipboard-button source="secret_key">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"

12
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
View File

@ -73,10 +73,8 @@
class="btn btn-light"
cdPasswordButton="access_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="access_key">
</button>
<cd-copy-2-clipboard-button source="access_key">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"
@ -104,10 +102,8 @@
class="btn btn-light"
cdPasswordButton="secret_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="secret_key">
</button>
<cd-copy-2-clipboard-button source="secret_key">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"

6
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
View File

@ -105,10 +105,8 @@
class="btn btn-light"
cdPasswordButton="secret_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="secret_key">
</button>
<cd-copy-2-clipboard-button source="secret_key">
</cd-copy-2-clipboard-button>
</span>
</div>
<span class="invalid-feedback"

6
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
View File

@ -39,10 +39,8 @@
class="btn btn-light"
cdPasswordButton="secret_key">
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="secret_key">
</button>
<cd-copy-2-clipboard-button source="secret_key">
</cd-copy-2-clipboard-button>
</span>
</div>
</div>

3
src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
View File

@ -22,6 +22,7 @@ import { AlertPanelComponent } from './alert-panel/alert-panel.component';
import { BackButtonComponent } from './back-button/back-button.component';
import { ConfigOptionComponent } from './config-option/config-option.component';
import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component';
import { Copy2ClipboardButtonComponent } from './copy2clipboard-button/copy2clipboard-button.component';
import { CriticalConfirmationModalComponent } from './critical-confirmation-modal/critical-confirmation-modal.component';
import { DateTimePickerComponent } from './date-time-picker/date-time-picker.component';
import { DocComponent } from './doc/doc.component';
@ -88,6 +89,7 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
OrchestratorDocPanelComponent,
DateTimePickerComponent,
DocComponent,
Copy2ClipboardButtonComponent,
DownloadButtonComponent,
FormButtonPanelComponent
],
@ -113,6 +115,7 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
OrchestratorDocPanelComponent,
DateTimePickerComponent,
DocComponent,
Copy2ClipboardButtonComponent,
DownloadButtonComponent,
FormButtonPanelComponent
]

7
src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html Normal file
View File

@ -0,0 +1,7 @@
<button (click)="onClick()"
type="button"
class="btn btn-light"
i18n-title
title="Copy to Clipboard">
<i [ngClass]="[icons.clipboard]"></i>
</button>

0
src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss Normal file
View File

18
src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts → src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.spec.ts
View File

@ -4,10 +4,10 @@ import * as BrowserDetect from 'detect-browser';
import { ToastrService } from 'ngx-toastr';
import { configureTestBed } from '~/testing/unit-test-helper';
import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive';
import { Copy2ClipboardButtonComponent } from './copy2clipboard-button.component';
describe('Copy2clipboardButtonDirective', () => {
let directive: Copy2ClipboardButtonDirective;
describe('Copy2ClipboardButtonComponent', () => {
let component: Copy2ClipboardButtonComponent;
configureTestBed({
providers: [
@ -22,8 +22,8 @@ describe('Copy2clipboardButtonDirective', () => {
});
it('should create an instance', () => {
directive = new Copy2ClipboardButtonDirective(null, null, null);
expect(directive).toBeTruthy();
component = new Copy2ClipboardButtonComponent(null);
expect(component).toBeTruthy();
});
describe('test onClick behaviours', () => {
@ -33,8 +33,8 @@ describe('Copy2clipboardButtonDirective', () => {
beforeEach(() => {
toastrService = TestBed.inject(ToastrService);
directive = new Copy2ClipboardButtonDirective(null, null, toastrService);
spyOn<any>(directive, 'getText').and.returnValue('foo');
component = new Copy2ClipboardButtonComponent(toastrService);
spyOn<any>(component, 'getText').and.returnValue('foo');
Object.assign(navigator, {
permissions: { query: jest.fn() },
clipboard: {
@ -51,14 +51,14 @@ describe('Copy2clipboardButtonDirective', () => {
resolve();
})
);
directive.onClick();
component.onClick();
expect(queryFn).not.toHaveBeenCalled();
expect(writeTextFn).toHaveBeenCalledWith('foo');
});
it('should call permissions API', () => {
spyOn(BrowserDetect, 'detect').and.returnValue({ name: 'chrome' });
directive.onClick();
component.onClick();
expect(queryFn).toHaveBeenCalled();
});
});

33
src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts → src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts
View File

@ -1,33 +1,28 @@
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { Component, HostListener, Input } from '@angular/core';
import { detect } from 'detect-browser';
import { ToastrService } from 'ngx-toastr';
@Directive({
selector: '[cdCopy2ClipboardButton]'
import { Icons } from '~/app/shared/enum/icons.enum';
@Component({
selector: 'cd-copy-2-clipboard-button',
templateUrl: './copy2clipboard-button.component.html',
styleUrls: ['./copy2clipboard-button.component.scss']
})
export class Copy2ClipboardButtonDirective implements OnInit {
export class Copy2ClipboardButtonComponent {
@Input()
private cdCopy2ClipboardButton: string;
private source: string;
@Input()
byId = true;
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private toastr: ToastrService
) {}
icons = Icons;
ngOnInit() {
const iElement = this.renderer.createElement('i');
this.renderer.addClass(iElement, 'fa');
this.renderer.addClass(iElement, 'fa-clipboard');
this.renderer.setAttribute(iElement, 'title', $localize`Copy to clipboard`);
this.renderer.appendChild(this.elementRef.nativeElement, iElement);
}
constructor(private toastr: ToastrService) {}
private getText(): string {
const element = document.getElementById(this.cdCopy2ClipboardButton) as HTMLInputElement;
const element = document.getElementById(this.source) as HTMLInputElement;
return element.value;
}
@ -35,7 +30,7 @@ export class Copy2ClipboardButtonDirective implements OnInit {
onClick() {
try {
const browser = detect();
const text = this.byId ? this.getText() : this.cdCopy2ClipboardButton;
const text = this.byId ? this.getText() : this.source;
const toastrFn = () => {
this.toastr.success('Copied text to the clipboard successfully.');
};

3
src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
View File

@ -1,7 +1,6 @@
import { NgModule } from '@angular/core';
import { AutofocusDirective } from './autofocus.directive';
import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive';
import { DimlessBinaryPerSecondDirective } from './dimless-binary-per-second.directive';
import { DimlessBinaryDirective } from './dimless-binary.directive';
import { FormInputDisableDirective } from './form-input-disable.directive';
@ -20,7 +19,6 @@ import { TrimDirective } from './trim.directive';
imports: [],
declarations: [
AutofocusDirective,
Copy2ClipboardButtonDirective,
DimlessBinaryDirective,
DimlessBinaryPerSecondDirective,
PasswordButtonDirective,
@ -37,7 +35,6 @@ import { TrimDirective } from './trim.directive';
],
exports: [
AutofocusDirective,
Copy2ClipboardButtonDirective,
DimlessBinaryDirective,
DimlessBinaryPerSecondDirective,
PasswordButtonDirective,