diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html index c7724e9ec9a..d84ea787f13 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html @@ -48,10 +48,8 @@ class="btn btn-light" cdPasswordButton="password"> - + + - + + - + + @@ -311,10 +309,8 @@ class="btn btn-light" cdPasswordButton="target_mutual_password"> - + + @@ -418,10 +414,8 @@ class="btn btn-light" [cdPasswordButton]="'password' + ii"> - + + - + + - + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html index 3b9caabbe73..b255854619b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html @@ -19,10 +19,10 @@ [textItem]="logText" fileName="cluster_log"> - + +

@@ -50,10 +50,10 @@ [textItem]="logText" fileName="audit_log"> - + +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html index 6f9d47ce421..e2d4f01140c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html @@ -319,10 +319,8 @@ class="btn btn-light" cdPasswordButton="api_password"> - + + - {{ actionLabels.NEXT }} + {{ actionLabels.NEXT }}

@@ -267,10 +267,8 @@ - + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html index 25b7bce9530..360015125b5 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html @@ -155,10 +155,8 @@ class="btn btn-light" cdPasswordButton="access_key"> - + + - + + - + + - + + - + + - + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index 5defbf36a3a..bccbc645bab 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -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 ] diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html new file mode 100644 index 00000000000..25a3f3cfe25 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html @@ -0,0 +1,7 @@ + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.spec.ts similarity index 75% rename from src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts rename to src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.spec.ts index b9681a95a2a..2842793c67b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.spec.ts @@ -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(directive, 'getText').and.returnValue('foo'); + component = new Copy2ClipboardButtonComponent(toastrService); + spyOn(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(); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts similarity index 57% rename from src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts rename to src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts index 218af07eedd..2cc656bfccb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts @@ -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.'); }; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts index fd43d662128..00e5635d36b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts @@ -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,