From 587981406d6052c7ca744758b67ed48d62502c70 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 5 Aug 2021 20:04:14 +0300
Subject: [PATCH 1/2] fix(plugin-data-viewer): CB-1129 handle readonly boolean
 representation state

---
 .../core-blocks/src/FormControls/Radio.tsx    | 26 +++++++++++---
 .../packages/core-blocks/src/IconOrImage.tsx  |  5 +--
 .../src/styles/_form-controls.scss            |  8 +++--
 .../core-theming/src/styles/_radio.scss       |  3 ++
 .../DataGrid/CellRenderer/CellRenderer.tsx    | 23 +++++-------
 .../DataGridContextMenuCellEditingService.ts  |  7 ++--
 .../src/DataGrid/DataGridTable.tsx            |  2 +-
 .../Formatters/CellFormatterFactory.tsx       |  4 +--
 .../CellFormatters/BooleanFormatter.tsx       | 35 +++++++++----------
 .../CellFormatters/TextFormatter.tsx          |  2 +-
 .../TableIndexColumnHeader.tsx                |  3 +-
 .../src/Editing/EditingContext.tsx            |  1 +
 .../src/Editing/useEditing.ts                 |  1 +
 .../src/locales/en.ts                         |  1 +
 .../src/locales/ru.ts                         |  1 +
 .../src/styles/base.scss                      |  2 +-
 .../BooleanValue/BooleanValuePresentation.tsx | 14 ++++++--
 .../BooleanValuePresentationBootstrap.ts      |  4 +--
 ...=> isBooleanValuePresentationAvailable.ts} |  2 +-
 .../packages/plugin-data-viewer/src/index.ts  |  2 +-
 20 files changed, 87 insertions(+), 59 deletions(-)
 rename webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/{isBooleanValuePresentationAvaliable.ts => isBooleanValuePresentationAvailable.ts} (92%)

diff --git a/webapp/packages/core-blocks/src/FormControls/Radio.tsx b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
index 80bf9093d48..bbe4d3b30d4 100644
--- a/webapp/packages/core-blocks/src/FormControls/Radio.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
@@ -8,7 +8,7 @@
 
 import { observer } from 'mobx-react-lite';
 import { useContext, useCallback } from 'react';
-import styled, { css } from 'reshadow';
+import styled, { css, use } from 'reshadow';
 
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
@@ -46,6 +46,9 @@ const radioStyles = composes(
     }
     label {
       cursor: pointer;
+      &[|disabled] {
+        cursor: auto;
+      }
     }
   `
 );
@@ -90,6 +93,16 @@ const noRippleStyles = composes(
   `
 );
 
+const radioState = {
+  disabled: composes(
+    css`
+      radio {
+        composes: theme-radio--disabled from global;
+      }
+    `
+  ),
+};
+
 type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked'> & {
   mod?: Array<keyof typeof radioMod>;
   ripple?: boolean;
@@ -99,7 +112,6 @@ type ControlledProps = BaseProps & {
   value?: string | number;
   checked?: boolean;
   onChange?: (value: string | number, name: string) => any;
-
   state?: never;
 };
 
@@ -108,7 +120,6 @@ type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
   value: TState[TKey];
   state: TState;
   onChange?: (value: TState[TKey], name: TKey) => any;
-
   checked?: never;
 };
 
