npm - graphdb-workbench - Versions diffs - 2.3.1 → 2.4.0-RC1 - Mend

graphdb-workbench 2.3.1 → 2.4.0-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (368) hide show

package/dist/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ng-controller="mainCtrl">
+<html ng-controller="mainCtrl" lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,41 +13,22 @@
     <link rel="apple-touch-icon-precomposed" href="icon.png">
-    <script src="plugin-registry.js?v=2.3.1"></script>
-    <script src="plugins.js?v=2.3.1"></script>
-<link rel="shortcut icon" href="icon.png"><link href="vendor.a43cfebcaaba38dfc77d.css" rel="stylesheet"><link href="main.7b7930d01538072be711.css" rel="stylesheet"></head>
+    <script src="plugin-registry.js?v=2.4.0-RC1"></script>
+    <script src="plugins.js?v=2.4.0-RC1"></script>
+<link rel="shortcut icon" href="icon.png"><link href="vendor.d1c629ceaacea40a5f4a.css" rel="stylesheet"><link href="main.268656904f8e722f5489.css" rel="stylesheet"></head>
 <body>
-<div class="status-bar" ng-hide="isSecurityEnabled() && !isUserLoggedIn() && !isFreeAccessEnabled()" ng-cloak>
+<div class="status-bar bg-white" ng-hide="isSecurityEnabled() && !isUserLoggedIn() && !isFreeAccessEnabled()" ng-cloak>
+    <operations-statuses-monitor class="active-operation"></operations-statuses-monitor>
     <div class="btn-group btn-group-lg" role="group" aria-label="Button group with nested dropdown">
         <div class="btn alert alert-warning no-icon" ng-if="!getLicense().valid && showLicense()"
              gdb-tooltip="{{getLicense().message}}" tooltip-placement="bottom">
             <span class="icon-warning"></span> {{'no.valid.license.warning' | translate}}
             <a ng-show="!isLicenseHardcoded()" href="license/register" class="btn btn-secondary btn-sm" style="margin: -5px 0 -5px 0">{{'set.label' | translate}}</a>
         </div>
-        <div class="btn btn-info imports-queries"
-                ng-if="queryCount > 0 || numberOfActiveImports > 0">
-            <span class="icon-reload text-primary loader"></span>
-            <span class="dot-separator" ng-if="queryCount > 0">
-                <a class="btn btn-link" href="./monitor/queries" rel="noopener" target="_blank">
-                    <strong>{{queryCount}}</strong>
-                    <ng-pluralize count="queryCount"
-                                  when="{'one': 'query/update',
-                                         'other': 'queries/updates'}">
-                    </ng-pluralize>
-                </a>
-            </span>
-            <span class="dot-separator" ng-if="numberOfActiveImports > 0">
-                <a class="btn btn-link" href="./import" rel="noopener" target="_blank">
-                    <strong>{{numberOfActiveImports}}</strong>
-                    <ng-pluralize count="numberOfActiveImports"
-                                  when="{'one': 'import',
-                                         'other': 'imports'}">
-                    </ng-pluralize>
-                </a>
-            </span>
-        </div>
         <div id="guideResume" class="btn-group" role="group" ng-if="guidePaused" gdb-tooltip="{{'guide.button.guide-resume' | translate}}" tooltip-placement="bottom">
             <a class="btn btn-lg btn-secondary" ng-click="resumeGuide()"><span class="icon-play text-primary"></span> {{'guide.button.guide-paused' | translate}}</a>
         </div>
@@ -107,9 +88,14 @@
             <em class="icon-caret-left"></em>
         </span>
         <a class="menu-element-root" ng-href="./" href="./" ng-click="selected = -1">
-            <img class="big-logo" src="img/graphdb-logo.9ab420f9c6aa15ec68948e14c054a9df.svg" alt="GraphDB logo" width="181" height="45">
-            <img class="small-logo" src="img/graphdb-logo-sq.c868fdcaf0b1430c4f27ab196b8c4f53.svg" alt="GraphDB logo" ng-href="./" href="./" width="58"
-                 height="58">
+            <svg class="big-logo" width="180" height="50">
+                <desc>GraphDB logo</desc>
+                <use href="img/graphdb-logo.741abf3e3881e1566e4504c9f00b91c0.svg#Layer_1"></use>
+            </svg>
+            <svg class="small-logo" width="58" height="58">
+                <desc>GraphDB logo</desc>
+                <use href="img/graphdb-logo-sq.3a5fb4b3f1e0e248dc308da1bf4de9f8.svg#Layer_1"></use>
+            </svg>
         </a>
     </li>
     <li ng-repeat="item in menu track by $index" ng-if="hasRole(item.role)"
