Merge branch 'develop' into ml-sci-4261

2024-09-20 14:45:56 +08:00 · 2020-05-28 08:18:24 +02:00 · 2020-05-28 08:18:24 +02:00 · c673e27109
parent f0dcf60421 183f5af7de
commit c673e27109
405 changed files with 11369 additions and 4252 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -1,5 +1,5 @@
 env:
-  - DOCKER_COMPOSE_VERSION=1.13.0
+  - DOCKER_COMPOSE_VERSION=1.23.2

 sudo: required
 language: ruby
--- a/4
+++ b/4
@ -18,6 +18,10 @@ RUN apt-get update -qq && \
  libvips42 \
  sudo graphviz --no-install-recommends \
  libreoffice \
+  fonts-droid-fallback \
+  fonts-noto-mono \
+  fonts-wqy-microhei \
+  fonts-wqy-zenhei \
  libfile-mimeinfo-perl \
  chromium-driver && \
  wget -q -O /tmp/wkhtmltox_amd64.deb $WKHTMLTOPDF_PACKAGE_URL && \
--- a/Dockerfile.production
+++ b/Dockerfile.production
@ -21,6 +21,10 @@ RUN apt-get update -qq && \
  libvips42 \
  sudo graphviz --no-install-recommends \
  libreoffice \
+  fonts-droid-fallback \
+  fonts-noto-mono \
+  fonts-wqy-microhei \
+  fonts-wqy-zenhei \
  libfile-mimeinfo-perl && \
  wget -q -O /tmp/wkhtmltox_amd64.deb $WKHTMLTOPDF_PACKAGE_URL && \
  apt-get install -y /tmp/wkhtmltox_amd64.deb && \
--- a/8
+++ b/8
@ -41,7 +41,7 @@ gem 'rack-attack'
 # JS datetime library, requirement of datetime picker
 gem 'momentjs-rails', '~> 2.17.1'
 # JS datetime picker
-gem 'bootstrap3-datetimepicker-rails', '~> 4.15.35'
+gem 'bootstrap3-datetimepicker-rails', '~> 4.17'
 # Select elements for Bootstrap
 gem 'bootstrap-select-rails', '~> 1.12.4'
 gem 'uglifier', '>= 1.3.0'
@ -67,11 +67,11 @@ gem 'down', '~> 5.0'
 gem 'faker' # Generate fake data
 gem 'fastimage' # Light gem to get image resolution
 gem 'httparty', '~> 0.13.1'
-gem 'i18n-js', '~> 3.0' # Localization in javascript files
+gem 'i18n-js', '~> 3.6' # Localization in javascript files
 gem 'jbuilder' # JSON structures via a Builder-style DSL
 gem 'logging', '~> 2.0.0'
 gem 'nested_form_fields'
-gem 'nokogiri', '~> 1.10.3' # HTML/XML parser
+gem 'nokogiri', '~> 1.10.8' # HTML/XML parser
 gem 'rails_autolink', '~> 1.1', '>= 1.1.6'
 gem 'rgl' # Graph framework for project diagram calculations
 gem 'roo', '~> 2.8.2' # Spreadsheet parser
@ -97,7 +97,7 @@ gem 'rufus-scheduler', '~> 3.5'
 gem 'discard', '~> 1.0'

 gem 'ruby-graphviz', '~> 1.2' # Graphviz for rails
-gem 'tinymce-rails', '~> 4.9.3' # Rich text editor - SEE BELOW
+gem 'tinymce-rails', '~> 4.9.10' # Rich text editor - SEE BELOW
 # Any time you update tinymce-rails Gem, also update the cache_suffix parameter
 # in sitewide/tiny_mce.js - to prevent browsers from loading old, cached .js
 # TinyMCE files which might cause errors
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,6 +1,6 @@
 GIT
  remote: https://github.com/biosistemika/canaid
-  revision: 2ac3004d728adbf1be7f4271689b83464f612b23
+  revision: f595a096f402900e184bf51298dca38fbb7e0820
  branch: rails_6
  specs:
    canaid (1.0.4)
@ -42,38 +42,38 @@ GIT
 GEM
  remote: http://rubygems.org/
  specs:
-    actioncable (6.0.0)
-      actionpack (= 6.0.0)
+    actioncable (6.0.3)
+      actionpack (= 6.0.3)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (6.0.0)
-      actionpack (= 6.0.0)
-      activejob (= 6.0.0)
-      activerecord (= 6.0.0)
-      activestorage (= 6.0.0)
-      activesupport (= 6.0.0)
+    actionmailbox (6.0.3)
+      actionpack (= 6.0.3)
+      activejob (= 6.0.3)
+      activerecord (= 6.0.3)
+      activestorage (= 6.0.3)
+      activesupport (= 6.0.3)
      mail (>= 2.7.1)
-    actionmailer (6.0.0)
-      actionpack (= 6.0.0)
-      actionview (= 6.0.0)
-      activejob (= 6.0.0)
+    actionmailer (6.0.3)
+      actionpack (= 6.0.3)
+      actionview (= 6.0.3)
+      activejob (= 6.0.3)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
-    actionpack (6.0.0)
-      actionview (= 6.0.0)
-      activesupport (= 6.0.0)
-      rack (~> 2.0)
+    actionpack (6.0.3)
+      actionview (= 6.0.3)
+      activesupport (= 6.0.3)
+      rack (~> 2.0, >= 2.0.8)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.0.0)
-      actionpack (= 6.0.0)
-      activerecord (= 6.0.0)
-      activestorage (= 6.0.0)
-      activesupport (= 6.0.0)
+    actiontext (6.0.3)
+      actionpack (= 6.0.3)
+      activerecord (= 6.0.3)
+      activestorage (= 6.0.3)
+      activesupport (= 6.0.3)
      nokogiri (>= 1.8.5)
-    actionview (6.0.0)
-      activesupport (= 6.0.0)
+    actionview (6.0.3)
+      activesupport (= 6.0.3)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
@ -83,27 +83,27 @@ GEM
      activemodel (>= 4.1, < 6.1)
      case_transform (>= 0.2)
      jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    activejob (6.0.0)
-      activesupport (= 6.0.0)
+    activejob (6.0.3)
+      activesupport (= 6.0.3)
      globalid (>= 0.3.6)
-    activemodel (6.0.0)
-      activesupport (= 6.0.0)
-    activerecord (6.0.0)
-      activemodel (= 6.0.0)
-      activesupport (= 6.0.0)
-    activerecord-import (1.0.2)
+    activemodel (6.0.3)
+      activesupport (= 6.0.3)
+    activerecord (6.0.3)
+      activemodel (= 6.0.3)
+      activesupport (= 6.0.3)
+    activerecord-import (1.0.4)
      activerecord (>= 3.2)
-    activestorage (6.0.0)
-      actionpack (= 6.0.0)
-      activejob (= 6.0.0)
-      activerecord (= 6.0.0)
+    activestorage (6.0.3)
+      actionpack (= 6.0.3)
+      activejob (= 6.0.3)
+      activerecord (= 6.0.3)
      marcel (~> 0.3.1)
-    activesupport (6.0.0)
+    activesupport (6.0.3)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 0.7, < 2)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
-      zeitwerk (~> 2.1, >= 2.1.8)
+      zeitwerk (~> 2.2, >= 2.2.2)
    addressable (2.7.0)
      public_suffix (>= 2.0.2, < 5.0)
    aes_key_wrap (1.0.1)
@ -156,10 +156,10 @@ GEM
      autoprefixer-rails (>= 5.2.1)
      sassc (>= 2.0.0)
    bootstrap-select-rails (1.12.4)
-    bootstrap3-datetimepicker-rails (4.15.35)
+    bootstrap3-datetimepicker-rails (4.17.47)
      momentjs-rails (>= 2.8.1)
    bootstrap_form (2.7.0)
-    builder (3.2.3)
+    builder (3.2.4)
    bullet (6.0.2)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
@ -195,10 +195,10 @@ GEM
      execjs
    coffee-script-source (1.12.2)
    commit_param_routing (0.0.1)
-    concurrent-ruby (1.1.5)
+    concurrent-ruby (1.1.6)
    crack (0.4.3)
      safe_yaml (~> 1.0.0)
-    crass (1.0.5)
+    crass (1.0.6)
    cucumber (3.1.2)
      builder (>= 2.1.2)
      cucumber-core (~> 3.2.0)
@ -246,11 +246,11 @@ GEM
    discard (1.1.0)
      activerecord (>= 4.2, < 7)
    docile (1.3.2)
-    doorkeeper (5.1.0)
+    doorkeeper (5.1.1)
      railties (>= 5)
    down (5.0.0)
      addressable (~> 2.5)
-    erubi (1.8.0)
+    erubi (1.9.0)
    et-orbi (1.2.2)
      tzinfo
    execjs (2.7.0)
@ -281,7 +281,7 @@ GEM
      multi_xml (>= 0.5.2)
    i18n (1.6.0)
      concurrent-ruby (~> 1.0)
-    i18n-js (3.3.0)
+    i18n-js (3.6.0)
      i18n (>= 0.6.6)
    image_processing (1.9.3)
      mini_magick (>= 4.9.5, < 5)
@ -330,7 +330,7 @@ GEM
    logging (2.0.0)
      little-plugger (~> 1.1)
      multi_json (~> 1.10)
-    loofah (2.3.1)
+    loofah (2.5.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.1)
@ -341,11 +341,11 @@ GEM
    mime-types (3.3)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2019.0904)
-    mimemagic (0.3.3)
+    mimemagic (0.3.5)
    mini_magick (4.9.5)
    mini_mime (1.0.2)
    mini_portile2 (2.4.0)
-    minitest (5.13.0)
+    minitest (5.14.0)
    momentjs-rails (2.17.1)
      railties (>= 3.1)
    msgpack (1.3.1)
@ -359,7 +359,7 @@ GEM
      rails (>= 3.2.0)
    newrelic_rpm (6.6.0.358)
    nio4r (2.5.2)
-    nokogiri (1.10.4)
+    nokogiri (1.10.9)
      mini_portile2 (~> 2.4.0)
    nokogumbo (2.0.1)
      nokogiri (~> 1.8, >= 1.8.4)
@ -404,30 +404,30 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (4.0.1)
-    puma (4.3.1)
+    puma (4.3.5)
      nio4r (~> 2.0)
    raabro (1.1.6)
-    rack (2.0.8)
+    rack (2.2.2)
    rack-attack (6.1.0)
      rack (>= 1.0, < 3)
    rack-proxy (0.6.5)
      rack
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
-    rails (6.0.0)
-      actioncable (= 6.0.0)
-      actionmailbox (= 6.0.0)
-      actionmailer (= 6.0.0)
-      actionpack (= 6.0.0)
-      actiontext (= 6.0.0)
-      actionview (= 6.0.0)
-      activejob (= 6.0.0)
-      activemodel (= 6.0.0)
-      activerecord (= 6.0.0)
-      activestorage (= 6.0.0)
-      activesupport (= 6.0.0)
+    rails (6.0.3)
+      actioncable (= 6.0.3)
+      actionmailbox (= 6.0.3)
+      actionmailer (= 6.0.3)
+      actionpack (= 6.0.3)
+      actiontext (= 6.0.3)
+      actionview (= 6.0.3)
+      activejob (= 6.0.3)
+      activemodel (= 6.0.3)
+      activerecord (= 6.0.3)
+      activestorage (= 6.0.3)
+      activesupport (= 6.0.3)
      bundler (>= 1.3.0)
-      railties (= 6.0.0)
+      railties (= 6.0.3)
      sprockets-rails (>= 2.0.0)
    rails-controller-testing (1.0.4)
      actionpack (>= 5.0.1.x)
@ -436,8 +436,8 @@ GEM
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
-    rails-html-sanitizer (1.2.0)
-      loofah (~> 2.2, >= 2.2.2)
+    rails-html-sanitizer (1.3.0)
+      loofah (~> 2.3)
    rails_12factor (0.0.3)
      rails_serve_static_assets
      rails_stdout_logging
@ -445,9 +445,9 @@ GEM
      rails (> 3.1)
    rails_serve_static_assets (0.0.5)
    rails_stdout_logging (0.0.5)
-    railties (6.0.0)
-      actionpack (= 6.0.0)
-      activesupport (= 6.0.0)
+    railties (6.0.3)
+      actionpack (= 6.0.3)
+      activesupport (= 6.0.3)
      method_source
      rake (>= 0.8.7)
      thor (>= 0.20.3, < 2.0)
@ -541,7 +541,7 @@ GEM
    simplecov-html (0.10.2)
    spinjs-rails (1.4)
      rails (>= 3.1)
-    sprockets (3.7.2)
+    sprockets (4.0.0)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.1)
@ -553,12 +553,12 @@ GEM
    thread_safe (0.3.6)
    tilt (2.0.9)
    timecop (0.9.1)
-    tinymce-rails (4.9.4)
+    tinymce-rails (4.9.10)
      railties (>= 3.1.1)
    turbolinks (5.1.1)
      turbolinks-source (~> 5.1)
    turbolinks-source (5.2.0)
-    tzinfo (1.2.5)
+    tzinfo (1.2.7)
      thread_safe (~> 0.1)
    uglifier (4.1.20)
      execjs (>= 0.3.0, < 3)
@ -584,7 +584,7 @@ GEM
    wkhtmltopdf-heroku (2.12.5.0)
    xpath (3.2.0)
      nokogiri (~> 1.8)
-    zeitwerk (2.2.1)
+    zeitwerk (2.3.0)

 PLATFORMS
  ruby
@ -606,7 +606,7 @@ DEPENDENCIES
  bootsnap
  bootstrap-sass (~> 3.4.1)
  bootstrap-select-rails (~> 1.12.4)
-  bootstrap3-datetimepicker-rails (~> 4.15.35)
+  bootstrap3-datetimepicker-rails (~> 4.17)
  bootstrap_form (~> 2.7.0)
  bullet
  byebug
@ -631,7 +631,7 @@ DEPENDENCIES
  figaro
  hammerjs-rails
  httparty (~> 0.13.1)
-  i18n-js (~> 3.0)
+  i18n-js (~> 3.6)
  image_processing (~> 1.2)
  jbuilder
  jquery-rails
@ -648,7 +648,7 @@ DEPENDENCIES
  momentjs-rails (~> 2.17.1)
  nested_form_fields
  newrelic_rpm
-  nokogiri (~> 1.10.3)
+  nokogiri (~> 1.10.8)
  omniauth
  omniauth-azure-activedirectory
  omniauth-linkedin-oauth2
@ -687,7 +687,7 @@ DEPENDENCIES
  sneaky-save!
  spinjs-rails
  timecop
-  tinymce-rails (~> 4.9.3)
+  tinymce-rails (~> 4.9.10)
  turbolinks (~> 5.1.1)
  tzinfo-data
  uglifier (>= 1.3.0)
--- a/2
+++ b/2
@ -1 +1 @@
-1.18.1
+1.19.0
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@ -0,0 +1,3 @@
+//= link_tree ../images
+//= link application.js
+//= link application.css
--- a/app/assets/images/custom/checkerboard-pattern.png
+++ b/app/assets/images/custom/checkerboard-pattern.png
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@ -26,11 +26,13 @@
 //= require nested_form_fields
 //= require highlight.pack
 //= require tinymce-jquery
+//= require_tree ./tinymce/plugins
 //= require jsPlumb-2.0.4-min
 //= require jsnetworkx
 //= require bootstrap-select
 //= require_directory ./repository_columns/columns_initializers
 //= require datatables
+//= require clndr.min
 //= require ajax-bootstrap-select.min
 //= require underscore
 //= require i18n.js
@ -45,7 +47,9 @@
 //= require marvinjslauncher
 //= require_tree ./repositories/renderers
 //= require_directory ./repositories/validators
+//= require_directory ./dashboard
 //= require_directory ./sitewide
+//= require sidebar
 //= require turbolinks