@@ -166,7 +177,12 @@ export const Radio: RadioType = observer(function Radio({
     checked = state[name] === value;
   }
 
-  return styled(useStyles(radioStyles, ...(mod || []).map(mod => radioMod[mod]), !ripple && noRippleStyles))(
+  return styled(useStyles(
+    radioStyles,
+    ...(mod || []).map(mod => radioMod[mod]),
+    !ripple && noRippleStyles,
+    rest.disabled && radioState.disabled
+  ))(
     <field className={className}>
       <radio>
         <input
@@ -184,7 +200,7 @@ export const Radio: RadioType = observer(function Radio({
         </radio-background>
         {ripple && <radio-ripple />}
       </radio>
-      <label htmlFor={id}>{children}</label>
+      <label {...use({ disabled: rest.disabled })} htmlFor={id}>{children}</label>
     </field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/IconOrImage.tsx b/webapp/packages/core-blocks/src/IconOrImage.tsx
index b780eebdde1..da647a05662 100644
--- a/webapp/packages/core-blocks/src/IconOrImage.tsx
+++ b/webapp/packages/core-blocks/src/IconOrImage.tsx
@@ -14,18 +14,19 @@ import { StaticImage } from './StaticImage';
 export interface IconOrImageProps {
   icon: string;
   className?: string;
+  title?: string;
   onClick?: () => void;
   viewBox?: string;
 }
 
-export const IconOrImage = function IconOrImage({ icon, className, onClick, viewBox }: IconOrImageProps) {
+export const IconOrImage = function IconOrImage({ icon, className, title, onClick, viewBox }: IconOrImageProps) {
   const isStaticIcon = useMemo(
     () => icon && (icon.startsWith('platform:') || icon.startsWith('/')),
     [icon]
   );
 
   if (isStaticIcon) {
-    return <StaticImage icon={icon} className={className} onClick={onClick} />;
+    return <StaticImage title={title} icon={icon} className={className} onClick={onClick} />;
   }
 
   return <Icon name={icon} className={className} viewBox={viewBox || '0 0 32 32'} onClick={onClick} />;
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index 8e9bb39265d..77034ed380d 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -33,9 +33,11 @@
       width: 16px;
     }
 
-    &:global([disabled]),
-    &:global([readonly]) {
-      opacity: 0.8;
+    &[type="text"] {
+      &:global([disabled]),
+      &:global([readonly]) {
+        opacity: 0.8;
+      }
     }
 
     &[use|mod="surface"] {
diff --git a/webapp/packages/core-theming/src/styles/_radio.scss b/webapp/packages/core-theming/src/styles/_radio.scss
index b0037f20e56..5070a136eab 100644
--- a/webapp/packages/core-theming/src/styles/_radio.scss
+++ b/webapp/packages/core-theming/src/styles/_radio.scss
@@ -29,6 +29,9 @@
   .theme-radio_ripple {
     composes: mdc-radio__ripple;
   }
+  .theme-radio--disabled {
+    composes: mdc-radio--disabled;
+  }
 
   .theme-radio_primary {
     $mdc-radio-baseline-theme-color: primary;
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
index 407740c62b3..ede41b2db0f 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
@@ -14,7 +14,7 @@ import { Cell } from 'react-data-grid';
 
 import { useMouse, useObjectRef } from '@cloudbeaver/core-blocks';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
-import { isBooleanValuePresentationAvaliable, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
+import { isBooleanValuePresentationAvailable, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import { EditingContext } from '../../Editing/EditingContext';
 import { DataGridContext } from '../DataGridContext';
@@ -102,27 +102,20 @@ export const CellRenderer: React.FC<CellRendererProps<any>> = observer(function
         return;
       }
 
-      if (
-        !this.column.editable
-        || this.dataGridContext?.model.isDisabled(this.dataGridContext.resultIndex)
-        || (
-          this.resultColumn
-          && isBooleanValuePresentationAvaliable(
-            this.editor?.getCell(this.rowIdx, Number(this.column.key)),
-            this.resultColumn
-          )
-        )
-      ) {
-        return;
-      }
       const format = this.dataGridContext?.model.source.getAction(
         this.dataGridContext.resultIndex,
         ResultSetFormatAction
       );
       const columnIndex = this.tableDataContext?.getDataColumnIndexFromKey(this.column.key) ?? null;
+      const handleByBooleanFormatter = this.resultColumn && isBooleanValuePresentationAvailable(
+        this.editor?.getCell(this.rowIdx, Number(this.column.key)),
+        this.resultColumn
+      );
 
       if (
-        columnIndex === null
+        !this.column.editable
+        || handleByBooleanFormatter
+        || columnIndex === null
         || format?.isReadOnly({
           row: this.rowIdx,
           column: columnIndex,
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts
index dae8f1e9e5c..f5526f5190d 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuCellEditingService.ts
@@ -7,7 +7,7 @@
  */
 
 import { injectable } from '@cloudbeaver/core-di';
-import { isBooleanValuePresentationAvaliable, ResultSetDataAction, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
+import { isBooleanValuePresentationAvailable, ResultSetDataAction, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import { DataGridContextMenuService } from './DataGridContextMenuService';
 
@@ -34,7 +34,8 @@ export class DataGridContextMenuCellEditingService {
         isHidden(context) {
           const format = context.data.model.source.getAction(context.data.resultIndex, ResultSetFormatAction);
           return format.isReadOnly({ column: context.data.column, row: context.data.row })
-            || context.data.model.isDisabled(context.data.resultIndex);
+            || context.data.model.isDisabled(context.data.resultIndex)
+            || context.data.model.isReadonly();
         },
         order: 4,
         title: 'data_grid_table_editing',
@@ -59,7 +60,7 @@ export class DataGridContextMenuCellEditingService {
             return true;
           }
 
-          return isBooleanValuePresentationAvaliable(cellValue, column);
+          return isBooleanValuePresentationAvailable(cellValue, column);
         },
         order: 0,
         title: 'data_grid_table_editing_open_inline_editor',
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
index 78b047bf280..e8e77fdbc32 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
@@ -48,7 +48,7 @@ export const DataGridTable: React.FC<IDataPresentationProps<any, IDatabaseResult
 
   const gridSelectionContext = useGridSelectionContext(tableData, selectionAction);
   const editingContext = useEditing({
-    readonly: model.isReadonly(),
+    readonly: model.isReadonly() || model.isDisabled(resultIndex),
     onEdit: (position, key) => {
       const editor = model.source.getEditor(resultIndex);
 
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx
index a0417efebd2..1749238d542 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatterFactory.tsx
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useContext, useRef } from 'react';
 import type { FormatterProps } from 'react-data-grid';
 
-import { isBooleanValuePresentationAvaliable, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
+import { isBooleanValuePresentationAvailable, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import { DataGridContext } from '../DataGridContext';
 import { TableDataContext } from '../TableDataContext';
@@ -34,7 +34,7 @@ export const CellFormatterFactory: React.FC<IProps> = observer(function CellForm
       const formatter = context.model.source.getAction(context.resultIndex, ResultSetFormatAction);
       const rawValue = formatter.get(props.row[props.column.key]);
 
-      if (resultColumn && isBooleanValuePresentationAvaliable(rawValue, resultColumn)) {
+      if (resultColumn && isBooleanValuePresentationAvailable(rawValue, resultColumn)) {
         formatterRef.current = BooleanFormatter;
       }
     }
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
index 773eaa31e8d..47fcda2d4e9 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
@@ -13,6 +13,7 @@ import styled, { use, css } from 'reshadow';
 
 import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
+import { EditingContext } from '../../../Editing/EditingContext';
 import { DataGridContext } from '../../DataGridContext';
 import { TableDataContext } from '../../TableDataContext';
 
@@ -20,6 +21,9 @@ const styles = css`
   boolean-formatter {
     cursor: pointer;
   }
+  boolean-formatter[|disabled] {
+    cursor: auto;
+  }
   boolean-formatter[|boolean] {
     font-family: monospace;
     white-space: pre;
@@ -28,41 +32,36 @@ const styles = css`
   }
 `;
 
-function getClasses(rawValue: any) {
-  const classes = [];
-  if (rawValue === null) {
-    classes.push('cell-null');
-  }
-  return classes.join(' ');
-}
-
 export const BooleanFormatter: React.FC<FormatterProps> = observer(function BooleanFormatter({ column, row, rowIdx }) {
   const context = useContext(DataGridContext);
   const tableDataContext = useContext(TableDataContext);
+  const editingContext = useContext(EditingContext);
+
   const formatter = context?.model.source.getAction(context.resultIndex, ResultSetFormatAction);
   const resultColumn = tableDataContext?.getColumnInfo(column.key);
   const rawValue = formatter?.get(row[column.key]) ?? row[column.key];
   const value = typeof rawValue === 'string' ? rawValue.toLowerCase() === 'true' : rawValue;
   const stringifiedValue = formatter?.toDisplayString(value) ?? String(value);
   const valueRepresentation = value === null ? stringifiedValue : `[${value ? 'v' : ' '}]`;
-  const classes = getClasses(rawValue);
+  const disabled = !column.editable || !!editingContext?.readonly;
 
-  const getNextValue = useCallback((prev: boolean | null) => {
-    if (!resultColumn?.required && prev === false) {
-      return null;
+  const toggleValue = useCallback(() => {
+    if (disabled) {
+      return;
     }
 
-    return !prev;
-  }, [resultColumn]);
+    const newValue = !resultColumn?.required && value === false ? null : !value;
+
+    context?.model.source.getEditor(context.resultIndex).setCell(rowIdx, Number(column.key), newValue);
+  }, [context, resultColumn, column.key, rowIdx, value, disabled]);
 
   return styled(styles)(
     <boolean-formatter
-      className={classes}
+      className={value === null ? 'cell-null' : undefined}
       as='span'
       title={stringifiedValue}
-      onClick={() => context?.model.source.getEditor(context.resultIndex)
-        .setCell(rowIdx, Number(column.key), getNextValue(value))}
-      {...use({ boolean: value !== null })}
+      onClick={toggleValue}
+      {...use({ disabled, boolean: value !== null })}
     >
       {valueRepresentation}
     </boolean-formatter>
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx
index 3be9aabbf54..15c46a9d770 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx
@@ -70,7 +70,7 @@ export const TextFormatter: React.FC<FormatterProps> = observer(function TextFor
           <IconOrImage icon='external-link' viewBox='0 0 24 24' />
         </a>
       )}
-      <div className='text-formatter_value'>{value}</div>
+      <div className='text-formatter__value'>{value}</div>
     </div>
   );
 });
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableIndexColumnHeader.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableIndexColumnHeader.tsx
index bc52e29adac..dde415d4871 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableIndexColumnHeader.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableIndexColumnHeader.tsx
@@ -22,6 +22,7 @@ const styles = css`
     cursor: pointer;
   }
   IconOrImage {
+    cursor: auto;
     width: 10px;
     position: absolute;
     right: 2px;
@@ -41,7 +42,7 @@ export const TableIndexColumnHeader: React.FC<HeaderRendererProps<any>> = functi
 
   return styled(styles)(
     <container as='div' title={translate('data_grid_table_index_column_tooltip')} onClick={() => selectionContext.selectTable()}>
-      {tableDataContext.isReadOnly() && <IconOrImage icon='/icons/lock.png' />}
+      {tableDataContext.isReadOnly() && <IconOrImage title={translate('data_grid_table_readonly_tooltip')} icon='/icons/lock.png' />}
       {props.column.name}
     </container>
   );
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/Editing/EditingContext.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/Editing/EditingContext.tsx
index fe5936e7db7..5f7f2cbaae9 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/Editing/EditingContext.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/Editing/EditingContext.tsx
@@ -9,6 +9,7 @@
 import { createContext } from 'react';
 
 export interface IEditingContext {
+  readonly readonly: boolean;
   edit: (position: CellPosition, key?: string) => void;
   closeEditor: (position: CellPosition) => void;
   close: () => void;
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/Editing/useEditing.ts b/webapp/packages/plugin-data-spreadsheet-new/src/Editing/useEditing.ts
index 6a757c606f7..3759d0c2a9c 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/Editing/useEditing.ts
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/Editing/useEditing.ts
@@ -30,6 +30,7 @@ export function useEditing(options: IEditingOptions): IEditingContext {
   }, { options }, { editingCells: observable });
 
   const [context] = useState<IEditingContext>({
+    readonly: !!optionsRef.readonly,
     edit(position: CellPosition, key?: string) {
       if (optionsRef.readonly) {
         return;
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts
index 81fe06f4bf8..f6f0b0f2346 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts
@@ -15,4 +15,5 @@ export default [
   ['data_grid_table_context_menu_filter_dialog_title', 'Edit value'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Give access to clipboard'],
   ['data_grid_table_index_column_tooltip', 'Select whole table'],
+  ['data_grid_table_readonly_tooltip', 'Read-only'],
 ];
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts
index 80e408c3fcb..d709fd1bb07 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts
@@ -15,4 +15,5 @@ export default [
   ['data_grid_table_context_menu_filter_dialog_title', 'Редактировать значение'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Дать доступ к буферу обмена'],
   ['data_grid_table_index_column_tooltip', 'Выбрать всю таблицу'],
+  ['data_grid_table_readonly_tooltip', 'Доступно только для чтения'],
 ];
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/styles/base.scss b/webapp/packages/plugin-data-spreadsheet-new/src/styles/base.scss
index d65f6b5c220..1d3ee8870c3 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/styles/base.scss
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/styles/base.scss
@@ -51,7 +51,7 @@
     }
   }
 
-  .text-formatter_value {
+  .text-formatter__value {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
index fd1eebefd9e..89124f168c0 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
@@ -13,10 +13,11 @@ import { Radio, TabContainerPanelComponent, TextPlaceholder } from '@cloudbeaver
 import { useTranslate } from '@cloudbeaver/core-localization';
 
 import { ResultSetDataAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetDataAction';
+import { ResultSetFormatAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetFormatAction';
 import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetSelectAction';
 import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
 import type { IDataValuePanelProps } from '../../TableViewer/ValuePanel/DataValuePanelService';
-import { isStringifiedBoolean } from './isBooleanValuePresentationAvaliable';
+import { isStringifiedBoolean } from './isBooleanValuePresentationAvailable';
 
 const styles = css`
   container {
@@ -48,8 +49,6 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
 
   const firstSelectedCell = selectedCells[0] || focusCell;
   const cellValue = editor.getCell(firstSelectedCell.row, firstSelectedCell.column);
-  const column = data.getColumn(firstSelectedCell.column);
-  const nullable = column?.required === false;
 
   if (typeof cellValue === 'string' && isStringifiedBoolean(cellValue)) {
     value = cellValue.toLowerCase() === 'true';
@@ -61,12 +60,19 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
     return <TextPlaceholder>{translate('data_viewer_presentation_value_boolean_placeholder')}</TextPlaceholder>;
   }
 
+  const format = model.source.getAction(resultIndex, ResultSetFormatAction);
+
+  const column = data.getColumn(firstSelectedCell.column);
+  const nullable = column?.required === false;
+  const readonly = model.isReadonly() || model.isDisabled(resultIndex) || format.isReadOnly(firstSelectedCell);
+
   return styled(styles)(
     <container>
       <Radio
         id='true_value'
         mod={['primary']}
         checked={value === true}
+        disabled={readonly}
         onClick={() => editor.setCell(firstSelectedCell.row, firstSelectedCell.column, true)}
       >
         TRUE
@@ -75,6 +81,7 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
         id='false_value'
         mod={['primary']}
         checked={value === false}
+        disabled={readonly}
         onClick={() => editor.setCell(firstSelectedCell.row, firstSelectedCell.column, false)}
       >
         FALSE
@@ -84,6 +91,7 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
           id='null_value'
           mod={['primary']}
           checked={value === null}
+          disabled={readonly}
           onClick={() => editor.setCell(firstSelectedCell.row, firstSelectedCell.column, null)}
         >
         NULL
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
index 89ac53a97e8..cd7d0029d76 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
@@ -13,7 +13,7 @@ import { ResultSetDataAction } from '../../DatabaseDataModel/Actions/ResultSet/R
 import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetSelectAction';
 import { DataValuePanelService } from '../../TableViewer/ValuePanel/DataValuePanelService';
 import { BooleanValuePresentation } from './BooleanValuePresentation';
-import { isBooleanValuePresentationAvaliable } from './isBooleanValuePresentationAvaliable';
+import { isBooleanValuePresentationAvailable } from './isBooleanValuePresentationAvailable';
 
 @injectable()
 export class BooleanValuePresentationBootstrap extends Bootstrap {
@@ -46,7 +46,7 @@ export class BooleanValuePresentationBootstrap extends Bootstrap {
           const cellValue = editor.getCell(firstSelectedCell.row, firstSelectedCell.column);
           const column = data.getColumn(firstSelectedCell.column);
 
-          return column === undefined || !isBooleanValuePresentationAvaliable(cellValue, column);
+          return column === undefined || !isBooleanValuePresentationAvailable(cellValue, column);
         }
 
         return true;
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvaliable.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvailable.ts
similarity index 92%
rename from webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvaliable.ts
rename to webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvailable.ts
index 3a06a408b97..7002acfa2af 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvaliable.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvailable.ts
@@ -13,7 +13,7 @@ export function isStringifiedBoolean(value: string): boolean {
   return ['false', 'true'].includes(value.toLowerCase());
 }
 
-export function isBooleanValuePresentationAvaliable(cellValue: IResultSetValue, column: SqlResultColumn): boolean {
+export function isBooleanValuePresentationAvailable(cellValue: IResultSetValue, column: SqlResultColumn): boolean {
   return column?.dataKind?.toLowerCase() === 'boolean'
     && (
       typeof cellValue === 'boolean'
diff --git a/webapp/packages/plugin-data-viewer/src/index.ts b/webapp/packages/plugin-data-viewer/src/index.ts
index eec9fd5e7ef..1a26e4a8494 100644
--- a/webapp/packages/plugin-data-viewer/src/index.ts
+++ b/webapp/packages/plugin-data-viewer/src/index.ts
@@ -50,4 +50,4 @@ export * from './TableViewer/TableDataModel/EditedRow';
 export * from './ContainerDataSource';
 export * from './DataPresentationService';
 export * from './useDataModel';
-export * from './ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvaliable';
+export * from './ValuePanelPresentation/BooleanValue/isBooleanValuePresentationAvailable';

From f1e78e67d3812fe734ab4d0677742700dbb72a51 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Fri, 6 Aug 2021 14:41:42 +0300
Subject: [PATCH 2/2] fix(plugin-data-viewer): CB-1129 style changes

---
 webapp/packages/core-blocks/src/FormControls/Radio.tsx    | 5 +++++
 .../packages/core-theming/src/styles/_form-controls.scss  | 8 +++-----
 .../Formatters/CellFormatters/BooleanFormatter.tsx        | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Radio.tsx b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
index bbe4d3b30d4..0eed5868911 100644
--- a/webapp/packages/core-blocks/src/FormControls/Radio.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
@@ -99,6 +99,11 @@ const radioState = {
       radio {
         composes: theme-radio--disabled from global;
       }
+    `,
+    css`
+      input {
+        opacity: 0 !important;
+      }
     `
   ),
 };
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index 77034ed380d..8e9bb39265d 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -33,11 +33,9 @@
       width: 16px;
     }
 
-    &[type="text"] {
-      &:global([disabled]),
-      &:global([readonly]) {
-        opacity: 0.8;
-      }
+    &:global([disabled]),
+    &:global([readonly]) {
+      opacity: 0.8;
     }
 
     &[use|mod="surface"] {
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
index 47fcda2d4e9..69e0889244c 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx
@@ -50,9 +50,9 @@ export const BooleanFormatter: React.FC<FormatterProps> = observer(function Bool
       return;
     }
 
-    const newValue = !resultColumn?.required && value === false ? null : !value;
+    const nextValue = !resultColumn?.required && value === false ? null : !value;
 
-    context?.model.source.getEditor(context.resultIndex).setCell(rowIdx, Number(column.key), newValue);
+    context?.model.source.getEditor(context.resultIndex).setCell(rowIdx, Number(column.key), nextValue);
   }, [context, resultColumn, column.key, rowIdx, value, disabled]);
 
   return styled(styles)(