Merge pull request #249 from crabnebula-dev/fix/tauri-tab-configuration-loading

Fix/tauri tab configuration loading

Author: lucasfernog-crabnebula

clients/web/src/components/health-status.tsx

@@ -2,7 +2,7 @@ import { HealthCheckResponse_ServingStatus } from "~/lib/proto/health";
 import { Show, createEffect, createSignal, onMount } from "solid-js";
 import { ErrorDialog } from "./dialogs/error-dialog";
 import {
-  addStreamListneners,
+  addStreamListeners,
   connect,
   checkConnection,
 } from "~/lib/connection/transport";
@@ -121,7 +121,7 @@ export function HealthStatus() {
     setMonitorData("spans", reconcile([]));
     const newConnection = connect(connectionStore.serviceUrl);
     setConnection(reconcile(newConnection, { merge: false }));
-    addStreamListneners(connectionStore.stream.update, setMonitorData);
+    addStreamListeners(connectionStore.stream.update, setMonitorData);
     connectionStore.stream.health.responses.onError(healthErrorHandler);
     connectionStore.stream.update.responses.onError(updateErrorHandler);
   }

clients/web/src/components/tauri/configuration-context.tsx

@@ -4,8 +4,6 @@ import {
   useContext,
   type JSXElement,
 } from "solid-js";
-import { type ConfigurationStore } from "~/lib/tauri/config/retrieve-configurations";
-import { createStore } from "solid-js/store";
 
 type ConfigurationContextType = ReturnType<typeof makeConfigurationContext>;
 const ConfigurationContext = createContext<ConfigurationContextType>();
