Manage Queries Page: No queries does not show create new query cta for observers (#3358)

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

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();
 

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx

@@ -240,6 +240,7 @@ const ManageQueriesPage = (): JSX.Element => {
               searchable={!!queriesList}
               customControl={renderPlatformDropdown}
               selectedDropdownFilter={selectedDropdownFilter}
+              isOnlyObserver={isOnlyObserver}
             />
           )}
         </div>

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>
+                  </>
+                )}
               </>
             ) : (
               <>