Fix: DEV-1956: new label inside new label (#541)

* add react-vtree and react-window as dependencies

* agnostic virtual large tree data viewing component

* integrate virtual tree component with taxonomy selector

* imput and scrollbar padding adjustment, fix height on search and browser percentage calcualtion

* removed react-vtree from dependencies, replicated functionality with react-window alone

* support adding child components and couting total nested children

* adjust window hight and scrolling

* null block treeStructure when menu is closed

* new row is actual row, expand parent

* new Items add at top of list, remove unused

* update enzyme-adapter to work with react@17

* update yarn.lock

* trigger CI

* update node version to 14

* update enzyme dependencies

* update lock-files. again

* revert mistaken data reorder

* margin to add button and input

Co-authored-by: Travis Clark <“[email protected]”>
Co-authored-by: hlomzik <[email protected]>

Author: 3 people

src/components/Taxonomy/Taxonomy.module.scss

@@ -178,6 +178,10 @@
   zoom: 1; // something to apply this class
 }
 
+.taxonomy__add__container { 
+  margin-bottom: 8px;
+}
+
 .taxonomy__add {
   margin-left: 27px; // chevron 24px + 3px margin
   display: flex;

src/components/Taxonomy/Taxonomy.tsx

@@ -353,15 +353,17 @@ const TaxonomyDropdown = ({ show, flatten, items, dropdownRef }: TaxonomyDropdow
           transformationCallback={dataTransformation}
         />
       )}
-      {onAddLabel &&
-        search === "" &&
-        (isAdding ? (
-          <UserLabelForm path={[]} onAddLabel={onAddLabel} onFinish={closeForm} />
-        ) : (
-          <div className={styles.taxonomy__add}>
-            <button onClick={addInside}>Add</button>
-          </div>
-        ))}
+      {onAddLabel && search === "" && (
+        <div className={styles.taxonomy__add__container}>
+          {isAdding ? (
+            <UserLabelForm path={[]} onAddLabel={onAddLabel} onFinish={closeForm} />
+          ) : (
+            <div className={styles.taxonomy__add}>
+              <button onClick={addInside}>Add</button>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };

src/stores/UserLabels.ts

@@ -17,14 +17,13 @@ const UserLabels = types
   .actions(self => ({
     addLabel(control: string, path: string[]) {
       const label: UserLabel = { path, origin: "session" };
-      const labels = [label, ...(self.controls[control] ?? [])];
+      const labels = [...(self.controls[control] ?? []), label];
 
       self.controls = { ...self.controls, [control]: labels };
     },
 
     deleteLabel(control: string, path: string[]) {
       if (!self.controls[control]) return;
-
       const labels = self.controls[control].filter(existed =>
         existed.path.length !== path.length
         || !existed.path.every((item, index) => item === path[index]));
@@ -41,7 +40,6 @@ const UserLabels = types
           path,
         }));
       }
-
       self.controls = adjusted;
     },
   }));