dbeaver/pro#8518 adds message for string parameters (#4233)

* dbeaver/pro#8518 adds message for string parameters

* aligned message with dbeaver: "string values must be quoted"

* reverts branding and uses it optionally for bind parameters popup

* renames prop

* makes few versions of alert

* Revert "makes few versions of alert"

This reverts commit 5b9f09009e.

* adds gray message

* adds icon

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>

webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx

@@ -37,10 +37,11 @@ interface Props {
   staticProperties?: boolean;
   filterable?: boolean;
   sortByName?: boolean;
+  disableOverflowEffect?: boolean;
 }
 
 export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
-  const { className, onAdd, readOnly, propertiesState } = props;
+  const { className, onAdd, readOnly, propertiesState, disableOverflowEffect = false } = props;
   const translate = useTranslate();
   const propsRef = useObjectRef({ ...props });
   const style = useS(styles);
@@ -165,7 +166,7 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
             onRemove={removeProperty}
           />
         ))}
-        <div className={s(style, { propertiesListOverflow: true })} />
+        {!disableOverflowEffect && <div className={s(style, { propertiesListOverflow: true })} />}
       </div>
     </div>
   );

webapp/packages/plugin-sql-editor/src/locales/en.ts

@@ -57,4 +57,5 @@ export default [
   ],
   ['plugin_sql_editor_settings_highlight_white_space', 'Highlight white space characters'],
   ['plugin_sql_editor_settings_highlight_white_space_description', 'Highlight spaces, tabs and other white space characters in the SQL editor'],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', 'String values must be quoted'],
 ];

webapp/packages/plugin-sql-editor/src/locales/fr.ts

@@ -61,4 +61,5 @@ export default [
     'plugin_sql_editor_settings_highlight_white_space_description',
     "Mettre en surbrillance les espaces, les tabulations et les autres caractères d'espace blanc dans l'éditeur SQL",
   ],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', 'Les valeurs de type chaîne doivent être entre guillemets'],
 ];

webapp/packages/plugin-sql-editor/src/locales/it.ts

@@ -53,4 +53,5 @@ export default [
     'plugin_sql_editor_settings_highlight_white_space_description',
     "Mettere in evidenza spazi, tabulazioni e altri caratteri di spazio bianco nell'editor SQL",
   ],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', 'I valori stringa devono essere racchiusi tra virgolette'],
 ];

webapp/packages/plugin-sql-editor/src/locales/ru.ts

@@ -54,4 +54,5 @@ export default [
   ],
   ['plugin_sql_editor_settings_highlight_white_space', 'Подсветить пробелы'],
   ['plugin_sql_editor_settings_highlight_white_space_description', 'Подсветить пробелы, табуляции и другие пробельные символы в редакторе SQL'],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', 'Строковые значения должны быть заключены в кавычки'],
 ];

webapp/packages/plugin-sql-editor/src/locales/vi.ts

@@ -56,4 +56,5 @@ export default [
     'plugin_sql_editor_settings_highlight_white_space_description',
     'Đánh dấu khoảng trắng, tab và các ký tự khoảng trắng khác trong trình soạn thảo SQL',
   ],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', 'Giá trị chuỗi phải được đặt trong dấu ngoặc kép'],
 ];

webapp/packages/plugin-sql-editor/src/locales/zh.ts

@@ -54,4 +54,5 @@ export default [
   ],
   ['plugin_sql_editor_settings_highlight_white_space', '高亮显示空白字符'],
   ['plugin_sql_editor_settings_highlight_white_space_description', '高亮显示SQL编辑器中的空格、制表符和其他空白字符'],
+  ['plugin_sql_editor_bind_parameters_dialog_alert_title', '字符串值必须用引号括起来'],
 ];

webapp/packages/plugin-sql-editor/src/renderQueryParamsForConfirmation.tsx

@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { PropertiesTable, useResource } from '@cloudbeaver/core-blocks';
+import { IconOrImage, PropertiesTable, useResource, useTranslate } from '@cloudbeaver/core-blocks';
 import { SQLCodeEditor, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-codemirror';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import { observer } from 'mobx-react-lite';
@@ -56,12 +56,14 @@ const RenderParametersForm = observer(function RenderParametersForm({
   const connectionDialectResource = useResource(RenderParametersForm, ConnectionDialectResource, connectionKey);
   const sqlDialect = useSqlDialectExtension(connectionDialectResource.data);
   const extensions = useCodemirrorExtensions();
+  const translate = useTranslate();
+
   if (sqlDialect) {
     extensions.set(...sqlDialect);
   }
 
   for (const [paramName, paramValue] of Object.entries(parameters)) {
-    const paramValueString = String(paramValue); 
+    const paramValueString = String(paramValue);
     if (paramValueString) {
       const escapedName = escapeForRegExp(paramName);
 
@@ -90,12 +92,16 @@ const RenderParametersForm = observer(function RenderParametersForm({
           className="tw:overflow-auto"
           sortByName={false}
           staticProperties
+          disableOverflowEffect
         />
       </div>
-
       {!sqlEditorSettingsService.disabled && (
         <SQLCodeEditor value={query} extensions={extensions} className="tw:overflow-auto tw:flex-1/3" readonly />
       )}
+      <div className="theme-typography--body2 tw:p-2 tw:bg-(--theme-secondary) tw:flex tw:flex-row tw:gap-2 tw:items-center tw:rounded">
+        <IconOrImage icon="/icons/preload/info_icon_sm.svg" className="tw:size-3" />
+        <span>{translate('plugin_sql_editor_bind_parameters_dialog_alert_title')}</span>
+      </div>
     </div>
   );
 });