This is an automated email from the ASF dual-hosted git repository.
nealsun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/helix.git
The following commit(s) were added to refs/heads/master by this push:
new ee61ff434 2212/ensure that create cluster button is visible
[helix-front] (#2213)
ee61ff434 is described below
commit ee61ff434ee37d4ab8456c739b2229f99d9e0e72
Author: Micah Stubbs <[email protected]>
AuthorDate: Thu Sep 15 15:32:41 2022 -0700
2212/ensure that create cluster button is visible [helix-front] (#2213)
Verify that current user is logged in after loading all clusters
to ensure that create cluster button is visible in left sidebar
---
.../cluster-list/cluster-list.component.html | 14 ++++++------
.../cluster-list/cluster-list.component.scss | 25 ++++++++++++++++------
.../cluster/cluster-list/cluster-list.component.ts | 4 ++++
3 files changed, 31 insertions(+), 12 deletions(-)
diff --git
a/helix-front/src/app/cluster/cluster-list/cluster-list.component.html
b/helix-front/src/app/cluster/cluster-list/cluster-list.component.html
index 7dfcc286b..8b995b81d 100644
--- a/helix-front/src/app/cluster/cluster-list/cluster-list.component.html
+++ b/helix-front/src/app/cluster/cluster-list/cluster-list.component.html
@@ -22,12 +22,14 @@
<mat-spinner> Loading all clusters ... </mat-spinner>
</section>
<mat-nav-list *ngIf="!isLoading && !errorMessage">
- <button mat-button routerLink="/">
- <mat-icon>arrow_back</mat-icon> Back to Index
- </button>
- <button mat-mini-fab *ngIf="can" (click)="createCluster()">
- <mat-icon>add</mat-icon>
- </button>
+ <div class="cluster-list-button-group">
+ <button class="back-to-index-button" mat-button routerLink="/">
+ <mat-icon>arrow_back</mat-icon> Back to Index
+ </button>
+ <button mat-mini-fab *ngIf="can" (click)="createCluster()">
+ <mat-icon>add</mat-icon>
+ </button>
+ </div>
<h3 mat-subheader>Clusters in {{ service }} ({{ clusters.length }})</h3>
<a
*ngFor="let cluster of clusters"
diff --git
a/helix-front/src/app/cluster/cluster-list/cluster-list.component.scss
b/helix-front/src/app/cluster/cluster-list/cluster-list.component.scss
index 13cfeb4f5..7140ab12d 100644
--- a/helix-front/src/app/cluster/cluster-list/cluster-list.component.scss
+++ b/helix-front/src/app/cluster/cluster-list/cluster-list.component.scss
@@ -1,6 +1,25 @@
@use '@angular/material' as mat;
@import 'src/theme.scss';
+.mat-nav-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.cluster-list-button-group {
+ display: flex;
+ justify-content: space-between;
+ margin-right: 1rem;
+}
+
+.back-to-index-button {
+ align-self: flex-start;
+}
+
+.add-cluster-button {
+ align-self: flex-end;
+}
+
.mat-spinner {
margin: 20px;
}
@@ -14,12 +33,6 @@
padding: 10px;
}
-.mat-mini-fab {
- position: fixed;
- right: 16px;
- top: 16px;
-}
-
.empty {
font-size: 14px;
// font-style: italic;
diff --git a/helix-front/src/app/cluster/cluster-list/cluster-list.component.ts
b/helix-front/src/app/cluster/cluster-list/cluster-list.component.ts
index 164077e8a..5cda6e20d 100644
--- a/helix-front/src/app/cluster/cluster-list/cluster-list.component.ts
+++ b/helix-front/src/app/cluster/cluster-list/cluster-list.component.ts
@@ -17,6 +17,7 @@ export class ClusterListComponent implements OnInit {
clusters: Cluster[] = [];
errorMessage = '';
isLoading = true;
+ // is the currrent user logged in? If true, then yes.
can = false;
service = '';
@@ -29,6 +30,7 @@ export class ClusterListComponent implements OnInit {
ngOnInit() {
this.loadClusters();
+ // check if the current user is logged in
this.clusterService.can().subscribe((data) => (this.can = data));
this.service = this.router.url.split('/')[1];
}
@@ -39,6 +41,8 @@ export class ClusterListComponent implements OnInit {
/* error path */ (error) => this.showErrorMessage(error),
/* onComplete */ () => (this.isLoading = false)
);
+ // check if the current user is logged in again
+ this.clusterService.can().subscribe((data) => (this.can = data));
}
showErrorMessage(error: any) {
