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;