mgr/dashboard: generalized code-block component

Fixes: https://tracker.ceph.com/issues/63608
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html

@@ -23,16 +23,8 @@
                       *ngIf="editing && disableRename">
         <p>The File System can only be renamed if it is shutdown and `refuse_client_session` is set to true.
            Follow the steps below in the command line and refresh the page:</p>
-        <pre class="d-flex">{{ fsFailCmd }}
-          <cd-copy-2-clipboard-button [source]="fsFailCmd"
-                                      [byId]="false"
-                                      [showIconOnly]="true"></cd-copy-2-clipboard-button>
-        </pre>
-        <pre class="d-flex">{{ fsSetCmd }}
-          <cd-copy-2-clipboard-button [source]="fsSetCmd"
-                                      [byId]="false"
-                                      [showIconOnly]="true"></cd-copy-2-clipboard-button>
-        </pre>
+        <cd-code-block [codes]="[fsFailCmd]"></cd-code-block>
+        <cd-code-block [codes]="[fsSetCmd]"></cd-code-block>
       </cd-alert-panel>
 
       <div class="card-body">

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="codes.length > 1; else singleCodeBlock">
+  <pre id="bigCodeBlock">
+    <span *ngFor="let code of codes"
+          class="d-flex p-2 align-items-center justify-content-between text-dark">
+      <span>{{code}}</span>
+      <cd-copy-2-clipboard-button
+          [source]="code"
+          [byId]="false"></cd-copy-2-clipboard-button>
+    </span>
+  </pre>
+</ng-container>
+
+<ng-template #singleCodeBlock>
+  <pre class="d-flex p-2 align-items-center justify-content-between text-dark"
+       id="singleCodeBlock">
+    <span>{{codes}}</span>
+    <cd-copy-2-clipboard-button
+      [source]="codes"
+      [byId]="false"></cd-copy-2-clipboard-button>
+  </pre>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.scss

@@ -0,0 +1,6 @@
+@use './src/styles/vendor/variables' as vv;
+
+pre {
+  background-color: vv.$code-block-bg;
+  border-radius: 0.5rem;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeBlockComponent } from './code-block.component';
+import { configureTestBed } from '~/testing/unit-test-helper';
+
+describe('CodeBlockComponent', () => {
+  let component: CodeBlockComponent;
+  let fixture: ComponentFixture<CodeBlockComponent>;
+
+  configureTestBed({
+    declarations: [CodeBlockComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeBlockComponent);
+    component = fixture.componentInstance;
+    component.codes = [];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show single codeblock if there are only one code', () => {
+    component.codes = ['code'];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('#singleCodeBlock')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('#bigCodeBlock')).toBeNull();
+  });
+
+  it('should show single codeblock if there are only one code', () => {
+    component.codes = ['code1', 'code2'];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('#bigCodeBlock')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('#singleCodeBlock')).toBeNull();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-code-block',
+  templateUrl: './code-block.component.html',
+  styleUrls: ['./code-block.component.scss']
+})
+export class CodeBlockComponent {
+  @Input()
+  codes: string[];
+}

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

@@ -51,6 +51,7 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
 import { WizardComponent } from './wizard/wizard.component';
 import { CardComponent } from './card/card.component';
 import { CardRowComponent } from './card-row/card-row.component';
+import { CodeBlockComponent } from './code-block/code-block.component';
 
 @NgModule({
   imports: [
@@ -105,7 +106,8 @@ import { CardRowComponent } from './card-row/card-row.component';
     CdLabelComponent,
     ColorClassFromTextPipe,
     CardComponent,
-    CardRowComponent
+    CardRowComponent,
+    CodeBlockComponent
   ],
   providers: [],
   exports: [
@@ -137,7 +139,8 @@ import { CardRowComponent } from './card-row/card-row.component';
     CustomLoginBannerComponent,
     CdLabelComponent,
     CardComponent,
-    CardRowComponent
+    CardRowComponent,
+    CodeBlockComponent
   ]
 })
 export class ComponentsModule {}

src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss

@@ -96,6 +96,8 @@ $chart-color-translucent-blue: #0096dc80 !default;
 $chart-color-border: #00000020 !default;
 $chart-color-translucent-yellow: #ef923472 !default;
 
+$code-block-bg: #f7f7f9 !default;
+
 // Typography
 
 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,