feat: improve UI overrides

CONTRIBUTING.md

@@ -1304,6 +1304,56 @@ The following configuration settings are available for async queries (see config
 
 More information on the async query feature can be found in [SIP-39](https://github.com/apache/superset/issues/9190).
 
+## UI Overrides
+For whatever reason, people may want to customize any area of the
+frontend. Some common use cases:
+
+* Alter the nav (menu) bar, adding or removing items
+* Inject a "well" or info bubble
+* Point to internal, more specific documentation instead of the Superset docs
+* Altering a modal
+* Replace a page
+* ...
+
+How to add an injection point / overridable section in the existing code?
+
+### Before
+```jsx
+<div>
+  <Button>Override Me!</Button>
+</div>
+```
+
+### After
+```jsx
+import UiOverride from 'src/components/UiOverride';
+
+<div>
+  <UiOverride
+    name="navbar.rightSection.leftOf"
+    default={
+      <Button>Override Me!</Button>
+    }
+  />
+</div>
+```
+
+How to define your overrides in your repo/environment?
+
+`superset-frontend/src/setup/setupUiOverrides.ts`
+```js
+import { getUiOverrideRegistry } from '@superset-ui/core';
+import UpgradeButton from './upgradeButton';
+
+const uiOverrideRegistry = getUiOverrideRegistry();
+export default function setupUiOverrides() {
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+  // Call `uiOverrideRegistry.set` to override things in your environment
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+  uiOverrideRegistry.set('navbar.rightSection.leftOf', UpgradeButton);
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+}
+```
 ## Chart Parameters
 
 Chart parameters are stored as a JSON encoded string the `slices.params` column and are often referenced throughout the code as form-data. Currently the form-data is neither versioned nor typed as thus is somewhat free-formed. Note in the future there may be merit in using something like [JSON Schema](https://json-schema.org/) to both annotate and validate the JSON object in addition to using a Mypy `TypedDict` (introduced in Python 3.8) for typing the form-data in the backend. This section serves as a potential primer for that work.

superset-frontend/src/components/UiOverride/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+import React from 'react';
+
+import { getUiOverrideRegistry } from '@superset-ui/core';
+
+const uiOverrideRegistry = getUiOverrideRegistry();
+
+export interface uiOverrideProps {
+  name: string;
+  default?: null;
+}
+export default function UIOverride(props: uiOverrideProps) {
+  const val = uiOverrideRegistry.get(props.name) || props.default;
+  return val;
+}

superset-frontend/src/preamble.ts

@@ -27,6 +27,7 @@ import setupColors from './setup/setupColors';
 import setupFormatters from './setup/setupFormatters';
 import setupDashboardComponents from './setup/setupDasboardComponents';
 import { BootstrapUser, User } from './types/bootstrapTypes';
+import setupUiOverrides from 'src/setup/setupUiOverrides';
 
 if (process.env.WEBPACK_MODE === 'development') {
   setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
@@ -96,3 +97,5 @@ if (bootstrapData.user?.isActive) {
     });
   });
 }
+
+setupUiOverrides();

superset-frontend/src/setup/setupUiOverrides.ts

@@ -0,0 +1,32 @@
+/**
+ * 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
+
+import { getUiOverrideRegistry } from '@superset-ui/core';
+import UpgradeButton from './upgradeButton';
+
+const uiOverrideRegistry = getUiOverrideRegistry();
+export default function setupUiOverrides() {
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+  // Call `uiOverrideRegistry.set` to override things in your environment
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+  uiOverrideRegistry.set('navbar.rightSection.leftOf', UpgradeButton);
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+}

superset-frontend/src/setup/upgradeButton.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import Button from 'src/components/Button';
+
+const btn = <Button buttonStyle="secondary">⚡ Upgrade! ⚡</Button>;
+export default btn;

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

@@ -25,10 +25,12 @@ import {
   css,
   SupersetTheme,
   SupersetClient,
+  getUiOverrideRegistry,
 } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import { Link } from 'react-router-dom';
 import Icons from 'src/components/Icons';
+import UiOverride from 'src/components/UiOverride';
 import findPermission, { isUserAdmin } from 'src/dashboard/util/findPermission';
 import { useSelector } from 'react-redux';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
@@ -246,6 +248,13 @@ const RightMenu = ({
 
   return (
     <StyledDiv align={align}>
+      <UiOverride
+        name="navbar.rightSection.leftOf"
+        default={
+          // This is where the default behavior would be defined, if any
+          <></>
+        }
+      />
       {canDatabase && (
         <DatabaseModal
           onHide={handleOnHideModal}