Fix namespace and object with same name ordering in OutlinePanel (#262)

Fix P-206 namespace and object name rendered in wrong order

theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx

@@ -39,9 +39,15 @@ function NamespaceTree(props: {
   return (
     <>
       {[...props.namespace.entries()].map(([label, {object, nested}]) => {
-        const children = (
-          <React.Fragment key={`${label} - ${props.visualIndentation}`}>
-            {object && (
+        const nestedChildrenElt = nested && (
+          <NamespaceTree
+            namespace={nested}
+            // Question: will there be key conflict if two components have the same labels?
+            key={'namespaceTree(' + label + ')'}
+            visualIndentation={props.visualIndentation + 1}
+          />
+        )
+        const sameNameElt = object && (
           <ObjectItem
             depth={props.visualIndentation}
             // key is useful for navigating react dev component tree
@@ -50,30 +56,22 @@ function NamespaceTree(props: {
             sheetObject={object}
             overrideLabel={label}
           />
-            )}
-            {nested && (
-              <NamespaceTree
-                namespace={nested}
-                // Question: will there be key conflict if two components have the same labels?
-                key={'namespaceTree(' + label + ')'}
-                visualIndentation={props.visualIndentation + 1}
-              />
-            )}
-          </React.Fragment>
         )
 
-        return nested ? (
+        return (
+          <React.Fragment key={`${label} - ${props.visualIndentation}`}>
+            {sameNameElt}
+            {nestedChildrenElt && (
               <BaseItem
                 selectionStatus="not-selectable"
                 label={label}
                 // key necessary for no duplicate keys (next to other React.Fragments)
                 key={`baseItem(${label})`}
                 depth={props.visualIndentation}
-            children={children}
+                children={nestedChildrenElt}
               />
-        ) : (
-          // if we don't have any nested items, just render the children with no wrapper, here.
-          children
+            )}
+          </React.Fragment>
         )
       })}
     </>