@@ -166,6 +152,6 @@
     <object data="img/graphdb-splash.1ef2940889acddc03c7defb3f9f41f8d.svg"></object>
     <div>GraphDB Workbench is loading...</div>
 </div>
-<script type="text/javascript" src="vendor.224241bf9d8f844fca28.bundle.js"></script><script type="text/javascript" src="main.5022644187abf4bf19e7.bundle.js"></script><script type="text/javascript" src="bundle.0d5ad692ba3eccb16214.bundle.js"></script></body>
+<script type="text/javascript" src="vendor.627c422eb658d286fa62.bundle.js"></script><script type="text/javascript" src="main.34b9127de6103da85a3d.bundle.js"></script><script type="text/javascript" src="bundle.4e5715c43e767d286da2.bundle.js"></script></body>
 </html>

package/dist/js/angular/chatgpt/templates/chat.html ADDED Viewed

@@ -0,0 +1,113 @@
+<style>
+    .ot-chatgpt-ctrl {
+        max-width: 950px;
+        align-items: start;
+        justify-content: stretch;
+    }
+    .chat {
+        flex-grow: 9;
+        height: calc(100vh - 8em);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .messages {
+        border: 1px solid #ddd;
+        height: calc(100% - 5em);
+        overflow: scroll;
+    }
+    .messages-hint {
+        font-size: 2em;
+        padding-top: 2em;
+        text-align: center;
+    }
+    .messages-item {
+        padding: 0.5em;
+    }
+    .messages-item-content {
+        white-space: pre-line;
+    }
+    .messages-item-question {
+        background-color: hsla(var(--secondary-color-hsl), 0.1);
+    }
+    .messages-item-assistant {
+        background-color: hsla(var(--secondary-color-hsl), 0.2);
+    }
+    .messages-item-assistant .icon {
+        color: var(--primary-color);
+    }
+    .question {
+    }
+    .controls {
+        display: flex;
+        flex-direction: column;
+    }
+</style>
+<div id="wb-chatgpt">
+    <h1>
+        {{ title }}
+        <span class="btn btn-link"
+              uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
+              popover-trigger="mouseenter"
+              popover-placement="bottom-right"
+              popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
+    </h1>
+    <div core-errors></div>
+    <div class="ot-chatgpt-ctrl d-flex" ng-show="getActiveRepository()">
+        <div class="chat">
+            <div uib-collapse="!isCollapsed" id="ot-help-text" class="alert alert-info">
+                <button type="button" ng-click="isCollapsed = false" gdb-tooltip="{{'common.close' | translate}}" class="close"
+                        aria-label="Close"></button>
+                <div ng-include="helpTemplateUrl"></div>
+            </div>
+            <div class="messages">
+                <div id="messages-scrollable">
+                    <div class="messages-hint text-muted" ng-if="!history.length">
+                        {{ 'ttyg.hint' | translate }}
+                    </div>
+                    <div ng-repeat="msg in history">
+                        <div ng-if="!msg.internal" class="messages-item messages-item-{{ msg.role }}">
+                            <i class="icon icon-{{ getIcon(msg.role) }}"></i>
+                            <i class="icon icon-warning" ng-if="msg.error"></i>
+                            <span class="messages-item-content">{{ msg.content }}</span>
+                        </div>
+                    </div>
+                    <div onto-loader-new ng-show="loader" size="40"></div>
+                </div>
+            </div>
+            <div class="question">
+                <form>
+                    <div class="mb-2 d-flex">
+                        <input class="form-control" ng-model="question" type="text">
+                        <button class="btn btn-primary" ng-click="ask()">{{ 'ttyg.ask.button' | translate }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="controls">
+            <button class="btn btn-link btn-lg" ng-click="isCollapsed = !isCollapsed" >
+                <i class="icon-help"></i>
+            </button>
+            <button class="btn btn-link btn-lg" ng-click="openSettings()">
+                <i class="icon-settings"></i>
+            </button>
+            <a class="btn btn-link btn-lg secondary" ng-click="clear()">
+                <i class="icon-trash"></i>
+            </a>
+        </div>
+    </div>
+</div>

package/dist/js/angular/chatgpt/templates/chatInfo.html ADDED Viewed

@@ -0,0 +1,11 @@
+<div class="ot-view-info">
+    <h5>{{'ttyg.help.what.title' | translate}}</h5>
+    <p>
+        {{'ttyg.help.what.content' | translate}}
+    </p>
+    <h5>{{'ttyg.help.how.title' | translate}}</h5>
+    <p>
+        {{'ttyg.help.how.content' | translate}}
+    </p>
+</div>

package/dist/js/angular/chatgpt/templates/modal/settings.html ADDED Viewed

@@ -0,0 +1,61 @@
+<div class="modal-header">
+    <button ng-click="cancel();" class="close" aria-hidden="true"></button>
+    <h4 class="modal-title">{{ dialogTitle }}</h4>
+</div>
+<div class="modal-body">
+    <h6 class="mb-1">{{ 'ttyg.settings.info' | translate }}</h6>
+    <form novalidate name="form">
+        <div class="row mb-1">
+            <div class="col-sm-3">
+                <label>{{ 'ttyg.settings.connector.id' | translate }}:</label>
+            </div>
+            <div class="col-sm-9" gdb-tooltip="{{ 'ttyg.settings.connector.id.tooltip' | translate }}">
+                <input class="form-control" type="text" ng-model="connectorID"></input>
+            </div>
+        </div>
+        <div class="row mb-1">
+            <div class="col-sm-3">
+                <label>{{ 'ttyg.settings.query.template' | translate }}:</label>
+            </div>
+            <div class="col-sm-9" gdb-tooltip="{{ 'ttyg.settings.query.template.tooltip' | translate }}">
+                <textarea class="form-control"
+                          rows="10"
+                          ng-model="queryTemplate"
+                          style="font-family: var(--mono-font)">
+                </textarea>
+            </div>
+        </div>
+        <div class="row mb-1">
+            <div class="col-sm-3">
+                <label>{{ 'ttyg.settings.ground.truths' | translate }}:</label>
+            </div>
+            <div class="col-sm-9" gdb-tooltip="{{ 'ttyg.settings.ground.truths.tooltip' | translate }}">
+                <textarea class="form-control"
+                          rows="5"
+                          ng-model="groundTruths">
+                </textarea>
+            </div>
+        </div>
+        <div class="row mb-1">
+            <div class="col-sm-3">
+                <label>{{ 'ttyg.settings.topk' | translate }}:</label>
+            </div>
+            <div class="col-sm-9" gdb-tooltip="{{ 'ttyg.settings.topk.tooltip' | translate }}">
+                <input class="form-control" type="number" min="1" max="10" ng-model="topK">
+            </div>
+        </div>
+        <div class="row">
+            <div class="push-sm-3 col-sm-9" gdb-tooltip="{{ 'ttyg.settings.echo.vector.query.tooltip' | translate }}">
+                <input id="echo-vector-query" type="checkbox" ng-model="echoVectorQuery">
+                <label for="echo-vector-query">{{ 'ttyg.settings.echo.vector.query' | translate }}</label>
+                <i class="fa fa-flask"></i>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary cancel-btn"
+            ng-click="cancel()">{{ 'common.cancel.btn' | translate }}</button>
+    <button class="btn btn-primary confirm-btn" ng-click="save()">{{ 'common.save.btn' | translate }}</button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/cluster-create-dialog.html CHANGED Viewed

@@ -112,6 +112,18 @@
                             </div>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.transactionLogMaximumSizeGB.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.transactionLogMaximumSizeGB"
+                                       required id="transaction-log-maximum-size-gb" pattern="-?[1-9][0-9]*(\.[0-9]+)?"  name="transaction_log_maximum_size_gb">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.pattern">{{'cluster_management.cluster_page.errors.small_transaction_log_max_size' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>

package/dist/js/angular/clustermanagement/templates/modal/cluster-edit-dialog.html CHANGED Viewed

@@ -69,6 +69,17 @@
                             </div>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.transactionLogMaximumSizeGB.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.transactionLogMaximumSizeGB"
+                                       required id="transaction-log-max-size" pattern="-?[1-9][0-9]*(\.[0-9]+)?" name="transactionLogMaximumSizeGB">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.pattern">{{'cluster_management.cluster_page.errors.small_transaction_log_max_size' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>

package/dist/js/angular/core/directives/operations-statuses-monitor/templates/operations-statuses-monitor.html ADDED Viewed

@@ -0,0 +1,50 @@
+<link href="css/operations-statuses-monitor.css?v=2.4.0-RC1" rel="stylesheet"/>
+<div ng-if="activeOperations && activeOperations.operations && activeOperations.operations.length > 0" class="operations-statuses btn-group btn-group-lg">
+    <button type="button" class="btn operations-statuses-dropdown-toggle dropdown-toggle" data-toggle="dropdown">
+        <div class="operation-status-header" ng-repeat="operationGroup in operationsSummary" ng-if="operationsSummary && operationsSummary.length > 0 && operationGroup.runningOperations">
+            <div ng-class="{
+            'icon-import': OPERATION_GROUP_TYPE.IMPORT_OPERATION === operationGroup.type,
+            'icon-exchange': OPERATION_GROUP_TYPE.QUERIES_OPERATION === operationGroup.type,
+            'fa fa-archive': OPERATION_GROUP_TYPE.BACKUP_AND_RESTORE_OPERATION === operationGroup.type,
+            'fa fa-sitemap': OPERATION_GROUP_TYPE.CLUSTER_OPERATION === operationGroup.type,
+            'text-danger': OPERATION_STATUS.CRITICAL === activeOperations.status,
+            'text-info': OPERATION_STATUS.INFORMATION === activeOperations.status,
+            'text-warning': OPERATION_STATUS.WARNING === activeOperations.status}">
+            </div>
+            <span ng-if="OPERATION_GROUP_TYPE.CLUSTER_OPERATION !== operationGroup.type" class="running-operation-count">
+                <sup class="tag-info">{{operationGroup.runningOperations}}</sup>
+            </span>
+        </div>
+        <span class="caret"></span>
+    </button>
+    <ul role="menu" class="dropdown-menu dropdown-menu-center">
+        <div class="operations-statuses-content">
+            <li ng-repeat="operationStatus in activeOperations.operations">
+                <a class="operation-status-content btn" target="_blank" ng-attr-href="{{operationStatus.monitoringViewUrl}}"
+                   ng-class="{ 'last-operation': $last,
+                           'first-operation': $first}">
+                    <div ng-class="{
+                   'icon-import': OPERATION_TYPE.IMPORTS === operationStatus.type,
+                   'icon-exchange': OPERATION_TYPE.QUERIES === operationStatus.type || OPERATION_TYPE.UPDATES === operationStatus.type,
+                   'fa fa-archive': OPERATION_TYPE.BACKUP_RESTORE === operationStatus.type,
+                   'fa fa-sitemap': OPERATION_TYPE.CLUSTER_STATUS === operationStatus.type,
+                   'text-danger': OPERATION_STATUS.CRITICAL === operationStatus.status,
+                   'text-info': OPERATION_STATUS.INFORMATION === operationStatus.status,
+                   'text-warning': OPERATION_STATUS.WARNING === operationStatus.status}">
+                    </div>
+                    <div class="operation-status-label">
+                        <ng-pluralize count="operationStatus.runningOperationCount || 1"
+                                      when="{'one': '{{(&quot;global.operations_statuses.&quot; + operationStatus.titleLabelKey + &quot;.title&quot;) | translate}}',
+                                         'other': '{{(&quot;global.operations_statuses.&quot; + operationStatus.titleLabelKey + &quot;.title.plural&quot;) | translate}}'}">
+                        </ng-pluralize>
+                    </div>
+                    <div ng-if="OPERATION_TYPE.CLUSTER_STATUS !== operationStatus.type" class="operation-status-running-operation-count tag-info">
+                        {{operationStatus.runningOperationCount || 1}}
+                    </div>
+                    <div class="icon-external"></div>
+                </a>
+            </li>
+        </div>
+    </ul>
+</div>

