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
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 7dfcc28..8b995b8 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 13cfeb4..7140ab1 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 164077e..5cda6e2 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 @@
clusters: Cluster[] = [];
errorMessage = '';
isLoading = true;
+ // is the currrent user logged in? If true, then yes.
can = false;
service = '';
@@ -29,6 +30,7 @@
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 @@
/* 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) {
