From 2518190b2d2d7f838944e4ebd0c064e1d93a0fb6 Mon Sep 17 00:00:00 2001
From: Daniel Lee <itsdjklee@gmail.com>
Date: Thu, 31 Oct 2024 13:20:16 -0400
Subject: [PATCH] style(databases-upload-form): update Upload Form cosmetics  
 (#30758)

---
 .../databases/UploadDataModel/index.tsx       | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/src/features/databases/UploadDataModel/index.tsx b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
index ec28091e9b028..37f9e6a5e3f62 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
@@ -173,6 +173,12 @@ const allowedExtensionsToAccept = {
   columnar: '.parquet, .zip',
 };
 
+const extensionsToLabel: Record<UploadType, string> = {
+  csv: 'CSV',
+  excel: 'Excel',
+  columnar: 'Columnar',
+};
+
 export const validateUploadFileExtension = (
   file: UploadFile<any>,
   allowedExtensions: string[],
@@ -478,7 +484,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
       headers: { Accept: 'application/json' },
     })
       .then(() => {
-        addSuccessToast(t('Data Imported'));
+        addSuccessToast(t('Data imported'));
         setIsLoading(false);
         onClose();
       })
@@ -565,9 +571,9 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
   };
 
   const uploadTitles = {
-    csv: t('CSV Upload'),
-    excel: t('Excel Upload'),
-    columnar: t('Columnar Upload'),
+    csv: t('CSV upload'),
+    excel: t('Excel upload'),
+    columnar: t('Columnar upload'),
   };
 
   const UploadTitle: FC = () => {
@@ -616,9 +622,11 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
             key="general"
           >
             <Row>
-              <Col span={12}>
+              <Col span={24}>
                 <StyledFormItem
-                  label={t('%(type)s File', { type })}
+                  label={t('%(label)s file', {
+                    label: extensionsToLabel[type],
+                  })}
                   name="file"
                   required
                   rules={[{ validator: validateUpload }]}
@@ -644,7 +652,9 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
                   </Upload>
                 </StyledFormItem>
               </Col>
-              <Col span={12}>
+            </Row>
+            <Row>
+              <Col span={24}>
                 <StyledFormItem>
                   <SwitchContainer
                     label={t('Preview uploaded file')}
@@ -698,7 +708,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
             <Row>
               <Col span={24}>
                 <StyledFormItem
-                  label={t('Table Name')}
+                  label={t('Table name')}
                   name="table_name"
                   required
                   rules={[
@@ -754,7 +764,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
           <Collapse.Panel
             header={
               <div>
-                <h4>{t('File Settings')}</h4>
+                <h4>{t('File settings')}</h4>
                 <p className="helper">
                   {t(
                     'Adjust how spaces, blank lines, null values are handled and other file wide settings.',
@@ -767,7 +777,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
             <Row>
               <Col span={24}>
                 <StyledFormItemWithTip
-                  label={t('If Table Already Exists')}
+                  label={t('If table already exists')}
                   tip={t('What should happen if the table already exists')}
                   name="already_exists"
                 >
@@ -783,7 +793,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
               <Row>
                 <Col span={24}>
                   <StyledFormItem
-                    label={t('Columns To Be Parsed as Dates')}
+                    label={t('Columns to be parsed as dates')}
                     name="column_dates"
                   >
                     <Select
@@ -804,7 +814,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
               <Row>
                 <Col span={24}>
                   <StyledFormItemWithTip
-                    label={t('Decimal Character')}
+                    label={t('Decimal character')}
                     tip={t('Character to interpret as decimal point')}
                     name="decimal_character"
                   >
@@ -890,7 +900,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
             <Row>
               <Col span={24}>
                 <StyledFormItem
-                  label={t('Columns To Read')}
+                  label={t('Columns to read')}
                   name="columns_read"
                 >
                   <Select
@@ -910,7 +920,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
               <Row>
                 <Col span={24}>
                   <StyledFormItemWithTip
-                    label={t('Column Data Types')}
+                    label={t('Column data types')}
                     tip={t(
                       'A dictionary with column names and their data types if you need to change the defaults. Example: {"user_id":"int"}. Check Python\'s Pandas library for supported data types.',
                     )}
@@ -937,7 +947,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
                 <Row>
                   <Col span={24}>
                     <StyledFormItemWithTip
-                      label={t('Index Column')}
+                      label={t('Index column')}
                       tip={t(
                         'Column to use as the index of the dataframe. If None is given, Index label is used.',
                       )}
@@ -960,7 +970,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
               <Row>
                 <Col span={24}>
                   <StyledFormItemWithTip
-                    label={t('Index Label')}
+                    label={t('Index label')}
                     tip={t(
                       "Label for the index column. Don't use an existing column name.",
                     )}
@@ -991,7 +1001,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
                 <Row>
                   <Col span={8}>
                     <StyledFormItemWithTip
-                      label={t('Header Row')}
+                      label={t('Header row')}
                       tip={t(
                         'Row containing the headers to use as column names (0 is first line of data).',
                       )}
@@ -1009,7 +1019,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
                   </Col>
                   <Col span={8}>
                     <StyledFormItemWithTip
-                      label={t('Rows to Read')}
+                      label={t('Rows to read')}
                       tip={t(
                         'Number of rows of file to read. Leave empty (default) to read all rows',
                       )}
@@ -1020,7 +1030,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
                   </Col>
                   <Col span={8}>
                     <StyledFormItemWithTip
-                      label={t('Skip Rows')}
+                      label={t('Skip rows')}
                       tip={t('Number of rows to skip at start of file.')}
                       name="skip_rows"
                       rules={[