feat(Dataset): editor improvements - run in sqllab (#33443)

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

@@ -115,6 +115,7 @@ import {
   LOG_ACTIONS_SQLLAB_STOP_QUERY,
   Logger,
 } from 'src/logger/LogUtils';
+import CopyToClipboard from 'src/components/CopyToClipboard';
 import TemplateParamsEditor from '../TemplateParamsEditor';
 import SouthPane from '../SouthPane';
 import SaveQuery, { QueryPayload } from '../SaveQuery';
@@ -315,6 +316,7 @@ const SqlEditor: FC<Props> = ({
   );
   const [showCreateAsModal, setShowCreateAsModal] = useState(false);
   const [createAs, setCreateAs] = useState('');
+  const currentSQL = useRef<string>(queryEditor.sql);
   const showEmptyState = useMemo(
     () => !database || isEmpty(database),
     [database],
@@ -648,6 +650,7 @@ const SqlEditor: FC<Props> = ({
   );
 
   const onSqlChanged = useEffectEvent((sql: string) => {
+    currentSQL.current = sql;
     dispatch(queryEditorSetSql(queryEditor, sql));
   });
 
@@ -890,6 +893,73 @@ const SqlEditor: FC<Props> = ({
     dispatch(queryEditorSetCursorPosition(queryEditor, newPosition));
   };
 
+  const copyQuery = (callback: (text: string) => void) => {
+    callback(currentSQL.current);
+  };
+  const renderCopyQueryButton = () => (
+    <Button type="primary">{t('COPY QUERY')}</Button>
+  );
+
+  const renderDatasetWarning = () => (
+    <Alert
+      css={css`
+        margin-bottom: ${theme.gridUnit * 2}px;
+        padding-top: ${theme.gridUnit * 4}px;
+        .antd5-alert-action {
+          align-self: center;
+        }
+      `}
+      type="info"
+      action={
+        <CopyToClipboard
+          wrapText={false}
+          copyNode={renderCopyQueryButton()}
+          getText={copyQuery}
+        />
+      }
+      description={
+        <div
+          css={css`
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          `}
+        >
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+            `}
+          >
+            <p
+              css={css`
+                font-size: ${theme.typography.sizes.m}px;
+                font-weight: ${theme.typography.weights.medium};
+                color: ${theme.colors.primary.dark2};
+              `}
+            >
+              {' '}
+              {t(`You are edting a query from the virtual dataset `) +
+                queryEditor.name}
+            </p>
+            <p
+              css={css`
+                font-size: ${theme.typography.sizes.m}px;
+                font-weight: ${theme.typography.weights.normal};
+                color: ${theme.colors.primary.dark2};
+              `}
+            >
+              {t(
+                'After making the changes, copy the query and paste in the virtual dataset SQL snippet settings.',
+              )}{' '}
+            </p>
+          </div>
+        </div>
+      }
+      message=""
+    />
+  );
+
   const queryPane = () => {
     const { aceEditorHeight, southPaneHeight } =
       getAceEditorAndSouthPaneHeights(height, northPercent, southPercent);
@@ -899,7 +969,7 @@ const SqlEditor: FC<Props> = ({
         className="queryPane"
         sizes={[northPercent, southPercent]}
         elementStyle={elementStyle}
-        minSize={200}
+        minSize={queryEditor.isDataset ? 400 : 200}
         direction="vertical"
         gutterSize={SQL_EDITOR_GUTTER_HEIGHT}
         onDragStart={onResizeStart}
@@ -915,6 +985,7 @@ const SqlEditor: FC<Props> = ({
               startQuery={startQuery}
             />
           )}
+          {queryEditor.isDataset && renderDatasetWarning()}
           {isActive && (
             <AceEditorWrapper
               autocomplete={autocompleteEnabled && !isTempId(queryEditor.id)}

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

@@ -141,6 +141,7 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
           schema,
           autorun,
           sql,
+          isDataset: this.context.isDataset,
         };
         this.props.actions.addQueryEditor(newQueryEditor);
       }

superset-frontend/src/SqlLab/types.ts

@@ -67,6 +67,7 @@ export interface QueryEditor {
   southPercent?: number;
   updatedAt?: number;
   cursorPosition?: CursorPosition;
+  isDataset?: boolean;
 }
 
 export type toastState = {