[Security Solution][Serverless] Open Security project features modal in Cloud UI (#170212)

## Summary

Use `open=securityProjectFeatures` query param in the Serverless _Get
Started_ page link, to open the project features (tier) modal directly.



f00c2092-047d-43ad-a5eb-7996718bd0ca

x-pack/plugins/security_solution_serverless/public/get_started/welcome_panel/change_plan_link.test.tsx

@@ -39,7 +39,7 @@ describe('ChangePlanLink', () => {
     expect(badge).toBeInTheDocument();
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toEqual(
-      'https://cloud.elastic.co/projects/security/test-project-id'
+      'https://cloud.elastic.co/projects/security/test-project-id?open=securityProjectFeatures'
     );
   });
 

x-pack/plugins/security_solution_serverless/public/get_started/welcome_panel/change_plan_link.tsx

@@ -18,7 +18,7 @@ import { css } from '@emotion/react';
 import type { ProductTier } from '../../../common/product';
 import { ProductTierBadge } from './product_tier_badge';
 import { WELCOME_PANEL_PROJECT_CREATED_CHANGE_PLAN_TITLE } from './translations';
-import { getProjectDetailsUrl } from '../../navigation/links/util';
+import { getProjectFeaturesUrl } from '../../navigation/links/util';
 import { useKibana } from '../../common/services';
 
 const ChangePlanLinkComponent = ({ productTier }: { productTier: ProductTier | undefined }) => {
@@ -46,7 +46,7 @@ const ChangePlanLinkComponent = ({ productTier }: { productTier: ProductTier | u
                 color: ${euiTheme.colors.primaryText};
                 padding-left: ${euiTheme.size.m};
               `}
-              href={getProjectDetailsUrl(cloud)}
+              href={getProjectFeaturesUrl(cloud)}
               target="_blank"
               external={false}
             >

x-pack/plugins/security_solution_serverless/public/navigation/links/util.test.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getProjectFeaturesUrl } from './util';
+import type { CloudStart } from '@kbn/cloud-plugin/public';
+
+const cloud = {
+  serverless: {
+    projectId: '1234',
+  },
+  projectsUrl: 'https://cloud.elastic.co/projects',
+} as CloudStart;
+
+describe('util', () => {
+  describe('getProductFeaturesUrl', () => {
+    it('should return undefined if the projectId is not present', () => {
+      expect(getProjectFeaturesUrl({ ...cloud, serverless: { projectId: undefined } })).toBe(
+        undefined
+      );
+    });
+
+    it('should return undefined if the projectsUrl is not present', () => {
+      expect(getProjectFeaturesUrl({ ...cloud, projectsUrl: undefined })).toBe(undefined);
+    });
+
+    it('should return the correct url', () => {
+      expect(getProjectFeaturesUrl(cloud)).toBe(
+        `${cloud.projectsUrl}/security/${cloud.serverless?.projectId}?open=securityProjectFeatures`
+      );
+    });
+  });
+});

x-pack/plugins/security_solution_serverless/public/navigation/links/util.ts

@@ -25,13 +25,6 @@ export const getProjectPageNameFromNavLinkId = (navLinkId: string): ProjectPageN
 
 export const isCloudLink = (linkId: string): boolean => linkId.startsWith('cloud:');
 export const getCloudLinkKey = (linkId: string): string => linkId.replace('cloud:', '');
-export const getProjectDetails = (cloud: CloudStart) => cloud.serverless;
-export const getProjectDetailsUrl = (cloud: CloudStart) => {
-  const projectId = cloud.serverless?.projectId;
-  return projectId
-    ? `${getCloudUrl('projects', cloud)}/${SECURITY_PROJECT_TYPE}/${projectId}`
-    : undefined;
-};
 
 export const getCloudUrl: GetCloudUrl = (cloudUrlKey, cloud) => {
   switch (cloudUrlKey) {
@@ -54,6 +47,16 @@ export const getCloudUrl: GetCloudUrl = (cloudUrlKey, cloud) => {
   }
 };
 
+export const getProjectDetails = (cloud: CloudStart) => cloud.serverless;
+export const getProjectFeaturesUrl = (cloud: CloudStart): string | undefined => {
+  const projectsBaseUrl = getCloudUrl('projects', cloud);
+  const projectId = getProjectDetails(cloud)?.projectId;
+  if (!projectsBaseUrl || !projectId) {
+    return undefined;
+  }
+  return `${projectsBaseUrl}/${SECURITY_PROJECT_TYPE}/${projectId}?open=securityProjectFeatures`;
+};
+
 /**
  * Defines the navigation items that should be in the footer of the side navigation.
  * @todo Make it a new property in the `NavigationLink` type `position?: 'top' | 'bottom' (default: 'top')`