Add embedded docs config details to extensions registry (#21052)

apache · Aug 12, 2022 · 394d62e · 394d62e
1 parent 5113b01
commit 394d62e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 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
@@ -35,7 +35,12 @@ type ReturningDisplayable<P = void> = (props: P) => string | React.ReactElement;
  * When defining a new option here, take care to keep any parameters to functions (or components) minimal.
  * Any removal or alteration to a parameter will be considered a breaking change.
  */
+type ConfigDetailsProps = {
+  embeddedId: string;
+};
+
 export type Extensions = Partial<{
+  'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
   'embedded.documentation.description': ReturningDisplayable;
   'embedded.documentation.url': string;
   'dashboard.nav.right': React.ComponentType;

diff --git a/superset-frontend/src/dashboard/components/DashboardEmbedControls.tsx b/superset-frontend/src/dashboard/components/DashboardEmbedControls.tsx
@@ -148,6 +148,9 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
     return <Loading />;
   }
 
+  const DocsConfigDetails = extensionsRegistry.get(
+    'embedded.documentation.configuration_details',
+  );
   const docsDescription = extensionsRegistry.get(
     'embedded.documentation.description',
   );
@@ -157,21 +160,25 @@ export const DashboardEmbedControls = ({ dashboardId, onHide }: Props) => {
 
   return (
     <>
-      <p>
-        {embedded ? (
-          <>
+      {embedded ? (
+        DocsConfigDetails ? (
+          <DocsConfigDetails embeddedId={embedded.uuid} />
+        ) : (
+          <p>
             {t(
               'This dashboard is ready to embed. In your application, pass the following id to the SDK:',
             )}
             <br />
             <code>{embedded.uuid}</code>
-          </>
-        ) : (
-          t(
+          </p>
+        )
+      ) : (
+        <p>
+          {t(
             'Configure this dashboard to embed it into an external web application.',
-          )
-        )}
-      </p>
+          )}
+        </p>
+      )}
       <p>
         {t('For further instructions, consult the')}{' '}
         <a href={docsUrl} target="_blank" rel="noreferrer">