feat: add option to disable rendering of html in sql lab and table chart (#27969)

Co-authored-by: Sonia <sonia.gautam@agoda.com>

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -53,6 +53,7 @@ import FilterableTable from 'src/components/FilterableTable';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import { prepareCopyToClipboardTabularData } from 'src/utils/common';
+import { getItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 import {
   addQueryEditor,
   clearQueryResults,
@@ -579,6 +580,10 @@ const ResultSet = ({
       const expandedColumns = results.expanded_columns
         ? results.expanded_columns.map(col => col.column_name)
         : [];
+      const allowHTML = getItem(
+        LocalStorageKeys.SqllabIsRenderHtmlEnabled,
+        false,
+      );
       return (
         <ResultContainer>
           {renderControls()}
@@ -626,6 +631,7 @@ const ResultSet = ({
             height={rowsHeight}
             filterText={searchText}
             expandedColumns={expandedColumns}
+            allowHTML={allowHTML}
           />
         </ResultContainer>
       );

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -284,6 +284,9 @@ const SqlEditor: React.FC<Props> = ({
   const [autocompleteEnabled, setAutocompleteEnabled] = useState(
     getItem(LocalStorageKeys.SqllabIsAutocompleteEnabled, true),
   );
+  const [renderHTMLEnabled, setRenderHTMLEnabled] = useState(
+    getItem(LocalStorageKeys.SqllabIsRenderHtmlEnabled, false),
+  );
   const [showCreateAsModal, setShowCreateAsModal] = useState(false);
   const [createAs, setCreateAs] = useState('');
   const [showEmptyState, setShowEmptyState] = useState(false);
@@ -607,6 +610,11 @@ const SqlEditor: React.FC<Props> = ({
     setAutocompleteEnabled(!autocompleteEnabled);
   };
 
+  const handleToggleRenderHTMLEnabled = () => {
+    setItem(LocalStorageKeys.SqllabIsRenderHtmlEnabled, !renderHTMLEnabled);
+    setRenderHTMLEnabled(!renderHTMLEnabled);
+  };
+
   const createTableAs = () => {
     startQuery(true, CtasEnum.Table);
     setShowCreateAsModal(false);
@@ -631,6 +639,14 @@ const SqlEditor: React.FC<Props> = ({
       : t('You must run the query successfully first');
     return (
       <Menu css={{ width: theme.gridUnit * 50 }}>
+        <Menu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
+          {' '}
+          <span>{t('Render HTML')}</span>{' '}
+          <AntdSwitch
+            checked={renderHTMLEnabled}
+            onChange={handleToggleRenderHTMLEnabled}
+          />{' '}
+        </Menu.Item>
         <Menu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
           {' '}
           <span>{t('Autocomplete')}</span>{' '}