chore: Use queryEditorId in SqlEditor child components (#21650)

apache · Nov 16, 2022 · d76f305 · d76f305
1 parent 2f0d5f1
commit d76f305
Show file tree

Hide file tree

Showing 17 changed files with 229 additions and 243 deletions.
diff --git a/...t-frontend/src/SqlLab/components/EstimateQueryCostButton/EstimateQueryCostButton.test.tsx b/...t-frontend/src/SqlLab/components/EstimateQueryCostButton/EstimateQueryCostButton.test.tsx
@@ -21,7 +21,11 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { render } from 'spec/helpers/testing-library';
 import { Store } from 'redux';
-import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
+import {
+  initialState,
+  defaultQueryEditor,
+  extraQueryEditor1,
+} from 'src/SqlLab/fixtures';
 
 import EstimateQueryCostButton, {
   EstimateQueryCostButtonProps,
@@ -43,7 +47,7 @@ jest.mock('src/components/Select/AsyncSelect', () => () => (
 const setup = (props: Partial<EstimateQueryCostButtonProps>, store?: Store) =>
   render(
     <EstimateQueryCostButton
-      queryEditor={defaultQueryEditor}
+      queryEditorId={defaultQueryEditor.id}
       getEstimate={jest.fn()}
       {...props}
     />,
@@ -61,12 +65,8 @@ describe('EstimateQueryCostButton', () => {
   });
 
   it('renders label for selected query', async () => {
-    const queryEditorWithSelectedText = {
-      ...defaultQueryEditor,
-      selectedText: 'SELECT',
-    };
     const { queryByText } = setup(
-      { queryEditor: queryEditorWithSelectedText },
+      { queryEditorId: extraQueryEditor1.id },
       mockStore(initialState),
     );
 

diff --git a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx
@@ -17,43 +17,37 @@
  * under the License.
  */
 import React, { useMemo } from 'react';
-import Alert from 'src/components/Alert';
+import { useSelector } from 'react-redux';
 import { t } from '@superset-ui/core';
+
+import Alert from 'src/components/Alert';
 import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
 import Loading from 'src/components/Loading';
 import ModalTrigger from 'src/components/ModalTrigger';
 import { EmptyWrapperType } from 'src/components/TableView/TableView';
-import {
-  SqlLabRootState,
-  QueryCostEstimate,
-  QueryEditor,
-} from 'src/SqlLab/types';
-import { getUpToDateQuery } from 'src/SqlLab/actions/sqlLab';
-import { useSelector } from 'react-redux';
+import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
+import { SqlLabRootState, QueryCostEstimate } from 'src/SqlLab/types';
 
 export interface EstimateQueryCostButtonProps {
   getEstimate: Function;
-  queryEditor: QueryEditor;
+  queryEditorId: string;
   tooltip?: string;
   disabled?: boolean;
 }
 
 const EstimateQueryCostButton = ({
   getEstimate,
-  queryEditor,
+  queryEditorId,
   tooltip = '',
   disabled = false,
 }: EstimateQueryCostButtonProps) => {
   const queryCostEstimate = useSelector<
     SqlLabRootState,
     QueryCostEstimate | undefined
-  >(state => state.sqlLab.queryCostEstimates?.[queryEditor.id]);
-  const selectedText = useSelector<SqlLabRootState, string | undefined>(
-    rootState =>
-      (getUpToDateQuery(rootState, queryEditor) as unknown as QueryEditor)
-        .selectedText,
-  );
+  >(state => state.sqlLab.queryCostEstimates?.[queryEditorId]);
+
+  const { selectedText } = useQueryEditor(queryEditorId, ['selectedText']);
   const { cost } = queryCostEstimate || {};
   const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
   const columns = useMemo(

diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { styled, useTheme } from '@superset-ui/core';
+
 import { AntdDropdown } from 'src/components';
 import { Menu } from 'src/components/Menu';
 import Icons from 'src/components/Icons';
@@ -83,12 +84,13 @@ const QueryLimitSelect = ({
   maxRow,
   defaultQueryLimit,
 }: QueryLimitSelectProps) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+
   const queryEditor = useQueryEditor(queryEditorId, ['id', 'queryLimit']);
   const queryLimit = queryEditor.queryLimit || defaultQueryLimit;
-  const dispatch = useDispatch();
   const setQueryLimit = (updatedQueryLimit: number) =>
     dispatch(queryEditorSetQueryLimit(queryEditor, updatedQueryLimit));
-  const theme = useTheme();
 
   return (
     <LimitSelectStyled>

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.tsx
@@ -24,7 +24,7 @@ import { Store } from 'redux';
 import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
 import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import RunQueryActionButton, {
-  Props,
+  RunQueryActionButtonProps,
 } from 'src/SqlLab/components/RunQueryActionButton';
 
 const middlewares = [thunk];
@@ -51,7 +51,7 @@ const defaultProps = {
   overlayCreateAsMenu: null,
 };
 
-const setup = (props?: Partial<Props>, store?: Store) =>
+const setup = (props?: Partial<RunQueryActionButtonProps>, store?: Store) =>
   render(<RunQueryActionButton {...defaultProps} {...props} />, {
     useRedux: true,
     ...(store && { store }),

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -27,7 +27,7 @@ import { detectOS } from 'src/utils/common';
 import { QueryButtonProps } from 'src/SqlLab/types';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
 
-export interface Props {
+export interface RunQueryActionButtonProps {
   queryEditorId: string;
   allowAsync: boolean;
   queryState?: string;
@@ -81,14 +81,14 @@ const StyledButton = styled.span`
   }
 `;
 
-const RunQueryActionButton: React.FC<Props> = ({
+const RunQueryActionButton = ({
   allowAsync = false,
   queryEditorId,
   queryState,
   overlayCreateAsMenu,
   runQuery,
   stopQuery,
-}) => {
+}: RunQueryActionButtonProps) => {
   const theme = useTheme();
   const userOS = detectOS();
 

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -61,14 +61,14 @@ const Styles = styled.span`
   }
 `;
 
-export default function SaveQuery({
+const SaveQuery = ({
   queryEditorId,
   onSave = () => {},
   onUpdate,
   saveQueryWarning = null,
   database,
   columns,
-}: SaveQueryProps) {
+}: SaveQueryProps) => {
   const queryEditor = useQueryEditor(queryEditorId, [
     'autorun',
     'name',
@@ -230,4 +230,6 @@ export default function SaveQuery({
       </Modal>
     </Styles>
   );
-}
+};
+
+export default SaveQuery;
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
@@ -27,7 +27,7 @@ import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
 
-interface ShareSqlLabQueryPropTypes {
+interface ShareSqlLabQueryProps {
   queryEditorId: string;
   addDangerToast: (msg: string) => void;
 }
@@ -42,10 +42,10 @@ const StyledIcon = styled(Icons.Link)`
   }
 `;
 
-function ShareSqlLabQuery({
+const ShareSqlLabQuery = ({
   queryEditorId,
   addDangerToast,
-}: ShareSqlLabQueryPropTypes) {
+}: ShareSqlLabQueryProps) => {
   const theme = useTheme();
 
   const { dbId, name, schema, autorun, sql, remoteId, templateParams } =
@@ -126,6 +126,6 @@ function ShareSqlLabQuery({
       )}
     </>
   );
-}
+};
 
 export default withToasts(ShareSqlLabQuery);
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -467,7 +467,7 @@ const SqlEditor = ({
               onChange={params => {
                 dispatch(queryEditorSetTemplateParams(qe, params));
               }}
-              queryEditor={qe}
+              queryEditorId={qe.id}
             />
           </Menu.Item>
         )}
@@ -543,7 +543,7 @@ const SqlEditor = ({
               <span>
                 <EstimateQueryCostButton
                   getEstimate={getQueryCostEstimate}
-                  queryEditor={queryEditor}
+                  queryEditorId={queryEditor.id}
                   tooltip={t('Estimate the cost before running a query')}
                 />
               </span>
@@ -657,9 +657,8 @@ const SqlEditor = ({
             >
               <SqlEditorLeftBar
                 database={database}
-                queryEditor={queryEditor}
+                queryEditorId={queryEditor.id}
                 tables={tables}
-                actions={actions}
                 setEmptyState={bool => setShowEmptyState(bool)}
               />
             </StyledSidebar>