feat(sqllab): save query parameters in database (#21682)

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

@@ -36,8 +36,8 @@ import { QueryEditor } from 'src/SqlLab/types';
 interface SaveQueryProps {
   queryEditorId: string;
   columns: ISaveableDatasource['columns'];
-  onSave: (arg0: QueryPayload) => void;
-  onUpdate: (arg0: QueryPayload) => void;
+  onSave: (arg0: QueryPayload, id: string) => void;
+  onUpdate: (arg0: QueryPayload, id: string) => void;
   saveQueryWarning: string | null;
   database: Record<string, any>;
 }
@@ -46,19 +46,8 @@ type QueryPayload = {
   name: string;
   description?: string;
   id?: string;
-} & Pick<
-  QueryEditor,
-  | 'autorun'
-  | 'dbId'
-  | 'schema'
-  | 'sql'
-  | 'selectedText'
-  | 'remoteId'
-  | 'latestQueryId'
-  | 'queryLimit'
-  | 'tableOptions'
-  | 'schemaOptions'
->;
+  remoteId?: number;
+} & Pick<QueryEditor, 'dbId' | 'schema' | 'sql'>;
 
 const Styles = styled.span`
   span[role='img'] {
@@ -93,11 +82,11 @@ export default function SaveQuery({
     'selectedText',
     'sql',
     'tableOptions',
+    'templateParams',
   ]);
   const query = useMemo(
     () => ({
       ...queryEditor,
-      columns,
     }),
     [queryEditor, columns],
   );
@@ -120,10 +109,13 @@ export default function SaveQuery({
   );
 
   const queryPayload = () => ({
-    ...query,
     name: label,
     description,
     dbId: query.dbId ?? 0,
+    sql: query.sql,
+    schema: query.schema,
+    templateParams: query.templateParams,
+    remoteId: query?.remoteId || undefined,
   });
 
   useEffect(() => {
@@ -133,12 +125,12 @@ export default function SaveQuery({
   const close = () => setShowSave(false);
 
   const onSaveWrapper = () => {
-    onSave(queryPayload());
+    onSave(queryPayload(), query.id);
     close();
   };
 
   const onUpdateWrapper = () => {
-    onUpdate(queryPayload());
+    onUpdate(queryPayload(), query.id);
     close();
   };
 

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

@@ -499,8 +499,8 @@ const SqlEditor = ({
     );
   };
 
-  const onSaveQuery = async query => {
-    const savedQuery = await dispatch(saveQuery(query));
+  const onSaveQuery = async (query, clientId) => {
+    const savedQuery = await dispatch(saveQuery(query, clientId));
     dispatch(addSavedQueryToTabState(queryEditor, savedQuery));
   };
 
@@ -580,7 +580,9 @@ const SqlEditor = ({
               queryEditorId={queryEditor.id}
               columns={latestQuery?.results?.columns || []}
               onSave={onSaveQuery}
-              onUpdate={query => dispatch(updateSavedQuery(query))}
+              onUpdate={(query, remoteId, id) =>
+                dispatch(updateSavedQuery(query, remoteId, id))
+              }
               saveQueryWarning={saveQueryWarning}
               database={database}
             />

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

@@ -75,7 +75,7 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
   function renameTab() {
     const newTitle = prompt(t('Enter a new title for the tab'));
     if (newTitle) {
-      actions.queryEditorSetTitle(qe, newTitle);
+      actions.queryEditorSetTitle(qe, newTitle, qe.id);
     }
   }