From 3a6cf2e5990c0ecaaa9aa45f7493190370e88e8b Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Wed, 24 Apr 2024 15:25:33 -0700 Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20render=20informative=20message?= =?UTF-8?q?=20when=20user=20tries=20to=20save=20query=20with=20invalid=20p?= =?UTF-8?q?latform(s)=20(#18473)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## #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 --- changes/17771-invalid-query-platforms | 1 + frontend/pages/queries/edit/EditQueryPage.tsx | 15 ++++++++++++--- .../components/EditQueryForm/EditQueryForm.tsx | 14 +++++++++----- frontend/utilities/constants.tsx | 6 ++++++ 4 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 changes/17771-invalid-query-platforms diff --git a/changes/17771-invalid-query-platforms b/changes/17771-invalid-query-platforms new file mode 100644 index 0000000000..963a27eccc --- /dev/null +++ b/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). diff --git a/frontend/pages/queries/edit/EditQueryPage.tsx b/frontend/pages/queries/edit/EditQueryPage.tsx index b2b04a136a..1c105e6220 100644 --- a/frontend/pages/queries/edit/EditQueryPage.tsx +++ b/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", diff --git a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx b/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx index 512fe6d755..98fc461e3c 100644 --- a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx +++ b/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."); diff --git a/frontend/utilities/constants.tsx b/frontend/utilities/constants.tsx index e16a487145..a3e6490daa 100644 --- a/frontend/utilities/constants.tsx +++ b/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.";