@@ -24,7 +22,6 @@ export const makeConfigurationContext = () => {
   const [descriptions, setDescriptions] = createSignal<
     Map<string, { default?: string }>
   >(new Map());
-  const [configurations, setConfigurations] = createStore<ConfigurationStore>();
   return {
     highlightKey: {
       highlightKey: highlightKey,
@@ -34,10 +31,6 @@ export const makeConfigurationContext = () => {
       descriptions: descriptions,
       setDescriptions: setDescriptions,
     },
-    configurations: {
-      configurations: configurations,
-      setConfigurations: setConfigurations,
-    },
   } as const;
 };
 

clients/web/src/components/tauri/configuration-value.tsx

@@ -1,57 +1,43 @@
-import { Show, For, Switch, Match } from "solid-js";
+import { Show, For, createMemo } from "solid-js";
 import { ConfigurationTooltip } from "./configuration-tooltip";
 import { Flags } from "./configuration-value/flags";
+import { TauriConfig } from "~/lib/tauri/config/tauri-conf";
 
-type ConfigurationValue =
-  | ConfigurationRecord
-  | string
-  | []
-  | boolean
-  | null
-  | undefined
-  | unknown;
-
-/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
-interface ConfigurationRecord extends Record<string, ConfigurationValue> {}
+type ConfigurationValue = TauriConfig[keyof TauriConfig];
 
 interface ConfigurationValueProps {
   parentKey: string;
   key: string;
   value: ConfigurationValue;
 }
 
-interface TextConfigurationValueProps extends ConfigurationValueProps {
+type TextConfigurationValueProps = Omit<ConfigurationValueProps, "value"> & {
   value: string | boolean;
-}
+};
 
 interface ArrayConfigurationValueProps extends ConfigurationValueProps {
-  value: [];
+  value: ConfigurationValue[];
 }
 
 interface ObjectConfigurationValueProps extends ConfigurationValueProps {
-  value: ConfigurationRecord;
+  value: Omit<ConfigurationValue, "undefined">;
 }
 
 export function ConfigurationValue(props: ConfigurationValueProps) {
-  return (
-    <Switch
-      fallback={<TextValue {...(props as TextConfigurationValueProps)} />}
-    >
-      <Match
-        when={
-          typeof props.value === "string" || typeof props.value === "boolean"
-        }
-      >
-        <TextValue {...(props as TextConfigurationValueProps)} />
-      </Match>
-      <Match when={Array.isArray(props.value)}>
-        <ArrayValue {...(props as ArrayConfigurationValueProps)} />
-      </Match>
-      <Match when={typeof props.value === "object" && props.value !== null}>
-        <ObjectValue {...(props as ObjectConfigurationValueProps)} />
-      </Match>
-    </Switch>
-  );
+  const selectedTemplate = createMemo(() => {
+    if (typeof props.value === "string" || typeof props.value === "boolean")
+      return <TextValue {...props} value={props.value} />;
+
+    if (Array.isArray(props.value))
+      return <ArrayValue {...props} value={props.value} />;
+
+    if (typeof props.value === "object" && props.value)
+      return <ObjectValue {...props} value={props.value} />;
+
+    return <TextValue {...props} value={String(props.value)} />;
+  });
+
+  return <>{selectedTemplate()}</>;
 }
 
 function TextValue(props: TextConfigurationValueProps) {
@@ -84,7 +70,7 @@ function ObjectValue(props: ObjectConfigurationValueProps) {
         <ConfigurationTooltip parentKey={props.parentKey} key={props.key} />
       </h2>
       <ul class="flex flex-col">
-        <For each={Object.entries(props.value)}>
+        <For each={Object.entries<ConfigurationValue>(props.value)}>
           {([childKey, value]) => (
             <li>
               <ConfigurationValue

clients/web/src/components/tauri/configuration-view.tsx

@@ -8,6 +8,8 @@ import { ConfigurationErrors } from "./configuration-errors";
 import { MissingConfigurationParameterDialog } from "./dialogs/missing-configuration-parameter-dialog";
 import { MissingConfigurationDialog } from "./dialogs/missing-configuration-dialog";
 import { Heading } from "../heading";
+import { TauriConfig } from "~/lib/tauri/config/tauri-conf";
+import { createMemo } from "solid-js";
 
 export function ConfigurationView() {
   const params = useParams<{
@@ -17,22 +19,29 @@ export function ConfigurationView() {
       | "tauri.windows.conf"
       | "tauri.linux.conf"
       | "tauri.macos.conf";
-    selected: "build" | "package" | "plugins" | "tauri";
+    selected: keyof TauriConfig;
   }>();
 
   const config = () => retrieveConfigurationByKey(params.config);
 
-  const tab = () => {
+  const tab = createMemo(() => {
     const config = retrieveConfigurationByKey(params.config);
-    if (config && config.data && config.data[params.selected])
+    if (
+      config &&
+      config.data &&
+      (config.data[params.selected] ||
+        typeof config.data[params.selected] === "string")
+    )
       return config.data[params.selected];
     return undefined;
-  };
+  });
 
-  const tabWithKeys = (currentTab: ReturnType<typeof tab>) => {
+  const tabWithKeys = createMemo(() => {
+    const currentTab = tab();
+    if (typeof currentTab === "string" && currentTab === "") return "empty";
     if (!currentTab || !(Object.keys(currentTab).length > 0)) return undefined;
     return currentTab;
-  };
+  });
 
   createEffect(() => {
     const data = tab();
@@ -54,7 +63,7 @@ export function ConfigurationView() {
           <h1 class="text-3xl">{config()?.label}</h1>
           <ConfigurationErrors error={config()?.error} />
         </Match>
-        <Match when={tabWithKeys(tab())}>
+        <Match when={tabWithKeys()}>
           {(t) => (
             <>
               <header>

clients/web/src/components/tauri/sidebar.tsx

@@ -1,21 +1,21 @@
 import { For, Suspense, Show } from "solid-js";
 import { FileIcon } from "~/components/icons/ide-icons";
 import { A } from "@solidjs/router";
-import {
-  type ConfigurationObject,
-  retrieveConfigurations,
-} from "~/lib/tauri/config/retrieve-configurations";
+import { type ConfigurationObject } from "~/lib/tauri/config/retrieve-configurations";
 import { Loader } from "~/components/loader";
 import { getTauriTabBasePath } from "~/lib/tauri/get-tauri-tab-base-path";
+import { useMonitor } from "~/context/monitor-provider";
 
 export function Sidebar() {
-  const [configEntries] = retrieveConfigurations();
+  const { monitorData } = useMonitor();
 
   return (
     <>
       <h2 class="text-neutral-300 p-4 pb-2 text-2xl">Config</h2>
       <Suspense fallback={<Loader />}>
-        <For each={configEntries()}>{(child) => <Config config={child} />}</For>
+        <For each={monitorData.tauriConfigStore?.configs}>
+          {(child) => <Config config={child} />}
+        </For>
       </Suspense>
     </>
   );

clients/web/src/context/monitor-provider.tsx

@@ -4,6 +4,7 @@ import {
   Show,
   createContext,
   useContext,
+  createResource,
 } from "solid-js";
 import { SetStoreFunction, createStore } from "solid-js/store";
 import {
@@ -13,9 +14,10 @@ import {
   getVersions,
 } from "~/lib/connection/getters";
 import { MonitorData, initialMonitorData } from "~/lib/connection/monitor";
-import { addStreamListneners } from "~/lib/connection/transport";
+import { addStreamListeners } from "~/lib/connection/transport";
 import { useConnection } from "~/context/connection-provider";
 import { jsonSchemaForVersion } from "~/lib/tauri/config/json-schema-for-version";
+import { loadConfigurations } from "~/lib/tauri/config/retrieve-configurations";
 
 type ProviderProps = {
   children: JSXElement;
@@ -37,18 +39,24 @@ export function MonitorProvider(props: ProviderProps) {
   const { connectionStore } = useConnection();
   const [monitorData, setMonitorData] = createStore(initialMonitorData);
   const [tauriMetrics] = getTauriMetrics(connectionStore.client.tauri);
+  const [appMetadata] = getMetadata(connectionStore.client.meta);
   const [tauriConfig] = getTauriConfig(connectionStore.client.tauri);
   const [tauriVersions] = getVersions(connectionStore.client.tauri);
-  const [appMetadata] = getMetadata(connectionStore.client.meta);
+  const [tauriConfigStore] = createResource(
+    /** The base configuration and the active tauri version have to be loaded for proper parsing */
+    () =>
+      tauriConfig() && tauriVersions()
+        ? [tauriConfig(), tauriVersions()]
+        : undefined,
+    ([tauriConfig, tauriVersions]) => {
+      return loadConfigurations(tauriConfig, tauriVersions);
+    },
+  );
 
   createEffect(() => {
     setMonitorData("tauriConfig", tauriConfig());
   });
 
-  createEffect(() => {
-    setMonitorData("appMetadata", appMetadata());
-  });
-
   createEffect(() => {
     const versions = tauriVersions();
     if (versions) {
@@ -59,13 +67,22 @@ export function MonitorProvider(props: ProviderProps) {
   });
 
   createEffect(() => {
-    if (tauriMetrics()) {
-      //  eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      setMonitorData("perf", tauriMetrics()!);
+    const configs = tauriConfigStore();
+    setMonitorData("tauriConfigStore", { configs });
+  });
+
+  createEffect(() => {
+    setMonitorData("appMetadata", appMetadata());
+  });
+
+  createEffect(() => {
+    const metrics = tauriMetrics();
+    if (metrics) {
+      setMonitorData("perf", metrics);
     }
   });
 
-  addStreamListneners(connectionStore.stream.update, setMonitorData);
+  addStreamListeners(connectionStore.stream.update, setMonitorData);
 
   return (
     <Show when={tauriMetrics()}>

clients/web/src/lib/connection/monitor.ts

@@ -6,6 +6,7 @@ import { Timestamp } from "~/lib/proto/google/protobuf/timestamp";
 import { timestampToDate } from "~/lib/formatters";
 import { AppMetadata } from "../proto/meta";
 import { Versions } from "../proto/tauri";
+import { ConfigurationStore } from "../tauri/config/retrieve-configurations";
 
 export type HealthStatus = keyof typeof HealthCheckResponse_ServingStatus;
 
@@ -26,8 +27,10 @@ export type MonitorData = {
   metadata: Map<bigint, Metadata>;
   logs: LogEvent[];
   spans: Span[];
-
+  /** The original/parsed tauri configuration we receive from instrumentation */
   tauriConfig?: Record<"build" | "package" | "plugins" | "tauri", object>;
+  /** All the parsed configuration files we read from the frontend */
+  tauriConfigStore?: ConfigurationStore;
   tauriVersions?: Versions;
   appMetadata?: AppMetadata;
   schema?: object;
@@ -44,7 +47,6 @@ export const initialMonitorData: MonitorData = {
   metadata: new Map(),
   logs: [],
   spans: [],
-
   tauriConfig: undefined,
   tauriVersions: undefined,
   appMetadata: undefined,

clients/web/src/lib/connection/transport.tsx

@@ -99,7 +99,7 @@ export function setup(url: string) {
 
 type UpdateStream = ReturnType<typeof connect>["stream"]["update"];
 
-export function addStreamListneners(
+export function addStreamListeners(
   stream: UpdateStream,
   setMonitorData: SetStoreFunction<MonitorData>,
 ) {