feat: add extension point to the top of welcome page (#20575)

* welcome top extension

* show database modal

* add test

* Delete lines.svg

* rename to banner

* remove lines

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

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

@@ -35,6 +35,7 @@ export type UiOverrides = Partial<{
   'embedded.documentation.description': UiGeneratorText;
   'embedded.documentation.url': string;
   'navbar.right': React.ComponentType;
+  'welcome.banner': React.ComponentType;
 }>;
 
 /**

superset-frontend/src/constants.ts

@@ -95,6 +95,10 @@ export const URL_PARAMS = {
     name: 'viz_type',
     type: 'string',
   },
+  showDatabaseModal: {
+    name: 'show_database_modal',
+    type: 'boolean',
+  },
 } as const;
 
 export const RESERVED_CHART_URL_PARAMS: string[] = [

superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx

@@ -29,6 +29,8 @@ import { createErrorHandler, uploadUserPerms } from 'src/views/CRUD/utils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
 import DeleteModal from 'src/components/DeleteModal';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
@@ -92,12 +94,15 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const user = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
   );
+  const showDatabaseModal = getUrlParam(URL_PARAMS.showDatabaseModal);
 
   const [query, setQuery] = useQueryParams({
     databaseAdded: BooleanParam,
   });
 
-  const [databaseModalOpen, setDatabaseModalOpen] = useState<boolean>(false);
+  const [databaseModalOpen, setDatabaseModalOpen] = useState<boolean>(
+    showDatabaseModal || false,
+  );
   const [databaseCurrentlyDeleting, setDatabaseCurrentlyDeleting] =
     useState<DatabaseDeleteObject | null>(null);
   const [currentDatabase, setCurrentDatabase] = useState<DatabaseObject | null>(

superset-frontend/src/views/CRUD/welcome/Welcome.test.tsx

@@ -27,6 +27,9 @@ import * as featureFlags from 'src/featureFlags';
 import Welcome from 'src/views/CRUD/welcome/Welcome';
 import { ReactWrapper } from 'enzyme';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import { render, screen } from 'spec/helpers/testing-library';
+import { getUiOverrideRegistry } from '@superset-ui/core';
+import setupExtensions from 'src/setup/setupExtensions';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -179,3 +182,23 @@ describe('Welcome page with toggle switch', () => {
     expect(wrapper.find('ImageLoader')).not.toExist();
   });
 });
+
+test('should render an extension component if one is supplied', () => {
+  const uiOverrideRegistry = getUiOverrideRegistry();
+
+  uiOverrideRegistry.set('welcome.banner', () => (
+    <>welcome.banner extension component</>
+  ));
+
+  setupExtensions();
+
+  render(
+    <Provider store={store}>
+      <Welcome {...mockedProps} />
+    </Provider>,
+  );
+
+  expect(
+    screen.getByText('welcome.banner extension component'),
+  ).toBeInTheDocument();
+});

superset-frontend/src/views/CRUD/welcome/Welcome.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, getUiOverrideRegistry } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
 import { User } from 'src/types/bootstrapTypes';
 import { reject } from 'lodash';
@@ -46,6 +46,8 @@ import ChartTable from './ChartTable';
 import SavedQueries from './SavedQueries';
 import DashboardTable from './DashboardTable';
 
+const uiOverrideRegistry = getUiOverrideRegistry();
+
 interface WelcomeProps {
   user: User;
   addDangerToast: (arg0: string) => void;
@@ -177,6 +179,8 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
     setItem(LocalStorageKeys.homepage_collapse_state, state);
   };
 
+  const WelcomeTopExtension = uiOverrideRegistry.get('welcome.banner');
+
   useEffect(() => {
     const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
     setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
@@ -278,6 +282,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
     !activityData?.Examples && !activityData?.Viewed;
   return (
     <WelcomeContainer>
+      {WelcomeTopExtension && <WelcomeTopExtension />}
       <WelcomeNav>
         <h1 className="welcome-header">Home</h1>
         {isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (