UI - policy imports review

- Changed naming CRUD, JSON and Manage - Fixed typos in labels - Splitted tabs for entries and imports - Fixed things search field delete button - Search button now in primary color - Empty crud toolbar now called create instead of edit Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Nov 18, 2023 · 733dd2f · 733dd2f
1 parent 3c4912e
commit 733dd2f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 36 deletions.
diff --git a/ui/modules/environments/environments.html b/ui/modules/environments/environments.html
@@ -25,10 +25,10 @@
     <div class="col-md-8 resizable_flex_column">
         <ul class="nav nav-tabs nav-fill">
             <li class="nav-item">
-                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">CRUD Environment</a>
+                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">Manage</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">Environment JSON</a>
+                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">JSON</a>
             </li>
         </ul>
         <div class="tab-content" style="flex-grow: 1; overflow: hidden;">

diff --git a/ui/modules/policies/policies.html b/ui/modules/policies/policies.html
@@ -5,7 +5,7 @@ <h5>Policies</h5>
         <div class="col-md-4">
             <h6>Load a policy</h6>
             <div class="input-group input-group-sm mb-1 mt-1 has-validation" role="group">
-                <label class="input-group-text">PolicyId</label>
+                <label class="input-group-text">Policy Id</label>
                 <input type="text" class="form-control form-control-sm" id="inputPolicyId"></input>
                 <button id="buttonLoadPolicy" class="btn btn-outline-primary btn-sm"
                     title="Load policy with the given ID">
@@ -30,37 +30,20 @@ <h6>Who am I</h6>
             <div class="resizable_flex_column">
                 <ul class="nav nav-tabs nav-fill">
                     <li class="nav-item">
-                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabPolicyCRUD">CRUD Policy</a>
+                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabPolicyEntries">Entries</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyJson">Policy JSON</a>
+                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyImports">Imports</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyJson">JSON</a>
                     </li>
                 </ul>
                 <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
-                    <div class="tab-pane container active no-margin" id="tabPolicyCRUD">
-                        <h5>PolicyImports</h5>
-                        <hr />
-                        <div class="row resizable_pane" style="height: 15vh;">
-                            <div class="col-md-6 resizable_flex_column">
-                                <div class="table-wrap">
-                                    <table class="table table-striped table-hover table-sm">
-                                        <tbody id="tbodyPolicyImports"></tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <div class="col-md-6 resizable_flex_column">
-                                <crud-toolbar label="ImportPolicyId" id="crudImport" style="flex-grow: 1;">
-                                    <div class="table-wrap">
-                                        <table class="table table-striped table-hover table-sm">
-                                            <tbody id="tbodyPolicyImportEntries"></tbody>
-                                        </table>
-                                    </div>
-                                </crud-toolbar>
-                            </div>
-                        </div>
+                    <div class="tab-pane container active no-margin" id="tabPolicyEntries">
                         <h5>Policy Entries</h5>
                         <hr />
-                        <div class="row resizable_pane" style="height: 15vh;">
+                        <div class="row resizable_pane" style="height: 22vh;">
                             <div class="col-md-6 resizable_flex_column">
                                 <div class="input-group has-validation">
                                     <input class="form-control" id="tableValidationEntries" hidden="true"></input>
@@ -86,7 +69,7 @@ <h5>Policy Entries</h5>
                             </div>
                         </div>                
                         <h6>Subjects</h6>
-                        <div class="row resizable_pane" style="height: 20vh;">
+                        <div class="row resizable_pane" style="height: 22vh;">
                             <div class="col-md-6 resizable_flex_column">
                                 <div class="input-group has-validation">
                                     <input class="form-control" id="tableValidationSubjects" hidden="true"></input>
@@ -109,7 +92,7 @@ <h6>Subjects</h6>
                             </div> -->
                         </div>
                         <h6>Resources</h6>
-                        <div class="row resizable_pane" style="height: 20vh;">
+                        <div class="row resizable_pane" style="height: 22vh;">
                             <div class="col-md-6 resizable_flex_column">
                                 <div class="input-group has-validation">
                                     <input class="form-control" id="tableValidationResources" hidden="true"></input>
@@ -135,6 +118,30 @@ <h6>Resources</h6>
                         </div>
                     </div>
                 </div>
