Browse Dashboards: Better logic for showing selection checkboxes (#74988)

show selection checkboxes if can edit either folders or dashboards
This commit is contained in:
Ashley Harrison 2023-09-19 10:51:59 +01:00 committed by GitHub
parent 9a077d5993
commit cc251db3c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 47 deletions

View File

@ -101,9 +101,10 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
let server: SetupServer; let server: SetupServer;
const mockPermissions = { const mockPermissions = {
canCreateDashboards: true, canCreateDashboards: true,
canCreateFolder: true, canEditDashboards: true,
canDeleteFolder: true, canCreateFolders: true,
canEditFolder: true, canDeleteFolders: true,
canEditFolders: true,
canViewPermissions: true, canViewPermissions: true,
canSetPermissions: true, canSetPermissions: true,
}; };
@ -173,7 +174,7 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
return { return {
...mockPermissions, ...mockPermissions,
canCreateDashboards: false, canCreateDashboards: false,
canCreateFolder: false, canCreateFolders: false,
}; };
}); });
render(<BrowseDashboardsPage {...props} />); render(<BrowseDashboardsPage {...props} />);
@ -277,7 +278,7 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
return { return {
...mockPermissions, ...mockPermissions,
canCreateDashboards: false, canCreateDashboards: false,
canCreateFolder: false, canCreateFolders: false,
}; };
}); });
render(<BrowseDashboardsPage {...props} />); render(<BrowseDashboardsPage {...props} />);
@ -294,8 +295,8 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
canEditFolder: false, canEditFolders: false,
canSetPermissions: false, canSetPermissions: false,
canViewPermissions: false, canViewPermissions: false,
}; };
@ -314,7 +315,7 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canEditFolder: false, canEditFolders: false,
}; };
}); });
render(<BrowseDashboardsPage {...props} />); render(<BrowseDashboardsPage {...props} />);

View File

@ -78,9 +78,10 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
const hasSelection = useHasSelection(); const hasSelection = useHasSelection();
const { canEditFolder, canCreateDashboards, canCreateFolder } = getFolderPermissions(folderDTO); const { canEditFolders, canEditDashboards, canCreateDashboards, canCreateFolders } = getFolderPermissions(folderDTO);
const showEditTitle = canEditFolder && folderUID; const showEditTitle = canEditFolders && folderUID;
const canSelect = canEditFolders || canEditDashboards;
const onEditTitle = async (newValue: string) => { const onEditTitle = async (newValue: string) => {
if (folderDTO) { if (folderDTO) {
const result = await saveFolder({ const result = await saveFolder({
@ -101,11 +102,11 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
actions={ actions={
<> <>
{folderDTO && <FolderActionsButton folder={folderDTO} />} {folderDTO && <FolderActionsButton folder={folderDTO} />}
{(canCreateDashboards || canCreateFolder) && ( {(canCreateDashboards || canCreateFolders) && (
<CreateNewButton <CreateNewButton
parentFolder={folderDTO} parentFolder={folderDTO}
canCreateDashboard={canCreateDashboards} canCreateDashboard={canCreateDashboards}
canCreateFolder={canCreateFolder} canCreateFolder={canCreateFolders}
/> />
)} )}
</> </>
@ -125,9 +126,9 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
<AutoSizer> <AutoSizer>
{({ width, height }) => {({ width, height }) =>
isSearching ? ( isSearching ? (
<SearchView canSelect={canEditFolder} width={width} height={height} /> <SearchView canSelect={canSelect} width={width} height={height} />
) : ( ) : (
<BrowseView canSelect={canEditFolder} width={width} height={height} folderUID={folderUID} /> <BrowseView canSelect={canSelect} width={width} height={height} folderUID={folderUID} />
) )
} }
</AutoSizer> </AutoSizer>

View File

@ -37,9 +37,10 @@ describe('browse-dashboards BrowseFolderAlertingPage', () => {
let server: SetupServer; let server: SetupServer;
const mockPermissions = { const mockPermissions = {
canCreateDashboards: true, canCreateDashboards: true,
canCreateFolder: true, canEditDashboards: true,
canDeleteFolder: true, canCreateFolders: true,
canEditFolder: true, canDeleteFolders: true,
canEditFolders: true,
canViewPermissions: true, canViewPermissions: true,
canSetPermissions: true, canSetPermissions: true,
}; };
@ -105,8 +106,8 @@ describe('browse-dashboards BrowseFolderAlertingPage', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
canEditFolder: false, canEditFolders: false,
canViewPermissions: false, canViewPermissions: false,
canSetPermissions: false, canSetPermissions: false,
}; };

View File

@ -37,9 +37,10 @@ describe('browse-dashboards BrowseFolderLibraryPanelsPage', () => {
let server: SetupServer; let server: SetupServer;
const mockPermissions = { const mockPermissions = {
canCreateDashboards: true, canCreateDashboards: true,
canCreateFolder: true, canEditDashboards: true,
canDeleteFolder: true, canCreateFolders: true,
canEditFolder: true, canDeleteFolders: true,
canEditFolders: true,
canViewPermissions: true, canViewPermissions: true,
canSetPermissions: true, canSetPermissions: true,
}; };
@ -110,8 +111,8 @@ describe('browse-dashboards BrowseFolderLibraryPanelsPage', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
canEditFolder: false, canEditFolders: false,
canViewPermissions: false, canViewPermissions: false,
canSetPermissions: false, canSetPermissions: false,
}; };

View File

@ -27,9 +27,10 @@ describe('browse-dashboards FolderActionsButton', () => {
const mockFolder = mockFolderDTO(); const mockFolder = mockFolderDTO();
const mockPermissions = { const mockPermissions = {
canCreateDashboards: true, canCreateDashboards: true,
canCreateFolder: true, canEditDashboards: true,
canDeleteFolder: true, canCreateFolders: true,
canEditFolder: true, canDeleteFolders: true,
canEditFolders: true,
canViewPermissions: true, canViewPermissions: true,
canSetPermissions: true, canSetPermissions: true,
}; };
@ -55,8 +56,8 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
canEditFolder: false, canEditFolders: false,
canViewPermissions: false, canViewPermissions: false,
canSetPermissions: false, canSetPermissions: false,
}; };
@ -98,7 +99,7 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canEditFolder: false, canEditFolders: false,
}; };
}); });
render(<FolderActionsButton folder={mockFolder} />); render(<FolderActionsButton folder={mockFolder} />);
@ -113,7 +114,7 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
}; };
}); });
render(<FolderActionsButton folder={mockFolder} />); render(<FolderActionsButton folder={mockFolder} />);
@ -168,8 +169,8 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
canEditFolder: false, canEditFolders: false,
canViewPermissions: false, canViewPermissions: false,
canSetPermissions: false, canSetPermissions: false,
}; };
@ -216,7 +217,7 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canEditFolder: false, canEditFolders: false,
}; };
}); });
render(<FolderActionsButton folder={mockFolder} />); render(<FolderActionsButton folder={mockFolder} />);
@ -230,7 +231,7 @@ describe('browse-dashboards FolderActionsButton', () => {
jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => { jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
return { return {
...mockPermissions, ...mockPermissions,
canDeleteFolder: false, canDeleteFolders: false,
}; };
}); });
render(<FolderActionsButton folder={mockFolder} />); render(<FolderActionsButton folder={mockFolder} />);

