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

View File

@ -78,9 +78,10 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
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) => {
if (folderDTO) {
const result = await saveFolder({
@ -101,11 +102,11 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
actions={
<>
{folderDTO && <FolderActionsButton folder={folderDTO} />}
{(canCreateDashboards || canCreateFolder) && (
{(canCreateDashboards || canCreateFolders) && (
<CreateNewButton
parentFolder={folderDTO}
canCreateDashboard={canCreateDashboards}
canCreateFolder={canCreateFolder}
canCreateFolder={canCreateFolders}
/>
)}
</>
@ -125,9 +126,9 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
<AutoSizer>
{({ width, height }) =>
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>

View File

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

View File

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

View File

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

View File

@ -23,9 +23,9 @@ export function FolderActionsButton({ folder }: Props) {
const [showPermissionsDrawer, setShowPermissionsDrawer] = useState(false);
const [moveFolder] = useMoveFolderMutation();
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
const canMoveFolder = config.featureToggles.nestedFolders && canEditFolder;
const canMoveFolder = config.featureToggles.nestedFolders && canEditFolders;
const onMove = async (destinationUID: string) => {
await moveFolder({ folder, destinationUID });
@ -94,11 +94,11 @@ export function FolderActionsButton({ folder }: Props) {
<Menu>
{canViewPermissions && <MenuItem onClick={() => setShowPermissionsDrawer(true)} label={managePermissionsLabel} />}
{canMoveFolder && <MenuItem onClick={showMoveModal} label={moveLabel} />}
{canDeleteFolder && <MenuItem destructive onClick={showDeleteModal} label={deleteLabel} />}
{canDeleteFolders && <MenuItem destructive onClick={showDeleteModal} label={deleteLabel} />}
</Menu>
);
if (!canViewPermissions && !canMoveFolder && !canDeleteFolder) {
if (!canViewPermissions && !canMoveFolder && !canDeleteFolders) {
return null;
}

View File

@ -7,21 +7,23 @@ function checkFolderPermission(action: AccessControlAction, folderDTO?: FolderDT
}
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
const canCreateFolder = Boolean(
const canCreateDashboards = checkFolderPermission(AccessControlAction.DashboardsCreate, folderDTO);
const canCreateFolders = Boolean(
(!folderDTO || config.featureToggles.nestedFolders) && checkFolderPermission(AccessControlAction.FoldersCreate)
);
const canCreateDashboards = checkFolderPermission(AccessControlAction.DashboardsCreate, folderDTO);
const canDeleteFolder = checkFolderPermission(AccessControlAction.FoldersDelete, folderDTO);
const canViewPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsRead, folderDTO);
const canDeleteFolders = checkFolderPermission(AccessControlAction.FoldersDelete, folderDTO);
const canEditDashboards = checkFolderPermission(AccessControlAction.DashboardsWrite, folderDTO);
const canEditFolders = checkFolderPermission(AccessControlAction.FoldersWrite, folderDTO);
const canSetPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsWrite, folderDTO);
const canViewPermissions = checkFolderPermission(AccessControlAction.FoldersPermissionsRead, folderDTO);
return {
canCreateDashboards,
canCreateFolder,
canDeleteFolder,
canEditFolder,
canCreateFolders,
canDeleteFolders,
canEditDashboards,
canEditFolders,
canSetPermissions,
canViewPermissions,
};