fix(core-blocks): prevent action with table item when selection

CB-251

webapp/packages/core-blocks/src/Table/TableColumnValue.tsx

@@ -21,6 +21,8 @@ type Props = React.PropsWithChildren<{
   centerContent?: boolean;
   flex?: boolean;
   expand?: boolean;
+  onClick?(): void;
+  onDoubleClick?(): void;
 }>
 
 export const TableColumnValue = observer(function TableColumnValue({
@@ -30,29 +32,47 @@ export const TableColumnValue = observer(function TableColumnValue({
   flex,
   expand,
   className,
+  onClick,
+  onDoubleClick,
 }: Props) {
   const styles = useStyles();
   const tableContext = useContext(TableContext);
   const context = useContext(TableItemContext);
 
   const handleClick = useCallback((event: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>) => {
-    if (!expand || !context) {
+    if (!context) {
       return;
     }
 
-    event.stopPropagation();
+    if (expand) {
+      event.stopPropagation();
+      const state = !context.isExpanded();
+      tableContext?.setItemExpand(context.item, state);
+    }
 
-    const state = !context.isExpanded();
+    if (onClick) {
+      onClick();
+    }
+  }, [tableContext, context, expand, onClick]);
 
-    tableContext?.setItemExpand(context.item, state);
-  }, [tableContext, context, expand]);
+  const handleDoubleClick = useCallback((event: React.MouseEvent<HTMLTableDataCellElement>) => {
+    if (onDoubleClick) {
+      onDoubleClick();
+    }
+  }, [onDoubleClick]);
 
   if (!context) {
     return null;
   }
 
   return styled(styles)(
-    <td align={align} className={className} {...use({ centerContent })} onClick={handleClick}>
+    <td
+      align={align}
+      className={className}
+      {...use({ centerContent })}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+    >
       {flex && <td-flex as='div'>{children}</td-flex>}
       {!flex && children}
     </td>

webapp/packages/core-blocks/src/Table/TableItem.tsx

@@ -53,13 +53,10 @@ export const TableItem = observer(function TableItem({
   }), [item, selectDisabled]);
 
   const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLTableRowElement>) => {
+    (event: React.MouseEvent<HTMLTableRowElement>) => {
       if (!selectDisabled) {
+        event.stopPropagation();
         const isSelected = context.selectedItems.get(item);
-        // if (!e.ctrlKey) {
-        //   context.clearSelection();
-        // }
-
         context.setItemSelect(item, !isSelected);
       }
 

webapp/packages/core-blocks/src/Table/TableItemSelect.tsx

@@ -25,14 +25,18 @@ export const TableItemSelect = observer(function TableItemSelect({ checked, disa
   const tableContext = useContext(TableContext);
   const context = useContext(TableItemContext);
   const styles = useStyles();
-  if (!context) {
-    return null;
-  }
   const handleClick = useCallback((event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
+    if (!context) {
+      return;
+    }
     event.stopPropagation();
     tableContext?.setItemSelect(context.item, !context.isSelected());
   }, [tableContext, context]);
 
+  if (!context) {
+    return null;
+  }
+
   return styled(styles)(
     <input type='checkbox' checked={checked || context.isSelected()} onClick={handleClick} className={className} disabled={context.selectDisabled || disabled}/>
   );

webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts

@@ -108,18 +108,18 @@ export class TableViewerModel {
   ) => Promise<IRequestDataResult>;
   _saveChanges: (model: TableViewerModel, diffs: RowDiff[]) => Promise<IRequestDataResult>;
 
-  get isEmpty() {
+  get isEmpty(): boolean {
     return this.tableDataModel.isEmpty();
   }
-  get isLoaderVisible() {
+  get isLoaderVisible(): boolean {
     return this._isLoaderVisible;
   }
-  get isFullyLoaded() {
+  get isFullyLoaded(): boolean {
     return !this._hasMoreRows;
   }
 
-  getChunkSize = () => this._chunkSize;
-  setChunkSize = (count: number) => this.updateChunkSize(count);
+  getChunkSize = (): number => this._chunkSize;
+  setChunkSize = (count: number): void => this.updateChunkSize(count);
 
   @observable queryDuration = 0;
   @observable requestStatusMessage = '';
@@ -165,34 +165,33 @@ export class TableViewerModel {
     this.onChunkSizeChange = this.chunkChangeSubject.asObservable();
   }
 
-  cancelFetch = () => {
-  }
+  cancelFetch = (): void => { }
 
-  refresh = async () => {
+  refresh = async (): Promise<void> => {
     this.resetData();
     await this.onRequestData(0, this.getChunkSize());
     this.resetSubject.next();
   }
 
-  onShowDetails = () => {
+  onShowDetails = (): void => {
     if (this.exception) {
       this.commonDialogService.open(ErrorDetailsDialog, this.exception);
     }
   }
 
-  getQueryWhereFilter() {
+  getQueryWhereFilter(): string | null {
     return this.queryWhereFilter;
   }
 
-  setQueryWhereFilter(where: string | null) {
+  setQueryWhereFilter(where: string | null): void {
     this.queryWhereFilter = where;
   }
 
-  getSortedColumns() {
+  getSortedColumns(): IterableIterator<SqlDataFilterConstraint> {
     return this.sortedColumns.values();
   }
 
-  setColumnSorting(colId: string, orderAsc?: boolean, multiple?: boolean) {
+  setColumnSorting(colId: string, orderAsc?: boolean, multiple?: boolean): void {
     if (!multiple) {
       this.sortedColumns.clear();
     }
@@ -201,24 +200,24 @@ export class TableViewerModel {
     sorting.orderAsc = orderAsc;
   }
 
-  removeColumnSorting(colId: string) {
+  removeColumnSorting(colId: string): void {
     this.sortedColumns.delete(colId);
   }
 
   @action
-  insertRows(position: number, rows: TableRow[], hasMore: boolean) {
+  insertRows(position: number, rows: TableRow[], hasMore: boolean): void {
     const isRowsAddition = this.tableDataModel.getRows().length < position + rows.length;
     this.tableDataModel.insertRows(position, rows);
     this._hasMoreRows = isRowsAddition ? hasMore : this._hasMoreRows;
   }
 
   @action
-  setColumns(columns: TableColumn[]) {
+  setColumns(columns: TableColumn[]): void {
     this.tableDataModel.setColumns(columns);
   }
 
   @action
-  updateInfo(status: string, duration?: number) {
+  updateInfo(status: string, duration?: number): void {
     this.queryDuration = duration || 0;
     this.requestStatusMessage = status;
   }
@@ -231,15 +230,15 @@ export class TableViewerModel {
     return this.tableEditor.isEdited();
   }
 
-  isCellEdited(rowIndex: number, column: string) {
+  isCellEdited(rowIndex: number, column: string): boolean {
     return this.tableEditor.isCellEdited(rowIndex, column);
   }
 
-  revertCellValue(rowNumber: number, column: string) {
+  revertCellValue(rowNumber: number, column: string): void {
     this.tableEditor.revertCellValue(rowNumber, column);
   }
 
-  cancelChanges() {
+  cancelChanges(): void {
     this.tableEditor.cancelChanges();
   }
 
@@ -321,7 +320,7 @@ export class TableViewerModel {
     }
   }
 
-  onCellEditingStopped(rowNumber: number, column: string, value: any, editing: boolean) {
+  onCellEditingStopped(rowNumber: number, column: string, value: any, editing: boolean): void {
     if (this.access === AccessMode.Readonly) {
       return;
     }
@@ -329,7 +328,7 @@ export class TableViewerModel {
     this.tableEditor.editCellValue(rowNumber, column, value, editing);
   }
 
-  onSortChanged(sorting: SortModel) {
+  onSortChanged(sorting: SortModel): void {
     this.sortedColumns.clear();
     for (const sort of sorting) {
       this.setColumnSorting(sort.colId, sort.sort === 'asc', true);

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Item.tsx

@@ -58,7 +58,7 @@ export const Item = observer(function Item({
 
   if (!node) {
     return styled(useStyles(itemStyles))(
-      <TableItem item={objectId} onDoubleClick={handleOpen}>
+      <TableItem item={objectId}>
         <TableColumnValue centerContent><TableItemSelect /></TableColumnValue>
         <TableColumnValue>
           <icon as="div">
@@ -68,7 +68,7 @@ export const Item = observer(function Item({
         {Array(columns)
           .fill(0)
           .map((_, i) => (
-            <TableColumnValue key={i}>
+            <TableColumnValue key={i} onDoubleClick={handleOpen}>
               <placeholder as="div" />
             </TableColumnValue>
           ))}
@@ -78,20 +78,20 @@ export const Item = observer(function Item({
 
   if (!dbObject?.properties) {
     return styled(useStyles(itemStyles))(
-      <TableItem item={objectId} onDoubleClick={handleOpen}>
+      <TableItem item={objectId}>
         <TableColumnValue centerContent><TableItemSelect /></TableColumnValue>
         <TableColumnValue>
           <icon as="div">
             <StaticImage icon={node.icon} />
           </icon>
         </TableColumnValue>
-        <TableColumnValue>{node.name}</TableColumnValue>
+        <TableColumnValue onDoubleClick={handleOpen}>{node.name}</TableColumnValue>
       </TableItem>
     );
   }
 
   return styled(useStyles(itemStyles))(
-    <TableItem item={objectId} onDoubleClick={handleOpen}>
+    <TableItem item={objectId}>
       <TableColumnValue centerContent><TableItemSelect /></TableColumnValue>
       <TableColumnValue>
         <icon as="div">
@@ -99,7 +99,7 @@ export const Item = observer(function Item({
         </icon>
       </TableColumnValue>
       {dbObject.properties.map(property => (
-        <TableColumnValue key={property.id}>{getValue(property.value)}</TableColumnValue>
+        <TableColumnValue key={property.id} onDoubleClick={handleOpen}>{getValue(property.value)}</TableColumnValue>
       ))}
     </TableItem>
   );