[8.9] [Synthetics] Handle string filters in url (#161780) (#162060)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Synthetics] Handle string filters in url
(#161780)](https://github.com/elastic/kibana/pull/161780)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2023-07-17T14:39:30Z","message":"[Synthetics]
Handle string filters in url
(#161780)","sha":"82285ac7c8229fbdc32c860cebb65deb1b65e595","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:uptime","release_note:skip","v8.9.0","v8.10.0"],"number":161780,"url":"https://github.com/elastic/kibana/pull/161780","mergeCommit":{"message":"[Synthetics]
Handle string filters in url
(#161780)","sha":"82285ac7c8229fbdc32c860cebb65deb1b65e595"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/161780","number":161780,"mergeCommit":{"message":"[Synthetics]
Handle string filters in url
(#161780)","sha":"82285ac7c8229fbdc32c860cebb65deb1b65e595"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_button.tsx

@@ -32,7 +32,7 @@ export const FilterButton = ({
 
   // Transform the values to readable labels (if any) so that selected values are checked on filter dropdown
   const selectedValueLabels = getSyntheticsFilterDisplayValues(
-    (urlParams[field] || []).map(valueToLabelWithEmptyCount),
+    valueToLabelWithEmptyCount(urlParams[field]),
     field,
     []
   ).map(({ label: selectedValueLabel }) => selectedValueLabel);

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_group.tsx

@@ -23,9 +23,17 @@ import { FilterButton } from './filter_button';
 
 const mixUrlValues = (
   values?: LabelWithCountValue[],
-  urlLabels?: string[]
+  urlLabels?: string[] | string
 ): LabelWithCountValue[] => {
-  const urlValues = urlLabels?.map((label) => ({ label, count: 0 })) ?? [];
+  let urlValues: Array<{
+    label: string;
+    count: number;
+  }> = [];
+  if (typeof urlLabels === 'string' && urlLabels) {
+    urlValues.push({ label: urlLabels, count: 0 });
+  } else if (Array.isArray(urlLabels)) {
+    urlValues = urlLabels?.map((label) => ({ label, count: 0 })) ?? [];
+  }
   const newValues = [...(values ?? [])];
   // add url values that are not in the values
   urlValues.forEach((urlValue) => {

x-pack/plugins/synthetics/public/apps/synthetics/utils/filters/filter_fields.ts

@@ -81,10 +81,12 @@ export function getSyntheticsFilterKeyForLabel(value: string, field: SyntheticsM
   }
 }
 
-export const valueToLabelWithEmptyCount = (value: string): LabelWithCountValue => ({
-  label: value,
-  count: 0,
-});
+export const valueToLabelWithEmptyCount = (value?: string | string[]): LabelWithCountValue[] => {
+  if (Array.isArray(value)) {
+    return value.map((v) => ({ label: v, count: 0 }));
+  }
+  return value ? [{ label: value, count: 0 }] : [];
+};
 
 export const monitorTypeKeyLabelMap: Record<DataStream, string> = {
   [DataStream.BROWSER]: 'Journey / Page',

x-pack/plugins/synthetics/public/apps/synthetics/utils/url_params/get_supported_url_params.ts

@@ -29,11 +29,11 @@ export interface SyntheticsUrlParams {
   query?: string;
   tags?: string[];
   locations?: string[];
-  monitorTypes?: string[];
+  monitorTypes?: string[] | string;
   status?: string[];
   locationId?: string;
-  projects?: string[];
-  schedules?: string[];
+  projects?: string[] | string;
+  schedules?: string[] | string;
   groupBy?: MonitorOverviewState['groupBy']['field'];
   groupOrderBy?: MonitorOverviewState['groupBy']['order'];
   packagePolicyId?: string;