From 5ccb6800cc6acdd7a6ef175daee94717442f6f44 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 24 Jun 2024 15:58:27 -0400
Subject: [PATCH] Fleet UI: Hide delete checkboxes from team observer  (#19934)

---
 ...ide-query-delete-checkboxes-from-observers |  1 +
 .../QueriesTable/QueriesTableConfig.tsx       | 59 ++++++++++---------
 2 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 changes/19828-hide-query-delete-checkboxes-from-observers

diff --git a/changes/19828-hide-query-delete-checkboxes-from-observers b/changes/19828-hide-query-delete-checkboxes-from-observers
new file mode 100644
index 0000000000..f4c268d27b
--- /dev/null
+++ b/changes/19828-hide-query-delete-checkboxes-from-observers
@@ -0,0 +1 @@
+- Hide query delete checkboxes from team observers
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
index 995ea6d7f3..ea610b32fc 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
@@ -115,7 +115,9 @@ const generateTableHeaders = ({
   currentTeamId,
   omitSelectionColumn = false,
 }: IGenerateTableHeaders): IDataColumn[] => {
-  const isOnlyObserver = permissionsUtils.isOnlyObserver(currentUser);
+  const isCurrentTeamObserverOrGlobalObserver = currentTeamId
+    ? permissionsUtils.isTeamObserver(currentUser, currentTeamId)
+    : permissionsUtils.isOnlyObserver(currentUser);
   const viewingTeamScope = currentTeamId !== API_ALL_TEAMS_ID;
 
   const tableHeaders: IDataColumn[] = [
@@ -135,32 +137,33 @@ const generateTableHeaders = ({
             value={
               <>
                 <div className="query-name-text">{cellProps.cell.value}</div>
-                {!isOnlyObserver && cellProps.row.original.observer_can_run && (
-                  <div className="observer-can-run-badge">
-                    <span
-                      className="observer-can-run-icon"
-                      data-tooltip-id={`observer-can-run-tooltip-${cellProps.row.original.id}`}
-                    >
-                      <Icon
-                        className="observer-can-run-query-icon"
-                        name="query"
-                        size="small"
-                        color="core-fleet-blue"
-                      />
-                    </span>
-                    <ReactTooltip5
-                      className="observer-can-run-tooltip"
-                      disableStyleInjection
-                      place="top"
-                      opacity={1}
-                      id={`observer-can-run-tooltip-${cellProps.row.original.id}`}
-                      offset={8}
-                      positionStrategy="fixed"
-                    >
-                      Observers can run this query.
-                    </ReactTooltip5>
-                  </div>
-                )}
+                {!isCurrentTeamObserverOrGlobalObserver &&
+                  cellProps.row.original.observer_can_run && (
+                    <div className="observer-can-run-badge">
+                      <span
+                        className="observer-can-run-icon"
+                        data-tooltip-id={`observer-can-run-tooltip-${cellProps.row.original.id}`}
+                      >
+                        <Icon
+                          className="observer-can-run-query-icon"
+                          name="query"
+                          size="small"
+                          color="core-fleet-blue"
+                        />
+                      </span>
+                      <ReactTooltip5
+                        className="observer-can-run-tooltip"
+                        disableStyleInjection
+                        place="top"
+                        opacity={1}
+                        id={`observer-can-run-tooltip-${cellProps.row.original.id}`}
+                        offset={8}
+                        positionStrategy="fixed"
+                      >
+                        Observers can run this query.
+                      </ReactTooltip5>
+                    </div>
+                  )}
                 {viewingTeamScope &&
                   // inherited
                   cellProps.row.original.team_id !== currentTeamId && (
@@ -260,7 +263,7 @@ const generateTableHeaders = ({
       ),
     },
   ];
-  if (!isOnlyObserver && !omitSelectionColumn) {
+  if (!isCurrentTeamObserverOrGlobalObserver && !omitSelectionColumn) {
     tableHeaders.unshift({
       id: "selection",
       // TODO - improve typing of IHeaderProps instead of using any