package/dist/js/angular/core/directives/rdfresourcesearch/templates/rdfResourceSearchTemplate.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<link href="css/rdf-resource-search.css?v=2.3.1" rel="stylesheet"/>
+<link href="css/rdf-resource-search.css?v=2.4.0-RC1" rel="stylesheet"/>
 <div ng-if="getActiveRepository() && hasActiveLocation() && isNotLoading()" ng-cloak>
     <div id="search-box" class="card search-rdf-input" ng-keydown="onKeyDown($event)" ng-if="!isHomePage()">

package/dist/js/angular/core/templates/modal/modal-warning.html CHANGED Viewed

@@ -9,7 +9,7 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
     <button class="btn btn-primary confirm-btn" ng-click="ok()">{{'common.yes.btn' | translate}}</button>
 </div>

package/dist/js/angular/core/templates/search-resource-input.html CHANGED Viewed

@@ -25,7 +25,7 @@
         </button>
     </span>
 </div>
-<span class="autocomplete-hint">{{'query.editor.autocomplete.hint' | translate}}</span>
+<span class="autocomplete-hint text-muted">{{'query.editor.autocomplete.hint' | translate}}</span>
 <div id="auto-complete-results-wrapper">
     <div ng-repeat="autoCompleteUriResult in autoCompleteUriResults track by $index"
          id="{{'auto_' + $index}}"

