feat(plugin-data-spreadsheet-new): CB-1623 enable sorting in readonly mode

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/OrderButton.tsx

@@ -7,7 +7,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import styled, { css, use } from 'reshadow';
+import styled, { css } from 'reshadow';
 
 import { IconOrImage } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -24,6 +24,9 @@ const styles = css`
     width: 20px;
     box-sizing: border-box;
     cursor: pointer;
+    background: transparent;
+    outline: none;
+    color: inherit;
   }
   order-button > IconOrImage {
     width: 12px;
@@ -31,10 +34,6 @@ const styles = css`
   order-button:hover > IconOrImage {
     width: 13px;
   }
-  order-button[|disabled] {
-    opacity: 0.7;
-    cursor: default;
-  }
 `;
 
 interface Props {
@@ -53,7 +52,7 @@ export const OrderButton = observer<Props>(function OrderButton({
   const translate = useTranslate();
   const constraints = model.source.getAction(resultIndex, ResultSetConstraintAction);
   const currentOrder = constraints.getOrder(attributePosition);
-  const loading = model.isLoading();
+  const disabled = model.isDisabled(resultIndex) || model.isLoading();
 
   let icon = 'order-arrow-unknown';
   if (currentOrder === EOrder.asc) {
@@ -62,11 +61,7 @@ export const OrderButton = observer<Props>(function OrderButton({
     icon = 'order-arrow-down';
   }
 
-  const handleSort = async (e: React.MouseEvent<HTMLDivElement>) => {
-    if (loading) {
-      return;
-    }
-
+  const handleSort = async (e: React.MouseEvent<HTMLButtonElement>) => {
     const nextOrder = getNextOrder(currentOrder);
     await model.requestDataAction(async () => {
       constraints.setOrder(attributePosition, nextOrder, e.ctrlKey || e.metaKey);
@@ -74,18 +69,18 @@ export const OrderButton = observer<Props>(function OrderButton({
     });
   };
 
-  function preventFocus(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  function preventFocus(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
     event.preventDefault();
   }
 
   return styled(styles)(
     <order-button
-      as='div'
+      as='button'
       title={translate('data_grid_table_tooltip_column_header_order')}
       className={className}
+      disabled={disabled}
       onMouseDown={preventFocus}
       onClick={handleSort}
-      {...use({ disabled: loading })}
     >
       <IconOrImage
         icon={icon}

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx

@@ -26,13 +26,13 @@ const headerStyles = css`
     align-items: center;
     align-content: center;
     width: 100%;
-    cursor: pointer;
   }
   shrink-container {
     display: flex;
     align-items: center;
     flex: 1 1 auto;
     overflow: hidden;
+    cursor: pointer;
   }
   icon {
     display: flex;
@@ -70,6 +70,7 @@ export const TableColumnHeader = observer<HeaderRendererProps<any>>(function Tab
   const resultIndex = dataGridContext.resultIndex;
   const model = dataGridContext.model;
   const dataReadonly = getComputed(() => tableDataContext.isReadOnly() || model.isReadonly());
+  const sortingDisabled = getComputed(() => model.source.results.length > 1 || !model.source.executionContext?.context);
 
   let resultColumn: SqlResultColumn | undefined;
   let icon = calculatedColumn.icon;
@@ -112,7 +113,7 @@ export const TableColumnHeader = observer<HeaderRendererProps<any>>(function Tab
         </icon>
         <name>{columnName}</name>
       </shrink-container>
-      {!(dataReadonly || columnReadOnly) && resultColumn && (
+      {!(sortingDisabled || columnReadOnly) && resultColumn && (
         <OrderButton
           model={model}
           resultIndex={resultIndex}