mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Fleet UI: (Unreleased bug) Team admin/maintainer can edit and delete any of their team's queries (#12863)
## Issue Cerra #12858 ## Description - Allow any team admin/maintainer to use checkboxes on all queries on the manage queries page for deleting queries - Allow any team admin/maintainer to click save to update a query on the edit query page ## QA - [x] I QAed frontend only on team admin, team maintainer that they had the functionality - [x] I QAed frontend only on team observer that they do NOT have the functionality NOTE: Needs QA on a branch with backend to confirm full E2E changes ## Screen recording of team maintainer who didn't author the query now having functionality https://github.com/fleetdm/fleet/assets/71795832/1e93714a-5721-4278-bac3-5ce9f896a49f # Checklist for submitter If some of the following don't apply, delete the relevant line. - [x] Manual QA for all new/changed functionality
This commit is contained in:
RachelElysia
GitHub
parent
bc25e23f20
commit
0aa293201a
2 changed files with 10 additions and 115 deletions
|
|
@ -265,56 +265,15 @@ const generateTableHeaders = ({
|
|||
Header: (cellProps: IHeaderProps): JSX.Element => {
|
||||
const {
|
||||
getToggleAllRowsSelectedProps,
|
||||
rows,
|
||||
selectedFlatRows,
|
||||
toggleAllRowsSelected,
|
||||
toggleRowSelected,
|
||||
} = cellProps;
|
||||
const { checked, indeterminate } = getToggleAllRowsSelectedProps();
|
||||
|
||||
const disableToggleAllRowsSelected = () => {
|
||||
/* Team admin or team maintainer can only delete queries they authored
|
||||
If team admin or team maintainer authored 0 queries, disable select all queries for deletion */
|
||||
if (isAnyTeamMaintainerOrTeamAdmin) {
|
||||
return (
|
||||
rows.filter(
|
||||
(r: IQueryRow) => r.original.author_id === currentUser.id
|
||||
).length === 0
|
||||
);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const checkboxProps = {
|
||||
value: checked,
|
||||
indeterminate,
|
||||
disabled: disableToggleAllRowsSelected(), // Disable select all if all rows are disabled
|
||||
onChange: () => {
|
||||
if (!isAnyTeamMaintainerOrTeamAdmin) {
|
||||
toggleAllRowsSelected();
|
||||
} else {
|
||||
// Team maintainers may only delete the queries that they have authored
|
||||
// so we need to do some filtering and then modify the toggle select all
|
||||
// behavior for the header checkbox
|
||||
const userAuthoredQueries = rows.filter(
|
||||
(r: IQueryRow) => r.original.author_id === currentUser.id
|
||||
);
|
||||
if (
|
||||
selectedFlatRows.length &&
|
||||
selectedFlatRows.length !== userAuthoredQueries.length
|
||||
) {
|
||||
// If some but not all of the user authored queries are already selected,
|
||||
// we toggle all of the user's unselected queries to true
|
||||
userAuthoredQueries.forEach((r: IQueryRow) =>
|
||||
toggleRowSelected(r.id, true)
|
||||
);
|
||||
} else {
|
||||
// Otherwise, we toggle all of the user's queries to the opposite of their current state
|
||||
userAuthoredQueries.forEach((r: IQueryRow) =>
|
||||
toggleRowSelected(r.id)
|
||||
);
|
||||
}
|
||||
}
|
||||
toggleAllRowsSelected();
|
||||
},
|
||||
};
|
||||
return <Checkbox {...checkboxProps} />;
|
||||
|
|
@ -325,44 +284,9 @@ const generateTableHeaders = ({
|
|||
const checkboxProps = {
|
||||
value: checked,
|
||||
onChange: () => row.toggleRowSelected(),
|
||||
disabled:
|
||||
isAnyTeamMaintainerOrTeamAdmin &&
|
||||
row.original.author_id !== currentUser.id,
|
||||
};
|
||||
// If the user is a team maintainer, we only enable checkboxes for queries
|
||||
// that they authored and we include a tooltip to explain disabled checkboxes
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
data-tip
|
||||
data-for={`${"select-checkbox"}__${row.original.id}`}
|
||||
data-tip-disable={
|
||||
!isAnyTeamMaintainerOrTeamAdmin ||
|
||||
row.original.author_id === currentUser.id
|
||||
}
|
||||
className={`${
|
||||
!(
|
||||
!isAnyTeamMaintainerOrTeamAdmin ||
|
||||
row.original.author_id === currentUser.id
|
||||
) && "tooltip"
|
||||
}`}
|
||||
>
|
||||
<Checkbox {...checkboxProps} />
|
||||
</div>{" "}
|
||||
<ReactTooltip
|
||||
className="select-checkbox-tooltip"
|
||||
place="bottom"
|
||||
effect="solid"
|
||||
backgroundColor="#3e4771"
|
||||
id={`${"select-checkbox"}__${row.original.id}`}
|
||||
data-html
|
||||
>
|
||||
<>
|
||||
You can only delete a<br /> query if you are the author.
|
||||
</>
|
||||
</ReactTooltip>
|
||||
</>
|
||||
);
|
||||
// v4.35.0 Any team admin or maintainer now can add, edit, delete their team's queries
|
||||
return <Checkbox {...checkboxProps} />;
|
||||
},
|
||||
disableHidden: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -670,43 +670,14 @@ const QueryForm = ({
|
|||
</Button>
|
||||
)}
|
||||
<div className="query-form__button-wrap--save-query-button">
|
||||
<div
|
||||
data-tip
|
||||
data-for="save-query-button"
|
||||
data-tip-disable={
|
||||
!(
|
||||
isAnyTeamMaintainerOrTeamAdmin &&
|
||||
!hasTeamMaintainerPermissions
|
||||
)
|
||||
}
|
||||
<Button
|
||||
className="save-loading"
|
||||
variant="brand"
|
||||
onClick={promptSaveQuery()}
|
||||
isLoading={isQueryUpdating}
|
||||
>
|
||||
<Button
|
||||
className="save-loading"
|
||||
variant="brand"
|
||||
onClick={promptSaveQuery()}
|
||||
disabled={
|
||||
isAnyTeamMaintainerOrTeamAdmin &&
|
||||
!hasTeamMaintainerPermissions
|
||||
}
|
||||
isLoading={isQueryUpdating}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>{" "}
|
||||
<ReactTooltip
|
||||
className={`save-query-button-tooltip`}
|
||||
place="bottom"
|
||||
effect="solid"
|
||||
backgroundColor="#3e4771"
|
||||
id="save-query-button"
|
||||
data-html
|
||||
>
|
||||
<>
|
||||
You can only save
|
||||
<br /> changes to a query if you
|
||||
<br /> are the author.
|
||||
</>
|
||||
</ReactTooltip>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue