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

feat(gui-v2): add ssl file select option, show monaco editor for config edit 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
7ebdd6b840
commit
313f77eefe
5 changed files with 263 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      packages/nc-gui-v2/components/monaco/index.vue
  2. 20
      packages/nc-gui-v2/components/monaco/json.vue
  3. 215
      packages/nc-gui-v2/pages/projects/index/create-external.vue
  4. 42
      packages/nc-gui-v2/utils/fileUtils.ts
  5. 110
      packages/nc-gui-v2/utils/projectCreateUtils.ts

40
packages/nc-gui-v2/components/monaco/index.vue
Unescape View File

@ -0,0 +1,40 @@
<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted } from '#imports'
const { modelValue } = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue'])
const root = ref<HTMLDivElement>()
const editor = ref<monaco.editor.IStandaloneCodeEditor>()
onMounted(() => {
if (root.value) {
editor.value = monaco.editor.create(root?.value, {
value: JSON.stringify(modelValue, null, 2),
language: 'json',
})
editor.value.onDidChangeModelContent((e) => {
try {
emit('update:modelValue', JSON.parse(editor?.value?.getValue() as string))
} catch {}
})
}
})
watch(
() => modelValue && JSON.stringify(modelValue, null, 2),
(v) => {
if (editor?.value && v) {
editor.value.setValue(v)
}
},
)
</script>
<template>
<div ref="root"></div>
</template>
<style scoped></style>

20
packages/nc-gui-v2/components/monaco/json.vue
Unescape View File

@ -1,20 +0,0 @@
<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted } from '#imports'
const root = ref<HTMLDivElement>()
onMounted(() => {
if (root.value)
monaco.editor.create(root?.value, {
value: 'console.log("Hello, world")',
language: 'json',
})
})
</script>
<template>
<div ref="root"></div>
</template>
<style scoped></style>

215
packages/nc-gui-v2/pages/projects/index/create-external.vue
Unescape View File

