From 9c796ed76dd3cb70999b837f50ef4281cc35da7d Mon Sep 17 00:00:00 2001
From: erda-bot <81558540+erda-bot@users.noreply.github.com>
Date: Thu, 5 Aug 2021 21:21:50 +0800
Subject: [PATCH] fix: encode some character error with encodeURI (#862) (#868)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: encode some character error

* test: add image holder test

Co-authored-by: 随风 <daskyrk@users.noreply.github.com>
---
 .../__tests__/components/img-holder.test.tsx  |  6 ++++++
 shell/app/common/components/img-holder.tsx    | 21 ++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/shell/app/common/__tests__/components/img-holder.test.tsx b/shell/app/common/__tests__/components/img-holder.test.tsx
index 27766c3703..5c6f48342a 100644
--- a/shell/app/common/__tests__/components/img-holder.test.tsx
+++ b/shell/app/common/__tests__/components/img-holder.test.tsx
@@ -35,4 +35,10 @@ describe('ImgHolder', () => {
       `holder.js/40x40?${encodeURI('size=12&text=D&theme=avatar&font=PingFang SC&fontweight=normal')}`,
     );
   });
+  it('render with part of emoji character', () => {
+    const wrapper = mount(<ImgHolder rect="40x40" type="avatar" text={'🍅'.substring(0, 1)} />);
+    expect(wrapper.find('img').prop('data-src')).toBe(
+      `holder.js/40x40?${encodeURI('size=12&text=n&theme=avatar&font=PingFang20%SC&fontweight=normal')}`,
+    );
+  });
 });
diff --git a/shell/app/common/components/img-holder.tsx b/shell/app/common/components/img-holder.tsx
index 540d540dba..81abd7aef5 100644
--- a/shell/app/common/components/img-holder.tsx
+++ b/shell/app/common/components/img-holder.tsx
@@ -90,11 +90,22 @@ export const ImgHolder = (props: IProps) => {
         theme = 'avatar';
       }
     }
-    const holderParams = encodeURI(
-      compact(
-        map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
-      ).join('&'),
-    );
+    let holderParams = '';
+    try {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
+        ).join('&'),
+      );
+    } catch (error) {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text: 'n', theme, fg, bg, font, fontweight }, (v, k) =>
+            v === undefined ? v : `${k}=${v}`,
+          ),
+        ).join('&'),
+      );
+    }
     return (
       <img
         alt="holder"