UI – render informative message when user tries to save query with invalid platform(s) (#18473)

## #17771 
![Screenshot 2024-04-22 at 1 10
06 PM](https://github.com/fleetdm/fleet/assets/61553566/6b92efbb-6a5c-49f3-b903-624c85fd2173)

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

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

changes/17771-invalid-query-platforms

@@ -0,0 +1 @@
+* Add an informative flash message when the user tries to save a query with invalid platform(s).

frontend/pages/queries/edit/EditQueryPage.tsx

@@ -5,7 +5,12 @@ import { InjectedRouter, Params } from "react-router/lib/Router";
 
 import { AppContext } from "context/app";
 import { QueryContext } from "context/query";
-import { DEFAULT_QUERY, DOCUMENT_TITLE_SUFFIX } from "utilities/constants";
+import {
+  DEFAULT_QUERY,
+  DOCUMENT_TITLE_SUFFIX,
+  INVALID_PLATFORMS_FLASH_MESSAGE,
+  INVALID_PLATFORMS_REASON,
+} from "utilities/constants";
 import configAPI from "services/entities/config";
 import queryAPI from "services/entities/queries";
 import statusAPI from "services/entities/status";
@@ -15,6 +20,7 @@ import {
   ISchedulableQuery,
 } from "interfaces/schedulable_query";
 import { IConfig } from "interfaces/config";
+import { getErrorReason } from "interfaces/errors";
 
 import QuerySidePanel from "components/side_panels/QuerySidePanel";
 import MainContent from "components/MainContent";
@@ -229,7 +235,7 @@ const EditQueryPage = ({
         renderFlash("success", "Query created!");
         setBackendValidators({});
       } catch (createError: any) {
-        if (createError.data.errors[0].reason.includes("already exists")) {
+        if (getErrorReason(createError).includes("already exists")) {
           const teamErrorText =
             teamNameForQuery && apiTeamIdForQuery !== 0
               ? `the ${teamNameForQuery} team`
@@ -275,8 +281,11 @@ const EditQueryPage = ({
       refetchStoredQuery(); // Required to compare recently saved query to a subsequent save to the query
     } catch (updateError: any) {
       console.error(updateError);
-      if (updateError.data.errors[0].reason.includes("Duplicate")) {
+      const reason = getErrorReason(updateError);
+      if (reason.includes("Duplicate")) {
         renderFlash("error", "A query with this name already exists.");
+      } else if (reason.includes(INVALID_PLATFORMS_REASON)) {
+        renderFlash("error", INVALID_PLATFORMS_FLASH_MESSAGE);
       } else {
         renderFlash(
           "error",

frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx

@@ -27,9 +27,11 @@ import {
   SCHEDULE_PLATFORM_DROPDOWN_OPTIONS,
   MIN_OSQUERY_VERSION_OPTIONS,
   LOGGING_TYPE_OPTIONS,
+  INVALID_PLATFORMS_REASON,
+  INVALID_PLATFORMS_FLASH_MESSAGE,
 } from "utilities/constants";
 import usePlatformCompatibility from "hooks/usePlatformCompatibility";
-import { IApiError } from "interfaces/errors";
+import { getErrorReason, IApiError } from "interfaces/errors";
 import {
   ISchedulableQuery,
   ICreateQueryRequestBody,
@@ -328,7 +330,8 @@ const EditQueryForm = ({
           renderFlash("success", `Successfully added query.`);
         })
         .catch((createError: { data: IApiError }) => {
-          if (createError.data.errors[0].reason.includes("already exists")) {
+          const createErrorReason = getErrorReason(createError);
+          if (createErrorReason.includes("already exists")) {
             queryAPI
               .create({
                 name: `Copy of ${lastEditedQueryName}`,
@@ -351,9 +354,7 @@ const EditQueryForm = ({
               })
               .catch((createCopyError: { data: IApiError }) => {
                 if (
-                  createCopyError.data.errors[0].reason.includes(
-                    "already exists"
-                  )
+                  getErrorReason(createCopyError).includes("already exists")
                 ) {
                   let teamErrorText;
                   if (apiTeamIdForQuery !== 0) {
@@ -372,6 +373,9 @@ const EditQueryForm = ({
                 }
                 setIsSaveAsNewLoading(false);
               });
+          } else if (createErrorReason.includes(INVALID_PLATFORMS_REASON)) {
+            setIsSaveAsNewLoading(false);
+            renderFlash("error", INVALID_PLATFORMS_FLASH_MESSAGE);
           } else {
             setIsSaveAsNewLoading(false);
             renderFlash("error", "Could not create query. Please try again.");

frontend/utilities/constants.tsx

@@ -424,3 +424,9 @@ export const DEFAULT_USE_QUERY_OPTIONS = {
   retry: 3,
   refetchOnWindowFocus: false,
 };
+
+export const INVALID_PLATFORMS_REASON =
+  "query payload verification: query's platform must be a comma-separated list of 'darwin', 'linux', 'windows', and/or 'chrome' in a single string";
+
+export const INVALID_PLATFORMS_FLASH_MESSAGE =
+  "Couldn't save query. Please update platforms and try again.";