package/dist/js/angular/import/templates/filesTable.html CHANGED Viewed

@@ -102,7 +102,7 @@
                                 gdb-tooltip="{{'import.reset.status' | translate}}">
                             <span class="icon-close"></span>
                         </button>
-                        <span class="icon-info text-secondary import-status-info"
+                        <span class="icon-info text-tertiary import-status-info"
                               popover-class="impex-popover"
                               uib-popover-template="popoverTemplateUrl"
                               popover-trigger="mouseenter"

package/dist/js/angular/import/templates/urlImport.html CHANGED Viewed

@@ -40,6 +40,8 @@
                        class="dropdown-item">RDF/JSON</a></li>
                 <li><a ng-click="importFormat = {name: 'JSON-LD', type: 'application/ld+json'}"
                        class="dropdown-item">JSON-LD</a></li>
+                <li><a ng-click="importFormat = {name: 'NDJSON-LD', type: 'application/x-ld+NDjson'}"
+                       class="dropdown-item">NDJSON-LD</a></li>
                 <li><a ng-click="importFormat = {name: 'RDF/XML', type: 'application/rdf+xml'}"
                        class="dropdown-item">RDF/XML</a></li>
                 <li><a ng-click="importFormat = {name: 'N3', type: 'text/rdf+n3'}"

