From 5f98e654cd67f7f35e3efd8fc838728c57edd0df Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 28 Nov 2023 18:26:04 +0200
Subject: [PATCH] UI: Apply special prefix to gallery image inputs.

---
 ui-ngx/src/app/core/http/image.service.ts        |  3 ++-
 .../image/gallery-image-input.component.ts       |  7 ++++---
 .../multiple-gallery-image-input.component.ts    |  5 +++--
 ui-ngx/src/app/shared/models/resource.models.ts  | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/core/http/image.service.ts b/ui-ngx/src/app/core/http/image.service.ts
index 4366d6edda..3fcba170f4 100644
--- a/ui-ngx/src/app/core/http/image.service.ts
+++ b/ui-ngx/src/app/core/http/image.service.ts
@@ -25,7 +25,7 @@ import {
   ImageResourceInfo,
   imageResourceType,
   ImageResourceType,
-  IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData
+  IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData, removeTbImagePrefix
 } from '@shared/models/resource.models';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -97,6 +97,7 @@ export class ImageService {
   }
 
   public resolveImageUrl(imageUrl: string, preview = false, asString = false, emptyUrl = NO_IMAGE_DATA_URI): Observable<SafeUrl | string> {
+    imageUrl = removeTbImagePrefix(imageUrl);
     if (isImageResourceUrl(imageUrl)) {
       return this.getImageDataUrl(imageUrl, preview, asString, emptyUrl);
     } else {
diff --git a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
index cf934bf3c5..2a82ff1dc0 100644
--- a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
+++ b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
@@ -33,7 +33,7 @@ import {
   extractParamsFromImageResourceUrl,
   ImageResourceInfo,
   isBase64DataImageUrl,
-  isImageResourceUrl
+  isImageResourceUrl, prependTbImagePrefix, removeTbImagePrefix
 } from '@shared/models/resource.models';
 import { ImageService } from '@core/http/image.service';
 import { MatButton } from '@angular/material/button';
@@ -123,12 +123,13 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
   }
 
   writeValue(value: string): void {
+    value = removeTbImagePrefix(value);
     if (this.imageUrl !== value) {
       this.reset();
       this.imageUrl = value;
       this.detectLinkType();
       if (this.linkType === ImageLinkType.resource) {
-        const params = extractParamsFromImageResourceUrl(value);
+        const params = extractParamsFromImageResourceUrl(this.imageUrl);
         this.loadingImageResource = true;
         this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe(
           {
@@ -171,7 +172,7 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
     this.cd.markForCheck();
     if (this.imageUrl !== value) {
       this.imageUrl = value;
-      this.propagateChange(this.imageUrl);
+      this.propagateChange(prependTbImagePrefix(this.imageUrl));
     }
   }
 
diff --git a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts
index f84265be61..5a6a4e7d37 100644
--- a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts
+++ b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts
@@ -27,6 +27,7 @@ import { ImageLinkType } from '@shared/components/image/gallery-image-input.comp
 import { TbPopoverService } from '@shared/components/popover.service';
 import { MatButton } from '@angular/material/button';
 import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
+import { prependTbImagePrefixToUrls, removeTbImagePrefixFromUrls } from '@shared/models/resource.models';
 
 @Component({
   selector: 'tb-multiple-gallery-image-input',
@@ -88,12 +89,12 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
 
   writeValue(value: string[]): void {
     this.reset();
-    this.imageUrls = value || [];
+    this.imageUrls = removeTbImagePrefixFromUrls(value);
   }
 
   private updateModel() {
     this.cd.markForCheck();
-    this.propagateChange(this.imageUrls);
+    this.propagateChange(prependTbImagePrefixToUrls(this.imageUrls));
   }
 
   private reset() {
diff --git a/ui-ngx/src/app/shared/models/resource.models.ts b/ui-ngx/src/app/shared/models/resource.models.ts
index b019c064ea..b2b55ef9de 100644
--- a/ui-ngx/src/app/shared/models/resource.models.ts
+++ b/ui-ngx/src/app/shared/models/resource.models.ts
@@ -127,11 +127,27 @@ export const toImageDeleteResult = (image: ImageResourceInfo, e?: any): ImageDel
 export const imageResourceType = (imageInfo: ImageResourceInfo): ImageResourceType =>
   (!imageInfo.tenantId || imageInfo.tenantId?.id === NULL_UUID) ? 'system' : 'tenant';
 
+export const TB_IMAGE_PREFIX = 'tb-image;';
+
 export const IMAGES_URL_REGEXP = /\/api\/images\/(tenant|system)\/(.*)/;
 export const IMAGES_URL_PREFIX = '/api/images';
 
 export const IMAGE_BASE64_URL_PREFIX = 'data:image/';
 
+export const removeTbImagePrefix = (url: string): string => url ? url.replace(TB_IMAGE_PREFIX, '') : url;
+
+export const removeTbImagePrefixFromUrls = (urls: string[]): string[] => urls ? urls.map(url => removeTbImagePrefix(url)) : [];
+
+export const prependTbImagePrefix = (url: string): string => {
+  if (url && !url.startsWith(TB_IMAGE_PREFIX)) {
+    url = TB_IMAGE_PREFIX + url;
+  }
+  return url;
+};
+
+export const prependTbImagePrefixToUrls = (urls: string[]): string[] => urls ? urls.map(url => prependTbImagePrefix(url)) : [];
+
+
 export const isImageResourceUrl = (url: string): boolean => url && IMAGES_URL_REGEXP.test(url);
 
 export const extractParamsFromImageResourceUrl = (url: string): {type: ImageResourceType; key: string} => {