From 0aa293201a1efb656a697377c76b6f9a6a20d1fb Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:52:56 -0400
Subject: [PATCH] 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
---
 .../QueriesTable/QueriesTableConfig.tsx       | 82 +------------------
 .../components/QueryForm/QueryForm.tsx        | 43 ++--------
 2 files changed, 10 insertions(+), 115 deletions(-)

diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
index c8c7742615..225a5ebb23 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
@@ -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,
     });
diff --git a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
index 8bfd1ba48a..75c4e45488 100644
--- a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
@@ -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>
             </>
           )}