Extract responsibility of "separability"

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

src/common/utils/composite/interfaces.ts

@@ -7,11 +7,10 @@ export interface ParentOfChildComposite<Id extends string = string> {
   id: Id;
 }
 
-export interface ChildOfParentComposite<Id extends string = string> {
+export interface ChildOfParentComposite<ParentId extends string = string> {
-  parentId: Id;
+  parentId: ParentId;
 }
 
 export type RootComposite<Id extends string = string> =
   & { parentId: undefined }
   & ParentOfChildComposite<Id>;
-

src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx

@@ -54,7 +54,7 @@ const registratorForPreferenceItemsInjectable = getInjectable({
           </PreferencePageComponent>
         ),
 
-        childSeparator: HorizontalLine,
+        childSeparator: () => <HorizontalLine />,
       }),
 
       injectionToken: preferenceItemInjectionToken,
@@ -133,7 +133,7 @@ const registratorForPreferenceItemsInjectable = getInjectable({
             <ExtensionPreferenceBlock registration={registration} />
           ),
 
-          childSeparator: HorizontalLine,
+          childSeparator: () => <HorizontalLine />,
         }),
 
         injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx

@@ -23,7 +23,7 @@ const applicationPreferencePageInjectable = getInjectable({
     id: "application-page",
     parentId: "application-tab",
     Component: ApplicationPage,
-    childSeparator: HorizontalLine,
+    childSeparator: () => <HorizontalLine />,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx

@@ -23,7 +23,7 @@ const kubernetesPreferencePageInjectable = getInjectable({
     id: "kubernetes-page",
     parentId: "kubernetes-tab",
     Component: KubernetesPage,
-    childSeparator: HorizontalLine,
+    childSeparator: () => <HorizontalLine />,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/preference-item-injection-token.ts

@@ -9,6 +9,14 @@ import type { Discriminable } from "../../../../common/utils/composable-responsi
 import type { Labelable } from "../../../../common/utils/composable-responsibilities/labelable/labelable";
 import type { Showable } from "../../../../common/utils/composable-responsibilities/showable/showable";
 import type { Orderable } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { GetSeparator } from "../../../../common/utils/add-separator/add-separator";
+import type { Composite } from "../../../../common/utils/composite/get-composite/get-composite";
+
+export type ChildrenAreSeparated =
+  & { childSeparator: GetSeparator<Composite<PreferenceTypes>, React.ReactElement> };
+
+export type ChildrenAreMaybeSeparated =
+  & Partial<ChildrenAreSeparated>;
 
 export type PreferenceItemComponent<T> = React.ComponentType<{
   children: React.ReactElement;
@@ -33,8 +41,8 @@ export type PreferenceTabGroup =
   & Orderable
   & { iconName? : string };
 
-interface RenderableWithSiblings<T extends PreferenceTypes> {
+interface RenderableWithSiblings<T extends PreferenceTypes>
-  childSeparator?: () => React.ReactElement;
+  extends ChildrenAreMaybeSeparated {
   Component: PreferenceItemComponent<T>;
 }
 

src/features/preferences/renderer/preference-items/preference-tab-root.tsx

@@ -7,12 +7,13 @@ import { HorizontalLine } from "../../../../renderer/components/horizontal-line/
 import type { RootComposite } from "../../../../common/utils/composite/interfaces";
 import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
 import type { Showable } from "../../../../common/utils/composable-responsibilities/showable/showable";
+import type { ChildrenAreSeparated } from "./preference-item-injection-token";
 
 export type PreferenceTabsRoot =
   & Discriminable<"preference-tabs-root">
   & RootComposite
-  & Showable<true>
+  & ChildrenAreSeparated
-  & { childSeparator: () => React.ReactElement };
+  & Showable<true>;
 
 export const preferenceTabsRoot: PreferenceTabsRoot = {
   kind: "preference-tabs-root" as const,

src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx

@@ -82,7 +82,11 @@ const toNavigationHierarchy = (composite: Composite<PreferenceTypes | Preference
 
     case "preference-tabs-root": {
       return (
-        <Map items={composite.children} getSeparator={value.childSeparator}>
+        <Map
+          // Note: stricter typing for composite children could maybe remove this curiosity.
+          items={composite.children as Composite<PreferenceTypes>[]}
+          getSeparator={value.childSeparator}
+        >
           {toNavigationHierarchy}
         </Map>
       );

src/features/preferences/renderer/preferences.tsx

@@ -79,7 +79,7 @@ const toPreferenceItemHierarchy = (composite: Composite<PreferenceTypes>) => {
         <Component item={value}>
           <Map
             items={composite.children}
-            getSeparator={value.childSeparator || DefaultSeparator}
+            getSeparator={value.childSeparator || defaultSeparator}
           >
             {toPreferenceItemHierarchy}
           </Map>
@@ -112,4 +112,4 @@ export const Preferences = withInjectables<Dependencies>(
   },
 );
 
-const DefaultSeparator = () => <Gutter size="xl" />;
+const defaultSeparator = () => <Gutter size="xl" />;

src/renderer/components/horizontal-line/horizontal-line.tsx

@@ -7,10 +7,10 @@ import styles from "./horizontal-line.module.scss";
 import { cssNames } from "../../utils";
 
 interface HorizontalLineProps {
-  size: "sm" | "md" | "xl";
+  size?: "sm" | "md" | "xl";
 }
 
-export const HorizontalLine = ({ size }: HorizontalLineProps = { size: "xl" }) => {
+export const HorizontalLine = ({ size = "xl" }: HorizontalLineProps = { size: "xl" }) => {
   const classNames = cssNames(styles.HorizontalLine, styles[`size-${size}`]);
 
   return <div className={classNames} />;