NAS-132330 / 25.04 / Update TrueNAS Brand

src/app/enums/product-type.enum.ts

@@ -4,6 +4,6 @@ export enum ProductType {
 }
 
 export const productTypeLabels = new Map<ProductType, string>([
-  [ProductType.Scale, ''],
-  [ProductType.ScaleEnterprise, 'ENTERPRISE'],
+  [ProductType.Scale, 'Community Edition'],
+  [ProductType.ScaleEnterprise, 'Enterprise'],
 ]);

src/app/helpers/copyright-text.helper.spec.ts

@@ -1,11 +1,16 @@
+import { ProductType } from 'app/enums/product-type.enum';
 import { getCopyrightText } from 'app/helpers/copyright-text.helper';
 
 describe('getCopyrightText', () => {
-  it('should return the correct copyright text', () => {
-    expect(getCopyrightText(false, 2024)).toBe('TrueNAS ® © 2024');
+  it('general: copyright text', () => {
+    expect(getCopyrightText()).toBe('TrueNAS ® © 2024');
   });
 
-  it('should return the correct enterprise copyright text', () => {
-    expect(getCopyrightText(true, 2024)).toBe('TrueNAS ENTERPRISE ® © 2024');
+  it('community edition: copyright text', () => {
+    expect(getCopyrightText(ProductType.Scale)).toBe('TrueNAS Community Edition ® © 2024');
+  });
+
+  it('enterprise: copyright text', () => {
+    expect(getCopyrightText(ProductType.ScaleEnterprise)).toBe('TrueNAS Enterprise ® © 2024');
   });
 });

src/app/helpers/copyright-text.helper.ts

@@ -1,6 +1,9 @@
-export function getCopyrightText(isEnterprise: boolean, buildYear: number): string {
-  if (isEnterprise) {
-    return `TrueNAS ENTERPRISE ® © ${buildYear}`;
+import { environment } from 'environments/environment';
+import { ProductType, productTypeLabels } from 'app/enums/product-type.enum';
+
+export function getCopyrightText(productType?: ProductType): string {
+  if (productType) {
+    return `TrueNAS ${productTypeLabels.get(productType)} ® © ${environment.buildYear}`;
   }
-  return `TrueNAS ® © ${buildYear}`;
+  return `TrueNAS ® © ${environment.buildYear}`;
 }

src/app/helptext/about.ts

@@ -17,8 +17,7 @@ target="_blank">Enterprise level</a> support and services? Contact \
 <a href="https://www.ixsystems.com/quote-form/?utm_source=truenas+core+ui&utm_medium=os&utm_campaign=welcome"\
 target="_blank">iXsystems</a> for more information.'),
 
-  opensource: T('TrueNAS is Free and <a href="https://github.com/truenas/" target="_blank"> \
-Open Source</a> software, which is provided as-is with no warranty.'),
+  opensource: T('TrueNAS is Free and <a href="https://github.com/truenas/" target="_blank">Open Source</a> software, which is provided as-is with no warranty.'),
 
   actionBtnText: {
     about: T('Close'),

src/app/modules/layout/admin-layout/admin-layout.component.html

@@ -9,22 +9,7 @@
     (closedStart)="onMenuClosed()"
   >
     <div id="scroll-area" class="navigation-hold">
-      <div class="branding topbar" [class.truenas-scale]="!isEnterprise()">
-        <a routerLink="/dashboard" class="logo" ixTest="main-logo">
-          <ix-icon
-            class="app-logo"
-            [fullSize]="true"
-            [name]="isDefaultTheme ? 'ix-truenas-logo-mark-color': 'ix-truenas-logo-mark'"
-          ></ix-icon>
-        </a>
-        <a routerLink="/dashboard" class="logo-text" ixTest="main-logo">
-          <ix-icon
-            class="app-logo-text"
-            [fullSize]="true"
-            [name]="isDefaultTheme ? iconMarker('ix-truenas-logo-type-color'): iconMarker('ix-truenas-logo-type')"
-          ></ix-icon>
-        </a>
-      </div>
+      <ix-truenas-logo [hideText]="isSidenavCollapsed"></ix-truenas-logo>
 
       <ix-navigation
         [isSidenavCollapsed]="isSidenavCollapsed"
@@ -53,6 +38,7 @@
           @if (hostname$ | async; as hostname) {
             <div
               class="hostname-label"
+              matTooltipPosition="above"
               [matTooltip]="'Hostname: {hostname}' | translate: { hostname }"
             >{{ hostname }}</div>
           }

src/app/modules/layout/admin-layout/admin-layout.component.scss

@@ -11,78 +11,24 @@
   width: 400px;
 }
 
-.app-logo,
-.app-logo-text {
-  position: relative;
-}
-
-.app-logo {
-  height: 36px;
-  top: 13px;
-  width: 36px;
-}
-
-.logo-text {
-  align-items: center;
-  display: flex;
-}
-
-.branding {
-  align-items: center;
+ix-truenas-logo {
   background-color: var(--topbar) !important;
   color: var(--topbar-txt) !important;
-  display: flex;
   height: 48px;
-  justify-content: center;
   left: 0;
-  line-height: 64px;
-  max-width: var(--sidenav-width); /*15rem;*/
-  overflow: hidden;
+  line-height: 48px;
+  max-width: var(--sidenav-width);
   position: fixed;
-  text-align: center;
   top: 0;
   width: 100%;
   z-index: 9999;
-
-  .app-logo {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
-
-  .app-logo-text {
-    height: auto;
-    margin-right: 8px;
-    width: 96px;
-  }
-
-  &.truenas-scale {
-    .app-logo {
-      height: 40px;
-      top: 12px;
-      width: 40px;
-    }
-  }
-}
-
-.logo:focus-visible,
-.logo-text:focus-visible {
-  background: var(--focus-bg);
-  box-shadow: 0 0 0 1.5px var(--focus-brd) inset !important;
-  outline-width: 0;
 }
 
 .app-side-nav-container {
   height: 100vh;
   height: 100%;
 }
 
-.enterprise-logo .ix-icon {
-  height: auto !important;
-  margin-left: -4px !important;
-  top: 14px !important;
-  width: 108px !important;
-}
-
 .hostname-label {
   font-size: 12px;
   margin: auto;
@@ -103,7 +49,7 @@
 
   .copyright-line {
     font-size: 10px;
-    margin: 0 58px;
+    margin: 0 46px;
   }
 }
 

src/app/modules/layout/admin-layout/admin-layout.component.ts

@@ -14,7 +14,7 @@ import {
   MatDrawerMode, MatSidenav, MatSidenavContainer, MatSidenavContent,
 } from '@angular/material/sidenav';
 import { MatTooltip } from '@angular/material/tooltip';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
@@ -32,9 +32,9 @@ import { NavigationComponent } from 'app/modules/layout/navigation/navigation.co
 import { SecondaryMenuComponent } from 'app/modules/layout/secondary-menu/secondary-menu.component';
 import { SidenavService } from 'app/modules/layout/sidenav.service';
 import { TopbarComponent } from 'app/modules/layout/topbar/topbar.component';
+import { TruenasLogoComponent } from 'app/modules/layout/topbar/truenas-logo/truenas-logo.component';
 import { DefaultPageHeaderComponent } from 'app/modules/page-header/default-page-header/default-page-header.component';
 import { SlideInControllerComponent } from 'app/modules/slide-ins/components/slide-in-controller/slide-in-controller.component';
-import { TestDirective } from 'app/modules/test-id/test.directive';
 import { ThemeService } from 'app/modules/theme/theme.service';
 import { SentryService } from 'app/services/sentry.service';
 import { SessionTimeoutService } from 'app/services/session-timeout.service';
@@ -52,7 +52,6 @@ import { selectCopyrightText, selectIsEnterprise, waitForSystemInfo } from 'app/
   imports: [
     MatSidenavContainer,
     MatSidenav,
-    RouterLink,
     IxIconComponent,
     NavigationComponent,
     SecondaryMenuComponent,
@@ -67,7 +66,7 @@ import { selectCopyrightText, selectIsEnterprise, waitForSystemInfo } from 'app/
     SlideInControllerComponent,
     AsyncPipe,
     TranslateModule,
-    TestDirective,
+    TruenasLogoComponent,
   ],
 })
 export class AdminLayoutComponent implements OnInit, AfterViewInit, OnDestroy {

src/app/modules/layout/copyright-line/copyright-line.component.spec.ts

@@ -1,9 +1,10 @@
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { ProductType } from 'app/enums/product-type.enum';
 import { CopyrightLineComponent } from 'app/modules/layout/copyright-line/copyright-line.component';
 import { MapValuePipe } from 'app/modules/pipes/map-value/map-value.pipe';
 import { AppState } from 'app/store';
-import { selectBuildYear, selectIsEnterprise } from 'app/store/system-info/system-info.selectors';
+import { selectProductType } from 'app/store/system-info/system-info.selectors';
 
 describe('CopyrightLineComponent', () => {
   let spectator: Spectator<CopyrightLineComponent>;
@@ -15,11 +16,8 @@ describe('CopyrightLineComponent', () => {
     providers: [
       provideMockStore({
         selectors: [{
-          selector: selectIsEnterprise,
-          value: false,
-        }, {
-          selector: selectBuildYear,
-          value: 2024,
+          selector: selectProductType,
+          value: null,
         }],
       }),
     ],
@@ -30,8 +28,8 @@ describe('CopyrightLineComponent', () => {
     store$ = spectator.inject(MockStore);
   });
 
-  it('shows copyright line with product type and year of build', () => {
-    store$.overrideSelector(selectIsEnterprise, false);
+  it('shows copyright line with unknown product type and year of build', () => {
+    store$.overrideSelector(selectProductType, null);
     store$.refreshState();
     spectator.detectChanges();
 
@@ -40,12 +38,22 @@ describe('CopyrightLineComponent', () => {
     expect(spectator.query('a')).toHaveAttribute('href', 'https://truenas.com/testdrive');
   });
 
+  it('shows copyright line with product type and year of build', () => {
+    store$.overrideSelector(selectProductType, ProductType.Scale);
+    store$.refreshState();
+    spectator.detectChanges();
+
+    expect(spectator.fixture.nativeElement).toHaveText('TrueNAS Community Edition ® © 2024');
+    expect(spectator.fixture.nativeElement).toHaveText('iXsystems, Inc');
+    expect(spectator.query('a')).toHaveAttribute('href', 'https://truenas.com/testdrive');
+  });
+
   it('shows copyright line with enterprise product type and year of build', () => {
-    store$.overrideSelector(selectIsEnterprise, true);
+    store$.overrideSelector(selectProductType, ProductType.ScaleEnterprise);
     store$.refreshState();
     spectator.detectChanges();
 
-    expect(spectator.fixture.nativeElement).toHaveText('TrueNAS ENTERPRISE ® © 2024');
+    expect(spectator.fixture.nativeElement).toHaveText('TrueNAS Enterprise ® © 2024');
     expect(spectator.fixture.nativeElement).toHaveText('iXsystems, Inc');
     expect(spectator.query('a')).toHaveAttribute('href', 'https://truenas.com/production');
   });

src/app/modules/layout/copyright-line/copyright-line.component.ts

@@ -18,6 +18,7 @@ import { selectCopyrightText, selectIsEnterprise } from 'app/store/system-info/s
 export class CopyrightLineComponent {
   readonly withIxLogo = input(false);
   readonly copyrightText = toSignal(this.store$.select(selectCopyrightText));
+
   readonly isEnterprise = toSignal(this.store$.select(selectIsEnterprise));
   readonly targetHref = computed(() => {
     return this.isEnterprise() ? 'https://truenas.com/production' : 'https://truenas.com/testdrive';

src/app/modules/layout/topbar/about-dialog/about-dialog.component.html

@@ -2,11 +2,7 @@
   <div class="header">
     <div class="header-overlay">
       <div class="logo-wrapper">
-        <ix-icon
-          name="ix-truenas-logo"
-          class="logo"
-          [fullSize]="true"
-        ></ix-icon>
+        <ix-truenas-logo color="white" [fullSize]="true"></ix-truenas-logo>
       </div>
     </div>
   </div>
@@ -30,13 +26,11 @@ <h1 class="help">{{ helptext.help | translate }}</h1>
         [innerHtml]="helptext.forums | translate"
       ></div>
     </div>
-
-    @if (!isEnterprise()) {
+
     <div
       id="open-source"
       [innerHtml]="helptext.opensource | translate"
-      ></div>
-    }
+    ></div>
 
     <div id="system-version">
       {{ ('System Version' | translate) + ': ' +  (systemVersion$ | async) }}

src/app/modules/layout/topbar/about-dialog/about-dialog.component.scss

@@ -15,11 +15,18 @@
 
 .header-overlay {
   background-color: rgba(0, 0, 0, 0.5);
-  color: white;
+  color: var(--fg1);
   padding: 30px 10px;
   text-align: center;
 }
 
+.logo-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 200px;
+}
+
 #title {
   font-weight: 700;
   padding-bottom: 1rem;
@@ -34,19 +41,20 @@
   display: flex;
   margin: 20px 10px;
 
-  > *:first-child {
+  >*:first-child {
     flex: 1 1 10%;
   }
 
-  > *:last-child {
+  >*:last-child {
     flex: 1 1 90%;
   }
 }
 
 .bullet-icon {
   font-size: 36px;
   height: 36px;
-  width: 36px;;
+  width: 36px;
+  ;
 }
 
 #ix-img {
@@ -93,8 +101,9 @@
   text-align: right;
 }
 
-.logo-wrapper .logo {
+.logo-wrapper ix-truenas-logo {
   height: auto;
+  margin: auto;
   position: relative;
   width: 256px;
   z-index: 2;
@@ -115,6 +124,6 @@
   .bullet-icon {
     font-size: 24px;
     height: 24px;
-    width: 24px;;
+    width: 24px;
   }
 }