fix(upgrade): remove yellow upgrade banner EE-5141 (#8641)

api/datastore/test_data/output_24_to_latest.json

@@ -905,8 +905,7 @@
       },
       "Role": 1,
       "ThemeSettings": {
-        "color": "",
+        "color": ""
-        "subtleUpgradeButton": false
       },
       "TokenIssueAt": 0,
       "UserTheme": "",
@@ -936,8 +935,7 @@
       },
       "Role": 1,
       "ThemeSettings": {
-        "color": "",
+        "color": ""
-        "subtleUpgradeButton": false
       },
       "TokenIssueAt": 0,
       "UserTheme": "",

api/http/handler/users/user_update.go

@@ -18,8 +18,6 @@ import (
 type themePayload struct {
 	// Color represents the color theme of the UI
 	Color *string `json:"color" example:"dark" enums:"dark,light,highcontrast,auto"`
-	// SubtleUpgradeButton indicates if the upgrade banner should be displayed in a subtle way
-	SubtleUpgradeButton *bool `json:"subtleUpgradeButton" example:"false"`
 }
 
 type userUpdatePayload struct {
@@ -33,11 +31,11 @@ type userUpdatePayload struct {
 
 func (payload *userUpdatePayload) Validate(r *http.Request) error {
 	if govalidator.Contains(payload.Username, " ") {
-		return errors.New("Invalid username. Must not contain any whitespace")
+		return errors.New("invalid username. Must not contain any whitespace")
 	}
 
 	if payload.Role != 0 && payload.Role != 1 && payload.Role != 2 {
-		return errors.New("Invalid role value. Value must be one of: 1 (administrator) or 2 (regular user)")
+		return errors.New("invalid role value. Value must be one of: 1 (administrator) or 2 (regular user)")
 	}
 	return nil
 }
@@ -120,10 +118,6 @@ func (handler *Handler) userUpdate(w http.ResponseWriter, r *http.Request) *http
 		if payload.Theme.Color != nil {
 			user.ThemeSettings.Color = *payload.Theme.Color
 		}
-
-		if payload.Theme.SubtleUpgradeButton != nil {
-			user.ThemeSettings.SubtleUpgradeButton = *payload.Theme.SubtleUpgradeButton
-		}
 	}
 
 	if payload.Role != 0 {

api/portainer.go

@@ -1286,8 +1286,6 @@ type (
 	UserThemeSettings struct {
 		// Color represents the color theme of the UI
 		Color string `json:"color" example:"dark" enums:"dark,light,highcontrast,auto"`
-		// SubtleUpgradeButton indicates if the upgrade banner should be displayed in a subtle way
-		SubtleUpgradeButton bool `json:"subtleUpgradeButton"`
 	}
 
 	// Webhook represents a url webhook that can be used to update a service

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

@@ -13,7 +13,6 @@ export default class ThemeSettingsController {
     this.UserService = UserService;
 
     this.setThemeColor = this.setThemeColor.bind(this);
-    this.setSubtleUpgradeButton = this.setSubtleUpgradeButton.bind(this);
   }
 
   async setThemeColor(color) {
@@ -29,13 +28,6 @@ export default class ThemeSettingsController {
     });
   }
 
-  async setSubtleUpgradeButton(value) {
-    return this.$async(async () => {
-      this.state.subtleUpgradeButton = value;
-      this.updateThemeSettings({ subtleUpgradeButton: value });
-    });
-  }
-
   async updateThemeSettings(theme) {
     try {
       if (!this.state.isDemo) {
@@ -57,7 +49,6 @@ export default class ThemeSettingsController {
         userId: null,
         themeColor: 'auto',
         isDemo: state.application.demoEnvironment.enabled,
-        subtleUpgradeButton: false,
       };
 
       this.state.availableThemes = options;
@@ -67,7 +58,6 @@ export default class ThemeSettingsController {
         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) {
         notifyError('Failure', err, 'Unable to get user details');
       }

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

@@ -9,16 +9,6 @@
           <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>
     </rd-widget-body>
   </rd-widget>

app/portainer/users/types.ts

@@ -22,6 +22,5 @@ export type User = {
   };
   ThemeSettings: {
     color: 'dark' | 'light' | 'highcontrast' | 'auto';
-    subtleUpgradeButton: boolean;
   };
 };

app/react-tools/test-mocks.ts

@@ -19,7 +19,6 @@ export function createMockUsers(
     PortainerAuthorizations: {},
     ThemeSettings: {
       color: 'auto',
-      subtleUpgradeButton: false,
     },
   }));
 }

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

@@ -26,7 +26,6 @@ export function createMockUser(id: number, username: string): UserViewModel {
     AuthenticationMethod: '',
     ThemeSettings: {
       color: 'auto',
-      subtleUpgradeButton: false,
     },
   };
 }

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

@@ -22,7 +22,6 @@ export function mockExampleData() {
       Role: 2,
       ThemeSettings: {
         color: 'auto',
-        subtleUpgradeButton: false,
       },
       EndpointAuthorizations: {},
       PortainerAuthorizations: {
@@ -50,7 +49,6 @@ export function mockExampleData() {
       Role: 2,
       ThemeSettings: {
         color: 'auto',
-        subtleUpgradeButton: false,
       },
       EndpointAuthorizations: {},
       PortainerAuthorizations: {

app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx

@@ -64,19 +64,13 @@ function UpgradeBEBanner() {
     return null;
   }
 
-  const subtleButton = userQuery.data.ThemeSettings.subtleUpgradeButton;
-
   return (
     <>
       <button
         type="button"
         className={clsx(
           'flex w-full items-center justify-center gap-1 py-2 pr-2 hover:underline',
-          {
+          'border border-solid border-blue-9 bg-[#023959] font-medium text-white th-dark:border-[#343434] th-dark:bg-black',
-            '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}
@@ -84,11 +78,7 @@ function UpgradeBEBanner() {
         <ArrowUpCircle
           className={clsx(
             'lucide text-lg',
-            {
+            'fill-warning-6 stroke-[#023959] th-dark:stroke-black',
-              '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'
           )}
         />

app/react/test-utils/withUserProvider.tsx

@@ -10,7 +10,6 @@ const mockUser: User = {
   Username: 'mock',
   ThemeSettings: {
     color: 'auto',
-    subtleUpgradeButton: false,
   },
 };