mirror of https://github.com/apache/superset.git
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>
This commit is contained in:
parent
7f70de30fb
commit
2389871556
|
@ -35,6 +35,7 @@ export type UiOverrides = Partial<{
|
||||||
'embedded.documentation.description': UiGeneratorText;
|
'embedded.documentation.description': UiGeneratorText;
|
||||||
'embedded.documentation.url': string;
|
'embedded.documentation.url': string;
|
||||||
'navbar.right': React.ComponentType;
|
'navbar.right': React.ComponentType;
|
||||||
|
'welcome.banner': React.ComponentType;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -95,6 +95,10 @@ export const URL_PARAMS = {
|
||||||
name: 'viz_type',
|
name: 'viz_type',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
|
showDatabaseModal: {
|
||||||
|
name: 'show_database_modal',
|
||||||
|
type: 'boolean',
|
||||||
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export const RESERVED_CHART_URL_PARAMS: string[] = [
|
export const RESERVED_CHART_URL_PARAMS: string[] = [
|
||||||
|
|
|
@ -29,6 +29,8 @@ import { createErrorHandler, uploadUserPerms } from 'src/views/CRUD/utils';
|
||||||
import withToasts from 'src/components/MessageToasts/withToasts';
|
import withToasts from 'src/components/MessageToasts/withToasts';
|
||||||
import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
|
import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
|
||||||
import DeleteModal from 'src/components/DeleteModal';
|
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 { Tooltip } from 'src/components/Tooltip';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
|
import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
|
||||||
|
@ -92,12 +94,15 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
|
||||||
const user = useSelector<any, UserWithPermissionsAndRoles>(
|
const user = useSelector<any, UserWithPermissionsAndRoles>(
|
||||||
state => state.user,
|
state => state.user,
|
||||||
);
|
);
|
||||||
|
const showDatabaseModal = getUrlParam(URL_PARAMS.showDatabaseModal);
|
||||||
|
|
||||||
const [query, setQuery] = useQueryParams({
|
const [query, setQuery] = useQueryParams({
|
||||||
databaseAdded: BooleanParam,
|
databaseAdded: BooleanParam,
|
||||||
});
|
});
|
||||||
|
|
||||||
const [databaseModalOpen, setDatabaseModalOpen] = useState<boolean>(false);
|
const [databaseModalOpen, setDatabaseModalOpen] = useState<boolean>(
|
||||||
|
showDatabaseModal || false,
|
||||||
|
);
|
||||||
const [databaseCurrentlyDeleting, setDatabaseCurrentlyDeleting] =
|
const [databaseCurrentlyDeleting, setDatabaseCurrentlyDeleting] =
|
||||||
useState<DatabaseDeleteObject | null>(null);
|
useState<DatabaseDeleteObject | null>(null);
|
||||||
const [currentDatabase, setCurrentDatabase] = useState<DatabaseObject | null>(
|
const [currentDatabase, setCurrentDatabase] = useState<DatabaseObject | null>(
|
||||||
|
|
|
@ -27,6 +27,9 @@ import * as featureFlags from 'src/featureFlags';
|
||||||
import Welcome from 'src/views/CRUD/welcome/Welcome';
|
import Welcome from 'src/views/CRUD/welcome/Welcome';
|
||||||
import { ReactWrapper } from 'enzyme';
|
import { ReactWrapper } from 'enzyme';
|
||||||
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
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 mockStore = configureStore([thunk]);
|
||||||
const store = mockStore({});
|
const store = mockStore({});
|
||||||
|
@ -179,3 +182,23 @@ describe('Welcome page with toggle switch', () => {
|
||||||
expect(wrapper.find('ImageLoader')).not.toExist();
|
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();
|
||||||
|
});
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useEffect, useState } from 'react';
|
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 Collapse from 'src/components/Collapse';
|
||||||
import { User } from 'src/types/bootstrapTypes';
|
import { User } from 'src/types/bootstrapTypes';
|
||||||
import { reject } from 'lodash';
|
import { reject } from 'lodash';
|
||||||
|
@ -46,6 +46,8 @@ import ChartTable from './ChartTable';
|
||||||
import SavedQueries from './SavedQueries';
|
import SavedQueries from './SavedQueries';
|
||||||
import DashboardTable from './DashboardTable';
|
import DashboardTable from './DashboardTable';
|
||||||
|
|
||||||
|
const uiOverrideRegistry = getUiOverrideRegistry();
|
||||||
|
|
||||||
interface WelcomeProps {
|
interface WelcomeProps {
|
||||||
user: User;
|
user: User;
|
||||||
addDangerToast: (arg0: string) => void;
|
addDangerToast: (arg0: string) => void;
|
||||||
|
@ -177,6 +179,8 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
|
||||||
setItem(LocalStorageKeys.homepage_collapse_state, state);
|
setItem(LocalStorageKeys.homepage_collapse_state, state);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const WelcomeTopExtension = uiOverrideRegistry.get('welcome.banner');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
|
const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
|
||||||
setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
|
setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
|
||||||
|
@ -278,6 +282,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
|
||||||
!activityData?.Examples && !activityData?.Viewed;
|
!activityData?.Examples && !activityData?.Viewed;
|
||||||
return (
|
return (
|
||||||
<WelcomeContainer>
|
<WelcomeContainer>
|
||||||
|
{WelcomeTopExtension && <WelcomeTopExtension />}
|
||||||
<WelcomeNav>
|
<WelcomeNav>
|
||||||
<h1 className="welcome-header">Home</h1>
|
<h1 className="welcome-header">Home</h1>
|
||||||
{isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
|
{isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
|
||||||
|
|
Loading…
Reference in New Issue