limit db extra extension to one element

apache · Apr 26, 2023 · 79eed09 · 79eed09
1 parent 0038a6a
commit 79eed09
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 187 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts
@@ -69,7 +69,7 @@ type RightMenuItemIconProps = {
 /**
  * Interface for extensions to database connections
  */
-interface DatabaseConnectionExtension {
+export interface DatabaseConnectionExtension {
   /**
    * Display title text for the extension show when creating a database connection
    */
@@ -90,6 +90,17 @@ interface DatabaseConnectionExtension {
    * Is the database extension enabled?
    */
   enabled: () => boolean;
+
+  /**
+   * Callback for onsave
+   */
+  // TODO: we need to move the db types to superset-ui/core in order to import them correctly
+  onSave: (componentState: any, db: any) => void;
+
+  /**
+   * Used for parent to store data
+   */
+  onEdit?: (componentState: any) => void;
 }
 
 export type Extensions = Partial<{
@@ -106,7 +117,7 @@ export type Extensions = Partial<{
   'welcome.banner': React.ComponentType;
   'welcome.main.replacement': React.ComponentType;
   'ssh_tunnel.form.switch': React.ComponentType<SwitchProps>;
-  'databaseconnection.extensions': DatabaseConnectionExtension[];
+  'databaseconnection.extraOption': DatabaseConnectionExtension;
 }>;
 
 /**

diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -31,11 +31,14 @@ const propTypes = {
   disabled: PropTypes.bool,
   freeForm: PropTypes.bool,
   isLoading: PropTypes.bool,
+  mode: PropTypes.string,
   multi: PropTypes.bool,
   isMulti: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
+  onSelect: PropTypes.func,
+  onDeselect: PropTypes.func,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -174,12 +177,14 @@ export default class SelectControl extends React.PureComponent {
       label,
       multi,
       name,
-      placeholder,
+      notFoundContent,
       onFocus,
+      onSelect,
+      onDeselect,
+      placeholder,
       showHeader,
-      value,
       tokenSeparators,
-      notFoundContent,
+      value,
       // ControlHeader props
       description,
       renderTrigger,
@@ -236,10 +241,12 @@ export default class SelectControl extends React.PureComponent {
           : true,
       header: showHeader && <ControlHeader {...headerProps} />,
       loading: isLoading,
-      mode: isMulti || multi ? 'multiple' : 'single',
+      mode: this.props.mode || (isMulti || multi ? 'multiple' : 'single'),
       name: `select-${name}`,
       onChange: this.onChange,
       onFocus,
+      onSelect,
+      onDeselect,
       options: this.state.options,
       placeholder,
       sortComparator: this.props.sortComparator,

diff --git a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
@@ -16,9 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ChangeEvent, EventHandler, FunctionComponent } from 'react';
+import React, { ChangeEvent, EventHandler } from 'react';
 import cx from 'classnames';
-import { t, SupersetTheme, getExtensionsRegistry } from '@superset-ui/core';
+import {
+  t,
+  SupersetTheme,
+  DatabaseConnectionExtension,
+} from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 import Collapse from 'src/components/Collapse';
@@ -31,31 +35,22 @@ import {
 } from './styles';
 import { DatabaseObject, ExtraJson } from '../types';
 
-const extensionsRegistry = getExtensionsRegistry();
-export interface IExtensionProps {
-  db?: DatabaseObject | null;
-  registerPostProcess: Function;
-  unregisterPostProcess: Function;
-}
-
 const ExtraOptions = ({
   db,
   onInputChange,
   onTextChange,
   onEditorChange,
   onExtraInputChange,
   onExtraEditorChange,
-  registerPostProcess,
-  unregisterPostProcess,
+  extraExtension,
 }: {
   db: DatabaseObject | null;
   onInputChange: EventHandler<ChangeEvent<HTMLInputElement>>;
   onTextChange: EventHandler<ChangeEvent<HTMLTextAreaElement>>;
   onEditorChange: Function;
   onExtraInputChange: EventHandler<ChangeEvent<HTMLInputElement>>;
   onExtraEditorChange: Function;
-  registerPostProcess: Function;
-  unregisterPostProcess: Function;
+  extraExtension: DatabaseConnectionExtension | undefined;
 }) => {
   const expandableModalIsOpen = !!db?.expose_in_sqllab;
   const createAsOpen = !!(db?.allow_ctas || db?.allow_cvas);
@@ -72,15 +67,9 @@ const ExtraOptions = ({
     return value;
   });
 
-  const extensionProps: IExtensionProps = {
-    db,
-    registerPostProcess,
-    unregisterPostProcess,
-  };
-
-  const dbConfigExtensions = extensionsRegistry.get(
-    'databaseconnection.extensions',
-  );
+  const ExtraExtensionComponent = extraExtension?.component;
+  const ExtraExtensionLogo = extraExtension?.logo;
+  const ExtensionDescription = extraExtension?.description;
 
   return (
     <Collapse
@@ -458,37 +447,32 @@ const ExtraOptions = ({
           </StyledInputContainer>
         )}
       </Collapse.Panel>
-      {dbConfigExtensions?.map?.(extension => {
-        const Extension =
-          extension.component as FunctionComponent<IExtensionProps>;
-        let header;
-        if (extension.logo) {
-          const ExtensionLogo = extension.logo as FunctionComponent;
-          header = <ExtensionLogo />;
-        } else {
-          header = <h4>{extension?.title}</h4>;
-        }
-        const ExtensionDescription = extension.description as FunctionComponent;
-
-        return (
-          <Collapse.Panel
-            header={
-              <div>
-                {header}
-                <p className="helper">
-                  <ExtensionDescription />
-                </p>
-              </div>
-            }
-            key={extension?.title}
-            collapsible={extension.enabled() ? 'header' : 'disabled'}
-          >
-            <StyledInputContainer css={no_margin_bottom}>
-              <Extension {...extensionProps} />
-            </StyledInputContainer>
-          </Collapse.Panel>
-        );
-      })}
+      {extraExtension && ExtraExtensionComponent && ExtensionDescription && (
+        <Collapse.Panel
+          header={
+            <div>
+              {ExtraExtensionLogo && <ExtraExtensionLogo />}
+              <span
+                css={(theme: SupersetTheme) => ({
+                  fontSize: theme.typography.sizes.l,
+                  fontWeight: theme.typography.weights.bold,
+                })}
+              >
+                {extraExtension?.title}
+              </span>
+              <p className="helper">
+                <ExtensionDescription />
+              </p>
+            </div>
+          }
+          key={extraExtension?.title}
+          collapsible={extraExtension.enabled?.() ? 'header' : 'disabled'}
+        >
+          <StyledInputContainer css={no_margin_bottom}>
+            <ExtraExtensionComponent db={db} onEdit={extraExtension.onEdit} />
+          </StyledInputContainer>
+        </Collapse.Panel>
+      )}
       <Collapse.Panel
         header={
           <div>