fix(save-chart): fix info icon alignment in save chart modal (#37708)

Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>

superset-frontend/src/explore/components/SaveModal.test.tsx

@@ -317,6 +317,19 @@ test('set dataset name when chart source is query', () => {
   expect(getByTestId('new-dataset-name')).toHaveValue('test');
 });
 
+test('renders InfoTooltip icon next to Dataset Name label when datasource type is query', () => {
+  const { getByTestId, getByText } = setup({}, queryStore);
+
+  const datasetNameLabel = getByText('Dataset Name');
+  expect(datasetNameLabel).toBeInTheDocument();
+
+  const infoTooltip = getByTestId('info-tooltip-icon');
+  expect(infoTooltip).toBeInTheDocument();
+
+  const labelContainer = datasetNameLabel.parentElement;
+  expect(labelContainer).toContainElement(infoTooltip);
+});
+
 test('make sure slice_id in the URLSearchParams before the redirect', () => {
   const myProps = {
     ...defaultProps,

superset-frontend/src/explore/components/SaveModal.tsx

@@ -33,11 +33,18 @@ import {
   Input,
   Loading,
   Divider,
+  Flex,
   TreeSelect,
 } from '@superset-ui/core/components';
 import { t, logging } from '@apache-superset/core';
 import { DatasourceType, isDefined, SupersetClient } from '@superset-ui/core';
-import { css, styled, Alert } from '@apache-superset/core/ui';
+import {
+  css,
+  styled,
+  withTheme,
+  Alert,
+  type SupersetTheme,
+} from '@apache-superset/core/ui';
 import { Radio } from '@superset-ui/core/components/Radio';
 import { GRID_COLUMN_COUNT } from 'src/dashboard/util/constants';
 import { canUserEditDashboard } from 'src/dashboard/util/permissionUtils';
@@ -67,6 +74,7 @@ interface SaveModalProps extends RouteComponentProps {
   dashboardId: '' | number | null;
   isVisible: boolean;
   dispatch: Dispatch;
+  theme: SupersetTheme;
 }
 
 type SaveModalState = {
@@ -623,11 +631,21 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
           />
         </FormItem>
         {this.props.datasource?.type === 'query' && (
-          <FormItem label={t('Dataset Name')} required>
-            <InfoTooltip
-              tooltip={t('A reusable dataset will be saved with your chart.')}
-              placement="right"
-            />
+          <FormItem
+            label={
+              <Flex align="center" gap={this.props.theme.sizeUnit}>
+                {t('Dataset Name')}
+                <InfoTooltip
+                  data-test="info-tooltip-icon"
+                  tooltip={t(
+                    'A reusable dataset will be saved with your chart.',
+                  )}
+                  placement="right"
+                />
+              </Flex>
+            }
+            required
+          >
             <Input
               name="dataset_name"
               type="text"
@@ -804,7 +822,7 @@ function mapStateToProps({
   };
 }
 
-export default withRouter(connect(mapStateToProps)(SaveModal));
+export default withRouter(connect(mapStateToProps)(withTheme(SaveModal)));
 
 // User for testing purposes need to revisit once we convert this to functional component
 export { SaveModal as PureSaveModal };