github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #3658 from nocodb/refactor/i18n-validation-msgs 

refactor: i18n validation error messages
pull/3722/head
Raju Udava 2 years ago committed by GitHub
parent
002b10ffee 479373fe04
commit
faf0ae307d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/components/dlg/AirtableImport.vue
  2. 4
      packages/nc-gui/components/dlg/QuickImport.vue
  3. 8
      packages/nc-gui/components/template/Editor.vue
  4. 24
      packages/nc-gui/components/webhook/Editor.vue
  5. 15
      packages/nc-gui/lang/en.json
  6. 16
      packages/nc-gui/pages/index/index/create-external.vue
  7. 74
      packages/nc-gui/utils/validation.ts

4
packages/nc-gui/components/dlg/AirtableImport.vue
Unescape View File

@ -65,8 +65,8 @@ const syncSource = ref({
}) })
const validators = computed(() => ({ const validators = computed(() => ({
'details.apiKey': [fieldRequiredValidator], 'details.apiKey': [fieldRequiredValidator()],
'details.syncSourceUrlOrId': [fieldRequiredValidator], 'details.syncSourceUrlOrId': [fieldRequiredValidator()],
})) }))
const dialogShow = computed({ const dialogShow = computed({

4
packages/nc-gui/components/dlg/QuickImport.vue
Unescape View File

@ -70,8 +70,8 @@ const isImportTypeCsv = computed(() => importType === 'csv')
const IsImportTypeExcel = computed(() => importType === 'excel') const IsImportTypeExcel = computed(() => importType === 'excel')
const validators = computed(() => ({ const validators = computed(() => ({
url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator], url: [fieldRequiredValidator(), importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
maxRowsToParse: [fieldRequiredValidator], maxRowsToParse: [fieldRequiredValidator()],
})) }))
const { validate, validateInfos } = useForm(importState, validators) const { validate, validateInfos } = useForm(importState, validators)

8
packages/nc-gui/components/template/Editor.vue
Unescape View File

@ -94,13 +94,13 @@ const data = reactive<{ title: string | null; name: string; tables: (TableType &
}) })
const validators = computed(() => const validators = computed(() =>
data.tables.reduce<Record<string, [typeof fieldRequiredValidator]>>((acc, table, tableIdx) => { data.tables.reduce<Record<string, [ReturnType<typeof fieldRequiredValidator>]>>((acc, table, tableIdx) => {
acc[`tables.${tableIdx}.ref_table_name`] = [fieldRequiredValidator] acc[`tables.${tableIdx}.ref_table_name`] = [fieldRequiredValidator()]
hasSelectColumn.value[tableIdx] = false hasSelectColumn.value[tableIdx] = false
table.columns?.forEach((column, columnIdx) => { table.columns?.forEach((column, columnIdx) => {
acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator] acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator()]
acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator] acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator()]
if (isSelect(column)) { if (isSelect(column)) {
hasSelectColumn.value[tableIdx] = true hasSelectColumn.value[tableIdx] = true
} }

24
packages/nc-gui/components/webhook/Editor.vue
Unescape View File

@ -184,28 +184,28 @@ const methodList = ref([
const validators = computed(() => { const validators = computed(() => {
return { return {
'title': [fieldRequiredValidator], 'title': [fieldRequiredValidator()],
'eventOperation': [fieldRequiredValidator], 'eventOperation': [fieldRequiredValidator()],
'notification.type': [fieldRequiredValidator], 'notification.type': [fieldRequiredValidator()],
...(hook.notification.type === 'URL' && { ...(hook.notification.type === 'URL' && {
'notification.payload.method': [fieldRequiredValidator], 'notification.payload.method': [fieldRequiredValidator()],
'notification.payload.path': [fieldRequiredValidator], 'notification.payload.path': [fieldRequiredValidator()],
}), }),
...(hook.notification.type === 'Email' && { ...(hook.notification.type === 'Email' && {
'notification.payload.to': [fieldRequiredValidator], 'notification.payload.to': [fieldRequiredValidator()],
'notification.payload.subject': [fieldRequiredValidator], 'notification.payload.subject': [fieldRequiredValidator()],
'notification.payload.body': [fieldRequiredValidator], 'notification.payload.body': [fieldRequiredValidator()],
}), }),
...((hook.notification.type === 'Slack' || ...((hook.notification.type === 'Slack' ||
hook.notification.type === 'Microsoft Teams' || hook.notification.type === 'Microsoft Teams' ||
hook.notification.type === 'Discord' || hook.notification.type === 'Discord' ||
hook.notification.type === 'Mattermost') && { hook.notification.type === 'Mattermost') && {
'notification.payload.channels': [fieldRequiredValidator], 'notification.payload.channels': [fieldRequiredValidator()],
'notification.payload.body': [fieldRequiredValidator], 'notification.payload.body': [fieldRequiredValidator()],
}), }),
...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && { ...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && {
'notification.payload.body': [fieldRequiredValidator], 'notification.payload.body': [fieldRequiredValidator()],
'notification.payload.to': [fieldRequiredValidator], 'notification.payload.to': [fieldRequiredValidator()],
}), }),
} }
}) })

15
packages/nc-gui/lang/en.json
Unescape View File

@ -616,7 +616,20 @@
"rowUpdateFailed": "Row update failed", "rowUpdateFailed": "Row update failed",
"deleteRowFailed": "Failed to delete row", "deleteRowFailed": "Failed to delete row",
"setFormDataFailed": "Failed to set form data", "setFormDataFailed": "Failed to set form data",
"formViewUpdateFailed": "Failed to update form view" "formViewUpdateFailed": "Failed to update form view",
"tableNameRequired": "Table name is required",
"nameShouldStartWithAnAlphabetOr_": "Name should start with an alphabet or _",
"followingCharactersAreNotAllowed": "Following characters are not allowed",
"columnNameRequired": "Column name is required",
"projectNameExceeds50Characters": "Project name exceeds 50 characters",
"projectNameCannotStartWithSpace": "Project name cannot start with space",
"requiredField": "Required field",
"ipNotAllowed": "IP not allowed",
"targetFileIsNotAnAcceptedFileType": "Target file is not an accepted file type",
"theAcceptedFileTypeIsCsv": "The accepted file type is .csv",
"theAcceptedFileTypesAreXlsXlsxXlsmOdsOts": "The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots",
"parameterKeyCannotBeEmpty": "Parameter key cannot be empty",
"duplicateParameterKeysAreNotAllowed": "Duplicate parameter keys are not allowed"
}, },
"toast": { "toast": {
"exportMetadata": "Project metadata exported successfully", "exportMetadata": "Project metadata exported successfully",

16
packages/nc-gui/pages/index/index/create-external.vue
Unescape View File

@ -73,20 +73,20 @@ const validators = computed(() => {
projectTitleValidator, projectTitleValidator,
], ],
'extraParameters': [extraParameterValidator], 'extraParameters': [extraParameterValidator],
'dataSource.client': [fieldRequiredValidator], 'dataSource.client': [fieldRequiredValidator()],
...(formState.dataSource.client === ClientType.SQLITE ...(formState.dataSource.client === ClientType.SQLITE
? { ? {
'dataSource.connection.connection.filename': [fieldRequiredValidator], 'dataSource.connection.connection.filename': [fieldRequiredValidator()],
} }
: { : {
'dataSource.connection.host': [fieldRequiredValidator], 'dataSource.connection.host': [fieldRequiredValidator()],
'dataSource.connection.port': [fieldRequiredValidator], 'dataSource.connection.port': [fieldRequiredValidator()],
'dataSource.connection.user': [fieldRequiredValidator], 'dataSource.connection.user': [fieldRequiredValidator()],
'dataSource.connection.password': [fieldRequiredValidator], 'dataSource.connection.password': [fieldRequiredValidator()],
'dataSource.connection.database': [fieldRequiredValidator], 'dataSource.connection.database': [fieldRequiredValidator()],
...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client) ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
? { ? {
'dataSource.searchPath.0': [fieldRequiredValidator], 'dataSource.searchPath.0': [fieldRequiredValidator()],
} }
: {}), : {}),
}), }),

74
packages/nc-gui/utils/validation.ts
Unescape View File

@ -1,9 +1,14 @@
import { getI18n } from '~/plugins/a.i18n'
export const isEmail = (v: string) => export const isEmail = (v: string) =>
/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i.test(v) /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i.test(v)
export function validateTableName(v: string, isGQL = false) { export function validateTableName(v: string, isGQL = false) {
const { t } = getI18n().global
if (!v) { if (!v) {
return 'Table name required' // return 'Table name required'
return t('msg.error.tableNameRequired')
} }
// GraphQL naming convention // GraphQL naming convention
@ -15,11 +20,13 @@ export function validateTableName(v: string, isGQL = false) {
} }
if (/^[^_A-Za-z]/.test(v)) { if (/^[^_A-Za-z]/.test(v)) {
return 'Name should start with an alphabet or _' // return 'Name should start with an alphabet or _'
return t('msg.error.nameShouldStartWithAnAlphabetOr_')
} }
const m = v.match(/[^_A-Za-z\d]/g) const m = v.match(/[^_A-Za-z\d]/g)
if (m) { if (m) {
return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}` // return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}`
return `${t('msg.error.followingCharactersAreNotAllowed')} ${m.map((c) => JSON.stringify(c)).join(', ')}`
} }
} else { } else {
// exclude . / \ // exclude . / \
@ -27,7 +34,8 @@ export function validateTableName(v: string, isGQL = false) {
// https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/acreldb/n0rfg6x1shw0ppn1cwhco6yn09f7.htm#:~:text=By%20default%2C%20MySQL%20encloses%20column,not%20truncate%20a%20longer%20name. // https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/acreldb/n0rfg6x1shw0ppn1cwhco6yn09f7.htm#:~:text=By%20default%2C%20MySQL%20encloses%20column,not%20truncate%20a%20longer%20name.
const m = v.match(/[./\\]/g) const m = v.match(/[./\\]/g)
if (m) { if (m) {
return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}` // return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}`
return `${t('msg.error.followingCharactersAreNotAllowed')} ${m.map((c) => JSON.stringify(c)).join(', ')}`
} }
return true return true
@ -35,8 +43,10 @@ export function validateTableName(v: string, isGQL = false) {
} }
export function validateColumnName(v: string, isGQL = false) { export function validateColumnName(v: string, isGQL = false) {
const { t } = getI18n().global
if (!v) { if (!v) {
return 'Column name required' // return 'Column name required'
return t('msg.error.columnNameRequired')
} }
// GraphQL naming convention // GraphQL naming convention
@ -47,11 +57,13 @@ export function validateColumnName(v: string, isGQL = false) {
} }
if (/^[^_A-Za-z]/.test(v)) { if (/^[^_A-Za-z]/.test(v)) {
return 'Name should start with an alphabet or _' // return 'Name should start with an alphabet or _'
return t('msg.error.nameShouldStartWithAnAlphabetOr_')
} }
const m = v.match(/[^_A-Za-z\d]/g) const m = v.match(/[^_A-Za-z\d]/g)
if (m) { if (m) {
return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}` // return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}`
return `${t('msg.error.followingCharactersAreNotAllowed')} ${m.map((c) => JSON.stringify(c)).join(', ')}`
} }
} else { } else {
// exclude . / \ // exclude . / \
@ -59,7 +71,8 @@ export function validateColumnName(v: string, isGQL = false) {
// https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/acreldb/n0rfg6x1shw0ppn1cwhco6yn09f7.htm#:~:text=By%20default%2C%20MySQL%20encloses%20column,not%20truncate%20a%20longer%20name. // https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/acreldb/n0rfg6x1shw0ppn1cwhco6yn09f7.htm#:~:text=By%20default%2C%20MySQL%20encloses%20column,not%20truncate%20a%20longer%20name.
const m = v.match(/[./\\]/g) const m = v.match(/[./\\]/g)
if (m) { if (m) {
return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}` // return `Following characters are not allowed ${m.map((c) => JSON.stringify(c)).join(', ')}`
return `${t('msg.error.followingCharactersAreNotAllowed')} ${m.map((c) => JSON.stringify(c)).join(', ')}`
} }
return true return true
@ -68,36 +81,40 @@ export function validateColumnName(v: string, isGQL = false) {
export const projectTitleValidator = { export const projectTitleValidator = {
validator: (rule: any, value: any, callback: (errMsg?: string) => void) => { validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
const { t } = getI18n().global
if (value?.length > 50) { if (value?.length > 50) {
callback('Project name exceeds 50 characters') // callback('Project name exceeds 50 characters')
callback(t('msg.error.projectNameExceeds50Characters'))
} }
if (value[0] === ' ') { if (value[0] === ' ') {
callback('Project name cannot start with space') // callback('Project name cannot start with space')
callback(t('msg.error.projectNameCannotStartWithSpace'))
} }
callback() callback()
}, },
} }
export const fieldRequiredValidator = { export const fieldRequiredValidator = () => {
required: true, const { t } = getI18n().global
message: 'Field is required', return {
required: true,
// message: `Required field`,
message: t('msg.error.requiredField'),
}
} }
export const getRequiredValidator = (field = 'Field') => ({
required: true,
message: `${field} is required`,
})
export const importUrlValidator = { export const importUrlValidator = {
validator: (rule: any, value: any) => { validator: (rule: any, value: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { t } = getI18n().global
if ( if (
/(10)(\.([2]([0-5][0-5]|[01234][6-9])|[1][0-9][0-9]|[1-9][0-9]|[0-9])){3}|(172)\.(1[6-9]|2[0-9]|3[0-1])(\.(2[0-4][0-9]|25[0-5]|[1][0-9][0-9]|[1-9][0-9]|[0-9])){2}|(192)\.(168)(\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){2}|(0.0.0.0)|localhost?/g.test( /(10)(\.([2]([0-5][0-5]|[01234][6-9])|[1][0-9][0-9]|[1-9][0-9]|[0-9])){3}|(172)\.(1[6-9]|2[0-9]|3[0-1])(\.(2[0-4][0-9]|25[0-5]|[1][0-9][0-9]|[1-9][0-9]|[0-9])){2}|(192)\.(168)(\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){2}|(0.0.0.0)|localhost?/g.test(
value, value,
) )
) { ) {
return reject(new Error('IP Not allowed!')) // return reject(new Error('IP Not allowed!'))
return reject(new Error(t('msg.error.ipNotAllowed')))
} }
return resolve(true) return resolve(true)
}) })
@ -107,8 +124,12 @@ export const importUrlValidator = {
export const importCsvUrlValidator = { export const importCsvUrlValidator = {
validator: (rule: any, value: any) => { validator: (rule: any, value: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && !/.*\.(csv)/.test(value)) { if (value && !/.*\.(csv)/.test(value)) {
return reject(new Error('Target file is not an accepted file type. The accepted file type is .csv!')) // return reject(new Error('Target file is not an accepted file type. The accepted file type is .csv!'))
return reject(
new Error(`${t('msg.error.targetFileIsNotAnAcceptedFileType')}. ${t('msg.error.theAcceptedFileTypeIsCsv')}`),
)
} }
return resolve(true) return resolve(true)
}) })
@ -118,9 +139,13 @@ export const importCsvUrlValidator = {
export const importExcelUrlValidator = { export const importExcelUrlValidator = {
validator: (rule: any, value: any) => { validator: (rule: any, value: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && !/.*\.(xls|xlsx|xlsm|ods|ots)/.test(value)) { if (value && !/.*\.(xls|xlsx|xlsm|ods|ots)/.test(value)) {
return reject( return reject(
new Error('Target file is not an accepted file type. The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots!'), // new Error('Target file is not an accepted file type. The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots!'),
new Error(
`${t('msg.error.targetFileIsNotAnAcceptedFileType')}. ${t('msg.error.theAcceptedFileTypesAreXlsXlsxXlsmOdsOts')}`,
),
) )
} }
return resolve(true) return resolve(true)
@ -131,12 +156,15 @@ export const importExcelUrlValidator = {
export const extraParameterValidator = { export const extraParameterValidator = {
validator: (_: unknown, value: { key: string; value: string }[]) => { validator: (_: unknown, value: { key: string; value: string }[]) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { t } = getI18n().global
for (const param of value) { for (const param of value) {
if (param.key === '') { if (param.key === '') {
return reject(new Error('Parameter key cannot be empty')) // return reject(new Error('Parameter key cannot be empty'))
return reject(new Error(t('msg.error.parameterKeyCannotBeEmpty')))
} }
if (value.filter((el: any) => el.key === param.key).length !== 1) { if (value.filter((el: any) => el.key === param.key).length !== 1) {
return reject(new Error('Duplicate parameter keys are not allowed')) // return reject(new Error('Duplicate parameter keys are not allowed'))
return reject(new Error(t('msg.error.duplicateParameterKeysAreNotAllowed')))
} }
} }
return resolve(true) return resolve(true)

Write Preview
Loading…
Cancel
Save