Convert setting selectors to TypeScript (#26634)

* Convert settings selectors to TypeScript

* Add missing settings types

* Make `getSettings` a `reselect` selector

frontend/src/metabase-types/api/mocks/settings.ts

@@ -97,8 +97,11 @@ export const createMockSettings = (opts?: Partial<Settings>): Settings => ({
   "custom-formatting": {},
   "deprecation-notice-version": undefined,
   "email-configured?": false,
+  "enable-embedding": false,
+  "enable-nested-queries": true,
   "enable-public-sharing": false,
   "enable-xrays": false,
+  "experimental-enable-actions": false,
   "google-auth-auto-create-accounts-domain": null,
   "google-auth-client-id": null,
   "google-auth-configured": false,
@@ -109,6 +112,7 @@ export const createMockSettings = (opts?: Partial<Settings>): Settings => ({
   "ldap-configured?": false,
   "ldap-enabled": false,
   "loading-message": "doing-science",
+  "persisted-models-enabled": false,
   "saml-configured": false,
   "saml-enabled": false,
   "session-cookies": null,
@@ -119,6 +123,7 @@ export const createMockSettings = (opts?: Partial<Settings>): Settings => ({
   "show-lighthouse-illustration": true,
   "show-metabot": true,
   "site-locale": "en",
+  "site-url": "http://localhost:3000",
   "slack-app-token": null,
   "slack-files-channel": null,
   "slack-token": null,

frontend/src/metabase-types/api/settings.ts

@@ -86,10 +86,14 @@ export interface Settings {
   "available-fonts": string[];
   "available-locales": LocaleData[] | null;
   "custom-formatting": FormattingSettings;
-  "deprecation-notice-version": string | undefined;
+  "deprecation-notice-version"?: string;
   "email-configured?": boolean;
+  "embedding-secret-key"?: string;
+  "enable-embedding": boolean;
+  "enable-nested-queries": boolean;
   "enable-public-sharing": boolean;
   "enable-xrays": boolean;
+  "experimental-enable-actions": boolean;
   "google-auth-auto-create-accounts-domain": string | null;
   "google-auth-client-id": string | null;
   "google-auth-configured": boolean;
@@ -100,6 +104,7 @@ export interface Settings {
   "ldap-configured?": boolean;
   "ldap-enabled": boolean;
   "loading-message": LoadingMessage;
+  "persisted-models-enabled": boolean;
   "saml-configured"?: boolean;
   "saml-enabled"?: boolean;
   "session-cookies": boolean | null;
@@ -110,6 +115,7 @@ export interface Settings {
   "show-lighthouse-illustration": boolean;
   "show-metabot": boolean;
   "site-locale": string;
+  "site-url": string;
   "slack-app-token": string | null;
   "slack-files-channel": string | null;
   "slack-token": string | null;
@@ -119,3 +125,5 @@ export interface Settings {
   engines: Record<string, Engine>;
   version: Version;
 }
+
+export type SettingKey = keyof Settings;

frontend/src/metabase/selectors/settings.js

-import { createSelector } from "reselect";
-
-export const getSettings = state => state.settings.values;
-
-export const getSetting = (state, key) => getSettings(state)[key];
-
-// NOTE: these are "public" settings
-export const getIsPublicSharingEnabled = state =>
-  state.settings.values["enable-public-sharing"];
-export const getIsApplicationEmbeddingEnabled = state =>
-  state.settings.values["enable-embedding"];
-
-// Whether or not xrays are enabled on the instance
-export const getXraysEnabled = state => state.settings.values["enable-xrays"];
-
-export const getShowHomepageData = state =>
-  state.settings.values["show-homepage-data"];
-
-export const getShowHomepageXrays = createSelector(
-  [getXraysEnabled, state => state.settings.values["show-homepage-xrays"]],
-  (enabled, show) => enabled && show,
-);
-
-export const getNestedQueriesEnabled = state =>
-  state.settings.values["enable-nested-queries"];
-
-// NOTE: these are admin-only settings
-export const getSiteUrl = state => state.settings.values["site-url"];
-export const getEmbeddingSecretKey = state =>
-  state.settings.values["embedding-secret-key"];

frontend/src/metabase/selectors/settings.ts

+import { createSelector } from "reselect";
+
+import type { Settings, SettingKey } from "metabase-types/api";
+import type { State } from "metabase-types/store";
+
+export const getSettings = createSelector(
+  (state: State) => state.settings,
+  settings => settings.values,
+);
+
+export const getSetting = <T extends SettingKey>(
+  state: State,
+  key: T,
+): Settings[T] => getSettings(state)[key];
+
+const createSettingSelector = (key: SettingKey) => (state: State) =>
+  getSetting(state, key);
+
+// Common
+
+export const getXraysEnabled = createSettingSelector("enable-xrays");
+
+export const getShowHomepageData = createSettingSelector("show-homepage-data");
+
+export const getShowHomepageXrays = createSelector(
+  getXraysEnabled,
+  getShowHomepageData,
+  (enabled, show) => enabled && show,
+);
+
+export const getNestedQueriesEnabled = createSettingSelector(
+  "enable-nested-queries",
+);
+
+// Admin settings
+export const getSiteUrl = createSettingSelector("site-url");
+
+export const getEmbeddingSecretKey = createSettingSelector(
+  "embedding-secret-key",
+);
+
+// Public settings
+export const getIsPublicSharingEnabled = createSettingSelector(
+  "enable-public-sharing",
+);
+
+export const getIsApplicationEmbeddingEnabled =
+  createSettingSelector("enable-embedding");