package/dist/js/angular/repositories/templates/ontop-repo.html CHANGED Viewed

@@ -218,7 +218,7 @@
         </div>
     </div>
     <div class="form-group row col-xs-12 pb-3">
-        <div>
+        <div class="text-right">
             <a ng-click="goBackToPreviousLocation()" class="btn btn-secondary">{{'common.cancel.btn' | translate}}</a>
             <button id="addSaveOntopRepository" ng-click="updateOntopRepo()" ng-if="!editRepoPage" type="submit" class="btn btn-primary">
                 {{'common.create.btn' | translate}}

package/dist/js/angular/security/templates/user.html CHANGED Viewed

@@ -31,12 +31,14 @@
 	</ul>
 </script>
+<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=2.4.0-RC1" rel="stylesheet"/>
 <h1>{{pageTitle}}</h1>
 <div id="wb-user" ng-hide="loader">
 	<form name="form" class="form newUserForm userForm editUserContainer" ng-submit="submit()" novalidate>
 		<div class="row">
-			<div class="col-md-6">
+			<div class="col-md-6 us-left-col">
 				<div class="card login-credentials" ng-hide="isOverrideAuth() || !isLocalAuthentication()">
 					<div class="card-block">
 						<h3>{{'view.login.title' | translate}}</h3>
@@ -142,27 +144,41 @@
 				<div class="card" id="workbench-settings" ng-if="showWorkbenchSettings">
 					<div class="card-block">
 						<h3>{{'security.workbench.settings.title' | translate}}
