fix(database-modal): Show a different placeholder text in Snowflake connection form (#21172)

* Add new Database Modal

When adding a new database and selecting Snowflake, the database and account fields had the same placeholder. This PR adds a placeholder prop so values can be sent dynamically by field

* Call translation function for string literals

Co-authored-by: Herbert Gainor <herbert.gainor@preset.io>

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

@@ -76,6 +76,7 @@ export const databaseField = ({
   changeMethods,
   getValidation,
   validationErrors,
+  placeholder,
   db,
 }: FieldPropTypes) => (
   <ValidatedInput
@@ -85,10 +86,10 @@ export const databaseField = ({
     value={db?.parameters?.database}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.database}
-    placeholder={t('e.g. world_population')}
+    placeholder={placeholder ?? t('e.g. world_population')}
     label={t('Database name')}
     onChange={changeMethods.onParametersChange}
-    helpText={t('Copy the name of the  database you are trying to connect to.')}
+    helpText={t('Copy the name of the database you are trying to connect to.')}
   />
 );
 export const usernameField = ({

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

@@ -57,6 +57,7 @@ export interface FieldPropTypes {
   required: boolean;
   hasTooltip?: boolean;
   tooltipText?: (value: any) => string;
+  placeholder?: string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -108,6 +109,7 @@ const DatabaseConnectionForm = ({
   isEditMode = false,
   sslForced,
   editNewDb,
+  getPlaceholder,
 }: {
   isEditMode?: boolean;
   sslForced: boolean;
@@ -130,6 +132,7 @@ const DatabaseConnectionForm = ({
   onRemoveTableCatalog: (idx: number) => void;
   validationErrors: JsonObject | null;
   getValidation: () => void;
+  getPlaceholder?: (field: string) => string | undefined;
 }) => (
   <Form>
     <div
@@ -163,6 +166,7 @@ const DatabaseConnectionForm = ({
             isEditMode,
             sslForced,
             editNewDb,
+            placeholder: getPlaceholder ? getPlaceholder(field) : undefined,
           }),
         )}
     </div>

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

@@ -59,6 +59,7 @@ import {
   DatabaseForm,
   CONFIGURATION_METHOD,
   CatalogObject,
+  Engines,
 } from 'src/views/CRUD/data/database/types';
 import Loading from 'src/components/Loading';
 import ExtraOptions from './ExtraOptions';
@@ -87,11 +88,6 @@ import {
 } from './styles';
 import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';
 
-enum Engines {
-  GSheet = 'gsheets',
-  Snowflake = 'snowflake',
-}
-
 const engineSpecificAlertMapping = {
   [Engines.GSheet]: {
     message: 'Why do I need to create a database?',
@@ -519,6 +515,18 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     );
   };
 
+  const getPlaceholder = (field: string) => {
+    if (field === 'database') {
+      switch (db?.engine) {
+        case Engines.Snowflake:
+          return t('e.g. xy12345.us-east-2.aws');
+        default:
+          return t('e.g. world_population');
+      }
+    }
+    return undefined;
+  };
+
   const removeFile = (removedFile: UploadFile) => {
     setFileList(fileList.filter(file => file.uid !== removedFile.uid));
     return false;
@@ -1617,6 +1625,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   }
                   getValidation={() => getValidation(db)}
                   validationErrors={validationErrors}
+                  getPlaceholder={getPlaceholder}
                 />
                 <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
                   {dbModel.engine !== Engines.GSheet && (

superset-frontend/src/views/CRUD/data/database/types.ts

@@ -161,3 +161,8 @@ export enum CONFIGURATION_METHOD {
   SQLALCHEMY_URI = 'sqlalchemy_form',
   DYNAMIC_FORM = 'dynamic_form',
 }
+
+export enum Engines {
+  GSheet = 'gsheets',
+  Snowflake = 'snowflake',
+}