Skip to content

Commit

Permalink
update ui configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
Lily Kuang committed Nov 8, 2021
1 parent ad23ee6 commit a55537d
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 38 deletions.
6 changes: 3 additions & 3 deletions superset-frontend/src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import Icons from 'src/components/Icons';
import { URL_PARAMS } from 'src/constants';
import RightMenu from './MenuRight';
import { Languages } from './LanguagePicker';
import { useEmbedded } from '../Emmbedded';
import { useUiConfig } from '../UiConfigContext';

interface BrandProps {
path: string;
Expand Down Expand Up @@ -178,7 +178,7 @@ export function Menu({
}: MenuProps) {
const [showMenu, setMenu] = useState<MenuMode>('horizontal');
const screens = useBreakpoint();
const embedded = useEmbedded();
const uiConig = useUiConfig();

useEffect(() => {
function handleResize() {
Expand All @@ -193,7 +193,7 @@ export function Menu({
}, []);

const standalone = getUrlParam(URL_PARAMS.standalone);
if (standalone || embedded.hideNav) return <></>;
if (standalone || uiConig.hideNav) return <></>;

const renderSubMenu = ({
label,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,41 +17,42 @@
* under the License.
*/
import React, { createContext, useContext, useState } from 'react';
import { URL_PARAMS } from 'src/constants';
import { getUrlParam } from 'src/utils/urlUtils';

interface EmbeddedConfigType {
interface UiConfigType {
hideTitle: boolean;
hideTab: boolean;
hideNav: boolean;
hideChartFilter: boolean;
hideChartControls: boolean;
}
interface EmbeddedProviderProps {
interface EmbeddedUiConfigProviderProps {
children: JSX.Element;
config: number;
}

export const EmbeddedContext = createContext<EmbeddedConfigType>({
export const UiConfigContext = createContext<UiConfigType>({
hideTitle: false,
hideTab: false,
hideNav: false,
hideChartFilter: false,
hideChartControls: false,
});

export const useEmbedded = () => useContext(EmbeddedContext);
export const useUiConfig = () => useContext(UiConfigContext);

export const EmbeddedProvider: React.FC<EmbeddedProviderProps> = ({
export const EmbeddedUiConfigProvider: React.FC<EmbeddedUiConfigProviderProps> = ({
children,
config,
}) => {
const formattedConfig = (config >>> 0).toString(2);
const config = getUrlParam(URL_PARAMS.uiConfig);
const [embeddedConfig] = useState({
hideTitle: formattedConfig[0] === '1',
hideTab: formattedConfig[1] === '1',
hideNav: formattedConfig[2] === '1',
hideChartFilter: formattedConfig[3] === '1',
hideTitle: (config & 1) !== 0,
hideTab: (config & 2) !== 0,
hideNav: (config & 4) !== 0,
hideChartControls: (config & 8) !== 0,
});

return (
<EmbeddedContext.Provider value={embeddedConfig}>
<UiConfigContext.Provider value={embeddedConfig}>
{children}
</EmbeddedContext.Provider>
</UiConfigContext.Provider>
);
};
4 changes: 2 additions & 2 deletions superset-frontend/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ export const URL_PARAMS = {
name: 'standalone',
type: 'number',
},
embedded: {
name: 'embedded',
uiConfig: {
name: 'uiConfig',
type: 'number',
},
preselectFilters: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import {
import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
import Loading from 'src/components/Loading';
import { Global } from '@emotion/react';
import { useEmbedded } from 'src/components/Emmbedded';
import { useUiConfig } from 'src/components/UiConfigContext';
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
import DashboardContainer from './DashboardContainer';
import { useNativeFilters } from './state';
Expand Down Expand Up @@ -200,7 +200,7 @@ const StyledDashboardContent = styled.div<{

const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const dispatch = useDispatch();
const embedded = useEmbedded();
const uiConfig = useUiConfig();

const dashboardLayout = useSelector<RootState, DashboardLayout>(
state => state.dashboardLayout.present,
Expand Down Expand Up @@ -246,8 +246,8 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const standaloneMode = getUrlParam(URL_PARAMS.standalone);
const isReport = standaloneMode === DashboardStandaloneMode.REPORT;
const hideDashboardHeader =
embedded.hideTitle ||
StandaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
uiConfig.hideTitle ||
standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
isReport;

const barTopOffset =
Expand Down Expand Up @@ -293,7 +293,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
<div>
{!hideDashboardHeader && <DashboardHeader />}
{dropIndicatorProps && <div {...dropIndicatorProps} />}
{!isReport && topLevelTabs && embedded.hideNav && (
{!isReport && topLevelTabs && uiConfig.hideNav && (
<WithPopoverMenu
shouldFocus={shouldFocusTabs}
menuItems={[
Expand Down Expand Up @@ -326,7 +326,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
hideDashboardHeader,
isReport,
topLevelTabs,
embedded.hideNav,
uiConfig.hideNav,
],
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/
import React, { FC, useMemo } from 'react';
import { styled, t } from '@superset-ui/core';
import { useEmbedded } from 'src/components/Emmbedded';
import { useUiConfig } from 'src/components/UiConfigContext';
import { Tooltip } from 'src/components/Tooltip';
import { useDispatch, useSelector } from 'react-redux';
import EditableTitle from 'src/components/EditableTitle';
Expand Down Expand Up @@ -84,7 +84,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
formData,
}) => {
const dispatch = useDispatch();
const embedded = useEmbedded();
const uiConfig = useUiConfig();
// TODO: change to indicator field after it will be implemented
const crossFilterValue = useSelector<RootState, any>(
state => state.dataMask[slice?.slice_id]?.filterState?.value,
Expand Down Expand Up @@ -158,10 +158,10 @@ const SliceHeader: FC<SliceHeaderProps> = ({
/>
</Tooltip>
)}
{!embedded.hideChartFilter && (
{!uiConfig.hideChartControls && (
<FiltersBadge chartId={slice.slice_id} />
)}
{!embedded.hideChartFilter && (
{!uiConfig.hideChartControls && (
<SliceHeaderControls
slice={slice}
isCached={isCached}
Expand Down
10 changes: 3 additions & 7 deletions superset-frontend/src/views/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@ import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { QueryParamProvider } from 'use-query-params';
import { initFeatureFlags } from 'src/featureFlags';
import { URL_PARAMS } from 'src/constants';
import { ThemeProvider } from '@superset-ui/core';
import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
import { EmbeddedProvider } from 'src/components/Emmbedded';
import { getUrlParam } from 'src/utils/urlUtils';
import { EmbeddedUiConfigProvider } from 'src/components/UiConfigContext';
import ErrorBoundary from 'src/components/ErrorBoundary';
import Loading from 'src/components/Loading';
import Menu from 'src/components/Menu/Menu';
Expand Down Expand Up @@ -66,14 +64,12 @@ const RootContextProviders: React.FC = ({ children }) => {
lastLocationPathname = location.pathname;
}, [location.pathname]);

const config = getUrlParam(URL_PARAMS.embedded);

return (
<ThemeProvider theme={theme}>
<ReduxProvider store={store}>
<DndProvider backend={HTML5Backend}>
<FlashProvider messages={common.flash_messages}>
<EmbeddedProvider config={config}>
<EmbeddedUiConfigProvider>
<DynamicPluginProvider>
<QueryParamProvider
ReactRouterRoute={Route}
Expand All @@ -82,7 +78,7 @@ const RootContextProviders: React.FC = ({ children }) => {
{children}
</QueryParamProvider>
</DynamicPluginProvider>
</EmbeddedProvider>
</EmbeddedUiConfigProvider>
</FlashProvider>
</DndProvider>
</ReduxProvider>
Expand Down

0 comments on commit a55537d

Please sign in to comment.