View File

@ -23,9 +23,9 @@ export function FolderActionsButton({ folder }: Props) {
const [showPermissionsDrawer, setShowPermissionsDrawer] = useState(false); const [showPermissionsDrawer, setShowPermissionsDrawer] = useState(false);
const [moveFolder] = useMoveFolderMutation(); const [moveFolder] = useMoveFolderMutation();
const [deleteFolder] = useDeleteFolderMutation(); const [deleteFolder] = useDeleteFolderMutation();
const { canEditFolder, canDeleteFolder, canViewPermissions, canSetPermissions } = getFolderPermissions(folder); const { canEditFolders, canDeleteFolders, canViewPermissions, canSetPermissions } = getFolderPermissions(folder);
// Can only move folders when nestedFolders is enabled // Can only move folders when nestedFolders is enabled
const canMoveFolder = config.featureToggles.nestedFolders && canEditFolder; const canMoveFolder = config.featureToggles.nestedFolders && canEditFolders;
const onMove = async (destinationUID: string) => { const onMove = async (destinationUID: string) => {
await moveFolder({ folder, destinationUID }); await moveFolder({ folder, destinationUID });
@ -94,11 +94,11 @@ export function FolderActionsButton({ folder }: Props) {
<Menu> <Menu>
{canViewPermissions && <MenuItem onClick={() => setShowPermissionsDrawer(true)} label={managePermissionsLabel} />} {canViewPermissions && <MenuItem onClick={() => setShowPermissionsDrawer(true)} label={managePermissionsLabel} />}
{canMoveFolder && <MenuItem onClick={showMoveModal} label={moveLabel} />} {canMoveFolder && <MenuItem onClick={showMoveModal} label={moveLabel} />}
{canDeleteFolder && <MenuItem destructive onClick={showDeleteModal} label={deleteLabel} />} {canDeleteFolders && <MenuItem destructive onClick={showDeleteModal} label={deleteLabel} />}
</Menu> </Menu>
); );
if (!canViewPermissions && !canMoveFolder && !canDeleteFolder) { if (!canViewPermissions && !canMoveFolder && !canDeleteFolders) {
return null; return null;
} }

View File

@ -7,21 +7,23 @@ function checkFolderPermission(action: AccessControlAction, folderDTO?: FolderDT
} }
export function getFolderPermissions(folderDTO?: FolderDTO) { export function getFolderPermissions(folderDTO?: FolderDTO) {
const canEditFolder = checkFolderPermission(AccessControlAction.FoldersWrite, folderDTO);
// Can only create a folder if we have permissions and either we're at root or nestedFolders is enabled // Can only create a folder if we have permissions and either we're at root or nestedFolders is enabled
const canCreateFolder = Boolean( const canCreateDashboards = checkFolderPermission(AccessControlAction.DashboardsCreate, folderDTO);
const canCreateFolders = Boolean(
(!folderDTO || config.featureToggles.nestedFolders) && checkFolderPermission(AccessControlAction.FoldersCreate) (!folderDTO || config.featureToggles.nestedFolders) && checkFolderPermission(AccessControlAction.FoldersCreate)
); );
const canCreateDashboards = checkFolderPermission(AccessControlAction.DashboardsCreate, folderDTO); const canDeleteFolders = checkFolderPermission(AccessControlAction.FoldersDelete, folderDTO);
const canDeleteFolder = checkFolderPermission(AccessControlAction.FoldersDelete, folderDTO); const canEditDashboards = checkFolderPermission(AccessControlAction.DashboardsWrite, folderDTO);
const canViewPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsRead, folderDTO); const canEditFolders = checkFolderPermission(AccessControlAction.FoldersWrite, folderDTO);
const canSetPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsWrite, folderDTO); const canSetPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsWrite, folderDTO);
const canViewPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsRead, folderDTO);
return { return {
canCreateDashboards, canCreateDashboards,
canCreateFolder, canCreateFolders,
canDeleteFolder, canDeleteFolders,
canEditFolder, canEditDashboards,
canEditFolders,
canSetPermissions, canSetPermissions,
canViewPermissions, canViewPermissions,
}; };