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,12 @@
+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');
+    expect(getCopyrightText(ProductType.Scale, 2024)).toBe('TrueNAS Community Edition ® © 2024');
   });
 
   it('should return the correct enterprise copyright text', () => {
-    expect(getCopyrightText(true, 2024)).toBe('TrueNAS ENTERPRISE ® © 2024');
+    expect(getCopyrightText(ProductType.ScaleEnterprise, 2024)).toBe('TrueNAS Enterprise ® © 2024');
   });
 });

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

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

src/app/helptext/about.ts

@@ -17,7 +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"> \
+  opensource: T('TrueNAS Community Edition is Free and <a href="https://github.com/truenas/" target="_blank"> \
 Open Source</a> software, which is provided as-is with no warranty.'),
 
   actionBtnText: {

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 { selectBuildYear, selectProductType } from 'app/store/system-info/system-info.selectors';
 
 describe('CopyrightLineComponent', () => {
   let spectator: Spectator<CopyrightLineComponent>;
@@ -15,8 +16,8 @@ describe('CopyrightLineComponent', () => {
     providers: [
       provideMockStore({
         selectors: [{
-          selector: selectIsEnterprise,
-          value: false,
+          selector: selectProductType,
+          value: ProductType.Scale,
         }, {
           selector: selectBuildYear,
           value: 2024,
@@ -31,21 +32,21 @@ describe('CopyrightLineComponent', () => {
   });
 
   it('shows copyright line with product type and year of build', () => {
-    store$.overrideSelector(selectIsEnterprise, false);
+    store$.overrideSelector(selectProductType, ProductType.Scale);
     store$.refreshState();
     spectator.detectChanges();
 
-    expect(spectator.fixture.nativeElement).toHaveText('TrueNAS ® © 2024');
+    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/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,7 +26,7 @@ <h1 class="help">{{ helptext.help | translate }}</h1>
         [innerHtml]="helptext.forums | translate"
       ></div>
     </div>
-    
+
     @if (!isEnterprise()) {
     <div
       id="open-source"

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

@@ -34,19 +34,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 {
@@ -115,6 +116,6 @@
   .bullet-icon {
     font-size: 24px;
     height: 24px;
-    width: 24px;;
+    width: 24px;
   }
 }

src/app/modules/layout/topbar/about-dialog/about-dialog.component.spec.ts

@@ -4,11 +4,11 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialogRef } from '@angular/material/dialog';
 import { createComponentFactory, Spectator, mockProvider } from '@ngneat/spectator/jest';
 import { provideMockStore } from '@ngrx/store/testing';
-import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 import { helptextAbout } from 'app/helptext/about';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { AboutDialogComponent } from 'app/modules/layout/topbar/about-dialog/about-dialog.component';
+import { TruenasLogoComponent } from 'app/modules/layout/topbar/truenas-logo/truenas-logo.component';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SystemInfoState } from 'app/store/system-info/system-info.reducer';
 import { selectSystemInfoState } from 'app/store/system-info/system-info.selectors';
@@ -19,9 +19,7 @@ describe('AboutDialogComponent', () => {
 
   const createComponent = createComponentFactory({
     component: AboutDialogComponent,
-    imports: [
-      TranslateModule.forRoot(),
-    ],
+    imports: [],
     providers: [
       provideMockStore({
         selectors: [
@@ -40,7 +38,10 @@ describe('AboutDialogComponent', () => {
       mockProvider(ApiService),
       mockProvider(MatDialogRef),
     ],
-    declarations: [MockComponent(IxIconComponent)],
+    declarations: [
+      MockComponent(IxIconComponent),
+      MockComponent(TruenasLogoComponent),
+    ],
   });
 
   beforeEach(() => {
@@ -76,6 +77,6 @@ describe('AboutDialogComponent', () => {
 
   it('should display product-specific open source text', () => {
     const openSourceElement = spectator.query('#open-source');
-    expect(openSourceElement).toHaveText('TrueNAS is Free and  Open Source software, which is provided as-is with no warranty.');
+    expect(openSourceElement).toHaveText('TrueNAS Community Edition is Free and  Open Source software, which is provided as-is with no warranty.');
   });
 });

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

@@ -9,6 +9,7 @@ import { map } from 'rxjs';
 import { helptextAbout } from 'app/helptext/about';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { CopyrightLineComponent } from 'app/modules/layout/copyright-line/copyright-line.component';
+import { TruenasLogoComponent } from 'app/modules/layout/topbar/truenas-logo/truenas-logo.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { AppState } from 'app/store';
 import { selectIsEnterprise, selectSystemInfoState } from 'app/store/system-info/system-info.selectors';
@@ -28,6 +29,7 @@ import { selectIsEnterprise, selectSystemInfoState } from 'app/store/system-info
     TranslateModule,
     TestDirective,
     AsyncPipe,
+    TruenasLogoComponent,
   ],
 })
 export class AboutDialogComponent {

src/app/modules/layout/topbar/topbar.component.html

@@ -16,12 +16,7 @@
 
       <ix-global-search-trigger></ix-global-search-trigger>
 
-      <a class="mobile-logo" routerLink="/" ixTest="mobile-logo">
-        <div class="mobile-logo-container">
-          <ix-icon name="ix-truenas-logo-mark-color" class="logomark" [fullSize]="true"></ix-icon>
-          <ix-icon name="ix-truenas-logo-type-color" class="logotype" [fullSize]="true"></ix-icon>
-        </div>
-      </a>
+      <ix-truenas-logo></ix-truenas-logo>
 
       <div class="topbar-mobile-footer" [class.has-console-footer]="hasConsoleFooter$ | async">
         <ix-logo></ix-logo>