New: Dynamic Select and UMask Fields

Fixes #5380
Fixes #5348
Fixes #5167
Fixes #5166

Co-Authored-By: Taloth <Taloth@users.noreply.github.com>

frontend/src/Components/Form/EnhancedSelectInputOption.js

@@ -32,6 +32,7 @@ class EnhancedSelectInputOption extends Component {
     const {
       className,
       id,
+      depth,
       isSelected,
       isDisabled,
       isHidden,
@@ -54,6 +55,11 @@ class EnhancedSelectInputOption extends Component {
         onPress={this.onPress}
       >
 
+        {
+          depth !== 0 &&
+            <div style={{ width: `${depth * 20}px` }} />
+        }
+
         {
           isMultiSelect &&
             <CheckInput
@@ -84,6 +90,7 @@ class EnhancedSelectInputOption extends Component {
 EnhancedSelectInputOption.propTypes = {
   className: PropTypes.string.isRequired,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  depth: PropTypes.number.isRequired,
   isSelected: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,
@@ -95,6 +102,7 @@ EnhancedSelectInputOption.propTypes = {
 
 EnhancedSelectInputOption.defaultProps = {
   className: styles.option,
+  depth: 0,
   isDisabled: false,
   isHidden: false,
   isMultiSelect: false