feat: Move SQLAlchemy url reference to config (#13182)

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseList_spec.jsx

@@ -57,6 +57,11 @@ const mockdatabases = [...new Array(3)].map((_, i) => ({
   id: i,
 }));
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
 const mockUser = {
   userId: 1,
 };

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx

@@ -43,6 +43,11 @@ const dbProps = {
   },
 };
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
 const DATABASE_ENDPOINT = 'glob:*/api/v1/database/*';
 
 fetchMock.get(DATABASE_ENDPOINT, {});

superset-frontend/src/views/App.tsx

@@ -51,6 +51,7 @@ initFeatureFlags(bootstrap.common.feature_flags);
 const store = createStore(
   combineReducers({
     messageToasts: messageToastReducer,
+    common: () => common,
   }),
   {},
   compose(applyMiddleware(thunk), initEnhancer(false)),

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

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { styled, t, SupersetClient } from '@superset-ui/core';
 import InfoTooltip from 'src/common/components/InfoTooltip';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
@@ -39,8 +40,17 @@ interface DatabaseModalProps {
   database?: DatabaseObject | null; // If included, will go into edit mode
 }
 
-const DEFAULT_TAB_KEY = '1';
+// todo: define common type fully in types file
+interface RootState {
+  common: {
+    conf: {
+      SQLALCHEMY_DOCS_URL: string;
+    };
+  };
+  messageToast: Array<Object>;
+}
 
+const DEFAULT_TAB_KEY = '1';
 const StyledIcon = styled(Icon)`
   margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
 `;
@@ -132,6 +142,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
   const [tabKey, setTabKey] = useState<string>(DEFAULT_TAB_KEY);
+  const conf = useSelector((state: RootState) => state.common.conf);
 
   const isEditMode = database !== null;
   const defaultExtra =
@@ -402,7 +413,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="helper">
               {t('Refer to the ')}
               <a
-                href="https://docs.sqlalchemy.org/en/rel_1_2/core/engines.html#"
+                href={conf?.SQLALCHEMY_DOCS_URL ?? ''}
                 target="_blank"
                 rel="noopener noreferrer"
               >

superset/config.py

@@ -1093,6 +1093,9 @@ GLOBAL_ASYNC_QUERIES_POLLING_DELAY = 500
 # It will get executed each time when user open a chart's explore view.
 DATASET_HEALTH_CHECK = None
 
+# SQLalchemy link doc reference
+SQLALCHEMY_DOCS_URL = "https://docs.sqlalchemy.org/en/13/core/engines.html"
+
 # -------------------------------------------------------------------
 # *                WARNING:  STOP EDITING  HERE                    *
 # -------------------------------------------------------------------

superset/views/base.py

@@ -80,6 +80,7 @@ FRONTEND_CONF_KEYS = (
     "DISPLAY_MAX_ROW",
     "GLOBAL_ASYNC_QUERIES_TRANSPORT",
     "GLOBAL_ASYNC_QUERIES_POLLING_DELAY",
+    "SQLALCHEMY_DOCS_URL",
 )
 logger = logging.getLogger(__name__)