fix: Revert "#20095 - fix(database): make to display validation error msg when all … (#21277)

superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx

@@ -31,7 +31,6 @@ const mockedProps = {
   subtitle: 'Error subtitle',
   title: 'Error title',
   source: 'dashboard' as ErrorSource,
-  description: 'we are unable to connect db.',
 };
 
 test('should render', () => {
@@ -64,11 +63,6 @@ test('should render the error title', () => {
   expect(screen.getByText('Error title')).toBeInTheDocument();
 });
 
-test('should render the error description', () => {
-  render(<ErrorAlert {...mockedProps} />, { useRedux: true });
-  expect(screen.getByText('we are unable to connect db.')).toBeInTheDocument();
-});
-
 test('should render the error subtitle', () => {
   render(<ErrorAlert {...mockedProps} />, { useRedux: true });
   const button = screen.getByText('See more');

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -87,7 +87,6 @@ interface ErrorAlertProps {
   source?: ErrorSource;
   subtitle: ReactNode;
   title: ReactNode;
-  description?: string;
 }
 
 export default function ErrorAlert({
@@ -97,7 +96,6 @@ export default function ErrorAlert({
   source = 'dashboard',
   subtitle,
   title,
-  description,
 }: ErrorAlertProps) {
   const theme = useTheme();
 
@@ -118,7 +116,7 @@ export default function ErrorAlert({
           )}
           <strong>{title}</strong>
         </LeftSideContent>
-        {!isExpandable && !description && (
+        {!isExpandable && (
           <span
             role="button"
             tabIndex={0}
@@ -129,21 +127,6 @@ export default function ErrorAlert({
           </span>
         )}
       </div>
-      {description && (
-        <div className="error-body">
-          <p>{description}</p>
-          {!isExpandable && (
-            <span
-              role="button"
-              tabIndex={0}
-              className="link"
-              onClick={() => setIsModalOpen(true)}
-            >
-              {t('See more')}
-            </span>
-          )}
-        </div>
-      )}
       {isExpandable ? (
         <div className="error-body">
           <p>{subtitle}</p>

superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx

@@ -32,7 +32,6 @@ type Props = {
   copyText?: string;
   stackTrace?: string;
   source?: ErrorSource;
-  description?: string;
   errorMitigationFunction?: () => void;
 };
 
@@ -44,7 +43,6 @@ export default function ErrorMessageWithStackTrace({
   link,
   stackTrace,
   source,
-  description,
 }: Props) {
   // Check if a custom error message component was registered for this message
   if (error) {
@@ -68,7 +66,6 @@ export default function ErrorMessageWithStackTrace({
       title={title}
       subtitle={subtitle}
       copyText={copyText}
-      description={description}
       source={source}
       body={
         link || stackTrace ? (

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -42,7 +42,6 @@ import IconButton from 'src/components/IconButton';
 import InfoTooltip from 'src/components/InfoTooltip';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
-import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import ErrorAlert from 'src/components/ImportModal/ErrorAlert';
 import {
   testDatabaseConnection,
@@ -66,6 +65,7 @@ import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
+  antDErrorAlertStyles,
   antDAlertStyles,
   antdWarningAlertStyles,
   StyledAlertMargin,
@@ -112,12 +112,6 @@ const TabsStyled = styled(Tabs)`
   }
 `;
 
-const ErrorAlertContainer = styled.div`
-  ${({ theme }) => `
-    margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 4}px;
-  `};
-`;
-
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
@@ -477,7 +471,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     )?.parameters !== undefined;
   const showDBError = validationErrors || dbErrors;
   const isEmpty = (data?: Object | null) =>
-    !data || (data && Object.keys(data).length === 0);
+    data && Object.keys(data).length === 0;
 
   const dbModel: DatabaseForm =
     availableDbs?.databases?.find(
@@ -1140,24 +1134,22 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   // eslint-disable-next-line consistent-return
   const errorAlert = () => {
     let alertErrors: string[] = [];
-    if (!isEmpty(dbErrors)) {
+    if (isEmpty(dbErrors) === false) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
-    } else if (!isEmpty(validationErrors)) {
+    } else if (db?.engine === Engines.Snowflake) {
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
-          ? [
-              'We are unable to connect to your database. Click "See more" for database-provided information that may help troubleshoot the issue.',
-            ]
+          ? [validationErrors?.description]
           : [];
     }
 
     if (alertErrors.length) {
       return (
-        <ErrorMessageWithStackTrace
-          title={t('Database Creation Error')}
+        <Alert
+          type="error"
+          css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
+          message={t('Database Creation Error')}
           description={t(alertErrors[0])}
-          subtitle={t(validationErrors?.description)}
-          copyText={t(validationErrors?.description)}
         />
       );
     }
@@ -1496,9 +1488,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               onChange(ActionType.extraEditorChange, payload);
             }}
           />
-          {showDBError && (
-            <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
-          )}
+          {showDBError && errorAlert()}
         </Tabs.TabPane>
       </TabsStyled>
     </Modal>
@@ -1660,9 +1650,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   )}
                 </div>
                 {/* Step 2 */}
-                {showDBError && (
-                  <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
-                )}
+                {showDBError && errorAlert()}
               </>
             ))}
         </>