lens/src/features/preferences/renderer/preferences.tsx

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
import "./preferences.scss";
import React from "react";

import { SettingLayout } from "../../../renderer/components/layout/setting-layout";
import { withInjectables } from "@ogre-tools/injectable-react";
import closePreferencesInjectable from "./close-preferences/close-preferences.injectable";
import currentPreferenceTabCompositeInjectable from "./preference-items/current-preference-tab-composite.injectable";
import type { Composite } from "../../application-menu/main/menu-items/get-composite/get-composite";
import type { PreferenceTypes, PreferenceTab } from "./preference-items/preference-item-injection-token";
import type { IComputedValue } from "mobx";
import { Map } from "../../../renderer/components/map/map";
import { observer } from "mobx-react";
import { PreferencesNavigation } from "./preference-navigation/preferences-navigation";

interface Dependencies {
  closePreferences: () => void;
  pageComposite: IComputedValue<Composite<PreferenceTab> | undefined>;
}

const NonInjectedPreferences = observer(({
  closePreferences,
  pageComposite,
}: Dependencies) => {
  const composite = pageComposite.get();

  return (
    <SettingLayout
      navigation={<PreferencesNavigation />}
      className="Preferences"
      contentGaps={false}
      closeButtonProps={{ "data-testid": "close-preferences" }}
      back={closePreferences}
    >
      {composite ? (
        toPreferenceItemHierarchy(composite)
      ) : (
        <div
          className="flex items-center"
          data-preference-page-does-not-exist-test={true}
        >
          No preferences found
        </div>
      )}
    </SettingLayout>
  );
});

const toPreferenceItemHierarchy = (composite: Composite<PreferenceTypes>) => {
  const value = composite.value;

  switch (value.kind) {
    case "group": {
      return (
        <section id={value.id}>
          <Map items={composite.children} getSeparator={value.childrenSeparator}>
            {toPreferenceItemHierarchy}
          </Map>
        </section>
      );
    }

    case "item": {
      const Component = value.Component;

      return (
        <div data-preference-item-test={composite.id}>
          <Component>
            <Map items={composite.children} getSeparator={value.childrenSeparator}>
              {toPreferenceItemHierarchy}
            </Map>
          </Component>
        </div>
      );
    }

    // eslint-disable-next-line no-fallthrough
    case "page": {
      const Component = value.Component;

      return (
        <Component item={value}>
          <Map items={composite.children} getSeparator={value.childrenSeparator}>
            {toPreferenceItemHierarchy}
          </Map>
        </Component>
      );
    }

    case "tab-group":

    // eslint-disable-next-line no-fallthrough
    case "tab": {
      return (
        <Map items={composite.children}>
          {toPreferenceItemHierarchy}
        </Map>
      );
    }

    default: {
      // Note: this will fail at transpilation time, if all kinds
      // are not handled in switch/case.
      const _exhaustiveCheck: never = value;

      // Note: this code is unreachable, it is here to make ts not complain about
      // _exhaustiveCheck not being used.
      // See: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
      throw new Error(`Tried to create preferences, but foreign item was encountered: ${_exhaustiveCheck} ${value}`);
    }
  }
};

export const Preferences = withInjectables<Dependencies>(
  NonInjectedPreferences,

  {
    getProps: (di, props) => ({
      closePreferences: di.inject(closePreferencesInjectable),
      pageComposite: di.inject(currentPreferenceTabCompositeInjectable),
      ...props,
    }),
  },
);