Merge pull request #14286 from vvlladd28/improvement/github-bage/hide

Add GitHub badge with role-based visibility and client-side hide option

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

@@ -17,10 +17,19 @@
 -->
 @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>
+    <div class="group relative">
+      <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 items-center gap-2">Star<mat-divider vertical class="h-full"></mat-divider>{{ githubStar | number }}</div>
+      </a>
+      <button
+        mat-icon-button
+        (click)="hideGithubStar($event)"
+        type="button"
+        class="tb-mat-16 absolute -right-2 -top-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover:opacity-100">
+        <mat-icon class="scale-75">close</mat-icon>
+      </button>
+    </div>
     <mat-divider vertical class="h-full"></mat-divider>
   </section>
 }

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

@@ -20,16 +20,31 @@
   --mat-outlined-button-horizontal-padding: 8px;
   --mdc-outlined-button-container-height: 30px;
   --mdc-outlined-button-label-text-size: 12px;
+  --mat-outlined-button-hover-state-layer-opacity: 0;
+  --mat-icon-button-hover-state-layer-opacity: 0;
 
-  .mdc-button {
-    background-color: rgba(255, 255, 255, 0.12);
+  .group {
+    .mdc-button {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.20);
+      .mdc-button {
+        background-color: rgba(255, 255, 255, 0.20);
+      }
+    }
+
+    .mdc-icon-button {
+      background-color: #162C41;
+
+      &:hover {
+        background-color: #DD2C00;
+      }
     }
   }
 
   .button-label {
-    margin-top: 1px;
+    height: 28px;
+    --mat-divider-color: var(--mdc-outlined-button-label-text-color);
   }
 }

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

@@ -14,21 +14,66 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { GitHubService } from '@core/http/git-hub.service';
+import { Store } from '@ngrx/store';
+import { selectAuthUser, selectIsAuthenticated } from '@core/auth/auth.selectors';
+import { distinctUntilChanged, filter, map, switchMap, take, takeUntil } from 'rxjs/operators';
+import { Authority } from '@shared/models/authority.enum';
+import { AppState } from '@core/core.state';
+import { LocalStorageService } from '@core/local-storage/local-storage.service';
+import { Subject } from 'rxjs';
+
+const SETTINGS_KEY = 'HIDE_GITHUB_STAR_BUTTON';
 
 @Component({
   selector: 'tb-github-badge',
   templateUrl: './github-badge.component.html',
   styleUrl: './github-badge.component.scss'
 })
-export class GithubBadgeComponent {
+export class GithubBadgeComponent implements OnDestroy {
 
   githubStar = 0;
 
-  constructor(private gitHubService: GitHubService) {
-    this.gitHubService.getGitHubStar().subscribe(star => {
-      this.githubStar = star;
-    });
+  private stopWatch$ = new Subject<void>();
+
+  constructor(private gitHubService: GitHubService,
+              private localStorageService: LocalStorageService,
+              private store: Store<AppState>,) {
+    const hide = this.localStorageService.getItem(SETTINGS_KEY) ?? false;
+
+    if (!hide) {
+      this.store.select(selectIsAuthenticated).pipe(
+        filter((data) => data),
+        switchMap(() => this.store.select(selectAuthUser).pipe(take(1))),
+        map((authUser) => {
+          return [Authority.TENANT_ADMIN, Authority.SYS_ADMIN].includes(authUser?.authority ?? Authority.ANONYMOUS)
+        }),
+        distinctUntilChanged(),
+        takeUntil(this.stopWatch$),
+      ).subscribe(value => {
+        if (value) {
+          this.gitHubService.getGitHubStar().subscribe(star => {
+            this.githubStar = star;
+          });
+        } else {
+          this.githubStar = 0
+        }
+      });
+    }
+  }
+
+  hideGithubStar($event: Event) {
+    $event?.stopPropagation();
+    this.localStorageService.setItem(SETTINGS_KEY, true);
+    this.githubStar = 0;
+
+    this.stopWatch$.next();
+    this.stopWatch$.complete();
+  }
+
+  ngOnDestroy() {
+    this.stopWatch$.next();
+    this.stopWatch$.complete();
   }
 }

ui-ngx/src/styles.scss

@@ -902,9 +902,6 @@ 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);
     }