[ResponseOps][Rules] Rules list: middle-click / "Open in new tab" navigates to Default space instead of current space (elastic#261489)

Closes elastic#260053

## Summary

The rule detail `href` was built using string concatenation, resulting
in: `/app/rules/rule/<id>` path without the `/s/<spaceId>` preffix.
Middle-click/"Open in new tab" bypasses the SPA router and follows the
raw href, causing a `rule not found` error in non-default spaces.
- fixed by using `getUrlForApp` which includes the space prefix and the
base path.

Author: georgianaonoleata1904

x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx

@@ -10,10 +10,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import type { EuiTableSortingType, EuiSelectableOption } from '@elastic/eui';
-import {
-  getRulesAppDetailsRoute,
-  rulesAppRoute,
-} from '@kbn/rule-data-utils/src/routes/stack_rule_paths';
+import { getRulesAppDetailsRoute } from '@kbn/rule-data-utils/src/routes/stack_rule_paths';
 import {
   EuiBasicTable,
   EuiFlexGroup,
@@ -38,6 +35,7 @@ import {
 } from '@kbn/alerting-plugin/common';
 
 import { getRouterLinkProps } from '@kbn/router-utils';
+import { useKibana } from '../../../../common/lib/kibana';
 
 import {
   SELECT_ALL_RULES,
@@ -252,8 +250,9 @@ export const RulesListTable = (props: RulesListTableProps) => {
 
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
   const { euiTheme } = useEuiTheme();
-
-  // Detect current app to determine the correct path format
+  const {
+    application: { getUrlForApp },
+  } = useKibana().services;
 
   const ruleRowCss = css`
     min-width: ${euiTheme.breakpoint.xl}px;
@@ -423,7 +422,9 @@ export const RulesListTable = (props: RulesListTableProps) => {
         render: (name: string, rule: RuleTableItem) => {
           const ruleType = ruleTypesState.data.get(rule.ruleTypeId);
           const checkEnabledResult = checkRuleTypeEnabled(ruleType);
-          const pathToRuleDetails = `${rulesAppRoute}${getRulesAppDetailsRoute(rule.id)}`;
+          const pathToRuleDetails = getUrlForApp('rules', {
+            path: getRulesAppDetailsRoute(rule.id),
+          });
 
           const linkProps = getRouterLinkProps({
             href: pathToRuleDetails,
@@ -906,6 +907,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
     tagPopoverOpenIndex,
     ruleOutcomeColumnField,
     euiTheme,
+    getUrlForApp,
   ]);
 
   const allRuleColumns = useMemo(() => getRulesTableColumns(), [getRulesTableColumns]);