-							<em class="icon-info text-primary small" gdb-tooltip="{{'security.workbench.settings.theme.tooltip' | translate}}"></em></h3>
-						<div class="mb-1">
-							<label class="col-lg-5">{{'security.workbench.settings.theme.label' | translate}}</label>
-							<div class="radio">
-								<label class="px-1">
-									<input type="radio" value="light" ng-model="workbenchSettings.theme" ng-change="setWorkbenchTheme()"/>
-									{{'security.workbench.settings.theme.light' | translate}}
-								</label>
-								<label class="px-1">
-									<input type="radio" value="dark" ng-model="workbenchSettings.theme" ng-change="setWorkbenchTheme()"/>
-									{{'security.workbench.settings.theme.dark' | translate}}
-								</label>
-							</div>
+							<em class="icon-info text-tertiary small" gdb-tooltip="{{'security.workbench.settings.theme.tooltip' | translate}}"></em></h3>
+						<div>
+                            <div class="form-group">
+                                <label class="col-lg-2">{{'security.workbench.settings.theme.label' | translate}}</label>
+                                <div class="btn-group theme-selector-dropdown" uib-dropdown>
+                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle theme-selector-dropdown-btn" uib-dropdown-toggle>
+                                        {{selectedTheme.label}}
+                                    </button>
+                                    <ul class="dropdown-menu" role="menu">
+                                        <li ng-repeat="theme in themes">
+                                            <a ng-click="setTheme(theme)" class="dropdown-item">{{theme.label}}</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-lg-2">{{'security.workbench.settings.theme.mode.label' | translate}}</label>
+                                <div class="radio">
+                                    <label class="px-1">
+                                        <input type="radio" value="light" ng-model="workbenchSettings.mode" ng-change="setThemeMode()"/>
+                                        {{'security.workbench.settings.theme.mode.light' | translate}}
+                                    </label>
+                                    <label class="px-1">
+                                        <input type="radio" value="dark" ng-model="workbenchSettings.mode" ng-change="setThemeMode()"/>
+                                        {{'security.workbench.settings.theme.mode.dark' | translate}}
+                                    </label>
+                                </div>
+                            </div>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="col-md-6" ng-hide="!isLocalAuthentication()">
+			<div class="col-md-6 us-right-col" ng-hide="!isLocalAuthentication()">
 				<div class="card user-role" id="user-roles">
 					<div class="card-block">
 						<h3>{{'security.user.role' | translate}}</h3>
@@ -189,6 +205,21 @@
 					</div>
 				</div>
+                <div class="card user-custom-roles" id="user-custom-roles">
+                    <div class="card-block">
+                        <h3>{{'security.user.custom_role' | translate}}</h3>
+                        <div class="input-group">
+                            <tags-input class="wb-tags-input" ng-model="customRoles" min-length="2"
+                                        ng-disabled="!isUser()"
+                                        use-strings="true"
+                                        add-on-space="true"
+                                        add-on-comma="true"
+                                        on-tag-added="addCustomRole($tag)"
+                                        placeholder="{{'security.user.add.custom_role.msg' | translate}}"></tags-input>
+                        </div>
+                    </div>
+                </div>
 				<div id="user-repos"  class="card user-repositories">
 					<div class="card-block">
 						<h3>{{'security.repo.rights' | translate}}</h3>
@@ -197,41 +228,45 @@
 								{{'security.user.rights' | translate}}
 							</p>
 						</div>
-						<table class="table table-hover table-sm" aria-describedby="User rights table">
-							<thead>
-								<tr>
-									<th id="repositoryIdColumn">{{'security.repository.title' | translate}}</th>
-									<th id="readRightsColumn" class="text-xs-center"><em class="icon-eye icon-lg" gdb-tooltip="{{'security.tooltip.read' | translate}}"></em></th>
-									<th id="writeRightColumn" class="text-xs-center"><em class="icon-edit icon-lg" gdb-tooltip="{{'security.tooltip.write' | translate}}"></em></th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<td>{{'security.any.data.repo' | translate}}
-										<em class="icon-info text-primary" gdb-tooltip="{{'security.data.repos' | translate}}"></em>
-									</td>
-									<td class="text-xs-center">
+                        <div class="scrollable-table">
+                            <table class="table table-hover table-sm" aria-describedby="User rights table">
+                                <thead>
+                                <tr>
+                                    <th id="repositoryIdColumn">{{'security.repository.title' | translate}}</th>
+                                    <th id="readRightsColumn" class="text-xs-center"><em class="icon-eye icon-lg" gdb-tooltip="{{'security.tooltip.read' | translate}}"></em></th>
+                                    <th id="writeRightColumn" class="text-xs-center"><em class="icon-edit icon-lg" gdb-tooltip="{{'security.tooltip.write' | translate}}"></em></th>
+                                </tr>
+                                <tr>
+                                    <th>{{'security.any.data.repo' | translate}}
+                                        <em class="icon-info text-tertiary" gdb-tooltip="{{'security.data.repos' | translate}}"></em>
+                                    </th>
+                                    <th class="text-xs-center">
                                         <input class="read" type="checkbox" ng-model="grantedAuthorities.READ_REPO['*']"  ng-checked="hasReadPermission('*')" ng-disabled="readCheckDisabled('*')" ng-click="setGrantedAuthorities()">
