UI: Doc links widget

ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html

@@ -0,0 +1,33 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form class="tb-add-doc-link-dialog" [formGroup]="addDocLinkFormGroup">
+  <mat-toolbar style="background: transparent;">
+    <h2>Add documentation link</h2>
+    <span fxFlex></span>
+    <button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <div mat-dialog-content>
+    <tb-doc-link formControlName="docLink" [addOnly]="true"
+                      (docLinkAdded)="add($event)">
+    </tb-doc-link>
+  </div>
+</form>

ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2023 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .tb-add-doc-link-dialog {
+    width: 480px;
+    .mat-toolbar-single-row {
+      padding: 0 24px;
+    }
+    h2 {
+      color: rgba(0, 0, 0, 0.76);
+    }
+    .mat-icon {
+      color: rgba(0, 0, 0, 0.54);
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.ts

@@ -0,0 +1,58 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, OnInit, SkipSelf } from '@angular/core';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Router } from '@angular/router';
+import { DocumentationLink } from '@shared/models/user-settings.models';
+
+@Component({
+  selector: 'tb-add-doc-link-dialog',
+  templateUrl: './add-doc-link-dialog.component.html',
+  styleUrls: ['./add-doc-link-dialog.component.scss']
+})
+export class AddDocLinkDialogComponent extends
+  DialogComponent<AddDocLinkDialogComponent, DocumentationLink> implements OnInit {
+
+  addDocLinkFormGroup: UntypedFormGroup;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
+              public dialogRef: MatDialogRef<AddDocLinkDialogComponent, DocumentationLink>,
+              public fb: UntypedFormBuilder) {
+    super(store, router, dialogRef);
+  }
+
+  ngOnInit(): void {
+    this.addDocLinkFormGroup = this.fb.group({
+      docLink: [{ icon: 'notifications' }, [Validators.required]]
+    });
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  add(docLink: DocumentationLink): void {
+    this.dialogRef.close(docLink);
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html

@@ -0,0 +1,70 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div fxLayout="row" *ngIf="addMode || editMode; else docLinkTemplate">
+  <div fxFlex class="tb-edit-doc-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editDocLinkFormGroup" fxLayout="column">
+    <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label>Name</mat-label>
+      <input required matInput formControlName="name">
+      <mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')">
+        Name is required.
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label>Link</mat-label>
+      <input required matInput formControlName="link">
+      <mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')">
+        Link is required.
+      </mat-error>
+    </mat-form-field>
+    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+      <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
+      <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
+    </div>
+  </div>
+  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+    <button mat-icon-button (click)="apply()"><mat-icon>check</mat-icon></button>
+    <button mat-icon-button (click)="cancelEdit()"><mat-icon>close</mat-icon></button>
+  </div>
+</div>
+<ng-template #docLinkTemplate>
+  <div fxLayout="row">
+    <div fxFlex class="tb-doc-link">
+      <div class="tb-doc-container">
+        <div class="tb-doc-icon-container">
+          <mat-icon color="primary">{{ docLink.icon }}</mat-icon>
+        </div>
+        <div class="tb-doc-text">{{ docLink.name }}</div>
+      </div>
+    </div>
+    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+      <button mat-icon-button
+              matTooltip="{{ 'action.edit' | translate }}"
+              matTooltipPosition="above"
+              (click)="switchToEditMode()">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-icon-button
+              matTooltip="{{ 'action.delete' | translate }}"
+              matTooltipPosition="above"
+              (click)="delete()">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </div>
+</ng-template>

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.scss

@@ -0,0 +1,61 @@
+/**
+ * Copyright © 2016-2023 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .tb-edit-doc-link {
+    padding: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
+    border-radius: 10px;
+    &.edit-mode {
+      border: 1px solid rgba(48, 86, 128, 0.32);
+    }
+  }
+  .tb-doc-link {
+    height: 52px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 12px;
+    background: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
+    border-radius: 10px;
+    .tb-doc-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .tb-doc-icon-container {
+        height: 40px;
+        padding: 8px;
+        background: #F3F6FA;
+        border-radius: 6px;
+        margin-right: 8px;
+      }
+      .tb-doc-text {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        color: rgba(0, 0, 0, 0.87);
+      }
+    }
+  }
+  .tb-edit-buttons {
+    .mat-icon {
+      color: rgba(0, 0, 0, 0.38);
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.ts

@@ -0,0 +1,190 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output, SkipSelf } from '@angular/core';
+import {
+  ControlValueAccessor, FormGroupDirective,
+  NG_VALUE_ACCESSOR, NgForm,
+  UntypedFormBuilder, UntypedFormControl,
+  UntypedFormGroup,
+  Validators
+} from '@angular/forms';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DocumentationLink } from '@shared/models/user-settings.models';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+@Component({
+  selector: 'tb-doc-link',
+  templateUrl: './doc-link.component.html',
+  styleUrls: ['./doc-link.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DocLinkComponent),
+      multi: true
+    },
+    {provide: ErrorStateMatcher, useExisting: DocLinkComponent}
+  ]
+})
+export class DocLinkComponent extends PageComponent implements OnInit, ControlValueAccessor, ErrorStateMatcher {
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  addOnly = false;
+
+  @Input()
+  disableEdit = false;
+
+  @Output()
+  docLinkAdded = new EventEmitter<DocumentationLink>();
+
+  @Output()
+  docLinkAddCanceled = new EventEmitter<void>();
+
+  @Output()
+  docLinkUpdated = new EventEmitter<DocumentationLink>();
+
+  @Output()
+  docLinkDeleted = new EventEmitter<void>();
+
+  @Output()
+  editModeChanged = new EventEmitter<boolean>();
+
+  editMode = false;
+  addMode = false;
+
+  docLink: DocumentationLink;
+
+  private propagateChange = null;
+
+  public editDocLinkFormGroup: UntypedFormGroup;
+
+  private submitted = false;
+
+  constructor(protected store: Store<AppState>,
+              private fb: UntypedFormBuilder,
+              @SkipSelf() private errorStateMatcher: ErrorStateMatcher) {
+    super(store);
+  }
+
+  ngOnInit(): void {
+    this.addMode = this.addOnly;
+    this.editDocLinkFormGroup = this.fb.group({
+      icon: [null, [Validators.required]],
+      name: [null, [Validators.required]],
+      link: [null, [Validators.required]]
+    });
+  }
+
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
+    const customErrorState = !!(control && control.invalid && this.submitted);
+    return originalErrorState || customErrorState;
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (isDisabled) {
+      this.editDocLinkFormGroup.disable({emitEvent: false});
+    } else {
+      this.editDocLinkFormGroup.enable({emitEvent: false});
+    }
+  }
+
+  writeValue(value: DocumentationLink): void {
+    this.docLink = value;
+    this.editDocLinkFormGroup.patchValue(
+      value, {emitEvent: false}
+    );
+    if (!this.editDocLinkFormGroup.valid) {
+      this.addMode = true;
+      this.editModeChanged.emit(true);
+    }
+  }
+
+  switchToEditMode() {
+    if (!this.disableEdit && !this.editMode) {
+      this.submitted = false;
+      this.editDocLinkFormGroup.patchValue(
+        this.docLink, {emitEvent: false}
+      );
+      this.editMode = true;
+      this.editModeChanged.emit(true);
+    }
+  }
+
+  apply() {
+    this.submitted = true;
+    this.updateModel();
+    if (this.editDocLinkFormGroup.valid) {
+      this.editMode = false;
+      this.editModeChanged.emit(false);
+      this.docLinkUpdated.next(this.editDocLinkFormGroup.value);
+    }
+  }
+
+  cancelEdit() {
+    this.submitted = false;
+    this.editMode = false;
+    this.editModeChanged.emit(false);
+  }
+
+  add() {
+    this.submitted = true;
+    this.updateModel();
+    if (this.editDocLinkFormGroup.valid) {
+      if (!this.addOnly) {
+        this.addMode = false;
+        this.editModeChanged.emit(false);
+      }
+      this.docLinkAdded.next(this.editDocLinkFormGroup.value);
+    }
+  }
+
+  cancelAdd() {
+    this.editModeChanged.emit(false);
+    this.docLinkAddCanceled.emit();
+  }
+
+  delete() {
+    this.docLinkDeleted.emit();
+  }
+
+  isEditing() {
+    return this.editMode || this.addMode;
+  }
+
+  private updateModel() {
+    if (this.editDocLinkFormGroup.valid) {
+      this.docLink = this.editDocLinkFormGroup.value;
+      this.propagateChange(this.editDocLinkFormGroup.value);
+    } else {
+      this.propagateChange(null);
+    }
+  }
+
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts

@@ -20,10 +20,20 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Authority } from '@shared/models/authority.enum';
 import { map } from 'rxjs';
-import { DocumentationLinks } from '@shared/models/user-settings.models';
+import { DocumentationLink, DocumentationLinks } from '@shared/models/user-settings.models';
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { WidgetContext } from '@home/models/widget-component.models';
+import {
+  ImportDialogCsvComponent,
+  ImportDialogCsvData
+} from '@home/components/import-export/import-dialog-csv.component';
+import { MatDialog } from '@angular/material/dialog';
+import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component';
+import {
+  EditDocLinksDialogComponent,
+  EditDocLinksDialogData
+} from '@home/components/widget/lib/home-page/edit-doc-links-dialog.component';
 
 const defaultDocLinksMap = new Map<Authority, DocumentationLinks>(
   [
@@ -103,13 +113,18 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit {
 
   constructor(protected store: Store<AppState>,
               private cd: ChangeDetectorRef,
-              private userSettingsService: UserSettingsService) {
+              private userSettingsService: UserSettingsService,
+              private dialog: MatDialog) {
     super(store);
   }
 
   ngOnInit() {
     this.settings = this.ctx.settings;
     this.columns = this.settings.columns || 3;
+    this.loadDocLinks();
+  }
+
+  private loadDocLinks() {
     this.userSettingsService.getDocumentationLinks().pipe(
       map((documentationLinks) => {
         if (!documentationLinks || !documentationLinks.links) {
@@ -127,10 +142,35 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit {
   }
 
   edit() {
-
+    this.dialog.open<EditDocLinksDialogComponent, EditDocLinksDialogData,
+      boolean>(EditDocLinksDialogComponent, {
+      disableClose: true,
+      autoFocus: false,
+      data: {
+        docLinks: this.documentationLinks
+      },
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
+    }).afterClosed().subscribe(
+      (result) => {
+        if (result) {
+          this.loadDocLinks();
+        }
+      });
   }
 
   addLink() {
-
+    this.dialog.open<AddDocLinkDialogComponent, any,
+      DocumentationLink>(AddDocLinkDialogComponent, {
+      disableClose: true,
+      autoFocus: false,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
+    }).afterClosed().subscribe(
+      (docLink) => {
+        if (docLink) {
+          this.documentationLinks.links.push(docLink);
+          this.cd.markForCheck();
+          this.userSettingsService.updateDocumentationLinks(this.documentationLinks).subscribe();
+        }
+    });
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.html

@@ -0,0 +1,63 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form class="tb-edit-doc-links-dialog" [formGroup]="editDocLinksFormGroup">
+  <mat-toolbar style="background: transparent;">
+    <h2>Documentation</h2>
+    <span fxFlex></span>
+    <button mat-icon-button
+            (click)="close()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <div mat-dialog-content>
+    <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
+         (cdkDropListDropped)="docLinkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
+      <div cdkDrag class="tb-draggable" *ngFor="let docLinkControl of docLinksFormArray().controls; trackBy: trackByDocLink;
+               let $index = index; last as isLast;"
+           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+        <tb-doc-link fxFlex #docLinkComponent [formControl]="docLinkControl"
+                     [disableEdit]="editMode || addMode"
+                     (editModeChanged)="editMode = $event"
+                     (docLinkUpdated)="update()"
+                     (docLinkDeleted)="deleteLink($index)">
+        </tb-doc-link>
+        <div *ngIf="!docLinkComponent.isEditing()"
+             cdkDragHandle
+             matTooltip="{{ 'action.drag' | translate }}"
+             matTooltipPosition="above"
+             class="tb-drag-handle">
+          <mat-icon>drag_indicator</mat-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div mat-dialog-actions>
+    <div *ngIf="!editMode && !addMode" fxFlex class="tb-add-doc-button"
+         matTooltip="Add link"
+         matTooltipPosition="above"
+         (click)="addLink()">
+      <mat-icon class="tb-add-icon">add</mat-icon>
+    </div>
+    <tb-doc-link *ngIf="addMode" fxFlex [(ngModel)]="addingDocLink"
+                 [ngModelOptions]="{standalone: true}"
+                 (docLinkAdded)="linkAdded($event)"
+                 (docLinkAddCanceled)="addMode = false">
+    </tb-doc-link>
+  </div>
+</form>

ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.scss

@@ -0,0 +1,62 @@
+/**
+ * Copyright © 2016-2023 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .tb-edit-doc-links-dialog {
+    width: 480px;
+    .mat-toolbar-single-row {
+      padding: 0 24px;
+    }
+    h2 {
+      color: rgba(0, 0, 0, 0.76);
+    }
+    .mat-icon {
+      color: rgba(0, 0, 0, 0.54);
+    }
+    .mat-mdc-dialog-content {
+      padding: 24px 24px 8px 24px;
+    }
+    .mdc-dialog__actions {
+      padding: 0 24px 24px;
+    }
+  }
+  .tb-drag-handle {
+    height: 24px;
+    margin-left: 12px;
+    .mat-icon {
+      color: rgba(0, 0, 0, 0.38);
+    }
+  }
+  .tb-add-doc-button {
+    height: 52px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #FFFFFF;
+    padding: 12px;
+    border: 2px dashed rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    .tb-add-icon {
+      color: rgba(0, 0, 0, 0.12);
+    }
+    &:hover {
+      .tb-add-icon {
+        color: rgba(0, 0, 0, 0.38);
+      }
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.ts

@@ -0,0 +1,114 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Router } from '@angular/router';
+import { DocumentationLink, DocumentationLinks } from '@shared/models/user-settings.models';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { UserSettingsService } from '@core/http/user-settings.service';
+
+export interface EditDocLinksDialogData {
+  docLinks: DocumentationLinks;
+}
+
+@Component({
+  selector: 'tb-edit-doc-links-dialog',
+  templateUrl: './edit-doc-links-dialog.component.html',
+  styleUrls: ['./edit-doc-links-dialog.component.scss']
+})
+export class EditDocLinksDialogComponent extends
+  DialogComponent<EditDocLinksDialogComponent, boolean> implements OnInit {
+
+  updated = false;
+  addMode = false;
+  editMode = false;
+
+  docLinks = this.data.docLinks;
+  addingDocLink: Partial<DocumentationLink>;
+
+  editDocLinksFormGroup: UntypedFormGroup;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @Inject(MAT_DIALOG_DATA) public data: EditDocLinksDialogData,
+              public dialogRef: MatDialogRef<EditDocLinksDialogComponent, boolean>,
+              public fb: UntypedFormBuilder,
+              private userSettingsService: UserSettingsService) {
+    super(store, router, dialogRef);
+  }
+
+  ngOnInit(): void {
+    const docLinksControls: Array<AbstractControl> = [];
+    for (const docLink of this.docLinks.links) {
+      docLinksControls.push(this.fb.control(docLink, [Validators.required]));
+    }
+    this.editDocLinksFormGroup = this.fb.group({
+      links: this.fb.array(docLinksControls)
+    });
+  }
+
+  docLinksFormArray(): UntypedFormArray {
+    return this.editDocLinksFormGroup.get('links') as UntypedFormArray;
+  }
+
+  trackByDocLink(index: number, docLinkControl: AbstractControl): any {
+    return docLinkControl;
+  }
+
+  docLinkDrop(event: CdkDragDrop<string[]>) {
+    const docLinksArray = this.editDocLinksFormGroup.get('links') as UntypedFormArray;
+    const docLink = docLinksArray.at(event.previousIndex);
+    docLinksArray.removeAt(event.previousIndex);
+    docLinksArray.insert(event.currentIndex, docLink);
+    this.update();
+  }
+
+  addLink() {
+    this.addingDocLink = { icon: 'notifications' };
+    this.addMode = true;
+  }
+
+  linkAdded(docLink: DocumentationLink) {
+    this.addMode = false;
+    const docLinksArray = this.editDocLinksFormGroup.get('links') as UntypedFormArray;
+    const docLinkControl = this.fb.control(docLink, [Validators.required]);
+    docLinksArray.push(docLinkControl);
+    this.update();
+  }
+
+  deleteLink(index: number) {
+    (this.editDocLinksFormGroup.get('links') as UntypedFormArray).removeAt(index);
+    this.update();
+  }
+
+  update() {
+    if (this.editDocLinksFormGroup.valid) {
+      const docLinks: DocumentationLinks = this.editDocLinksFormGroup.value;
+      this.userSettingsService.updateDocumentationLinks(docLinks).subscribe(() => {
+        this.updated = true;
+      });
+    }
+  }
+
+  close(): void {
+    this.dialogRef.close(this.updated);
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts

@@ -21,6 +21,9 @@ import { ClusterInfoTableComponent } from '@home/components/widget/lib/home-page
 import { ConfiguredFeaturesComponent } from '@home/components/widget/lib/home-page/configured-features.component';
 import { VersionInfoComponent } from '@home/components/widget/lib/home-page/version-info.component';
 import { DocLinksWidgetComponent } from '@home/components/widget/lib/home-page/doc-links-widget.component';
+import { DocLinkComponent } from '@home/components/widget/lib/home-page/doc-link.component';
+import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component';
+import { EditDocLinksDialogComponent } from '@home/components/widget/lib/home-page/edit-doc-links-dialog.component';
 
 @NgModule({
   declarations:
@@ -28,7 +31,10 @@ import { DocLinksWidgetComponent } from '@home/components/widget/lib/home-page/d
       ClusterInfoTableComponent,
       ConfiguredFeaturesComponent,
       VersionInfoComponent,
-      DocLinksWidgetComponent
+      DocLinksWidgetComponent,
+      DocLinkComponent,
+      AddDocLinkDialogComponent,
+      EditDocLinksDialogComponent
     ],
   imports: [
     CommonModule,
@@ -38,7 +44,10 @@ import { DocLinksWidgetComponent } from '@home/components/widget/lib/home-page/d
     ClusterInfoTableComponent,
     ConfiguredFeaturesComponent,
     VersionInfoComponent,
-    DocLinksWidgetComponent
+    DocLinksWidgetComponent,
+    DocLinkComponent,
+    AddDocLinkDialogComponent,
+    EditDocLinksDialogComponent
   ]
 })
 export class HomePageWidgetsModule { }