Merge pull request #7106 from aignatov-bio/ai-sci-10211-small-table-fixes

Small table fixes [SCI-10211]

app/assets/stylesheets/shared/ag_table.scss

@@ -15,7 +15,6 @@
   --ag-icon-font-code-checkbox-indeterminate: asset-url("checkbox/indeterminate.svg");
   --ag-input-focus-box-shadow: none;
   --ag-cell-horizontal-padding: .75rem;
-
   border: 0;
 
   .ag-cell {
@@ -31,6 +30,10 @@
     cursor: pointer;
   }
 
+  .ag-header-cell-resize {
+    width: 1rem;
+  }
+
   .ag-input-field-input:focus {
     outline: none !important;
     outline-offset: 0 !important;

app/javascript/vue/experiments/list.vue

@@ -122,7 +122,8 @@ export default {
         {
           field: 'created_at',
           headerName: this.i18n.t('experiments.card.start_date'),
-          sortable: true
+          sortable: true,
+          minWidth: 130
         },
         {
           field: 'updated_at',

app/javascript/vue/projects/list.vue

@@ -88,7 +88,7 @@ export default {
     NewProjectModal,
     NewFolderModal,
     MoveModal,
-    AccessModal,
+    AccessModal
   },
   props: {
     dataSource: { type: String, required: true },
@@ -102,7 +102,7 @@ export default {
     userRolesUrl: { type: String },
     currentFolderId: { type: String },
     foldersTreeUrl: { type: String },
-    moveToUrl: { type: String },
+    moveToUrl: { type: String }
   },
   data() {
     return {
@@ -121,17 +121,18 @@ export default {
           flex: 1,
           headerName: this.i18n.t('projects.index.card.name'),
           sortable: true,
-          cellRenderer: this.nameRenderer,
+          cellRenderer: this.nameRenderer
         },
         {
           field: 'code',
           headerName: this.i18n.t('projects.index.card.id'),
-          sortable: true,
+          sortable: true
         },
         {
           field: 'created_at',
           headerName: this.i18n.t('projects.index.card.start_date'),
           sortable: true,
+          minWidth: 130
         },
         {
           field: 'users',
@@ -140,15 +141,15 @@ export default {
           sortable: false,
           minWidth: 210,
           notSelectable: true
-        },
-      ],
+        }
+      ]
     };
   },
   computed: {
     viewRenders() {
       return [
         { type: 'table' },
-        { type: 'cards' },
+        { type: 'cards' }
       ];
     },
     toolbarActions() {
@@ -160,7 +161,7 @@ export default {
           label: this.i18n.t('projects.index.new'),
           type: 'emit',
           path: this.createUrl,
-          buttonStyle: 'btn btn-primary',
+          buttonStyle: 'btn btn-primary'
         });
       }
       if (this.createFolderUrl) {
@@ -170,32 +171,32 @@ export default {
           label: this.i18n.t('projects.index.new_folder'),
           type: 'emit',
           path: this.createFolderUrl,
-          buttonStyle: 'btn btn-light',
+          buttonStyle: 'btn btn-light'
         });
       }
       return {
         left,
-        right: [],
+        right: []
       };
     },
     filters() {
       const filters = [
         {
           key: 'query',
-          type: 'Text',
+          type: 'Text'
         },
         {
           key: 'created_at',
           type: 'DateRange',
-          label: this.i18n.t('filters_modal.created_on.label'),
-        },
+          label: this.i18n.t('filters_modal.created_on.label')
+        }
       ];
 
       if (this.currentViewMode === 'archived') {
         filters.push({
           key: 'archived_at',
           type: 'DateRange',
-          label: this.i18n.t('filters_modal.archived_on.label'),
+          label: this.i18n.t('filters_modal.archived_on.label')
         });
       }
 
@@ -206,13 +207,13 @@ export default {
         optionRenderer: this.usersFilterRenderer,
         labelRenderer: this.usersFilterRenderer,
         label: this.i18n.t('projects.index.filters_modal.members.label'),
-        placeholder: this.i18n.t('projects.index.filters_modal.members.placeholder'),
+        placeholder: this.i18n.t('projects.index.filters_modal.members.placeholder')
       });
 
       filters.push({
         key: 'folder_search',
         type: 'Checkbox',
-        label: this.i18n.t('projects.index.filters_modal.folders.label'),
+        label: this.i18n.t('projects.index.filters_modal.folders.label')
       });
 
       return filters;
