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

app/portainer/components/theme/theme-settings.controller.js

@@ -1,34 +1,51 @@
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { queryKeys } from '@/portainer/users/queries/queryKeys';
+import { queryClient } from '@/react-tools/react-query';
 import { options } from './options';
 
 export default class ThemeSettingsController {
   /* @ngInject */
-  constructor($async, Authentication, ThemeManager, StateManager, UserService, Notifications) {
+  constructor($async, Authentication, ThemeManager, StateManager, UserService) {
     this.$async = $async;
     this.Authentication = Authentication;
     this.ThemeManager = ThemeManager;
     this.StateManager = StateManager;
     this.UserService = UserService;
-    this.Notifications = Notifications;
 
-    this.setTheme = this.setTheme.bind(this);
+    this.setThemeColor = this.setThemeColor.bind(this);
+    this.setSubtleUpgradeButton = this.setSubtleUpgradeButton.bind(this);
   }
 
-  async setTheme(theme) {
-    try {
-      if (theme === 'auto' || !theme) {
+  async setThemeColor(color) {
+    return this.$async(async () => {
+      if (color === 'auto' || !color) {
         this.ThemeManager.autoTheme();
       } else {
-        this.ThemeManager.setTheme(theme);
+        this.ThemeManager.setTheme(color);
       }
 
-      this.state.userTheme = theme;
+      this.state.themeColor = color;
+      this.updateThemeSettings({ color });
+    });
+  }
+
+  async setSubtleUpgradeButton(value) {
+    return this.$async(async () => {
+      this.state.subtleUpgradeButton = value;
+      this.updateThemeSettings({ subtleUpgradeButton: value });
+    });
+  }
+
+  async updateThemeSettings(theme) {
+    try {
       if (!this.state.isDemo) {
-        await this.UserService.updateUserTheme(this.state.userId, this.state.userTheme);
+        await this.UserService.updateUserTheme(this.state.userId, theme);
+        await queryClient.invalidateQueries(queryKeys.user(this.state.userId));
       }
 
-      this.Notifications.success('Success', 'User theme successfully updated');
+      notifySuccess('Success', 'User theme settings successfully updated');
     } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to update user theme');
+      notifyError('Failure', err, 'Unable to update user theme settings');
     }
   }
 
@@ -38,19 +55,21 @@ export default class ThemeSettingsController {
 
       this.state = {
         userId: null,
-        userTheme: '',
-        defaultTheme: 'auto',
+        themeColor: 'auto',
         isDemo: state.application.demoEnvironment.enabled,
+        subtleUpgradeButton: false,
       };
 
       this.state.availableThemes = options;
 
       try {
         this.state.userId = await this.Authentication.getUserDetails().ID;
-        const data = await this.UserService.user(this.state.userId);
-        this.state.userTheme = data.UserTheme || this.state.defaultTheme;
+        const user = await this.UserService.user(this.state.userId);
+
+        this.state.themeColor = user.ThemeSettings.color || this.state.themeColor;
+        this.state.subtleUpgradeButton = !!user.ThemeSettings.subtleUpgradeButton;
       } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to get user details');
+        notifyError('Failure', err, 'Unable to get user details');
       }
     });
   }

app/portainer/components/theme/theme-settings.html

@@ -3,12 +3,23 @@
     <rd-widget-header icon="sliders" title-text="User theme"></rd-widget-header>
     <rd-widget-body>
       <form class="form-horizontal">
-        <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
+        <box-selector radio-name="'theme'" value="$ctrl.state.themeColor" options="$ctrl.state.availableThemes" on-change="($ctrl.setThemeColor)"></box-selector>
+
+        <p class="vertical-center mt-2">
+          <pr-icon icon="'alert-circle'" class-name="'icon-primary'"></pr-icon>
+          <span class="small">Dark and High-contrast theme are experimental. Some UI components might not display properly.</span>
+        </p>
+
+        <div class="mt-3">
+          <por-switch-field
+            tooltip="'This setting toggles a more subtle UI for the upgrade button located at the top of the sidebar'"
+            label-class="'col-sm-2'"
+            label="'Subtle upgrade button'"
+            checked="$ctrl.state.subtleUpgradeButton"
+            on-change="($ctrl.setSubtleUpgradeButton)"
+          ></por-switch-field>
+        </div>
       </form>
-      <p class="vertical-center mt-2">
-        <pr-icon icon="'alert-circle'" class-name="'icon-primary'"></pr-icon>
-        Dark and High-contrast theme are experimental. Some UI components might not display properly.
-      </p>
     </rd-widget-body>
   </rd-widget>
 </div>

app/portainer/models/user.js

@@ -2,7 +2,7 @@ export function UserViewModel(data) {
   this.Id = data.Id;
   this.Username = data.Username;
   this.Role = data.Role;
-  this.UserTheme = data.UserTheme;
+  this.ThemeSettings = data.ThemeSettings;
   if (data.Role === 1) {
     this.RoleName = 'administrator';
   } else {

app/portainer/services/api/userService.js

@@ -67,8 +67,8 @@ export function UserService($q, Users, TeamService, TeamMembershipService) {
     return Users.updatePassword({ id: id }, payload).$promise;
   };
 
-  service.updateUserTheme = function (id, userTheme) {
-    return Users.updateTheme({ id }, { userTheme }).$promise;
+  service.updateUserTheme = function (id, theme) {
+    return Users.updateTheme({ id }, { theme }).$promise;
   };
 
   service.userMemberships = function (id) {

app/portainer/services/authentication.js

@@ -102,7 +102,7 @@ angular.module('portainer.app').factory('Authentication', [
       const data = await UserService.user(user.ID);
 
       // Initialize user theme base on UserTheme from database
-      const userTheme = data.UserTheme;
+      const userTheme = data.ThemeSettings ? data.ThemeSettings.color : 'auto';
       if (userTheme === 'auto' || !userTheme) {
         ThemeManager.autoTheme();
       } else {

app/portainer/services/themeManager.js

@@ -1,7 +1,6 @@
 angular.module('portainer.app').service('ThemeManager', ThemeManager);
 
 /* @ngInject */
-
 export function ThemeManager(StateManager) {
   return {
     setTheme,

app/portainer/users/queries/queryKeys.ts

@@ -0,0 +1,6 @@
+import { UserId } from '../types';
+
+export const queryKeys = {
+  base: () => ['users'] as const,
+  user: (id: UserId) => [...queryKeys.base(), id] as const,
+};

app/portainer/users/queries/useUser.ts

@@ -6,11 +6,13 @@ import { withError } from '@/react-tools/react-query';
 import { buildUrl } from '../user.service';
 import { User, UserId } from '../types';
 
+import { queryKeys } from './queryKeys';
+
 export function useUser(
   id: UserId,
   { staleTime }: { staleTime?: number } = {}
 ) {
-  return useQuery(['users', id], () => getUser(id), {
+  return useQuery(queryKeys.user(id), () => getUser(id), {
     ...withError('Unable to retrieve user details'),
     staleTime,
   });

app/portainer/users/types.ts

@@ -20,15 +20,8 @@ export type User = {
   EndpointAuthorizations: {
     [endpointId: EnvironmentId]: AuthorizationMap;
   };
-  // UserTheme: string;
-  // this.EndpointAuthorizations = data.EndpointAuthorizations;
-  // this.PortainerAuthorizations = data.PortainerAuthorizations;
-  // if (data.Role === 1) {
-  //   this.RoleName = 'administrator';
-  // } else {
-  //   this.RoleName = 'user';
-  // }
-  // this.AuthenticationMethod = data.AuthenticationMethod;
-  // this.Checked = false;
-  // this.EndpointAuthorizations = data.EndpointAuthorizations;
+  ThemeSettings: {
+    color: 'dark' | 'light' | 'highcontrast' | 'auto';
+    subtleUpgradeButton: boolean;
+  };
 };

app/portainer/views/account/accountController.js

@@ -10,13 +10,11 @@ angular.module('portainer.app').controller('AccountController', [
   'Notifications',
   'SettingsService',
   'StateManager',
-  'ThemeManager',
-  function ($scope, $state, Authentication, UserService, Notifications, SettingsService, StateManager, ThemeManager) {
+  function ($scope, $state, Authentication, UserService, Notifications, SettingsService, StateManager) {
     $scope.formValues = {
       currentPassword: '',
       newPassword: '',
       confirmPassword: '',
-      userTheme: '',
     };
 
     $scope.updatePassword = async function () {
@@ -98,24 +96,6 @@ angular.module('portainer.app').controller('AccountController', [
       });
     };
 
-    // Update DOM for theme attribute & LocalStorage
-    $scope.setTheme = function (theme) {
-      ThemeManager.setTheme(theme);
-      StateManager.updateTheme(theme);
-    };
-
-    // Rest API Call to update theme with userID in DB
-    $scope.updateTheme = function () {
-      UserService.updateUserTheme($scope.userID, $scope.formValues.userTheme)
-        .then(function success() {
-          Notifications.success('Success', 'User theme successfully updated');
-          $state.reload();
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, err.msg);
-        });
-    };
-
     async function initView() {
       const state = StateManager.getState();
       const userDetails = Authentication.getUserDetails();
@@ -128,10 +108,6 @@ angular.module('portainer.app').controller('AccountController', [
         $scope.isDemoUser = state.application.demoEnvironment.users.includes($scope.userID);
       }
 
-      const data = await UserService.user($scope.userID);
-
-      $scope.formValues.userTheme = data.UserTheme;
-
       SettingsService.publicSettings()
         .then(function success(data) {
           $scope.AuthenticationMethod = data.AuthenticationMethod;

app/react-tools/test-mocks.ts

@@ -12,12 +12,15 @@ export function createMockUsers(
     Id: value,
     Username: `user${value}`,
     Role: getRoles(roles, value),
-    UserTheme: '',
     RoleName: '',
     AuthenticationMethod: '',
     Checked: false,
     EndpointAuthorizations: {},
     PortainerAuthorizations: {},
+    ThemeSettings: {
+      color: 'auto',
+      subtleUpgradeButton: false,
+    },
   }));
 }
 

app/react/components/UsersSelector/UsersSelector.mocks.ts

@@ -5,7 +5,6 @@ export function createMockUser(id: number, username: string): UserViewModel {
     Id: id,
     Username: username,
     Role: 2,
-    UserTheme: '',
     EndpointAuthorizations: {},
     PortainerAuthorizations: {
       PortainerDockerHubInspect: true,
@@ -25,5 +24,9 @@ export function createMockUser(id: number, username: string): UserViewModel {
     RoleName: 'user',
     Checked: false,
     AuthenticationMethod: '',
+    ThemeSettings: {
+      color: 'auto',
+      subtleUpgradeButton: false,
+    },
   };
 }

app/react/portainer/users/teams/ListView/CreateTeamForm/CreateTeamForm.mocks.ts

@@ -20,7 +20,10 @@ export function mockExampleData() {
       Id: 10,
       Username: 'user1',
       Role: 2,
-      UserTheme: '',
+      ThemeSettings: {
+        color: 'auto',
+        subtleUpgradeButton: false,
+      },
       EndpointAuthorizations: {},
       PortainerAuthorizations: {
         PortainerDockerHubInspect: true,
@@ -45,7 +48,10 @@ export function mockExampleData() {
       Id: 13,
       Username: 'user2',
       Role: 2,
-      UserTheme: '',
+      ThemeSettings: {
+        color: 'auto',
+        subtleUpgradeButton: false,
+      },
       EndpointAuthorizations: {},
       PortainerAuthorizations: {
         PortainerDockerHubInspect: true,

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();
       },