Standard user View Page refactoring

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

src/console/package.json

@@ -33,9 +33,11 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "@ctrl/ngx-codemirror": "^5.1.1",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "bootstrap": "^5.1.3",
+    "codemirror": "^5.65.16",
     "jsonwebtoken": "^8.5.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",

src/console/src/app/app.module.ts

@@ -44,6 +44,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { UserViewsComponent } from './components/dashboard/user/user-views/user-views.component';
 import { FileuploadComponent } from './components/widgets/fileupload.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { CodeMirrorComponent } from './components/code-mirror/code-mirror.component';
 
 // Required during AOT compilation
 export function httpTranslateLoaderFactory(http: HttpClient) {
@@ -65,7 +67,8 @@ export function httpTranslateLoaderFactory(http: HttpClient) {
     UserComponent,
     ViewCreateFormComponent,
     UserViewsComponent,
-    FileuploadComponent
+    FileuploadComponent,
+    CodeMirrorComponent,
   ],
   imports: [
     BrowserModule,
@@ -94,6 +97,7 @@ export function httpTranslateLoaderFactory(http: HttpClient) {
     MatTabsModule,
     MatTooltipModule,
     ClipboardModule,
+    CodemirrorModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/console/src/app/components/code-mirror/code-mirror.component.html

@@ -0,0 +1,4 @@
+<ngx-codemirror
+  [(ngModel)]="data"
+  [options]="codeMirrorOptions">
+</ngx-codemirror>

src/console/src/app/components/code-mirror/code-mirror.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeMirrorComponent } from './code-mirror.component';
+
+describe('CodeMirrorComponent', () => {
+  let component: CodeMirrorComponent;
+  let fixture: ComponentFixture<CodeMirrorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CodeMirrorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeMirrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/console/src/app/components/code-mirror/code-mirror.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-code-mirror',
+  templateUrl: './code-mirror.component.html',
+  styleUrls: ['./code-mirror.component.scss']
+})
+export class CodeMirrorComponent {
+
+  @Input() data!: string;
+
+  codeMirrorOptions: any = {
+    mode: 'text/plain',
+    indentWithTabs: true,
+    smartIndent: true,
+    lineNumbers: true,
+    lineWrapping: false,
+    extraKeys: { 'Ctrl-Space': 'autocomplete' },
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    lint: true,
+    readOnly: 'nocursor'
+  };
+
+}

src/console/src/app/components/dashboard/admin/admin-views/admin-views.component.html

@@ -77,7 +77,7 @@
             <div class="element-detail" *ngIf="element.Views?.data.length" [@detailExpand]="expandedElements[element.Id] ? 'expanded' : 'collapsed'">
               <div class="inner-table mat-elevation-z8" *ngIf="expandedElements[element.Id]" fxLayout="column" fxLayoutAlign="start start">
                 <mat-label class="inner-table-header">{{'VIEW_TABLE_HEADER' | translate}}</mat-label>
-                <table #innerTables mat-table class="inner-table-container" [dataSource]="element.Views">
+                <table #innerTables mat-table class="inner-table-container" class="mat-elevation-z8" [dataSource]="element.Views">
 
                   <!-- Id Column -->
                   <ng-container matColumnDef="Id">
@@ -100,7 +100,9 @@
                   <!-- VScodeSettings Column -->
                   <ng-container matColumnDef="VScodeSettings">
                     <th mat-header-cell *matHeaderCellDef> {{ 'COLUMN_VSCODE_SETTINGS' | translate }} </th>
-                    <td mat-cell *matCellDef="let element"> {{element.VScodeSettings}} </td>
+                    <td mat-cell *matCellDef="let element">
+                      <app-code-mirror [data]="element.VScodeSettings"></app-code-mirror>
+                    </td>
                   </ng-container>
 
                   <!-- GoTo Column -->

src/console/src/app/components/dashboard/admin/admin-views/admin-views.component.scss

@@ -126,7 +126,7 @@ tr.element-row:not(.expanded-row):active {
 
 .inner-table {
   width: 100%;
-  padding: 0 0 25px 0;
+  padding: 20px;
 }
 
 .inner-table-header {
@@ -135,12 +135,11 @@ tr.element-row:not(.expanded-row):active {
   color: rgba(0,0,0,.54);
 }
 
-.inner-table-container {
-  box-shadow: 2px 2px #ace0c7;
-  border: 0.5px solid #30ba78
-}
-
 .inner-table mat-form-field {
   margin-top: 15px;
   width: 100%;
 }
+
+::ng-deep .mat-tab-label .mat-tab-label-content {
+  font-size: x-large;
+}