From 4e2bdd49c4f23ace04ccde652fc6dfc8a4a24b0d Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 7 Feb 2022 12:45:42 -0800
Subject: [PATCH] chore: allow sqla docs to use supersettext (#18585)

* chore: allow sqla docs to use supersettext

* Update SqlAlchemyForm.tsx
---
 .../database/DatabaseModal/SqlAlchemyForm.tsx | 136 ++++++++++--------
 1 file changed, 73 insertions(+), 63 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
index a48cea33e4132..7226efdcb4b37 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -18,6 +18,7 @@
  */
 import React, { EventHandler, ChangeEvent, MouseEvent } from 'react';
 import { t, SupersetTheme } from '@superset-ui/core';
+import SupersetText from 'src/utils/textUtils';
 import Button from 'src/components/Button';
 import { StyledInputContainer, wideButton } from './styles';
 
@@ -37,67 +38,76 @@ const SqlAlchemyTab = ({
   conf: { SQLALCHEMY_DOCS_URL: string; SQLALCHEMY_DISPLAY_TEXT: string };
   isEditMode?: boolean;
   testInProgress?: boolean;
-}) => (
-  <>
-    <StyledInputContainer>
-      <div className="control-label">
-        {t('Display Name')}
-        <span className="required">*</span>
-      </div>
-      <div className="input-container">
-        <input
-          type="text"
-          name="database_name"
-          data-test="database-name-input"
-          value={db?.database_name || ''}
-          placeholder={t('Name your database')}
-          onChange={onInputChange}
-        />
-      </div>
-      <div className="helper">
-        {t('Pick a name to help you identify this database.')}
-      </div>
-    </StyledInputContainer>
-    <StyledInputContainer>
-      <div className="control-label">
-        {t('SQLAlchemy URI')}
-        <span className="required">*</span>
-      </div>
-      <div className="input-container">
-        <input
-          type="text"
-          name="sqlalchemy_uri"
-          data-test="sqlalchemy-uri-input"
-          value={db?.sqlalchemy_uri || ''}
-          autoComplete="off"
-          placeholder={t(
-            'dialect+driver://username:password@host:port/database',
-          )}
-          onChange={onInputChange}
-        />
-      </div>
-      <div className="helper">
-        {t('Refer to the')}{' '}
-        <a
-          href={conf?.SQLALCHEMY_DOCS_URL ?? ''}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {conf?.SQLALCHEMY_DISPLAY_TEXT ?? ''}
-        </a>{' '}
-        {t('for more information on how to structure your URI.')}
-      </div>
-    </StyledInputContainer>
-    <Button
-      onClick={testConnection}
-      disabled={testInProgress}
-      cta
-      buttonStyle="link"
-      css={(theme: SupersetTheme) => wideButton(theme)}
-    >
-      {t('Test connection')}
-    </Button>
-  </>
-);
-
+}) => {
+  let fallbackDocsUrl;
+  let fallbackDisplayText;
+  if (SupersetText) {
+    fallbackDocsUrl =
+      SupersetText.DB_MODAL_SQLALCHEMY_FORM?.SQLALCHEMY_DOCS_URL;
+    fallbackDisplayText =
+      SupersetText.DB_MODAL_SQLALCHEMY_FORM?.SQLALCHEMY_DOCS_URL;
+  }
+  return (
+    <>
+      <StyledInputContainer>
+        <div className="control-label">
+          {t('Display Name')}
+          <span className="required">*</span>
+        </div>
+        <div className="input-container">
+          <input
+            type="text"
+            name="database_name"
+            data-test="database-name-input"
+            value={db?.database_name || ''}
+            placeholder={t('Name your database')}
+            onChange={onInputChange}
+          />
+        </div>
+        <div className="helper">
+          {t('Pick a name to help you identify this database.')}
+        </div>
+      </StyledInputContainer>
+      <StyledInputContainer>
+        <div className="control-label">
+          {t('SQLAlchemy URI')}
+          <span className="required">*</span>
+        </div>
+        <div className="input-container">
+          <input
+            type="text"
+            name="sqlalchemy_uri"
+            data-test="sqlalchemy-uri-input"
+            value={db?.sqlalchemy_uri || ''}
+            autoComplete="off"
+            placeholder={t(
+              'dialect+driver://username:password@host:port/database',
+            )}
+            onChange={onInputChange}
+          />
+        </div>
+        <div className="helper">
+          {t('Refer to the')}{' '}
+          <a
+            href={fallbackDocsUrl || conf?.SQLALCHEMY_DOCS_URL || ''}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {fallbackDisplayText || conf?.SQLALCHEMY_DISPLAY_TEXT || ''}
+          </a>{' '}
+          {t('for more information on how to structure your URI.')}
+        </div>
+      </StyledInputContainer>
+      <Button
+        onClick={testConnection}
+        disabled={testInProgress}
+        cta
+        buttonStyle="link"
+        css={(theme: SupersetTheme) => wideButton(theme)}
+      >
+        {t('Test connection')}
+      </Button>
+    </>
+  );
+};
 export default SqlAlchemyTab;