use the vertical tabs component in the admin page

app/assets/javascripts/bp_admin.js

@@ -406,11 +406,11 @@ function populateOntologyRows(data) {
     var ontologyDateCreated = parseReportDate(ontology["date_created"]);
 
     if (ontology["logFilePath"] != '') {
-      bpLinks += "<a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+      bpLinks += "<div><a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a> </div>";
     }
-    bpLinks += "<a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+    bpLinks += "<div><a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a></div>";
     let title = `Ontology Submissions for ${acronym}`
-    let link = `<a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a>`
+    let link = `<div><a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a></div>`
     bpLinks += link
 
     var errStatus = ontology["errErrorStatus"] ? ontology["errErrorStatus"].join(", ") : '';
@@ -525,53 +525,45 @@ function displayOntologies(data, ontology) {
         {
           "targets": 0,
           "searchable": true,
-          "title": "Ontology",
-          "width": "160px"
+          "title": "Ontology"
         },
         {
           "targets": 1,
           "searchable": true,
           "title": "Admin",
-          "width": "160px"
         },
         {
           "targets": 2,
           "searchable": true,
           "title": "Format",
-          "width": "55px"
         },
         {
           "targets": 3,
           "searchable": true,
           "title": "Date Created",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 4,
           "searchable": true,
           "title": "Report Date",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 5,
           "searchable": false,
           "orderable": false,
           "title": "URL",
-          "width": "140px"
         },
         {
           "targets": 6,
           "searchable": true,
           "title": "Error Status",
-          "width": "130px"
         },
         {
           "targets": 7,
           "searchable": true,
           "title": "Missing Status",
-          "width": "130px"
         },
         {
           "targets": 8,
@@ -584,8 +576,8 @@ function displayOntologies(data, ontology) {
           "visible": false
         }
       ],
-      "autoWidth": false,
-      "lengthChange": false,
+      "autoWidth": true,
+      "lengthChange": true,
       "searching": true,
       "language": {
         "search": "Filter: ",

app/assets/stylesheets/admin.scss

@@ -152,9 +152,7 @@ table.dataTable tbody tr.selected {
 }
 
 .site-admin-page-section {
-  display: flex;
   margin-top: 15px;
-
   .admin-action-item {
     margin-right: 8px;
   }

app/helpers/admin_helper.rb

@@ -17,7 +17,7 @@ def visits_evolution
     @users_visits[:visits].last - @users_visits[:visits][-2]
   end
 
-  def action_button(name, link, method: :post, class_style: 'btn btn-link mb-3')
+  def action_button(name, link, method: :post, class_style: 'btn btn-link')
     button_to name, link, method: method, class: class_style,
                 form: {data: { turbo: true, turbo_confirm: t('admin.turbo_confirm', name: name), turbo_frame: '_top'}}
 

app/views/admin/_indexing.html.haml

@@ -0,0 +1,16 @@
+%div.container
+  %div#site-admin-clear-caches.my-5
+    %div.site-admin-page-header
+      CACHE MANAGEMENT
+    %dive.site-admin-page-section.d-flex.mb-3
+      = action_button("Flush UI cache", admin_clearcache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Reset UI cache connection", admin_resetcache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Flush GOO cache", admin_clear_goo_cache_path, class_style: 'btn btn-primary mx-1')
+      = action_button("Flush HTTP cache", admin_clear_http_cache_path, class_style: 'btn btn-primary mx-1')
+
+  %div.mb-5
+    %div.site-admin-page-header
+      VERSION MANAGEMENT
+    %dive.site-admin-page-section
+      = render TurboFrameComponent.new(id: 'update_check_frame', src: '/admin/indexer/collections') do |c|
+        - c.loader { 'Checking for updates ...' }

app/views/admin/_main.html.haml

@@ -1,5 +1,5 @@
-%div.container
-  %div#site-admin-clear-caches.my-5
+%div
+  %div#site-admin-clear-caches
     %div.site-admin-page-header
       = t('admin.main.cache_management')
     %dive.site-admin-page-section

app/views/admin/index.html.haml

@@ -15,18 +15,13 @@
   %div.mx-1
     - sections = [t('admin.index.analytics'), t('admin.index.site_administration'),t('admin.index.ontology_administration'),  t('admin.index.licensing'), t('admin.index.users'), t('admin.index.metadata_administration'), t('admin.index.groups'), t('admin.index.categories'), t('admin.index.persons_and_organizations'), t('admin.index.sparql')]
     - selected = params[:section] || sections.first.downcase
-    = render TabsContainerComponent.new(url_parameter: 'section') do |t|
-      - sections.each do |section_title|
-        - t.item(title: section_title.humanize,
-                     path: '',
-                     selected: section_title.downcase.eql?(selected.downcase),
-                     page_name: '')
+    = render Layout::VerticalTabsComponent.new(header:  t('admin.index.administration_console'), titles: sections, selected: selected) do |t|
       - t.item_content do
         = render 'analytics'
       - t.item_content do
         = render 'main'
       - t.item_content do
-        %div.ontologies_list_container.mt-3
+        %div
           %table{:style => "float:left;"}
             %tr
               %td{:style => "white-space:nowrap;"}
@@ -36,7 +31,7 @@
                 %a#refresh_report_action{:href => "javascript:;", :class => "link_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only", :style => "margin-left:11px;"}
                   %span.ui-button-text{:class => "report_date_generated_button"}
           %p.tab_description{:style => "clear:both;"}
-          %table#adminOntologies.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
+          %table#adminOntologies.border.rounded.p-1
       - t.item_content do
         %div#renew-license-notice
           %table.table.table-sm.table-bordered.mt-5#license-table
@@ -53,23 +48,14 @@
 
         %div.mb-5#renew-license-form
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'users-list', src: users_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'users-list', src: users_path, loading: 'lazy')
       - t.item_content do
         = render partial: 'ontologies_metadata_curator/metadata_tab'
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'groups-list', src: admin_groups_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'groups-list', src: admin_groups_path, loading: 'lazy')
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'categories-list', src: admin_categories_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'categories-list', src: admin_categories_path, loading: 'lazy')
       - t.item_content do
-        %div.ontologies_list_container.mt-3
-          %div.mx-auto.w-75
-            = render TurboFrameComponent.new(id: 'agents-list', src: agents_path, loading: 'lazy')
+        = render TurboFrameComponent.new(id: 'agents-list', src: agents_path, loading: 'lazy')
       - t.item_content do
-        %div.container
-          = sparql_query_container
+        = sparql_query_container