@@ -241,7 +242,7 @@ export default {
     access(event, rows) {
       this.accessModalParams = {
         object: rows[0],
-        roles_path: this.userRolesUrl,
+        roles_path: this.userRolesUrl
       };
     },
     async archive(event, rows) {
@@ -302,7 +303,7 @@ export default {
       if (ok) {
         axios.post(event.path, {
           project_ids: rows.filter((row) => !row.folder).map((row) => row.id),
-          project_folder_ids: rows.filter((row) => row.folder).map((row) => row.id),
+          project_folder_ids: rows.filter((row) => row.folder).map((row) => row.id)
         }).then((response) => {
           this.reloadingTable = true;
           HelperModule.flashAlertMsg(response.data.message, 'success');

app/javascript/vue/shared/datatable/action_toolbar.vue

@@ -8,7 +8,7 @@
         {{ i18n.t('action_toolbar.no_actions') }}
       </div>
       <div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
-        <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5
+        <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 hover:text-sn-white hover:bg-sn-blue
                   bg-sn-white color-sn-blue hover:no-underline focus:no-underline ${action.button_class}`"
           :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
           :id="action.button_id"

app/javascript/vue/shared/datatable/table.vue

@@ -382,7 +382,7 @@ export default {
       this.dataLoading = true;
       if (clearSelection) this.selectedRows = [];
       this.page = 1;
-      this.loadData();
+      this.loadData(true);
     },
     loadData(reload = false) {
       axios

app/javascript/vue/shared/datatable/tableHeader.js

@@ -1,6 +1,7 @@
 export default {
   template: `
-    <div class="w-full grid items-center gap-2 grid-cols-[auto_1.5rem] cursor-pointer"
+    <div class="w-full grid items-center gap-2 grid-cols-[auto_1.5rem]"
+         :class="{'cursor-pointer': params.enableSorting}"
          :data-e2e="'e2e-CO-TableHeader-' + params.column.colId "
          @click="onSortRequested((activeSort == 'asc' ? 'desc' : 'asc'), $event)">
       <div v-if="params.html" class="customHeaderLabel truncate" v-html="params.html"></div>

app/javascript/vue/shared/datatable/toolbar.vue

@@ -75,7 +75,7 @@
         :title="i18n.t('experiments.table.column_display_modal.title')"
         class="btn btn-light icon-btn btn-black"
       >
-        <i class="sn-icon sn-icon-manage-table"></i>
+        <i class="sn-icon sn-icon-manage-columns"></i>
       </button>
       <GeneralDropdown v-if="currentViewRender === 'cards'" ref="dropdown" position="right">
         <template v-slot:field>
@@ -252,6 +252,7 @@ export default {
       if (ok) {
         this.$emit('resetColumnsToDefault');
       }
+      this.showColumnsModal = true;
     }
   }
 };

vendor/assets/stylesheets/fonts/SN-icon-font.svg

@@ -171,7 +171,9 @@
 <glyph unicode="&#xe98e;" glyph-name="history-search" data-tags="history seaerch" d="M512 789.333c-128.853 0-240.64-71.68-298.667-176.64v91.307h-42.667v-170.667h170.667v42.667h-98.987c48.213 100.693 150.613 170.667 269.653 170.667 164.693 0 298.667-133.973 298.667-298.667s-133.973-298.667-298.667-298.667c-134.827 0-249.173 90.027-286.293 213.333h-43.947c37.973-147.2 171.093-256 330.24-256 188.587 0 341.333 152.747 341.333 341.333s-152.747 341.333-341.333 341.333zM676.267 292.267l-29.867-29.867-177.067 177.067v221.867h42.667v-204.8l164.267-164.267z" />
 <glyph unicode="&#xe98f;" glyph-name="item" data-tags="item" d="M682.667 661.333c0-94.257-76.412-170.667-170.667-170.667-94.257 0-170.667 76.41-170.667 170.667s76.41 170.667 170.667 170.667c94.255 0 170.667-76.41 170.667-170.667zM725.333 106.667c-70.694 0-128 57.306-128 128s57.306 128 128 128c70.694 0 128-57.306 128-128s-57.306-128-128-128zM725.333 64c94.255 0 170.667 76.412 170.667 170.667s-76.412 170.667-170.667 170.667c-94.255 0-170.667-76.412-170.667-170.667s76.412-170.667 170.667-170.667zM298.667 106.667c-70.692 0-128 57.306-128 128s57.308 128 128 128c70.692 0 128-57.306 128-128s-57.308-128-128-128zM298.667 64c94.257 0 170.667 76.412 170.667 170.667s-76.41 170.667-170.667 170.667c-94.257 0-170.667-76.412-170.667-170.667s76.41-170.667 170.667-170.667z" />
 <glyph unicode="&#xe990;" glyph-name="move-arrows" data-tags="move-arrows" d="M330.988 564.239l-81.66-81.675h134.673v-42.667h-134.69l81.677-81.694-30.165-30.165-133.184 133.184 133.184 133.182 30.165-30.165zM693.013 564.239l30.165 30.165 133.184-133.182-133.184-133.184-30.165 30.165 81.677 81.694h-134.69v42.667h134.673l-81.66 81.675zM512.597 520.956l60.352-60.331-60.352-60.352-60.331 60.352 60.331 60.331zM408.982 280.209l81.684-81.668v134.69h42.667v-134.694l81.685 81.673 30.165-30.165-133.184-133.184-133.183 133.184 30.165 30.165zM408.982 642.234l-30.165 30.165 133.183 133.184 133.184-133.184-30.165-30.165-81.685 81.669v-134.674h-42.667v134.673l-81.684-81.668z" />
+<glyph unicode="&#xe991;" glyph-name="teams-small" data-tags="teams-small" d="M881.493 424.747c-8.107 10.658-18.347 19.614-31.147 26.010-28.16 13.641-55.467 23.023-83.2 29.841-28.16 6.822-84.907 10.231-84.907 10.231l0.427-42.633c0 0 50.347-2.982 75.093-8.951s49.067-14.498 72.96-26.010c7.253-3.836 12.8-8.525 16.64-13.641 3.84-5.542 5.973-11.511 5.973-18.334v-18.33h-128v-42.637h170.667v60.966c0 15.774-5.12 30.699-14.507 43.486zM691.2 268.284c10.667-5.542 19.2-12.791 25.173-20.894 5.973-8.098 8.96-17.476 8.96-27.285v-27.712h-426.667v27.712c0 9.809 2.987 19.187 8.96 27.285 5.973 8.102 14.507 14.925 25.173 20.894 104.030 50.095 252.523 50.987 358.4 0zM314.453 306.227c-17.92-9.378-31.147-20.463-40.96-34.108-11.52-15.347-17.493-33.681-17.493-52.442v-70.345h512v70.345c0 18.761-5.973 37.094-17.067 52.442-9.813 13.218-23.040 24.303-39.253 33.254-119.223 57.647-276.817 58.982-397.227 0.853zM512 618.7c46.933 0 85.333-38.371 85.333-85.268 0-46.895-38.4-85.27-85.333-85.27s-85.333 38.374-85.333 85.27c0 46.897 38.4 85.268 85.333 85.268zM512 661.333c-70.4 0-128-57.556-128-127.901s57.6-127.902 128-127.902c70.4 0 128 57.557 128 127.902s-57.6 127.901-128 127.901zM170.667 362.931v18.33c0 6.822 2.133 12.791 5.973 18.334s9.387 10.231 16.64 13.641c23.893 11.511 48.213 20.041 72.96 26.010s49.92 8.951 75.093 8.951v42.633c-28.16 0-56.747-3.409-84.907-10.231-27.733-6.396-55.040-16.201-81.493-28.988-14.507-7.676-24.747-16.205-32.427-26.863-9.387-12.787-14.507-27.712-14.507-43.486v-60.966h170.667v42.637h-128zM341.333 661.366c12.373 0 21.333-3.837 29.867-12.364l30.72 29.844c-16.64 16.627-36.693 25.154-60.587 25.154s-43.947-8.527-60.587-25.154c-16.64-16.627-24.747-36.665-24.747-60.113s8.107-43.913 24.747-60.54c16.64-16.627 36.693-24.728 60.587-24.728v42.634c-12.373 0-21.76 3.837-30.293 12.364s-12.373 17.906-12.373 30.27c0 12.364 3.84 21.317 12.8 30.27 8.533 8.527 17.92 12.364 29.867 12.364zM682.667 661.366c12.373 0 21.333-3.837 29.867-12.364 8.533-8.953 12.8-18.333 12.8-30.27s-3.84-21.743-12.373-30.27c-8.533-8.527-17.92-12.364-30.293-12.364v-42.634c23.893 0 43.947 8.101 60.587 24.728s24.747 36.665 24.747 60.54c0 23.875-8.107 43.060-24.747 60.113-16.64 16.627-36.693 25.154-60.587 25.154s-43.947-8.527-60.587-25.154l30.72-29.844c8.533 8.527 17.92 12.364 29.867 12.364z" />
 <glyph unicode="&#xe992;" glyph-name="refresh" data-tags="refresh" d="M810.667 283.307c-58.027-104.96-169.813-176.64-298.667-176.64-188.587 0-341.333 152.747-341.333 341.333h42.667c0-164.693 133.973-298.667 298.667-298.667 119.040 0 221.44 69.973 269.653 170.667h-98.987v42.667h170.667v-170.667h-42.667v91.307zM213.333 612.693c58.027 104.96 169.813 176.64 298.667 176.64 188.587 0 341.333-152.747 341.333-341.333h-42.667c0 164.693-133.973 298.667-298.667 298.667-119.040 0-221.44-69.973-269.653-170.667h98.987v-42.667h-170.667v170.667h42.667v-91.307z" />
 <glyph unicode="&#xe993;" glyph-name="pin" data-tags="pin" d="M411.605 357.077l-99.584 99.541c0 0 0.683 21.333 14.293 39.893 29.141 39.68 86.443 41.813 129.195 33.536l67.371 66.304c-14.933 49.963 71.509 107.648 71.509 107.648 65.152-65.195 130.347-130.389 195.541-195.584-4.736-6.357-9.515-12.715-14.293-19.072-22.912-30.421-54.144-56.107-91.136-49.877l-70.827-68.651c0.981-7.339 0.896-0.64 2.517-24.576 3.072-45.44-13.653-92.245-56.149-113.92l-15.915-7.765-102.357 102.357-155.563-155.605-30.208 30.208 155.605 155.563zM587.392 648.747c-14.677-12.117-30.208-30.933-21.845-44.203l10.453-15.403-106.368-106.411c-42.411 10.795-92.715 13.568-109.995-13.099l192.427-192.683c2.005 1.408 3.925 2.901 5.803 4.48 26.155 23.040 16.299 64.853 10.624 104.533l102.187 102.187c0 0 31.36-20.011 62.635 16.555l-144.853 144.853c-0.384-0.256-0.725-0.555-1.067-0.811z" />
 <glyph unicode="&#xe994;" glyph-name="pinned" data-tags="pinned" d="M483.341 312.717l-140.803-0.030c0 0-14.602 15.569-18.102 38.319-7.452 48.661 31.558 90.688 67.641 115.068l0.754 94.52c-45.888 24.77-25.554 126.683-25.554 126.683 92.17-0.030 184.369-0.030 276.567-0.030 1.148-7.844 2.261-15.719 3.379-23.593 5.312-37.712 1.387-77.959-29.175-99.712l-1.536-98.624c5.884-4.497 1.084 0.179 19.157-15.599 34.304-29.961 55.573-74.88 40.849-120.256l-5.76-16.747h-144.755l0.030-220.028h-42.722l0.030 220.028zM401.399 643.26c-1.81-18.947 0.513-43.234 15.809-46.703l18.281-3.5 0.030-150.458c-37.62-22.353-75.151-55.966-68.514-87.040l272.311-0.179c0.422 2.415 0.725 4.826 0.939 7.27 2.202 34.786-34.334 57.382-66.406 81.429v144.513c0 0 36.326 8.025 32.585 55.995h-204.854c-0.090-0.453-0.12-0.905-0.181-1.327z" />
+<glyph unicode="&#xe995;" glyph-name="manage-columns" data-tags="manage-columns" d="M810.667 789.333c23.467 0 42.667-19.2 42.667-42.667v-597.333c0-23.467-19.2-42.667-42.667-42.667h-597.333c-23.467 0-42.667 19.2-42.667 42.667v597.333c0 23.467 19.2 42.667 42.667 42.667h597.333zM810.667 746.667h-597.333v-128h597.333v128zM810.667 576h-170.667v-426.667h170.667v426.667zM597.333 576h-170.667v-426.667h170.667v426.667zM384 576h-170.667v-426.667h170.667v426.667z" />
 </font></defs></svg>

vendor/assets/stylesheets/sn-icon-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'SN-icon-font';
-  src:  url('fonts/SN-icon-font.eot?h4j5vh');
-  src:  url('fonts/SN-icon-font.eot?h4j5vh#iefix') format('embedded-opentype'),
-    url('fonts/SN-icon-font.woff2?h4j5vh') format('woff2'),
-    url('fonts/SN-icon-font.ttf?h4j5vh') format('truetype'),
-    url('fonts/SN-icon-font.woff?h4j5vh') format('woff'),
-    url('fonts/SN-icon-font.svg?h4j5vh#SN-icon-font') format('svg');
+  src:  url('fonts/SN-icon-font.eot?5l6t28');
+  src:  url('fonts/SN-icon-font.eot?5l6t28#iefix') format('embedded-opentype'),
+    url('fonts/SN-icon-font.woff2?5l6t28') format('woff2'),
+    url('fonts/SN-icon-font.ttf?5l6t28') format('truetype'),
+    url('fonts/SN-icon-font.woff?5l6t28') format('woff'),
+    url('fonts/SN-icon-font.svg?5l6t28#SN-icon-font') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -470,3 +470,9 @@
 .sn-icon-pinned:before {
   content: "\e994";
 }
+.sn-icon-teams-small:before {
+  content: "\e991";
+}
+.sn-icon-manage-columns:before {
+  content: "\e995";
+}