Adding tooltip

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/angular.json

@@ -37,6 +37,7 @@
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
+              "node_modules/popper.js/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
               "src/assets/params/js/index.js"
             ]

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/package-lock.json

@@ -8996,6 +8996,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/package.json

@@ -26,6 +26,7 @@
     "bootstrap": "^4.5.0",
     "flag-icon-css": "^3.5.0",
     "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "rxjs": "~6.6.3",
     "service": "^0.1.4",
     "tslib": "^2.0.0",

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app-routing.module.ts

@@ -46,12 +46,12 @@ const routes: Routes = [
       { path: 'users', component: ManageUsersComponent,
         children: [
           {path: 'list', component: ManageUsersListComponent},
-          {path: 'add', component: ManageUsersAddComponent}
+          {path: 'add', component: ManageUsersAddComponent},
+          {path: '', redirectTo:'list', pathMatch:'full'}
         ]
       },
       { path: 'roles', component: ManageRolesComponent },
       { path: 'config', component: SecurityConfigurationComponent},
-      { path: '', component: ManageUsersComponent }
     ]
   },
   { path: 'contact', component: ContactComponent },

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts

@@ -41,6 +41,7 @@ import { ManageRolesComponent } from './modules/user/manage-roles/manage-roles.c
 import { SecurityConfigurationComponent } from './modules/user/security-configuration/security-configuration.component';
 import { ManageUsersListComponent } from './modules/user/users/manage-users-list/manage-users-list.component';
 import { ManageUsersAddComponent } from './modules/user/users/manage-users-add/manage-users-add.component';
