minor: disable image upload support in description editor (#17697)

* minor: disable image upload support in description editor

* feat: Disable image upload support in description editor

* address comment

* fix : unit test

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
(cherry picked from commit e337a573b8d9a195c9cff58183f98c1a6100afd6)

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/image/ImageComponent.test.tsx

@@ -69,7 +69,6 @@ describe('ImageComponent', () => {
 
     expect(popover).toBeInTheDocument();
 
-    expect(screen.getByText('label.upload')).toBeInTheDocument();
     expect(screen.getByText('label.embed-link')).toBeInTheDocument();
   });
 
@@ -100,36 +99,6 @@ describe('ImageComponent', () => {
     expect(popover).not.toBeInTheDocument();
   });
 
-  it('should render the upload tab by default', async () => {
-    await act(async () => {
-      render(<ImageComponent {...mockNodeViewProps} />);
-    });
-
-    const imageNode = screen.getByTestId('uploaded-image-node');
-
-    await act(async () => {
-      userEvent.click(imageNode);
-    });
-
-    const uploadTab = screen.getByText('label.upload');
-
-    expect(uploadTab).toBeInTheDocument();
-
-    expect(uploadTab).toHaveAttribute('aria-selected', 'true');
-
-    // image upload form should be visible
-
-    expect(screen.getByTestId('image-upload-form')).toBeInTheDocument();
-
-    // update button should be disabled
-
-    expect(screen.getByText('label.update-image')).toBeInTheDocument();
-
-    // delete button should be visible
-
-    expect(screen.getByText('label.delete')).toBeInTheDocument();
-  });
-
   it('should render the embed link tab when clicked', async () => {
     await act(async () => {
       render(<ImageComponent {...mockNodeViewProps} />);

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/image/ImageComponent.tsx

@@ -23,10 +23,7 @@ import {
   Space,
   Tabs,
   Typography,
-  Upload,
-  UploadProps,
 } from 'antd';
-import { UploadChangeParam } from 'antd/lib/upload';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import React, { FC, useState } from 'react';
@@ -48,36 +45,10 @@ const PopoverContent: FC<PopoverContentProps> = ({
   updateAttributes,
   onPopupVisibleChange,
   onUploadingChange,
-  isUploading,
-  deleteNode,
-  isValidSource,
   src,
+  deleteNode,
 }) => {
   const { t } = useTranslation();
-  const handleFileUploadChange = async (info: UploadChangeParam) => {
-    try {
-      const srcUrl = info.file.response?.result;
-      if (srcUrl) {
-        updateAttributes({ src: srcUrl, alt: info.file.fileName });
-        onPopupVisibleChange(false);
-      }
-    } catch (error) {
-      // handle error
-    } finally {
-      onUploadingChange(false);
-    }
-  };
-
-  const handleRequestUpload: UploadProps['customRequest'] = (options) => {
-    onUploadingChange(true);
-    const reader = new FileReader();
-    reader.readAsDataURL(options.file as Blob);
-    reader.addEventListener('load', (e) => {
-      setTimeout(() => {
-        options?.onSuccess?.(e.target);
-      }, 1000);
-    });
-  };
 
   const handleEmbedImage: FormProps['onFinish'] = (values) => {
     onPopupVisibleChange(false);
@@ -87,35 +58,6 @@ const PopoverContent: FC<PopoverContentProps> = ({
     onUploadingChange(false);
   };
 
-  const uploadElement = (
-    <Upload
-      accept="image/jpeg, image/png, image/webp"
-      className="om-node-image-upload"
-      customRequest={handleRequestUpload}
-      data-testid="image-upload-form"
-      multiple={false}
-      showUploadList={false}
-      onChange={handleFileUploadChange}>
-      <Space className="om-image-node-action">
-        <Button className="w-full" disabled={isUploading}>
-          {isValidSource ? t('label.update-image') : t('label.upload-image')}
-        </Button>
-        {isValidSource && (
-          <Button
-            className="w-full"
-            disabled={isUploading}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              deleteNode();
-            }}>
-            {t('label.delete')}
-          </Button>
-        )}
-      </Space>
-    </Upload>
-  );
-
   const embedLinkElement = (
     <Form
       data-testid="embed-link-form"
@@ -142,6 +84,16 @@ const PopoverContent: FC<PopoverContentProps> = ({
           </Form.Item>
         </Col>
         <Col className="om-image-node-embed-link-btn-col" span={24}>
+          <Space className="om-image-node-action">
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                deleteNode();
+              }}>
+              {t('label.delete')}
+            </Button>
+          </Space>
           <Button htmlType="submit" type="primary">
             {t('label.embed-image')}
           </Button>
@@ -152,13 +104,8 @@ const PopoverContent: FC<PopoverContentProps> = ({
 
   return (
     <Tabs
-      defaultActiveKey="upload"
+      defaultActiveKey="embed"
       items={[
-        {
-          label: t('label.upload'),
-          key: 'upload',
-          children: uploadElement,
-        },
         {
           label: t('label.embed-link'),
           key: 'embed',

openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.tsx

@@ -23,6 +23,7 @@ import React, {
   useImperativeHandle,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import i18n from '../../../utils/i18next/LocalUtil';
 import { customHTMLRenderer } from './CustomHtmlRederer/CustomHtmlRederer';
 import { EDITOR_TOOLBAR_ITEMS } from './EditorToolBar';
@@ -49,9 +50,11 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
     }: RichTextEditorProp,
     ref
   ) => {
+    const { t } = useTranslation();
     const richTextEditorRef = createRef<Editor>();
 
     const [editorValue, setEditorValue] = useState(initialValue);
+    const [imageBlobError, setImageBlobError] = useState<string | null>(null);
 
     const onChangeHandler = () => {
       const value = richTextEditorRef.current
@@ -113,6 +116,15 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
         ) : (
           <div data-testid="editor">
             <Editor
+              hooks={{
+                addImageBlobHook() {
+                  setImageBlobError(t('message.image-upload-error'));
+
+                  setTimeout(() => {
+                    setImageBlobError(null);
+                  }, 3000);
+                },
+              }}
               autofocus={autofocus}
               extendedAutolinks={extendedAutolinks}
               height={height ?? '320px'}
@@ -128,6 +140,18 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
               useCommandShortcut={useCommandShortcut}
               onChange={onChangeHandler}
             />
+            {imageBlobError && (
+              <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
+                <div
+                  className="ant-form-item-explain ant-form-item-explain-connected"
+                  role="alert">
+                  <div className="ant-form-item-explain-error">
+                    {imageBlobError}
+                  </div>
+                </div>
+                <div style={{ width: '0px', height: '24px' }}></div>
+              </div>
+            )}
           </div>
         )}
       </div>

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Select or enter HEX color code.",
     "hex-color-validation": "Input is not valid HEX code.",
     "hi-user-welcome-to": "Hallo {{user}}, Willkommen bei",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Sparen Sie Zeit und Aufwand, indem Sie eine CSV-Datei mit mehreren {{entity}} in einem Durchgang hochladen.",
     "in-this-database": "In dieser Datenbank",
     "include-assets-message": "Aktivieren Sie das Extrahieren von {{assets}} aus der Datenquelle.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Select or enter HEX color code.",
     "hex-color-validation": "Input is not valid HEX code.",
     "hi-user-welcome-to": "Hi {{user}}, Welcome to",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Save time & effort by uploading a CSV file with several {{entity}} in one go.",
     "in-this-database": "In this Database",
     "include-assets-message": "Enable extracting {{assets}} from the data source.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Seleccione o ingrese el código de color HEX.",
     "hex-color-validation": "La entrada no es un código HEX válido.",
     "hi-user-welcome-to": "Hola {{user}}, Bienvenido a",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Ahorre tiempo y esfuerzo cargando un archivo CSV con varios {{entity}} de una vez.",
     "in-this-database": "En esta base de datos",
     "include-assets-message": "Configuración opcional para activar la ingestión de {{assets}}.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Sélectionnez un code couleur hexadécimal.",
     "hex-color-validation": "Code hexadécimal non valide.",
     "hi-user-welcome-to": "Bonjour {{user}}, Bienvenue sur",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Gagnez du temps et de l'effort en téléchargeant un fichier CSV contenant plusieurs {{entityPlural}} en une seule fois.",
     "in-this-database": "Dans cette base de données",
     "include-assets-message": "Activer l'extraction des {{assets}} de la source de données.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "בחר או הזן קוד צבע HEX.",
     "hex-color-validation": "הקלט אינו קוד HEX תקין.",
     "hi-user-welcome-to": "שלום {{user}}, ברוך הבא אל",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "חסוך זמן ומאמץ על ידי העלאת קובץ CSV עם מספר {{entity}} בפעם אחת.",
     "in-this-database": "במסד נתונים זה",
     "include-assets-message": "הפעל את החילוץ של {{assets}} ממקור הנתונים.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Select or enter HEX color code.",
     "hex-color-validation": "Input is not valid HEX code.",
     "hi-user-welcome-to": "Hi {{user}}, Welcome to",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Save time & effort by uploading a CSV file with several {{entity}} in one go.",
     "in-this-database": "In this Database",
     "include-assets-message": "データソースから{{assets}}の抽出を有効にする。",

openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Selecteer of voer de HEX-kleurcode in.",
     "hex-color-validation": "Invoer is geen geldige HEX-code.",
     "hi-user-welcome-to": "Hoi {{user}}, welkom bij",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Bespaar tijd en moeite door een CSV-bestand te uploaden met verschillende {{entity}} in één keer.",
     "in-this-database": "In deze database",
     "include-assets-message": "Schakel het extraheren van {{assets}} uit de databron in.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Selecione ou insira o código de cor HEX.",
     "hex-color-validation": "A entrada não é um código HEX válido.",
     "hi-user-welcome-to": "Olá {{user}}, Bem-vindo(a) ao",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Economize tempo e esforço fazendo upload de um arquivo CSV com vários {{entity}} de uma só vez.",
     "in-this-database": "Neste Banco de Dados",
     "include-assets-message": "Habilite a extração de {{assets}} da fonte de dados.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "Select or enter HEX color code.",
     "hex-color-validation": "Input is not valid HEX code.",
     "hi-user-welcome-to": "Привет, {{user}}! Добро пожаловать в",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "Сэкономьте время и усилия, загрузив CSV-файл с несколькими {{entity}} за один раз.",
     "in-this-database": "В этой базе данных",
     "include-assets-message": "Включите извлечение {{assets}} из источника данных.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -1546,6 +1546,7 @@
     "hex-code-placeholder": "选择或输入 HEX 颜色代码",
     "hex-color-validation": "输入不是有效的 HEX 颜色代码",
     "hi-user-welcome-to": "Hi {{user}}, 欢迎来到",
+    "image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
     "import-entity-help": "通过上传 CSV 文件批量维护术语, 节约时间并提高效率。",
     "in-this-database": "在此数据库中",
     "include-assets-message": "启用从数据源提取{{assets}}",