[v18] Device Trust empty state UI: Link to integrations list

web/packages/teleport/src/DeviceTrust/EmptyList.tsx

@@ -22,12 +22,12 @@ import styled from 'styled-components';
 
 import {
   Box,
+  ButtonPrimary,
   ButtonSecondary,
   Flex,
   H1,
   H2,
   H3,
-  MenuItem,
   P1,
   P2,
   ResourceIcon,
@@ -46,7 +46,6 @@ import {
   FeatureContainer,
   FeatureSlider,
 } from 'shared/components/EmptyState/EmptyState';
-import { MenuButton } from 'shared/components/MenuAction';
 import { pluralize } from 'shared/utils/text';
 
 import {
@@ -199,26 +198,14 @@ export const EmptyList = ({
         >
           {isEnterprise ? (
             <>
-              <MenuButton
-                buttonText="Get Started with an MDM"
-                buttonProps={{
-                  size: 'large',
-                  intent: 'primary',
-                  fill: 'filled',
-                  color: 'text.primaryInverse',
-                  width: '280px',
-                }}
+              <ButtonPrimary
+                as={Link}
+                to={cfg.getIntegrationsEnrollRoute({ tags: ['devicetrust'] })}
+                width="280px"
+                size="large"
               >
-                <MenuItem as={Link} to={cfg.getIntegrationEnrollRoute('jamf')}>
-                  Jamf Pro
-                </MenuItem>
-                <MenuItem
-                  as={Link}
-                  to={cfg.getIntegrationEnrollRoute('intune')}
-                >
-                  Microsoft Intune
-                </MenuItem>
-              </MenuButton>
+                Get Started with an MDM
+              </ButtonPrimary>
 
               <ButtonSecondary
                 as="a"

web/packages/teleport/src/config.test.ts

@@ -23,8 +23,9 @@ import cfg, {
   UrlAwsOidcConfigureIdp,
   UrlDeployServiceIamConfigureScriptParams,
 } from './config';
+import { IntegrationTag } from './Integrations/Enroll/Shared';
 
-test('getDeployServiceIamConfigureScriptPath formatting', async () => {
+test('getDeployServiceIamConfigureScriptPath formatting', () => {
   const params: UrlDeployServiceIamConfigureScriptParams = {
     integrationName: 'int-name',
     region: 'us-east-1',
@@ -40,7 +41,7 @@ test('getDeployServiceIamConfigureScriptPath formatting', async () => {
   );
 });
 
-test('getAwsOidcConfigureIdpScriptUrl formatting, without s3 fields', async () => {
+test('getAwsOidcConfigureIdpScriptUrl formatting, without s3 fields', () => {
   const params: UrlAwsOidcConfigureIdp = {
     integrationName: 'int-name',
     roleName: 'role-arn',
@@ -54,7 +55,7 @@ test('getAwsOidcConfigureIdpScriptUrl formatting, without s3 fields', async () =
   );
 });
 
-test('getAwsIamConfigureScriptAppAccessUrl formatting', async () => {
+test('getAwsIamConfigureScriptAppAccessUrl formatting', () => {
   const params: Omit<UrlAwsConfigureIamScriptParams, 'region'> = {
     iamRoleName: 'role-arn',
     accountID: '123456789012',
@@ -66,3 +67,15 @@ test('getAwsIamConfigureScriptAppAccessUrl formatting', async () => {
     `${base}${expected}`
   );
 });
+
+test('getIntegrationsEnroll appends tags', () => {
+  const tags: IntegrationTag[] = ['devicetrust', 'idp'];
+  const url = new URL(
+    'https://example.com' + cfg.getIntegrationsEnrollRoute({ tags })
+  );
+  expect(url.searchParams.getAll('tags')).toEqual(tags);
+});
+
+test('getIntegrationsEnroll without extra params', () => {
+  expect(cfg.getIntegrationsEnrollRoute()).toEqual('/web/integrations/new');
+});

web/packages/teleport/src/config.ts

@@ -45,6 +45,7 @@ import type { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
 
 import { defaultEntitlements } from './entitlement';
 import generateResourcePath from './generateResourcePath';
+import { IntegrationTag } from './Integrations/Enroll/Shared';
 import type { MfaChallengeResponse } from './services/mfa';
 import { KindAuthConnectors } from './services/resources';
 
@@ -683,6 +684,29 @@ const cfg = {
     return generatePath(cfg.routes.audit, { clusterId });
   },
 
+  /**
+   * getIntegrationsEnrollRoute returns a path to the page which lists all integrations.
+   */
+  getIntegrationsEnrollRoute({
+    tags = [],
+    searchFilter = '',
+  }: {
+    tags?: IntegrationTag[];
+    searchFilter?: string;
+  } = {}) {
+    const searchParams = new URLSearchParams();
+    tags.forEach(tag => {
+      searchParams.append('tags', tag);
+    });
+    if (searchFilter) {
+      searchParams.set('search', searchFilter);
+    }
+    const queryString = searchParams.toString();
+    const path = generatePath(cfg.routes.integrationEnroll);
+
+    return queryString ? `${path}?${queryString}` : path;
+  },
+
   /**
    * Generates a route for an Integration's enrolment page
    *