Repository: apache/superset
File: superset-frontend/src/explore/components/SaveModal.tsx (TypeScript)

Code before:
            {t('Save (Overwrite)')}
          </Radio>
          <Radio
            id="saveas-radio"
            data-test="saveas-radio"
            checked={this.state.action === ChartStatusType.saveas}
            onChange={() => this.changeAction('saveas')}
          >
            {t('Save as...')}
          </Radio>
        </FormItem>
        <Divider />
        <FormItem label={t('Chart name')} required>
          <Input
            name="new_slice_name"
            type="text"
            placeholder="Name"
            value={this.state.newSliceName}
            onChange={this.onSliceNameChange}
            data-test="new-chart-name"
          />
        </FormItem>
        {this.props.datasource?.type === 'query' && (
          <FormItem
            label={
              <div>
                {t('Dataset Name')}
                <Flex
                  css={theme => css`
                    display: inline-flex;
                    margin-left: ${theme.sizeUnit}px;
                  `}
                >
                  <InfoTooltip
                    data-test="info-tooltip-icon"
                    tooltip={t(
                      'A reusable dataset will be saved with your chart.',
                    )}
                    placement="right"
                  />
                </Flex>
              </div>
            }
            required
          >
            <Input
              name="dataset_name"
              type="text"
              placeholder="Dataset Name"
              value={this.state.datasetName}
              onChange={this.handleDatasetNameChange}

Review comment (refactor):
I think this is not taking full advantage of the AntD Flex component. We can simplify this to just:
```jsx
<FormItem
  required
  label={
    <Flex
      align="center"
      css={theme => css`
        gap: ${theme.sizeUnit}px;
      `}
    >
      {t('Dataset Name')}
      <InfoTooltip
        data-test="info-tooltip-icon"
        tooltip={t(
          'A reusable dataset will be saved with your chart.',
        )}
        placement="right"
      />
    </Flex>
  }
>
```

It could be just:
```jsx
...
label={
  <Flex gap={theme.sizeUnit}>
    ...
  </Flex>
...
```
But since this is a class component, `theme` is not directly available in the render method. The `css` prop callback is the simplest way to access it here

Code after:
  renderSaveChartModal = () => {
    const info = this.info();
    return (
      <Form data-test="save-modal-body" layout="vertical">
        <FormItem data-test="radio-group">
          <Radio
            id="overwrite-radio"
            disabled={!this.canOverwriteSlice()}
            checked={this.state.action === 'overwrite'}
            onChange={() => this.changeAction('overwrite')}
            data-test="save-overwrite-radio"
          >
            {t('Save (Overwrite)')}
          </Radio>
          <Radio
            id="saveas-radio"
            data-test="saveas-radio"
            checked={this.state.action === ChartStatusType.saveas}
            onChange={() => this.changeAction('saveas')}
          >
            {t('Save as...')}
          </Radio>
        </FormItem>
        <Divider />
        <FormItem label={t('Chart name')} required>
          <Input
            name="new_slice_name"
            type="text"
            placeholder="Name"
            value={this.state.newSliceName}
            onChange={this.onSliceNameChange}
            data-test="new-chart-name"
          />
        </FormItem>
        {this.props.datasource?.type === 'query' && (
          <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