From c64627caa4e2296badff48b1d3bf9f048b960d5b Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 13 Dec 2021 15:57:56 -0800
Subject: [PATCH] Manage Queries Page: No queries does not show create new
 query cta for observers (#3358)

---
 ...3157-observers-cannot-see-create-new-query |  1 +
 .../integration/all/app/activateuser.spec.ts  |  1 +
 .../ManageQueriesPage/ManageQueriesPage.tsx   |  1 +
 .../QueriesListWrapper/QueriesListWrapper.tsx | 34 +++++++++++--------
 4 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 changes/issue-3157-observers-cannot-see-create-new-query

diff --git a/changes/issue-3157-observers-cannot-see-create-new-query b/changes/issue-3157-observers-cannot-see-create-new-query
new file mode 100644
index 0000000000..fb5812a2f0
--- /dev/null
+++ b/changes/issue-3157-observers-cannot-see-create-new-query
@@ -0,0 +1 @@
+* No queries UI hides the Create new query button from global and team observers
\ No newline at end of file
diff --git a/cypress/integration/all/app/activateuser.spec.ts b/cypress/integration/all/app/activateuser.spec.ts
index ed70073cf5..0484ce9888 100644
--- a/cypress/integration/all/app/activateuser.spec.ts
+++ b/cypress/integration/all/app/activateuser.spec.ts
@@ -63,6 +63,7 @@ describe("User invite and activation", () => {
     cy.login();
 
     cy.visit("/settings/organization");
+    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
 
     cy.findByRole("tab", { name: /^users$/i }).click();
 
diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
index 1ba042f50b..22e2c3d759 100644
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
@@ -240,6 +240,7 @@ const ManageQueriesPage = (): JSX.Element => {
               searchable={!!queriesList}
               customControl={renderPlatformDropdown}
               selectedDropdownFilter={selectedDropdownFilter}
+              isOnlyObserver={isOnlyObserver}
             />
           )}
         </div>
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
index bbcdce8846..555e7604a0 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
@@ -23,6 +23,7 @@ interface IQueriesListWrapperProps {
   searchable: boolean;
   customControl?: () => JSX.Element;
   selectedDropdownFilter: string;
+  isOnlyObserver?: boolean;
 }
 
 const QueriesListWrapper = ({
@@ -33,6 +34,7 @@ const QueriesListWrapper = ({
   searchable,
   customControl,
   selectedDropdownFilter,
+  isOnlyObserver,
 }: IQueriesListWrapperProps): JSX.Element | null => {
   const { currentUser } = useContext(AppContext);
   const [searchString, setSearchString] = useState<string>("");
@@ -52,20 +54,24 @@ const QueriesListWrapper = ({
                 <p>
                   A query is a specific question you can ask about your devices.
                 </p>
-                <p>
-                  Create a new query, or go to GitHub to{" "}
-                  <a href="https://fleetdm.com/docs/using-fleet/standard-query-library">
-                    import Fleet’s standard query library
-                  </a>
-                  .
-                </p>
-                <Button
-                  variant="brand"
-                  className={`${baseClass}__create-button`}
-                  onClick={onCreateQueryClick}
-                >
-                  Create new query
-                </Button>
+                {!isOnlyObserver && (
+                  <>
+                    <p>
+                      Create a new query, or go to GitHub to{" "}
+                      <a href="https://fleetdm.com/docs/using-fleet/standard-query-library">
+                        import Fleet’s standard query library
+                      </a>
+                      .
+                    </p>
+                    <Button
+                      variant="brand"
+                      className={`${baseClass}__create-button`}
+                      onClick={onCreateQueryClick}
+                    >
+                      Create new query
+                    </Button>
+                  </>
+                )}
               </>
             ) : (
               <>