Merge pull request #4588 from G-Chubinidze/gc_SCI_7176

expose experiment ids in active / archived card views [SCI-7176] [SCI-7202]

app/assets/javascripts/projects/show.js

@@ -55,7 +55,7 @@
   function initProjectsViewModeSwitch() {
     $(experimentsPage)
       .on('ajax:success', '.change-experiments-view-type-form', function(ev, data) {
-        $(cardsWrapper).removeClass('list').addClass(data.cards_view_type_class);
+        $(cardsWrapper).removeClass('list cards').addClass(data.cards_view_type_class);
         $(experimentsPage).find('.cards-switch .button-to').removeClass('selected');
         $(ev.target).find('.button-to').addClass('selected');
         $(ev.target).parents('.dropdown.view-switch').removeClass('open');

app/assets/stylesheets/experiments.scss

@@ -53,7 +53,7 @@
         grid-row: span 7;
 
         .experiment-code-cell {
-          display: none;
+          display: block;
         }
 
         &.experiment-card {
@@ -93,6 +93,8 @@
             overflow: hidden;
             text-overflow: ellipsis;
             width: 100%;
+            position: relative;
+
 
             a {
               color: inherit;
@@ -540,3 +542,33 @@
     }
   }
 }
+
+.cards-wrapper.last-page.cards {
+  .experiment-card {
+    .experiment-name-cell {
+      right: 28px;
+      top: -11px;
+    }
+
+    .data-row {
+      .card-label {
+        color: $color-silver-chalice;
+      }
+    }
+
+    .modified-date-cell {
+      color: $color-silver-chalice;
+      left: 80px;
+      margin-left: auto;
+      margin-right: 114px;
+      position: relative;
+      top: -2px;
+    }
+
+    .experiment-code-cell {
+      left: 20px;
+      position: relative;
+      top: 5px;
+    }
+  }
+}

app/views/projects/show/_experiment_card.html.erb

@@ -10,7 +10,16 @@
       </div>
     <% end %>
   </div>
-
+  
+  <div class="experiment-code-cell table-cell">
+    <span><%= experiment.code %></span>
+  </div>
+  
+  <div class="data-row modified-date-cell table-cell">
+    <span class="card-label" cards-render="true"><%= t('experiments.card.modified_date') %></span>
+    <span class="card-value"><%= l(experiment.updated_at, format: :full_date) %></span>
+  </div>
+  
   <div class="experiment-name-cell table-cell">
     <div class="workflow-img-wrapper" list-render="true">
       <%= render partial: 'projects/show/experiment_workflow_image_container', locals: { experiment: experiment } %>
@@ -21,9 +30,6 @@
       <%= link_to experiment.name, canvas_experiment_path(experiment), title: experiment.name, class: 'name-link' %>
     <% end %>
   </div>
-  <div class="experiment-code-cell table-cell">
-    <span><%= experiment.code %></span>
-  </div>
   <div class="actions actions-cell table-cell">
     <div class="dropdown dropdown-async experiment-actions-menu" data-dropdown-url="<%= actions_dropdown_experiment_path(experiment) %>">
       <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="experimentActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -38,17 +44,14 @@
         <span class="card-label" cards-render="true"><%= t('experiments.card.start_date') %></span>
         <span class="card-value"><%= l(experiment.created_at, format: :full_date) %></span>
       </div>
-      <div class="data-row modified-date-cell table-cell">
-        <span class="card-label" cards-render="true"><%= t('experiments.card.modified_date') %></span>
-        <span class="card-value"><%= l(experiment.updated_at, format: :full_date) %></span>
-      </div>
+
       <% if experiment.archived_branch? %>
         <div class="data-row archived-date-cell table-cell">
           <span class="card-label" cards-render="true"><%= t('experiments.card.archived_date') %></span>
           <span class="card-value"><%= l(experiment.archived_on || project.archived_on, format: :full_date) %></span>
         </div>
       <% end %>
-      <div class="data-row" cards-render="true" data-view-mode="active">
+      <div class="data-row" cards-render="true">
         <span class="card-label"><%= t('experiments.card.completed_task') %></span>
         <span class="card-value"><%= t('experiments.card.completed_value', completed: experiment.completed_task_count, all: experiment.task_count) %></span>
       </div>

app/views/projects/show/_experiment_workflow_image_container.html.erb

@@ -1,8 +1,4 @@
-<% if experiment.archived_branch? %>
-  <div class="archived-icon-plceholder">
-    <i class="fas fa-archive"></i>
-  </div>
-<% elsif experiment.my_modules.any?(&:active?) %>
+<% if experiment.my_modules.any?(&:active?) %>
   <% if experiment.workflowimg.attached? %>
     <div class="workflowimg-container" data-workflowimg-present="true">
       <%= render partial: 'projects/show/workflow_img', locals: { experiment: experiment } %>