From 18f1e1b6aa56f18e543b9bfc64151ee9869ea671 Mon Sep 17 00:00:00 2001
From: Iku-turso <mikko.aspiala@gmail.com>
Date: Thu, 20 Oct 2022 11:37:12 +0300
Subject: [PATCH] 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             |  5 ++---
 .../registrator-for-preference-items.injectable.tsx  |  4 ++--
 .../application-preference-page.injectable.tsx       |  2 +-
 .../kubernetes-preference-page.injectable.tsx        |  2 +-
 .../preference-item-injection-token.ts               | 12 ++++++++++--
 .../preference-items/preference-tab-root.tsx         |  5 +++--
 .../preference-navigation/preferences-navigation.tsx |  6 +++++-
 src/features/preferences/renderer/preferences.tsx    |  4 ++--
 .../components/horizontal-line/horizontal-line.tsx   |  4 ++--
 9 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/common/utils/composite/interfaces.ts b/src/common/utils/composite/interfaces.ts
index 6e50e68c5f..1c29a0e4ce 100644
--- a/src/common/utils/composite/interfaces.ts
+++ b/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> {
-  parentId: Id;
+export interface ChildOfParentComposite<ParentId extends string = string> {
+  parentId: ParentId;
 }
 
 export type RootComposite<Id extends string = string> =
   & { parentId: undefined }
   & ParentOfChildComposite<Id>;
-
diff --git a/src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx b/src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx
index 9d2929889d..6a79f96c37 100644
--- a/src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
index 934c9dce89..cdf1b2048f 100644
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
index 15f4a051a4..6484c67381 100644
--- a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts b/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
index d382a8fb9b..934b6f1fd9 100644
--- a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
+++ b/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> {
-  childSeparator?: () => React.ReactElement;
+interface RenderableWithSiblings<T extends PreferenceTypes>
+  extends ChildrenAreMaybeSeparated {
   Component: PreferenceItemComponent<T>;
 }
 
diff --git a/src/features/preferences/renderer/preference-items/preference-tab-root.tsx b/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
index 2cec5c1105..41d2687402 100644
--- a/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
+++ b/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>
-  & { childSeparator: () => React.ReactElement };
+  & ChildrenAreSeparated
+  & Showable<true>;
 
 export const preferenceTabsRoot: PreferenceTabsRoot = {
   kind: "preference-tabs-root" as const,
diff --git a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx b/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
index 92448103b5..d92ef030dd 100644
--- a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
+++ b/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>
       );
diff --git a/src/features/preferences/renderer/preferences.tsx b/src/features/preferences/renderer/preferences.tsx
index a277a90940..bd34209003 100644
--- a/src/features/preferences/renderer/preferences.tsx
+++ b/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" />;
diff --git a/src/renderer/components/horizontal-line/horizontal-line.tsx b/src/renderer/components/horizontal-line/horizontal-line.tsx
index 0e9e9accf3..107a269b35 100644
--- a/src/renderer/components/horizontal-line/horizontal-line.tsx
+++ b/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} />;