feat: add extension point to the right side of the menu bar (#20514)

* add setupExtensions

* add 'navbar.right' extension to registry

* add test for navbar.right extension point

* rename MenuRight -> RightMenu

* lint

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

@@ -34,6 +34,7 @@ type UiGeneratorText<P = void> = (props: P) => string | React.ReactElement;
 export type UiOverrides = Partial<{
   'embedded.documentation.description': UiGeneratorText;
   'embedded.documentation.url': string;
+  'navbar.right': React.ComponentType;
 }>;
 
 /**

superset-frontend/src/preamble.ts

@@ -24,6 +24,7 @@ import { configure, makeApi, supersetTheme } from '@superset-ui/core';
 import { merge } from 'lodash';
 import setupClient from './setup/setupClient';
 import setupColors from './setup/setupColors';
+import setupExtensions from './setup/setupExtensions';
 import setupFormatters from './setup/setupFormatters';
 import setupDashboardComponents from './setup/setupDasboardComponents';
 import { BootstrapUser, User } from './types/bootstrapTypes';
@@ -32,6 +33,8 @@ if (process.env.WEBPACK_MODE === 'development') {
   setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
 }
 
+setupExtensions();
+
 // eslint-disable-next-line import/no-mutable-exports
 export let bootstrapData: {
   user?: BootstrapUser;

superset-frontend/src/setup/setupExtensions.ts

@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// For individual deployments to add custom overrides
+export default function setupExtensions() {}

superset-frontend/src/views/components/Menu.test.tsx

@@ -20,7 +20,9 @@ import React from 'react';
 import * as reactRedux from 'react-redux';
 import fetchMock from 'fetch-mock';
 import { render, screen } from 'spec/helpers/testing-library';
+import setupExtensions from 'src/setup/setupExtensions';
 import userEvent from '@testing-library/user-event';
+import { getUiOverrideRegistry } from '@superset-ui/core';
 import { Menu } from './Menu';
 
 const dropdownItems = [
@@ -482,3 +484,19 @@ test('should render without QueryParamProvider', () => {
   render(<Menu {...mockedProps} />, { useRedux: true });
   expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument();
 });
+
+test('should render an extension component if one is supplied', () => {
+  const uiOverrideRegistry = getUiOverrideRegistry();
+
+  uiOverrideRegistry.set('navbar.right', () => (
+    <>navbar.right extension component</>
+  ));
+
+  setupExtensions();
+
+  render(<Menu {...mockedProps} />);
+
+  expect(
+    screen.getByText('navbar.right extension component'),
+  ).toBeInTheDocument();
+});

superset-frontend/src/views/components/Menu.tsx

@@ -28,7 +28,7 @@ import { Link } from 'react-router-dom';
 import Icons from 'src/components/Icons';
 import { useUiConfig } from 'src/components/UiConfigContext';
 import { URL_PARAMS } from 'src/constants';
-import RightMenu from './MenuRight';
+import RightMenu from './RightMenu';
 import { Languages } from './LanguagePicker';
 
 interface BrandProps {

superset-frontend/src/views/components/RightMenu.tsx

@@ -28,6 +28,7 @@ import {
   css,
   SupersetTheme,
   SupersetClient,
+  getUiOverrideRegistry,
 } from '@superset-ui/core';
 import { MainNav as Menu } from 'src/components/Menu';
 import { Tooltip } from 'src/components/Tooltip';
@@ -46,6 +47,8 @@ import {
 } from './types';
 import { MenuObjectProps } from './Menu';
 
+const uiOverrideRegistry = getUiOverrideRegistry();
+
 const versionInfoStyles = (theme: SupersetTheme) => css`
   padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px
     ${theme.gridUnit * 4}px ${theme.gridUnit * 7}px;
@@ -255,6 +258,7 @@ const RightMenu = ({
     }
     return null;
   };
+  const RightMenuExtension = uiOverrideRegistry.get('navbar.right');
 
   const handleDatabaseAdd = () => setQuery({ databaseAdded: true });
 
@@ -274,6 +278,7 @@ const RightMenu = ({
         onClick={handleMenuSelection}
         onOpenChange={onMenuOpen}
       >
+        {RightMenuExtension && <RightMenuExtension />}
         {!navbarRight.user_is_anonymous && showActionDropdown && (
           <SubMenu
             data-test="new-dropdown"