chore: Upgrade versions of @ogre-tools/* to 15.3.0

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/src/renderer/components/layout/sidebar-item.tsx

@@ -37,7 +37,7 @@ class NonInjectedSidebarItem extends React.Component<
   }
 
   get id(): string {
-    return this.registration.id;
+    return this.item.id;
   }
 
   @computed get expanded(): boolean {
@@ -52,8 +52,8 @@ class NonInjectedSidebarItem extends React.Component<
     return this.props.item.isActive.get();
   }
 
-  get registration() {
-    return this.props.item.registration;
+  get item() {
+    return this.props.item;
   }
 
   toggleExpand = () => {
@@ -71,7 +71,7 @@ class NonInjectedSidebarItem extends React.Component<
 
     return (
       <ul className={cssNames(styles.subMenu, { [styles.active]: this.isActive })}>
-        {this.props.item.children.map(item => <SidebarItem key={item.registration.id} item={item} />)}
+        {this.props.item.children.map(item => <SidebarItem key={item.id} item={item} />)}
       </ul>
     );
   }
@@ -82,7 +82,7 @@ class NonInjectedSidebarItem extends React.Component<
         className={styles.SidebarItem}
         data-testid={`sidebar-item-${this.id}`}
         data-is-active-test={this.isActive}
-        data-parent-id-test={this.registration.parentId}
+        data-parent-id-test={this.item.parentId}
       >
         <NavLink
           to={""}
@@ -95,13 +95,13 @@ class NonInjectedSidebarItem extends React.Component<
             if (this.isExpandable) {
               this.toggleExpand();
             } else {
-              this.registration.onClick();
+              this.item.onClick();
             }
           }}
           data-testid={`sidebar-item-link-for-${this.id}`}
         >
-          {this.registration.getIcon?.()}
-          <span>{this.registration.title}</span>
+          {this.item.getIcon?.()}
+          <span>{this.item.title}</span>
           {this.isExpandable && (
             <Icon
               className={styles.expandIcon}

packages/core/src/renderer/components/layout/sidebar-items.injectable.ts

@@ -5,18 +5,9 @@
 import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
 import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
-import { pipeline } from "@ogre-tools/fp";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
-import {
-  filter,
-  flatMap,
-  identity,
-  invokeMap,
-  isEmpty,
-  map,
-  orderBy,
-  some,
-} from "lodash/fp";
+import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { SetRequired } from "type-fest";
 
 export interface SidebarItemRegistration {
   id: string;
@@ -33,10 +24,8 @@ export const sidebarItemsInjectionToken = getInjectionToken<
   IComputedValue<SidebarItemRegistration[]>
 >({ id: "sidebar-items-injection-token" });
 
-export interface HierarchicalSidebarItem {
-  registration: SidebarItemRegistration;
+export interface HierarchicalSidebarItem extends SetRequired<SidebarItemRegistration, "isActive" | "isVisible"> {
   children: HierarchicalSidebarItem[];
-  isActive: IComputedValue<boolean>;
 }
 
 const sidebarItemsInjectable = getInjectable({
@@ -44,54 +33,42 @@ const sidebarItemsInjectable = getInjectable({
 
   instantiate: (di) => {
     const computedInjectMany = di.inject(computedInjectManyInjectable);
-
     const sidebarItemRegistrations = computedInjectMany(sidebarItemsInjectionToken);
 
     return computed((): HierarchicalSidebarItem[] => {
-      const registrations = pipeline(
-        sidebarItemRegistrations.get(),
-        flatMap(dereference),
-      );
+      const registrations = sidebarItemRegistrations
+        .get()
+        .flatMap(reg => reg.get());
 
       const getSidebarItemsHierarchy = (registrations: SidebarItemRegistration[]) => {
-        const _getSidebarItemsHierarchy = (parentId: string | null): HierarchicalSidebarItem[] =>
-          pipeline(
-            registrations,
-
-            filter((item) => item.parentId === parentId),
-
-            map((registration) => {
-              const children = _getSidebarItemsHierarchy(registration.id);
+        const impl = (parentId: string | null): HierarchicalSidebarItem[] => (
+          registrations
+            .filter((item) => item.parentId === parentId)
+            .map(({
+              isActive = computed(() => false),
+              isVisible = computed(() => true),
+              ...registration
+            }) => {
+              const children = impl(registration.id);
 
               return {
-                registration,
+                ...registration,
                 children,
-
+                isVisible,
                 isActive: computed(() => {
-                  if (isEmpty(children)) {
-                    return registration.isActive ? registration.isActive.get() : false;
+                  if (children.length === 0) {
+                    return isActive.get();
                   }
 
-                  return pipeline(
-                    children,
-                    invokeMap("isActive.get"),
-                    some(identity),
-                  );
+                  return children.some(child => child.isActive.get());
                 }),
               };
-            }),
+            })
+            .filter(({ isVisible }) => isVisible.get())
+            .sort(byOrderNumber)
+        );
 
-            filter(item => item.registration.isVisible?.get() ?? true),
-
-            (items) =>
-              orderBy(
-                ["registration.orderNumber"],
-                ["asc"],
-                items,
-              ),
-          );
-
-        return _getSidebarItemsHierarchy(null);
+        return impl(null);
       };
 
       return getSidebarItemsHierarchy(registrations);
@@ -99,7 +76,4 @@ const sidebarItemsInjectable = getInjectable({
   },
 });
 
-const dereference = (items: IComputedValue<SidebarItemRegistration[]>) =>
-  items.get();
-
 export default sidebarItemsInjectable;

packages/core/src/renderer/components/layout/sidebar.tsx

@@ -35,7 +35,7 @@ const NonInjectedSidebar = observer(({
           .map(hierarchicalSidebarItem => (
             <SidebarItem
               item={hierarchicalSidebarItem}
-              key={hierarchicalSidebarItem.registration.id}
+              key={hierarchicalSidebarItem.id}
             />
           ))
       }

packages/core/src/renderer/components/layout/tab-layout-2.tsx

@@ -34,21 +34,17 @@ export const TabLayout = observer(
 
         {hasTabs && (
           <Tabs center>
-            {tabs.map(({ registration, isActive }) => {
-              const active = isActive.get();
-
-              return (
-                <Tab
-                  onClick={registration.onClick}
-                  key={registration.id}
-                  label={registration.title}
-                  active={active}
-                  data-is-active-test={active}
-                  data-testid={`tab-link-for-${registration.id}`}
-                  value={undefined}
-                />
-              );
-            })}
+            {tabs.map(({ onClick, id, title, isActive }) => (
+              <Tab
+                onClick={onClick}
+                key={id}
+                label={title}
+                active={isActive.get()}
+                data-is-active-test={isActive.get()}
+                data-testid={`tab-link-for-${id}`}
+                value={undefined}
+              />
+            ))}
           </Tabs>
         )}
 

packages/core/src/renderer/components/virtual-list/virtual-list.tsx

@@ -122,7 +122,7 @@ function VirtualListInner<T extends { getId(): string } | string>({
           ? renderList(fixedHeight)
           : (
             <AutoSizer disableWidth>
-              {({ height }) => renderList(height)}
+              {({ height = 0 }) => renderList(height)}
             </AutoSizer>
           )
       }