@ -3,7 +3,6 @@ import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification'
import { Form } from 'ant-design-vue'
import form from '../../../../nc-gui/components/project/spreadsheet/mixins/form'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import {
@ -14,7 +13,8 @@ import {
projectTitleValidator,
sslUsage,
} from '~/utils/projectCreateUtils'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
import { readFile } from '~/utils/fileUtils'
const useForm = Form.useForm
const name = ref('')
@ -69,10 +69,6 @@ const testConnection = async () => {
...projectDatasource.value.connection,
database: getTestDatabaseName(projectDatasource.value),
},
inflection: {
tableName: 'camelize',
columnName: 'camelize',
},
}
const result = await $api.utils.testConnection(testConnectionConfig)
@ -90,7 +86,13 @@ const testConnection = async () => {
}
}
const formState = reactive<Record<string, any>>({ dataSource: { ...getDefaultConnectionConfig('mysql2') } })
const formState = reactive<Record<string, any>>({
dataSource: { ...getDefaultConnectionConfig('mysql2') },
inflection: {
tableName: 'camelize',
columnName: 'camelize',
},
})
const validators = reactive({
'title': [
@ -121,12 +123,21 @@ watch(
() => formState.title,
(v) => (formState.dataSource.connection.database = `${v}_noco`),
)
const caFileInput = ref<HTMLInputElement>()
const keyFileInput = ref<HTMLInputElement>()
const certFileInput = ref<HTMLInputElement>()
const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
readFile(el, (content) => {
formState.dataSource.connection.ssl[key] = content ?? ''
})
}
</script>
<template>
<a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
<a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="small" />
</a-form-item>
@ -137,85 +148,115 @@ watch(
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input v-model:value="formState.dataSource.connection.host" size="small" />
</a-form-item>
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
<a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full" size="small" />
</a-form-item>
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
<a-input v-model:value="formState.dataSource.connection.user" size="small" />
</a-form-item>
<a-form-item :label="$t('labels.password')">
<a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
</a-form-item>
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
<a-input
v-model:value="formState.dataSource.connection.database"
:placeholder="$t('labels.dbCreateIfNotExists')"
size="small"
/>
<!-- SQLite File -->
<a-form-item
v-if="formState.dataSource.client === 'sqlite3'"
:label="$t('labels.sqliteFile')"
v-bind="validateInfos['dataSource.connection.host']"
>
<a-input v-model:value="formState.dataSource.connection.connection.filename" size="small" />
</a-form-item>
<a-collapse ghost expand-icon-position="right">
<a-collapse-panel key="1" header="Advance options">
<a-form-item :label="$t('lables.ssl')" v-bind="validateInfos['dataSource.ssl']">
<a-select v-model:value="formState.dataSource.ssl" size="small" @change="onClientChange">
<a-select-option v-for="opt in Object.keys(sslUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('labels.dbCredentials')">
<div class="flex gap-2">
<a-tooltip placement="top">
<template #title>
<span>{{ $t('tooltip.clientCert') }}</span>
</template>
<a-button size="small">
{{ $t('labels.clientCert') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>{{ $t('tooltip.clientKey') }}</span>
</template>
<a-button size="small">
{{ $t('labels.clientKey') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>{{ $t('tooltip.clientCA') }}</span>
</template>
<a-button size="small">
{{ $t('labels.serverCA') }}
</a-button>
</a-tooltip>
<template v-else>
<!-- Host Address -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input v-model:value="formState.dataSource.connection.host" size="small" />
</a-form-item>
<!-- Port Number -->
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
<a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full" size="small" />
</a-form-item>
<!-- Username -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
<a-input v-model:value="formState.dataSource.connection.user" size="small" />
</a-form-item>
<!-- Password -->
<a-form-item :label="$t('labels.password')">
<a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
</a-form-item>
<!-- Database -->
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
<!-- Database : create if not exists -->
<a-input
v-model:value="formState.dataSource.connection.database"
:placeholder="$t('labels.dbCreateIfNotExists')"
size="small"
/>
</a-form-item>
<!-- Schema name -->
<a-form-item v-if="['mssql', 'pg'].includes(formState.dataSource.client)" :label="$t('labels.schemaName')">
<a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" />
</a-form-item>
<a-collapse ghost expand-icon-position="right">
<a-collapse-panel key="1" :header="$t('title.advancedParameters')">
<!-- todo: add in i18n -->
<a-form-item label="SSL Mode" v-bind="validateInfos['dataSource.ssl']">
<a-select v-model:value="formState.dataSource.sslUse" size="small" @change="onClientChange">
<a-select-option v-for="opt in sslUsage" :key="opt" :value="opt">{{ opt }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('labels.dbCredentials')">
<div class="flex gap-2">
<a-tooltip placement="top">
<!-- Select .cert file -->
<template #title>
<span>{{ $t('tooltip.clientCert') }}</span>
</template>
<a-button size="small" @click="certFileInput.click()">
{{ $t('labels.clientCert') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<!-- Select .key file -->
<template #title>
<span>{{ $t('tooltip.clientKey') }}</span>
</template>
<a-button size="small" @click="keyFileInput.click()">
{{ $t('labels.clientKey') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<!-- Select CA file -->
<template #title>
<span>{{ $t('tooltip.clientCA') }}</span>
</template>
<a-button size="small" @click="caFileInput.click()">
{{ $t('labels.serverCA') }}
</a-button>
</a-tooltip>
</div>
</a-form-item>
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect('ca', caFileInput)" />
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" />
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
<a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
<a-select v-model:value="formState.inflection.tableName" size="small" @change="onClientChange">
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.type']">
<a-select v-model:value="formState.inflection.columnName" size="small" @change="onClientChange">
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
</a-select>
</a-form-item>
<div class="flex justify-end">
<a-button size="small" @click="configEditDlg = true">
<!-- Edit connection JSON -->
{{ $t('activity.editConnJson') }}
</a-button>
</div>
</a-form-item>
<a-form-item :label="$t('labels.inflection.tableName')" v-bind="validateInfos['dataSource.client']">
<a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('labels.inflection.columnName')" v-bind="validateInfos['dataSource.client']">
<a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }}
</a-select-option>
</a-select>
</a-form-item>
<div class="flex justify-end">
<a-button size="small" @click="configEditDlg = true">
<!-- Edit connection JSON -->
{{ $t('activity.editConnJson') }}
</a-button>
</div>
</a-collapse-panel>
</a-collapse>
</a-collapse-panel>
</a-collapse>
</template>
<a-form-item class="flex justify-center">
<div class="flex justify-center gap-2">
@ -226,8 +267,10 @@ watch(
</a-form>
<v-dialog v-model="configEditDlg">
<MonacoJson v-if="configEditDlg" class="h-[320px] w-[600px]"></MonacoJson>
<Monaco v-if="configEditDlg" v-model="formState" class="h-[320px] w-[600px]"></Monaco>
</v-dialog>
{{ formState }}
</a-card>
</template>

42
packages/nc-gui-v2/utils/fileUtils.ts
Unescape View File

@ -5,3 +5,45 @@ const isImage = (name: string, mimetype?: string) => {
}
export { isImage, imageExt }
// Ref : https://stackoverflow.com/a/12002275
// Tested in Mozilla Firefox browser, Chrome
export function readFile(FileElement: HTMLInputElement, CallBackFunction: (content?: any) => void) {
try {
if (!FileElement.files || !FileElement.files.length) {
return CallBackFunction()
}
const file = FileElement.files[0]
if (file) {
const reader = new FileReader()
reader.readAsText(file, 'UTF-8')
reader.onload = function (evt) {
CallBackFunction(evt.target?.result)
}
reader.onerror = function () {
CallBackFunction()
}
}
} catch (Exception) {
const fallBack = ieReadFile(FileElement.value)
// eslint-disable-next-line eqeqeq
if (fallBack != false) {
CallBackFunction(fallBack)
}
}
}
/// Reading files with Internet Explorer
function ieReadFile(filename: string) {
try {
const fso = new ActiveXObject('Scripting.FileSystemObject')
const fh = fso.OpenTextFile(filename, 1)
const contents = fh.ReadAll()
fh.Close()
return contents
} catch (Exception) {
return false
}
}

110
packages/nc-gui-v2/utils/projectCreateUtils.ts
Unescape View File

@ -29,7 +29,7 @@ export const clientTypes = [
},
{
text: 'SQLite',
value: 'sqlite',
value: 'sqlite3',
},
]
@ -42,11 +42,11 @@ const sampleConnectionData = {
password: 'password',
database: '_test',
searchPath: ['public'],
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
mysql2: {
host: 'localhost',
@ -54,11 +54,11 @@ const sampleConnectionData = {
user: 'root',
password: 'password',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
vitess: {
host: 'localhost',
@ -66,11 +66,11 @@ const sampleConnectionData = {
user: 'root',
password: 'password',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
tidb: {
host: 'localhost',
@ -78,11 +78,11 @@ const sampleConnectionData = {
user: 'root',
password: '',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
yugabyte: {
host: 'localhost',
@ -90,11 +90,11 @@ const sampleConnectionData = {
user: 'postgres',
password: '',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
citusdb: {
host: 'localhost',
@ -102,11 +102,11 @@ const sampleConnectionData = {
user: 'postgres',
password: '',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
cockroachdb: {
host: 'localhost',
@ -114,11 +114,11 @@ const sampleConnectionData = {
user: 'postgres',
password: '',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
greenplum: {
host: 'localhost',
@ -126,11 +126,11 @@ const sampleConnectionData = {
user: 'postgres',
password: '',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
mssql: {
host: 'localhost',
@ -139,11 +139,11 @@ const sampleConnectionData = {
password: 'Password123.',
database: '_test',
searchPath: ['dbo'],
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
oracledb: {
host: 'localhost',
@ -151,11 +151,11 @@ const sampleConnectionData = {
user: 'system',
password: 'Oracle18',
database: '_test',
// ssl: {
// ca: '',
// key: '',
// cert: '',
// },
ssl: {
ca: '',
key: '',
cert: '',
},
},
sqlite3: {
client: 'sqlite3',
@ -187,10 +187,4 @@ export const fieldRequiredValidator = {
message: 'Field is required',
}
export const sslUsage = {
'No': 'No',
'Preferred': 'Preferred',
'Required': 'pg',
'Required-CA': 'Required-CA',
'Required-IDENTITY': 'Required-IDENTITY',
}
export const sslUsage = ['No', 'Preferred', 'Required', 'Required-CA', 'Required-IDENTITY']

Write Preview
Loading…
Cancel
Save