SQL Lab - Save button doesn't change its size based on label length

[goldjee]

Screenshot

Description

Looks like "Save" button in SQL Lab has fixed size and doesn't expand if localized string is longer than default English "Save" label. This happens even if there is plenty of space in the UI left.

Design input

[dosubot]

Привет, @goldjee! Я - Dosu, бот, который может помочь вам решить проблемы, ответить на вопросы и стать участником проекта. Я здесь, чтобы помочь вам, в ожидании ответа от человеческого обслуживающего лица.

To modify the "Save" button in SQL Lab to dynamically adjust its size based on the length of the localized label, you can remove the fixed width and allow the button to size itself based on its content. Here is the modified code:

import { FC } from 'react';
import { t, useTheme, styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import { DropdownButton } from 'src/components/DropdownButton';
import Button from 'src/components/Button';
import { DropdownButtonProps } from 'antd/lib/dropdown';

interface SaveDatasetActionButtonProps {
  setShowSave: (arg0: boolean) => void;
  overlayMenu: JSX.Element | null;
}

const SaveDatasetActionButton = ({
  setShowSave,
  overlayMenu,
}: SaveDatasetActionButtonProps) => {
  const theme = useTheme();

  const StyledDropdownButton = styled(
    DropdownButton as FC<DropdownButtonProps>,
  )`
    &.ant-dropdown-button button.ant-btn.ant-btn-default {
      font-weight: ${theme.gridUnit * 150};
      background-color: ${theme.colors.primary.light4};
      color: ${theme.colors.primary.dark1};
      &:nth-of-type(2) {
        &:before,
        &:hover:before {
          border-left: 2px solid ${theme.colors.primary.dark2};
        }
      }
    }
    span[name='caret-down'] {
      margin-left: ${theme.gridUnit * 1}px;
      color: ${theme.colors.primary.dark2};
    }
  `;

  return !overlayMenu ? (
    <Button
      onClick={() => setShowSave(true)}
      buttonStyle="primary"
    >
      {t('Save')}
    </Button>
  ) : (
    <StyledDropdownButton
      onClick={() => setShowSave(true)}
      overlay={overlayMenu}
      icon={
        <Icons.CaretDown
          iconColor={theme.colors.grayscale.light5}
          name="caret-down"
        />
      }
      trigger={['click']}
    >
      {t('Save')}
    </StyledDropdownButton>
  );
};

export default SaveDatasetActionButton;

In this modification, the fixed width is removed from the Button component, allowing it to adjust its size based on the length of the localized label. This ensures that the button can accommodate longer labels, such as the Russian "СОХРАН" ^[1].

Additionally, there are other buttons in the SQL Lab interface that have a fixed size and might need similar adjustments for localization. For example, the "Create" button in the modal has a fixed size:

<Button
  buttonStyle="primary"
  disabled={ctas.length === 0}
  onClick={createViewAs}
>
  {t('Create')}
</Button>

This button might need adjustments to accommodate different text lengths in various languages ^[2].

To continue talking to Dosu, mention @dosu.