[sc-7934] warning when new nucliadb version is available (#1189)

* Fix dropdown button style

* [sc-7934] Display the versions used in NucliaDB admin

  - Display NucliaDB and NucliaDB Admin version in the home page
  - Display a toast message when a newer version of NucliaDB or NucliaDB Admin is available

* Fix unit tests and search warning when no NUA

* Fix search options white space in resource list

apps/nucliadb-admin/src/app/app.component.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'apps/nucliadb-admin/src/variables';
 
 .version {
   position: fixed;

apps/nucliadb-admin/src/app/app.module.ts

@@ -52,6 +52,7 @@ export function createTranslateLoader(http: HttpBackend, config: BackendConfigur
     RouterModule.forRoot(routes, routerOptions),
     UploadModule,
     PaIconModule,
+    PaIconModule,
   ],
   providers: [TranslatePipe, { provide: APP_BASE_HREF, useValue: '/admin' }],
   bootstrap: [AppComponent],

apps/nucliadb-admin/src/app/home/home-page.component.html

@@ -1,38 +1,39 @@
-<div class="home-container body-m">
-  <ng-container *ngIf="hasValidKey | async">
-    <p>
-      By using a NUA API Key you can utilize
-      <a
-        href="https://nuclia.cloud"
-        target="_blank">
-        Nuclia's Cloud Processing Engine
-      </a>
-    </p>
-    <p>Your data remains stored locally, but you have access to a dashboard for following your metrics and more.</p>
-  </ng-container>
-
-  <div *ngIf="(hasValidKey | async) === false">
-    <h1>
-      <pa-icon
-        name="warning"
-        size="xlarge"></pa-icon>
-      {{ errorMessage | async }}
-    </h1>
-    <p>
-      Provide your NUA API Key by using the environment variable
-      <code>NUA_API_KEY</code>
-      or the
-      <code>--nuclia-api-key</code>
-      cli flag.
-    </p>
-    <p>
-      If you don't have a NUA API Key follow this
-      <a
-        href="https://docs.nuclia.dev/docs/docs/getting-started/on-premise"
-        rel="noopener noreferrer"
-        target="_blank">
-        guide
-      </a>
-    </p>
-  </div>
+<div class="home-page page-spacing">
+  @if (version | async; as versions) {
+    <div class="version-container container-box">
+      <strong>NucliaDB:</strong>
+      <div>
+        {{ versions.nucliadb.installed }}
+      </div>
+      <strong>NucliaDB Admin:</strong>
+      <div>
+        {{ versions['nucliadb-admin-assets'].installed }}
+      </div>
+      <strong>NUA API Key:</strong>
+      <div class="check-item">
+        @if (hasValidKey | async) {
+          <div>
+            <div>
+              <pa-icon
+                class="primary"
+                name="circle-check"></pa-icon>
+              <span [innerHTML]="'standalone.nua-key-status.valid.nua-allows-to' | translate"></span>
+            </div>
+            <div>{{ 'standalone.nua-key-status.valid.store-locally' | translate }}</div>
+          </div>
+        } @else {
+          <div>
+            <div>
+              <pa-icon
+                class="destructive"
+                name="warning"></pa-icon>
+              <strong>{{ errorMessage | async }}</strong>
+            </div>
+            <div [innerHTML]="'standalone.nua-key-status.invalid.provide-by' | translate"></div>
+            <div [innerHTML]="'standalone.nua-key-status.invalid.how-to-get-nua-key' | translate"></div>
+          </div>
+        }
+      </div>
+    </div>
+  }
 </div>

apps/nucliadb-admin/src/app/home/home-page.component.scss

@@ -1,10 +1,47 @@
-@import 'variables';
+@import 'apps/nucliadb-admin/src/variables';
+
+.home-page {
+  display: flex;
+  gap: rhythm(3);
+  align-items: flex-start;
+
+  .container-box {
+    background: $color-neutral-lightest;
+    border: 1px solid $color-neutral-light;
+    border-radius: rhythm(0.5);
+    padding: rhythm(2) rhythm(3);
+  }
+
+  .check-item {
+    display: flex;
+    gap: rhythm(1);
+    margin-top: calc(-1 * #{rhythm(0.25)});
+
+    & > strong {
+      padding-top: rhythm(0.25);
+    }
+    pa-icon {
+      margin-right: rhythm(0.5);
+    }
+    pa-icon.primary {
+      color: $color-primary-regular;
+    }
+    pa-icon.destructive {
+      color: $color-secondary-strong;
+    }
+  }
+
+  .version-container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: rhythm(1);
+  }
+}
 
 .home-container {
   align-items: center;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--app-topbar-height));
   justify-content: center;
 
   h1 {

apps/nucliadb-admin/src/app/home/home-page.component.ts

@@ -10,6 +10,7 @@ import { StandaloneService } from '@flaps/common';
 export class HomePageComponent {
   hasValidKey = this.standaloneService.hasValidKey;
   errorMessage = this.standaloneService.errorMessage;
+  version = this.standaloneService.version;
 
   constructor(private standaloneService: StandaloneService) {}
 }

apps/nucliadb-admin/src/app/home/main-container/main-container.component.html

@@ -1,7 +1,7 @@
-<div
-  class="upload-bar-container"
-  *ngIf="showBar | async">
-  <stf-upload-bar></stf-upload-bar>
-</div>
+@if (showBar | async) {
+  <div class="upload-bar-container">
+    <stf-upload-bar></stf-upload-bar>
+  </div>
+}
 
 <router-outlet></router-outlet>

apps/nucliadb-admin/src/app/home/main-container/main-container.component.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'apps/nucliadb-admin/src/variables';
 
 .upload-bar-container {
   position: sticky;