--- a/app/assets/javascripts/dashboard/calendar.js
+++ b/app/assets/javascripts/dashboard/calendar.js
@ -0,0 +1,88 @@
+/* global I18n */
+/* eslint-disable no-underscore-dangle */
+
+var DasboardCalendarWidget = (function() {
+  function calendarTemplate() {
+    return `<script id="calendar-template" type="text/template">
+              <div class="controls">
+                <div class="clndr-previous-button">
+                  <div class="btn btn-light icon-btn"><i class="fas fa-angle-double-left"></i></div>
+                </div>
+                <div class="clndr-title"><%= month %> <%= year %></div>
+                <div class="clndr-next-button">
+                  <div class="btn btn-light icon-btn"><i class="fas fa-angle-double-right"></i></div>
+                </div>
+              </div>
+              <div class="days-container">
+                <% _.each(daysOfTheWeek, function(day) { %>
+                    <div class="day-header"><%= day %></div>
+                <% }); %>
+                <% _.each(days, function(day) { %>
+                  <% if (day.classes.includes('event')){ %>
+                    <div class="<%= day.classes %>" id="<%= day.id %>">
+                      <div class="event-day" data-toggle="dropdown"><%= day.day %></div>
+                      <div class="dropdown-menu events-container dropdown-menu-right" role="menu">
+                        <div class="title">${I18n.t('dashboard.calendar.due_on')} <%= day.date.format(formatJS) %></div>
+                        <div class="tasks"></div>
+                      </div>
+                    </div>
+                  <% } else { %>
+                    <div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div>
+                  <% } %>
+                <% }); %>
+              </div>
+            </script>`;
+  }
+
+  function getMonthEventsList(date, clndrInstance) {
+    var getUrl = $('.dashboard-calendar').data('month-events-url');
+    $.get(getUrl, { date: date }, function(result) {
+      clndrInstance.setEvents(result.events);
+    });
+  }
+
+  function initCalendar() {
+    var dayOfWeek = [
+      I18n.t('dashboard.calendar.dow.su'),
+      I18n.t('dashboard.calendar.dow.mo'),
+      I18n.t('dashboard.calendar.dow.tu'),
+      I18n.t('dashboard.calendar.dow.we'),
+      I18n.t('dashboard.calendar.dow.th'),
+      I18n.t('dashboard.calendar.dow.fr'),
+      I18n.t('dashboard.calendar.dow.sa')
+    ];
+    var clndrInstance = $('.dashboard-calendar').clndr({
+      template: $(calendarTemplate()).html(),
+      daysOfTheWeek: dayOfWeek,
+      forceSixRows: true,
+      clickEvents: {
+        click: function(target) {
+          var getDayUrl = $('.dashboard-calendar').data('day-events-url');
+          if ($(target.element).hasClass('event')) {
+            $.get(getDayUrl, { date: target.date._i }, function(result) {
+              $(target.element).find('.tasks').html(result.html);
+            });
+          }
+        },
+        onMonthChange: function(month) {
+          getMonthEventsList(month._d, clndrInstance);
+        }
+      }
+    });
+
+    getMonthEventsList((new Date()), clndrInstance);
+  }
+
+
+  return {
+    init: () => {
+      if ($('.current-tasks-widget').length) {
+        initCalendar();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardCalendarWidget.init();
+});
--- a/app/assets/javascripts/dashboard/current_tasks.js
+++ b/app/assets/javascripts/dashboard/current_tasks.js
@ -0,0 +1,198 @@
+/* global dropdownSelector I18n animateSpinner PerfectSb InfiniteScroll */
+/* eslint-disable no-param-reassign */
+
+var DasboardCurrentTasksWidget = (function() {
+  var sortFilter = '.curent-tasks-filters .sort-filter';
+  var viewFilter = '.curent-tasks-filters .view-filter';
+  var projectFilter = '.curent-tasks-filters .project-filter';
+  var experimentFilter = '.curent-tasks-filters .experiment-filter';
+
+  function generateTasksListHtml(json, container) {
+    $.each(json.data, (i, task) => {
+      var currentTaskItem = ` <a class="current-task-item" href="${task.link}">
+                                <div class="current-task-breadcrumbs">${task.project}<span class="slash">/</span>${task.experiment}</div>
+                                <div class="item-row">
+                                  <div class="task-name">${task.name}</div>
+                                  <div class="task-due-date ${task.state.class} ${task.due_date ? '' : 'hidden'}">
+                                    <i class="fas fa-calendar-day"></i> ${I18n.t('dashboard.current_tasks.due_date', { date: task.due_date })}
+                                  </div>
+                                  <div class="task-progress-container ${task.state.class}">
+                                    <div class="task-progress" style="padding-left: ${task.steps_precentage}%"></div>
+                                    <div class="task-progress-label">${task.state.text}</div>
+                                  </div>
+                                </div>
+                              </a>`;
+      $(container).append(currentTaskItem);
+    });
+  }
+
+  function initInfiniteScroll() {
+    InfiniteScroll.init('.current-tasks-list', {
+      url: $('.current-tasks-list').data('tasksListUrl'),
+      customResponse: (json, container) => {
+        generateTasksListHtml(json, container);
+      },
+      customParams: (params) => {
+        params.project_id = dropdownSelector.getValues(projectFilter);
+        params.experiment_id = dropdownSelector.getValues(experimentFilter);
+        params.sort = dropdownSelector.getValues(sortFilter);
+        params.view = dropdownSelector.getValues(viewFilter);
+        params.query = $('.current-tasks-widget .task-search-field').val();
+        params.mode = $('.current-tasks-navbar .active').data('mode');
+        return params;
+      }
+    });
+  }
+
+  function filtersEnabled() {
+    return dropdownSelector.getValues(experimentFilter)
+           || dropdownSelector.getValues(projectFilter)
+           || $('.current-tasks-widget .task-search-field').val().length > 0
+           || dropdownSelector.getValues(viewFilter) !== 'uncompleted';
+  }
+
+  function loadCurrentTasksList(newList) {
+    var $currentTasksList = $('.current-tasks-list');
+    var params = {
+      project_id: dropdownSelector.getValues(projectFilter),
+      experiment_id: dropdownSelector.getValues(experimentFilter),
+      sort: dropdownSelector.getValues(sortFilter),
+      view: dropdownSelector.getValues(viewFilter),
+      query: $('.current-tasks-widget .task-search-field').val(),
+      mode: $('.current-tasks-navbar .active').data('mode')
+    };
+    animateSpinner($currentTasksList, true);
+    $.get($currentTasksList.data('tasksListUrl'), params, function(result) {
+      $currentTasksList.empty();
+      // Toggle empty state
+      if (result.data.length === 0) {
+        if (filtersEnabled()) {
+          $currentTasksList.append($('#dashboard-current-task-no-search-results').html());
+        } else {
+          $currentTasksList.append($('#dashboard-current-task-no-tasks').html());
+          $currentTasksList.find('.widget-placeholder').addClass($('.current-tasks-navbar .active').data('mode'));
+        }
+      }
+      generateTasksListHtml(result, $currentTasksList);
+      PerfectSb().update_all();
+      if (newList) InfiniteScroll.resetScroll('.current-tasks-list');
+      animateSpinner($currentTasksList, false);
+    });
+  }
+
+  function initFilters() {
+    $('.curent-tasks-filters .clear-button').click((e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      dropdownSelector.selectValue(sortFilter, 'date_asc');
+      dropdownSelector.selectValue(viewFilter, 'uncompleted');
+      dropdownSelector.clearData(projectFilter);
+      dropdownSelector.clearData(experimentFilter);
+    });
+
+    dropdownSelector.init(sortFilter, {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      disableSearch: true
+    });
+
+    dropdownSelector.init(viewFilter, {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      disableSearch: true
+    });
+
+    dropdownSelector.init(projectFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      emptyOptionAjax: true,
+      selectAppearance: 'simple',
+      ajaxParams: (params) => {
+        params.mode = $('.current-tasks-navbar .active').data('mode');
+        return params;
+      },
+      onChange: () => {
+        var selectedValue = dropdownSelector.getValues(projectFilter);
+        if (selectedValue > 0) {
+          dropdownSelector.enableSelector(experimentFilter);
+        } else {
+          dropdownSelector.disableSelector(experimentFilter);
+        }
+        dropdownSelector.clearData(experimentFilter);
+      }
+    });
+
+    dropdownSelector.init(experimentFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      emptyOptionAjax: true,
+      selectAppearance: 'simple',
+      ajaxParams: (params) => {
+        params.mode = $('.current-tasks-navbar .active').data('mode');
+        params.project_id = dropdownSelector.getValues(projectFilter);
+        return params;
+      }
+    });
+
+    $('.curent-tasks-filters').click((e) => {
+      // Prevent filter window close
+      e.stopPropagation();
+      e.preventDefault();
+      dropdownSelector.closeDropdown(sortFilter);
+      dropdownSelector.closeDropdown(viewFilter);
+      dropdownSelector.closeDropdown(projectFilter);
+      dropdownSelector.closeDropdown(experimentFilter);
+    });
+
+    $('.curent-tasks-filters .apply-filters').click((e) => {
+      $('.curent-tasks-filters').dropdown('toggle');
+      e.stopPropagation();
+      e.preventDefault();
+      loadCurrentTasksList(true);
+    });
+
+    $('.filter-container').on('hide.bs.dropdown', () => {
+      loadCurrentTasksList(true);
+      $('.current-tasks-list').removeClass('disabled');
+    });
+
+    $('.filter-container').on('shown.bs.dropdown', () => {
+      $('.current-tasks-list').addClass('disabled');
+    });
+  }
+
+  function initNavbar() {
+    $('.current-tasks-navbar .navbar-link').on('click', function() {
+      $(this).parent().find('.navbar-link').removeClass('active');
+      $(this).addClass('active');
+      loadCurrentTasksList(true);
+    });
+  }
+
+  function initSearch() {
+    $('.current-tasks-widget').on('change', '.task-search-field', () => {
+      loadCurrentTasksList();
+    });
+  }
+
+
+  return {
+    init: () => {
+      if ($('.current-tasks-widget').length) {
+        initNavbar();
+        initFilters();
+        initSearch();
+        loadCurrentTasksList();
+        initInfiniteScroll();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardCurrentTasksWidget.init();
+});
--- a/app/assets/javascripts/dashboard/quick_start.js
+++ b/app/assets/javascripts/dashboard/quick_start.js
@ -0,0 +1,132 @@
+/* global I18n dropdownSelector */
+/* eslint-disable no-param-reassign */
+
+var DasboardQuickStartWidget = (function() {
+  var projectFilter = '#create-task-modal .project-filter';
+  var experimentFilter = '#create-task-modal .experiment-filter';
+  var createTaskButton = '#create-task-modal .create-task-button';
+  var newProjectsVisibility = '#create-task-modal .new-projects-visibility';
+
+  function initNewReportLink() {
+    $('.quick-start-widget .new-report').click(() => {
+      sessionStorage.setItem('scinote-dashboard-new-report', Math.floor(Date.now() / 1000));
+    });
+  }
+
+  function initNewProtocolLink() {
+    $('.quick-start-widget .new-protocol').click(() => {
+      sessionStorage.setItem('scinote-dashboard-new-protocol', Math.floor(Date.now() / 1000));
+    });
+  }
+
+  function initNewTaskModal() {
+    $('.quick-start-widget .new-task').click(() => {
+      $('#create-task-modal').modal('show');
+      $('#create-task-modal .select-block').attr('data-error', '');
+    });
+
+    dropdownSelector.init(projectFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      optionLabel: (data) => {
+        if (data.value === 0) {
+          return `<i class="fas fa-plus"></i>
+                  <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
+                  <span>"${data.label}"</span>`;
+        }
+        return data.label;
+      },
+      onSelect: () => {
+        var selectedValue = dropdownSelector.getValues(projectFilter);
+        // Toggle project visibility button
+        if (selectedValue === '0') {
+          $(newProjectsVisibility).show();
+        } else {
+          $(newProjectsVisibility).hide();
+        }
+        // Enable/disable experiment filter
+        if (selectedValue >= 0) {
+          dropdownSelector.enableSelector(experimentFilter);
+        } else {
+          dropdownSelector.disableSelector(experimentFilter);
+        }
+        dropdownSelector.clearData(experimentFilter);
+      }
+    });
+
+    dropdownSelector.init(experimentFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      optionLabel: (data) => {
+        if (data.value === 0) {
+          return `<i class="fas fa-plus"></i>
+                  <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
+                  <span>"${data.label}"</span>`;
+        }
+        return data.label;
+      },
+      ajaxParams: (params) => {
+        if (dropdownSelector.getValues(projectFilter) === '0') {
+          params.project = {
+            name: dropdownSelector.getData(projectFilter)[0].label,
+            visibility: $('input[name="projects-visibility-selector"]:checked').val()
+          };
+        } else {
+          params.project = { id: dropdownSelector.getValues(projectFilter) };
+        }
+        return params;
+      },
+      onSelect: () => {
+        var selectedValue = dropdownSelector.getValues(experimentFilter);
+        if (selectedValue >= 0) {
+          $(createTaskButton).removeAttr('disabled');
+        } else {
+          $(createTaskButton).attr('disabled', true);
+        }
+      }
+    });
+
+    $(createTaskButton).click((e) => {
+      var params = {};
+      if (dropdownSelector.getValues(projectFilter) === '0') {
+        params.project = {
+          name: dropdownSelector.getData(projectFilter)[0].label,
+          visibility: $('input[name="projects-visibility-selector"]:checked').val()
+        };
+      } else {
+        params.project = { id: dropdownSelector.getValues(projectFilter) };
+      }
+      if (dropdownSelector.getValues(experimentFilter) === '0') {
+        params.experiment = { name: dropdownSelector.getData(experimentFilter)[0].label };
+      } else {
+        params.experiment = { id: dropdownSelector.getValues(experimentFilter) };
+      }
+      e.stopPropagation();
+      e.preventDefault();
+      $('#create-task-modal .select-block').attr('data-error', '');
+      $.post($(createTaskButton).data('ajaxUrl'), params, function(data) {
+        window.location.href = data.my_module_path;
+      }).error((response) => {
+        var errorsObject = response.responseJSON.error_object;
+        var errorsText = response.responseJSON.errors.name.join(' ');
+        $(`#create-task-modal .select-block[data-error-object="${errorsObject}"]`).attr('data-error', errorsText);
+      });
+    });
+  }
+
+  return {
+    init: () => {
+      if ($('.quick-start-widget').length) {
+        initNewTaskModal();
+        initNewProtocolLink();
+        initNewReportLink();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardQuickStartWidget.init();
+});
--- a/app/assets/javascripts/dashboard/recent_work.js
+++ b/app/assets/javascripts/dashboard/recent_work.js
@ -0,0 +1,52 @@
+/* global I18n PerfectSb*/
+/* eslint-disable no-param-reassign */
+
+var DasboardRecentWorkWidget = (function() {
+  function renderRecentWorkItem(data, container) {
+    $.each(data, (i, item) => {
+      var recentWorkItem = $($('#recent-work-item-template').html());
+      recentWorkItem.attr('href', item.url);
+      recentWorkItem.find('.object-name').html(item.name);
+      recentWorkItem.find('.object-type').html(I18n.t('dashboard.recent_work.subject_type.' + item.subject_type));
+      recentWorkItem.find('.object-changed').html(item.last_change);
+      container.append(recentWorkItem);
+    });
+  }
+
+  function initRecentWork() {
+    var container = $('.recent-work-container');
+    $('.recent-work-container').empty();
+    $.get(container.data('url'), {
+      mode: $('.recent-work-navbar .active').data('mode')
+    }, function(result) {
+      if (result.length) {
+        renderRecentWorkItem(result, container);
+      } else {
+        container.append($('#recent-work-no-results-template').html());
+      }
+
+      PerfectSb().update_all();
+    });
+  }
+
+  function initNavbar() {
+    $('.recent-work-navbar .navbar-link').on('click', function() {
+      $(this).parent().find('.navbar-link').removeClass('active');
+      $(this).addClass('active');
+      initRecentWork();
+    });
+  }
+
+  return {
+    init: () => {
+      if ($('.recent-work-widget').length) {
+        initNavbar();
+        initRecentWork();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardRecentWorkWidget.init();
+});
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@ -77,7 +77,9 @@ var globalActivities = (function() {
    var defaultOnChangeActions = function() {
      GlobalActivitiesUpdateTopPaneTags();
      reloadActivities();
+      toggleClearButtons();
    };
+    $('.ga-tags-container').hide();

    dropdownSelector.init(groupActivityFilter, {
      optionClass: 'checkbox-icon',
@ -113,6 +115,7 @@ var globalActivities = (function() {
      updateRunning = false;
      GlobalActivitiesUpdateTopPaneTags();
      reloadActivities();
+      toggleClearButtons();
    });

    dropdownSelector.init(userFilter, {
@ -295,6 +298,24 @@ var globalActivities = (function() {
      return true;
    }

+    function toggleClearButtons() {
+      var topFilters = $('.ga-tags-container');
+      if (topFilters.find('.ds-tags').length) {
+        topFilters.show();
+      } else {
+        topFilters.hide();
+      }
+
+      $.each($('.filter-block'), (i, block) => {
+        if ($(block).find('.ds-tags').length
+        || ($(block).hasClass('date-selector') && $(block)[0].dataset.periodSelect.length)) {
+          $(block).find('.clear').show();
+        } else {
+          $(block).find('.clear').hide();
+        }
+      });
+    }
+
    function resetHotButtonsBackgroundColor() {
      $('.date-selector .hot-button').each(function() {
        $(this).removeClass('selected');
@ -314,6 +335,7 @@ var globalActivities = (function() {
        dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
        GlobalActivitiesUpdateTopPaneTags();
        reloadActivities();
+        toggleClearButtons();
        resetHotButtonsBackgroundColor();
      }
    });
@ -325,6 +347,7 @@ var globalActivities = (function() {
        dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
        GlobalActivitiesUpdateTopPaneTags();
        reloadActivities();
+        toggleClearButtons();
        resetHotButtonsBackgroundColor();
      }
    });
@ -376,6 +399,7 @@ var globalActivities = (function() {
      dateContainer[0].dataset.periodSelect = this.innerHTML;
      GlobalActivitiesUpdateTopPaneTags();
      reloadActivities();
+      toggleClearButtons();

      resetHotButtonsBackgroundColor();
      $(this).addClass('selected');
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@ -1,28 +1,79 @@
 /* global I18n dropdownSelector */
 /* eslint-disable no-use-before-define */

-// Bind ajax for editing due dates
-function initDueDatePicker() {
-  function updateDueDate(val) {
-    var updateUrl = $('.due-date-container').data('update-url');
-    $.ajax({
-      url: updateUrl,
-      type: 'PATCH',
-      dataType: 'json',
-      data: { my_module: { due_date: val } },
-      success: function(result) {
-        $('.due-date-container').html($(result.module_header_due_date_label));
-        initDueDatePicker();
+function initTaskCollapseState() {
+  let taskView = '.my-modules-protocols-index';
+  let taskSection = '.task-section-caret';
+  let taskId = $(taskView).data('task-id');
+
+  function collapseStateSave() {
+    $(taskView).on('click', taskSection, function() {
+      let collapsed = $(this).attr('aria-expanded');
+      let taskSectionType = $(this).attr('aria-controls');
+
+      if (collapsed === 'true') {
+        localStorage.setItem('task_section_collapsed/' + taskId + '/' + taskSectionType, collapsed);
+      } else {
+        localStorage.removeItem('task_section_collapsed/' + taskId + '/' + taskSectionType);
      }
    });
  }

-  $('#calendar-due-date').on('dp.change', function() {
-    updateDueDate($('#calendar-due-date').val());
-  });
+  function collapseStateLoad() {
+    $(taskSection).each(function() {
+      let taskSectionType = $(this).attr('aria-controls');
+      var collapsed = localStorage.getItem('task_section_collapsed/' + taskId + '/' + taskSectionType);

-  $('.flex-block.date-block .clear-date').off('click').on('click', function() {
-    updateDueDate(null);
+      if (JSON.parse(collapsed)) {
+        $('#' + taskSectionType).collapse('hide');
+      }
+      $(this).closest('.task-section').removeClass('hidden');
+    });
+  }
+
+  collapseStateSave();
+  collapseStateLoad();
+}
+
+function updateStartDate() {
+  let updateUrl = $('#startDateContainer').data('update-url');
+  let val = $('#calendarStartDate').val();
+  $.ajax({
+    url: updateUrl,
+    type: 'PATCH',
+    dataType: 'json',
+    data: { my_module: { started_on: val } },
+    success: function(result) {
+      $('#startDateLabelContainer').html(result.start_date_label);
+    }
+  });
+}
+
+// Bind ajax for editing due dates
+function initStartDatePicker() {
+  $('#calendarStartDate').on('dp.change', function() {
+    updateStartDate();
+  });
+}
+
+function updateDueDate() {
+  let updateUrl = $('#dueDateContainer').data('update-url');
+  let val = $('#calendarDueDate').val();
+  $.ajax({
+    url: updateUrl,
+    type: 'PATCH',
+    dataType: 'json',
+    data: { my_module: { due_date: val } },
+    success: function(result) {
+      $('#dueDateLabelContainer').html(result.due_date_label);
+    }
+  });
+}
+
+// Bind ajax for editing due dates
+function initDueDatePicker() {
+  $('#calendarDueDate').on('dp.change', function() {
+    updateDueDate();
  });
 }

@ -100,7 +151,17 @@ function bindEditTagsAjax() {
      });
    manageTagsModalBody.find('.edit-tag-form')
      .on('ajax:success', function(e, data) {
+        var newTag;
        initTagsModalBody(data);
+        dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
+        newTag = $('#manage-module-tags-modal .list-group-item[data-tag-id=' + this.dataset.tagId + ']');
+        dropdownSelector.addValue('#module-tags-selector', {
+          value: newTag.data('tag-id'),
+          label: newTag.data('name'),
+          params: {
+            color: newTag.data('color')
+          }
+        }, true);
      })
      .on('ajax:error', function(e, data) {
        $(this).renderFormErrors('tag', data.responseJSON);
@ -184,7 +245,7 @@ function applyTaskCompletedCallBack() {
            button.find('.btn')
              .removeClass('btn-default').addClass('btn-primary');
          }
-          $('.due-date-container').html(data.module_header_due_date_label);
+          $('#dueDateContainer').html(data.module_header_due_date);
          initDueDatePicker();
          $('.task-state-label').html(data.module_state_label);
          button.find('button').replaceWith(data.new_btn);
@ -214,7 +275,7 @@ function initTagsSelector() {
      }
      return `<span class="my-module-tags-color"></span>
              ${data.label + ' '}
-              <span class="my-module-tags-create-new"> (${I18n.t('my_modules.module_header.create_new_tag')})</span>`;
+              <span class="my-module-tags-create-new"> (${I18n.t('my_modules.details.create_new_tag')})</span>`;
    },
    onOpen: function() {
      $('.select-container .edit-button-container').removeClass('hidden');
@ -263,7 +324,65 @@ function initTagsSelector() {
  }).getContainer(myModuleTagsSelector).addClass('my-module-tags-container');
 }

+function initAssignedUsersSelector() {
+  var manageUsersModal = $('#manage-module-users-modal');
+  var manageUsersModalBody = manageUsersModal.find('.modal-body');
+
+  // Initialize users editing modal remote loading
+  function initUsersEditLink() {
+    $('.task-details').on('ajax:success', '.manage-users-link', function(e, data) {
+      manageUsersModal.modal('show');
+      manageUsersModal.find('#manage-module-users-modal-module').text(data.my_module.name);
+      initUsersModalBody(data);
+    });
+  }
+
+  // Initialize ajax listeners and elements style on modal body.
+  // This function must be called when modal body is changed.
+  function initUsersModalBody(data) {
+    manageUsersModalBody.html(data.html);
+    manageUsersModalBody.find('.selectpicker').selectpicker();
+  }
+
+  // Initialize reloading manage user modal content after posting new user
+  manageUsersModalBody.on('ajax:success', '.add-user-form', function(e, data) {
+    initUsersModalBody(data);
+  });
+
+  // Initialize remove user from my_module links
+  manageUsersModalBody.on('ajax:success', '.remove-user-link', function(e, data) {
+    initUsersModalBody(data);
+  });
+
+  // Reload users HTML element when modal is closed
+  manageUsersModal.on('hide.bs.modal', function() {
+    var usersEl = $('.task-assigned-users');
+    // Load HTML to refresh users
+    $.ajax({
+      url: usersEl.attr('data-module-users-url'),
+      type: 'GET',
+      dataType: 'json',
+      success: function(data) {
+        $('.task-assigned-users').replaceWith(data.html);
+      },
+      error: function() {
+        // TODO
+      }
+    });
+  });
+
+  // Remove users modal content when modal window is closed.
+  manageUsersModal.on('hidden.bs.modal', function() {
+    manageUsersModalBody.html('');
+  });
+
+  initUsersEditLink();
+}
+
+initTaskCollapseState();
 applyTaskCompletedCallBack();
 initTagsSelector();
 bindEditTagsAjax();
+initStartDatePicker();
 initDueDatePicker();
+initAssignedUsersSelector();
--- a/app/assets/javascripts/my_modules/protocols.js
+++ b/app/assets/javascripts/my_modules/protocols.js
@ -10,15 +10,19 @@ var selectedRow = null;


 function initEditMyModuleDescription() {
-  $('#my_module_description_view').on('click', function() {
+  var viewObject = $('#my_module_description_view');
+  viewObject.on('click', function() {
    TinyMCE.init('#my_module_description_textarea');
  });
+  TinyMCE.initIfHasDraft(viewObject);
 }

 function initEditProtocolDescription() {
-  $('#protocol_description_view').on('click', function() {
+  var viewObject = $('#protocol_description_view');
+  viewObject.on('click', function() {
    TinyMCE.init('#protocol_description_textarea', refreshProtocolStatusBar);
  });
+  TinyMCE.initIfHasDraft(viewObject);
 }

 // Initialize edit description modal window
@ -64,11 +68,9 @@ function initCopyToRepository() {
  var modal = $('#copy-to-repository-modal');
  var modalBody = modal.find('.modal-body');
  var submitBtn = modal.find(".modal-footer [data-action='submit']");
-
  link
    .on('ajax:success', function(e, data) {
      modalBody.html(data.html);
-
      modalBody.find("[data-role='copy-to-repository']")
        .on('ajax:success', function(e2, data2) {
          if (data2.refresh !== null) {
@ -176,8 +178,8 @@ function initLoadFromRepository() {

      modal.modal('show');

-      // Init Datatable on public tab
-      initLoadFromRepositoryTable(modalBody.find('#public-tab'));
+      // Init Datatable on recent tab
+      initLoadFromRepositoryTable(modalBody.find('#recent-tab'));

      modalBody.find("a[data-toggle='tab']")
        .on('hide.bs.tab', function(el) {
@ -210,9 +212,7 @@ function initLoadFromRepository() {

 function initLoadFromRepositoryTable(content) {
  var tableEl = content.find("[data-role='datatable']");
-
  var datatable = tableEl.DataTable({
-    order: [[1, 'asc']],
    dom: "RBfl<'row'<'col-sm-12't>><'row'<'col-sm-7'i><'col-sm-5'p>>",
    sScrollX: '100%',
    sScrollXInner: '100%',
@ -220,6 +220,7 @@ function initLoadFromRepositoryTable(content) {
    processing: true,
    serverSide: true,
    responsive: true,
+    order: tableEl.data('default-order') || [[1, 'asc']],
    ajax: {
      url: tableEl.data('source'),
      type: 'POST'
@ -381,8 +382,9 @@ function refreshProtocolStatusBar() {
    type: 'GET',
    dataType: 'json',
    success: function(data) {
-      $("[data-role='protocol-status-bar']").html(data.html);
+      $('.my-module-protocol-status').replaceWith(data.html);
      initLinkUpdate();
+      initCopyToRepository();
    }
  });
 }
@ -429,43 +431,16 @@ function initImport() {
  });
 }

-function initRecentProtocols() {
-  var recentProtocolContainer = $('.my-module-recent-protocols');
-  var dropDownList = recentProtocolContainer.find('.dropdown-menu');
-  recentProtocolContainer.find('.dropdown-button').click(function() {
-    dropDownList.find('.protocol').remove();
-    $.get('/protocols/recent_protocols', result => {
-      $.each(result, (i, protocol) => {
-        $('<div class="protocol"><i class="fas fa-file-alt"></i>'
-          + truncateLongString(protocol.name, GLOBAL_CONSTANTS.NAME_TRUNCATION_LENGTH)
-          + '</div>').appendTo(dropDownList)
-          .click(() => {
-            $.post(recentProtocolContainer.data('updateUrl'), { source_id: protocol.id })
-              .success(() => {
-                location.reload();
-              })
-              .error(ev => {
-                HelperModule.flashAlertMsg(ev.responseJSON.message, 'warning');
-              });
-          });
-      });
+
+
+function initProtocolSectionOpenEvent() {
+  $('#protocol-container').on('shown.bs.collapse', function() {
+    $(this).find("[data-role='hot-table']").each(function() {
+      var $container = $(this).find("[data-role='step-hot-table']");
+      var hot = $container.handsontable('getInstance');
+      hot.render();
    });
  });
-
-  $('.protocol-description-content').on('ajax:success', () => {
-    updateRecentProtocolsStatus();
-  });
-}
-
-function updateRecentProtocolsStatus() {
-  var recentProtocolContainer = $('.my-module-recent-protocols');
-  var steps = $('.step');
-  var protocolDescription = $('#protocol_description_view').html();
-  if (steps.length === 0 && protocolDescription.length === 0) {
-    recentProtocolContainer.css('display', '');
-  } else {
-    recentProtocolContainer.css('display', 'none');
-  }
 }

 /**
@ -480,7 +455,7 @@ function init() {
  initLoadFromRepository();
  refreshProtocolStatusBar();
  initImport();
-  initRecentProtocols();
+  initProtocolSectionOpenEvent();
 }

 init();
--- a/app/assets/javascripts/my_modules/repositories.js
+++ b/app/assets/javascripts/my_modules/repositories.js
@ -0,0 +1,643 @@
+/* eslint-disable no-param-reassign, no-use-before-define */
+/* global DataTableHelpers PerfectScrollbar FilePreviewModal animateSpinner HelperModule
+initAssignedTasksDropdown I18n */
+
+var MyModuleRepositories = (function() {
+  const FULL_VIEW_MODAL = $('#myModuleRepositoryFullViewModal');
+  const UPDATE_REPOSITORY_MODAL = $('#updateRepositoryRecordModal');
+  const STATUS_POLLING_INTERVAL = 10000;
+  var SIMPLE_TABLE;
+  var FULL_VIEW_TABLE;
+  var FULL_VIEW_TABLE_SCROLLBAR;
+  var SELECTED_ROWS = {};
+
+  function reloadRepositoriesList(repositoryId) {
+    var repositoriesContainer = $('#assigned-items-container');
+    $.get(repositoriesContainer.data('repositories-list-url'), function(result) {
+      repositoriesContainer.html(result.html);
+      $('.assigned-items-title').attr('data-assigned-items-count', result.assigned_rows_count);
+      // expand recently updated repository
+      $('#assigned-items-container').collapse('show');
+      $('#assigned-repository-items-container-' + repositoryId).collapse('show');
+    });
+  }
+
+  function tableColumns(tableContainer, skipCheckbox = false) {
+    var columns = $(tableContainer).data('default-table-columns');
+    var customColumns = $(tableContainer).find('thead th[data-type]');
+    for (let i = 0; i < columns.length; i += 1) {
+      columns[i].data = String(i);
+      columns[i].defaultContent = '';
+      if (skipCheckbox && i === 0) columns[i].visible = false;
+    }
+    customColumns.each((i, column) => {
+      columns.push({
+        visible: true,
+        searchable: true,
+        data: String(columns.length),
+        defaultContent: $.fn.dataTable.render['default' + column.dataset.type](column.id)
+      });
+    });
+    return columns;
+  }
+
+  function fullViewColumnDefs() {
+    let columnDefs = [{
+      targets: 0,
+      visible: true,
+      searchable: false,
+      orderable: false,
+      className: 'dt-body-center',
+      sWidth: '1%',
+      render: function(data) {
+        var checked = data ? 'checked' : '';
+        return `<div class="sci-checkbox-container">
+                  <input class='repository-row-selector sci-checkbox' type='checkbox' ${checked}>
+                  <span class='sci-checkbox-label'></span>
+                </div>`;
+      }
+    }];
+
+    if (FULL_VIEW_MODAL.find('.table').data('type') === 'live') {
+      columnDefs.push({
+        targets: 1,
+        searchable: false,
+        className: 'assigned-column',
+        sWidth: '1%',
+        render: function(data) {
+          return $.fn.dataTable.render.AssignedTasksValue(data);
+        }
+      }, {
+        targets: 3,
+        render: function(data, type, row) {
+          return "<a href='" + row.recordInfoUrl + "' class='record-info-link'>" + data + '</a>';
+        }
+      });
+    }
+
+    columnDefs.push(
+      {
+        targets: '_all',
+        render: function(data) {
+          if (typeof data === 'object' && $.fn.dataTable.render[data.value_type]) {
+            return $.fn.dataTable.render[data.value_type](data);
+          }
+          return data;
+        }
+      }
+    );
+
+    return columnDefs;
+  }
+
+  function renderSimpleTable(tableContainer) {
+    if (SIMPLE_TABLE) SIMPLE_TABLE.destroy();
+    SIMPLE_TABLE = $(tableContainer).DataTable({
+      dom: "Rt<'pagination-row'<'version-label'><'pagination-actions'p>>",
+      processing: true,
+      serverSide: true,
+      responsive: true,
+      pageLength: 5,
+      order: [[0, 'asc']],
+      sScrollY: '100%',
+      sScrollX: '100%',
+      sScrollXInner: '100%',
+      destroy: true,
+      ajax: {
+        url: $(tableContainer).data('source'),
+        data: function(d) {
+          d.order[0].column = tableContainer.data('name-column-id');
+          d.assigned = 'assigned';
+          d.view_mode = true;
+          d.simple_view = true;
+        },
+        global: false,
+        type: 'POST'
+      },
+      columnDefs: [{
+        targets: 0,
+        render: function(data, type, row) {
+          return "<a href='" + row.recordInfoUrl + "'"
+                 + "class='record-info-link'>" + data + '</a>';
+        }
+      }],
+      drawCallback: function() {
+        var repositoryContainer = $(this).closest('.assigned-repository-container');
+        repositoryContainer.find('.table.dataTable').removeClass('hidden');
+        repositoryContainer.find('.version-label').html(tableContainer.data('version-label'));
+        SIMPLE_TABLE.columns.adjust();
+      }
+    });
+  }
+
+  function renderFullViewTable(tableContainer, options = {}) {
+    if (FULL_VIEW_TABLE) FULL_VIEW_TABLE.destroy();
+    SELECTED_ROWS = {};
+    FULL_VIEW_TABLE_SCROLLBAR = false;
+    FULL_VIEW_TABLE = $(tableContainer).DataTable({
+      dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
+      processing: true,
+      stateSave: true,
+      serverSide: true,
+      order: $(tableContainer).data('default-order'),
+      pageLength: 25,
+      sScrollX: '100%',
+      sScrollXInner: '100%',
+      destroy: true,
+      ajax: {
+        url: $(tableContainer).data('source'),
+        data: function(d) {
+          if (options.assigned) d.assigned = 'assigned';
+          d.view_mode = true;
+        },
+        global: false,
+        type: 'POST'
+      },
+      columns: tableColumns(tableContainer, options.skipCheckbox),
+      columnDefs: fullViewColumnDefs(),
+
+      fnInitComplete: function() {
+        var dataTableWrapper = $(tableContainer).closest('.dataTables_wrapper');
+        DataTableHelpers.initLengthApearance(dataTableWrapper);
+        DataTableHelpers.initSearchField(dataTableWrapper);
+        dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
+        if (options.assign_mode) {
+          renderFullViewAssignButtons();
+        } else {
+          $('.table-container .toolbar').html($('#repositoryToolbarButtonsTemplate').html());
+          if (FULL_VIEW_MODAL.find('.modal-content').hasClass('show-sidebar')) {
+            FULL_VIEW_MODAL.find('#showVersionsSidebar').addClass('active');
+          }
+        }
+        initAssignedTasksDropdown(tableContainer);
+      },
+
+      drawCallback: function() {
+        FULL_VIEW_TABLE.columns.adjust();
+        FilePreviewModal.init();
+        renderFullViewRepositoryName(
+          tableContainer.attr('data-repository-name'),
+          tableContainer.attr('data-repository-snapshot-created'),
+          options.assign_mode
+        );
+        updateFullViewRowsCount(tableContainer.attr('data-assigned-items-count'));
+        if (FULL_VIEW_TABLE_SCROLLBAR) {
+          FULL_VIEW_TABLE_SCROLLBAR.update();
+        } else {
+          FULL_VIEW_TABLE_SCROLLBAR = new PerfectScrollbar(
+            $(tableContainer).closest('.dataTables_scrollBody')[0],
+            {
+              wheelSpeed: 0.5,
+              minScrollbarLength: 20
+            }
+          );
+        }
+      },
+
+      stateLoadCallback: function(settings, callback) {
+        var loadStateUrl = $(tableContainer).data('load-state-url');
+        $.post(loadStateUrl, function(json) {
+          if (!options.assign_mode) {
+            json.state.columns[0].visible = false;
+          }
+          json.state.search.search = null;
+          callback(json.state);
+        });
+      },
+
+      rowCallback: function(row) {
+        var checkbox = $(row).find('.repository-row-selector');
+        if (SELECTED_ROWS[row.id]) {
+          $(row).addClass('selected');
+          checkbox.attr('checked', !checkbox.attr('checked'));
+        }
+      }
+    });
+  }
+
+  function setSelectedItem() {
+    let versionsSidebar = FULL_VIEW_MODAL.find('.repository-versions-sidebar');
+    let currentId = FULL_VIEW_MODAL.find('.table').data('id');
+    versionsSidebar.find('.list-group-item').removeClass('active');
+    versionsSidebar.find(`[data-id="${currentId}"]`).addClass('active');
+
+    if (!versionsSidebar.find(`[data-id="${currentId}"]`).data('selected')) {
+      $('#setDefaultVersionButton').parent().removeClass('hidden');
+    } else {
+      $('#setDefaultVersionButton').parent().addClass('hidden');
+    }
+  }
+
+  function reloadTable(tableUrl) {
+    animateSpinner(null, true);
+    $.getJSON(tableUrl, (data) => {
+      FULL_VIEW_MODAL.find('.table-container').html(data.html);
+      renderFullViewTable(FULL_VIEW_MODAL.find('.table'), { assigned: true, skipCheckbox: true });
+      setSelectedItem();
+      animateSpinner(null, false);
+    });
+  }
+
+  function initSelectAllCheckbox() {
+    FULL_VIEW_MODAL.on('click', 'input.select-all', function() {
+      var selectAllCheckbox = $(this);
+      var rows = FULL_VIEW_MODAL.find('.dataTables_scrollBody tbody tr');
+      $.each(rows, function(i, row) {
+        var checkbox = $(row).find('.repository-row-selector');
+        if (checkbox.prop('checked') === selectAllCheckbox.prop('checked')) return;
+
+        checkbox.prop('checked', !checkbox.prop('checked'));
+        selectFullViewRow(row);
+      });
+    });
+  }
+
+  function refreshSelectAllCheckbox() {
+    var checkboxes = FULL_VIEW_MODAL.find('.dataTables_scrollBody .repository-row-selector');
+    var selectedCheckboxes = FULL_VIEW_MODAL.find('.dataTables_scrollBody .repository-row-selector:checked');
+    var selectAllCheckbox = FULL_VIEW_MODAL.find('input.select-all');
+    selectAllCheckbox.prop('indeterminate', false);
+    if (selectedCheckboxes.length === 0) {
+      selectAllCheckbox.prop('checked', false);
+    } else if (selectedCheckboxes.length === checkboxes.length) {
+      selectAllCheckbox.prop('checked', true);
+    } else {
+      selectAllCheckbox.prop('indeterminate', true);
+    }
+  }
+
+  function checkSnapshotStatus(snapshotItem) {
+    $.getJSON(snapshotItem.data('status-url'), (statusData) => {
+      if (statusData.status === 'ready') {
+        $.getJSON(snapshotItem.data('version-item-url'), (itemData) => {
+          snapshotItem.replaceWith(itemData.html);
+        });
+      } else {
+        setTimeout(function() {
+          checkSnapshotStatus(snapshotItem);
+        }, STATUS_POLLING_INTERVAL);
+      }
+    });
+  }
+
+  function initSimpleTable() {
+    $('#assigned-items-container').on('shown.bs.collapse', '.assigned-repository-container', function() {
+      var repositoryContainer = $(this);
+      var repositoryTemplate = $($('#myModuleRepositorySimpleTemplate').html());
+      repositoryTemplate.attr('data-source', $(this).data('repository-url'));
+      repositoryTemplate.attr('data-version-label', $(this).data('footer-label'));
+      repositoryTemplate.attr('data-name-column-id', $(this).data('name-column-id'));
+      repositoryContainer.html(repositoryTemplate);
+      renderSimpleTable(repositoryTemplate);
+    });
+
+    $('.navbar-secondary').on('sideBar::shown sideBar::hidden', function() {
+      if (SIMPLE_TABLE) {
+        SIMPLE_TABLE.columns.adjust();
+      }
+    });
+  }
+
+  function initVersionsStatusCheck() {
+    let sidebar = FULL_VIEW_MODAL.find('.repository-versions-sidebar');
+    sidebar.find('.repository-snapshot-item.provisioning').each(function() {
+      var snapshotItem = $(this);
+      setTimeout(function() {
+        checkSnapshotStatus(snapshotItem);
+      }, STATUS_POLLING_INTERVAL);
+    });
+  }
+
+  function refreshCreationSpanshotInfoText() {
+    var snapshotsCount = FULL_VIEW_MODAL.find('.repository-snapshot-item').length;
+    var createSnapshotInfo = FULL_VIEW_MODAL.find('.create-snapshot-item .info');
+    if (snapshotsCount) {
+      createSnapshotInfo.addClass('hidden');
+    } else {
+      createSnapshotInfo.removeClass('hidden');
+    }
+  }
+
+  function initVersionsSidebarActions() {
+    FULL_VIEW_MODAL.on('click', '#showVersionsSidebar', function(e) {
+      $(this).toggleClass('active');
+      if ($(this).hasClass('active')) {
+        $.getJSON(FULL_VIEW_MODAL.find('.table').data('versions-sidebar-url'), (data) => {
+          var snapshotsItemsScrollBar;
+          FULL_VIEW_MODAL.find('.repository-versions-sidebar').html(data.html);
+          snapshotsItemsScrollBar = new PerfectScrollbar(
+            FULL_VIEW_MODAL.find('.repository-snapshots-container')[0]
+          );
+          setSelectedItem();
+          FULL_VIEW_MODAL.find('.modal-content').addClass('show-sidebar');
+          initVersionsStatusCheck();
+          snapshotsItemsScrollBar.update();
+          FULL_VIEW_TABLE.columns.adjust();
+        });
+      } else {
+        FULL_VIEW_MODAL.find('#collapseVersionsSidebar').click();
+      }
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '#createRepositorySnapshotButton', function(e) {
+      animateSpinner(null, true);
+      $.ajax({
+        url: $(this).data('action-path'),
+        type: 'POST',
+        dataType: 'json',
+        success: function(data) {
+          let snapshotItem = $(data.html);
+          FULL_VIEW_MODAL.find('.snapshots-container-scrollbody').prepend(snapshotItem);
+          setTimeout(function() {
+            checkSnapshotStatus(snapshotItem);
+          }, STATUS_POLLING_INTERVAL);
+          animateSpinner(null, false);
+          refreshCreationSpanshotInfoText();
+        }
+      });
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '.delete-snapshot-button', function(e) {
+      let snapshotItem = $(this).closest('.repository-snapshot-item');
+      animateSpinner(null, true);
+      $.ajax({
+        url: $(this).data('action-path'),
+        type: 'DELETE',
+        dataType: 'json',
+        success: function() {
+          if (snapshotItem.data('id') === FULL_VIEW_MODAL.find('.table').data('id')) {
+            reloadTable(FULL_VIEW_MODAL.find('#selectLiveVersionButton').data('table-url'));
+          }
+          snapshotItem.remove();
+          animateSpinner(null, false);
+          refreshCreationSpanshotInfoText();
+        }
+      });
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '.select-snapshot-button', function(e) {
+      reloadTable($(this).data('table-url'));
+      e.stopPropagation();
+    });
+    FULL_VIEW_MODAL.on('click', '.repository-snapshot-item', function(e) {
+      var snapshotButton = $(this).find('.select-snapshot-button');
+      if (!snapshotButton.hasClass('disabled')) {
+        snapshotButton.click();
+      }
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '#selectLiveVersionButton', function(e) {
+      reloadTable(FULL_VIEW_MODAL.find('#selectLiveVersionButton').data('table-url'));
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '#collapseVersionsSidebar', function(e) {
+      FULL_VIEW_MODAL.find('.modal-content').removeClass('show-sidebar');
+      FULL_VIEW_MODAL.find('#showVersionsSidebar').removeClass('active');
+      FULL_VIEW_TABLE.columns.adjust();
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '#setDefaultVersionButton', function(e) {
+      let data;
+      animateSpinner(null, true);
+
+      if (FULL_VIEW_MODAL.find('.table').data('type') === 'live') {
+        data = { repository_id: FULL_VIEW_MODAL.find('.table').data('id') };
+      } else {
+        data = { repository_snapshot_id: FULL_VIEW_MODAL.find('.table').data('id') };
+      }
+
+      $.ajax({
+        url: $(this).data('select-path'),
+        type: 'POST',
+        dataType: 'json',
+        data: data,
+        success: function() {
+          let versionsList = FULL_VIEW_MODAL.find('.repository-versions-list');
+          versionsList.find('.list-group-item').data('selected', false);
+          versionsList.find('.list-group-item.active').data('selected', true);
+          $('#setDefaultVersionButton').parent().addClass('hidden');
+          animateSpinner(null, false);
+        }
+      });
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('hidden.bs.modal', function() {
+      FULL_VIEW_MODAL.find('.repository-versions-sidebar').empty();
+      FULL_VIEW_MODAL.find('.modal-content').removeClass('show-sidebar');
+      FULL_VIEW_MODAL.find('#showVersionsSidebar').removeClass('active');
+      FULL_VIEW_TABLE.destroy();
+    });
+
+    FULL_VIEW_MODAL.on('show.bs.modal', function() {
+      FULL_VIEW_MODAL.find('.table-container').empty();
+      FULL_VIEW_MODAL.find('.repository-name').empty();
+      updateFullViewRowsCount('');
+    });
+  }
+
+  function initRepositoryFullView() {
+    $('#assigned-items-container').on('click', '.action-buttons .full-screen', function(e) {
+      var repositoryNameObject = $(this).closest('.assigned-repository-caret')
+        .find('.assigned-repository-title');
+
+
+      renderFullViewRepositoryName(repositoryNameObject.text());
+      FULL_VIEW_MODAL.modal('show');
+      $.getJSON($(this).data('table-url'), (data) => {
+        FULL_VIEW_MODAL.find('.table-container').html(data.html);
+        renderFullViewTable(FULL_VIEW_MODAL.find('.table'), { assigned: true, skipCheckbox: true });
+      });
+      e.stopPropagation();
+    });
+  }
+
+  function initRepositoriesDropdown() {
+    $('.repositories-assign-container').on('show.bs.dropdown', function() {
+      var dropdownContainer = $(this);
+      $.getJSON(dropdownContainer.data('repositories-url'), function(result) {
+        dropdownContainer.find('.repositories-dropdown-menu').html(result.html);
+      });
+    });
+  }
+
+  function selectFullViewRow(row) {
+    var id = row.id;
+
+    if (!SELECTED_ROWS[id]) {
+      SELECTED_ROWS[id] = {
+        row_name: $(row).find('.record-info-link').text(),
+        assigned: $(row).find('.repository-row-selector').prop('checked')
+      };
+    } else {
+      delete SELECTED_ROWS[id];
+    }
+
+    $(row).toggleClass('selected');
+
+    if (Object.keys(SELECTED_ROWS).length) {
+      $('#assignRepositoryRecords, #updateRepositoryRecords').attr('disabled', false);
+    } else {
+      $('#assignRepositoryRecords, #updateRepositoryRecords').attr('disabled', true);
+    }
+
+    refreshSelectAllCheckbox();
+  }
+
+  function renderFullViewAssignButtons() {
+    var toolbar = FULL_VIEW_MODAL.find('.dataTables_wrapper .toolbar');
+    toolbar.empty();
+    if (parseInt(FULL_VIEW_MODAL.data('rows-count'), 10) === 0) {
+      toolbar.append($('#my-module-repository-full-view-assign-button').html());
+    } else {
+      toolbar.append($('#my-module-repository-full-view-update-button').html());
+    }
+  }
+
+  function updateFullViewRowsCount(value) {
+    FULL_VIEW_MODAL.data('rows-count', value);
+    FULL_VIEW_MODAL.find('.repository-name').attr('data-rows-count', value);
+  }
+
+  function renderFullViewRepositoryName(name, snapshotDate, assignMode) {
+    var title;
+    var repositoryName = name || FULL_VIEW_MODAL.find('.repository-name').data('repository-name');
+
+    if (assignMode) {
+      title = I18n.t('my_modules.repository.full_view.assign_modal_header', {
+        repository_name: repositoryName
+      });
+    } else if (snapshotDate) {
+      title = I18n.t('my_modules.repository.full_view.modal_snapshot_header', {
+        repository_name: repositoryName,
+        snaphot_date: snapshotDate
+      });
+    } else {
+      title = I18n.t('my_modules.repository.full_view.modal_live_header', {
+        repository_name: repositoryName
+      });
+    }
+    FULL_VIEW_MODAL.find('.repository-name').data('repository-name', repositoryName);
+    FULL_VIEW_MODAL.find('.repository-name').html(title);
+  }
+
+  function initRepoistoryAssignView() {
+    $('.repositories-dropdown-menu').on('click', '.repository', function(e) {
+      var assignUrlModal = $(this).data('assign-url-modal');
+      var updateUrlModal = $(this).data('update-url-modal');
+      FULL_VIEW_MODAL.modal('show');
+      $.get($(this).data('table-url'), (data) => {
+        FULL_VIEW_MODAL.find('.table-container').html(data.html);
+        FULL_VIEW_MODAL.data('assign-url-modal', assignUrlModal);
+        FULL_VIEW_MODAL.data('update-url-modal', updateUrlModal);
+        renderFullViewTable(FULL_VIEW_MODAL.find('.table'), { assign_mode: true });
+      });
+      e.stopPropagation();
+    });
+
+    FULL_VIEW_MODAL.on('click', '.table tbody tr', function() {
+      var checkbox = $(this).find('.repository-row-selector');
+      checkbox.prop('checked', !checkbox.prop('checked'));
+      selectFullViewRow(this);
+    }).on('click', '.table tbody tr .repository-row-selector', function(e) {
+      selectFullViewRow($(this).closest('tr')[0]);
+      e.stopPropagation();
+    }).on('click', '#assignRepositoryRecords', function() {
+      openAssignRecordsModal();
+    }).on('click', '#updateRepositoryRecords', function() {
+      openUpdateRecordsModal();
+    });
+
+    UPDATE_REPOSITORY_MODAL.on('click', '.downstream-action', function() {
+      submitUpdateRepositoryRecord({ downstream: true });
+    }).on('click', '.task-action', function() {
+      submitUpdateRepositoryRecord({ downstream: false });
+    });
+  }
+
+  function openUpdateRecordsModal() {
+    var updateUrl = FULL_VIEW_MODAL.data('update-url-modal');
+    $.get(updateUrl, { selected_rows: SELECTED_ROWS }, function(data) {
+      var assignList;
+      var assignListScrollbar;
+      var unassignList;
+      var unassignListScrollbar;
+      UPDATE_REPOSITORY_MODAL.find('.modal-content').html(data.html);
+      UPDATE_REPOSITORY_MODAL.data('update-url', data.update_url);
+      assignList = UPDATE_REPOSITORY_MODAL.find('.rows-to-assign .rows-list')[0];
+      unassignList = UPDATE_REPOSITORY_MODAL.find('.rows-to-unassign .rows-list')[0];
+      if (assignList) assignListScrollbar = new PerfectScrollbar(assignList);
+      if (unassignList) unassignListScrollbar = new PerfectScrollbar(unassignList);
+      UPDATE_REPOSITORY_MODAL.modal('show');
+      if (assignList) assignListScrollbar.update();
+      if (unassignList) unassignListScrollbar.update();
+    });
+  }
+
+  function openAssignRecordsModal() {
+    var assignUrl = FULL_VIEW_MODAL.data('assign-url-modal');
+    $.get(assignUrl, { selected_rows: SELECTED_ROWS }, function(data) {
+      UPDATE_REPOSITORY_MODAL.find('.modal-content').html(data.html);
+      UPDATE_REPOSITORY_MODAL.data('update-url', data.update_url);
+      UPDATE_REPOSITORY_MODAL.modal('show');
+    });
+  }
+
+  function submitUpdateRepositoryRecord(options = {}) {
+    var rowsToAssign = [];
+    var rowsToUnassign = [];
+    $.each(Object.keys(SELECTED_ROWS), function(i, rowId) {
+      if (SELECTED_ROWS[rowId].assigned) {
+        rowsToAssign.push(rowId);
+      } else {
+        rowsToUnassign.push(rowId);
+      }
+    });
+    $.ajax({
+      url: UPDATE_REPOSITORY_MODAL.data('update-url'),
+      type: 'PATCH',
+      dataType: 'json',
+      data: {
+        rows_to_assign: rowsToAssign,
+        rows_to_unassign: rowsToUnassign,
+        downstream: options.downstream
+      },
+      success: function(data) {
+        UPDATE_REPOSITORY_MODAL.modal('hide');
+        HelperModule.flashAlertMsg(data.flash, 'success');
+        SELECTED_ROWS = {};
+        $(FULL_VIEW_TABLE.table().container()).find('.dataTable')
+          .attr('data-assigned-items-count', data.rows_count);
+        FULL_VIEW_TABLE.ajax.reload(null, false);
+        reloadRepositoriesList(data.repository_id);
+        updateFullViewRowsCount(data.rows_count);
+        renderFullViewAssignButtons();
+      },
+      error: function(data) {
+        UPDATE_REPOSITORY_MODAL.modal('hide');
+        HelperModule.flashAlertMsg(data.responseJSON.flash, 'danger');
+        SELECTED_ROWS = {};
+        FULL_VIEW_TABLE.ajax.reload(null, false);
+      }
+    });
+  }
+
+  return {
+    init: () => {
+      initSimpleTable();
+      initRepositoryFullView();
+      initRepositoriesDropdown();
+      initVersionsSidebarActions();
+      initRepoistoryAssignView();
+      initSelectAllCheckbox();
+    }
+  };
+}());
+
+MyModuleRepositories.init();
--- a/app/assets/javascripts/my_modules/results.js
+++ b/app/assets/javascripts/my_modules/results.js
@ -101,6 +101,11 @@

    // create custom ajax request in order to fix issuses with remote: true from
    function handleResultFileSubmit(form, ev) {
+      if (!(form.find('#result_asset_attributes_file')[0].files.length > 0)) {
+        // Assuming that only result name is getting updated
+        return;
+      }
+
      ev.preventDefault();
      ev.stopPropagation();

@ -157,15 +162,15 @@
      var $form = $(ev.target.form);
      $form.clearFormErrors();

+      textValidator(ev, $form.find('#result_name'), 0, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
+
      switch (resultTypeEnum) {
        case ResultTypeEnum.FILE:
          handleResultFileSubmit($form, ev);
          break;
        case ResultTypeEnum.TABLE:
-          textValidator(ev, $form.find('#result_name'), 0, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
          break;
        case ResultTypeEnum.TEXT:
-          textValidator(ev, $form.find('#result_name'), 0, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
          textValidator(
            ev, $form.find('#result_text_attributes_textarea'), 1,
            $form.data('rich-text-max-length'), false, TinyMCE.getContent()
--- a/app/assets/javascripts/navigation.js
+++ b/app/assets/javascripts/navigation.js
@ -3,12 +3,6 @@
 (function() {
  'use strict';

-  /* Init about modal */
-  $("[data-trigger='about-modal']").on('click', function(ev) {
-    ev.preventDefault();
-    $('[data-role=about-modal]').modal('show');
-  });
-
  /* Loading overlay for search */
  $('#search-bar').submit(function() {
    if ($('#update-canvas')) {
@ -96,11 +90,9 @@

    ps = new PerfectScrollbar(teamContainter, { scrollYMarginOffset: 5 });
    teamSwitch.click(() => {
-      dropDownHeight = dropDownMenu.height();
      if (teamSwitch.find('.new-team').length === 0) {
        teamSwitch.find('.edit_user').css('height', '100%');
      }
-      dropDownMenu.css('height', (dropDownHeight + 'px'));
      setTimeout(() => {
        ps.update();
      }, 0);
@ -164,4 +156,4 @@
  // init
  loadDropdownSystemNotifications();
  loadUnseenNotificationsNumber('system-notifications', '.fa-gift');
-})();
+}());
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@ -244,7 +244,6 @@ function initializeEdit() {
      { color: 'white', shadow: true }
    );
  });
-  $.initTooltips();
 }

 function destroyEdit() {
@ -750,7 +749,7 @@ function bindEditDueDateAjax() {
    editDueDateModalBody.find("form")
    .on("ajax:success", function(ev2, data2, status2) {
      // Update module's due date
-      dueDateLink.html(data2.due_date_label);
+      dueDateLink.html(data2.card_due_date_label);

      // Update module's classes if needed
      moduleEl
@ -900,8 +899,6 @@ function bindEditTagsAjax(elements) {
            .find(".edit-tags-link")
            .html(my_module.tags_html);
        });
-        // initialize tooltips again
-        $.initTooltips();
      },
      error: function(data){
        // TODO
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@ -453,8 +453,8 @@
      type: 'GET',
      dataType: 'json',
      success: function(data) {
-        $('#slide-panel .tree').html('<ul>' + data.html + '</ul>');
-        setupSidebarTree();
+        $('#slide-panel .tree').html(data.html);
+        Sidebar.loadLastState();
      }
    });
  }
--- a/app/assets/javascripts/protocols/header.js
+++ b/app/assets/javascripts/protocols/header.js
@ -21,9 +21,11 @@ var ProtocolRepositoryHeader = (function() {
  }

  function initEditDescription() {
-    $('#protocol_description_view').on('click', function() {
+    var viewObject = $('#protocol_description_view');
+    viewObject.on('click', function() {
      TinyMCE.init('#protocol_description_textarea');
    });
+    TinyMCE.initIfHasDraft(viewObject);
  }

  return {
--- a/app/assets/javascripts/protocols/index.js
+++ b/app/assets/javascripts/protocols/index.js
@ -28,7 +28,7 @@ function initProtocolsTable() {

  protocolsDatatable = protocolsTableEl.DataTable({
    order: [[1, "asc"]],
-    dom: "RBfl<'row'<'col-sm-12't>><'row'<'col-sm-7'i><'col-sm-5'p>>",
+    dom: "RB<'main-actions'lf>t<'pagination-row'ip>",
    stateSave: true,
    sScrollX: '100%',
    sScrollXInner: '100%',
@ -100,7 +100,6 @@ function initProtocolsTable() {
    fnDrawCallback: function(settings, json) {
      animateSpinner(this, false);
      initRowSelection();
-      $.initTooltips();
    },
    preDrawCallback: function(settings) {
      animateSpinner(this);
@ -300,6 +299,7 @@ function initCreateNewModal() {
  var link = $("[data-action='create-new']");
  var modal = $("#create-new-modal");
  var submitBtn = modal.find(".modal-footer [data-action='submit']");
+  var newProtocol = parseInt(sessionStorage.getItem('scinote-dashboard-new-protocol'), 10);

  link.on("click", function() {
    $.ajax({
@ -329,6 +329,11 @@ function initCreateNewModal() {
    });
  });

+  if (Math.floor(Date.now() / 1000) - newProtocol < 15) {
+    link.click();
+    sessionStorage.removeItem('scinote-dashboard-new-protocol');
+  }
+
  submitBtn.on("click", function() {
    // Submit the form inside modal
    $(this).closest(".modal").find(".modal-body form").submit();
--- a/app/assets/javascripts/protocols/steps.js.erb
+++ b/app/assets/javascripts/protocols/steps.js.erb
@ -41,7 +41,7 @@
            task_button.attr('data-action', 'uncomplete-task');
            task_button.find('.btn')
              .removeClass('btn-toggle').addClass('btn-default');
-            $('.task-due-date').html(data.module_header_due_date_label);
+            $('.task-due-date').html(data.module_header_due_date);
            $('.task-state-label').html(data.module_state_label);
            task_button
              .find('button')
@ -115,7 +115,6 @@
      toggleButtons(true);

      setTimeout(function() {
-        $.initTooltips();
        initStepsComments();
        FilePreviewModal.init();
        SmartAnnotation.preventPropagation('.atwho-user-popover');
@ -489,6 +488,7 @@
      var $btn = $(this);
      $btn.off();
      animateSpinner(null, true);
+      $('#protocol-container').collapse('show');

      $.ajax({
        url: $btn.data('href'),
@ -617,9 +617,7 @@
            animateSpinner(null, false);
            DragNDropSteps.clearFiles();
            FilePreviewModal.init();
-            $.initTooltips();
            if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar();
-            if (typeof updateRecentProtocolsStatus === 'function') updateRecentProtocolsStatus();
          },
          error: function(xhr) {
            if (xhr.responseJSON['assets.file']) {
@ -634,6 +632,12 @@
          }
        });
        newStepHandler();
+      }).catch(() => {
+        $('#new-step-assets-tab').addClass('has-error');
+        $('#new-step-assets-group')
+          .addClass('has-error')
+          .prepend('<span class="help-block">' +  I18n.t('general.file.upload_failure') + '</span>');
+        animateSpinner(null, false);
      });
    }
  }
--- a/app/assets/javascripts/reports/reports_datatable.js.erb
+++ b/app/assets/javascripts/reports/reports_datatable.js.erb
@ -181,11 +181,17 @@
  }

  function initNewReportModal() {
+    var newReport = parseInt(sessionStorage.getItem('scinote-dashboard-new-report'), 10);
    $('#new-report-btn').on('click', function() {
      $('#new-report-modal').modal('show');
      initSelectPicker();
      initRedirectToNewReportPage();
    });
+
+    if (Math.floor(Date.now() / 1000) - newReport < 15) {
+      $('#new-report-btn').click();
+      sessionStorage.removeItem('scinote-dashboard-new-report');
+    }
  }

  initDatatable();
--- a/app/assets/javascripts/reports/save_pdf_to_inventory.js.erb
+++ b/app/assets/javascripts/reports/save_pdf_to_inventory.js.erb
@ -127,7 +127,7 @@
        .selectpicker({liveSearch: true})
        .ajaxSelectPicker({
          ajax: {
-            url: '<%= Rails.application.routes.url_helpers.available_rows_path %>',
+            url: '<%= Rails.application.routes.url_helpers.available_rows_repositories_path %>',
            type: 'POST',
            dataType: 'json',
            data: function () {
--- a/app/assets/javascripts/repositories/index.js
+++ b/app/assets/javascripts/repositories/index.js
@ -124,6 +124,8 @@
    });

    sharedCBs.change(function() {
+      var selectedTeams = form.find('.teams-list .sci-checkbox:checked').length;
+      form.find('#select_all_teams').prop('indeterminate', selectedTeams > 0);
      $('#editable_' + this.value).toggleClass('hidden', !this.checked)
        .attr('disabled', !this.checked);
    });
--- a/app/assets/javascripts/repositories/renderers/columns/asset.js
+++ b/app/assets/javascripts/repositories/renderers/columns/asset.js
@ -1,9 +1,9 @@
 /*
- global ActiveStorage Promise
+ global ActiveStorage Promise I18n GLOBAL_CONSTANTS
 */
 /* eslint-disable no-unused-vars */

-var Asset = (function() {
+var AssetColumnHelper = (function() {
  function uploadFiles($fileInputs, directUploadUrl) {
    let filesToUploadCntr = 0;
    let filesUploadedCntr = 0;
@ -48,7 +48,32 @@ var Asset = (function() {
    });
  }

+  function renderCell($cell, formId, columnId) {
+    let empty = $cell.is(':empty');
+    let fileName = $cell.find('a.file-preview-link').text();
+    let placeholder = I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB });
+
+    $cell.html(`
+      <div class="file-editing">
+        <div class="file-hidden-field-container hidden"></div>
+        <input class=""
+               id="repository_file_${columnId}"
+               form="${formId}"
+               type="file"
+               data-col-id="${columnId}"
+               data-is-empty="${empty}"
+               value=""
+               data-type="RepositoryAssetValue">
+        <div class="file-upload-button ${empty ? 'new-file' : ''}">
+          <i class="fas fa-paperclip icon"></i>
+          <label data-placeholder="${placeholder}" for="repository_file_${columnId}">${fileName}</label>
+          <span class="delete-action fas fa-trash"> </span>
+        </div>
+      </div>`);
+  }
+
  return {
-    uploadFiles: uploadFiles
+    uploadFiles: uploadFiles,
+    renderCell: renderCell
  };
 }());
--- a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
+++ b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
@ -54,11 +54,11 @@ var DateTimeHelper = (function() {
    }

    hiddenField = `
-      <input class="repository-cell-value" 
-             type="hidden" 
-             form="${formId}" 
-             name="repository_cells[${columnId}]" 
-             value="${value}" 
+      <input class="repository-cell-value"
+             type="hidden"
+             form="${formId}"
+             name="repository_cells[${columnId}]"
+             value="${value}"
             data-type="${columnType}"/>`;

    $container.find('input.repository-cell-value').remove();
@ -89,11 +89,11 @@ var DateTimeHelper = (function() {
    }

    hiddenField = `
-      <input class="repository-cell-value" 
-             type="hidden" 
-             form="${formId}" 
-             name="repository_cells[${columnId}]" 
-             value='${value}' 
+      <input class="repository-cell-value"
+             type="hidden"
+             form="${formId}"
+             name="repository_cells[${columnId}]"
+             value='${value}'
             data-type="${columnType}"/>`;

    $container.find('input.repository-cell-value').remove();
@ -135,7 +135,7 @@ var DateTimeHelper = (function() {
  function dateInputField(value, dateDataValue) {
    return `
      <div class="sci-input-container date-container right-icon">
-        <input class="calendar-input date-part sci-input-field" 
+        <input class="calendar-input date-part sci-input-field"
                type="datetime"
                placeholder="${formatJS}"
                data-datetime-part="date"
@ -149,9 +149,9 @@ var DateTimeHelper = (function() {
  function timeInputField(value) {
    return `
      <div class="sci-input-container time-container right-icon">
-        <input class="time-part sci-input-field" 
+        <input class="time-part sci-input-field"
               type="text"
-               data-mask-type="time" 
+               data-mask-type="time"
               value='${value}'
               placeholder="HH:mm"/>
        <i class="fas fa-clock"></i>
@ -200,7 +200,7 @@ var DateTimeHelper = (function() {
    let time = getTimeOrDefault($span, mode);
    let datetime = $span.data('datetime');
    let inputFields = `
-    <div class="form-group datetime-container ${mode}" 
+    <div class="form-group datetime-container ${mode}"
                data-form-id="${formId}"
                data-column-id="${columnId}"
                data-type="${columnType}"
@ -243,17 +243,17 @@ var DateTimeHelper = (function() {
         data-column-id="${columnId}"
         data-type="${columnType}"
         >
-      <div class="start-time ${mode}" 
-           data-current-datetime="${startDatetime}"> 
+      <div class="start-time ${mode}"
+           data-current-datetime="${startDatetime}">
        ${dateInputField(startDate, startDateDataValue)}
-        ${timeInputField(startTime)}   
+        ${timeInputField(startTime)}
      </div>
      <div class="separator">—</div>
      <div class="end-time ${mode}"
           data-current-datetime="${endDatetime}">
        ${dateInputField(endDate, endDateDataValue)}
        ${timeInputField(endTime)}
-      </div>      
+      </div>
    </div>
  `;

--- a/app/assets/javascripts/repositories/renderers/columns/list.js
+++ b/app/assets/javascripts/repositories/renderers/columns/list.js
@ -33,6 +33,7 @@ var ListColumnHelper = (function() {
      singleSelect: true,
      selectAppearance: 'simple',
      closeOnSelect: true,
+      emptyOptionAjax: true,
      onChange: function() {
        var values = dropdownSelector.getValues('#' + select);
        $hiddenField.val(values);
--- a/app/assets/javascripts/repositories/renderers/columns/status.js
+++ b/app/assets/javascripts/repositories/renderers/columns/status.js
@ -34,6 +34,7 @@ var StatusColumnHelper = (function() {
      singleSelect: true,
      selectAppearance: 'simple',
      closeOnSelect: true,
+      emptyOptionAjax: true,
      onChange: () => {
        var values = dropdownSelector.getValues('#' + select);
        $hiddenField.val(values);
--- a/app/assets/javascripts/repositories/renderers/edit_renderers.js
+++ b/app/assets/javascripts/repositories/renderers/edit_renderers.js
@ -1,6 +1,6 @@
 /*
 global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n
-GLOBAL_CONSTANTS DateTimeHelper
+DateTimeHelper AssetColumnHelper
 */

 $.fn.dataTable.render.editRowName = function(formId, cell) {
@ -22,26 +22,7 @@ $.fn.dataTable.render.editRowName = function(formId, cell) {

 $.fn.dataTable.render.editRepositoryAssetValue = function(formId, columnId, cell) {
  let $cell = $(cell.node());
-  let empty = $cell.is(':empty');
-  let fileName = $cell.find('a.file-preview-link').text();
-
-  $cell.html(`
-    <div class="file-editing">
-      <div class="file-hidden-field-container hidden"></div>
-      <input class=""
-             id="repository_file_${columnId}"
-             form="${formId}"
-             type="file"
-             data-col-id="${columnId}"
-             data-is-empty="${empty}"
-             value=""
-             data-type="RepositoryAssetValue">
-      <div class="file-upload-button ${empty ? 'new-file' : ''}">
-        <label for="repository_file_${columnId}">${I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB })}</label>
-        <span class="icon"><i class="fas fa-paperclip"></i></span><span class="label-asset">${fileName}</span>
-        <span class="delete-action fas fa-trash"> </span>
-      </div>
-    </div>`);
+  AssetColumnHelper.renderCell($cell, formId, columnId);
 };

 $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell) {
@ -145,7 +126,8 @@ $.fn.dataTable.render.editRepositoryNumberValue = function(formId, columnId, cel
      <input class="sci-input-field"
             form="${formId}"
             type="text"
-             oninput="this.value = this.value.replace(/[^0-9.]/g, '');
+             oninput="regexp = ${decimals} === 0 ? /[^0-9]/g : /[^0-9.]/g
+                      this.value = this.value.replace(regexp, '');
                      this.value = this.value.match(/^\\d*(\\.\\d{0,${decimals}})?/)[0];"
             name="repository_cells[${columnId}]"
             placeholder="${I18n.t('repositories.table.number.enter_number')}"
--- a/app/assets/javascripts/repositories/renderers/new_renderers.js
+++ b/app/assets/javascripts/repositories/renderers/new_renderers.js
@ -1,6 +1,6 @@
 /*
 global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n
-GLOBAL_CONSTANTS DateTimeHelper
+AssetColumnHelper DateTimeHelper
 */

 $.fn.dataTable.render.newRowName = function(formId, $cell) {
@ -18,23 +18,7 @@ $.fn.dataTable.render.newRowName = function(formId, $cell) {
 };

 $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell) {
-  $cell.html(`
-    <div class="file-editing">
-      <div class="file-hidden-field-container hidden"></div>
-      <input class=""
-             id="repository_file_${columnId}"
-             form="${formId}"
-             type="file"
-             data-col-id="${columnId}"
-             data-is-empty="true"
-             value=""
-             data-type="RepositoryAssetValue">
-      <div class="file-upload-button new-file">
-        <label for="repository_file_${columnId}">${I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB })}</label>
-        <span class="icon"><i class="fas fa-paperclip"></i></span><span class="label-asset"></span>
-        <span class="delete-action fas fa-trash"> </span>
-      </div>
-    </div>`);
+  AssetColumnHelper.renderCell($cell, formId, columnId);
 };

 $.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) {
--- a/app/assets/javascripts/repositories/renderers/view_renderers.js
+++ b/app/assets/javascripts/repositories/renderers/view_renderers.js
@ -154,3 +154,27 @@ $.fn.dataTable.render.RepositoryNumberValue = function(data) {
            ${data.value}
          </span>`;
 };
+
+$.fn.dataTable.render.AssignedTasksValue = function(data) {
+  if (data.tasks > 0) {
+    let tooltip = I18n.t('repositories.table.assigned_tooltip', {
+      tasks: data.tasks,
+      experiments: data.experiments,
+      projects: data.projects
+    });
+    return `<div class="assign-counter-container dropdown" title="${tooltip}"
+            data-task-list-url="${data.task_list_url}">
+              <a href="#" class="assign-counter has-assigned"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">${data.tasks}</a>
+              <div class="dropdown-menu" role="menu">
+                <div class="sci-input-container right-icon">
+                  <input type="text" class="sci-input-field search-tasks"
+                    placeholder="${I18n.t('repositories.table.assigned_search')}"></input>
+                  <i class="fas fa-times-circle clear-search"></i>
+                </div>
+                <div class="tasks"></div>
+              </div>
+            </div>`;
+  }
+  return "<div class='assign-counter-container'><span class='assign-counter'>0</span></div>";
+};
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/app/assets/javascripts/repositories/repository_datatable.js
@ -1,6 +1,7 @@
 /*
-  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise dropdownSelector
-  HelperModule animateLoading hideAssignUnasignModal RepositoryDatatableRowEditor
+  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise DataTableHelpers
+  HelperModule animateLoading RepositoryDatatableRowEditor
+  initAssignedTasksDropdown
 */

 //= require jquery-ui/widgets/sortable
@ -14,7 +15,8 @@ var RepositoryDatatable = (function(global) {
  var TABLE_WRAPPER_ID = '.repository-table';
  var TABLE = null;
  var EDITABLE = false;
-  var SELECT_ALL_SELECTOR = "#checkbox > input[name=select_all]"
+  var SELECT_ALL_SELECTOR = '#checkbox > input[name=select_all]';
+  const STATUS_POLLING_INTERVAL = 10000;

  var rowsSelected = [];
  var rowsLocked = [];
@ -120,6 +122,7 @@ var RepositoryDatatable = (function(global) {
    // Table specific stuff
    TABLE.button(0).enable(true);
    FilePreviewModal.init();
+    $(TABLE_WRAPPER_ID).find('tr').removeClass('blocked');
    updateButtons();
    disableCheckboxToggleOnCheckboxPreview();
  }
@ -129,6 +132,7 @@ var RepositoryDatatable = (function(global) {
    // Table specific stuff
    TABLE.button(0).enable(false);
    clearRowSelection();
+    $(TABLE_WRAPPER_ID).find('tr:not(.editing)').addClass('blocked');
    updateButtons();
  }

@ -263,6 +267,12 @@ var RepositoryDatatable = (function(global) {
    if ($('#assigned').text().length === 0) {
      TABLE.column(1).visible(false);
    }
+
+    $.getJSON($(TABLE_ID).data('toolbar-url'), (data) => {
+      $('#toolbarButtonsDatatable').remove();
+      $(data.html).appendTo('div.toolbar');
+    });
+
    TABLE.ajax.reload(null, false);
    changeToViewMode();
    SmartAnnotation.closePopup();
@ -396,6 +406,18 @@ var RepositoryDatatable = (function(global) {
      });
  }

+  function checkSnapshottingStatus() {
+    $.getJSON($(TABLE_ID).data('status-url'), (statusData) => {
+      if (statusData.snapshot_provisioning) {
+        setTimeout(() => { checkSnapshottingStatus(); }, STATUS_POLLING_INTERVAL);
+      } else {
+        EDITABLE = statusData.editable;
+        $('.repository-provisioning-notice').remove();
+        resetTableView();
+      }
+    });
+  }
+
  function dataTableInit() {
    viewAssigned = 'assigned';
    TABLE = $(TABLE_ID).DataTable({
@ -440,10 +462,14 @@ var RepositoryDatatable = (function(global) {
        className: 'assigned-column',
        sWidth: '1%',
        render: function(data, type, row) {
-          let content = data;
-          let icon = '<i class="repository-row-edit-icon fas fa-pencil-alt"></i>';
+          let content = $.fn.dataTable.render.AssignedTasksValue(data);
+          let icon;
          if (!row.recordEditable) {
            icon = `<i class="repository-row-lock-icon fas fa-lock" title="${I18n.t('repositories.table.locked_item')}"></i>`;
+          } else if (EDITABLE) {
+            icon = '<i class="repository-row-edit-icon fas fa-pencil-alt"></i>';
+          } else {
+            icon = '';
          }
          content = icon + content;
          return content;
@ -505,8 +531,10 @@ var RepositoryDatatable = (function(global) {
        changeToViewMode();
        updateDataTableSelectAllCtrl();
        FilePreviewModal.init();
+
        // Prevent row toggling when selecting user smart annotation link
        SmartAnnotation.preventPropagation('.atwho-user-popover');
+
        // Show number of selected rows near pages info
        $('#repository-table_info').append('<span id="selected_info"></span>');
        $('#selected_info').html(' (' + rowsSelected.length + ' entries selected)');
@ -540,17 +568,15 @@ var RepositoryDatatable = (function(global) {
        });
      },
      fnInitComplete: function() {
-        var tableLengthSelect = $('.dataTables_length select');
-        var tableFilterInput = $('.dataTables_filter input');
-
        disableCheckboxToggleOnAssetDownload();
        FilePreviewModal.init();
        initHeaderTooltip();
        disableCheckboxToggleOnCheckboxPreview();

-        // Append button to inner toolbar in table
-        $('div.toolbarButtonsDatatable').appendTo('div.toolbar');
-        $('div.toolbarButtonsDatatable').show();
+        // Append buttons to inner toolbar in the table
+        $.getJSON($(TABLE_ID).data('toolbar-url'), (data) => {
+          $(data.html).appendTo('div.toolbar');
+        });

        $('div.toolbar-filter-buttons').prependTo('div.filter-container');
        $('div.toolbar-filter-buttons').show();
@ -559,45 +585,25 @@ var RepositoryDatatable = (function(global) {
        $('div.toolbarButtons').appendTo('div.toolbar');
        $('div.toolbarButtons').show();

-        if (EDITABLE) {
-          RepositoryDatatableRowEditor.initFormSubmitAction(TABLE);
-          initItemEditIcon();
-          initSaveButton();
-          initCancelButton();
-        }
+        RepositoryDatatableRowEditor.initFormSubmitAction(TABLE);
+        initItemEditIcon();
+        initSaveButton();
+        initCancelButton();
+
+        DataTableHelpers.initLengthApearance($(TABLE_ID).closest('.dataTables_wrapper'));
+        DataTableHelpers.initSearchField($(TABLE_ID).closest('.dataTables_wrapper'));

        if ($('.repository-show').length) {
          $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
        }

-        if (tableLengthSelect.val() == null) {
-          tableLengthSelect.val(10).change();
-        }
-        $.each(tableLengthSelect.find('option'), (i, option) => {
-          option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
-        });
-        $('.dataTables_length').append(tableLengthSelect).find('label').remove();
-        dropdownSelector.init(tableLengthSelect, {
-          noEmptyOption: true,
-          singleSelect: true,
-          closeOnSelect: true,
-          selectAppearance: 'simple'
-        });
-
-        tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
-          .addClass('sci-input-field')
-          .css('margin', 0);
-        $('.dataTables_filter').append(`
-            <div class="sci-input-container left-icon">
-              <i class="fas fa-search"></i>
-            </div>`).find('.sci-input-container').prepend(tableFilterInput);
-        $('.dataTables_filter').find('label').remove();
-
        $('.main-actions, .pagination-row').removeClass('hidden');

        $(TABLE_ID).find('tr[data-editable=false]').each(function(_, e) {
          rowsLocked.push(parseInt($(e).attr('id'), 10));
        });
+
+        initAssignedTasksDropdown(TABLE_ID);
      }
    });

@ -656,19 +662,6 @@ var RepositoryDatatable = (function(global) {
    });
  };

-  global.openAssignRecordsModal = function() {
-    $.post(
-      $('#assignRepositoryRecords').data('assign-url-modal'),
-      { selected_rows: rowsSelected }
-    ).done(
-      function(data) {
-        $(data.html).appendTo('body').promise().done(function() {
-          $('#assignRepositoryRecordModal').modal('show');
-        });
-      }
-    );
-  };
-
  global.hideAssignUnasignModal = function(id) {
    $(id).modal('hide').promise().done(
      function() {
@ -677,28 +670,6 @@ var RepositoryDatatable = (function(global) {
    );
  };

-  global.submitAssignRepositoryRecord = function(option) {
-    animateSpinner();
-    $.ajax({
-      url: $('#assignRepositoryRecordModal').data('assign-url'),
-      type: 'POST',
-      dataType: 'json',
-      data: { selected_rows: rowsSelected, downstream: (option === 'downstream') },
-      success: function(data) {
-        hideAssignUnasignModal('#assignRepositoryRecordModal');
-        HelperModule.flashAlertMsg(data.flash, 'success');
-        resetTableView();
-        clearRowSelection();
-      },
-      error: function(data) {
-        hideAssignUnasignModal('#assignRepositoryRecordModal');
-        HelperModule.flashAlertMsg(data.responseJSON.flash, 'danger');
-        resetTableView();
-        clearRowSelection();
-      }
-    });
-  }
-
  global.openUnassignRecordsModal = function() {
    $.post(
      $('#unassignRepositoryRecords').data('unassign-url'),
@ -712,28 +683,6 @@ var RepositoryDatatable = (function(global) {
    );
  };

-  global.submitUnassignRepositoryRecord = function(option) {
-    animateSpinner();
-    $.ajax({
-      url: $('#unassignRepositoryRecordModal').data('unassign-url'),
-      type: 'POST',
-      dataType: 'json',
-      data: { selected_rows: rowsSelected, downstream: (option === 'downstream') },
-      success: function(data) {
-        hideAssignUnasignModal('#unassignRepositoryRecordModal');
-        HelperModule.flashAlertMsg(data.flash, 'success');
-        resetTableView();
-        clearRowSelection();
-      },
-      error: function(data) {
-        hideAssignUnasignModal('#unassignRepositoryRecordModal');
-        HelperModule.flashAlertMsg(data.responseJSON.flash, 'danger');
-        resetTableView();
-        clearRowSelection();
-      }
-    });
-  }
-
  global.onClickDeleteRecord = function() {
    animateSpinner();
    $.ajax({
@ -790,8 +739,8 @@ var RepositoryDatatable = (function(global) {

    $(TABLE_ID).find('.repository-row-edit-icon').remove();

-    changeToEditMode();
    RepositoryDatatableRowEditor.switchRowToEditMode(row);
+    changeToEditMode();
    adjustTableHeader();
  };

@ -828,6 +777,9 @@ var RepositoryDatatable = (function(global) {
    TABLE_ID = id;
    EDITABLE = $(TABLE_ID).data('editable');
    TABLE = dataTableInit();
+    if ($(TABLE_ID).data('snapshot-provisioning')) {
+      setTimeout(() => { checkSnapshottingStatus(); }, STATUS_POLLING_INTERVAL);
+    }
  }

  function destroy() {
--- a/app/assets/javascripts/repositories/row_editor.js
+++ b/app/assets/javascripts/repositories/row_editor.js
@ -1,5 +1,5 @@
 /*
-  globals HelperModule animateSpinner SmartAnnotation Asset
+  globals HelperModule animateSpinner SmartAnnotation AssetColumnHelper GLOBAL_CONSTANTS
 */
 /* eslint-disable no-unused-vars */

@ -7,6 +7,7 @@ var RepositoryDatatableRowEditor = (function() {
  const NAME_COLUMN_ID = 'row-name';
  const TABLE_ROW = '<tr></tr>';
  const TABLE_CELL = '<td></td>';
+  const EDIT_FORM_CLASS_NAME = GLOBAL_CONSTANTS.REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME;

  var TABLE;

@ -20,7 +21,7 @@ var RepositoryDatatableRowEditor = (function() {
  }

  function validateAndSubmit($table) {
-    let $form = $table.find('.repository-row-edit-form');
+    let $form = $table.find(`.${EDIT_FORM_CLASS_NAME}`);
    let $row = $form.closest('tr');
    let valid = true;
    let directUrl = $table.data('direct-upload-url');
@ -40,7 +41,7 @@ var RepositoryDatatableRowEditor = (function() {

    animateSpinner($table, true);
    // DirectUpload here
-    let uploadPromise = Asset.uploadFiles($files, directUrl);
+    let uploadPromise = AssetColumnHelper.uploadFiles($files, directUrl);

    // Submission here
    uploadPromise
@ -62,10 +63,15 @@ var RepositoryDatatableRowEditor = (function() {
    fileInputs.on('change', function() {
      let $input = $(this);
      let $fileBtn = $input.next('.file-upload-button');
-      let $label = $fileBtn.find('.label-asset');
+      let $label = $fileBtn.find('label');

-      $label.text($input[0].files[0].name);
-      $fileBtn.removeClass('new-file');
+      if ($input[0].files[0]) {
+        $label.text($input[0].files[0].name);
+        $fileBtn.removeClass('new-file');
+      } else {
+        $label.text('');
+        $fileBtn.addClass('new-file');
+      }
      $fileBtn.removeClass('error');
    });

@ -73,7 +79,7 @@ var RepositoryDatatableRowEditor = (function() {
    deleteButtons.on('click', function() {
      let $fileBtn = $(this).parent();
      let $input = $fileBtn.prev('input[type=file]');
-      let $label = $fileBtn.find('.label-asset');
+      let $label = $fileBtn.find('label');

      $fileBtn.addClass('new-file');
      $label.text('');
@ -95,15 +101,15 @@ var RepositoryDatatableRowEditor = (function() {
    TABLE = table;
    let $table = $(TABLE.table().node());

-    $table.on('ajax:success', '.repository-row-edit-form', function(ev, data) {
+    $table.on('ajax:success', `.${EDIT_FORM_CLASS_NAME}`, function(ev, data) {
      TABLE.ajax.reload(() => {
        animateSpinner(null, false);
        HelperModule.flashAlertMsg(data.flash, 'success');
-        $('html, body').animate({scrollLeft: 0}, 300);
+        $('html, body').animate({ scrollLeft: 0 }, 300);
      });
    });

-    $table.on('ajax:error', '.repository-row-edit-form', function(ev, data) {
+    $table.on('ajax:error', `.${EDIT_FORM_CLASS_NAME}`, function(ev, data) {
      animateSpinner(null, false);
      HelperModule.flashAlertMsg(data.responseJSON.flash, 'danger');
    });
@ -118,7 +124,7 @@ var RepositoryDatatableRowEditor = (function() {
    let rowForm = $(`
      <td>
        <form id="${formId}"
-              class="repository-row-edit-form"
+              class="${EDIT_FORM_CLASS_NAME}"
              action="${actionUrl}"
              method="post"
              data-remote="true">
@ -167,7 +173,7 @@ var RepositoryDatatableRowEditor = (function() {
    let requestUrl = $(TABLE.table().node()).data('current-uri');
    let rowForm = $(`
      <form id="${formId}"
-            class="repository-row-edit-form"
+            class="${EDIT_FORM_CLASS_NAME}"
            action="${row.data().recordUpdateUrl}"
            method="patch"
            data-remote="true"
@ -204,6 +210,7 @@ var RepositoryDatatableRowEditor = (function() {
  }

  return Object.freeze({
+    EDIT_FORM_CLASS_NAME: EDIT_FORM_CLASS_NAME,
    initFormSubmitAction: initFormSubmitAction,
    validateAndSubmit: validateAndSubmit,
    switchRowToEditMode: switchRowToEditMode,
--- a/app/assets/javascripts/repositories/validators/base_validator.js
+++ b/app/assets/javascripts/repositories/validators/base_validator.js
@ -63,7 +63,15 @@ $.fn.dataTable.render.RepositoryChecklistValueValidator = function() {
  return true;
 };

-$.fn.dataTable.render.RepositoryNumberValueValidator = function() {
+$.fn.dataTable.render.RepositoryNumberValueValidator = function($input) {
+  if ($input.val().slice(-1) === '.') {
+    $input.closest('.text-field').addClass('error').attr(
+      'data-error-text',
+      I18n.t('repositories.table.number.errors.wrong_format')
+    );
+    return false;
+  }
+  $input.removeClass('error');
  return true;
 };

--- a/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js
+++ b/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js
@ -35,7 +35,8 @@ var RepositoryChecklistColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN
        );
        $('.changing-existing-list-items-warning').removeClass('hidden');
        initChecklistDropdown();
@ -45,7 +46,8 @@ var RepositoryChecklistColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN
        );
        initChecklistDropdown();
        initUpdatePlaceholder(this);
@ -55,7 +57,8 @@ var RepositoryChecklistColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN
        );
        initChecklistDropdown();
      })
@ -71,7 +74,7 @@ var RepositoryChecklistColumnType = (function() {
    checkValidation: () => {
      var $manageModal = $(manageModal);
      var count = $manageModal.find('.items-count').attr('data-count');
-      return count < GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN;
+      return count <= GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN;
    },
    loadParams: () => {
      var repositoryColumnParams = {};
--- a/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js
+++ b/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js
@ -83,7 +83,7 @@ var RepositoryListColumnType = (function() {
    });
  }

-  function refreshCounter(number) {
+  function refreshCounter(number, limit) {
    var $manageModal = $(manageModal);
    var $counterContainer = $manageModal.find('.limit-counter-container');
    var $btn = $manageModal.find('.column-save-btn');
@ -91,7 +91,7 @@ var RepositoryListColumnType = (function() {

    $counterContainer.find('.items-count').html(number).attr('data-count', number);

-    if (number >= GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN) {
+    if (number > limit) {
      $counterContainer.addClass('error-to-many-items');
      $textarea.addClass('too-many-items');
      $btn.addClass('disabled');
@ -102,11 +102,11 @@ var RepositoryListColumnType = (function() {
    }
  }

-  function refreshPreviewDropdownList(preview, textarea, delimiterContainer, dropdown) {
+  function refreshPreviewDropdownList(preview, textarea, delimiterContainer, dropdown, limit) {
    var items = textToItems($(textarea).val(), delimiterContainer);
    var hashItems = [];
    drawDropdownPreview(items, preview);
-    refreshCounter(items.length);
+    refreshCounter(items.length, limit);

    $.each(items, (index, option) => {
      hashItems.push({ data: option });
@ -126,7 +126,8 @@ var RepositoryListColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN
        );
        initListDropdown();
        $('.changing-existing-list-items-warning').removeClass('hidden');
@ -137,7 +138,8 @@ var RepositoryListColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN
        );
        initListDropdown();
      })
@ -146,7 +148,8 @@ var RepositoryListColumnType = (function() {
          previewContainer,
          itemsTextarea,
          delimiterDropdown,
-          dropdownOptions
+          dropdownOptions,
+          GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN
        );
        initListDropdown();
      })
@ -162,7 +165,7 @@ var RepositoryListColumnType = (function() {
    checkValidation: () => {
      var $manageModal = $(manageModal);
      var count = $manageModal.find('.items-count').attr('data-count');
-      return count < GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN;
+      return count <= GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN;
    },
    loadParams: () => {
      var repositoryColumnParams = {};
@ -172,8 +175,8 @@ var RepositoryListColumnType = (function() {
      return repositoryColumnParams;
    },

-    refreshPreviewDropdownList: (preview, textarea, delimiter, dropdown) => {
-      refreshPreviewDropdownList(preview, textarea, delimiter, dropdown);
+    refreshPreviewDropdownList: (preview, textarea, delimiter, dropdown, limit) => {
+      refreshPreviewDropdownList(preview, textarea, delimiter, dropdown, limit);
    },

    initListDropdown: () => {
--- a/app/assets/javascripts/repository_columns/index.js
+++ b/app/assets/javascripts/repository_columns/index.js
@ -21,9 +21,6 @@ var RepositoryColumns = (function() {

  function reloadDataTablePartial() {
    // Append buttons for inventory datatable
-    $('div.toolbarButtonsDatatable').appendTo('.repository-show');
-    $('div.toolbarButtonsDatatable').hide();
-
    $('div.toolbar-filter-buttons').appendTo('.repository-show');
    $('div.toolbar-filter-buttons').hide();

@ -37,7 +34,9 @@ var RepositoryColumns = (function() {
      RepositoryDatatable.init('#' + $('.repository-table table').attr('id'));
      RepositoryDatatable.redrawTableOnSidebarToggle();
      // show manage columns index modal
-      $(manageModal).find('.back-to-column-modal').trigger('click');
+      setTimeout(function() {
+        $(manageModal).find('.back-to-column-modal').trigger('click');
+      }, 500);
    });
  }

@ -170,35 +169,38 @@ var RepositoryColumns = (function() {
        $manageModal.find('.modal-content').html(data.html)
          .find('#repository-column-name')
          .focus();
-        columnType = $('#repository-column-data-type').val();
-        dropdownSelector.init('#repository-column-data-type', {
-          noEmptyOption: true,
-          singleSelect: true,
-          closeOnSelect: true,
-          optionClass: 'custom-option',
-          selectAppearance: 'simple',
-          disableSearch: true
-        });

-        dropdownSelector.init('.list-column-type .delimiter', delimiterDropdownConfig);
-        RepositoryListColumnType.initListDropdown();
-        RepositoryListColumnType.initListPlaceholder();
+        if (button.data('action') !== 'destroy') {
+          columnType = $('#repository-column-data-type').val();
+          dropdownSelector.init('#repository-column-data-type', {
+            noEmptyOption: true,
+            singleSelect: true,
+            closeOnSelect: true,
+            optionClass: 'custom-option',
+            selectAppearance: 'simple',
+            disableSearch: true
+          });

-        dropdownSelector.init('.checklist-column-type .delimiter', delimiterDropdownConfig);
-        RepositoryChecklistColumnType.initChecklistDropdown();
-        RepositoryChecklistColumnType.initChecklistPlaceholder();
+          dropdownSelector.init('.list-column-type .delimiter', delimiterDropdownConfig);
+          RepositoryListColumnType.initListDropdown();
+          RepositoryListColumnType.initListPlaceholder();

-        $manageModal
-          .trigger('columnModal::partialLoadedFor' + columnType);
+          dropdownSelector.init('.checklist-column-type .delimiter', delimiterDropdownConfig);
+          RepositoryChecklistColumnType.initChecklistDropdown();
+          RepositoryChecklistColumnType.initChecklistPlaceholder();

-        RepositoryStatusColumnType.updateLoadedEmojies();
+          $manageModal
+            .trigger('columnModal::partialLoadedFor' + columnType);

-        if (button.data('action') === 'new') {
-          $('[data-column-type="RepositoryTextValue"]').show();
-          $('#new-repo-column-submit').show();
-        } else {
-          $('#update-repo-column-submit').show();
-          $('[data-column-type="' + columnType + '"]').show();
+          RepositoryStatusColumnType.updateLoadedEmojies();
+
+          if (button.data('action') === 'new') {
+            $('[data-column-type="RepositoryTextValue"]').show();
+            $('#new-repo-column-submit').show();
+          } else {
+            $('#update-repo-column-submit').show();
+            $('[data-column-type="' + columnType + '"]').show();
+          }
        }
      }).fail(function() {
        HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
--- a/app/assets/javascripts/sidebar.js
+++ b/app/assets/javascripts/sidebar.js
@ -3,292 +3,91 @@
 * accesed from outside (in reports view).
 */

-/* global I18n _ */
-(function(global) {
-  var STORAGE_TREE_KEY = 'scinote-sidebar-tree-collapsed-ids';
+/* global PerfectSb */

-  /**
-   * Get all collapsed sidebar elements.
-   * @return An array of sidebar element IDs.
-   */
-  global.sessionGetCollapsedSidebarElements = function() {
-    var val = sessionStorage.getItem(STORAGE_TREE_KEY);
-    if (val === null) {
-      val = '[]';
-      sessionStorage.setItem(STORAGE_TREE_KEY, val);
-    }
-    return JSON.parse(val);
-  };
+var Sidebar = (function() {
+  const SIDEBAR_ID = '#slide-panel';
+  const STORAGE_TREE_KEY = 'scinote-sidebar-tree-state';
+  const STORAGE_SCROLL_TREE_KEY = 'scinote-sidebar-tree-scroll-state';

-  /**
-   * Collapse a specified element in the sidebar.
-   * @param id - The collapsed element's ID.
-   */
-  global.sessionCollapseSidebarElement = function(project, id) {
-    var ids = global.sessionGetCollapsedSidebarElements();
-    var item = _.findWhere(ids, { prid: project });
-    var collapsed = { prid: project, ids: [] };
-    var storedProjects = _.pluck(ids, 'prid');
-
-    if (_.contains(storedProjects, project)) {
-      if (item && _.indexOf(item.ids, id) === -1) {
-        _.findWhere(ids, { prid: project }).ids.push(id);
-      }
-    } else {
-      collapsed.ids.push(id);
-      ids.push(collapsed);
-    }
-    sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
-  };
-
-  /**
-   * Expand a specified element in the sidebar.
-   * @param id - The expanded element's ID.
-   */
-  global.sessionExpandSidebarElement = function(project, id, elements) {
-    var ids = global.sessionGetCollapsedSidebarElements();
-    var item = _.findWhere(ids, { prid: project});
-    var index = -1;
-
-    if (item) {
-      index = _.indexOf(item.ids, id);
-      global.recalculateElementsPositions(ids, item, elements);
-    }
-
-    if (index !== -1) {
-      item.ids.splice(index, 1);
-      sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
-    }
-  };
-
-  /**
-   * Recalculate the position of the elements after an experiment
-   * is added or archived.
-   */
-  global.recalculateElementsPositions = function(ids, item, elements) {
-    var diff;
-
-    if (item.eleNum > elements) {
-      diff = item.eleNum - elements;
-      _.map(item.ids, function(element, index) {
-        item.ids[index] = element - diff;
-      });
-    } else if (item.eleNum < elements) {
-      diff = elements - item.eleNum;
-      _.map(item.ids, function(element, index) {
-        item.ids[index] = element + diff;
-      });
-    }
-
-    if (item.eleNum !== elements) {
-      item.eleNum = elements;
-      sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
-    }
+  function toggleTree($treeChildren) {
+    $treeChildren.toggleClass('hidden');
+    $.each($treeChildren, (i, treeChild) => {
+      $(treeChild).closest('.branch').find('.tree-toggle').first()
+        .toggleClass('fa-caret-down')
+        .toggleClass('fa-caret-right');
+    });
  }

-  /**
-   * Setup the sidebar collapsing & expanding functionality.
-   */
-  global.setupSidebarTree = function() {
-    $('.tree a').click(function() {
-      var url = new URL($(this).attr('href'));
-      url.searchParams.set('scroll', $('.tree').scrollTop());
-      $(this).attr('href', url.toString());
+  function saveCurrentState() {
+    var config = [];
+    $.each($(SIDEBAR_ID).find('.tree-child:not(:hidden)'), (i, branch) => {
+      config.push(`[data-branch-id=${branch.dataset.branchId}]`);
+    });
+    sessionStorage.setItem(STORAGE_TREE_KEY, config.join(','));
+  }
+
+  function loadLastState() {
+    var currentProject = $(SIDEBAR_ID).attr('data-current-project');
+    var currentExperiment = $(SIDEBAR_ID).attr('data-current-experiment');
+    var currentTask = $(SIDEBAR_ID).attr('data-current-task');
+
+    if (currentProject) {
+      let projectBranch = $(`.tree-child[data-branch-id="pro${currentProject}"]`).attr('data-active', 'true');
+      projectBranch.prev().addClass('active');
+      if (!currentExperiment) projectBranch.closest('.branch').addClass('active');
+    }
+
+    if (currentExperiment) {
+      let experimentBranch = $(`.tree-child[data-branch-id="exp${currentExperiment}"]`).attr('data-active', 'true');
+      experimentBranch.prev().addClass('active');
+      if (!currentTask) {
+        experimentBranch.closest('.branch')
+          .addClass('show-canvas-handler')
+          .addClass('active');
+      }
+    }
+
+    if (currentTask) {
+      $(`.leaf[data-module-id="${currentTask}"]`).addClass('active');
+    }
+
+
+    toggleTree($(SIDEBAR_ID).find('.tree-child[data-active="true"]'));
+    toggleTree($(SIDEBAR_ID).find('.tree-child.hidden').filter(sessionStorage.getItem(STORAGE_TREE_KEY)));
+    PerfectSb().update_all();
+    $(SIDEBAR_ID).find('.tree').scrollTo(sessionStorage.getItem(STORAGE_SCROLL_TREE_KEY));
+  }
+
+  function initSideBar() {
+    $(SIDEBAR_ID).on('click', '.tree-toggle', function() {
+      var $treeChild = $(this).closest('.branch').find('.tree-child').first();
+      toggleTree($treeChild);
+      saveCurrentState();
+      PerfectSb().update_all();
    });

-    function toggleLi(el, collapse, animate) {
-      var children = el.find(' > ul > li');
-
-      if (collapse) {
-        if (animate) {
-          children.hide('fast');
-        } else {
-          children.hide();
-        }
-        el.find(' > span i')
-          .attr('title', I18n.t('sidebar.branch_expand'))
-          .removeClass('expanded');
-      } else {
-        if (animate) {
-          children.show('fast');
-        } else {
-          children.show();
-        }
-        el.find(' > span i')
-          .attr('title', I18n.t('sidebar.branch_collapse'))
-          .addClass('expanded');
-      }
-    }
-
-    // Make active current project/experiment/task
-    function activateCurrent() {
-      var sidebar = $('#slide-panel');
-      var projectId = sidebar.data('current-project');
-      var experimentId = sidebar.data('current-experiment');
-      var taskId = sidebar.data('current-task');
-      var currentPage = sidebar.data('page');
-      var link;
-
-      if (currentPage === 'project') {
-        link = sidebar.find(`a[data-type="project"][data-id="${projectId}"]`);
-      } else if (currentPage === 'experiment') {
-        link = sidebar.find(`a[data-type="experiment"][data-id="${experimentId}"]`);
-      } else if (currentPage === 'canvas') {
-        link = sidebar.find(`a[data-type="experiment"][data-id="${experimentId}"]`);
-        let treeLink = link.closest('li').find('.task-tree-link');
-        treeLink.find('.canvas-center-on').remove();
-        treeLink.append('<a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>');
-      } else if (currentPage === 'task') {
-        link = sidebar.find(`a[data-type="my_module"][data-id="${taskId}"]`);
-      }
-      link.addClass('disabled');
-      link.closest('li').addClass('active');
-    }
-
-    activateCurrent();
-
-    // Add triangle icons and titles to every parent node
-    $('.tree li:has(ul)')
-      .addClass('parent_li')
-      .find(' > span i')
-      .attr('title', I18n.t('sidebar.branch_collapse'));
-    $('.tree li.parent_li ')
-      .find('> span i')
-      .removeClass('no-arrow')
-      .addClass('fas fa-caret-right expanded');
-
-    // Add IDs to all parent <lis>
-    var i = 0;
-    _.each($('[data-parent="candidate"]'), function(el) {
-      $(el).attr('data-toggle-id', i += 1);
+    $(SIDEBAR_ID).find('.tree').scroll(function() {
+      sessionStorage.setItem(STORAGE_SCROLL_TREE_KEY, $(this).scrollTop());
    });

-    // Get the current project
-    var project = $('[data-project-id]').data('projectId');
+    $('#wrapper').show();
+    loadLastState();
+  }

-    // Set number of elements
-    sessionExpandSidebarElement(
-      project, null, $('[data-parent="candidate"]').length
-    );
-
-    // Get the session-stored elements
-    var collapsedIds = global.sessionGetCollapsedSidebarElements();
-
-    // Get the current project stored elements
-    var currentProjectIds = _.findWhere(collapsedIds, { prid: project });
-    if ( currentProjectIds ){
-      currentProjectIds.ids = _.filter(currentProjectIds.ids,
-                                  function(val) {
-                                    return val !== null;
-                                  }).join(", ");
-
-      // Collapse session-stored elements
-      _.each($('li.parent_li[data-parent="candidate"]'), function(el) {
-        var id = $(el).data("toggle-id");
-        var li = $(".tree li.parent_li[data-toggle-id='" + id + "']");
-
-        if( li.hasClass("active") ||  li.find(".active").length > 0){
-          // Always expand the active element
-          toggleLi(li,
-            false,
-            false);
-        } else if ( $.inArray( id.toString(),
-                               currentProjectIds.ids.split(", ")) !== -1 ) {
-          // Expande element
-          toggleLi(li,
-            false,
-            false);
-        } else {
-          // Collapse the session-stored element
-          toggleLi(li,
-            true,
-            false);
-        }
-      });
-    } else {
-      // Collapse all
-      _.each($('li.parent_li[data-parent="candidate"]'), function(el) {
-        var id = $(el).data("toggle-id");
-        var li = $(".tree li.parent_li[data-toggle-id='" + id + "']");
-
-        if( li.hasClass("active") ){
-          // Always expand the active element
-          toggleLi(li,
-            false,
-            false);
-          sessionCollapseSidebarElement(project, id);
-        } else {
-          // Element collapsed by default
-          toggleLi(li,
-            true,
-            false);
-        }
-      });
-    }
-
-    // Add onclick callback to every triangle icon
-    $(".tree li.parent_li ")
-    .find("> span i")
-    .on("click", function (e) {
-      var el = $(this)
-      .parent("span")
-      .parent("li.parent_li");
-
-      if (el.find(" > ul > li").is(":visible")) {
-        toggleLi(el, true, true);
-        sessionExpandSidebarElement(project,
-                                    el.data("toggle-id"),
-                                    $('[data-parent="candidate"]').length );
-      } else {
-        toggleLi(el, false, true);
-        sessionCollapseSidebarElement(project, el.data("toggle-id"));
+  return {
+    init: () => {
+      if ($(SIDEBAR_ID).length) {
+        initSideBar();
      }
-      e.stopPropagation();
-      return false;
-    });
+    },

-    // Add bold style to all levels of selected element
-    $(".tree li.active ")
-    .parents('.parent_li[data-parent="candidate"]')
-    .find("> span a")
-    .css("font-weight", "bold");
-
-    // Add custom borders to tree links
-    $(".tree li span.tree-link ").after("<div class='border-custom'></div>");
-  }
-
-  // Resize the sidebar to accomodate to the page size
-  global.resizeSidebarContents = function() {
-    var tree = $("#sidebar-wrapper .tree");
-
-    // Set vertical scrollbar on navigation tree
-    if (tree.length && tree.length == 1) {
-      tree.css(
-        "height",
-        ($(window).height() - tree.position().top - 50) + "px"
-      );
+    loadLastState: () => {
+      loadLastState();
    }
-  }
+  };
+}());

-  function scrollToSelectedItem() {
-    $('#slide-panel .tree').scrollTo($('.tree').data('scroll'));
-  }
-
-  // Initialize click listeners
-  setupSidebarTree();
-
-  // Actually display wrapper, which is, up to now,
-  // hidden
-  $('#wrapper').show();
-
-  // Resize the sidebar automatically
-  resizeSidebarContents();
-
-  // Bind onto window resize function
-  $(window).resize(function() {
-    resizeSidebarContents();
-    scrollToSelectedItem();
-  });
-
-  scrollToSelectedItem();
-}(window));
+$(document).on('turbolinks:load', function() {
+  Sidebar.init();
+});
--- a/app/assets/javascripts/sidebar_toggle.js.erb
+++ b/app/assets/javascripts/sidebar_toggle.js.erb
@ -26,11 +26,18 @@

    function toggle() {
      var btn = $('#sidebar-arrow');
+      var sideBarEvent;
      if (btn.is('[data-shown]')) {
        hide();
+        sideBarEvent = 'sideBar::hidden'
      } else {
        show();
+        sideBarEvent = 'sideBar::shown'
      }
+
+      $('.navbar-secondary').one("transitionend",function(event) {
+        $('.navbar-secondary').trigger(sideBarEvent);
+      })
    }

    function isShown() {
--- a/app/assets/javascripts/sitewide/atwho_res.js.erb
+++ b/app/assets/javascripts/sitewide/atwho_res.js.erb
@ -381,8 +381,15 @@ var SmartAnnotation = (function() {
    function init() {
      $(field)
      .on("reposition.atwho", function(event, flag, query) {
-        if (query.$inputor.offset().left > $(window).width()) {
-          query.$el.find('.atwho-view').css('left', (flag.left + $(window).scrollLeft()) + 'px');
+        let inputFieldLeft = query.$inputor.offset().left;
+        if (inputFieldLeft > $(window).width()) {
+          let leftPosition;
+          if (inputFieldLeft < flag.left + $(window).scrollLeft()) {
+            leftPosition = inputFieldLeft;
+          } else {
+            leftPosition = flag.left + $(window).scrollLeft();
+          }
+          query.$el.find('.atwho-view').css('left', leftPosition + 'px');
        }
        if ($('.repository-show').length) {
          query.$el.find('.atwho-view').css('top', flag.top + 'px');
--- a/app/assets/javascripts/sitewide/comments.js
+++ b/app/assets/javascripts/sitewide/comments.js
@ -19,16 +19,16 @@ var Comments = (function() {
  function newCommentValidation(textarea, submitBtn) {
    textarea.off().on('focus', function() {
      $(this).addClass('border');
-      if (this.value.length > 0) {
+      if (this.value.trim().length > 0) {
        submitBtn.addClass('show');
      }
    }).on('blur', function() {
-      if (this.value.length === 0) {
+      if (this.value.trim().length === 0) {
        $(this).removeClass('border');
        submitBtn.removeClass('show');
      }
    }).on('keyup', function() {
-      if (this.value.length > 0) {
+      if (this.value.trim().length > 0) {
        submitBtn.addClass('show');
      } else {
        submitBtn.removeClass('show');
--- a/app/assets/javascripts/sitewide/constants.js.erb
+++ b/app/assets/javascripts/sitewide/constants.js.erb
@ -4,8 +4,9 @@ const GLOBAL_CONSTANTS = {
  NAME_MIN_LENGTH: <%= Constants::NAME_MIN_LENGTH %>,
  TEXT_MAX_LENGTH: <%= Constants::TEXT_MAX_LENGTH %>,
  FILENAME_TRUNCATION_LENGTH: <%= Constants::FILENAME_TRUNCATION_LENGTH %>,
-  FILE_MAX_SIZE_MB: <%= Rails.configuration.x.file_max_size_mb %>,
+  FILE_MAX_SIZE_MB: parseInt($('meta[name="max-file-size"]').attr('content'), 10),
  IS_SAFARI: /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+  REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME: 'repository-row-edit-form',
  REPOSITORY_LIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %>,
  REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN %>
 };
--- a/app/assets/javascripts/sitewide/datatable_helpers.js
+++ b/app/assets/javascripts/sitewide/datatable_helpers.js
@ -0,0 +1,37 @@
+/* global dropdownSelector I18n */
+
+var DataTableHelpers = (function() {
+  return {
+    initLengthApearance: function(dataTableWraper) {
+      var tableLengthSelect = $(dataTableWraper).find('.dataTables_length select');
+      if (tableLengthSelect.val() == null) {
+        tableLengthSelect.val(10).change();
+      }
+      $.each(tableLengthSelect.find('option'), (i, option) => {
+        option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
+      });
+      $(dataTableWraper).find('.dataTables_length')
+        .append(tableLengthSelect).find('label')
+        .remove();
+      dropdownSelector.init(tableLengthSelect, {
+        noEmptyOption: true,
+        singleSelect: true,
+        closeOnSelect: true,
+        disableSearch: true,
+        selectAppearance: 'simple'
+      });
+    },
+
+    initSearchField: function(dataTableWraper) {
+      var tableFilterInput = $(dataTableWraper).find('.dataTables_filter input');
+      tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
+        .addClass('sci-input-field')
+        .css('margin', 0);
+      $('.dataTables_filter').append(`
+          <div class="sci-input-container left-icon">
+            <i class="fas fa-search"></i>
+          </div>`).find('.sci-input-container').prepend(tableFilterInput);
+      $('.dataTables_filter').find('label').remove();
+    }
+  };
+}());
--- a/app/assets/javascripts/sitewide/date_time_picker.js
+++ b/app/assets/javascripts/sitewide/date_time_picker.js
@ -0,0 +1,24 @@
+(function() {
+  'use strict';
+
+  $(document).on('click', '[data-toggle="date-time-picker"]', function(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    let dt = $(this);
+
+    if (dt.data('DateTimePicker')) {
+      dt.data('DateTimePicker').destroy();
+    }
+
+    dt.datetimepicker({ ignoreReadonly: true });
+    dt.data('DateTimePicker').show();
+  });
+
+  $(document).on('click', '[data-toggle="clear-date-time-picker"]', function() {
+    let dt = $(`#${$(this).data('target')}`);
+    if (!dt.data('DateTimePicker')) dt.datetimepicker({ useCurrent: false });
+    dt.data('DateTimePicker').clear();
+    dt.val('');
+  });
+}());
--- a/app/assets/javascripts/sitewide/drag_n_drop.js
+++ b/app/assets/javascripts/sitewide/drag_n_drop.js
@ -158,7 +158,6 @@
    function init(location) {
      LOCATION = location;
      global.addEventListener('paste', listener, false);
-      $.initTooltips();
    }

    function destroy() {
@ -178,7 +177,6 @@
    var totalSize = 0;
    var fileMaxSizeMb;
    var fileMaxSize;
-    var uploadedFilesCounter = 0;

    // return the status of files if they are ready to submit
    function filesStatus() {
@ -189,14 +187,6 @@
      droppedFiles = [];
    }

-    function incrementUploadedFilesCounter() {
-      uploadedFilesCounter += 1;
-    }
-
-    function getUploadedFilesCounter() {
-      return uploadedFilesCounter;
-    }
-
    function dragNdropAssetsOff() {
      $('body').off('drag dragstart dragend dragover dragenter dragleave drop');
      $('.is-dragover').hide();
@ -210,14 +200,14 @@
        const form = $(ev.target).closest('form').get(0);
        const url = $(form).find('#drag-n-drop-assets').data('directUploadUrl');
        const regex = /step\[assets_attributes\]\[[0-9]*\]\[id\]/;
-        const numberOfFiles = droppedFiles.length;
+        const lastIndex = droppedFiles.length - 1;
        let prevEls = $('input').filter(function() {
          return this.name.match(regex);
        });

        let fd = new FormData(form);
+        let index = 0;

-        uploadedFilesCounter = 0;
        fd.delete('step[file][]');

        if (droppedFiles.length === 0) {
@ -225,22 +215,25 @@
          return;
        }

-        for (let i = 0; i < droppedFiles.length; i += 1) {
-          let upload = new ActiveStorage.DirectUpload(droppedFiles[i], url);
-          let index = i + prevEls.length;
+        const uploadFile = (file) => {
+          let upload = new ActiveStorage.DirectUpload(file, url);

          upload.create(function(error, blob) {
            if (error) {
              reject(error);
            } else {
-              fd.append('step[assets_attributes][' + index + '][signed_blob_id]', blob.signed_id);
-              incrementUploadedFilesCounter();
-              if (getUploadedFilesCounter() === numberOfFiles) {
+              fd.append('step[assets_attributes][' + (index + prevEls.length) + '][signed_blob_id]', blob.signed_id);
+              if (index === lastIndex) {
                resolve(fd);
+                return;
              }
+              index += 1;
+              uploadFile(droppedFiles[index]);
            }
          });
-        }
+        };
+
+        uploadFile(droppedFiles[index]);

        filesValid = true;
        totalSize = 0;
@ -280,11 +273,9 @@
      if (totalSize > fileMaxSize) {
        filesValid = false;
        disableSubmitButton();
-        $.each($('.panel-step-attachment-new'), function() {
-          if (!$(this).find('p').hasClass('dnd-total-error')) {
-            $(this)
-              .find('.panel-body')
-              .append("<p class='dnd-total-error'>" + I18n.t('general.file.total_size', { size: fileMaxSizeMb }) + '</p>');
+        $.each($('.attachment-placeholder.new'), function() {
+          if (!$(this).find('p').hasClass('dnd-error')) {
+            $(this).append("<p class='dnd-total-error'>" + I18n.t('general.file.total_size', { size: fileMaxSizeMb }) + '</p>');
          }
        });
      } else {
@ -352,6 +343,7 @@
      fileMaxSizeMb = GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB;
      fileMaxSize = fileMaxSizeMb * 1024 * 1024;
      for (let i = 0; i < files.length; i += 1) {
+        files[i].uuid = Math.random().toString(36);
        droppedFiles.push(files[i]);
      }
      listItems();
@ -463,33 +455,38 @@
    function appendFilesToForm(ev, fd) {
      const form = $(ev.target.form);
      const url = form.find('#drag-n-drop-assets').data('directUploadUrl');
-      const numberOfFiles = droppedFiles.length;
+      const lastIndex = droppedFiles.length - 1;

-      let resultNames = [];
+      let index = 0;

-      $.each($('input[rel="results[name]"]'), function() {
-        resultNames.push($(this).val());
-      });
+      const uploadFile = (file) => {
+        const upload = new ActiveStorage.DirectUpload(file, url);

-      resultNames.reverse();
-      var counter = 0;
-      for (let i = 0; i < numberOfFiles; i += 1) {
-        let upload = new ActiveStorage.DirectUpload(droppedFiles[i], url);
-
-        upload.create(function(error, blob) {
+        upload.create((error, blob) => {
          if (error) {
-            // Handle the error
+            $.each($('.panel-result-attachment-new'), function() {
+              if (!$(this).find('p').hasClass('dnd-total-error')) {
+                $(this)
+                  .find('.panel-body')
+                  .append("<p class='dnd-total-error'>" + I18n.t('general.file.upload_failure') + '</p>');
+              }
+            });
+            animateSpinner(null, false);
          } else {
-            fd.append('results_names[' + i + ']', resultNames[i]);
-            fd.append('results_files[' + i + '][signed_blob_id]', blob.signed_id);
-            counter += 1;
-            if (counter === numberOfFiles) {
+            fd.append('results_names[' + index + ']', $('input[name="results[name][' + index + ']"]').val());
+            fd.append('results_files[' + index + '][signed_blob_id]', blob.signed_id);
+            if (index === lastIndex) {
              submitResultForm($(ev.target).attr('data-href'), fd);
              destroyAll();
+              return;
            }
+            index += 1;
+            uploadFile(droppedFiles[index]);
          }
        });
-      }
+      };
+
+      uploadFile(droppedFiles[index]);
    }

    /* eslint no-param-reassign: ["error", { "props": false }] */
@ -521,7 +518,7 @@
                      <span class="fas fa-paperclip"></span>
                      ${I18n.t('assets.drag_n_drop.file_label')}
                      <div class="pull-right">
-                        <a data-item-id="' + ${i} + '" href="#">
+                        <a data-item-id="${asset.uuid}" href="#">
                          <span class="fas fa-times"></span>
                        </a>
                      </div>
@ -530,7 +527,7 @@
                      <div class="form-group">
                        <label class="control-label">Name</label>
                        <input type="text" class="form-control" onChange="DragNDropResults.validateTextSize(this)"
-                               rel="results[name]" name="results[name][' + ${i} + ']">
+                               rel="results[name]" name="results[name][${i}]">
                      </div>
                      <div class="form-group">
                        <label class="control-label">${I18n.t('assets.drag_n_drop.file_label')}:</label>
@ -555,16 +552,19 @@
      }
    }

-    function removeItemHandler(id, callback) {
-      $('[data-item-id="' + id + '"]').off('click').on('click', function(e) {
+    function removeItemHandler(uuid) {
+      $('[data-item-id="' + uuid + '"]').off('click').on('click', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
        let $el = $(this);
-        let index = $el.data('item-id');
+        let index = droppedFiles.findIndex((file) => {
+          return file.uuid === $el.data('item-id');
+        });
        totalSize -= parseInt(droppedFiles[index].size, 10);
        droppedFiles.splice(index, 1);
-        callback();
+        validateTotalSize();
+        $el.closest('.panel-result-attachment-new').remove();
      });
    }

@ -582,7 +582,7 @@
            .after(uploadedAssetPreview(droppedFiles[i], i))
            .promise()
            .done(function() {
-              removeItemHandler(i, listItems);
+              removeItemHandler(droppedFiles[i].uuid);
            });
        }
        validateTotalSize();
@ -593,8 +593,10 @@
    function init(files) {
      fileMaxSizeMb = GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB;
      fileMaxSize = fileMaxSizeMb * 1024 * 1024;
+
      for (let i = 0; i < files.length; i += 1) {
-        droppedFiles.push(files[i]);
+        files[i].uuid = Math.random().toString(36);
+        droppedFiles.unshift(files[i]);
      }
      listItems();
    }
--- a/app/assets/javascripts/sitewide/dropdown_selector.js
+++ b/app/assets/javascripts/sitewide/dropdown_selector.js
@ -41,6 +41,7 @@
    selectAppearance: string, // 'tag' or 'simple'. Default 'tag'
    closeOnSelect: boolean, // Close dropdown after select
    disableSearch: boolean, // Disable search
+    emptyOptionAjax: boolean, // Add empty option for ajax request
  }


@ -61,17 +62,18 @@ var dropdownSelector = (function() {
    var modalContainer = container.closest('.modal-dialog');
    var modalContainerBottom = 0;
    var maxHeight = 0;
+    const bottomTreshold = 280;

-    if (modalContainer.length) {
-      windowHeight = modalContainer.height() + modalContainer[0].getBoundingClientRect().top;
-      containerPositionLeft -= modalContainer[0].getBoundingClientRect().left;
-      modalContainerBottom = modalContainer[0].getBoundingClientRect().bottom;
+    if (modalContainer.length && windowHeight - modalContainer.height() > bottomTreshold) {
+      let modalClientRect = modalContainer[0].getBoundingClientRect();
+      windowHeight = modalContainer.height() + modalClientRect.top;
+      containerPositionLeft -= modalClientRect.left;
+      modalContainerBottom = windowHeight + modalClientRect.bottom;
      maxHeight += modalContainerBottom;
    }
-
    bottomSpace = windowHeight - containerPosition - containerHeight;

-    if ((modalContainerBottom + bottomSpace) < 280) {
+    if ((modalContainerBottom + bottomSpace) < bottomTreshold) {
      container.addClass('inverse');
      container.find('.dropdown-container').css('max-height', `${(containerPosition - 122 + maxHeight)}px`)
        .css('margin-bottom', `${(containerPosition * -1)}px`)
@ -188,7 +190,7 @@ var dropdownSelector = (function() {
    if (config.inputTagMode) {
      return '';
    }
-    return '<i class="fas fa-caret-down"></i>';
+    return '<i class="fas fa-caret-down right-icon"></i><i class="fas fa-search right-icon"></i>';
  }

  // Set new data
@ -289,7 +291,7 @@ var dropdownSelector = (function() {
        ${prepareCustomDropdownIcon(config)}
      </div>
      <input type="hidden" class="data-field" value="[]">
-      
+
    `).appendTo(dropdownContainer);

    // If we setup Select All we draw it and add correspond logic
@ -379,7 +381,7 @@ var dropdownSelector = (function() {
        }
      } else {
        // on Close we blur search field
-        dropdownContainer.find('.search-field').blur();
+        dropdownContainer.find('.search-field').blur().val('');

        // onClose event
        if (config.onClose) {
@ -426,6 +428,9 @@ var dropdownSelector = (function() {
    // Enable simple mode for dropdown selector
    if (config.selectAppearance === 'simple') {
      dropdownContainer.addClass('simple-mode');
+      if (dropdownContainer.find('.tag-label').length) {
+        dropdownContainer.find('.search-field').attr('placeholder', dropdownContainer.find('.tag-label').text().trim());
+      }
    }

    // Disable search
@ -502,7 +507,7 @@ var dropdownSelector = (function() {
    container.find('.dropdown-group, .dropdown-option, .empty-dropdown, .delimiter').remove();
    if (!data) return;

-    if (data.length > 0) {
+    if (data.length > 0 && !(data.length === 1 && data[0].value === '')) {
      // If we use select-by-group option we need first draw groups
      if (selector.data('select-by-group')) {
        $.each(data, function(gi, group) {
@ -675,8 +680,15 @@ var dropdownSelector = (function() {
    }

    // If we have alteast one tag, we need to remove placeholder from search field
-    searchFieldValue.attr('placeholder',
-      selectedOptions.length > 0 ? '' : (selector.data('placeholder') || ''));
+    if (selector.data('config').selectAppearance === 'simple') {
+      let selectedLabel = container.find('.tag-label');
+      container.find('.search-field').prop('placeholder',
+        selectedLabel.length && selectedLabel.text().trim() !== '' ? selectedLabel.text().trim() : selector.data('placeholder'));
+    } else {
+      searchFieldValue.attr('placeholder',
+        selectedOptions.length > 0 ? '' : (selector.data('placeholder') || ''));
+    }
+
    searchFieldValue.attr('data-options-selected', selectedOptions.length);

    // Add stretch class for visual improvments
@ -730,7 +742,16 @@ var dropdownSelector = (function() {
      ajaxParams = customParams ? customParams(defaultParams) : defaultParams;

      $.get(selector.data('ajax-url'), ajaxParams, (data) => {
-        loadData(selector, container, data);
+        var optionsAjax = data.constructor === Array ? data : [];
+        if (selector.data('config').emptyOptionAjax) {
+          optionsAjax = [{
+            label: selector.data('placeholder') || '',
+            value: '',
+            group: null,
+            params: {}
+          }].concat(optionsAjax);
+        }
+        loadData(selector, container, optionsAjax);
        PerfectSb().update_all();
      });
    // For local options we convert options element from select to correct array
@ -817,7 +838,21 @@ var dropdownSelector = (function() {
    setData: function(selector, data) {
      if ($(selector).length === 0) return false;

-      setData($(selector), []);
+      setData($(selector), data);
+
+      return this;
+    },
+
+    // Select value
+    selectValue: function(selector, value) {
+      var $selector;
+      var option;
+
+      if ($(selector).length === 0) return false;
+
+      $selector = $(selector);
+      option = $selector.find(`option[value="${value}"]`)[0];
+      setData($selector, [convertOptionToJson(option)]);

      return this;
    },
--- a/app/assets/javascripts/sitewide/form_validators.js.erb
+++ b/app/assets/javascripts/sitewide/form_validators.js.erb
@ -196,6 +196,14 @@ function filesSizeValidator(ev, fileInputs, fileTypeEnum) {
  return filesSizeValid;
 }

+function numberMinMaxValidator(value, min, max) {
+  if(parseInt(value) < min || isNaN(value))
+    return min;
+  else if(parseInt(value) > max)
+    return max;
+  else return value;
+}
+
 /*
 * Overriden in billing module for checking whether enough
 * team space is free.
--- a/app/assets/javascripts/sitewide/infinite_scroll.js
+++ b/app/assets/javascripts/sitewide/infinite_scroll.js
@ -0,0 +1,72 @@
+/* eslint-disable no-unused-vars */
+
+var InfiniteScroll = (function() {
+  function getScrollHeight($container) {
+    return $container[0].scrollHeight;
+  }
+
+  function scrollNotVisible($container) {
+    return (getScrollHeight($container) - $container.height() - 150 <= 0);
+  }
+
+  function loadData($container, page = 1) {
+    var customParams = $container.data('config').customParams;
+    var params = (customParams ? customParams({ page: page }) : { page: page });
+
+    if ($container.hasClass('loading') || $container.hasClass('last-page')) return;
+    $container.addClass('loading');
+
+    $.get($container.data('config').url, params, function(result) {
+      if ($container.data('config').customResponse) {
+        $container.data('config').customResponse(result, $container);
+      } else {
+        $(result.data).appendTo($container);
+      }
+
+      if (result.next_page) {
+        $container.data('next-page', result.next_page);
+      } else {
+        $container.addClass('last-page');
+      }
+      $container.removeClass('loading');
+
+      if ($container.data('config').afterAction) {
+        $container.data('config').afterAction(result, $container);
+      }
+
+      if (scrollNotVisible($container)) {
+        loadData($container, $container.data('next-page'));
+      }
+    });
+  }
+
+  function initScroll(object, config = {}) {
+    var $container = $(object);
+    $container.data('next-page', 2);
+    $container.data('config', config);
+
+    if (config.loadFirstPage) {
+      loadData($container, 1);
+    } else if (scrollNotVisible($container)) {
+      loadData($container, $container.data('next-page'));
+    }
+
+    $container.on('scroll', () => {
+      if ($container.scrollTop() + $container.height() > getScrollHeight($container) - 150 && !$container.hasClass('last-page')) {
+        loadData($container, $container.data('next-page'));
+      }
+    });
+  }
+
+  return {
+    init: (object, config) => {
+      initScroll(object, config);
+    },
+    resetScroll: (object) => {
+      $(object).data('next-page', $(object).data('config').loadFirstPage ? 1 : 2).removeClass('last-page');
+      if (scrollNotVisible($(object))) {
+        loadData($(object), $(object).data('next-page'));
+      }
+    }
+  };
+}());
--- a/app/assets/javascripts/sitewide/repository_helper.js
+++ b/app/assets/javascripts/sitewide/repository_helper.js
@ -0,0 +1,51 @@
+/* global GLOBAL_CONSTANTS I18n */
+
+(function() {
+  'use strict';
+
+  function initUnsavedWorkDialog() {
+    $(document).on('turbolinks:before-visit', () => {
+      let exit = true;
+      let editing = $(`.${GLOBAL_CONSTANTS.REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME}`).length > 0;
+
+      if (editing) {
+        exit = confirm(I18n.t('repositories.js.leaving_warning'));
+      }
+
+      return exit;
+    });
+  }
+
+  initUnsavedWorkDialog();
+}());
+
+function initAssignedTasksDropdown(table) {
+  function loadTasks(counterContainer) {
+    var tasksContainer = counterContainer.find('.tasks');
+    var tasksUrl = counterContainer.data('task-list-url');
+    var searchQuery = counterContainer.find('.search-tasks').val();
+    $.get(tasksUrl, { query: searchQuery }, function(result) {
+      tasksContainer.html(result.html);
+    });
+  }
+
+  $(table).on('show.bs.dropdown', '.assign-counter-container', function() {
+    var cell = $(this);
+    loadTasks(cell);
+  });
+
+  $(table).on('click', '.assign-counter-container .dropdown-menu', function(e) {
+    e.stopPropagation();
+  });
+
+  $(table).on('click', '.assign-counter-container .clear-search', function() {
+    var cell = $(this).closest('.assign-counter-container');
+    $(this).prev('.search-tasks').val('');
+    loadTasks(cell);
+  });
+
+  $(table).on('keyup', '.assign-counter-container .search-tasks', function() {
+    var cell = $(this).closest('.assign-counter-container');
+    loadTasks(cell);
+  });
+}
--- a/app/assets/javascripts/sitewide/tiny_mce.js
+++ b/app/assets/javascripts/sitewide/tiny_mce.js
@ -84,6 +84,25 @@ var TinyMCE = (function() {
    $(editor.getContainer()).find('.tinymce-save-button').removeClass('hidden');
  }

+  function draftLocation() {
+    return 'tinymce-drafts-' + document.location.pathname;
+  }
+
+  function removeDraft(editor, textAreaObject) {
+    var location = draftLocation();
+    var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]');
+    var draftId = storedDrafts.indexOf(textAreaObject.data('tinymce-object'));
+    if (draftId > -1) {
+      storedDrafts.splice(draftId, 1);
+    }
+
+    if (storedDrafts.length) {
+      sessionStorage.setItem(location, JSON.stringify(storedDrafts));
+    } else {
+      sessionStorage.removeItem(location);
+    }
+  }
+
  // returns a public API for TinyMCE editor
  return Object.freeze({
    init: function(selector, onSaveCallback) {
@ -107,7 +126,7 @@ var TinyMCE = (function() {
        }

        tinyMCE.init({
-          cache_suffix: '?v=4.9.3', // This suffix should be changed any time library is updated
+          cache_suffix: '?v=4.9.10', // This suffix should be changed any time library is updated
          selector: selector,
          convert_urls: false,
          menubar: 'file edit view insert format',
@ -252,6 +271,7 @@ var TinyMCE = (function() {
                editor.remove();
                editorForm.find('.tinymce-view').html(data.html).removeClass('hidden');
                editor.plugins.autosave.removeDraft();
+                removeDraft(editor, textAreaObject);
                if (onSaveCallback) { onSaveCallback(); }
              }).on('ajax:error', function(ev, data) {
                var model = editor.getElement().dataset.objectType;
@ -308,6 +328,15 @@ var TinyMCE = (function() {
              makeItDirty(editor);
            });

+            editor.on('StoreDraft', function() {
+              var location = draftLocation();
+              var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]');
+              var draftName = textAreaObject.data('tinymce-object');
+              if (storedDrafts.includes(draftName) || !draftName) return;
+              storedDrafts.push(draftName);
+              sessionStorage.setItem(location, JSON.stringify(storedDrafts));
+            });
+
            editor.on('remove', function() {
              var menuBar = $(editor.getContainer()).find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout');
              menuBar.find('.tinymce-save-button').remove();
@ -361,7 +390,20 @@ var TinyMCE = (function() {
    makeItDirty: function(editor) {
      makeItDirty(editor);
    },
-    highlight: initHighlightjs
+    highlight: initHighlightjs,
+    initIfHasDraft: function(viewObject) {
+      var storedDrafts = sessionStorage.getItem(draftLocation());
+      var draftName = viewObject.data('tinymce-init');
+      if (storedDrafts && JSON.parse(storedDrafts)[0] === draftName) {
+        let top = viewObject.offset().top;
+        setTimeout(() => {
+          viewObject.click();
+        }, 0);
+        setTimeout(() => {
+          window.scrollTo(0, top - 150);
+        }, 2000);
+      }
+    }
  });
 }());

--- a/app/assets/javascripts/sitewide/tiny_mce_file_upload_plugin.js
+++ b/app/assets/javascripts/sitewide/tiny_mce_file_upload_plugin.js
@ -1,7 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
 /* eslint no-use-before-define: "off" */
 /* eslint no-restricted-syntax: ["off", "BinaryExpression[operator='in']"] */
-/* global tinymce I18n */
+/* global tinymce I18n GLOBAL_CONSTANTS */
 (function() {
  'use strict';

@ -71,6 +71,15 @@

        $('.mce-image-loader')
          .change(e => {
+            var submitButton = $(e.target).closest('.mce-window').find('.mce-foot .mce-primary');
+            var sizeLimit = e.target.files[0].size > (GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB * 1024 * 1024);
+            submitButton.attr('disabled', sizeLimit);
+            if (sizeLimit) {
+              $('.mce-window .image-selection-container').addClass('error')
+                .attr('data-error', I18n.t('general.file.size_exceeded', { file_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB }));
+            } else {
+              $('.mce-window .image-selection-container').removeClass('error');
+            }
            $(e.target).next().find('input[type=text]')[0].value = e.target.value.split(/(\\|\/)/g).pop();
          })
          .parent().find('label')
--- a/app/assets/javascripts/sitewide/tooltip_helper.js
+++ b/app/assets/javascripts/sitewide/tooltip_helper.js
@ -1,126 +0,0 @@
-(function() {
-  'use strict';
-
-  $.initTooltips = function() {
-    var popoversArray = [];
-    var leaveTimeout;
-    var enterTimeout;
-
-    if ($(document.body).data('tooltips-enabled') === true || $(document.body).data('tooltips-enabled') == null) {
-      $('.tooltip_open').remove(); // Destroy all (if any) old open popovers
-      $('.help_tooltips').each(function(i, obj) {
-        var popoverObject = obj;
-        popoversArray.push(popoverObject);
-      });
-      $('.help_tooltips').each(function(i, obj) {
-        var link = $(obj).data('tooltiplink');
-        var textData = $(obj).data('tooltipcontent');
-        var customStyle = $(obj).data('tooltipstyle');
-        obj.dataset.tooltipId = i;
-
-        $(obj)
-          .popover({
-            html: true,
-            container: 'body',
-            placement: 'auto right',
-            trigger: 'manual',
-            content: 'popovers will not display if empty',
-            template:
-              '<div class="popover tooltip_' + i + '_window tooltip-open" '
-              + 'role="tooltip" style="' + customStyle + '" data-popover-id="' + i + '">'
-              + '<div class="popover-body" >' + textData + '</div>'
-              + '<br><br><br>'
-              + '<div class="popover-footer">'
-              + '<a class="btn btn-link text-nowrap" href="' + link + '" target="_blank" rel="noopener noreferrer" >'
-              + 'Read more&nbsp;&nbsp;&nbsp;<i class="fas fa-external-link-alt"></i>'
-              + '</a>'
-              + '</div>'
-              + '</div>'
-          })
-          .off('shown.bs.popover')
-          .on('shown.bs.popover', function() {
-            // hide all other popovers
-            popoversArray.forEach(function(arrayItem) {
-              if (obj !== arrayItem) {
-                $(arrayItem).popover('hide');
-              }
-            });
-          })
-          .off('mouseleave')
-          .on('mouseleave', function() {
-            clearTimeout(enterTimeout);
-            leaveTimeout = setTimeout(function() {
-              if (!$('.tooltip_' + i + '_window:hover').length > 0) {
-                $(obj).popover('hide');
-              }
-            }, 100);
-          })
-          .off('mouseenter')
-          .on('mouseenter', function() {
-            clearTimeout(leaveTimeout);
-            enterTimeout = setTimeout(function() {
-              var top;
-              if ($(obj).hover().length > 0) {
-                $(obj).popover('show');
-                $('.tooltip_' + i + '_window').removeClass('tooltip-enter');
-                top = $(obj).offset().top;
-                $('.tooltip_' + i + '_window').css({
-                  top: (top) + 'px'
-                });
-                $('.tooltip_' + i + '_window').off('mouseleave').on('mouseleave', function() {
-                  $('.tooltip_' + i + '_window').removeClass('tooltip-enter');
-                  $(obj).popover('hide');
-                });
-                $('.tooltip_' + i + '_window').off('mouseenter').on('mouseenter', function() {
-                  $('.tooltip_' + i + '_window').addClass('tooltip-enter');
-                });
-              }
-            }, 1000);
-          });
-      });
-    }
-
-    $(document.body).on('click', function() {
-      $('.help_tooltips').each(function(i, obj) {
-        $(obj).popover('hide');
-      });
-      $('.popover.tooltip-open').each(function(i, obj) {
-        if ($('*[data-tooltip-id="' + obj.dataset.popoverId + '"]').length === 0) {
-          $(obj).remove();
-        }
-      });
-    });
-    $(document.body).on('mousemove', function(e) {
-      var mouse = { x: e.clientX, y: e.clientY };
-      $('.popover.tooltip-open').each(function(i, obj) {
-        var tooltipObj = '*[data-tooltip-id="' + obj.dataset.popoverId + '"]';
-        var objHeight;
-        var objWidth;
-        var objLeft;
-        var objTop;
-        var objCorners;
-        if ($(tooltipObj).length === 0) return;
-        objHeight = $(tooltipObj)[0].clientHeight;
-        objWidth = $(tooltipObj)[0].clientWidth;
-        objLeft = $(tooltipObj)[0].offsetLeft;
-        objTop = $(tooltipObj)[0].offsetTop;
-        objCorners = {
-          tl: { x: objLeft, y: objTop },
-          tr: { x: (objLeft + objWidth), y: objTop },
-          bl: { x: objLeft, y: (objTop + objHeight) },
-          br: { x: (objLeft + objWidth), y: (objTop + objHeight) }
-        };
-        if (
-          !(mouse.x > objCorners.tl.x && mouse.x < objCorners.br.x)
-          || !(mouse.y > objCorners.tl.y && mouse.y < objCorners.br.y)
-        ) {
-          $(tooltipObj).popover('hide');
-        }
-      });
-    });
-  };
-
-  $(document).on('turbolinks:load', function() {
-    $.initTooltips();
-  });
-}());
--- a/app/assets/javascripts/users/settings/account/preferences/index.js
+++ b/app/assets/javascripts/users/settings/account/preferences/index.js
@ -76,19 +76,6 @@
    );
  }

-// Initialize tooltips settings form
-  function tooltipSettings() {
-    var toggleInput = $('[name="tooltips_enabled"]');
-    toggleInput
-      .checkboxpicker({ onActiveCls: 'btn-toggle', offActiveCls: 'btn-toggle' });
-
-    if (toggleInput.attr('value') === 'true') {
-      toggleInput.prop('checked', true);
-    } else {
-      toggleInput.prop('checked', false);
-    }
-  }
-
  // triggers submit action when the user clicks
  function initTogglableSettingsForm() {
    $('#togglable-settings-panel')
@ -148,6 +135,5 @@
  initTimeZoneSelector();
  initDateFormatSelector();
  notificationsSettings();
-  tooltipSettings();
  initTogglableSettingsForm();
 })();
--- a/app/assets/javascripts/users/settings/list_toggle.js.erb
+++ b/app/assets/javascripts/users/settings/list_toggle.js.erb
@ -1,18 +0,0 @@
-(function() {
-  'use strict';
-
-  $(".tree li.parent_li ").find("> span i").on("click", function (e) {
-    e.stopPropagation();
-    var el = $(this).closest("li.parent_li");
-
-    if (el.find(" > ul.accountNavigation").is(":visible")) {
-      el.find(" > span > i.triangleDown").hide();
-      el.find(" > span > i.triangleRight").show();
-      el.find(" > ul.accountNavigation").hide();
-    } else {
-      el.find(" > span > i.triangleDown").show();
-      el.find(" > span > i.triangleRight").hide();
-      el.find(" > ul.accountNavigation").show();
-    }
-  });
-})();
--- a/app/assets/javascripts/users/settings/teams/show.js
+++ b/app/assets/javascripts/users/settings/teams/show.js
@ -11,17 +11,6 @@
    });
  }

-  function AddUserButtonTemplate() {
-    return `
-      <a href="#" class="btn btn-primary" data-trigger="invite-users"
-         data-turbolinks="false" data-modal-id="team-invite-users-modal"
-      >
-        <span class="fas fa-plus"></span>
-        ${I18n.t('users.settings.teams.edit.add_user')}
-      </a>
-    `;
-  }
-
  // Initialize users DataTable
  function initUsersTable() {
    usersDatatable = $('#users-table').DataTable({
@ -70,7 +59,7 @@
        sSearch: I18n.t('general.filter')
      }
    });
-    $('.users-datatable .add-new-team-members').html(AddUserButtonTemplate());
+    $('#add-new-team-members-button').detach().appendTo('.users-datatable .add-new-team-members').removeClass('hidden');
    setTimeout(() => { $('#users-table').css('width', '100%'); }, 300);
  }

--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@ -31,6 +31,7 @@
@import "my_modules/results/*";
@import "my_modules/*";
@import "protocols/*";
+@import "dashboard/*";
@import "repository/*";
@import "repository_columns/*";
@import "settings/*";
--- a/app/assets/stylesheets/dashboard/calendar.scss
+++ b/app/assets/stylesheets/dashboard/calendar.scss
@ -0,0 +1,156 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+
+
+.dashboard-container .calendar-widget {
+  --calendar-day-size: 32px;
+  grid-column: 10 / span 3;
+  grid-row: 1 / span 6;
+  min-height: 320px;
+
+  .dashboard-calendar {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+
+  .clndr {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .controls {
+      border-bottom: $border-default;
+      display: flex;
+      flex-basis: 42px;
+      flex-shrink: 0;
+      padding: 3px;
+
+      .clndr-title {
+        @include font-h3;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+      }
+    }
+
+    .days-container {
+      align-items: center;
+      display: grid;
+      flex-basis: calc(100% - 42px);
+      flex-grow: 1;
+      grid-column-gap: 6px;
+      grid-row-gap: 6px;
+      grid-template-columns: repeat(7, 1fr);
+      grid-template-rows: repeat(7, 1fr);
+      justify-items: center;
+      padding: 6px;
+
+      .day-header {
+        @include font-button;
+        color: $color-silver-chalice;
+        font-weight: bold;
+      }
+
+      .day {
+        @include font-button;
+        align-items: center;
+        animation-timing-function: $timing-function-sharp;
+        border-radius: 50%;
+        display: flex;
+        height: var(--calendar-day-size);
+        justify-content: center;
+        position: relative;
+        transition: .3s;
+        user-select: none;
+        width: var(--calendar-day-size);
+
+        &.adjacent-month {
+          color: $color-alto;
+        }
+
+        &.event {
+
+          .event-day {
+            align-items: center;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            height: calc(var(--calendar-day-size) - 2px);
+            justify-content: center;
+            width: calc(var(--calendar-day-size) - 2px);
+
+            &:hover {
+              background: $color-concrete;
+              color: inherit;
+            }
+          }
+
+
+          &::after {
+            background: $brand-danger;
+            border-radius: 50%;
+            content: "";
+            height: 4px;
+            left: calc((var(--calendar-day-size) / 2) - 2px);
+            position: absolute;
+            top: calc((var(--calendar-day-size) / 2) + 8px);
+            width: 4px;
+          }
+        }
+
+        &.today {
+          border: $border-primary;
+
+          &.event {
+            &::after {
+              left: 13px;
+              top: 23px;
+            }
+          }
+        }
+
+        .events-container {
+          color: $color-black;
+          padding: 8px;
+          width: 280px;
+
+          .title {
+            @include font-h3;
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1250px) {
+  .dashboard-container .calendar-widget {
+    grid-column: 9 / span 4;
+  }
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .calendar-widget {
+    grid-column: 1 / span 6;
+    grid-row: 5 / span 4;
+
+    .clndr {
+      .events-container {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .dashboard-container .calendar-widget {
+    --calendar-day-size: 28px;
+    grid-column: 1 / span 12;
+    grid-row: 2;
+  }
+}
--- a/app/assets/stylesheets/dashboard/create_task_modal.scss
+++ b/app/assets/stylesheets/dashboard/create_task_modal.scss
@ -0,0 +1,92 @@
+// scss-lint:disable SelectorDepth QualifyingElement NestingDepth
+
+#create-task-modal {
+  .modal-dialog {
+    width: 360px;
+
+    .description {
+      margin-bottom: 20px;
+    }
+
+    .select-block {
+      display: inline-block;
+      padding-bottom: 16px;
+      position: relative;
+      width: 100%;
+
+      label {
+        @include font-small;
+        display: inline-block;
+        font-weight: bold;
+        margin-bottom: 5px;
+        user-select: none;
+      }
+
+      &::after {
+        display: block;
+        color: $brand-danger;
+        content: attr(data-error);
+      }
+    }
+
+    .dropdown-selector-container {
+      .create-new {
+        padding: 0 5px;
+      }
+    }
+
+    .new-projects-visibility {
+      position: relative;
+    }
+
+    .down-arrow {
+      background-color: $color-white;
+      box-shadow: -4px 4px 0 $color-black;
+      display: inline-block;
+      height: 38px;
+      margin: 0 11px 20px 14px;
+      opacity: .2;
+      width: 38px;
+    }
+
+    .down-arrow::before {
+      border-bottom: 6px solid transparent;
+      border-left: 8px solid $color-black;
+      border-top: 6px solid transparent;
+      content: "";
+      height: 0;
+      left: 46px;
+      position: absolute;
+      top: 36px;
+      width: 0;
+    }
+
+    .project-visibility-container {
+      display: inline-block;
+      width: 260px;
+    }
+
+    .project-visibility-title {
+      @include font-small;
+      display: inline-block;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+
+    .sci-toggles-group {
+      .sci-toggle-item {
+        width: 130px;
+      }
+
+      .sci-toggle-item-label {
+        margin-left: -130px;
+        margin-bottom: 0;
+        width: 130px;
+      }
+    }
+
+    .modal-footer {
+      text-align: center;
+    }
+  }
+}
--- a/app/assets/stylesheets/dashboard/current_tasks.scss
+++ b/app/assets/stylesheets/dashboard/current_tasks.scss
@ -0,0 +1,393 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.dashboard-container .current-tasks-widget {
+  grid-column: 1 / span 9;
+  grid-row: 1 / span 6;
+
+  .title {
+    flex-shrink: 0;
+  }
+
+  .actions-container {
+    display: flex;
+    flex-grow: 1;
+    padding-left: 10px;
+  }
+
+  .search-container {
+    flex-basis: 36px;
+
+    .fa-search {
+      animation-timing-function: $timing-function-sharp;
+      color: $color-alto;
+      transition: .3s;
+      width: 26px;
+    }
+
+    .task-search-field {
+      background: transparent;
+      border: $border-default;
+      padding-left: 36px;
+      position: relative;
+      width: 200px;
+      z-index: 2;
+
+      &:placeholder-shown {
+        border: $border-transparent;
+        cursor: pointer;
+        width: 36px;
+
+        + .fa-search {
+          color: $color-volcano;
+        }
+      }
+
+      &:hover {
+        border: $border-default;
+      }
+
+      &:focus {
+        border: $border-focus;
+        cursor: auto;
+        width: 200px;
+
+        + .fa-search {
+          color: $color-alto;
+        }
+      }
+
+
+    }
+  }
+
+  .filter-container {
+    height: 36px;
+    margin-right: 4px;
+    width: 36px;
+
+    .curent-tasks-filters {
+      padding: 0;
+      width: 230px;
+
+      .header {
+        align-items: center;
+        border-bottom: $border-default;
+        display: flex;
+        height: 44px;
+        margin-bottom: 16px;
+        padding: 0  5px 0 16px;
+
+        .title {
+          @include font-h2;
+          flex-grow: 1;
+          user-select: none;
+
+        }
+      }
+
+      .select-block {
+        display: inline-block;
+        padding: 0 16px 16px;
+        position: relative;
+        width: 100%;
+
+        label {
+          @include font-small;
+          display: inline-block;
+          font-weight: bold;
+          margin-bottom: 5px;
+          user-select: none;
+        }
+      }
+
+      .footer {
+        align-items: center;
+        border-top: $border-default;
+        display: flex;
+        height: 68px;
+        justify-content: center;
+        position: relative;
+        width: 100%;
+      }
+    }
+  }
+
+  .widget-placeholder {
+    .fas {
+      font-size: 32px;
+      margin-left: 100px;
+      margin-top: 50px;
+    }
+
+    &.team {
+      .assigned {
+        display: none;
+      }
+    }
+
+    &.assigned {
+      .team {
+        display: none;
+      }
+    }
+  }
+
+  .current-tasks-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 10px;
+    position: relative;
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    .current-task-item {
+      border-bottom: $border-tertiary;
+      color: $color-volcano;
+      padding: 6px;
+      text-decoration: none;
+
+      .current-task-breadcrumbs {
+        @include font-small;
+        color: $color-silver-chalice;
+        line-height: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .slash {
+          display: inline-block;
+          text-align: center;
+          width: 16px;
+        }
+      }
+
+      .item-row {
+        display: flex;
+
+        .task-name {
+          flex-grow: 1;
+          font-size: $font-size-base;
+          font-weight: bold;
+          overflow: hidden;
+          padding-right: 10px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .task-due-date {
+          flex-basis: 280px;
+          flex-shrink: 0;
+          font-size: 14px;
+
+          .fas {
+            padding: 4px;
+          }
+
+          &.overdue {
+            color: $brand-danger;
+          }
+
+          &.day-prior {
+            color: $brand-warning;
+          }
+
+          &.completed {
+            color: $brand-success;
+          }
+        }
+      }
+
+      &:hover {
+        background: $color-concrete;
+      }
+    }
+  }
+
+  .task-progress-container {
+    height: 20px;
+    max-width: 250px;
+    min-width: 150px;
+    position: relative;
+    width: 100%;
+
+    &::after {
+      @include font-small;
+      @include font-awesome;
+      content: "";
+      line-height: 18px;
+      position: absolute;
+      right: 8px;
+      top: 1px;
+    }
+
+    .task-progress {
+      background: $brand-focus-light;
+      border: $border-tertiary;
+      border-radius: $border-radius-tag;
+      display: flex;
+      height: 20px;
+      position: relative;
+
+      &::after {
+        background: $color-white;
+        content: "";
+        height: 18px;
+        width: 100%;
+      }
+    }
+
+    .task-progress-label {
+      @include font-small;
+      font-weight: bold;
+      height: 20px;
+      left: 0;
+      line-height: 20px;
+      padding-left: 8px;
+      position: absolute;
+      top: 0;
+      width: calc(100% - 30px);
+    }
+
+    &.overdue {
+      .task-progress {
+        background: $brand-danger-light;
+      }
+
+      .task-progress-label {
+        color: $brand-danger;
+      }
+
+      &::after {
+        color: $brand-danger;
+        content: $font-fas-exclamation-triangle;
+      }
+    }
+
+    &.day-prior {
+      .task-progress-label {
+        color: $brand-warning;
+      }
+    }
+
+    &.completed {
+      .task-progress {
+        outline: $border-success;
+      }
+
+      .task-progress,
+      .task-progress::after {
+        background: $brand-success-light;
+      }
+
+      .task-progress-label {
+        color: $brand-success;
+      }
+
+      &::after {
+        color: $brand-success;
+        content: $font-fas-check;
+      }
+    }
+  }
+}
+
+@media (max-width: 1500px) {
+  .dashboard-container .current-tasks-widget {
+    .task-progress-container {
+      max-width: 200px;
+    }
+  }
+}
+
+@media (max-width: 1250px) {
+  .dashboard-container .current-tasks-widget {
+    grid-column: 1 / span 8;
+
+    .task-progress-container {
+      max-width: 150px;
+    }
+
+    .current-tasks-list {
+      .current-task-item {
+        .item-row {
+          .task-due-date {
+            flex-basis: 230px;
+          }
+        }
+      }
+    }
+
+  }
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .current-tasks-widget {
+    grid-column: 1 / span 12;
+    grid-row: 1 / span 4;
+
+    .no-tasks .fas {
+      margin-left: 500px;
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .dashboard-container .current-tasks-widget {
+    --widget-header-size: 72px;
+    grid-row: 1;
+    min-height: 450px;
+
+    .widget-title {
+      flex-basis: 100%;
+      line-height: 36px;
+    }
+
+    .actions-container {
+      flex-grow: 0;
+      padding: 0;
+    }
+
+    .current-tasks-navbar {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    .search-container {
+      margin-right: 5px;
+
+      .task-search-field {
+        width: 150px;
+
+        &:focus {
+          width: 150px;
+        }
+      }
+    }
+
+    .current-tasks-list {
+      .current-task-item {
+        .item-row {
+          flex-wrap: wrap;
+
+          .task-due-date {
+            @include font-small;
+
+            .fas {
+              display: none;
+            }
+          }
+
+          .task-progress-container {
+            flex-basis: 100%;
+            max-width: none;
+          }
+        }
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/dashboard/quick_start.scss
+++ b/app/assets/stylesheets/dashboard/quick_start.scss
@ -0,0 +1,48 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.dashboard-container .quick-start-widget {
+  grid-column: 1 / span 2;
+  grid-row: 7 / span 6;
+
+  .widget-body {
+    .quick-start-description {
+      margin: 16px 16px 24px;
+    }
+
+    .btn-secondary {
+      margin: 8px 16px;
+      text-align: left;
+      width: calc(100% - 32px);
+    }
+  }
+}
+
+@media (max-width: 1700px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 1 / span 3;
+  }
+}
+
+
+@media (max-width: 1300px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 1 / span 4;
+  }
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 7 / span 6;
+    grid-row: 5 / span 4;
+  }
+}
+
+@media (max-width: 700px) {
+  .dashboard-container .quick-start-widget {
+    --widget-header-size: 36px;
+    grid-column: 1 / span 12;
+    grid-row: 4;
+    min-height: 300px;
+  }
+}
--- a/app/assets/stylesheets/dashboard/recent_work.scss
+++ b/app/assets/stylesheets/dashboard/recent_work.scss
@ -0,0 +1,123 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.dashboard-container .recent-work-widget {
+  grid-column: 3 / span 7;
+  grid-row: 7 / span 6;
+
+  .widget-title {
+    flex-grow: 1;
+  }
+
+  .recent-work-container {
+    height: 100%;
+    padding: 0 8px;
+    position: relative;
+
+    .recent-work-item {
+      color: $color-volcano;
+      cursor: pointer;
+      display: flex;
+      line-height: 28px;
+      padding: 0 8px;
+      text-decoration: none;
+
+      .object-name {
+        flex-grow: 1;
+        font-weight: bold;
+        overflow: hidden;
+        padding-right: 15px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .object-type {
+        @include font-small;
+        color: $color-silver-chalice;
+        flex-basis: 120px;
+        flex-shrink: 0;
+      }
+
+      .object-changed {
+        @include font-small;
+        flex-basis: 160px;
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        background: $color-concrete;
+      }
+    }
+
+    .widget-placeholder {
+      .no-results-arrow {
+        font-size: 32px;
+        padding-top: 50px;
+      }
+    }
+  }
+}
+
+@media (max-width: 1700px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 4 / span 6;
+  }
+}
+
+
+@media (max-width: 1300px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 5 / span 8;
+  }
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 1 / span 12;
+    grid-row: 9 / span 4;
+
+    .no-results {
+      .no-results-arrow {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .dashboard-container .recent-work-widget {
+    --widget-header-size: 72px;
+    grid-row: 3;
+    min-height: 450px;
+
+    .widget-title {
+      flex-basis: 100%;
+      line-height: 36px;
+    }
+
+    .recent-work-container {
+      .recent-work-item {
+        flex-wrap: wrap;
+        margin: 5px 0;
+
+        .object-name {
+          flex-basis: 100%;
+          line-height: 18px;
+        }
+
+        .object-type {
+          flex-basis: 0;
+          flex-grow: 1;
+          line-height: 18px;
+        }
+
+        .object-changed {
+          flex-basis: 0;
+          flex-grow: 1;
+          line-height: 18px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/dashboard/show.scss
+++ b/app/assets/stylesheets/dashboard/show.scss
@ -0,0 +1,73 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.dashboard-container {
+  --dashboard-widgets-gap: 30px;
+  --widget-header-size: 44px;
+  display: grid;
+  grid-column-gap: var(--dashboard-widgets-gap);
+  grid-row-gap: var(--dashboard-widgets-gap);
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  min-height: calc(100vh - 51px);
+  padding: var(--dashboard-widgets-gap) calc(var(--dashboard-widgets-gap) - 15px);
+  width: 100%;
+
+  .basic-widget {
+    border-radius: $border-radius-modal;
+    box-shadow: $flyout-shadow;
+    position: relative;
+
+    .widget-header {
+      align-items: center;
+      border-bottom: $border-tertiary;
+      display: flex;
+      height: var(--widget-header-size);
+      padding-left: 16px;
+
+      .widget-title {
+        @include font-h2;
+      }
+    }
+
+    .widget-body {
+      height: calc(100% - var(--widget-header-size));
+      position: absolute;
+      width: 100%;
+
+      .widget-placeholder {
+        color: $color-alto;
+        padding: 24px;
+
+        .widget-placeholder-title {
+          @include font-h1;
+        }
+
+        .widget-placeholder-description {
+          @include font-main;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1300px) {
+  .dashboard-container {
+    --dashboard-widgets-gap: 16px;
+  }
+}
+
+@media (max-width: 700px) {
+  .dashboard-container {
+    --widget-header-size: 72px;
+    grid-template-rows: auto;
+
+    .widget-header {
+      flex-wrap: wrap;
+
+      .sci-secondary-navbar {
+        height: 36px;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/forgot_password.scss
+++ b/app/assets/stylesheets/forgot_password.scss
@ -0,0 +1,33 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.forgot-password-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .forgot-password-container {
+    display: flex;
+
+    .forgot-password-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .forgot-password-title {
+        margin-bottom: 24px;
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@ -17,8 +17,6 @@
  }

  .ga-top {
-    border-bottom: 1px solid $color-gainsboro;
-
    .ga-title {
      border-bottom: 1px solid $color-gainsboro;
      height: 35px;
@ -71,11 +69,18 @@
    }

    .ga-tags-container {
+      border-bottom: 1px solid $color-gainsboro;
      display: flex;
      min-height: 38px;
-      padding: 5px 0;
+      padding: 2px 0;
+
+      .clear-container {
+        flex-shrink: 0;
+        margin-left: 4px;
+      }

      .ga-tags {
+        align-items: center;
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
@ -95,6 +100,7 @@
          flex-shrink: 0;
          line-height: 13px;
          margin: 2px 3px;
+          max-height: 24px;
          max-width: 250px;
          overflow: hidden;
          padding: 5px 8px;
@ -114,8 +120,8 @@

          .tag-label {
            display: inline-block;
-            margin-bottom: 1px;
            margin-right: 5px;
+            margin-top: 1px;
            max-width: 500px;
            overflow: hidden;
            text-overflow: ellipsis;
@ -126,26 +132,12 @@
          .fas {
            cursor: pointer;
            flex-grow: 1;
-            font-size: 13px;
+            font-size: 12px;
            opacity: .7;
            text-align: right;
          }
        }
      }
-
-      .clear-container {
-        color: $color-silver-chalice;
-        cursor: pointer;
-        flex-shrink: 0;
-        line-height: 28px;
-        padding-left: 15px;
-        user-select: none;
-
-        .fas {
-          margin-right: 5px;
-        }
-      }
-
    }
  }

@ -322,10 +314,18 @@

    .clear {
      cursor: pointer;
+      display: none;
      float: right;
+      font-weight: normal;
      line-height: 12px;
-      margin-bottom: 5px;
+      margin-bottom: 0;
+      margin-top: 8px;
+      padding-bottom: 8px;
      padding-top: 8px;
+
+      &:hover {
+        text-decoration: underline;
+      }
    }

    .select-container {
--- a/app/assets/stylesheets/hooks/tinymce.scss
+++ b/app/assets/stylesheets/hooks/tinymce.scss
@ -5,7 +5,7 @@
  display: none !important;

  + .image-selection-container {
-    height: 28px;
+    height: 36px;
    left: 140px;
    position: absolute;
    top: 0;
@ -33,6 +33,16 @@
      position: relative;
      width: calc(100% - 100px);
    }
+
+    &.error {
+      &::after {
+        color: $brand-danger;
+        content: attr(data-error);
+        left: 0;
+        position: absolute;
+        top: 40px;
+      }
+    }
  }
 }

--- a/app/assets/stylesheets/marvinjs.scss
+++ b/app/assets/stylesheets/marvinjs.scss
@ -140,7 +140,7 @@
 }

 .new-marvinjs-upload-button {
-  padding: 2px 16px;
+  padding: 1px 16px !important;

  .new-marvinjs-upload-icon {
    display: inline-block;
--- a/app/assets/stylesheets/my_modules.scss
+++ b/app/assets/stylesheets/my_modules.scss
@ -1,6 +1,8 @@
 // Place all the styles related to the MyModules controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+// scss-lint:disable SelectorDepth SelectorFormat
+// scss-lint:disable NestingDepth QualifyingElement

@import "constants";

@ -55,9 +57,6 @@

 // Create wopi file
 .create-wopi-file-btn {
-  border: 0;
-  display: contents;
-
  img {
    margin-right: 5px;
    height: 20px;
@ -116,3 +115,80 @@
    }
  }
 }
+
+// Mobile view
+@media (max-width: 700px) {
+  .task-section {
+    border-left: 0;
+    padding-left: 0;
+
+    .task-section-header {
+      .actions-block {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        margin-bottom: 5px;
+        width: 100%;
+
+        .dropdown {
+          margin-bottom: 5px;
+          min-width: 100%;
+        }
+      }
+    }
+  }
+
+  .task-details {
+    .module-tags {
+      .dropdown-selector-container {
+        .input-field {
+          padding-right: 36px;
+        }
+      }
+    }
+
+    .datetime-container {
+      .date-text {
+        margin-right: 0;
+      }
+
+      .dropdown-menu {
+        left: -50px !important;
+      }
+    }
+  }
+
+  #steps {
+    .panel-heading {
+      flex-wrap: wrap;
+    }
+
+    .panel-options {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 100%;
+
+      .complete-step-btn {
+        width: 100%;
+      }
+    }
+  }
+
+  .attachments {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+
+    .attachment-placeholder {
+      margin: 4px 0 16px;
+      width: 200px;
+    }
+  }
+
+  #filePreviewModal {
+    .modal-body {
+      width: 100%;
+
+      .file-preview-container {
+        width: 90%;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@ -6,149 +6,222 @@
@import "constants";
@import "mixins";

-#manage-module-tags-modal {
-
-  .well {
-    border: 0;
-    box-shadow: none;
-  }
+.content-pane.my-modules-protocols-index {
+  padding: 10px;
 }

-.module-header {
-  display: inline-block;
-  position: relative;
-  width: 100%;
+.task-section {
+  border-left: 3px solid $color-concrete;
+  margin: 16px 0;
+  padding-left: 16px;

-  + .protocol-title {
-    font-size: 22px;
-    font-weight: bold;
-    margin: 10px 0 15px;
-  }
+  .task-section-caret {
+    color: $color-volcano;
+    display: inline-block;
+    text-decoration: none;

-  .fas.block-icon {
-    color: $color-silver;
-    font-size: 18px;
-    margin-right: 5px;
-  }
-
-  .header-container {
-    display: flex;
-    flex-wrap: wrap;
-    float: left;
-    margin-bottom: 10px;
-    width: calc(100% - 280px);
-
-    .flex-block {
-      align-items: center;
-      display: flex;
-      flex-grow: 1;
-      margin-right: 10px;
-
-      .flex-block-label {
-        align-items: center;
-        display: flex;
-        margin-right: 3px;
-      }
+    .fas {
+      margin-right: 5px;
    }

-    .due-date-container {
-      align-items: center;
-      display: inline-flex;
+    &:not(.collapsed) .fas {
+      @include rotate(90deg);
+    }
+  }

-      .date-text {
-        border: 1px solid transparent;
-        font-weight: bold;
-        line-height: 34px;
-        margin-right: 25px;
-        padding: 0 3px;
-        position: relative;
+  .task-section-title {
+    display: inline-block;

-        &.alert-green {
-          color: $brand-success;
-        }
+    h2 {
+      margin: 10px 0;

-        &.alert-yellow {
-          color: $brand-warning;
-        }
-
-        &.alert-red {
-          color: $brand-danger;
-        }
-
-        .clear-date {
-          color: $color-silver;
-          cursor: pointer;
-          display: none;
-          font-size: 20px;
-          left: 100%;
-          line-height: 34px;
-          margin-left: 5px;
-          position: absolute;
-          top: 0;
+      &.assigned-items-title {
+        &::after {
+          @include font-h3;
+          color: $color-alto;
+          content: '[' attr(data-assigned-items-count) ']';
+          display: inline;
+          line-height: 22px;
+          padding-left: 5px;
        }
      }
+    }
+  }

-      .datetime-picker-container {
-        color: $color-emperor;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
+  .task-section-header {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;

-        #calendar-due-date {
-          opacity: 0;
-        }
+    .actions-block {
+      display: flex;
+      flex-grow: 1;
+      justify-content: flex-end;

-        .fa-calendar-alt {
-          display: none;
-        }
+      .caret {
+        margin-left: 25px;
      }

-      &:hover {
-        .date-text[data-editable=true] {
-          border-color: $color-silver;
-          border-radius: 3px;
+      .repositories-assign-container {
+        flex-grow: 1;
+        max-width: 200px;

-          .clear-date {
-            display: inline;
+        .btn {
+          text-align: left;
+
+          .caret {
+            margin: 8px 0;
+          }
+        }
+
+        .repositories-dropdown-menu {
+          .repository {
+            @include font-button;
+            cursor: pointer;
+            display: flex;
+            padding: 8px 16px;
+
+            .assigned-items,
+            .shared-icon {
+              flex-shrink: 0;
+
+              .fas {
+                padding-right: 5px;
+              }
+            }
+
+            .assigned-items {
+              color: $color-alto;
+            }
+
+            .name {
+              flex-grow: 1;
+            }
          }
        }
      }
+
+      .dropdown-menu {
+        @include font-button;
+
+        a {
+          padding: 8px 20px;
+        }
+
+        .fas {
+          padding-right: 5px;
+        }
+      }
+
+      .dropdown {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.complete-button-container {
+  display: inline;
+  float: right;
+  width: 260px;
+
+  .my_module-state-buttons {
+    padding-top: 0;
+  }
+}
+
+.task-details {
+  .fas.block-icon {
+    margin-right: 8px;
+  }
+
+  .flex-block {
+    align-items: center;
+    display: flex;
+    line-height: 34px;
+
+    .flex-block-label {
+      align-items: center;
+      display: flex;
+      margin-right: 4px;
    }
  }

-  .complete-button-container {
-    float: right;
-    width: 260px;
-
-    .my_module-state-buttons {
-      padding-top: 0;
-    }
+  .empty-label {
+    color: $color-silver-chalice;
+    font-weight: normal;
  }

-  .module-description {
-    float: left;
-    width: 100%;
+  .datetime-container {
+    align-items: center;
+    display: inline-flex;

-    .no-description {
-      font-size: 16px;
-    }
-
-    .title {
-      font-size: 22px;
+    .date-text {
+      border: 1px solid transparent;
      font-weight: bold;
-      padding: 20px 0 5px;
+      line-height: 32px;
+      margin-right: 25px;
+      padding: 0 4px;
+      position: relative;
+
+      .alert-green {
+        color: $brand-success;
+      }
+
+      .alert-yellow {
+        color: $brand-warning;
+      }
+
+      .alert-red {
+        color: $brand-danger;
+      }
+
+      .clear-date {
+        color: $color-silver;
+        cursor: pointer;
+        display: none;
+        font-size: 20px;
+        left: 100%;
+        line-height: 34px;
+        margin-left: 5px;
+        position: absolute;
+        top: 0;
+      }
    }

-    .my-module-description-content {
-      margin-left: 10px;
+    .datetime-picker-container {
+      color: $color-emperor;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      #calendarDueDate {
+        opacity: 0;
+      }
+
+      #calendarStartDate {
+        opacity: 0;
+      }
+
+      .fa-calendar-alt {
+        display: none;
+      }
+    }
+
+    &:hover {
+      .date-text[data-editable=true] {
+        background-color: $color-concrete;
+        border-radius: 4px;
+
+        .clear-date {
+          display: inline;
+        }
+      }
    }
  }

  .module-tags {
-    float: left;
-    width: 100%;
-
    #module-tags {
      align-items: center;
      display: flex;
@ -185,7 +258,7 @@

      &:not(.view-mode):hover {
        .input-field {
-          border: 1px solid $color-gainsboro;
+          border: 1px solid $color-alto;
        }
      }
    }
@ -201,7 +274,7 @@
      display: inline-block;
      font-size: 14px;
      line-height: 32px;
-      width: 37px;
+      margin-right: 4px;
    }

    .select-container {
@ -209,7 +282,7 @@
      flex-basis: 100px;
      flex-grow: 1;
      flex-shrink: 1;
-      max-width: calc(100% - 65px);
+      max-width: 100%;
      position: relative;
      z-index: 110;

@ -250,56 +323,195 @@
            float: left;
            line-height: 36px;
          }
+        }
+      }
+    }
+  }

+  #manage-module-tags-modal {
+    .well {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .task-assigned-users {
+    align-items: center;
+    border-radius: 17px;
+    display: flex;
+
+    &.empty {
+      border-radius: 4px;
+      padding: 0 4px;
+    }
+
+    &:hover {
+      background-color: $color-concrete;
+      text-decoration: none;
+    }
+  }
+
+  .assign-new-user {
+    background-color: $color-alto;
+    color: $color-volcano;
+    text-align: center;
+
+    .fa-plus {
+      font-size: 16px;
+    }
+  }
+}
+
+.task-notes {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+
+  .no-description {
+    font-size: 16px;
+  }
+
+  .task-notes-content {
+    margin-left: 10px;
+  }
+}
+
+.my-module-protocol-status {
+  position: relative;
+
+  .status-label {
+    @include font-h3;
+    color: $color-alto;
+    float: left;
+    margin: 0 3px;
+
+    &.linked {
+      color: $brand-primary;
+    }
+  }
+
+  .status-info {
+    @include font-h2;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:active {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    &.protocol-newer {
+      color: $brand-focus;
+    }
+
+    &.parent-newer {
+      color: $brand-warning;
+    }
+  }
+
+  .status-info-dropdown {
+    left: -125px;
+    max-width: 100vw;
+    width: 650px;
+
+    .dropdown-body {
+      border-bottom: $border-tertiary;
+      padding: 10px 32px;
+
+      .info-line {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        margin: 9px 0;
+
+        .description {
+          @include font-button;
+          flex-grow: 1;
+          min-width: 120px;
+        }
+
+        .value {
+          @include font-h3;
+          flex-shrink: 0;
+        }
+
+        &.new-parent-version {
+          .value {
+            color: $brand-warning;
+
+            &::before {
+              @include font-awesome;
+              content: "\f2f1";
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+
+      .notification-line {
+        @include font-button;
+        color: $color-silver-chalice;
+        display: flex;
+        margin: 8px 0;
+
+        .fas {
+          line-height: 21px;
+          margin-right: 3px;
+        }
+
+        &.new-parent-version {
+          color: $brand-warning;
+        }
+
+        &.new-protocol-version {
+          color: $brand-focus;
+        }
+      }
+    }
+
+    .dropdown-footer {
+      padding: 16px;
+    }
+  }
+}
+
+.task-details-dropdown-container {
+  .task-details-button {
+    @include font-h2;
+    cursor: pointer;
+    margin: 0 3px;
+  }
+
+  .dropdown-menu {
+    @include font-button;
+    min-width: 500px;
+    padding: 1em 2em;
+
+    .task-details-value {
+      @include font-h3;
+    }
+
+    .row-v-margin {
+      margin-bottom: .5em;
+      margin-top: .5em;
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .my-module-protocol-status {
+    .status-info-dropdown {
+      left: -75px;
+      width: 300px;
+
+      .dropdown-footer {
+        .btn {
+          float: left !important;
+          margin: 5px 0;
+          width: auto;
        }
      }
    }
  }
 }
-
-.my-module-recent-protocols {
-  flex-grow: 1;
-  height: 36px;
-  margin-bottom: 5px;
-  position: relative;
-
-  .btn-group {
-    align-items: center;
-    display: flex;
-    float: right;
-    height: 33px;
-  }
-
-  .title {
-    font-size: 14px;
-  }
-
-  .dropdown-button {
-    cursor: pointer;
-    padding: 10px 5px;
-  }
-
-  .dropdown-menu {
-    left: auto;
-    padding: 0;
-    right: 0;
-    width: 402px;
-
-    .protocol {
-      cursor: pointer;
-      display: inline-block;
-      float: left;
-      padding: 5px 10px;
-      transition: $md-transaction;
-      width: 200px;
-
-      &:hover {
-        background: $color-gainsboro;
-      }
-
-      .fas {
-        margin-right: 5px;
-      }
-    }
-  }
-}
--- a/app/assets/stylesheets/my_modules/repositories.scss
+++ b/app/assets/stylesheets/my_modules/repositories.scss
@ -1,6 +1,27 @@
 // scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
 // scss-lint:disable NestingDepth ImportantRule

+@mixin my-module-repository-title {
+  @include font-h3;
+  line-height: 22px;
+  overflow: hidden;
+  padding-right: 55px;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::after {
+    color: $color-alto;
+    content: '[' attr(data-rows-count) ']';
+    display: inline-block;
+    line-height: 22px;
+    padding-left: 5px;
+    position: absolute;
+    right: 0;
+    width: 55px;
+  }
+}
+
 .my-module-inventories {

  .main-actions {
@ -74,3 +95,434 @@
    }
  }
 }
+
+#assigned-items-container {
+  padding-top: 10px;
+
+  .assigned-repository {
+    border: $border-default;
+    border-radius: $border-radius-modal;
+    margin-bottom: 10px;
+    overflow: hidden;
+
+    .assigned-repository-caret {
+      align-items: center;
+      color: inherit;
+      display: flex;
+      height: 52px;
+      padding: 0 18px;
+      text-decoration: none;
+
+      &.collapsed:hover,
+      &.collapsed:active {
+        background: $color-concrete;
+        border-radius: 6px;
+        text-decoration: none;
+      }
+
+      &:not(.collapsed) .fa-caret-right {
+        @include rotate(90deg);
+      }
+
+      .fa-caret-right {
+        flex-shrink: 0;
+        margin-right: 10px;
+      }
+
+      .assigned-repository-title {
+        @include my-module-repository-title;
+      }
+
+      .action-buttons {
+        flex-grow: 1;
+        flex-shrink: 0;
+        text-align: right;
+
+        .full-screen:hover {
+          background: $color-alto;
+        }
+      }
+
+      .snapshot-tag {
+        background-color: $color-concrete;
+        color: $color-silver-chalice;
+        padding: .3em;
+      }
+    }
+
+    .assigned-repository-container {
+      .table.dataTable {
+        margin-top: 0 !important;
+
+        .row-name {
+          border-left: 0;
+        }
+      }
+
+      .pagination-row {
+        border-top: $border-default;
+        padding: 5px 10px;
+
+        .pagination {
+          display: inline-flex;
+        }
+
+        .dataTables_paginate {
+          height: 38px;
+        }
+      }
+    }
+  }
+}
+
+#myModuleRepositoryFullViewModal {
+  padding-left: 0 !important;
+  z-index: 1045;
+
+  .modal-dialog {
+    height: 100vh;
+    margin: 0;
+    width: 100vw;
+
+    .modal-content {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      display: grid;
+      grid-template-areas: 'header sidebar'
+                           'table sidebar';
+      grid-template-columns: minmax(50%, 100%) 0;
+      grid-template-rows: 55px calc(100% - 55px);
+      height: inherit;
+      transition: all $timing-function-sharp;
+
+      &.show-sidebar {
+        grid-template-columns: minmax(50%, 100%) minmax(250px, 400px);
+      }
+
+      .modal-header {
+        align-items: center;
+        display: flex;
+        grid-area: header;
+        height: 55px;
+        padding: 10px 24px;
+
+        .close {
+          flex-shrink: 0;
+          text-align: center;
+          width: 20px;
+        }
+
+        .header-container {
+          flex-grow: 1;
+          max-width: calc(100% - 20px);
+
+          .repository-name {
+            @include my-module-repository-title;
+            @include font-h2;
+          }
+
+          .breadcrumbs {
+            align-items: center;
+            color: $color-silver-chalice;
+            display: flex;
+            font-size: 10px;
+            height: 20px;
+            width: 90%;
+
+            .my-module,
+            .project,
+            .experiment {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .slash {
+              flex-basis: 20px;
+              text-align: center;
+            }
+          }
+        }
+      }
+
+      .modal-body {
+        grid-area: table;
+        padding: 0;
+      }
+    }
+  }
+
+  .dataTables_scrollBody {
+    flex-grow: 1;
+
+    tbody tr.selected {
+      background: $brand-warning-light;
+    }
+
+    .assigned-column {
+      position: relative;
+
+      .assign-counter-container {
+        border-radius: $border-radius-tag;
+        cursor: pointer;
+        line-height: 35px;
+        position: absolute;
+        text-align: center;
+        top: 1px;
+        width: calc(100% - 16px);
+
+        .assign-counter {
+          display: inline-block;
+          height: 100%;
+          width: 100%;
+
+          &.has-assigned {
+            color: $brand-primary;
+          }
+        }
+
+        &:hover {
+          background-color: $color-alto;
+        }
+
+        .dropdown-menu {
+          min-width: 320px;
+          padding: 8px;
+        }
+      }
+    }
+  }
+
+  .dataTables_scrollHead {
+    flex-shrink: 0;
+  }
+
+  .table-container {
+    height: 100%;
+    padding: 1em 1.5em 0;
+    width: 100%;
+
+    .dataTables_wrapper {
+      display: flex;
+      flex-direction: column;
+      height: inherit;
+
+      .dataTables_scroll {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-height: 100%;
+        overflow: auto;
+      }
+
+      // Checklists
+      .checklist-dropdown {
+        .dropdown-menu {
+          min-width: 220px;
+
+          .checklist-item {
+            line-height: 18px;
+            padding: 5px 15px;
+          }
+        }
+
+        span {
+          color: $brand-primary;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .main-actions {
+      flex-shrink: 0;
+      margin-bottom: 10px;
+    }
+
+    .pagination-row {
+      border-top: $border-default;
+      flex-shrink: 0;
+      margin-left: -1.5em;
+      padding: 1em 1.5em;
+      width: calc(100% + 3em);
+    }
+
+  }
+
+  .repository-versions-sidebar {
+    background-color: $color-concrete;
+    grid-area: sidebar;
+    overflow: hidden;
+
+    .sidebar-collapse-button {
+      color: $color-volcano;
+      text-decoration: none;
+    }
+
+    .repository-versions-header {
+      border-bottom: 1px solid $color-alto;
+      height: 55px;
+      padding: 0 1em;
+
+      h4 {
+        line-height: 55px;
+        margin: 0;
+      }
+    }
+
+    .repository-versions-list {
+      display: grid;
+      grid-template-rows: min-content min-content minmax(0, 100%);
+      grid-auto-rows: min-content;
+      height: calc(100% - 55px);
+      margin-bottom: 0;
+
+      .repository-snapshots-container {
+        overflow: auto;
+        position: relative;
+      }
+    }
+
+    .list-group-item {
+      align-items: center;
+      background-color: $color-concrete;
+      border: 0;
+      border-radius: 0;
+
+
+      .list-group-item-text {
+        @include font-small;
+        color: $color-silver-chalice;
+      }
+
+      .version-button {
+        color: $color-volcano;
+        text-decoration: none;
+      }
+
+      .delete-snapshot-button {
+        display: none;
+      }
+
+      &.disabled {
+        color: $color-alto;
+
+        &:hover {
+          background-color: $color-concrete;
+        }
+      }
+
+      &.repository-snapshot-item:hover,
+      &.live-version-item:hover {
+        background-color: $color-alto;
+
+        .delete-snapshot-button {
+          display: block;
+        }
+      }
+
+      &.active {
+        background-color: $brand-primary;
+
+        &:hover {
+          background-color: $brand-primary;
+        }
+
+        .list-group-item-heading,
+        .list-group-item-text,
+        .delete-snapshot-button {
+          background: transparent;
+          color: $color-white;
+
+          &:hover {
+            border-color: $color-white;
+          }
+        }
+      }
+    }
+
+    .repository-snapshot-item:not(.provisioning){
+      cursor: pointer;
+    }
+
+    .create-snapshot-item {
+      border-bottom: 1px solid $color-alto;
+      padding: 12px 10px;
+    }
+  }
+}
+
+.update-repository-record-modal {
+  .rows-list-container {
+    display: flex;
+    margin: 0 -10px;
+
+    .header {
+      font-weight: bold;
+
+      .fas {
+        margin-right: 3px;
+      }
+    }
+
+    .rows-list {
+      background: $color-concrete;
+      height: 170px;
+      list-style: none;
+      overflow: hidden;
+      padding-left: 16px;
+      position: relative;
+
+      li {
+        margin: 6px 0;
+      }
+    }
+
+    .rows-to-assign,
+    .rows-to-unassign {
+      flex-grow: 1;
+      margin: 0 10px;
+    }
+
+    .rows-to-assign .header .fas {
+      color: $brand-success;
+    }
+
+    .rows-to-unassign .header .fas {
+      color: $brand-danger;
+    }
+
+  }
+}
+
+
+@media (max-width: 700px) {
+  #myModuleRepositoryFullViewModal {
+    .modal-dialog {
+      .modal-content {
+        grid-template-areas: 'header'
+                             'table'
+                             'sidebar';
+        grid-template-columns: 100%;
+        grid-template-rows: 55px calc(100% - 55px) 0;
+
+        &.show-sidebar {
+          grid-template-columns: 100%;
+          grid-template-rows: 55px 0 calc(100% - 55px);
+
+          .modal-body {
+            overflow: hidden;
+          }
+        }
+      }
+    }
+
+    .sidebar-collapse-button {
+      transform: rotateZ(90deg);
+    }
+  }
+}
--- a/app/assets/stylesheets/my_modules/results/index.scss
+++ b/app/assets/stylesheets/my_modules/results/index.scss
@ -7,15 +7,14 @@
@import "mixins";

 #results-toolbar {
-  .help_tooltips {
+  .add-result-toolbar {
    align-items: center;
    display: flex;
+    flex-wrap: wrap;
+  }

-    .add-result-text {
-      display: inline-block;
-      line-height: 36px;
-      margin-bottom: 5px;
-      margin-right: 5px;
-    }
+  .add-result-text {
+    display: inline-block;
+    margin-right: 5px;
  }
 }
--- a/app/assets/stylesheets/partials/_sidebar.scss
+++ b/app/assets/stylesheets/partials/_sidebar.scss
@ -24,7 +24,6 @@
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    bottom: 50%;
-    box-shadow: $flyout-shadow;
    display: block;
    position: absolute;
    right: -18px;
@ -67,10 +66,6 @@
        opacity: 1;
      }

-      .fa-caret-right {
-        padding: 3px 5px;
-      }
-
      .tree {
        margin-bottom: 0;
        opacity: 1;
--- a/app/assets/stylesheets/partials/_tree_view.scss
+++ b/app/assets/stylesheets/partials/_tree_view.scss
@ -1,116 +1,119 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
@import "constants";
@import "mixins";

 .tree {
-  height: 100%;
+  height: calc(100% - 30px);
  padding-bottom: 30px;

-  ul {
+  .sidebar-root {
    padding-left: 0;
  }

-  > ul {
-    margin-bottom: 0;
-  }
-
-  .first-indent {
-    margin-left: 30px;
-  }
-
-  .second-indent {
-    margin-left: 60px;
-  }
-
-  li {
+  .branch,
+  .leaf {
    list-style-type: none;
    margin: 0;
    position: relative;

-    span {
-      display: block;
-      padding: 15px;
+    .tree-link {
+      align-items: center;
+      display: flex;
+      height: 50px;
+      position: relative;

-      &.my-module-group-element {
-        border: 0;
-        padding: 0;
+      .btn-secondary {
+        background: transparent;
+        margin-left: 20px;
      }

-      &.fa-map-marker-alt {
-        border: 0;
+      .tree-toggle {
+        cursor: pointer;
        display: inline-block;
-        padding: 0;
+        line-height: 30px;
+        position: absolute;
+        text-align: center;
+        top: 10px;
+        width: 30px;
+        z-index: 2;
+      }
+
+      .line-wrap {
+        animation-timing-function: $timing-function-sharp;
+        color: $color-volcano;
+        flex-grow: 1;
+        height: 100%;
+        line-height: 50px;
+        padding: 0 10px 0 30px;
+        transition: .2s;
+
+        &.disabled {
+          color: $brand-primary;
+          pointer-events: none;
+        }
+      }
+
+      .canvas-center-on {
+        animation-timing-function: $timing-function-sharp;
+        color: $color-volcano;
+        display: none;
+        flex-basis: 36px;
+        flex-shrink: 0;
+        line-height: 50px;
+        padding-right: 16px;
+        text-align: center;
+        transition: .2s;
+      }
+
+      &.active {
+        .line-wrap {
+          font-weight: bold;
+        }
+      }
+
+      &:hover {
+        .line-wrap {
+          background-color: $color-alto;
+          text-decoration: none;
+        }
+
+        .canvas-center-on {
+          background-color: $color-alto;
+        }
      }
    }

-    &.active > span {
+    &.active > .tree-link {
      background-color: $color-white;
      color: $brand-primary;
      font-weight: bold;

-      &.first-indent > span,
-      &.no-indent > span {
-        border: 0;
-        display: inline-block;
-        padding: 0;
-        width: 100%;
+      .line-wrap {
+        background-color: $color-white;
+        color: $brand-primary;
+        text-decoration: none;
      }
-    }

-    i.no-arrow {
-      padding-left: 15px;
-    }
-
-    i.fas {
-      cursor: pointer;
-      font-size: 9pt;
-
-      &.expanded {
-        @include rotate(90deg);
-      }
-    }
-
-    // Links are recolored
-    a {
-      color: $color-volcano;
-      position: relative;
-
-      &.disabled {
+      .canvas-center-on {
+        background-color: $color-white;
        color: $brand-primary;
      }
+    }

-      &:hover {
-        color: $color-volcano;
+    &.show-canvas-handler {
+      .canvas-center-on {
+        display: inline-block;
      }
    }
  }

-  .tree-link {
-    display: flex;
-
-    a:not(.canvas-center-on) {
-      width: 100%;
-    }
-
-    a:not(.canvas-center-on)::after {
-      height: 48px;
-      left: -3px;
-      position: absolute;
-      top: -18px;
-      width: 100%;
-    }
-  }
-
-  #settings {
-    .fa-caret-right {
-      margin-left: -15px;
-    }
-
-    .no-indent {
-      padding-left: 30px;
-    }
-
-    .first-indent {
-      padding-left: 15px;
+  .leaf {
+    .tree-link {
+      .line-wrap {
+        padding-left: 10px;
+      }
    }
  }
 }
@ -120,7 +123,8 @@

  .fas-custom {
    float: right;
-    top: 2px;
+    margin-right: 15px;
+    top: 17px;
  }

  .active {
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/app/assets/stylesheets/protocols/protocol.scss
@ -70,7 +70,7 @@
      .key-words-container {
        display: inline-block;
        flex-grow: 1;
-        margin-left: 5px;
+        margin: 0 40px 0 5px;

        .dropdown-selector-container {
          .input-field {
--- a/app/assets/stylesheets/reports.scss
+++ b/app/assets/stylesheets/reports.scss
@ -211,6 +211,7 @@ label {
    .user-time {
      color: $color-emperor;
      margin-left: 15px;
+      white-space: nowrap;
    }
    .controls {
      margin-right: 15px;
@ -276,6 +277,12 @@ label {
      margin-left: 15px;
    }

+    .module-start-date,
+    .module-due-date {
+      margin-left: 5px;
+      white-space: nowrap;
+    }
+
    .module-tags {
      margin-left: 0;
      margin-top: 10px;
@ -328,6 +335,7 @@ label {

    .user-time {
      display: inline-block;
+      white-space: nowrap;
    }
  }

--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@ -62,6 +62,7 @@
        align-items: center;
        display: inline-flex;
        height: 32px;
+        margin: 0;

        .read-only-name {
          display: inline-block;
@ -85,7 +86,12 @@
    }

    .repo-datatables-buttons {
+      display: flex;
      flex-shrink: 0;
+
+      .manage-repo-column-index {
+        margin-left: 4px;
+      }
    }
  }

@ -110,6 +116,10 @@
        float: right;
      }
    }
+
+    .repository-provisioning-notice {
+      color: $brand-info;
+    }
  }

  .dataTables_scroll {
@ -181,29 +191,6 @@
  }
 }

-.repositories-dropdown-menu {
-  border: 1px solid $color-gainsboro;
-  border-top: 0;
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
-  height: auto;
-  max-height: 400px;
-  overflow-x: hidden;
-  text-transform: initial;
-  width: 300px;
-
-  li:not(:first-child) {
-    border-top: 1px solid $color-gainsboro;
-  }
-
-  .fas-custom {
-    float: right;
-  }
-
-  a.muted {
-    opacity: .7;
-  }
-}
-
 .repository-share-status {
  display: contents !important;

@ -238,10 +225,12 @@
  }

  .image-icon {
+    height: 18px;
    width: 18px;
  }

  .file-preview-link {
+    display: inline-block;
    min-width: 140px;
    padding-left: 5px;
  }
@ -250,6 +239,32 @@
 .file-editing {
  width: 200px;

+  input[type=file] {
+    display: none;
+  }
+
+  label {
+    cursor: pointer;
+    flex-grow: 1;
+    font-weight: normal;
+    height: 100%;
+    margin-bottom: 0;
+    margin-right: 5px;
+    overflow: hidden;
+    padding-left: 34px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 2;
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      margin-left: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
  .file-upload-button {
    align-items: center;
    background-color: $color-white;
@ -266,35 +281,28 @@
        display: none;
      }

-      label {
-        color: $color-silver-chalice;
-        cursor: pointer;
-        display: inline-block;
-        margin-bottom: 0;
-        white-space: nowrap;
-      }
-
      &:hover {
        .fa-trash {
          display: none;
        }
      }
+
+      label {
+        color: $color-silver-chalice;
+        padding-left: 0;
+      }
    }

    .icon {
      display: inline-block;
+      left: 0;
+      line-height: 32px;
+      position: absolute;
      text-align: center;
+      top: 0;
      width: 34px;
    }

-    .label-asset {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: calc(100% - 44px);
-    }
-
    .fa-trash {
      background-color: $color-white;
      cursor: pointer;
@ -344,21 +352,9 @@
      }
    }
  }
-
-
-
-  input[type=file] {
-    display: none;
-  }
-
-  label {
-    display: none;
-    font-weight: normal;
-    margin-left: 10px;
-  }
 }

-.toolbarButtonsDatatable {
+#toolbarButtonsDatatable {
  .view-only-label {
    opacity: .6;
  }
@ -366,6 +362,7 @@

 .sidebar-button {
  color: $brand-primary !important;
+  margin-left: 30px;

  span {
    display: inline-block !important;
--- a/app/assets/stylesheets/repository/repository_table.scss
+++ b/app/assets/stylesheets/repository/repository_table.scss
@ -6,15 +6,6 @@
 .repository-table {
  margin-top: 20px;

-  &.editing {
-    tbody>tr {
-      &:not(.editing) {
-        opacity: .4;
-        pointer-events: none;
-      }
-    }
-  }
-
  .dataTables_filter {
    float: right;
  }
@ -34,31 +25,39 @@
  // Assigned

  .assigned-column {
+    padding: 1px 8px;
    position: relative;

+    .fas {
+      line-height: 35px;
+      text-align: center;
+      width: 30px;
+    }
+
    .repository-row-edit-icon {
      cursor: pointer;
      display: none;
-      width: 30px;
-    }
-
-    .repository-row-lock-icon {
-      width: 30px;
    }

    .assign-counter-container {
      border-radius: $border-radius-tag;
-      cursor: pointer;
      display: inline-block;
-      height: calc(100% - 2px);
-      margin-left: 30px;
-      padding-top: 7px;
+      line-height: 35px;
      position: absolute;
-      top: 1px;
-      width: calc(100% - 38px);
+      right: 0;
+      width: calc(100% - 40px);

      .assign-counter {
-        margin-left: 5px;
+        display: inline-block;
+        height: 100%;
+        padding-left: 5px;
+        width: 100%;
+
+        &:hover,
+        &:visited,
+        &:focus {
+          text-decoration: none;
+        }

        &.has-assigned {
          color: $brand-primary;
@ -68,10 +67,23 @@
      &:hover {
        background-color: $color-alto;
      }
+
+      .dropdown-menu {
+        padding: 8px;
+        width: 320px;
+
+        .search-tasks:placeholder-shown + .fa-times-circle {
+          display: none;
+        }
+
+        .fa-times-circle {
+          cursor: pointer;
+        }
+      }
    }

    .circle-icon {
-      margin-left: 30px;
+      margin: 9px 30px;
    }
  }

@ -208,34 +220,31 @@
        .repository-row-edit-icon {
          display: inline-block;
        }
-
-        .assign-counter-container,
-        .circle-icon {
-          margin-left: 0;
-        }
      }
    }

    .editing {
      border: 1px solid;
    }
-
-    tr[data-editable=false] {
-      .assign-counter-container {
-        margin-left: 0;
-      }
-    }
  }

  &.editing {
    tbody {
+      tr.blocked {
+        opacity: .4;
+        pointer-events: none;
+      }
+
      tr:hover {
        .assigned-column {
          .repository-row-edit-icon {
            display: none;
          }

-          .assign-counter-container,
+          .assign-counter-container {
+            background-color: transparent;
+          }
+
          .circle-icon {
            margin-left: 30px;
          }
--- a/app/assets/stylesheets/settings/connected_accounts.scss
+++ b/app/assets/stylesheets/settings/connected_accounts.scss
@ -0,0 +1,36 @@
+.connected-account {
+  border: $border-default;
+  border-radius: $border-radius-default;
+  display: flex;
+  padding: 16px;
+
+  .left-block {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+
+    .title {
+      @include font-h3;
+    }
+
+    .description {
+      flex-basis: 100%;
+      margin-top: 7px;
+    }
+
+    .status {
+      color: $brand-success;
+      margin-left: 8px;
+    }
+  }
+
+  .right-block {
+    align-items: flex-end;
+    display: flex;
+    flex-basis: 150px;
+    flex-direction: column;
+    flex-shrink: 0;
+    justify-content: flex-end;
+  }
+}
--- a/app/assets/stylesheets/settings/teams.scss
+++ b/app/assets/stylesheets/settings/teams.scss
@ -6,7 +6,9 @@

 .team-settings-pane {
  .settings-team-name {
+    line-height: 32px;
    margin-bottom: 10px;
+    margin-top: 0;

    .inline-editing-container {
      .view-mode {
@ -60,7 +62,6 @@
      float: left;
      min-height: 100px;
      padding: 2px 4px;
-      white-space: pre;
      width: 100%;

      &.disable-select {
--- a/app/assets/stylesheets/shared/avatar.scss
+++ b/app/assets/stylesheets/shared/avatar.scss
@ -20,6 +20,14 @@
  }
 }

+.task-assigned-users .global-avatar-container {
+  margin: 2px;
+
+  img {
+    vertical-align: baseline;
+  }
+}
+
 .new-avatar-preview-container {
  height: 200px;
  margin-bottom: 45px;
--- a/app/assets/stylesheets/shared/comments.scss
+++ b/app/assets/stylesheets/shared/comments.scss
@ -39,6 +39,7 @@
      }

      .comment-message {
+        @include font-main;
        float: left;
        width: 100%;

@ -218,6 +219,7 @@

    textarea {
      border: 1px solid transparent;
+      border-radius: $border-radius-default;
      box-shadow: none;
      outline: none;
      overflow: hidden;
@ -246,7 +248,7 @@
      padding: 4px;
      position: absolute;
      right: -36px;
-      text-align: center; 
+      text-align: center;
      top: 0;
      transition: $md-transaction;
      width: 26px;
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@ -0,0 +1,62 @@
+// scss-lint:disable SelectorDepth SelectorFormat
+// scss-lint:disable NestingDepth QualifyingElement
+
+.dataTables_wrapper {
+
+  .main-actions {
+    display: flex;
+    flex-wrap: wrap;
+
+    .toolbar {
+      flex-grow: 1;
+    }
+  }
+
+  .pagination-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 68px;
+    width: 100%;
+
+    .pagination-info,
+    .pagination-actions {
+      flex-grow: 1;
+    }
+
+    .pagination-info {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+
+      .dataTables_info {
+        padding-top: 0;
+      }
+
+      @media (max-width: 1000px) {
+        .dataTables_info {
+          display: none;
+        }
+      }
+
+      .dataTables_length {
+        margin-right: 24px;
+        width: 170px;
+
+        .dropdown-selector-container {
+          width: inherit;
+        }
+
+        label {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    @media (max-width: 767px) {
+      .pagination-info {
+        display: none;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/shared/dropdown_selector.scss
+++ b/app/assets/stylesheets/shared/dropdown_selector.scss
@ -18,31 +18,36 @@
    flex-wrap: wrap;
    min-height: 36px;
    overflow: hidden;
-    padding: 3px 36px 3px 3px;
+    padding: 3px 42px 3px 3px;
    position: relative;
    transition: .2s;
    width: 100%;

-    .fa-caret-down {
+    .right-icon {
      color: $color-silver-chalice;
      cursor: pointer;
-      font-size: 20px;
      line-height: 18px;
      position: absolute;
-      right: 8px;
+      right: 12px;
      text-align: center;
      top: 8px;
      width: 18px;
+
+      &.fa-search {
+        color: $brand-focus;
+        display: none;
+      }
    }

    .search-field {
+      @include font-button;
      border: 0;
      flex-basis: 0;
      flex-grow: 2000;
-      line-height: 24px;
+      line-height: 28px;
      min-width: 0;
      outline: 0;
-      padding-left: 5px;
+      padding: 0 0 0 5px;

      &::placeholder {
        opacity: .7;
@ -84,19 +89,23 @@

      .tag-label {
        display: inline-block;
-        margin-bottom: 1px;
        margin-right: 5px;
+        margin-top: 1px;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: auto;
+
+        &[data-ds-tag-id=""] {
+          opacity: .7;
+        }
      }

      .fas {
        cursor: pointer;
        flex-grow: 1;
-        font-size: 13px;
+        font-size: 12px;
        opacity: .7;
        text-align: right;
      }
@ -104,18 +113,19 @@
  }

  .dropdown-container {
+    @include font-button;
    background: $color-white;
    border: 1px solid $color-alto;
    border-radius: 0 0 4px 4px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.08);
+    bottom: calc(100% - 30px);
+    box-shadow: $flyout-shadow;
    display: none;
    overflow: hidden;
    position: fixed;
-    bottom: calc(100% - 30px);
    transition: .2s;
    transition-property: top, bottom, box-shadow;
    width: 100%;
-    z-index: 10;
+    z-index: 100;

    .empty-dropdown {
      opacity: .6;
@ -145,24 +155,6 @@
      z-index: 5;
    }

-    .checkbox-icon {
-      &::before {
-        content: "\f0c8";
-        font-family: $font-family-icons;
-        font-size: 16px;
-        font-weight: 400;
-        margin: 0 8px 0 0;
-        position: relative;
-      }
-
-      &.select {
-
-        &::before {
-          content: "\f14a";
-        }
-      }
-    }
-
    .dropdown-option {
      align-items: center;
      cursor: pointer;
@ -172,16 +164,54 @@
      position: relative;
      user-select: none;

-      &.select {
+      &.highlight,
+      &:hover {
        background: $color-concrete;
      }

-      &.highlight,
-      &:hover {
-        background: $brand-primary-light;
+      &[data-value=""] {
+        opacity: .7;
      }

+      &.select {
+        background: $brand-primary;
+        color: $color-white;
+        opacity: 1;
+      }
+    }

+    .checkbox-icon {
+      &::before {
+        @include font-awesome;
+        animation-timing-function: $timing-function-sharp;
+        background: $color-white;
+        border: $border-default;
+        border-radius: 1px;
+        color: $color-white;
+        content: "";
+        font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * .375);
+        height: var(--sci-checkbox-size);
+        line-height: calc(var(--sci-checkbox-size) - 2px);
+        margin-right: 8px;
+        text-align: center;
+        transition: .2s;
+        width: var(--sci-checkbox-size);
+      }
+
+      &.select {
+        background: $color-white;
+        color: inherit;
+
+        &:hover {
+          background: $color-concrete;
+        }
+
+        &::before {
+          background: $brand-primary;
+          border: 1px solid $brand-primary;
+          content: $font-fas-check;
+        }
+      }
    }

    .dropdown-group {
@ -234,12 +264,12 @@
      display: block;

      .search-field {
-        bottom: 3px;
+        background: transparent;
        display: none;
-        position: absolute;

        &[data-options-selected="0"] {
          display: block;
+          width: 100%;
        }
      }

@ -248,6 +278,10 @@
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
+
+          &[data-ds-tag-id=""] {
+            opacity: .7;
+          }
        }

        .fa-times {
@ -275,7 +309,7 @@
    .dropdown-container {
      border-top: 0;
      bottom: auto;
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: $flyout-shadow;
      display: block;
      top: 100%;
    }
@ -298,19 +332,28 @@
    }

    &.simple-mode:not(.disable-search) {
+      .input-field {
+        background: $color-concrete;
+        border-color: $brand-focus;
+      }
+
      .search-field {
        display: block;
-        line-height: 14px;
-
-        &[data-options-selected="0"] {
-          line-height: 24px;
-        }
+        width: 100%;
      }

      .ds-simple {
-        font-size: 12px;
-        line-height: 14px;
-        opacity: .6;
+        display: none;
+      }
+
+      .right-icon {
+        &.fa-search {
+          display: inline;
+        }
+
+        &.fa-caret-down {
+          display: none;
+        }
      }
    }
  }
--- a/app/assets/stylesheets/shared/my_modules_list_partial.scss
+++ b/app/assets/stylesheets/shared/my_modules_list_partial.scss
@ -0,0 +1,95 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.my-modules-list-partial {
+  width: 100%;
+
+  .task-group:not(:first-child) {
+    border-top: $border-tertiary;
+  }
+
+  .header {
+    @include font-small;
+    align-items: center;
+    color: $color-silver-chalice;
+    display: flex;
+    height: 20px;
+    margin-top: 5px;
+    width: 100%;
+
+    .project,
+    .experiment {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .slash {
+      flex-basis: 20px;
+      text-align: center;
+    }
+  }
+
+  .tasks {
+    @include font-button;
+    margin-bottom: 5px;
+
+    .task {
+      align-items: center;
+      display: flex;
+      line-height: 25px;
+
+      .task-icon {
+        flex-shrink: 0;
+        margin-right: 9px;
+
+        path {
+          fill: $brand-primary;
+        }
+      }
+
+      .task-link {
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .private-tasks-counter {
+    @include font-button;
+    border-top: $border-tertiary;
+    color: $color-silver-chalice;
+    padding-top: .5em;
+  }
+
+  .no-results-placeholder {
+    color: $color-silver-chalice;
+    padding: 2em 0 4em;
+    text-align: center;
+
+    .fa-stack {
+      @include font-h1;
+
+      .fas {
+        line-height: inherit;
+        width: 100%;
+      }
+    }
+
+    .title {
+      margin: .5em 0 0;
+    }
+  }
+
+  .archived {
+    @include font-small;
+    background: $brand-warning;
+    border-radius: $border-radius-tag;
+    color: $color-white;
+    line-height: 14px;
+    margin-right: 3px;
+    padding: 2px 3px;
+  }
+}
--- a/app/assets/stylesheets/shared_styles/constants.scss
+++ b/app/assets/stylesheets/shared_styles/constants.scss
@ -0,0 +1 @@
+@import "constants/*";
--- a/app/assets/stylesheets/shared_styles/constants/borders.scss
+++ b/app/assets/stylesheets/shared_styles/constants/borders.scss
@ -8,6 +8,8 @@ $border-default: 1px solid $color-alto;
 $border-secondary: 1px solid $color-silver-chalice;
 $border-tertiary: 1px solid $color-concrete;

+$border-primary: 1px solid $brand-primary;
 $border-focus: 1px solid $brand-focus;
+$border-success: 1px solid $brand-success;
 $border-danger: 1px solid $brand-danger;
 $border-transparent: 1px solid transparent;
--- a/app/assets/stylesheets/shared_styles/constants/colors.scss
+++ b/app/assets/stylesheets/shared_styles/constants/colors.scss
@ -45,7 +45,7 @@ $color-alabaster: $color-concrete;
 $color-gainsboro: $color-concrete;
 $color-silver: $color-alto;
 $color-dove-gray: $color-volcano;
-$color-emperor: $color-volcano;
+$color-emperor: $color-black;
 $brand-default: $color-white;
 $brand-info: $brand-focus;
 $brand-other: $brand-success;
--- a/app/assets/stylesheets/shared_styles/elements/alerts.scss
+++ b/app/assets/stylesheets/shared_styles/elements/alerts.scss
@ -5,29 +5,52 @@
  width: 100%;
 }

-.alert-floating {
-  align-items: center;
-  display: flex;
-  height: 52px;
-  padding: 9px;
+#notifications {
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1100;

-  .fas {
-    font-size: $font-size-h2;
-    margin-left: 12px;
-  }
+  .alert-floating {
+    align-items: center;
+    display: flex;
+    height: 52px;
+    opacity: 1;
+    padding: 9px;

-  .message {
-    color: $color-volcano;
-    flex-grow: 1;
-    margin-left: 14px;
-  }
+    .fas {
+      font-size: $font-size-h2;
+      margin-left: 12px;
+    }

-  .close {
-    top: 0;
+    .message {
+      color: $color-volcano;
+      flex-grow: 1;
+      margin-left: 14px;
+    }
+
+    .close {
+      opacity: .3;
+      right: 10px;
+      top: 0;
+    }
  }
 }

-.alert:not(.alert-floating) {
+.inline-alert {
+  align-items: center;
+  display: flex;
+  padding: 9px 24px;
+
+  .alert-icon {
+    font-size: 18px;
+    margin-right: 16px;
+  }
+}
+
+.alert:not(.alert-floating),
+.inline-alert {
  color: $color-volcano;

  &.alert-danger .fas {
--- a/app/assets/stylesheets/shared_styles/elements/buttons.scss
+++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss
@ -6,6 +6,7 @@
  border-radius: $border-radius-default;
  cursor: pointer;
  display: inline-block;
+  height: 36px;
  line-height: 20px;
  outline: 0;
  padding: 7px 16px;
@ -24,7 +25,9 @@
    text-decoration: none;
  }

-  &:active {
+  &:active,
+  &.active {
+    box-shadow: none;
    text-decoration: none;
  }

@ -43,7 +46,8 @@
      color: $color-white;
    }

-    &:active {
+    &:active,
+    &.active {
      background: $brand-primary-press;
      color: $color-white;
    }
@ -57,46 +61,48 @@
  &.btn-secondary {
    background: $color-white;
    border: $border-default;
-    color: $color-black;
+    color: $color-volcano;

    &:hover {
      background: $color-concrete;
      border: $border-secondary;
-      color: $color-black;
+      color: $color-volcano;
    }

-    &:active {
+    &:active,
+    &.active {
      background: $color-alto;
      border: $border-secondary;
-      color: $color-black;
+      color: $color-volcano;
    }

    &:focus {
      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-black;
+      color: $color-volcano;
    }
  }

  &.btn-light {
    background: transparent;
    border: $border-transparent;
-    color: $color-black;
+    color: $color-volcano;

    &:hover {
      background: $color-concrete;
      border: $border-transparent;
-      color: $color-black;
+      color: $color-volcano;
    }

-    &:active {
+    &:active,
+    &.active {
      background: $color-alto;
      border: $border-transparent;
-      color: $color-black;
+      color: $color-volcano;
    }

    &:focus {
      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-black;
+      color: $color-volcano;
    }
  }

@ -110,7 +116,8 @@
      color: $color-white;
    }

-    &:active {
+    &:active,
+    &.active {
      background: $brand-danger-press;
      color: $color-white;
    }
--- a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
+++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
@ -72,10 +72,14 @@ input[type="checkbox"].sci-checkbox {
    }
  }

-  &:disabled + .sci-checkbox-label {
-    &::before {
-      background: $color-alto;
-      border: $border-tertiary;
+  &:disabled {
+    cursor: default;
+
+    + .sci-checkbox-label {
+      &::before {
+        background: $color-alto;
+        border: $border-tertiary;
+      }
    }
  }
 }
--- a/app/assets/stylesheets/shared_styles/elements/dropdown.scss
+++ b/app/assets/stylesheets/shared_styles/elements/dropdown.scss
@ -0,0 +1,32 @@
+.sci-dropdown {
+  [data-toggle="dropdown"] {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &.open {
+    [data-toggle="dropdown"] {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-color: $brand-focus;
+
+      .caret {
+        transform: rotateX(180deg)
+      }
+    }
+
+    .dropdown-menu {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      box-shadow: $flyout-shadow;
+      margin-top: -1px;
+      width: 100%;
+
+      li:hover {
+        background: $color-concrete;
+      }
+    }
+  }
+
+}
--- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss
+++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss
@ -3,6 +3,7 @@
 .sci-input-container {
  display: inline-block;
  position: relative;
+  width: 100%;

  label {
    @include font-small;
@ -14,8 +15,8 @@
  .sci-input-field {
    @include font-button;
    animation-timing-function: $timing-function-sharp;
-    border: $border-default;
-    border-radius: $border-radius-default;
+    border: $border-secondary;
+    border-radius: $border-radius-default !important;
    box-shadow: none;
    height: 36px;
    outline: 0;
@ -30,6 +31,10 @@
    &:disabled {
      background: transparent;
    }
+
+    &::placeholder {
+      color: $color-alto;
+    }
  }

  .fas {
--- a/app/assets/stylesheets/shared_styles/elements/navigation.scss
+++ b/app/assets/stylesheets/shared_styles/elements/navigation.scss
@ -0,0 +1,38 @@
+.sci-secondary-navbar {
+  display: flex;
+  height: 100%;
+  overflow-x: auto;
+
+  .navbar-link {
+    @include font-small;
+    align-items: center;
+    color: $color-silver-chalice;
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    padding: 0 16px;
+    position: relative;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    &:hover {
+      color: $color-volcano;
+    }
+
+    &.active {
+      color: $color-volcano;
+      font-weight: bold;
+
+      &::before {
+        background: $brand-primary;
+        bottom: 0;
+        content: "";
+        height: 4px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/sign_up.scss
+++ b/app/assets/stylesheets/sign_up.scss
@ -0,0 +1,61 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.sign-up-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .sign-up-container {
+    display: flex;
+
+    .sign-up-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .sign-up-title {
+        margin-bottom: 24px;
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+
+        .minimum-password-length {
+          @include font-small;
+        }
+      }
+
+      .sign-up-button {
+        padding: 7px 32px;
+      }
+
+      .linkedin-container {
+        margin-bottom: 24px;
+
+        .linkedin-link {
+          margin-right: 15px;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        .linkedin-signin-button {
+          margin: 0;
+        }
+
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/sing_in.scss
+++ b/app/assets/stylesheets/sing_in.scss
@ -0,0 +1,73 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.sign-in-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .sign-in-container {
+    display: flex;
+
+    .sign-in-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .log-in-title {
+        margin-bottom: 24px;
+      }
+
+      .remember-me {
+        align-items: center;
+        display: flex;
+        margin-bottom: 24px;
+
+        label {
+          margin-left: 8px;
+          margin-bottom: 0;
+        }
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+      }
+
+      .linkedin-container {
+        margin-bottom: 24px;
+
+        .linkedin-link {
+          margin-right: 15px;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        .linkedin-signin-button {
+          margin: 0;
+        }
+
+        span {
+          font-weight: bold;
+        }
+      }
+
+      .log-in-button {
+        padding: 7px 32px;
+      }
+
+      .forgot-password-link {
+        display: inline-block;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@ -44,15 +44,20 @@
    display: inline-block;
  }

-  .panel-heading {
+  .step-heading {
+    align-items: center;
    border: 0;
-    height: 46px;
+    display: flex;
+    min-height: 46px;
    padding-bottom: 0;
    padding-top: 0;

    .panel-options {
      bottom: 0;
+      flex-grow: 1;
+      flex-shrink: 0;
      line-height: 46px;
+      text-align: right;
    }

    span.step-number {
@ -65,7 +70,9 @@
    .left-floats {
      align-items: center;
      display: flex;
-      height: 100%;
+      max-width: 100%;
+      min-height: inherit;
+      overflow: hidden;
      padding-right: 15px;

      .step-name-link {
@ -299,9 +306,11 @@
 .attachments-actions {
  align-items: center;
  display: flex;
+  flex-wrap: wrap;

  .title {
    flex-grow: 1;
+    flex-shrink: 0;
  }

  .attachments-order {
@ -327,3 +336,7 @@
 .comments-title {
  color: $color-emperor;
 }
+
+.expand-all-steps {
+  margin: 0 0 15px 15px;
+}
--- a/app/assets/stylesheets/themes/main_navigation.scss
+++ b/app/assets/stylesheets/themes/main_navigation.scss
@ -311,8 +311,10 @@

  .dropdown-menu {
    border-radius: 0;
+    height: auto;
    margin-top: 0;
    max-height: calc(100vh - 50px);
+    overflow: auto;
    padding-bottom: 0;
    padding-top: 0;
    width: 100%;
@ -367,23 +369,6 @@
  padding: 10px 0 10px 30px;
 }

-// Alert
-.alert {
-  &.alert-hidden {
-    display: none;
-  }
-
-  a#hide-alert {
-    margin-left: 15px;
-  }
-
-  &.alert-floating {
-    position: fixed;
-    top: 50px;
-    z-index: 1000;
-  }
-}
-
 #content-wrapper {
  margin-top: 50px;
  margin-left: 83px;
@ -460,31 +445,3 @@
    }
  }
 }
-
-.academy-link.flag {
-  background: $brand-academy;
-  border: 16px solid $brand-academy;
-  border-bottom: 10px solid $color-white;
-  display: inline-block;
-  height: 0;
-  margin: 0 6px 8px;
-  padding: 12px 0 0;
-  position: relative;
-  width: 0;
-
-  .icon-container {
-    align-items: center;
-    display: flex;
-    height: 28px;
-    justify-content: center;
-    left: -16px;
-    position: absolute;
-    top: -16px;
-    width: 32px;
-
-    .fas {
-      color: $color-white;
-      font-size: 16px;
-    }
-  }
-}
--- a/app/assets/stylesheets/themes/menu_bar.scss
+++ b/app/assets/stylesheets/themes/menu_bar.scss
@ -70,11 +70,27 @@
      bottom: 0;
      left: 99%;
      margin-bottom: 0;
+
+      & > li > a {
+        padding: 8px 20px;
+      }
    }

    &.open > a {
      color: $color-emperor;
    }
+
+    .about-scinote {
+      font-size: 12px;
+
+      .core-version {
+        color: $color-silver-chalice;
+      }
+    }
+  }
+
+  #support-link {
+    color: $brand-primary;
  }
 }

--- a/Show more
+++ b/Show more
 @ -1 +1 @@
 .18.1
 .19.0