fix: Adds space under dataset change warning (#14582)

* fix: Adding a little margin under the warning about changing datasets

* feat: moves Alert spacing from a css override to an Alert prop

* fix: prop needs to be optional... proptional

* fix: moving the typing to a better spot, adding the new prop to storybook.

* style: linting

superset-frontend/src/components/Alert/Alert.stories.tsx

@@ -74,10 +74,16 @@ AlertGallery.story = {
   },
 };
 
-export const InteractiveAlert = (args: AlertProps) => <Alert {...args} />;
+export const InteractiveAlert = (args: AlertProps) => (
+  <>
+    <Alert {...args} />
+    Some content to test the `roomBelow` prop
+  </>
+);
 
 InteractiveAlert.args = {
   closable: true,
+  roomBelow: false,
   type: 'info',
   message: smallText,
   description: bigText,

superset-frontend/src/components/Alert/index.tsx

@@ -25,7 +25,9 @@ import { useTheme } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
 import Icons from 'src/components/Icons';
 
-export type AlertProps = PropsWithChildren<AntdAlertProps>;
+export type AlertProps = PropsWithChildren<
+  AntdAlertProps & { roomBelow?: boolean }
+>;
 
 export default function Alert(props: AlertProps) {
   const {
@@ -33,11 +35,12 @@ export default function Alert(props: AlertProps) {
     description,
     showIcon = true,
     closable = true,
+    roomBelow = false,
     children,
   } = props;
 
   const theme = useTheme();
-  const { colors, typography } = theme;
+  const { colors, typography, gridUnit } = theme;
   const { alert, error, info, success } = colors;
 
   let baseColor = info;
@@ -60,12 +63,13 @@ export default function Alert(props: AlertProps) {
       icon={<AlertIcon aria-label={`${type} icon`} />}
       closeText={closable && <Icon name="x-small" aria-label="close icon" />}
       css={{
-        padding: '6px 10px',
+        marginBottom: roomBelow ? gridUnit * 4 : 0,
+        padding: `${gridUnit * 2}px ${gridUnit * 3}px`,
         alignItems: 'flex-start',
         border: 0,
         backgroundColor: baseColor.light2,
         '& .ant-alert-icon': {
-          marginRight: 10,
+          marginRight: gridUnit * 2,
         },
         '& .ant-alert-message': {
           color: baseColor.dark2,

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -248,6 +248,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
         {!confirmChange && (
           <>
             <Alert
+              roomBelow
               type="warning"
               message={
                 <>