+                <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
+                    <div class="tab-pane container no-margin" id="tabPolicyImports">
+                        <h5>Policy Imports</h5>
+                        <hr />
+                        <div class="row resizable_pane" style="height: 75vh;">
+                            <div class="col-md-6 resizable_flex_column">
+                                <div class="table-wrap">
+                                    <table class="table table-striped table-hover table-sm">
+                                        <tbody id="tbodyPolicyImports"></tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            <div class="col-md-6 resizable_flex_column">
+                                <crud-toolbar label="Imported Policy Id" id="crudImport" style="flex-grow: 1;">
+                                    <div class="table-wrap">
+                                        <table class="table table-striped table-hover table-sm">
+                                            <tbody id="tbodyPolicyImportEntries"></tbody>
+                                        </table>
+                                    </div>
+                                </crud-toolbar>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="tab-content" style="flex-grow: 1; overflow: hidden; height: 80vh;">
                     <div class="tab-pane container no-margin" id="tabPolicyJson">
                         <crud-toolbar label="PolicyId" id="crudPolicyJson">

diff --git a/ui/modules/things/features.html b/ui/modules/things/features.html
@@ -29,7 +29,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseFeatures">
         <div class="col-md-8 resizable_flex_column">
             <ul class="nav nav-tabs nav-fill" id="tabItemsFeatures">
                 <li class="nav-item">
-                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudFeature">CRUD</a>
+                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudFeature">Manage</a>
                 </li>
             </ul>
             <div class="tab-content" style="flex-grow: 1;" id="tabContentFeatures">

diff --git a/ui/modules/things/things.html b/ui/modules/things/things.html
@@ -22,9 +22,9 @@
                         </button>
                     </div>
                     <input autocomplete="false" name="hidden" type="text" style="display:none;">
-                    <input type="text" class="form-control form-control-sm" id="searchFilterEdit" name="search"
+                    <input type="search" class="form-control form-control-sm" id="searchFilterEdit" name="search"
                            spellcheck=false autocomplete="off" />
-                    <button type="button" id="searchThings" class="btn btn-outline-secondary btn-sm" data-bs-toggle="tooltip"
+                    <button type="button" id="searchThings" class="btn btn-outline-primary btn-sm" data-bs-toggle="tooltip"
                         title="Search things by thingId or valid ditto search filter">
                         search
                     </button>
@@ -55,7 +55,7 @@
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabModifyThing">
-                                CRUD<span class="badge badge-warn" id="thingsCrudWaring">!</span></a>
+                                Manage<span class="badge badge-warn" id="thingsCrudWaring">!</span></a>
                         </li>
                     </ul>
                     <div id="tabContentThing" class="tab-content" style="flex-grow:1; overflow:hidden;">
@@ -100,7 +100,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseAttributes">Attributes <s
         <div class="col-md-8">
             <ul class="nav nav-tabs nav-fill">
                 <li class="nav-item">
-                    <a class="nav-link active">CRUD</a>
+                    <a class="nav-link active">Manage</a>
                 </li>
             </ul>
             <div class="tab-content">

diff --git a/ui/modules/utils/crudToolbar.html b/ui/modules/utils/crudToolbar.html
@@ -7,9 +7,9 @@
 <div class="resizable_flex_column px-1" id="divRoot">
   <div class="input-group input-group-sm mb-1 mt-1 has-validation">
     <label class="input-group-text" id="label">Default</label>
-    <input type="text" class="form-control" disabled id="inputIdValue">
+    <input type="text" class="form-control" spellcheck="false" disabled id="inputIdValue">
     <button class="btn btn-outline-primary btn-sm" id="buttonEdit" data-bs-toggle="tooltip" title="Edit">
-      Edit
+      Create
     </button>
     <button class="btn btn-outline-primary btn-sm" hidden id="buttonCreate" data-bs-toggle="tooltip" title="Create">
       Create

diff --git a/ui/modules/utils/crudToolbar.ts b/ui/modules/utils/crudToolbar.ts
@@ -70,6 +70,13 @@ export class CrudToolbar extends HTMLElement {
     domInput.value = newValue;
     domInput.classList.remove('is-invalid');
 
+    const buttonEdit = this.shadowRoot.getElementById('buttonEdit');
+    if (newValue && newValue !== '') {
+      buttonEdit.innerText = 'Edit';
+    } else {
+      buttonEdit.innerText = 'Create'
+    }
+
     const buttonDelete = this.shadowRoot.getElementById('buttonDelete');
     if (!this.isEditing && !this.isDeleteDisabled && newValue && newValue !== '') {
       buttonDelete.removeAttribute('hidden');