Correct live query editor permissions (#12609)

## Addresses #12607 

- Updated permissions for the FleetAce editor when being viewed by an
Observer+ to allow editing _only_ for a new live query to run


https://www.loom.com/share/2e4569c1c10f4e4a9b322f24fb4a1be2?sid=c30b630b-d302-4596-a8b7-dfb694e22ba0

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx

@@ -102,7 +102,7 @@ const QueryForm = ({
   } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
-  const isEditMode = !!queryIdForEdit;
+  const savedQueryMode = !!queryIdForEdit;
   const [errors, setErrors] = useState<{ [key: string]: any }>({}); // string | null | undefined or boolean | undefined
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
   const [showQueryEditor, setShowQueryEditor] = useState(
@@ -135,7 +135,7 @@ const QueryForm = ({
     debounceSQL(lastEditedQueryBody);
   }, [lastEditedQueryBody, lastEditedQueryId]);
 
-  const hasTeamMaintainerPermissions = isEditMode
+  const hasTeamMaintainerPermissions = savedQueryMode
     ? isAnyTeamMaintainerOrTeamAdmin &&
       storedQuery &&
       currentUser &&
@@ -180,7 +180,7 @@ const QueryForm = ({
   ) => {
     evt.preventDefault();
 
-    if (isEditMode && !lastEditedQueryName) {
+    if (savedQueryMode && !lastEditedQueryName) {
       return setErrors({
         ...errors,
         name: "Query name must be present",
@@ -248,7 +248,7 @@ const QueryForm = ({
   const promptSaveQuery = () => (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
 
-    if (isEditMode && !lastEditedQueryName) {
+    if (savedQueryMode && !lastEditedQueryName) {
       return setErrors({
         ...errors,
         name: "Query name must be present",
@@ -261,7 +261,7 @@ const QueryForm = ({
     valid = isValidated;
 
     if (valid) {
-      if (!isEditMode) {
+      if (!savedQueryMode) {
         setIsSaveModalOpen(true);
       } else {
         onUpdate({
@@ -327,7 +327,7 @@ const QueryForm = ({
   });
 
   const renderName = () => {
-    if (isEditMode) {
+    if (savedQueryMode) {
       return (
         <>
           <div className={queryNameClasses}>
@@ -363,7 +363,7 @@ const QueryForm = ({
   };
 
   const renderDescription = () => {
-    if (isEditMode) {
+    if (savedQueryMode) {
       return (
         <>
           <div className={queryDescriptionClasses}>
@@ -424,7 +424,9 @@ const QueryForm = ({
           name="query editor"
           label="Query"
           wrapperClassName={`${baseClass}__text-editor-wrapper`}
-          readOnly={!isObserverPlus || !isAnyTeamObserverPlus}
+          readOnly={
+            (!isObserverPlus && !isAnyTeamObserverPlus) || savedQueryMode
+          }
           labelActionComponent={isObserverPlus && renderLabelComponent()}
           wrapEnabled
         />
@@ -459,7 +461,7 @@ const QueryForm = ({
             {renderName()}
             {renderDescription()}
           </div>
-          <div className="author">{isEditMode && renderAuthor()}</div>
+          <div className="author">{savedQueryMode && renderAuthor()}</div>
         </div>
         <FleetAce
           value={lastEditedQueryBody}
@@ -472,12 +474,12 @@ const QueryForm = ({
           onChange={onChangeQuery}
           handleSubmit={promptSaveQuery}
           wrapEnabled
-          focus={!isEditMode}
+          focus={!savedQueryMode}
         />
         <span className={`${baseClass}__platform-compatibility`}>
           {renderPlatformCompatibility()}
         </span>
-        {isEditMode && (
+        {savedQueryMode && (
           <>
             <Checkbox
               value={lastEditedQueryObserverCanRun}
@@ -500,7 +502,7 @@ const QueryForm = ({
         >
           {(hasSavePermissions || isAnyTeamMaintainerOrTeamAdmin) && (
             <>
-              {isEditMode && (
+              {savedQueryMode && (
                 <Button
                   variant="text-link"
                   onClick={promptSaveAsNewQuery()}

frontend/utilities/permissions/permissions.ts

@@ -117,7 +117,7 @@ const isObserverPlus = (user: IUser, teamId: number | null): boolean => {
     return true;
   }
 
-  const userTeamRole = user?.teams.find((team) => team.id === teamId)?.role;
+  const userTeamRole = user.teams.find((team) => team.id === teamId)?.role;
   return userTeamRole === "observer_plus";
 };