Add move modal for storage locations [SCI-10863]

app/controllers/storage_locations_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class StorageLocationsController < ApplicationController
-  before_action :load_storage_location, only: %i(update destroy)
+  before_action :load_storage_location, only: %i(update destroy move)
   before_action :check_read_permissions, only: :index
   before_action :check_manage_permissions, except: :index
   before_action :set_breadcrumbs_items, only: :index
@@ -51,6 +51,30 @@ class StorageLocationsController < ApplicationController
     end
   end
 
+  def move
+    storage_location_destination =
+      if move_params[:destination_storage_location_id] == 'root_storage_location'
+        nil
+      else
+        current_team.storage_locations.find(move_params[:destination_storage_location_id])
+      end
+
+    @storage_location.update!(parent: storage_location_destination)
+
+    render json: { message: I18n.t('storage_locations.index.move_modal.success_flash') }
+  rescue StandardError => e
+    Rails.logger.error e.message
+    Rails.logger.error e.backtrace.join("\n")
+    render json: { error: I18n.t('storage_locations.index.move_modal.error_flash') }, status: :bad_request
+  end
+
+  def tree
+    records = StorageLocation.inner_storage_locations(current_team)
+                             .order(:name)
+                             .select(:id, :name, :parent_id, :container)
+    render json: storage_locations_recursive_builder(nil, records)
+  end
+
   def actions_toolbar
     render json: {
       actions:
@@ -68,8 +92,12 @@ class StorageLocationsController < ApplicationController
                   metadata: [:display_type, dimensions: [], parent_coordinations: []])
   end
 
+  def move_params
+    params.permit(:id, :destination_storage_location_id)
+  end
+
   def load_storage_location
-    @storage_location = StorageLocation.where(team: current_team).find(storage_location_params[:id])
+    @storage_location = current_team.storage_locations.find_by(id: storage_location_params[:id])
     render_404 unless @storage_location
   end
 
@@ -95,7 +123,7 @@ class StorageLocationsController < ApplicationController
 
     storage_locations = []
     if params[:parent_id]
-      location = StorageLocation.where(team: current_team).find_by(id: params[:parent_id])
+      location = current_team.storage_locations.find_by(id: params[:parent_id])
       if location
         storage_locations.unshift(breadcrumbs_item(location))
         while location.parent
@@ -113,4 +141,19 @@ class StorageLocationsController < ApplicationController
       url: storage_locations_path(parent_id: location.id)
     }
   end
+
+  def storage_locations_recursive_builder(storage_location, records)
+    children = records.select do |i|
+      defined?(i.parent_id) && i.parent_id == storage_location&.id
+    end
+
+    children.filter_map do |i|
+      next if i.container
+
+      {
+        storage_location: i,
+        children: storage_locations_recursive_builder(i, records)
+      }
+    end
+  end
 end

