Feature: Update edit ontology design (#320)

* remove the unnecessaire variable is_selected_value from the select component haml file

* update submission form content to use attributes category not display

* make submission edit frame have a custom id from params

* extract submission form attributes category array

* fix submission from tabs style by removing the old edit-ontology-tab cls

* fix edit ontology tabs style

* fix edit submission error

* install tippy js for the hover notes

* Add see the wiki sentence in edit ontology page

* replace edit ontology buttons with component button

* make reset all fields button works in edit ontology page

* Make input field label font size bigger (12px --> 14px)

* add data attribute for select and text  components

* handle for the input field component the case  attributes are nil

* remove no more used form group component  and text field component

* add a label argument for nest agent input component

* make summary licenses popup use attr_label instead of attribute_infos

* fix tom select hidden input style to not take full width

* extract useTomSelect component tom select controller

* update search input component to use  InputFieldComponent

* update input field help text slot to support raw html display

* update submission location form JS to use 'var' instead of 'const'

to make it work even if the partial is re-render again in the same context (turbo frame reload)

* remove old submission contact and location form partials

* update ontology picker single to use select input helper

* use attr_label instead of generate_attribute_label helper in the metadata curator table header

* redirect ontology edit action to submission controller new or edit

* replace metadata selector component with a helper method

* update ontology form partial to have only ontology attributes in it

* update ontology new template to add submission attributes in it directly

* fix regular button  display animation by adding as argument a loader id

* update inputs helpers to add the arguments data, id and help

* extract from ontology and submission form the metadata_help_link helper

* update submission new action to redirect to the ontology new template

* add submission edit_properties action for a list of submission attributes

* add ontology details tab to the submission form

* add metadata and submission inputs helpers files

* simplify the submission form content and remove no more used helpers

* show in the submission edit action the new submission form template

* simplify the submission format form and use the new input helpers

* make the  select component inline rendered

* update tooltip to use Tippy.js

* add tooltip popovers for submission attribute inputs

* move submission form partial to the edit template

* transform  EditSubmissionAttributeButtonComponent to a helper function

* add the button "add new submission" to the ontology viewer header

* remove no more used  ontology controller update action

* fix nested turbo frame to be hidden when a parent frame is busy/loading

* create error_message_alert helper to display an alert with erroneous fields

* add required asteriks  to submission attribute that enforce existence

* make the submission location form partial work for existing submission

* fix submission format form partial syle

* transform submission form_content  the view that display update errors

* fix ontology form hasDomain and group inputs that can't be reset empty

* make selected_attribute? helper work for equivalent or direct attribute

* move back some code logic from ontology updated concern to controllers

* create render_submission_inputs helper to display inputs components

* use the default template of submissions controller edit action

* disable submission form categories tabs when the properties filter used

* handle submission pullLocation parameter update depending of isRemote

* update submission update controller to add ontology update step

* fix ontology metadata curator to use the  new submission form

* remove submission new template, replaced with ontologies new

* make attr_header_label use a custom label as argument

* add title to new and edit submission buttons in the ontology viewer

* put again the removed margin top of summary section only in summary page

* move submission_metadata to metadata_helper and application_controller files

* have custom labels for summary submission table header

* hide tooltip from attribute labels in the summary section

* remove the add et edit submission button in front the submissions table

* remove useless ontology value in submission updater

* redirect edit page to home if user not connected

* remove default today value from date input

---------

Co-authored-by: Bilel Kihal <[email protected]>

app/assets/stylesheets/application.css.scss.erb

@@ -46,12 +46,15 @@
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";
 @import "tom-select/dist/scss/tom-select";
+@import "tippy.js/dist/tippy";
+@import 'tippy.js/themes/light-border';
 @import "feedback";
 @import "login";
 @import "components/index";
 @import "account";
 @import "agents";
 @import "upload_ontology";
+@import "edit-ontology";
 @import "nav_bar";
 @import "ontology_details_header";
 @import "ontology_viewer";

app/assets/stylesheets/bioportal.scss

@@ -1156,7 +1156,7 @@ a.truncated_less, a.truncated_more {
 
 }
 
-turbo-frame[busy] .hide-if-loading, .show-if-loading {
+turbo-frame[busy] > .hide-if-loading, .show-if-loading {
   display: none;
 }
 turbo-frame[busy] ~ .show-if-loading {

app/assets/stylesheets/components/header.scss

@@ -9,6 +9,7 @@
     cursor: pointer;
     width: 100%;
     padding: 14px 20px;
+    position: relative;
     p {
         margin-bottom: 0;
     }

app/assets/stylesheets/components/input_field.scss

@@ -1,85 +1,95 @@
 .input-field-component {
-    width: 100%;
-    font-size: 13px;
-    padding: 10px;
-    border: 1px solid #BDBDBD;
-    border-radius: 5px;
-    outline: none;
-    resize: none;
+  width: 100%;
+  font-size: 13px;
+  padding: 10px;
+  border: 1px solid #BDBDBD;
+  border-radius: 5px;
+  outline: none;
+  resize: none;
 }
 
 .input-field-component:focus {
-    border: 1px solid var(--primary-color);
+  border: 1px solid var(--primary-color);
 }
 
 .text-input-label {
-    font-size: 12px;
+    font-size: 14px;
     color: #666666;
     margin-bottom: 5px;
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+  }
 }
 
 .text-input-error-text {
-    font-size: 12px;
-    color: var(--error-color)
+  font-size: 12px;
+  color: var(--error-color)
 }
 
 .text-input-helper-text {
-    font-size: 12px;
-    color: #666666;
-    margin-top: 5px;
+  font-size: 12px;
+  color: #666666;
+  margin-top: 5px;
 }
 
 .ts-control {
-    padding: 12px;
-    border-radius: 5px;
-    border-color: #BDBDBD;
+  padding: 12px;
+  border-radius: 5px;
+  border-color: #BDBDBD;
 }
 
 .ts-dropdown-content .option {
-    padding: 12px;
+  padding: 12px;
 }
 
 .ts-dropdown .active {
-    background-color: #f8f8f8;
+  background-color: #f8f8f8;
 
 }
 
 .ts-dropdown {
-    margin: 0;
-    color: #666666;
+  margin: 0;
+  color: #666666;
 }
 
 .chosen-container {
-    padding: 0;
-    border-radius: 5px;
+  padding: 0;
+  border-radius: 5px;
 }
 
 .ts-wrapper.single .ts-control:after {
-    border-color: #343a40 transparent transparent;
-    border-style: solid;
-    border-width: 5px 5px 0;
-    content: " ";
-    display: block;
-    height: 0;
-    margin-top: -3px;
-    position: absolute;
-    right: calc(0.75rem + 5px);
-    top: 50%;
-    width: 0;
+  border-color: #343a40 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0;
+  content: " ";
+  display: block;
+  height: 0;
+  margin-top: -3px;
+  position: absolute;
+  right: calc(0.75rem + 5px);
+  top: 50%;
+  width: 0;
 }
 
 .ts-wrapper.multi .ts-control>div{
-    border-radius: 5px;
-    font-size: 11px;
-    padding: 2px 0 4px 6px;
-    color: #888888;
+  border-radius: 5px;
+  font-size: 11px;
+  padding: 2px 0 4px 6px;
+  color: #888888;
 }
 
 .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{
-    border-left: none;
-    color: #888888 !important;
-    margin-left: 0;
+  border-left: none;
+  color: #888888 !important;
+  margin-left: 0;
 }
-.ts-wrapper.plugin-remove_button .item .remove:hover{
-    background: unset;
+
+.ts-wrapper.plugin-remove_button .item .remove:hover {
+  background: unset;
+}
+
+.has-items .ts-control > input {
+  width: unset !important;
 }

app/assets/stylesheets/components/nested_form.scss

@@ -1,9 +1,14 @@
 .nested-form-input-container .titles{
   display: flex;
-  font-size: 11px;
+  font-size: 14px;
   color: #666666;
   margin-bottom: 5px;
   width: 90%;
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+  }
 }
 
 

app/assets/stylesheets/components/search_input.scss

@@ -42,7 +42,3 @@
 .searched-elements{
   margin-bottom: 0;
 }
-
-.search-inputs input {
-  @extend .form-control !optional;
-}

app/assets/stylesheets/components/summary_section.scss

@@ -1,7 +1,6 @@
 .card_title {
   display: flex;
   font-size: 18px;
-  margin-top: 40px;
   margin-bottom: 20px;
 
   span:nth-child(1){

app/assets/stylesheets/edit-ontology.scss

@@ -0,0 +1,146 @@
+.center {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+.edit-ontology-container {
+  padding: 0 50px;
+  width: 1248px
+}
+
+.edit-ontology-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.edit-ontology-title hr {
+  width: 93px;
+  border: 1px solid var(--primary-color);
+  margin: 0;
+  opacity: 100%;
+}
+
+.edit-ontology-sub-container {
+
+  display: flex;
+}
+
+.edit-ontology-left-column {
+  border-radius: 5px;
+  width: 400px;
+  margin-right: 58px;
+
+}
+
+.edit-ontology-left-column {
+  .nav-pills.disabled  a {
+    color: #888888 !important;
+    cursor: not-allowed;
+  }
+
+  .nav-pills:not(.disabled){
+    .edit-ontology-tab-item.active {
+      color: var(--primary-color);
+      background-color: var(--light-color) !important;
+      border-left: 3px solid var(--primary-color);
+      font-weight: 700;
+    }
+
+
+
+    .edit-ontology-tab-item:hover {
+      background-color: #F6F6F6;
+    }
+
+  }
+}
+
+.edit-ontology-tab-item {
+  font-size: 14px;
+  width: 100%;
+  padding: 10px 15px;
+  font-weight: 500;
+  margin: 3px 0;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color ease 0.3s;
+}
+
+.edit-ontology-right-column {
+  border-radius: 5px;
+  width: 100%;
+}
+
+.edit-ontology-desc {
+  font-size: 12px;
+  color: #777777;
+  margin: 10px 0;
+}
+
+.edit-ontology-desc a {
+  text-decoration: none;
+  color: var(--primary-color);
+}
+
+.edit-ontology-desc a svg {
+  transform: scale(1.2);
+}
+
+.edit-ontology-left-column input {
+  border: 1px solid #BDBDBD;
+  outline: none;
+  font-size: 14px;
+  border-radius: 5px;
+  padding: 10px 15px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+
+
+
+.edit-ontology-field div {
+  font-size: 11px;
+  color: #666;
+
+}
+
+.edit-ontology-field input {
+  border: 1px solid #BDBDBD;
+  border-radius: 5px;
+  font-size: 14px;
+  padding: 10px 15px;
+  outline: none;
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.edit-ontology-field input:focus {
+  border-color: var(--primary-color);
+}
+
+#edit-ontology-actions-devider {
+  width: 100%;
+  border: 1px solid #E9E9E9;
+  border-radius: 210px;
+  margin: 20px 0;
+  opacity: 100%;
+
+}
+
+.edit-ontology-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.reset-all-button {
+  margin-right: 25px;
+  width: 186px;
+}
+
+.save-button {
+  width: 90px;
+}
+

app/assets/stylesheets/nav_bar.scss

@@ -68,7 +68,7 @@
     outline: none;
     opacity: 60%;
     border: 1px solid white;
-    background-color: var(--primary-color);
+    background-color: var(--primary-color) !important;
     color: white;
     border-radius: 5px;
     font-size: 14px;

app/assets/stylesheets/ontology_details_header.scss

@@ -20,6 +20,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
 }
 
 .ontology-details-name-bar{

app/assets/stylesheets/submissions.scss

@@ -8,4 +8,7 @@ div#contacts  div.contact.col-sm-10.offset-sm-2 {
 
 #submissionLocation small.form-text {
   margin-bottom: 0.5em;
+}
+.tab-content{
+	position: relative;
 }