diff --git a/changes/12999-platforms-column b/changes/12999-platforms-column new file mode 100644 index 0000000000..3affe1d53a --- /dev/null +++ b/changes/12999-platforms-column @@ -0,0 +1 @@ +* Update the "Platforms" column to the more explicit "Compatible with" diff --git a/frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx b/frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx index 43cbef73bf..61a875cd5f 100644 --- a/frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx +++ b/frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx @@ -1,6 +1,7 @@ import React from "react"; import Icon from "components/Icon"; import { SupportedPlatform } from "interfaces/platform"; +import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; interface IPlatformCellProps { platforms: SupportedPlatform[]; @@ -42,7 +43,9 @@ const PlatformCell = ({ platforms }: IPlatformCellProps): JSX.Element => { ) : null; }) ) : ( - --- + + {DEFAULT_EMPTY_CELL_VALUE} + )} ); diff --git a/frontend/interfaces/schedulable_query.ts b/frontend/interfaces/schedulable_query.ts index 6568689711..9d86c98b85 100644 --- a/frontend/interfaces/schedulable_query.ts +++ b/frontend/interfaces/schedulable_query.ts @@ -1,6 +1,6 @@ import { IFormField } from "./form_field"; import { IPack } from "./pack"; -import { SelectedPlatformString } from "./platform"; +import { SelectedPlatformString, SupportedPlatform } from "./platform"; // Query itself export interface ISchedulableQuery { @@ -24,6 +24,11 @@ export interface ISchedulableQuery { packs: IPack[]; stats: ISchedulableQueryStats; } + +export interface IEnhancedQuery extends ISchedulableQuery { + performance: string; + platforms: SupportedPlatform[]; +} export interface ISchedulableQueryStats { user_time_p50?: number; user_time_p95?: number; diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx index 1884828cd8..58e124b908 100644 --- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx +++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx @@ -16,12 +16,12 @@ import { performanceIndicator } from "utilities/helpers"; import { SupportedPlatform } from "interfaces/platform"; import { API_ALL_TEAMS_ID } from "interfaces/team"; import { + IEnhancedQuery, IQueryKeyQueriesLoadAll, ISchedulableQuery, } from "interfaces/schedulable_query"; import queriesAPI from "services/entities/queries"; import PATHS from "router/paths"; -import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; import checkPlatformCompatibility from "utilities/sql_tools"; import Button from "components/buttons/Button"; import Spinner from "components/Spinner"; @@ -52,17 +52,10 @@ interface IManageQueriesPageProps { }; } -interface IEnhancedQuery extends ISchedulableQuery { - performance: string; - platforms: SupportedPlatform[] | typeof DEFAULT_EMPTY_CELL_VALUE[]; -} - -const getPlatforms = ( - queryString: string -): SupportedPlatform[] | typeof DEFAULT_EMPTY_CELL_VALUE[] => { +const getPlatforms = (queryString: string): SupportedPlatform[] => { const { platforms } = checkPlatformCompatibility(queryString); - return platforms || [DEFAULT_EMPTY_CELL_VALUE]; + return platforms ?? []; }; const enhanceQuery = (q: ISchedulableQuery): IEnhancedQuery => { diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx index abb55b687e..f5ad0b06f6 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx @@ -285,7 +285,7 @@ const QueriesTable = ({ variant: "text-icon", onActionButtonClick: onDeleteQueryClick, }} - selectedDropdownFilter={platform} + selectedDropdownFilter={!isInherited ? platform : undefined} /> ) : ( diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx index b8ab7431ff..744a829bc6 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx @@ -9,7 +9,10 @@ import PATHS from "router/paths"; import permissionsUtils from "utilities/permissions"; import { IUser } from "interfaces/user"; import { secondsToDhms } from "utilities/helpers"; -import { ISchedulableQuery } from "interfaces/schedulable_query"; +import { + IEnhancedQuery, + ISchedulableQuery, +} from "interfaces/schedulable_query"; import { SupportedPlatform } from "interfaces/platform"; import Icon from "components/Icon"; @@ -48,7 +51,7 @@ interface IHeaderProps { } interface IRowProps { row: { - original: ISchedulableQuery; + original: IEnhancedQuery; getToggleRowSelectedProps: () => IGetToggleAllRowsSelectedProps; toggleRowSelected: () => void; }; @@ -108,9 +111,6 @@ const generateTableHeaders = ({ isInherited = false, }: IGenerateTableHeaders): IDataColumn[] => { const isOnlyObserver = permissionsUtils.isOnlyObserver(currentUser); - const isAnyTeamMaintainerOrTeamAdmin = permissionsUtils.isAnyTeamMaintainerOrTeamAdmin( - currentUser - ); const tableHeaders: IDataColumn[] = [ { @@ -163,18 +163,11 @@ const generateTableHeaders = ({ }, { title: "Platform", - Header: "Platform", + Header: "Compatible with", disableSortBy: true, accessor: "platforms", Cell: (cellProps: IPlatformCellProps): JSX.Element => { - // translate the SelectedPlatformString into an array of `SupportedPlatform`s - const platformIconsToRender = (cellProps.row.original.platform === "" - ? ["darwin", "windows", "linux", "chrome"] - : cellProps.row.original.platform - ?.split(",") - .filter((platform) => platform !== "")) as SupportedPlatform[]; - - return ; + return ; }, }, {