Remove "group" from preference types, as it is exact replica of "item"

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

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

src/features/preferences/renderer/get-preference-page.tsx

@@ -3,9 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import React from "react";
-import type { PreferencePageComponent } from "./preference-items/preference-item-injection-token";
+import type {
+  PreferenceItemComponent,
+  PreferencePage,
+} from "./preference-items/preference-item-injection-token";
 
-export const getPreferencePage = (label: string): PreferencePageComponent => ({ children, item }) => (
+export const getPreferencePage = (label: string): PreferenceItemComponent<PreferencePage> => ({ children, item }) => (
   <section id={item.id} data-preference-page-test={item.id}>
     <h2 data-preference-page-title-test={true}>{label}</h2>
 

src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-group-preference-item.injectable.tsx

@@ -3,16 +3,29 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceTypes } from "../../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import Gutter from "../../../../../../renderer/components/gutter/gutter";
+import React from "react";
+
+const PreferenceItemGroup = ({
+  children,
+  item,
+}: {
+  children: React.ReactElement;
+  item: PreferenceTypes;
+}) => <section id={item.id}>{children}</section>;
 
 const kubectlGroupPreferenceItemInjectable = getInjectable({
   id: "kubectl-group-preference-item",
 
   instantiate: () => ({
-    kind: "group" as const,
+    kind: "item" as const,
     id: "kubectl",
     parentId: "kubernetes-page",
     orderNumber: 10,
+    Component: PreferenceItemGroup,
+    childrenSeparator: () => <Gutter size="xl" />,
   }),
 
   injectionToken: preferenceItemInjectionToken,

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

@@ -6,13 +6,9 @@ import { getInjectionToken } from "@ogre-tools/injectable";
 import type { IComputedValue } from "mobx";
 import type React from "react";
 
-export type PreferenceItemComponent = React.ComponentType<{
+export type PreferenceItemComponent<T> = React.ComponentType<{
   children: React.ReactElement;
-}>;
+  item: T;
-
-export type PreferencePageComponent = React.ComponentType<{
-  children: React.ReactElement;
-  item: PreferencePage;
 }>;
 
 export interface PreferenceTab {
@@ -41,28 +37,20 @@ export interface PreferencePage {
   parentId: string;
   isShown?: IComputedValue<boolean> | boolean;
   childrenSeparator?: () => React.ReactElement;
-  Component: PreferencePageComponent;
+  Component: PreferenceItemComponent<PreferencePage>;
-}
-
-export interface PreferenceGroup {
-  kind: "group";
-  id: string;
-  parentId: string;
-  isShown?: IComputedValue<boolean> | boolean;
-  childrenSeparator?: () => React.ReactElement;
 }
 
 export interface PreferenceItem {
   kind: "item";
-  Component: PreferenceItemComponent;
   id: string;
   parentId: string;
   orderNumber: number;
   isShown?: IComputedValue<boolean> | boolean;
   childrenSeparator?: () => React.ReactElement;
+  Component: PreferenceItemComponent<PreferenceItem>;
 }
 
-export type PreferenceTypes = PreferenceTabGroup | PreferenceTab | PreferenceItem | PreferencePage | PreferenceGroup;
+export type PreferenceTypes = PreferenceTabGroup | PreferenceTab | PreferenceItem | PreferencePage;
 
 export const preferenceItemInjectionToken = getInjectionToken<PreferenceTypes>({
   id: "preference-item-injection-token",

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

@@ -36,7 +36,6 @@ export const PreferencesNavigation = withInjectables<Dependencies>(
   },
 );
 
-
 const toNavigationHierarchy = (composite: Composite<PreferenceTypes | PreferenceTabsRoot>) => {
   // Note: This makes tab groups and tabs without content not render anything in navigation.
   if (!hasContent(composite)) {
@@ -57,10 +56,6 @@ const toNavigationHierarchy = (composite: Composite<PreferenceTypes | Preference
       return emptyRender;
     }
 
-    case "group": {
-      return emptyRender;
-    }
-
     case "tab-group": {
       return (
         <div data-preference-tab-group-test={value.id}>

src/features/preferences/renderer/preferences.tsx

@@ -53,26 +53,12 @@ const toPreferenceItemHierarchy = (composite: Composite<PreferenceTypes>) => {
   const value = composite.value;
 
   switch (value.kind) {
-    // Todo: rename to item-group
-    case "group": {
-      return (
-        <section id={value.id}>
-          <Map
-            items={composite.children}
-            getSeparator={value.childrenSeparator || DefaultSeparator}
-          >
-            {toPreferenceItemHierarchy}
-          </Map>
-        </section>
-      );
-    }
-
     case "item": {
       const Component = value.Component;
 
       return (
         <div data-preference-item-test={composite.id}>
-          <Component>
+          <Component item={value}>
             <Map
               items={composite.children}
               getSeparator={value.childrenSeparator}