-                                    </td>
-									<td class="text-xs-center">
+                                    </th>
+                                    <th class="text-xs-center">
                                         <input class="write" type="checkbox" ng-model="grantedAuthorities.WRITE_REPO['*']" ng-checked="hasWritePermission('*')" ng-disabled="writeCheckDisabled('*')" ng-click="setGrantedAuthorities()">
-                                    </td>
-								</tr>
-								<tr ng-repeat="repository in getReadableRepositories() | orderBy: ['location', 'id']">
-									<td class="repository-name">{{repository.id}}<small> &middot; {{repository.location ? repository.location : 'Local'}}</small></td>
-									<td class="text-xs-center read-rights"><input class="read" type="checkbox" ng-model="grantedAuthorities.READ_REPO[createUniqueKey(repository)]"  ng-checked="hasReadPermission(repository)" ng-disabled="readCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
-									<td class="text-xs-center write-rights"><input class="write" type="checkbox" ng-model="grantedAuthorities.WRITE_REPO[createUniqueKey(repository)]" ng-checked="hasWritePermission(repository)" ng-disabled="writeCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
-								</tr>
-							</tbody>
-						</table>
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <div>
+                                    <tr ng-repeat="repository in getReadableRepositories() | orderBy: ['location', 'id']">
+                                        <td class="repository-name">{{repository.id}}<small> &middot; {{repository.location ? repository.location : 'Local'}}</small></td>
+                                        <td class="text-xs-center read-rights"><input class="read" type="checkbox" ng-model="grantedAuthorities.READ_REPO[createUniqueKey(repository)]"  ng-checked="hasReadPermission(repository)" ng-disabled="readCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
+                                        <td class="text-xs-center write-rights"><input class="write" type="checkbox" ng-model="grantedAuthorities.WRITE_REPO[createUniqueKey(repository)]" ng-checked="hasWritePermission(repository)" ng-disabled="writeCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
+                                    </tr>
+                                </div>
+                                </tbody>
+                            </table>
+                        </div>
 					</div>
 				</div>
             </div>
 		</div>
-		<div class="mb-3">
-			<button id="wb-user-submit" class="btn btn-primary" type="submit">{{saveButtonText}}</button>
-			<button id="wb-user-goBack" class="btn btn-secondary" type="button" ng-click="goBack()">{{'common.cancel.btn' | translate}}</button>
+		<div class="text-right">
+            <button id="wb-user-goBack" class="btn btn-secondary" type="button" ng-click="goBack()">{{'common.cancel.btn' | translate}}</button>
+            <button id="wb-user-submit" class="btn btn-primary" type="submit">{{saveButtonText}}</button>
 		</div>
 	</form>
 </div>

package/dist/js/angular/security/templates/users.html CHANGED Viewed

@@ -4,7 +4,7 @@
 	   uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
 	   popover-trigger="mouseenter"
 	   popover-placement="bottom-right"
-	   popover-append-to-body="true"><span class="icon-info"></span></span>
+	   popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
 </h1>
 <div id="wb-users" ng-hide="loader">
 	<div class="mb-1">
@@ -62,6 +62,12 @@
 						{{repo}}
 					</div>
 					<div ng-show="user.userType !== 'user'">{{'security.unrestricted' | translate}}</div>
+                    <div>
+                        <span ng-repeat="role in user.customRoles">
+                            <span class="tag tag-primary" >{{ role }}</span>
+                            &nbsp;
+                        </span>
+                    </div>
 				</td>
 				<td class="date-created"><span>{{user.dateCreated | date: 'yyyy-MM-dd HH:mm:ss'}}</span></td>
 				<td class="actions-bar">