Skip to content

Commit

Permalink
added hide content when there is no access on Dashboard and Chart pages
Browse files Browse the repository at this point in the history
  • Loading branch information
etokiryau committed Nov 29, 2024
1 parent 675539c commit 0886de0
Show file tree
Hide file tree
Showing 19 changed files with 290 additions and 99 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,20 @@ export const formAccessOptionLabel = (
option: Omit<AccessOption, 'permission'>,
): string => {
if (isUserAccess(option)) {
const teams = option.teams.map(item => item.name).join(', ');
return `${option.first_name} ${option.last_name} ${
const teams = option.teams?.map(item => item.name).join(', ');
return `${option?.first_name} ${option?.last_name} ${
teams ? `(${teams})` : '(no team)'
} ${option.email} (${
option.user_info[0]?.country_name?.toUpperCase() || 'no country'
} ${option?.email} (${
option?.user_info?.[0]?.country_name?.toUpperCase() || 'no country'
})`;
}

if (isTeamAccess(option)) {
return `${t('Team')}: ${option.team}`;
return `${t('Team')}: ${option?.team}`;
}

if (isRoleAccess(option)) {
return `${t('Role')}: ${option.role}`;
return `${t('Role')}: ${option?.role}`;
}

return '';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import { t, styled } from '@superset-ui/core';
import CopyToClipboard from 'src/components/CopyToClipboard';
import Button from 'src/components/Button';
import { useHistory } from 'react-router-dom';
import { formAccessOptionLabel } from '../AccessConfigurationModal/utils';

const StyledWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
height: 100%;
font-size: ${({ theme }) => theme.typography.sizes.l}px;
p {
margin: 0;
text-align: center;
}
span {
font-weight: ${({ theme }) => theme.typography.weights.bold};
}
`;

interface IProps {
entity: 'dashboard' | 'chart';
owners: {
id: number;
email?: string;
first_name?: string;
last_name?: string;
teams?: Array<{ name: string }>;
user_info?: Array<{ country_name: string | null }>;
}[];
}

const AccessWarning = ({ entity, owners }: IProps) => {
const {
location: { pathname, search },
} = useHistory();
const { protocol, hostname, port } = window.location;

const owner = owners?.[0];

const url = `${protocol}//${hostname}${
port ? `:${port}` : ''
}${pathname}${search}`;

const clipboardMessage = `${t(
entity === 'dashboard'
? "I'm requesting access to this dashboard:"
: "I'm requesting access to this chart:",
)} ${url}`;

return (
<StyledWrapper>
<p>
{t(
entity === 'dashboard'
? "You don't have access to this dashboard."
: "You don't have access to this chart.",
)}
</p>
{owner && (
<>
<p>
{t('Contact the owner for access')}:{' '}
<span>{formAccessOptionLabel(owners[0])}.</span>
</p>
<p>{t('You can copy a prepared message to send to the owner.')}</p>
<CopyToClipboard
copyNode={
<Button buttonSize="small" buttonStyle="primary">
{t('Copy to Clipboard')}
</Button>
}
text={clipboardMessage}
shouldShowText={false}
hideTooltip
/>
</>
)}
{!owner && (
<p>
{t("The %(entity)s doesn't have an owner.", { entity: t(entity) })}
</p>
)}
</StyledWrapper>
);
};

export default AccessWarning;
1 change: 1 addition & 0 deletions superset-frontend/src/DodoExtensions/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './Wrappers/ColumnWrapper';
export * from './WarningPanel';
export * from './WarningPanel/WarningPanelInner';
export * from './AccessConfigurationModal';
export * from './AccessWarning';
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const defaultProps: PageHeaderWithActionsProps = {
</Menu>
),
menuDropdownProps: { onVisibleChange: jest.fn(), visible: true },
showRightPanel: true,
};

test('Renders', async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,10 @@ const additionalActionsContainerStyles = (theme: SupersetTheme) => css`
margin-left: ${theme.gridUnit * 2}px;
`;

type PageHeaderWithActionsPropsDodoExtended = {
showRightPanel: boolean;
};

export type PageHeaderWithActionsProps = {
editableTitleProps: DynamicEditableTitleProps;
showTitlePanelItems: boolean;
Expand All @@ -100,7 +104,7 @@ export type PageHeaderWithActionsProps = {
text?: string;
placement?: TooltipPlacement;
};
};
} & PageHeaderWithActionsPropsDodoExtended; // DODO added 39843425

export const PageHeaderWithActions = ({
editableTitleProps,
Expand All @@ -113,6 +117,7 @@ export const PageHeaderWithActions = ({
additionalActionsMenu,
menuDropdownProps,
tooltipProps,
showRightPanel, // DODO added 39843425
}: PageHeaderWithActionsProps) => {
const theme = useTheme();
return (
Expand All @@ -130,7 +135,7 @@ export const PageHeaderWithActions = ({
)}
</div>
{/* DODO changed */}
{process.env.type === undefined && (
{process.env.type === undefined && showRightPanel && (
<div className="right-button-panel">
{rightPanelAdditionalItems}
<div css={additionalActionsContainerStyles}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ import {
OPEN_FILTER_BAR_WIDTH,
} from 'src/dashboard/constants';
import { bootstrapData } from 'src/preamble';
import AccessWarning from 'src/DodoExtensions/components/AccessWarning'; // DODO added 39843425
import { getRootLevelTabsComponent, shouldFocusTabs } from './utils';
import DashboardContainer from './DashboardContainer';
import { useNativeFilters } from './state';
Expand Down Expand Up @@ -145,11 +146,20 @@ const StyledDiv = styled.div`

// @z-index-above-dashboard-charts + 1 = 11
const FiltersPanel = styled.div<{ width: number; hidden: boolean }>`
position: relative;
grid-column: 1;
grid-row: 1 / span 2;
z-index: 11;
width: ${({ width }) => width}px;
${({ hidden }) => hidden && `display: none;`}
.curtain {
position: absolute;
inset-block: 0;
inset-inline: 0 2px;
background-color: rgba(255, 255, 255, 25%);
backdrop-filter: blur(3px);
z-index: 1000;
}
`;

const StickyPanel = styled.div<{ width: number }>`
Expand Down Expand Up @@ -419,6 +429,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const dispatch = useDispatch();
const uiConfig = useUiConfig();
const theme = useTheme();
const hasAccess = true;

const dashboardId = useSelector<RootState, string>(
({ dashboardInfo }) => `${dashboardInfo.id}`,
Expand All @@ -438,6 +449,11 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const fullSizeChartId = useSelector<RootState, number | null>(
state => state.dashboardState.fullSizeChartId,
);
// DODO added 39843425
const dashboardOwners = useSelector<
RootState,
RootState['dashboardInfo']['owners']
>(({ dashboardInfo }) => dashboardInfo.owners);
const crossFiltersEnabled = isFeatureEnabled(
FeatureFlag.DASHBOARD_CROSS_FILTERS,
);
Expand Down Expand Up @@ -522,7 +538,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS);

const showFilterBar =
(crossFiltersEnabled || nativeFiltersEnabled) && !editMode;
(crossFiltersEnabled || nativeFiltersEnabled) && !editMode && hasAccess; // DODO changed 39843425

const offset =
FILTER_BAR_HEADER_HEIGHT +
Expand All @@ -538,7 +554,8 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
dashboardFiltersOpen ||
editMode ||
!nativeFiltersEnabled ||
filterBarOrientation === FilterBarOrientation.HORIZONTAL
filterBarOrientation === FilterBarOrientation.HORIZONTAL ||
!hasAccess // DODO added 39843425
? 0
: -32,
}),
Expand All @@ -547,6 +564,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
editMode,
filterBarOrientation,
nativeFiltersEnabled,
hasAccess, // DODO added 39843425
],
);

Expand Down Expand Up @@ -585,31 +603,34 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
/>
)}
{dropIndicatorProps && <div {...dropIndicatorProps} />}
{!isReport && topLevelTabs && !uiConfig.hideNav && (
<WithPopoverMenu
shouldFocus={shouldFocusTabs}
menuItems={[
<IconButton
icon={<Icons.FallOutlined iconSize="xl" />}
label={t('Collapse tab content')}
onClick={handleDeleteTopLevelTabs}
/>,
]}
editMode={editMode}
>
<DashboardComponent
id={topLevelTabs?.id}
parentId={DASHBOARD_ROOT_ID}
depth={DASHBOARD_ROOT_DEPTH + 1}
index={0}
renderTabContent={false}
renderHoverMenu={false}
onChangeTab={handleChangeTab}
// DODO added
userLanguage={userLanguage}
/>
</WithPopoverMenu>
)}
{hasAccess && // DODO added 39843425
!isReport &&
topLevelTabs &&
!uiConfig.hideNav && (
<WithPopoverMenu
shouldFocus={shouldFocusTabs}
menuItems={[
<IconButton
icon={<Icons.FallOutlined iconSize="xl" />}
label={t('Collapse tab content')}
onClick={handleDeleteTopLevelTabs}
/>,
]}
editMode={editMode}
>
<DashboardComponent
id={topLevelTabs?.id}
parentId={DASHBOARD_ROOT_ID}
depth={DASHBOARD_ROOT_DEPTH + 1}
index={0}
renderTabContent={false}
renderHoverMenu={false}
onChangeTab={handleChangeTab}
// DODO added
userLanguage={userLanguage}
/>
</WithPopoverMenu>
)}
</div>
),
[
Expand Down Expand Up @@ -702,7 +723,8 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
`div > .filterStatusPopover.ant-popover{z-index: 101}`}
`}
/>
{!editMode &&
{hasAccess && // DODO added 39843425
!editMode &&
!topLevelTabs &&
dashboardLayout[DASHBOARD_GRID_ID]?.children?.length === 0 && (
<EmptyStateBig
Expand All @@ -718,23 +740,30 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
image="dashboard.svg"
/>
)}
<DashboardContentWrapper
data-test="dashboard-content-wrapper"
className={cx('dashboard', editMode && 'dashboard--editing')}
>
<StyledDashboardContent
className="dashboard-content"
editMode={editMode}
marginLeft={dashboardContentMarginLeft}
{hasAccess && ( // DODO added 39843425
<DashboardContentWrapper
data-test="dashboard-content-wrapper"
className={cx('dashboard', editMode && 'dashboard--editing')}
>
{showDashboard ? (
<DashboardContainer topLevelTabs={topLevelTabs} />
) : (
<Loading />
)}
{editMode && <BuilderComponentPane topOffset={barTopOffset} />}
</StyledDashboardContent>
</DashboardContentWrapper>
<StyledDashboardContent
className="dashboard-content"
editMode={editMode}
marginLeft={dashboardContentMarginLeft}
>
{showDashboard ? (
<DashboardContainer topLevelTabs={topLevelTabs} />
) : (
<Loading />
)}
{editMode && <BuilderComponentPane topOffset={barTopOffset} />}
</StyledDashboardContent>
</DashboardContentWrapper>
)}
{/* DODO added start 39843425 */}
{!hasAccess && (
<AccessWarning entity="dashboard" owners={dashboardOwners} />
)}
{/* DODO added stop 39843425 */}
</StyledContent>
{dashboardIsSaving && (
<Loading
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const createProps = () => ({
],
},
},
owners: [],
},
user: {
createdOn: '2021-04-27T18:12:38.952304',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const createProps = () => ({
],
},
},
owners: [],
},
dashboardTitle: 'Title',
// DODO added
Expand Down
Loading

0 comments on commit 0886de0

Please sign in to comment.