Move namespace selector

license-checker-config.json

@@ -1,7 +1,7 @@
 {
   "ignore": [
     "*", "docs", "i18n",
-    ".cached_tools", ".git", ".github", ".tmp", "coverage", "cypress",
+    ".cached_tools", ".git", ".github", ".tmp", "coverage", "cypress", ".idea",
     "aio/test-resources",
     "**/*.json", "**/*.yaml", "**/*.svg", "**/*.txt", "**/*.md", "**/OWNERS", "**/.helmignore", "**/*.lock"
   ],

package.json

@@ -43,7 +43,7 @@
     "check:frontend:scss": "./aio/scripts/format.sh --styles --check && ./node_modules/sass-lint/bin/sass-lint.js -c .sass-lint.yml 'src/app/frontend/**/*.scss' -v -q",
     "check:frontend:html": "./aio/scripts/format.sh --html --check",
     "check:license": "license-check-and-add check",
-    "check:i18n": "ng xi18n --outFile ../i18n/messages.xlf && aio/scripts/xliffmerge.sh",
+    "check:i18n": "ng xi18n --no-progress --outFile ../i18n/messages.xlf && aio/scripts/xliffmerge.sh",
     "fix": "concurrently \"npm run fix:backend\" \"npm run fix:frontend\" \"npm run fix:license\" \"npm run fix:i18n\"",
     "fix:backend": "golangci-lint run -c .golangci.yml --fix src/app/backend/...",
     "fix:frontend": "concurrently \"npm run fix:frontend:ts\" \"npm run fix:frontend:scss\" \"npm run fix:frontend:html\"",

src/app/backend/settings/api/types.go

@@ -69,6 +69,7 @@ type PinnedResource struct {
 	Name        string `json:"name"`
 	DisplayName string `json:"displayName"`
 	Namespace   string `json:"namespace,omitempty"`
+	Namespaced  bool   `json:"namespaced"`
 }
 
 func (p *PinnedResource) IsEqual(other *PinnedResource) bool {

src/app/frontend/_theming.scss

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 @import '~@angular/material/theming';
+@import 'variables';
 
 @mixin kd-theme($theme, $colors) {
   $foreground-palette: map-get($theme, foreground);
@@ -167,7 +168,7 @@
   }
 
   .kd-search {
-    background-color: darken($background, 5%);
+    background-color: darken($background, 2.5%);
 
     input {
       color: mat-color($foreground-palette, base);
@@ -195,16 +196,6 @@
     }
   }
 
-  .kd-namespace-select-input-container {
-    .mat-form-field-underline {
-      background-color: $border;
-    }
-
-    .mat-select-arrow {
-      color: $muted-light;
-    }
-  }
-
   .mat-chip.mat-standard-chip {
     background: $card-background-dark;
   }
@@ -214,9 +205,31 @@
     color: map-get($colors, primary) !important;
   }
 
+  kd-namespace-selector {
+    border: 1px solid $border;
+
+    .kd-namespace-select {
+      color: mat-color($foreground-palette, secondary-text);
+    }
+
+    .kd-namespace-select-input-container {
+      .mat-form-field-underline {
+        display: none;
+      }
+
+      .mat-select-arrow {
+        color: $muted-light !important;
+      }
+    }
+  }
+
   .kd-namespace-select-input {
     background: $card-background;
-    color: mat-color($foreground-palette, text);
+  }
+
+  .kd-namespaced-item {
+    background: $border;
+    color: mat-color($foreground-palette, secondary-text);
   }
 
   .kd-namespace-select-input-border,

src/app/frontend/_variables.scss

@@ -47,4 +47,4 @@ $primary-toolbar-height: 60px;
 $secondary-toolbar-height: 48px;
 $logo-width: 8 * $baseline-grid;
 $logo-height: 8 * $baseline-grid;
-$nav-width: 30 * $baseline-grid;
+$nav-width: 31 * $baseline-grid;

src/app/frontend/chrome/nav/component.ts

@@ -26,6 +26,10 @@ import {PluginsConfigService} from '../../common/services/global/plugin';
 export class NavComponent implements OnInit {
   @ViewChild(MatDrawer, {static: true}) private readonly nav_: MatDrawer;
 
+  get isVisible(): boolean {
+    return this.nav_.opened;
+  }
+
   constructor(private readonly navService_: NavService, private readonly pluginsConfigService_: PluginsConfigService) {}
 
   ngOnInit(): void {

src/app/frontend/chrome/nav/item/component.ts

@@ -12,14 +12,84 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Component, Input} from '@angular/core';
+import {animate, keyframes, state, style, transition, trigger} from '@angular/animations';
+import {Component, EventEmitter, HostListener, Input, OnDestroy, OnInit} from '@angular/core';
+import {Subject} from 'rxjs';
+import {debounceTime, takeUntil, tap} from 'rxjs/operators';
+
+enum NamespacedIndicatorState {
+  Enter = 'mouseenter',
+  Leave = 'mouseleave',
+}
+
+const rollInOut = trigger('rollInOut', [
+  state(NamespacedIndicatorState.Enter, style({width: '72px', 'border-radius': '8px'})),
+  state(NamespacedIndicatorState.Leave, style({width: '16px', 'border-radius': '50%'})),
+  transition(`${NamespacedIndicatorState.Leave} => ${NamespacedIndicatorState.Enter}`, [
+    animate(
+      '.15s linear',
+      keyframes([
+        style({width: '16px', 'border-radius': '50%', color: 'rgba(0,0,0,0)'}),
+        style({width: '72px', 'border-radius': '8px'}),
+      ]),
+    ),
+  ]),
+
+  transition(`${NamespacedIndicatorState.Enter} => ${NamespacedIndicatorState.Leave}`, [
+    animate(
+      '.15s linear',
+      keyframes([
+        style({width: '72px', 'border-radius': '8px', color: 'rgba(0,0,0,0)'}),
+        style({width: '16px', 'border-radius': '50%'}),
+      ]),
+    ),
+  ]),
+]);
 
 @Component({
   selector: 'kd-nav-item',
   templateUrl: 'template.html',
   styleUrls: ['style.scss'],
+  animations: [rollInOut],
 })
-export class NavItemComponent {
+export class NavItemComponent implements OnInit, OnDestroy {
   @Input() state: string;
   @Input() exact = false;
+  @Input() namespaced = false;
+
+  animationState = NamespacedIndicatorState.Leave;
+
+  private mouseStateChanges_ = new EventEmitter<NamespacedIndicatorState>();
+  private debounceTime_ = 500;
+  private unsubscribe_ = new Subject<void>();
+
+  get indicator(): string {
+    return this.animationState === NamespacedIndicatorState.Leave ? 'N' : 'Namespaced';
+  }
+
+  ngOnInit(): void {
+    this.mouseStateChanges_
+      // Trigger leave animation immediately, but delay enter animation
+      .pipe(
+        tap(
+          state =>
+            (this.animationState =
+              state === NamespacedIndicatorState.Leave ? NamespacedIndicatorState.Leave : this.animationState),
+        ),
+      )
+      .pipe(debounceTime(this.debounceTime_))
+      .pipe(takeUntil(this.unsubscribe_))
+      .subscribe(state => (this.animationState = state));
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe_.next();
+    this.unsubscribe_.complete();
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  @HostListener('mouseleave', ['$event'])
+  onHover(event: MouseEvent): void {
+    this.mouseStateChanges_.emit(event.type as NamespacedIndicatorState);
+  }
 }

src/app/frontend/chrome/nav/item/style.scss

@@ -31,6 +31,16 @@
   text-transform: none;
   white-space: nowrap;
   width: 100%;
+
+  .kd-namespaced-item {
+    display: inline-block;
+    font-size: $footer-font-size-base;
+    height: 2 * $baseline-grid;
+    line-height: 2.25 * $baseline-grid;
+    margin-left: .5 * $baseline-grid;
+    text-align: center;
+    vertical-align: text-top;
+  }
 }
 
 :host-context(.kd-nav-item) {

src/app/frontend/chrome/nav/item/template.html

@@ -21,4 +21,7 @@
    queryParamsHandling="preserve"
    [routerLinkActive]="['kd-nav-item-button-active']">
   <ng-content></ng-content>
+  <span *ngIf="namespaced"
+        class="kd-namespaced-item"
+        [@rollInOut]="animationState">{{indicator}}</span>
 </a>

src/app/frontend/chrome/nav/pinner/template.html

@@ -18,6 +18,7 @@
   <kd-nav-item *ngFor="let resource of getPinnedResources()"
                class="kd-nav-item"
                [state]="getResourceHref(resource)"
+               [namespaced]="resource.namespaced"
                i18n>{{resource.displayName}}
   </kd-nav-item>
 </div>

src/app/frontend/chrome/nav/style.scss

@@ -21,6 +21,16 @@
   overflow: hidden;
   overflow-y: auto;
   white-space: nowrap;
+  width: $nav-width;
+
+  &.visible {
+    transition: width .3s;
+  }
+
+  &.hidden {
+    transition: width .2s;
+    width: 0;
+  }
 
   .mat-divider {
     margin: $baseline-grid $baseline-grid (2 * $baseline-grid) 0;

src/app/frontend/chrome/nav/template.html

@@ -14,7 +14,8 @@
 limitations under the License.
 -->
 
-<mat-drawer-container class="kd-nav">
+<mat-drawer-container class="kd-nav"
+                      [ngClass]="isVisible ? 'visible' : 'hidden'">
   <mat-drawer class="kd-nav"
               mode="side">
     <div class="kd-nav-group">
@@ -43,28 +44,24 @@
                    id="nav-persistentvolume"
                    i18n>Persistent Volumes
       </kd-nav-item>
+      <kd-nav-item class="kd-nav-item"
+                   state="/serviceaccount"
+                   id="nav-serviceaccount"
+                   [namespaced]="true"
+                   i18n>Service Accounts
+      </kd-nav-item>
       <kd-nav-item class="kd-nav-item"
                    state="/storageclass"
                    id="nav-storageclass"
                    i18n>Storage Classes
       </kd-nav-item>
     </div>
 
-    <mat-divider></mat-divider>
-
-    <kd-namespace-selector id="nav-namespace-selector">
-    </kd-namespace-selector>
-
     <div class="kd-nav-group">
-      <kd-nav-item class="kd-nav-group-item"
-                   state="/overview"
-                   id="nav-overview"
-                   i18n>Overview
-      </kd-nav-item>
-
       <kd-nav-item class="kd-nav-group-item"
                    state="/workloads"
                    id="nav-workloads"
+                   [namespaced]="true"
                    i18n>Workloads
       </kd-nav-item>
       <kd-nav-item class="kd-nav-item"
@@ -111,7 +108,8 @@
       <kd-nav-item class="kd-nav-group-item"
                    state="/discovery"
                    id="nav-discovery"
-                   i18n>Discovery and Load Balancing
+                   [namespaced]="true"
+                   i18n>Service
       </kd-nav-item>
       <kd-nav-item class="kd-nav-item"
                    state="/ingress"
@@ -127,6 +125,7 @@
       <kd-nav-item class="kd-nav-group-item"
                    state="/config"
                    id="nav-config"
+                   [namespaced]="true"
                    i18n>Config and Storage
       </kd-nav-item>
       <kd-nav-item class="kd-nav-item"
@@ -144,24 +143,10 @@
                    id="nav-secret"
                    i18n>Secrets
       </kd-nav-item>
-      <kd-nav-item class="kd-nav-item"
-                   state="/serviceaccount"
-                   id="nav-serviceaccount"
-                   i18n>Service Accounts
-      </kd-nav-item>
-      <kd-nav-item *ngIf="showPlugin()"
-                   class="kd-nav-group-item"
-                   state="/plugin"
-                   id="nav-plugin"
-                   i18n>Plugins
-      </kd-nav-item>
     </div>
 
-    <mat-divider></mat-divider>
-
     <div class="kd-nav-group">
       <kd-nav-item class="kd-nav-group-item"
-                   id="sidebar-crd"
                    state="/customresourcedefinition"
                    id="nav-customresourcedefinition"
                    [exact]="true"
@@ -171,6 +156,18 @@
       <kd-pinner-nav kind="customresourcedefinition"></kd-pinner-nav>
     </div>
 
+    <ng-container *ngIf="showPlugin()">
+      <mat-divider></mat-divider>
+
+      <div class="kd-nav-group">
+        <kd-nav-item class="kd-nav-group-item"
+                     state="/plugin"
+                     id="nav-plugin"
+                     i18n>Plugins
+        </kd-nav-item>
+      </div>
+    </ng-container>
+
     <mat-divider></mat-divider>
 
     <div class="kd-nav-group">

src/app/frontend/chrome/template.html

@@ -33,6 +33,9 @@
           </mat-icon>
         </a>
       </div>
+      <kd-namespace-selector id="nav-namespace-selector">
+      </kd-namespace-selector>
+
       <kd-search class="kd-search-bar"
                  fxFlex>
       </kd-search>

src/app/frontend/chrome/userpanel/style.scss

@@ -26,6 +26,10 @@
   text-transform: uppercase;
 }
 
+.kd-auth-header {
+  padding-top: 2 * $baseline-grid;
+}
+
 .kd-cross-style {
   bottom: 0;
   left: 0;

src/app/frontend/chrome/userpanel/template.html

@@ -15,7 +15,8 @@
 -->
 
 <mat-menu #actions="matMenu">
-  <div class="kd-auth-status kd-muted-light">
+  <div class="kd-auth-status kd-muted-light"
+       [ngClass]="loginStatus?.headerPresent ? 'kd-auth-header' : ''">
     <ng-container *ngIf="isLoginStatusInitialized">
       <ng-container [ngSwitch]="true">
         <ng-container *ngSwitchCase="loginStatus.headerPresent && !loginStatus.impersonationPresent"
@@ -29,7 +30,7 @@
 
     </ng-container>
   </div>
-  <mat-divider></mat-divider>
+  <mat-divider *ngIf="!loginStatus?.headerPresent"></mat-divider>
   <button mat-menu-item
           *ngIf="isAuthSkipped()"
           (click)="logout()"