Merge pull request dbeaver#412 from dbeaver/feat/value-panel-img-url

Feat/value panel img url

webapp/packages/core-utils/src/index.ts

@@ -21,3 +21,5 @@ export * from './replaceMiddle';
 export * from './TextTools';
 export * from './throttle';
 export * from './uuid_';
+export * from './isValidUrl';
+export * from './isImageFormat';

webapp/packages/core-utils/src/isImageFormat.ts

@@ -0,0 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export function isImageFormat(value: string): boolean {
+  return value.match(/\.(jpeg|jpg|gif|png|svg|bmp|ico)$/) != null;
+}

webapp/packages/core-utils/src/isValidUrl.ts

@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export function isValidUrl(value: string): boolean {
+  let url;
+
+  try {
+    url = new URL(value);
+  } catch {
+    return false;
+  }
+
+  return url.protocol === 'http:' || url.protocol === 'https:';
+}

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

@@ -29,9 +29,11 @@ const styles = css`
   formatter-wrapper {
     flex: 1;
     display: flex;
+    overflow: hidden;
   }
   formatter-container {
     flex: 1;
+    overflow: hidden;
   }
 `;
 

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx

@@ -11,14 +11,16 @@ import { useCallback, useContext, useEffect, useRef } from 'react';
 import type { FormatterProps } from 'react-data-grid';
 import styled from 'reshadow';
 
+import { IconOrImage } from '@cloudbeaver/core-blocks';
+import { isValidUrl } from '@cloudbeaver/core-utils';
 import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import { EditingContext } from '../../../Editing/EditingContext';
 import { CellEditor, IEditorRef } from '../../CellEditor/CellEditor';
 import { DataGridContext } from '../../DataGridContext';
 
 function getClasses(rawValue: any) {
-  const classes = [];
+  const classes = ['text-formatter'];
   if (rawValue === null) {
     classes.push('cell-null');
   }
@@ -62,7 +64,12 @@ export const TextFormatter: React.FC<FormatterProps> = observer(function TextFor
 
   return styled()(
     <text-formatter title={value} className={classes}>
-      {value}
+      {typeof rawValue === 'string' && isValidUrl(rawValue) && (
+        <a href={rawValue} target='_blank' rel='noreferrer'>
+          <IconOrImage icon='external-link' viewBox='0 0 24 24' />
+        </a>
+      )}
+      <value className='text-formatter_value'>{value}</value>
     </text-formatter>
   );
 });

webapp/packages/plugin-data-spreadsheet-new/src/styles/base.scss

@@ -34,6 +34,29 @@
     flex-direction: row;
   }
 
+  .text-formatter {
+    display: flex;
+    align-items: center;
+    & a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 16px;
+      height: 24px;
+      margin-right: 8px;
+    }
+    & svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .text-formatter_value {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   .rdg-cell-editing {
     overflow: visible;
     height: 24px;

webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx

@@ -13,7 +13,7 @@ import styled, { css, use } from 'reshadow';
 import { Button, TabContainerPanelComponent } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
-import { getMIME } from '@cloudbeaver/core-utils';
+import { getMIME, isImageFormat, isValidUrl } from '@cloudbeaver/core-utils';
 
 import { ResultSetDataAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetDataAction';
 import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetSelectAction';
@@ -66,14 +66,17 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
   let src: string | undefined;
 
   if (selectedCells.length > 0 || focusCell) {
+    const data = model.source.getAction(resultIndex, ResultSetDataAction);
+    const editor = model.source.getEditor(resultIndex);
     const firstSelectedCell = selectedCells[0] || focusCell;
 
-    const content = model.source
-      .getAction(resultIndex, ResultSetDataAction)
-      .getContent(firstSelectedCell);
+    const cellValue = editor.getCell(firstSelectedCell.row, firstSelectedCell.column);
+    const content = data.getContent(firstSelectedCell);
 
     if (content?.binary) {
       src = `data:${getMIME(content.binary)};base64,${content.binary}`;
+    } else if (typeof cellValue === 'string' && isValidUrl(cellValue) && isImageFormat(cellValue)) {
+      src = cellValue;
     }
   }
 

webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentationBootstrap.ts

@@ -8,7 +8,7 @@
 
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { ResultDataFormat } from '@cloudbeaver/core-sdk';
-import { getMIME } from '@cloudbeaver/core-utils';
+import { getMIME, isImageFormat, isValidUrl } from '@cloudbeaver/core-utils';
 
 import type { IResultSetContentValue } from '../../DatabaseDataModel/Actions/ResultSet/IResultSetContentValue';
 import { ResultSetDataAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetDataAction';
@@ -35,14 +35,18 @@ export class ImageValuePresentationBootstrap extends Bootstrap {
         }
 
         const selection = context.model.source.getAction(context.resultIndex, ResultSetSelectAction);
-        const data = context.model.source.getAction(context.resultIndex, ResultSetDataAction);
 
         const selectedCells = selection.getSelectedElements();
         const focusedElement = selection.getFocusedElement();
 
         if (selectedCells.length > 0 || focusedElement) {
+          const data = context.model.source.getAction(context.resultIndex, ResultSetDataAction);
+          const editor = context.model.source.getEditor(context.resultIndex);
+
           const firstSelectedCell = selectedCells[0] || focusedElement;
-          return !this.isImage(data.getContent(firstSelectedCell));
+          const cellValue = editor.getCell(firstSelectedCell.row, firstSelectedCell.column);
+
+          return !(this.isImage(data.getContent(firstSelectedCell)) || this.isImageUrl(cellValue));
         }
 
         return true;
@@ -59,4 +63,12 @@ export class ImageValuePresentationBootstrap extends Bootstrap {
 
     return false;
   }
+
+  private isImageUrl(value: any) {
+    if (typeof value !== 'string') {
+      return false;
+    }
+
+    return isValidUrl(value) && isImageFormat(value);
+  }
 }