Merge pull request #14254 from vvlladd28/feature/show-github-bage/star

Add show GitHub button to main toolbar

ui-ngx/src/app/core/http/admin.service.ts

@@ -21,9 +21,9 @@ import { HttpClient } from '@angular/common/http';
 import {
   AdminSettings,
   AutoCommitSettings,
-  MailConfigTemplate,
   FeaturesInfo,
   JwtSettings,
+  MailConfigTemplate,
   MailServerSettings,
   RepositorySettings,
   RepositorySettingsInfo,

ui-ngx/src/app/core/http/git-hub.service.ts

@@ -0,0 +1,38 @@
+///
+/// Copyright © 2016-2025 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
+import { Observable, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GitHubService {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  public getGitHubStar(config?: RequestConfig): Observable<number> {
+    return this.http.get<any>('https://api.github.com/repos/thingsboard/thingsboard', defaultHttpOptionsFromConfig(config)).pipe(
+      catchError(() => of({})),
+      map((res: any) => res?.stargazers_count ?? 0)
+    )
+  }
+}

ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.html

@@ -0,0 +1,26 @@
+<!--
+
+    Copyright © 2016-2025 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+@if (githubStar > 0) {
+  <section class="flex size-full items-center gap-4">
+    <a mat-stroked-button href="https://github.com/thingsboard/thingsboard" target="_blank">
+      <tb-icon class="tb-mat-20" matButtonIcon>mdi:github</tb-icon>
+      <div class="button-label flex gap-1">GitHub<tb-icon class="tb-mat-14 !mr-0">star</tb-icon>{{ githubStar | number  }}</div>
+    </a>
+    <mat-divider vertical class="h-full"></mat-divider>
+  </section>
+}

ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss

@@ -0,0 +1,35 @@
+/**
+ * Copyright © 2016-2025 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  &:has(section) {
+    height: 100%;
+  }
+  --mat-outlined-button-horizontal-padding: 8px;
+  --mdc-outlined-button-container-height: 30px;
+  --mdc-outlined-button-label-text-size: 12px;
+
+  .mdc-button {
+    background-color: rgba(255, 255, 255, 0.12);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.20);
+    }
+  }
+
+  .button-label {
+    margin-top: 1px;
+  }
+}

ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.ts

@@ -0,0 +1,34 @@
+///
+/// Copyright © 2016-2025 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { GitHubService } from '@core/http/git-hub.service';
+
+@Component({
+  selector: 'tb-github-badge',
+  templateUrl: './github-badge.component.html',
+  styleUrl: './github-badge.component.scss'
+})
+export class GithubBadgeComponent {
+
+  githubStar = 0;
+
+  constructor(private gitHubService: GitHubService) {
+    this.gitHubService.getGitHubStar().subscribe(star => {
+      this.githubStar = star;
+    });
+  }
+}

ui-ngx/src/app/modules/home/home.component.html

@@ -62,6 +62,7 @@
                    placeholder="{{ 'common.enter-search' | translate }}"/>
           </mat-form-field>
         </div>
+        <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
         <button [class.!hidden]="!searchEnabled"
                 mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>

ui-ngx/src/app/modules/home/home.module.ts

@@ -23,6 +23,7 @@ import { SharedModule } from '@app/shared/shared.module';
 import { MenuLinkComponent } from '@modules/home/menu/menu-link.component';
 import { MenuToggleComponent } from '@modules/home/menu/menu-toggle.component';
 import { SideMenuComponent } from '@modules/home/menu/side-menu.component';
+import { GithubBadgeComponent } from '@home/components/github-badge/github-badge.component';
 import { NotificationBellComponent } from '@home/components/notification/notification-bell.component';
 import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
 
@@ -33,6 +34,7 @@ import { ShowNotificationPopoverComponent } from '@home/components/notification/
       MenuLinkComponent,
       MenuToggleComponent,
       SideMenuComponent,
+      GithubBadgeComponent,
       NotificationBellComponent,
       ShowNotificationPopoverComponent
     ],

ui-ngx/src/styles.scss

@@ -902,6 +902,9 @@ pre.tb-highlight {
     &.tb-mat-12 {
       @include tb-mat-icon-size(12);
     }
+    &.tb-mat-14 {
+      @include tb-mat-icon-size(14);
+    }
     &.tb-mat-16 {
       @include tb-mat-icon-size(16);
     }