[RAM] Limit useEffect to calculate view in app URL (#179197)

## Summary

Fix -> #178547


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/observability_solution/observability/public/pages/alerts/components/alert_actions.test.tsx

@@ -13,7 +13,6 @@ import { observabilityAIAssistantPluginMock } from '@kbn/observability-ai-assist
 import { AlertActions, ObservabilityAlertActionsProps } from './alert_actions';
 import { inventoryThresholdAlertEs } from '../../../rules/fixtures/example_alerts';
 import { RULE_DETAILS_PAGE_ID } from '../../rule_details/constants';
-import { createObservabilityRuleTypeRegistryMock } from '../../../rules/observability_rule_type_registry_mock';
 import * as pluginContext from '../../../hooks/use_plugin_context';
 import { ConfigSchema, ObservabilityPublicPluginsStart } from '../../../plugin';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
@@ -25,6 +24,7 @@ import { waitFor } from '@testing-library/react';
 import { AlertsTableQueryContext } from '@kbn/triggers-actions-ui-plugin/public/application/sections/alerts_table/contexts/alerts_table_context';
 import { Router } from '@kbn/shared-ux-router';
 import { createMemoryHistory } from 'history';
+import { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
 
 const refresh = jest.fn();
 const caseHooksReturnedValue = {
@@ -52,7 +52,8 @@ jest.mock('../../../utils/kibana_react', () => ({
   __esModule: true,
   useKibana: jest.fn(() => mockUseKibanaReturnValue),
 }));
-
+const prependMock = jest.fn().mockImplementation((args) => args);
+mockUseKibanaReturnValue.services.http.basePath.prepend = prependMock;
 jest.mock('@kbn/triggers-actions-ui-plugin/public/common/lib/kibana/kibana_react', () => ({
   useKibana: jest.fn(() => ({
     services: {
@@ -71,6 +72,17 @@ const config = {
   },
 } as ConfigSchema;
 
+const getFormatterMock = jest.fn();
+const createRuleTypeRegistryMock = () => ({
+  getFormatter: getFormatterMock,
+  registerFormatter: () => {},
+  list: () => ['ruleType1', 'ruleType2'],
+});
+
+export const createObservabilityRuleTypeRegistryMock = () =>
+  createRuleTypeRegistryMock() as ObservabilityRuleTypeRegistry &
+    ReturnType<typeof createRuleTypeRegistryMock>;
+
 jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({
   appMountParameters: {} as AppMountParameters,
   core: {} as CoreStart,
@@ -84,6 +96,7 @@ jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({
 describe('ObservabilityActions component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    getFormatterMock.mockReturnValue(jest.fn().mockReturnValue('a reason'));
   });
 
   const setup = async (pageId: string) => {
@@ -214,4 +227,26 @@ describe('ObservabilityActions component', () => {
       0
     );
   });
+
+  it('should show a valid url when clicking  "View in app"', async () => {
+    getFormatterMock.mockReturnValue(
+      jest.fn().mockReturnValue({
+        reason: 'a reason',
+        link: 'http://localhost:5620/app/o11y/log-explorer',
+        hasBasePath: false,
+      })
+    );
+    const wrapper = await setup(RULE_DETAILS_PAGE_ID);
+
+    expect(
+      wrapper.find('[data-test-subj="o11yAlertActionsButton"]').first().getElement().props
+    ).toEqual(expect.objectContaining({ href: 'http://localhost:5620/app/o11y/log-explorer' }));
+
+    prependMock.mockClear();
+
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="o11yAlertActionsButton"]').first().simulate('mouseOver');
+      expect(prependMock).toBeCalledTimes(1);
+    });
+  });
 });

x-pack/plugins/observability_solution/observability/public/pages/alerts/components/alert_actions.tsx

@@ -90,7 +90,17 @@ export function AlertActions({
     } else {
       setViewInAppUrl(alertLink);
     }
-  }, [observabilityAlert.hasBasePath, observabilityAlert.link, prepend]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleViewInAppUrl = useCallback(() => {
+    const alertLink = observabilityAlert.link as unknown as string;
+    if (!observabilityAlert.hasBasePath) {
+      setViewInAppUrl(prepend(alertLink ?? ''));
+    } else {
+      setViewInAppUrl(alertLink);
+    }
+  }, [observabilityAlert.link, observabilityAlert.hasBasePath, prepend]);
 
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
@@ -201,6 +211,7 @@ export function AlertActions({
                 defaultMessage: 'View in app',
               })}
               color="text"
+              onMouseOver={handleViewInAppUrl}
               href={viewInAppUrl}
               iconType="eye"
               size="s"