chore: improve the check time of variable name (#7569)

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -42,18 +42,19 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const { type, label, variable, options, max_length } = tempPayload
 
   const isStringInput = type === InputVarType.textInput || type === InputVarType.paragraph
+  const checkVariableName = useCallback((value: string) => {
+    const { isValid, errorMessageKey } = checkKeys([value], false)
+    if (!isValid) {
+      Toast.notify({
+        type: 'error',
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('appDebug.variableConig.varName') }),
+      })
+      return false
+    }
+    return true
+  }, [t])
   const handlePayloadChange = useCallback((key: string) => {
     return (value: any) => {
-      if (key === 'variable') {
-        const { isValid, errorKey, errorMessageKey } = checkKeys([value], true)
-        if (!isValid) {
-          Toast.notify({
-            type: 'error',
-            message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
-          })
-          return
-        }
-      }
       setTempPayload((prev) => {
         const newPayload = {
           ...prev,
@@ -63,19 +64,20 @@ const ConfigModal: FC<IConfigModalProps> = ({
         return newPayload
       })
     }
-  }, [t])
+  }, [])
 
   const handleVarKeyBlur = useCallback((e: any) => {
-    if (tempPayload.label)
+    const varName = e.target.value
+    if (!checkVariableName(varName) || tempPayload.label)
       return
 
     setTempPayload((prev) => {
       return {
         ...prev,
-        label: e.target.value,
+        label: varName,
       }
     })
-  }, [tempPayload])
+  }, [checkVariableName, tempPayload.label])
 
   const handleConfirm = () => {
     const moreInfo = tempPayload.variable === payload?.variable
@@ -84,10 +86,11 @@ const ConfigModal: FC<IConfigModalProps> = ({
         type: ChangeType.changeVarName,
         payload: { beforeKey: payload?.variable || '', afterKey: tempPayload.variable },
       }
-    if (!tempPayload.variable) {
-      Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.varNameRequired') })
+
+    const isVariableNameValid = checkVariableName(tempPayload.variable)
+    if (!isVariableNameValid)
       return
-    }
+
     // TODO: check if key already exists. should the consider the edit case
     // if (varKeys.map(key => key?.trim()).includes(tempPayload.variable.trim())) {
     //   Toast.notify({

web/i18n/de-DE/app-debug.ts

@@ -237,11 +237,11 @@ const translation = {
     typeSelect: 'Auswählen',
   },
   varKeyError: {
-    canNoBeEmpty: 'Variablenschlüssel darf nicht leer sein',
-    tooLong: 'Variablenschlüssel: {{key}} zu lang. Darf nicht länger als 30 Zeichen sein',
-    notValid: 'Variablenschlüssel: {{key}} ist ungültig. Darf nur Buchstaben, Zahlen und Unterstriche enthalten',
-    notStartWithNumber: 'Variablenschlüssel: {{key}} darf nicht mit einer Zahl beginnen',
-    keyAlreadyExists: 'Variablenschlüssel: :{{key}} existiert bereits',
+    canNoBeEmpty: '{{key}} ist erforderlich',
+    tooLong: '{{key}} zu lang. Darf nicht länger als 30 Zeichen sein',
+    notValid: '{{key}} ist ungültig. Darf nur Buchstaben, Zahlen und Unterstriche enthalten',
+    notStartWithNumber: '{{key}} darf nicht mit einer Zahl beginnen',
+    keyAlreadyExists: '{{key}} existiert bereits',
   },
   otherError: {
     promptNoBeEmpty: 'Prompt darf nicht leer sein',

web/i18n/en-US/app-debug.ts

@@ -290,11 +290,11 @@ const translation = {
     typeSelect: 'Select',
   },
   varKeyError: {
-    canNoBeEmpty: 'Variable key can not be empty',
-    tooLong: 'Variable key: {{key}} too length. Can not be longer then 30 characters',
-    notValid: 'Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores',
-    notStartWithNumber: 'Variable key: {{key}} can not start with a number',
-    keyAlreadyExists: 'Variable key: :{{key}} already exists',
+    canNoBeEmpty: '{{key}} is required',
+    tooLong: '{{key}} is too length. Can not be longer then 30 characters',
+    notValid: '{{key}} is invalid. Can only contain letters, numbers, and underscores',
+    notStartWithNumber: '{{key}} can not start with a number',
+    keyAlreadyExists: '{{key}} already exists',
   },
   otherError: {
     promptNoBeEmpty: 'Prompt can not be empty',
@@ -323,7 +323,6 @@ const translation = {
     'content': 'Content',
     'required': 'Required',
     'errorMsg': {
-      varNameRequired: 'Variable name is required',
       labelNameRequired: 'Label name is required',
       varNameCanBeRepeat: 'Variable name can not be repeated',
       atLeastOneOption: 'At least one option is required',

web/i18n/es-ES/app-debug.ts

@@ -248,11 +248,11 @@ const translation = {
     typeSelect: 'Seleccionar',
   },
   varKeyError: {
-    canNoBeEmpty: 'La clave de la variable no puede estar vacía',
-    tooLong: 'Clave de la variable: {{key}} demasiado larga. No puede tener más de 30 caracteres',
-    notValid: 'Clave de la variable: {{key}} no es válida. Solo puede contener letras, números y guiones bajos',
-    notStartWithNumber: 'Clave de la variable: {{key}} no puede comenzar con un número',
-    keyAlreadyExists: 'Clave de la variable: {{key}} ya existe',
+    canNoBeEmpty: 'Se requiere {{key}}',
+    tooLong: '{{key}} demasiado larga. No puede tener más de 30 caracteres',
+    notValid: '{{key}} no es válida. Solo puede contener letras, números y guiones bajos',
+    notStartWithNumber: '{{key}} no puede comenzar con un número',
+    keyAlreadyExists: '{{key}} ya existe',
   },
   otherError: {
     promptNoBeEmpty: 'La indicación no puede estar vacía',

web/i18n/fa-IR/app-debug.ts

@@ -283,11 +283,11 @@ const translation = {
       typeSelect: 'انتخاب',
     },
     varKeyError: {
-      canNoBeEmpty: 'کلید متغیر نمی‌تواند خالی باشد',
-      tooLong: 'کلید متغیر: {{key}} طولانی است. نمی‌تواند بیش از 30 کاراکتر باشد',
-      notValid: 'کلید متغیر: {{key}} نامعتبر است. فقط می‌تواند شامل حروف، اعداد و زیرخط باشد',
-      notStartWithNumber: 'کلید متغیر: {{key}} نمی‌تواند با عدد شروع شود',
-      keyAlreadyExists: 'کلید متغیر: :{{key}} از قبل وجود دارد',
+      canNoBeEmpty: '{{key}} مطلوب',
+      tooLong: '{{key}} طولانی است. نمی‌تواند بیش از 30 کاراکتر باشد',
+      notValid: '{{key}} نامعتبر است. فقط می‌تواند شامل حروف، اعداد و زیرخط باشد',
+      notStartWithNumber: '{{key}} نمی‌تواند با عدد شروع شود',
+      keyAlreadyExists: '{{key}} از قبل وجود دارد',
     },
     otherError: {
       promptNoBeEmpty: 'پرس و جو نمی‌تواند خالی باشد',

web/i18n/fr-FR/app-debug.ts

@@ -237,11 +237,11 @@ const translation = {
     typeSelect: 'Sélectionner',
   },
   varKeyError: {
-    canNoBeEmpty: 'La clé variable ne peut pas être vide',
-    tooLong: 'Variable key: {{key}} too length. Can not be longer then 30 characters',
-    notValid: 'Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores',
-    notStartWithNumber: 'Variable key: {{key}} can not start with a number',
-    keyAlreadyExists: 'Variable key: :{{key}} already exists',
+    canNoBeEmpty: '{{key}} est obligatoire',
+    tooLong: '{{key}} too length. Can not be longer then 30 characters',
+    notValid: '{{key}} is invalid. Can only contain letters, numbers, and underscores',
+    notStartWithNumber: '{{key}} can not start with a number',
+    keyAlreadyExists: '{{key}} already exists',
   },
   otherError: {
     promptNoBeEmpty: 'Le prompt ne peut pas être vide',

web/i18n/hi-IN/app-debug.ts

@@ -276,14 +276,14 @@ const translation = {
     typeSelect: 'चुनें',
   },
   varKeyError: {
-    canNoBeEmpty: 'वेरिएबल कुंजी खाली नहीं हो सकती',
+    canNoBeEmpty: '{{key}} आवश्यक है',
     tooLong:
-      'वेरिएबल कुंजी: {{key}} बहुत लंबी है। 30 वर्णों से अधिक नहीं हो सकती',
+      '{{key}} बहुत लंबी है। 30 वर्णों से अधिक नहीं हो सकती',
     notValid:
-      'वेरिएबल कुंजी: {{key}} अवैध है। केवल अक्षर, संख्याएं, और अंडरस्कोर शामिल हो सकते हैं',
+      '{{key}} अवैध है। केवल अक्षर, संख्याएं, और अंडरस्कोर शामिल हो सकते हैं',
     notStartWithNumber:
-      'वेरिएबल कुंजी: {{key}} एक संख्या से प्रारंभ नहीं हो सकती',
-    keyAlreadyExists: 'वेरिएबल कुंजी: {{key}} पहले से मौजूद है',
+      '{{key}} एक संख्या से प्रारंभ नहीं हो सकती',
+    keyAlreadyExists: '{{key}} पहले से मौजूद है',
   },
   otherError: {
     promptNoBeEmpty: 'प्रॉम्प्ट खाली नहीं हो सकता',

web/i18n/it-IT/app-debug.ts

@@ -278,14 +278,14 @@ const translation = {
     typeSelect: 'Seleziona',
   },
   varKeyError: {
-    canNoBeEmpty: 'La chiave della variabile non può essere vuota',
+    canNoBeEmpty: '{{key}} è obbligatorio',
     tooLong:
-      'La chiave della variabile: {{key}} è troppo lunga. Non può essere più lunga di 30 caratteri',
+      '{{key}} è troppo lunga. Non può essere più lunga di 30 caratteri',
     notValid:
-      'La chiave della variabile: {{key}} non è valida. Può contenere solo lettere, numeri e underscore',
+      '{{key}} non è valida. Può contenere solo lettere, numeri e underscore',
     notStartWithNumber:
-      'La chiave della variabile: {{key}} non può iniziare con un numero',
-    keyAlreadyExists: 'La chiave della variabile: {{key}} esiste già',
+      '{{key}} non può iniziare con un numero',
+    keyAlreadyExists: '{{key}} esiste già',
   },
   otherError: {
     promptNoBeEmpty: 'Il prompt non può essere vuoto',

web/i18n/ja-JP/app-debug.ts

@@ -284,11 +284,11 @@ const translation = {
     typeSelect: '選択',
   },
   varKeyError: {
-    canNoBeEmpty: '変数キーを空にすることはできません',
-    tooLong: '変数キー: {{key}} が長すぎます。30文字を超えることはできません',
-    notValid: '変数キー: {{key}} が無効です。文字、数字、アンダースコアのみを含めることができます',
-    notStartWithNumber: '変数キー: {{key}} は数字で始めることはできません',
-    keyAlreadyExists: '変数キー: {{key}} はすでに存在します',
+    canNoBeEmpty: '{{key}} は必須です',
+    tooLong: '{{key}} が長すぎます。30文字を超えることはできません',
+    notValid: '{{key}} が無効です。文字、数字、アンダースコアのみを含めることができます',
+    notStartWithNumber: '{{key}} は数字で始めることはできません',
+    keyAlreadyExists: '{{key}} はすでに存在します',
   },
   otherError: {
     promptNoBeEmpty: 'プロンプトを空にすることはできません',

web/i18n/ko-KR/app-debug.ts

@@ -248,11 +248,11 @@ const translation = {
     typeSelect: '선택',
   },
   varKeyError: {
-    canNoBeEmpty: '변수 키를 비울 수 없습니다',
-    tooLong: '변수 키: {{key}}가 너무 깁니다. 30자를 넘을 수 없습니다',
-    notValid: '변수 키: {{key}}가 유효하지 않습니다. 문자, 숫자, 밑줄만 포함할 수 있습니다',
-    notStartWithNumber: '변수 키: {{key}}는 숫자로 시작할 수 없습니다',
-    keyAlreadyExists: '변수 키: {{key}}는 이미 존재합니다',
+    canNoBeEmpty: '{{key}}가 필요합니다',
+    tooLong: '{{key}}가 너무 깁니다. 30자를 넘을 수 없습니다',
+    notValid: '{{key}}가 유효하지 않습니다. 문자, 숫자, 밑줄만 포함할 수 있습니다',
+    notStartWithNumber: '{{key}}는 숫자로 시작할 수 없습니다',
+    keyAlreadyExists: '{{key}}는 이미 존재합니다',
   },
   otherError: {
     promptNoBeEmpty: '프롬프트를 비울 수 없습니다',

web/i18n/pl-PL/app-debug.ts

@@ -275,14 +275,14 @@ const translation = {
     typeSelect: 'Wybierz',
   },
   varKeyError: {
-    canNoBeEmpty: 'Klucz zmiennej nie może być pusty',
+    canNoBeEmpty: '{{klucz}} jest wymagany',
     tooLong:
-      'Klucz zmiennej: {{key}} za długi. Nie może być dłuższy niż 30 znaków',
+      '{{key}} za długi. Nie może być dłuższy niż 30 znaków',
     notValid:
-      'Klucz zmiennej: {{key}} jest nieprawidłowy. Może zawierać tylko litery, cyfry i podkreślenia',
+      '{{key}} jest nieprawidłowy. Może zawierać tylko litery, cyfry i podkreślenia',
     notStartWithNumber:
-      'Klucz zmiennej: {{key}} nie może zaczynać się od cyfry',
-    keyAlreadyExists: 'Klucz zmiennej: :{{key}} już istnieje',
+      '{{key}} nie może zaczynać się od cyfry',
+    keyAlreadyExists: '{{key}} już istnieje',
   },
   otherError: {
     promptNoBeEmpty: 'Monit nie może być pusty',

web/i18n/pt-BR/app-debug.ts

@@ -254,11 +254,11 @@ const translation = {
     typeSelect: 'Selecionar',
   },
   varKeyError: {
-    canNoBeEmpty: 'A chave da variável não pode estar vazia',
-    tooLong: 'A chave da variável: {{key}} é muito longa. Não pode ter mais de 30 caracteres',
-    notValid: 'A chave da variável: {{key}} é inválida. Pode conter apenas letras, números e sublinhados',
-    notStartWithNumber: 'A chave da variável: {{key}} não pode começar com um número',
-    keyAlreadyExists: 'A chave da variável: :{{key}} já existe',
+    canNoBeEmpty: '{{key}} é obrigatório',
+    tooLong: '{{key}} é muito longa. Não pode ter mais de 30 caracteres',
+    notValid: '{{key}} é inválida. Pode conter apenas letras, números e sublinhados',
+    notStartWithNumber: '{{key}} não pode começar com um número',
+    keyAlreadyExists: '{{key}} já existe',
   },
   otherError: {
     promptNoBeEmpty: 'A solicitação não pode estar vazia',

web/i18n/ro-RO/app-debug.ts

@@ -254,11 +254,11 @@ const translation = {
     typeSelect: 'Selectează',
   },
   varKeyError: {
-    canNoBeEmpty: 'Cheia variabilei nu poate fi goală',
-    tooLong: 'Cheia variabilei: {{key}} este prea lungă. Nu poate fi mai lungă de 30 de caractere',
-    notValid: 'Cheia variabilei: {{key}} este nevalidă. Poate conține doar litere, cifre și sublinieri',
-    notStartWithNumber: 'Cheia variabilei: {{key}} nu poate începe cu un număr',
-    keyAlreadyExists: 'Cheia variabilei: :{{key}} deja există',
+    canNoBeEmpty: '{{key}} este necesară',
+    tooLong: '{{key}} este prea lungă. Nu poate fi mai lungă de 30 de caractere',
+    notValid: '{{key}} este nevalidă. Poate conține doar litere, cifre și sublinieri',
+    notStartWithNumber: '{{key}} nu poate începe cu un număr',
+    keyAlreadyExists: ':{{key}} deja există',
   },
   otherError: {
     promptNoBeEmpty: 'Promptul nu poate fi gol',

web/i18n/tr-TR/app-debug.ts

@@ -290,11 +290,11 @@ const translation = {
     typeSelect: 'Seçim',
   },
   varKeyError: {
-    canNoBeEmpty: 'Değişken anahtarı boş olamaz',
-    tooLong: 'Değişken anahtarı: {{key}} çok uzun. 30 karakterden uzun olamaz',
-    notValid: 'Değişken anahtarı: {{key}} geçersizdir. Sadece harfler, rakamlar ve altçizgiler içerebilir',
-    notStartWithNumber: 'Değişken anahtarı: {{key}} bir rakamla başlamamalıdır',
-    keyAlreadyExists: 'Değişken anahtarı: {{key}} zaten mevcut',
+    canNoBeEmpty: '{{key}} gereklidir',
+    tooLong: '{{key}} çok uzun. 30 karakterden uzun olamaz',
+    notValid: '{{key}} geçersizdir. Sadece harfler, rakamlar ve altçizgiler içerebilir',
+    notStartWithNumber: '{{key}} bir rakamla başlamamalıdır',
+    keyAlreadyExists: '{{key}} zaten mevcut',
   },
   otherError: {
     promptNoBeEmpty: 'Prompt boş olamaz',

web/i18n/uk-UA/app-debug.ts

@@ -248,11 +248,11 @@ const translation = {
     typeSelect: 'Вибрати', // Select
   },
   varKeyError: {
-    canNoBeEmpty: 'Ключ змінної не може бути порожнім', // Variable key can not be empty
-    tooLong: 'Ключ змінної: {{key}} занадто довгий. Не може бути більше 30 символів', // Variable key: {{key}} too length. Can not be longer then 30 characters
-    notValid: 'Ключ змінної: {{key}} недійсний. Може містити лише літери, цифри та підкреслення', // Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores
-    notStartWithNumber: 'Ключ змінної: {{key}} не може починатися з цифри', // Variable key: {{key}} can not start with a number
-    keyAlreadyExists: 'Ключ змінної: :{{key}} вже існує', // Variable key: :{{key}} already exists
+    canNoBeEmpty: 'Потрібен {{key}}', // Variable key can not be empty
+    tooLong: '{{key}} занадто довгий. Не може бути більше 30 символів', // Variable key: {{key}} too length. Can not be longer then 30 characters
+    notValid: '{{key}} недійсний. Може містити лише літери, цифри та підкреслення', // Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores
+    notStartWithNumber: '{{key}} не може починатися з цифри', // Variable key: {{key}} can not start with a number
+    keyAlreadyExists: ':{{key}} вже існує', // Variable key: :{{key}} already exists
   },
   otherError: {
     promptNoBeEmpty: 'Команда не може бути порожньою', // Prompt can not be empty

web/i18n/vi-VN/app-debug.ts

@@ -248,11 +248,11 @@ const translation = {
     typeSelect: 'Lựa chọn',
   },
   varKeyError: {
-    canNoBeEmpty: 'Khóa biến không thể trống',
-    tooLong: 'Khóa biến: {{key}} quá dài. Không thể dài hơn 30 ký tự',
-    notValid: 'Khóa biến: {{key}} không hợp lệ. Chỉ có thể chứa chữ cái, số, và dấu gạch dưới',
-    notStartWithNumber: 'Khóa biến: {{key}} không thể bắt đầu bằng số',
-    keyAlreadyExists: 'Khóa biến: {{key}} đã tồn tại',
+    canNoBeEmpty: '{{key}} là bắt buộc',
+    tooLong: '{{key}} quá dài. Không thể dài hơn 30 ký tự',
+    notValid: '{{key}} không hợp lệ. Chỉ có thể chứa chữ cái, số, và dấu gạch dưới',
+    notStartWithNumber: '{{key}} không thể bắt đầu bằng số',
+    keyAlreadyExists: '{{key}} đã tồn tại',
   },
   otherError: {
     promptNoBeEmpty: 'Lời nhắc không thể trống',

web/i18n/zh-Hans/app-debug.ts

@@ -287,11 +287,11 @@ const translation = {
     typeSelect: '下拉选项',
   },
   varKeyError: {
-    canNoBeEmpty: '变量不能为空',
-    tooLong: '变量: {{key}} 长度太长。不能超过 30 个字符',
-    notValid: '变量: {{key}} 非法。只能包含英文字符，数字和下划线',
-    notStartWithNumber: '变量: {{key}} 不能以数字开头',
-    keyAlreadyExists: '变量:{{key}} 已存在',
+    canNoBeEmpty: '{{key}}必填',
+    tooLong: '{{key}} 长度太长。不能超过 30 个字符',
+    notValid: '{{key}} 非法。只能包含英文字符，数字和下划线',
+    notStartWithNumber: '{{key}} 不能以数字开头',
+    keyAlreadyExists: '{{key}} 已存在',
   },
   otherError: {
     promptNoBeEmpty: '提示词不能为空',
@@ -320,7 +320,6 @@ const translation = {
     'required': '必填',
     'content': '内容',
     'errorMsg': {
-      varNameRequired: '变量名称必填',
       labelNameRequired: '显示名称必填',
       varNameCanBeRepeat: '变量名称不能重复',
       atLeastOneOption: '至少需要一个选项',

web/i18n/zh-Hant/app-debug.ts

@@ -233,11 +233,11 @@ const translation = {
     typeSelect: '下拉選項',
   },
   varKeyError: {
-    canNoBeEmpty: '變數不能為空',
-    tooLong: '變數: {{key}} 長度太長。不能超過 30 個字元',
-    notValid: '變數: {{key}} 非法。只能包含英文字元，數字和下劃線',
-    notStartWithNumber: '變數: {{key}} 不能以數字開頭',
-    keyAlreadyExists: '變數:{{key}} 已存在',
+    canNoBeEmpty: '{{key}} 是必要的',
+    tooLong: '{{key}} 長度太長。不能超過 30 個字元',
+    notValid: '{{key}} 非法。只能包含英文字元，數字和下劃線',
+    notStartWithNumber: '{{key}} 不能以數字開頭',
+    keyAlreadyExists: '{{key}} 已存在',
   },
   otherError: {
     promptNoBeEmpty: '提示詞不能為空',