feat(upgrade): show subtle banner [EE-5017] (#8489)

app/react/sidebar/UpgradeBEBanner/GetLicenseDialog.tsx

@@ -1,3 +1,5 @@
+import { useAnalytics } from '@/angulartics.matomo/analytics-services';
+
 import { HubspotForm } from '@@/HubspotForm';
 import { Modal } from '@@/modals/Modal';
 
@@ -11,6 +13,7 @@ export function GetLicenseDialog({
   // form is loaded from hubspot, so it won't have the same styling as the rest of the app
   // since it won't support darkmode, we enforce a white background and black text for the components we use
   // (Modal, CloseButton, loading text)
+  const { trackEvent } = useAnalytics();
 
   return (
     <Modal
@@ -25,7 +28,14 @@ export function GetLicenseDialog({
             region="na1"
             portalId="4731999"
             formId="1ef8ea88-3e03-46c5-8aef-c1d9f48fd06b"
-            onSubmitted={() => goToUploadLicense(true)}
+            onSubmitted={() => {
+              trackEvent('portainer-upgrade-license-key-requested', {
+                category: 'portainer',
+                metadata: { 'Upgrade-key-requested': true },
+              });
+
+              goToUploadLicense(true);
+            }}
             loading={<div className="text-black">Loading...</div>}
           />
         </div>

app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx

@@ -1,5 +1,6 @@
-import { ArrowRight } from 'lucide-react';
+import { ArrowUpCircle } from 'lucide-react';
 import { useState } from 'react';
+import clsx from 'clsx';
 
 import { useAnalytics } from '@/angulartics.matomo/analytics-services';
 import { useNodesCount } from '@/react/portainer/system/useNodesCount';
@@ -7,9 +8,10 @@ import {
   ContainerPlatform,
   useSystemInfo,
 } from '@/react/portainer/system/useSystemInfo';
-import { useUser } from '@/react/hooks/useUser';
+import { useCurrentUser } from '@/react/hooks/useUser';
 import { withEdition } from '@/react/portainer/feature-flags/withEdition';
 import { withHideOnExtension } from '@/react/hooks/withHideOnExtension';
+import { useUser } from '@/portainer/users/queries/useUser';
 
 import { useSidebarState } from '../useSidebarState';
 
@@ -25,15 +27,21 @@ const enabledPlatforms: Array<ContainerPlatform> = [
 ];
 
 function UpgradeBEBanner() {
-  const { isAdmin } = useUser();
+  const {
+    isAdmin,
+    user: { Id },
+  } = useCurrentUser();
+
   const { trackEvent } = useAnalytics();
   const { isOpen: isSidebarOpen } = useSidebarState();
+
   const nodesCountQuery = useNodesCount();
   const systemInfoQuery = useSystemInfo();
+  const userQuery = useUser(Id);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  if (!nodesCountQuery.isSuccess || !systemInfoQuery.data) {
+  if (!nodesCountQuery.isSuccess || !systemInfoQuery.data || !userQuery.data) {
     return null;
   }
 
@@ -49,19 +57,42 @@ function UpgradeBEBanner() {
     agents: systemInfo.agents,
   };
 
-  if (!enabledPlatforms.includes(systemInfo.platform)) {
+  if (
+    !enabledPlatforms.includes(systemInfo.platform) &&
+    process.env.NODE_ENV !== 'development'
+  ) {
     return null;
   }
 
+  const subtleButton = userQuery.data.ThemeSettings.subtleUpgradeButton;
+
   return (
     <>
       <button
         type="button"
-        className="flex w-full items-center justify-center gap-3 border-0 bg-warning-5 py-2 font-semibold text-warning-9"
+        className={clsx(
+          'flex w-full items-center justify-center gap-1 py-2 pr-2 hover:underline',
+          {
+            'border-0 bg-warning-5 font-semibold text-warning-9': !subtleButton,
+            'border border-solid border-blue-9 bg-[#023959] font-medium text-white th-dark:border-[#343434] th-dark:bg-black':
+              subtleButton,
+          },
+          'th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:font-medium th-highcontrast:text-white'
+        )}
         onClick={handleClick}
       >
+        <ArrowUpCircle
+          className={clsx(
+            'lucide text-lg',
+            {
+              'fill-warning-9 stroke-warning-5': !subtleButton,
+              'fill-warning-6 stroke-[#023959] th-dark:stroke-black':
+                subtleButton,
+            },
+            'th-highcontrast:fill-warning-6  th-highcontrast:stroke-black'
+          )}
+        />
         {isSidebarOpen && <>Upgrade to Business Edition</>}
-        <ArrowRight className="lucide text-lg" />
       </button>
 
       {isOpen && <UpgradeDialog onDismiss={() => setIsOpen(false)} />}

app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx

@@ -3,6 +3,7 @@ import { object, SchemaOf, string } from 'yup';
 
 import { useUpgradeEditionMutation } from '@/react/portainer/system/useUpgradeEditionMutation';
 import { notifySuccess } from '@/portainer/services/notifications';
+import { useAnalytics } from '@/angulartics.matomo/analytics-services';
 
 import { Button, LoadingButton } from '@@/buttons';
 import { FormControl } from '@@/form-components/FormControl';
@@ -30,6 +31,7 @@ export function UploadLicenseDialog({
   isGetLicenseSubmitted: boolean;
 }) {
   const upgradeMutation = useUpgradeEditionMutation();
+  const { trackEvent } = useAnalytics();
 
   return (
     <Modal
@@ -99,6 +101,13 @@ export function UploadLicenseDialog({
   function handleSubmit(values: FormValues) {
     upgradeMutation.mutate(values, {
       onSuccess() {
+        trackEvent('portainer-upgrade-license-key-provided', {
+          category: 'portainer',
+          metadata: {
+            Upgrade: 'true',
+          },
+        });
+
         notifySuccess('Starting upgrade', 'License validated successfully');
         goToLoading();
       },