+import { EnableTooltipDirective } from './directives/enable-tooltip.directive';
 
 
 @NgModule({
@@ -62,6 +63,7 @@ import { ManageUsersAddComponent } from './modules/user/users/manage-users-add/m
     SecurityConfigurationComponent,
     ManageUsersListComponent,
     ManageUsersAddComponent,
+    EnableTooltipDirective,
 
 
   ],

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/enable-tooltip.directive.spec.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { EnableTooltipDirective } from './enable-tooltip.directive';
+
+describe('EnableTooltipDirective', () => {
+  it('should create an instance', () => {
+    const directive = new EnableTooltipDirective();
+    expect(directive).toBeTruthy();
+  });
+});

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/enable-tooltip.directive.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {AfterViewChecked, AfterViewInit, Directive, ElementRef, OnInit} from '@angular/core';
+
+declare var jQuery:any;
+@Directive({
+  selector: '[appEnableTooltip]'
+})
+export class EnableTooltipDirective implements AfterViewInit {
+
+
+  constructor() { }
+
+  ngAfterViewInit(): void {
+     jQuery('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
+  }
+}

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html

@@ -18,7 +18,7 @@
 -->
 <nav class="nav flex-column nav-pills " role="tablist" aria-orientation="vertical">
 
-    <div class="nav flex-column nav-pills" appNavSubgroup role="tablist" aria-orientation="vertical"
+    <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical"
          [appViewPermission]="perms.menu.repo.section">
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">{{'sidemenu.repo.section'|translate}}</a>
 
@@ -32,43 +32,43 @@
            role="tab" aria-controls="v-pills-browse" aria-selected="false"
            [appViewPermission]="perms.menu.repo.upload">{{'sidemenu.repo.upload'|translate}}</a>
     </div>
-    <div class="nav flex-column nav-pills" appNavSubgroup aria-orientation="vertical" role="tablist"
+    <div class="nav flex-column nav-pills" aria-orientation="vertical" role="tablist"
          [appViewPermission]="perms.menu.admin.section">
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
            role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.admin.section'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-repos" routerLink="/admin/repositories" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-repos" routerLink="/admin/repositories" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.repositories'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-groups" routerLink="/admin/repositorygroups" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-groups" routerLink="/admin/repositorygroups" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.repositorygroups'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-proxy-conn" routerLink="/admin/proxy" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-proxy-conn" routerLink="/admin/proxy" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.proxy'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-network-proxy" routerLink="/admin/network" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-network-proxy" routerLink="/admin/network" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.network'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-repo-scan" routerLink="/admin/scanning" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-repo-scan" routerLink="/admin/scanning" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.scanning'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-runtime-configuration" routerLink="/admin/runtimeconfig" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-runtime-configuration" routerLink="/admin/runtimeconfig" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.runtimeconfig'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-status" routerLink="/admin/status" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-status" routerLink="/admin/status" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.status" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.status'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="admin-reports" routerLink="/admin/reports" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="admin-reports" routerLink="/admin/reports" routerLinkActive="active" data-toggle="pill"
            [appViewPermission]="perms.menu.admin.reports" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.reports'|translate}}</a>
     </div>
-    <div class="nav flex-column nav-pills" appNavSubgroup [appViewPermission]="perms.menu.user.section">
+    <div class="nav flex-column nav-pills" [appViewPermission]="perms.menu.user.section">
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
            role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.user.section'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="users-manage" routerLink="/user/users" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="users-manage" routerLink="/user/users" routerLinkActive="active" data-toggle="pill"
            role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.users'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="users-roles" routerLink="/user/roles" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="users-roles" routerLink="/user/roles" routerLinkActive="active" data-toggle="pill"
            role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.roles'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="users-configuration" routerLink="/user/config" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="users-configuration" routerLink="/user/config" routerLinkActive="active" data-toggle="pill"
            role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.config'|translate}}</a>
     </div>
-    <div class="nav flex-column nav-pills" appNavSubgroup>
+    <div class="nav flex-column nav-pills" >
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
            role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.doc.section'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="doc-userdoc" routerLink="/doc/userguide" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="doc-userdoc" routerLink="/doc/userguide" routerLinkActive="active" data-toggle="pill"
            role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.doc.userguide'|translate}}</a>
-        <a class="nav-link my-0 py-0" id="doc-rest-api" routerLink="/user/restapi" data-toggle="pill"
+        <a class="nav-link my-0 py-0" id="doc-rest-api" routerLink="/user/restapi" routerLinkActive="active" data-toggle="pill"
            role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.doc.restapi'|translate}}</a>
     </div>
 </nav>

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/user/manage-users/manage-users.component.html

@@ -19,10 +19,10 @@
 
 <ul class="nav nav-tabs">
     <li class="nav-item">
-        <a class="nav-link" routerLink="/user/users/list" href="#">{{'users.list.head' | translate}}</a>
+        <a class="nav-link" routerLink="/user/users/list" routerLinkActive="active" href="#">{{'users.list.head' | translate}}</a>
     </li>
     <li class="nav-item">
-        <a class="nav-link" routerLink="/user/users/add" href="#">{{'users.add.head' |translate }}</a>
+        <a class="nav-link" routerLink="/user/users/add" routerLinkActive="active" href="#">{{'users.add.head' |translate }}</a>
     </li>
 </ul>
 

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/user/users/manage-users-list/manage-users-list.component.html

@@ -17,4 +17,40 @@
   ~ under the License.
   -->
 
-<p>manage-users-list works!</p>
+<form class="mt-3 mb-3">
+    <div class="form-row align-items-center">
+        <div class="col-lg-4 col-md-2 col-sm-1">
+            <label class="sr-only" for="searchQuery">{{'users.list.search' |translate}}</label>
+            <input type="text" class="form-control" id="searchQuery" placeholder="Search" data-toggle="tooltip"
+                   data-placement="top" title="SEARCHHH">
+        </div>
+        <div class="col-auto">
+            <button type="submit" class="btn btn-primary">{{'search.button'|translate}}</button>
+        </div>
+    </div>
+
+
+</form>
+
+<table class="table" appEnableTooltip>
+    <thead class="thead-light">
+    <tr>
+        <th scope="col">{{'users.list.table.head.id' | translate}}</th>
+        <th scope="col">{{'users.list.table.head.user_id' | translate}}</th>
+        <th scope="col">{{'users.list.table.head.fullName' | translate}}</th>
+        <th scope="col">{{'users.list.table.head.email' | translate}}</th>
+        <th scope="col"><span class="fas fa-check" data-toggle="tooltip" data-placement="top"
+                              [attr.data-original-title]="heads.validated" [attr.aria-label]="heads.validated"></span>
+        </th>
+        <th scope="col"><span class="fas fa-lock" data-toggle="tooltip" data-placement="top"
+                              [attr.data-original-title]="heads.locked" [attr.aria-label]="heads.locked"></span></th>
+        <th scope="col"><span class="fa fa-chevron-circle-right" data-toggle="tooltip" data-placement="top"
+                              [attr.data-original-title]="heads.pwchange" [attr.aria-label]="heads.pwchange"></span>
+        </th>
+        <th scope="col">{{'users.list.table.head.lastLogin' | translate}}</th>
+        <th scope="col">{{'users.list.table.head.created' | translate}}</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/user/users/manage-users-list/manage-users-list.component.ts

@@ -17,7 +17,10 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import {TranslateService} from "@ngx-translate/core";
+import {AppComponent} from "../../../../app.component";
+import {UserService} from "../../../../services/user.service";
 
 @Component({
   selector: 'app-manage-users-list',
@@ -25,10 +28,19 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./manage-users-list.component.scss']
 })
 export class ManageUsersListComponent implements OnInit {
+  @Input() heads: any;
 
-  constructor() { }
+  constructor(private translator: TranslateService, private userService : UserService) { }
 
   ngOnInit(): void {
+    this.heads={};
+    // We need to wait for the translator initialization and use the init key as step in.
+    this.translator.get('init').subscribe( () => {
+      // Only table headings for small columns that use icons
+      for (let suffix of ['validated', 'locked', 'pwchange']) {
+        this.heads[suffix] = this.translator.instant('users.list.table.head.' + suffix);
+      }
+    });
   }
 
 }

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "init": "Initalize",
   "login": {
     "title": "Login to Archiva",
     "password": "Password",
@@ -47,5 +48,29 @@
   },
   "api" : {
     "rb.auth.invalid_credentials": "Invalid credentials given"
+  },
+  "users": {
+    "list": {
+      "head": "List Users",
+      "table":{
+        "head": {
+          "id": "ID",
+          "user_id": "User Identifier",
+          "email": "Email",
+          "fullName": "Name",
+          "validated": "User Validated",
+          "locked": "User Locked",
+          "pwchange": "Password Change Required",
+          "lastLogin": "Last Login",
+          "created": "Created"
+        }
+      }
+    },
+    "add": {
+      "head": "Add User"
+    }
+  },
+  "search": {
+    "button": "Search"
   }
 }