app/javascript/vue/storage_locations/modals/move.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block">
+              {{ i18n.t('storage_locations.index.move_modal.title', { name: this.selectedObject.name }) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-4">{{ i18n.t('storage_locations.index.move_modal.description', { name: this.selectedObject.name }) }}</div>
+            <div class="mb-4">
+              <div class="sci-input-container-v2 left-icon">
+                <input type="text"
+                       v-model="query"
+                       class="sci-input-field"
+                       ref="input"
+                       autofocus="true"
+                       :placeholder=" i18n.t('storage_locations.index.move_modal.placeholder.find_storage_locations')" />
+                <i class="sn-icon sn-icon-search"></i>
+              </div>
+            </div>
+            <div class="max-h-80 overflow-y-auto">
+              <div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
+                    @click="selectStorageLocation(null)"
+                   :class="{'!bg-sn-super-light-blue': selectedStorageLocationId == null}">
+                <i class="sn-icon sn-icon-projects"></i>
+                {{ i18n.t('storage_locations.index.move_modal.search_header') }}
+              </div>
+              <MoveTree :storageLocationTrees="filteredStorageLocationTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('general.move') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+/* global HelperModule */
+
+import axios from '../../../packs/custom_axios.js';
+import modalMixin from '../../shared/modal_mixin';
+import MoveTree from './move_tree.vue';
+
+export default {
+  name: 'NewProjectModal',
+  props: {
+    selectedObject: Array,
+    storageLocationTreeUrl: String,
+    moveToUrl: String
+  },
+  mixins: [modalMixin],
+  data() {
+    return {
+      selectedStorageLocationId: null,
+      storageLocationTree: [],
+      query: ''
+    };
+  },
+  components: {
+    MoveTree
+  },
+  mounted() {
+    axios.get(this.storageLocationTreeUrl).then((response) => {
+      this.storageLocationTree = response.data;
+    });
+  },
+  computed: {
+    filteredStorageLocationTree() {
+      if (this.query === '') {
+        return this.storageLocationTree;
+      }
+
+      return this.storageLocationTree.map((storageLocation) => (
+        {
+          storage_location: storageLocation.storage_location,
+          children: storageLocation.children.filter((child) => (
+            child.storage_location.name.toLowerCase().includes(this.query.toLowerCase())
+          ))
+        }
+      )).filter((storageLocation) => (
+        storageLocation.storage_location.name.toLowerCase().includes(this.query.toLowerCase())
+        || storageLocation.children.length > 0
+      ));
+    }
+  },
+  methods: {
+    selectStorageLocation(storageLocationId) {
+      this.selectedStorageLocationId = storageLocationId;
+    },
+    submit() {
+      axios.post(this.moveToUrl, {
+        destination_storage_location_id: this.selectedStorageLocationId || 'root_storage_location'
+      }).then((response) => {
+        this.$emit('move');
+        HelperModule.flashAlertMsg(response.data.message, 'success');
+      }).catch((error) => {
+        HelperModule.flashAlertMsg(error.response.data.error, 'danger');
+      });
+    }
+  }
+};
+</script>

app/javascript/vue/storage_locations/modals/move_tree.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="pl-6" v-if="storageLocationTrees.length" v-for="storageLocationTree in storageLocationTrees"
+       :key="storageLocationTree.storage_location.id">
+    <div class="flex items-center">
+      <i v-if="storageLocationTree.children.length > 0"
+         :class="{'sn-icon-up': opendedStorageLocations[storageLocationTree.storage_location.id],
+                  'sn-icon-down': !opendedStorageLocations[storageLocationTree.storage_location.id]}"
+         @click="opendedStorageLocations[storageLocationTree.storage_location.id] = !opendedStorageLocations[storageLocationTree.storage_location.id]"
+         class="sn-icon p-2 pr-1 cursor-pointer"></i>
+      <i v-else class="sn-icon sn-icon-up p-2 pr-1 opacity-0"></i>
+      <div @click="$emit('selectStorageLocation', storageLocationTree.storage_location.id)"
+           class="cursor-pointer flex items-center pl-1 flex-1 gap-2
+                text-sn-blue hover:bg-sn-super-light-grey"
+          :class="{'!bg-sn-super-light-blue': storageLocationTree.storage_location.id == value}">
+        <i class="sn-icon sn-icon-folder"></i>
+        <div class="flex-1 truncate p-2 pl-0" :title="storageLocationTree.storage_location.name">
+          {{ storageLocationTree.storage_location.name }}
+        </div>
+      </div>
+    </div>
+    <MoveTree v-if="opendedStorageLocations[storageLocationTree.storage_location.id]"
+              :storageLocationTrees="storageLocationTree.children"
+              :value="value"
+              @selectStorageLocation="$emit('selectStorageLocation', $event)" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MoveTree',
+  emits: ['selectStorageLocation'],
+  props: {
+    storageLocationTrees: Array,
+    value: Number
+  },
+  components: {
+    MoveTree: () => import('./move_tree.vue')
+  },
+  data() {
+    return {
+      opendedStorageLocations: {}
+    };
+  }
+};
+</script>

app/javascript/vue/storage_locations/table.vue

@@ -10,6 +10,7 @@
                @create_box="openCreateBoxModal"
                @edit="edit"
                @tableReloaded="reloadingTable = false"
+               @move="move"
     />
     <Teleport to="body">
       <EditModal v-if="openEditModal"
@@ -20,6 +21,9 @@
                  :directUploadUrl="directUploadUrl"
                  :editStorageLocation="editStorageLocation"
       />
+      <MoveModal v-if="objectToMove" :moveToUrl="moveToUrl"
+             :selectedObject="objectToMove" :storageLocationTreeUrl="storageLocationTreeUrl"
+             @close="objectToMove = null" @move="updateTable()" />
     </Teleport>
   </div>
 </template>
@@ -29,12 +33,14 @@
 
 import DataTable from '../shared/datatable/table.vue';
 import EditModal from './modals/new_edit.vue';
