From 3674c28414a5369eca4bf319c6b9d65f9c93441c Mon Sep 17 00:00:00 2001
From: New Future <NewFuture@users.noreply.github.com>
Date: Mon, 1 Jul 2024 03:19:30 +0800
Subject: [PATCH] Feat-update-blocked-styles (#373)

* tenant block list

* update blocked styles
---
 .../src/components/ImageList/ImageList.tsx           |  2 +-
 .../components/UploadButton/UploadButton.styles.ts   |  7 ++++++-
 .../src/components/UploadButton/UploadButton.tsx     | 12 +++++++-----
 client-config-app/src/config.json                    |  2 +-
 client-config-app/src/locales/en.json                |  1 +
 client-config-app/src/locales/index.ts               |  1 +
 client-config-app/src/locales/zh-cn.json             |  1 +
 7 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/client-config-app/src/components/ImageList/ImageList.tsx b/client-config-app/src/components/ImageList/ImageList.tsx
index 98fc103e..b4cdf817 100644
--- a/client-config-app/src/components/ImageList/ImageList.tsx
+++ b/client-config-app/src/components/ImageList/ImageList.tsx
@@ -86,7 +86,7 @@ const ImageList: React.FC<ImageListProps> = ({
                 onDragOver={dragOverHandler}
             >
                 {enableUpload && (
-                    <UploadButton className={styles.item} onUploadChangeHandler={uploadHandler} disbaled={!enable} />
+                    <UploadButton className={styles.item} onUploadChangeHandler={uploadHandler} disabled={!enable} />
                 )}
                 {files?.map((item: File, index) => (
                     <UploadImageItem
diff --git a/client-config-app/src/components/UploadButton/UploadButton.styles.ts b/client-config-app/src/components/UploadButton/UploadButton.styles.ts
index 49578234..ff6e4f99 100644
--- a/client-config-app/src/components/UploadButton/UploadButton.styles.ts
+++ b/client-config-app/src/components/UploadButton/UploadButton.styles.ts
@@ -8,9 +8,14 @@ export const useUploadButtonStyles = makeStyles({
         order: -999999,
     },
     icon: {
-        cursor: "pointer",
         width: "100%",
         height: "100%",
+    },
+    iconDisabled: {
+        cursor: "not-allowed",
+    },
+    iconEnabled: {
+        cursor: "pointer",
         color: tokens.colorNeutralForeground2,
         ...shorthands.transition("scale", "0.3s"),
         ":hover": {
diff --git a/client-config-app/src/components/UploadButton/UploadButton.tsx b/client-config-app/src/components/UploadButton/UploadButton.tsx
index 5f6e02e3..e5c1b1a5 100644
--- a/client-config-app/src/components/UploadButton/UploadButton.tsx
+++ b/client-config-app/src/components/UploadButton/UploadButton.tsx
@@ -7,7 +7,7 @@ import { TransKeys } from "../../locales";
 
 export interface UploadButtonProps {
     onUploadChangeHandler: (file: File[]) => void;
-    disbaled?: boolean;
+    disabled?: boolean;
     className?: string;
 }
 
@@ -16,19 +16,21 @@ export interface UploadButtonProps {
 
  * @returns
  */
-export function UploadButton({ disbaled, onUploadChangeHandler, className }: UploadButtonProps) {
+export function UploadButton({ disabled, onUploadChangeHandler, className }: UploadButtonProps) {
     const styles = useUploadButtonStyles();
     const { t } = useTranslation();
     return (
         <div className={mergeClasses(styles.root, className)}>
-            <Tooltip content={t(TransKeys.uploadTips)} relationship="label">
+            <Tooltip content={t(disabled ? TransKeys.uploadDisabled : TransKeys.uploadTips)} relationship="label">
                 <label htmlFor="image-upload">
-                    <AddRegular className={styles.icon} />
+                    <AddRegular
+                        className={mergeClasses(styles.icon, disabled ? styles.iconDisabled : styles.iconEnabled)}
+                    />
                 </label>
             </Tooltip>
             <input
                 hidden
-                disabled={disbaled}
+                disabled={disabled}
                 type="file"
                 id="image-upload"
                 onChange={(e) => onUploadChangeHandler(Array.from(e.target.files!))}
diff --git a/client-config-app/src/config.json b/client-config-app/src/config.json
index 1233e8e2..a82c8c7b 100644
--- a/client-config-app/src/config.json
+++ b/client-config-app/src/config.json
@@ -1,3 +1,3 @@
 {
-    "UploadBlockedTenants": ["698b0e46-51c0-4d3b-a023-16f2b23b8c1e", "72f988bf-86f1-41af-91ab-2d7cd011db47"]
+    "UploadBlockedTenants": ["698b0e46-51c0-4d3b-a023-16f2b23b8c1e"]
 }
diff --git a/client-config-app/src/locales/en.json b/client-config-app/src/locales/en.json
index 185f90f3..88f1355c 100644
--- a/client-config-app/src/locales/en.json
+++ b/client-config-app/src/locales/en.json
@@ -1,6 +1,7 @@
 {
     "feedback": "Feedback",
     "uploadTips": "Pick pictures or Drag and drop them",
+    "uploadDisabled": "Upload is blocked",
     "delete": "Delete",
     "loading": "Loading...",
     "radio": "stickers scope",
diff --git a/client-config-app/src/locales/index.ts b/client-config-app/src/locales/index.ts
index dcd5b83c..6b8a4b0a 100644
--- a/client-config-app/src/locales/index.ts
+++ b/client-config-app/src/locales/index.ts
@@ -3,6 +3,7 @@ export const enum TransKeys {
     // termsTitle = "termsTitle",
     // feedback = "feedback",
     uploadTips = "uploadTips",
+    uploadDisabled = "uploadDisabled",
     delete = "delete",
     title = "title",
     radio = "radio",
diff --git a/client-config-app/src/locales/zh-cn.json b/client-config-app/src/locales/zh-cn.json
index 7820057d..80d5538b 100644
--- a/client-config-app/src/locales/zh-cn.json
+++ b/client-config-app/src/locales/zh-cn.json
@@ -1,6 +1,7 @@
 {
     "feedback": "反馈",
     "uploadTips": "选择图片或拖拽至此",
+    "uploadDisabled": "不可上传",
     "delete": "删除",
     "loading": "加载中...",
     "title_user": "我所收藏的表情包",