fix: logo for the About modal window

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Sep 7, 2023 · c571c55 · c571c55
1 parent 30f814b
commit c571c55
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/AboutMenu/Modal.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/AboutMenu/Modal.tsx
@@ -29,9 +29,9 @@ type Props = {
 };
 
 export class AboutModal extends React.PureComponent<Props> {
-  private browserVersion: string | undefined | null;
-  private browserOS: string | undefined | null;
-  private browserName: string | undefined;
+  private readonly browserVersion: string | undefined | null;
+  private readonly browserOS: string | undefined | null;
+  private readonly browserName: string | undefined;
 
   constructor(props: Props) {
     super(props);

diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/AboutMenu/index.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/AboutMenu/index.tsx
@@ -23,6 +23,7 @@ import { BrandingData } from '../../../../services/bootstrap/branding.constant';
 type Props = {
   branding: BrandingData;
   username: string;
+  dashboardLogo?: { base64data: string; mediatype: string };
 };
 type State = {
   isLauncherOpen: boolean;
@@ -88,11 +89,16 @@ export class AboutMenu extends React.PureComponent<Props, State> {
   }
 
   public render(): React.ReactElement {
-    const { username } = this.props;
+    const { username, dashboardLogo } = this.props;
     const { isLauncherOpen, isModalOpen } = this.state;
 
     const { logoFile, name, productVersion } = this.props.branding;
 
+    const logoSrc =
+      dashboardLogo !== undefined
+        ? `data:${dashboardLogo.mediatype};base64,${dashboardLogo.base64data}`
+        : logoFile;
+
     return (
       <>
         <ApplicationLauncher
@@ -107,7 +113,7 @@ export class AboutMenu extends React.PureComponent<Props, State> {
           isOpen={isModalOpen}
           closeModal={() => this.closeModal()}
           username={username}
-          logo={logoFile}
+          logo={logoSrc}
           productName={name}
           serverVersion={productVersion}
         />

diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/index.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/index.tsx
@@ -27,6 +27,7 @@ import { AboutMenu } from './AboutMenu';
 import UserMenu from './UserMenu';
 import { ApplicationsMenu } from './ApplicationsMenu';
 import { selectApplications } from '../../../store/ClusterInfo/selectors';
+import { selectDashboardLogo } from '../../../store/ServerConfig/selectors';
 
 type Props = MappedProps & {
   history: History;
@@ -50,7 +51,11 @@ export class HeaderTools extends React.PureComponent<Props> {
           <PageHeaderToolsGroup>
             {applications.length !== 0 && <ApplicationsMenu applications={applications} />}
             <PageHeaderToolsItem>
-              <AboutMenu branding={this.props.branding} username={username} />
+              <AboutMenu
+                branding={this.props.branding}
+                dashboardLogo={this.props.dashboardLogo}
+                username={username}
+              />
             </PageHeaderToolsItem>
             {isUserAuthenticated && (
               <PageHeaderToolsItem>
@@ -73,6 +78,7 @@ export class HeaderTools extends React.PureComponent<Props> {
 const mapStateToProps = (state: AppState) => ({
   userProfile: selectUserProfile(state),
   branding: selectBranding(state),
+  dashboardLogo: selectDashboardLogo(state),
   applications: selectApplications(state),
 });