chore: Add an extension for Home submenu (#27480)

superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { ReactNode, MouseEventHandler } from 'react';
 
 /**
  * A function which returns text (or marked-up text)
@@ -144,6 +144,26 @@ export interface DashboardEmbedModalExtensions {
   onHide: () => void;
 }
 
+export interface ButtonProps {
+  name: ReactNode;
+  onClick?: MouseEventHandler<HTMLElement>;
+  'data-test'?: string;
+  buttonStyle:
+    | 'primary'
+    | 'secondary'
+    | 'dashed'
+    | 'link'
+    | 'warning'
+    | 'success'
+    | 'tertiary';
+}
+
+export interface SubMenuProps {
+  buttons?: Array<ButtonProps>;
+  name?: string | ReactNode;
+  activeChild?: string;
+}
+
 export type Extensions = Partial<{
   'alertsreports.header.icon': React.ComponentType;
   'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
@@ -151,6 +171,7 @@ export type Extensions = Partial<{
   'embedded.documentation.url': string;
   'embedded.modal': React.ComponentType<DashboardEmbedModalExtensions>;
   'dashboard.nav.right': React.ComponentType;
+  'home.submenu': React.ComponentType<SubMenuProps>;
   'navbar.right-menu.item.icon': React.ComponentType<RightMenuItemIconProps>;
   'navbar.right': React.ComponentType;
   'report-modal.dropdown.item.icon': React.ComponentType;

superset-frontend/src/pages/Home/Home.test.tsx

@@ -255,3 +255,19 @@ test('should render an extension component if one is supplied', () => {
     screen.getByText('welcome.banner extension component'),
   ).toBeInTheDocument();
 });
+
+test('should render a submenu extension component if one is supplied', () => {
+  const extensionsRegistry = getExtensionsRegistry();
+
+  extensionsRegistry.set('home.submenu', () => <>submenu extension</>);
+
+  setupExtensions();
+
+  render(
+    <Provider store={store}>
+      <Welcome {...mockedProps} />
+    </Provider>,
+  );
+
+  expect(screen.getByText('submenu extension')).toBeInTheDocument();
+});

superset-frontend/src/pages/Home/index.tsx

@@ -186,6 +186,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
     setItem(LocalStorageKeys.HomepageCollapseState, state);
   };
 
+  const SubmenuExtension = extensionsRegistry.get('home.submenu');
   const WelcomeMessageExtension = extensionsRegistry.get('welcome.message');
   const WelcomeTopExtension = extensionsRegistry.get('welcome.banner');
   const WelcomeMainExtension = extensionsRegistry.get(
@@ -352,7 +353,11 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
 
   return (
     <>
-      <SubMenu {...menuData} />
+      {SubmenuExtension ? (
+        <SubmenuExtension {...menuData} />
+      ) : (
+        <SubMenu {...menuData} />
+      )}
       <WelcomeContainer>
         {WelcomeMessageExtension && <WelcomeMessageExtension />}
         {WelcomeTopExtension && <WelcomeTopExtension />}