Assignment of one category for each object, What’s the best practice to achieve?

I'm designing a new product where the user can import their current apps to the system. In the system, there are 4 categories that represent the stages for product development: test, dev, QA, production. By default, all imported apps will be in the test environment.

A couple of limitations

  • Users can only assign each app to one stage

  • Each app has multiple sub-apps

Is there a common practice to design the interaction? What is the common mental modal?

I have two variations in mind.

enter image description here Variation 1 User flow:

  • User comes to this screen to classify the apps
  • User can expand the tree of the left side and select the apps/sub-apps to be assigned to different groups
  • Once the selects the apps/sub-apps/ sub-sub-apps, they can click on reassign to
  • an app can belong to group A, whereas sub-apps can belong C, and sub-sub app to B

enter image description here Variation 2 User flow:

  • User has 4 groups(stages) and can select the group prior to adding the apps / sub-apps
  • Once clicking on one of the groups, they can reassign the apps in the selected group
Tags: , , , , , ,