Bump compass-ui to alpha.15 and use Button asChild for Learn more

Upgrade @mattermost/compass-ui so Feature Discovery Learn more can render
as a styled ExternalLink via asChild instead of nesting an anchor in a
button (fixes hover underline and invalid HTML).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

webapp/channels/package.json

@@ -15,7 +15,7 @@
     "@guyplusplus/turndown-plugin-gfm": "1.0.7",
     "@hello-pangea/dnd": "18.0.1",
     "@mattermost/client": "12.0.0",
-    "@mattermost/compass-ui": "0.1.0-alpha.13",
+    "@mattermost/compass-ui": "0.1.0-alpha.15",
     "@mattermost/desktop-api": "6.3.0-2",
     "@mattermost/shared": "12.0.0",
     "@mattermost/types": "12.0.0",

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.test.tsx

@@ -242,8 +242,10 @@ describe('components/feature_discovery', () => {
             expect(featureLink).toBeInTheDocument();
             expect(featureLink).toHaveAttribute('href', 'https://test.mattermost.com/secondary/?utm_source=mattermost&utm_medium=in-product&utm_content=feature_discovery&uid=&sid=&edition=team&server_version=');
             expect(featureLink).toHaveTextContent('Learn more');
-            expect(featureLink.closest('button')?.className).toMatch(/size-medium/);
-            expect(featureLink.closest('button')?.className).not.toMatch(/size-large/);
+            expect(featureLink.tagName).toBe('A');
+            expect(featureLink.className).toMatch(/size-medium/);
+            expect(featureLink.className).not.toMatch(/size-large/);
+            expect(featureLink.closest('button')).toBeNull();
 
             expect(getPrevTrialLicense).toHaveBeenCalled();
             expect(getCloudSubscription).not.toHaveBeenCalled();
@@ -300,8 +302,10 @@ describe('components/feature_discovery', () => {
             expect(featureLink).toBeInTheDocument();
             expect(featureLink).toHaveAttribute('href', 'https://test.mattermost.com/secondary/?utm_source=mattermost&utm_medium=in-product&utm_content=feature_discovery&uid=&sid=&edition=team&server_version=');
             expect(featureLink).toHaveTextContent('Learn more');
-            expect(featureLink.closest('button')?.className).toMatch(/size-medium/);
-            expect(featureLink.closest('button')?.className).not.toMatch(/size-large/);
+            expect(featureLink.tagName).toBe('A');
+            expect(featureLink.className).toMatch(/size-medium/);
+            expect(featureLink.className).not.toMatch(/size-large/);
+            expect(featureLink.closest('button')).toBeNull();
 
             expect(getPrevTrialLicense).toHaveBeenCalled();
             expect(getCloudSubscription).not.toHaveBeenCalled();

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx

@@ -6,7 +6,7 @@ import React, {type JSX} from 'react';
 import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 
-import type {ButtonProps} from '@mattermost/compass-ui/components/button';
+import type {ButtonAsChildProps, ButtonProps} from '@mattermost/compass-ui/components/button';
 import {FeatureDiscoveryPanel} from '@mattermost/compass-ui/components/feature-discovery-panel';
 import type {AnalyticsState} from '@mattermost/types/admin';
 import type {CloudCustomer} from '@mattermost/types/cloud';
@@ -88,7 +88,11 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
         goToMattermostContactSalesForm(firstName, lastName, companyName, customerEmail, 'mattermost', utmMedium);
     };
 
-    renderLearnMoreSecondaryAction = (emphasis: ButtonProps['emphasis'] = 'secondary', size: ButtonProps['size'] = 'medium'): ButtonProps => ({
+    renderLearnMoreSecondaryAction = (
+        emphasis: ButtonProps['emphasis'] = 'secondary',
+        size: ButtonProps['size'] = 'medium',
+    ): ButtonAsChildProps => ({
+        asChild: true,
         emphasis,
         size,
         children: (
@@ -290,7 +294,8 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
                         />
                     }
                     primaryAction={panelActions.primaryAction}
-                    secondaryAction={panelActions.secondaryAction}
+                    // FeatureDiscoveryPanel types secondaryAction as ButtonProps; asChild is supported at runtime in compass-ui ≥0.1.0-alpha.15
+                    secondaryAction={panelActions.secondaryAction as ButtonProps | undefined}
                     illustration={{
                         className: 'FeatureDiscovery_imageWrapper',
                         'aria-label': '',

webapp/package-lock.json

@@ -67,7 +67,7 @@
         "@guyplusplus/turndown-plugin-gfm": "1.0.7",
         "@hello-pangea/dnd": "18.0.1",
         "@mattermost/client": "12.0.0",
-        "@mattermost/compass-ui": "0.1.0-alpha.13",
+        "@mattermost/compass-ui": "0.1.0-alpha.15",
         "@mattermost/desktop-api": "6.3.0-2",
         "@mattermost/shared": "12.0.0",
         "@mattermost/types": "12.0.0",
@@ -6211,9 +6211,9 @@
       "peer": true
     },
     "node_modules/@mattermost/compass-ui": {
-      "version": "0.1.0-alpha.13",
-      "resolved": "https://registry.npmjs.org/@mattermost/compass-ui/-/compass-ui-0.1.0-alpha.13.tgz",
-      "integrity": "sha512-lVw767OfBkXfg6nZ3w4cAngs5EUL30ZpJ62oI7FyJop3ibS3LQB4NCNUMW7+p9IbPD6POmwk3Kp4bdeSs1XvuQ==",
+      "version": "0.1.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/@mattermost/compass-ui/-/compass-ui-0.1.0-alpha.15.tgz",
+      "integrity": "sha512-IpTIze6Q+TzCg0dF5wmbmnxftnZ9+8erVizDaNV2sWbrAuHq93lT1DdMu7G7IJra9CMpOEGS1EejjN1xH/f73Q==",
       "peerDependencies": {
         "@mattermost/compass-icons": "^0.1.63",
         "react": "^18.2.0 || ^19.0.0",