+import MoveModal from './modals/move.vue';
 
 export default {
   name: 'RepositoriesTable',
   components: {
     DataTable,
-    EditModal
+    EditModal,
+    MoveModal
   },
   props: {
     dataSource: {
@@ -50,6 +56,9 @@ export default {
     },
     directUploadUrl: {
       type: String
+    },
+    storageLocationTreeUrl: {
+      type: String
     }
   },
   data() {
@@ -57,7 +66,9 @@ export default {
       reloadingTable: false,
       openEditModal: false,
       editModalMode: null,
-      editStorageLocation: null
+      editStorageLocation: null,
+      objectToMove: null,
+      moveToUrl: null
     };
   },
   computed: {
@@ -169,6 +180,14 @@ export default {
                  ${boxIcon}
                  <span class="truncate">${name}</span>
               </a>`;
+    },
+    updateTable() {
+      this.reloadingTable = true;
+      this.objectToMove = null;
+    },
+    move(event, rows) {
+      [this.objectToMove] = rows;
+      this.moveToUrl = event.path;
     }
   }
 };

app/models/storage_location.rb

@@ -17,9 +17,41 @@ class StorageLocation < ApplicationRecord
   has_many :repository_rows, through: :storage_location_repository_row
 
   validates :name, length: { maximum: Constants::NAME_MAX_LENGTH }
+  validate :parent_validation, if: -> { parent.present? }
 
   after_discard do
     StorageLocation.where(parent_id: id).find_each(&:discard)
     storage_location_repository_rows.each(&:discard)
   end
+
+  def self.inner_storage_locations(team, storage_location = nil)
+    entry_point_condition = storage_location ? 'parent_id = ?' : 'parent_id IS NULL'
+
+    inner_storage_locations_sql =
+      "WITH RECURSIVE inner_storage_locations(id, selected_storage_locations_ids) AS (
+        SELECT id, ARRAY[id]
+        FROM storage_locations
+        WHERE team_id = ? AND #{entry_point_condition}
+        UNION ALL
+        SELECT storage_locations.id, selected_storage_locations_ids || storage_locations.id
+        FROM inner_storage_locations
+        JOIN storage_locations ON storage_locations.parent_id = inner_storage_locations.id
+        WHERE NOT storage_locations.id = ANY(selected_storage_locations_ids)
+      )
+      SELECT id FROM inner_storage_locations ORDER BY selected_storage_locations_ids".gsub(/\n|\t/, ' ').squeeze(' ')
+
+    if storage_location.present?
+      where("storage_locations.id IN (#{inner_storage_locations_sql})", team.id, storage_location.id)
+    else
+      where("storage_locations.id IN (#{inner_storage_locations_sql})", team.id)
+    end
+  end
+
+  def parent_validation
+    if parent.id == id
+      errors.add(:parent, I18n.t('activerecord.errors.models.storage_location.attributes.parent_storage_location'))
+    elsif StorageLocation.inner_storage_locations(team, self).exists?(id: parent_id)
+      errors.add(:parent, I18n.t('activerecord.errors.models.project_folder.attributes.parent_storage_location_child'))
+    end
+  end
 end

app/models/team.rb

@@ -72,6 +72,7 @@ class Team < ApplicationRecord
            source_type: 'RepositoryBase',
            dependent: :destroy
   has_many :shareable_links, inverse_of: :team, dependent: :destroy
+  has_many :storage_locations, dependent: :destroy
 
   attr_accessor :without_templates
 

app/services/toolbars/storage_locations_service.rb

@@ -47,7 +47,7 @@ module Toolbars
       return unless can_manage_storage_locations?(current_user.current_team)
 
       {
-        name: 'set_as_default',
+        name: 'move',
         label: I18n.t("storage_locations.index.toolbar.move"),
         icon: 'sn-icon sn-icon-move',
         path: move_storage_location_path(@storage_locations.first),

app/views/storage_locations/index.html.erb

@@ -15,6 +15,7 @@
           data-source="<%= storage_locations_path(format: :json, parent_id: params[:parent_id]) %>"
           direct-upload-url="<%= rails_direct_uploads_url %>"
           create-url="<%= storage_locations_path(parent_id: params[:parent_id]) if can_create_storage_locations?(current_team) %>"
+          storage-location-tree-url="<%= tree_storage_locations_path %>"
         />
       </div>
     </div>

config/locales/en.yml

@@ -264,6 +264,9 @@ en:
         storage_location:
           missing_position: 'Missing position metadata'
           not_uniq_position: 'Position already taken'
+          attributes:
+            parent_storage_location: "Storage location cannot be parent to itself"
+            parent_storage_location_child: "Storage location cannot be moved to it's child"
   storage:
     limit_reached: "Storage limit has been reached."
   helpers:
@@ -2713,6 +2716,14 @@ en:
           edit_box: "Box %{name} was successfully updated."
         errors:
           max_length: "is too long (maximum is %{max_length} characters)"
+      move_modal:
+        title: 'Move %{name}'
+        description: 'Select where you want to move %{name}.'
+        search_header: 'Locations'
+        success_flash: "You have successfully moved the selected location/box to another location."
+        error_flash: "An error occurred. The selected location/box has not been moved."
+        placeholder:
+          find_storage_locations: 'Find location'
 
   libraries:
     manange_modal_column_index:

config/routes.rb

@@ -810,6 +810,7 @@ Rails.application.routes.draw do
     resources :storage_locations, only: %i(index create destroy update) do
       collection do
         get :actions_toolbar
+        get :tree
       end
       member do
         post :move