changes

Author: djechlin-mongodb

packages/compass-preferences-model/src/preferences-schema.ts

@@ -21,7 +21,7 @@ export const SORT_ORDER_VALUES = [
   '',
   '{ $natural: -1 }',
   '{ _id: 1 }',
-  '{_id: -1 }',
+  '{ _id: -1 }',
 ] as const;
 export type SORT_ORDERS = typeof SORT_ORDER_VALUES[number];
 
@@ -196,7 +196,13 @@ type PreferenceDefinition<K extends keyof AllPreferences> = {
   /** A description used for the --help text and the Settings UI */
   description: K extends keyof InternalUserPreferences
     ? null
-    : { short: string; long?: string };
+    : {
+        short: string;
+        long?: string;
+        options?: AllPreferences[K] extends string
+          ? { [k in AllPreferences[K]]: string }
+          : never;
+      };
   /** A method for deriving the current semantic value of this option, even if it differs from the stored value */
   deriveValue?: DeriveValueFunction<AllPreferences[K]>;
   /** A method for cleaning up/normalizing input from the command line or global config file */
@@ -558,13 +564,13 @@ export const storedUserPreferencesProps: Required<{
     description: {
       short: 'Default Sort for Query Bar',
       long: "All queries executed from the query bar will apply the sort order '$natural: -1'.",
+      options: {
+        '': 'Default',
+        '{ $natural: -1 }': 'Natural Order recent first',
+        '{ _id: 1 }': 'ID Ascending',
+        '{ _id: -1 }': 'ID Descending',
+      },
     },
-    selectableValues: [
-      { value: '', label: 'Default' },
-      { value: '{ $natural: -1 }', label: 'Natural Order recent first' },
-      { value: '{ _id: 1 }', label: 'ID Ascending' },
-      { value: '{ _id: -1 }', label: 'ID Descending' },
-    ],
     validator: z.enum(SORT_ORDER_VALUES).default(''),
     type: 'string',
   },

packages/compass-preferences-model/src/provider.ts

@@ -13,6 +13,7 @@ export { featureFlags } from './feature-flags';
 export {
   getSettingDescription,
   getSettingSelectableValues,
+  SORT_ORDER_VALUES,
 } from './preferences-schema';
-export type { AllPreferences } from './preferences-schema';
+export type { AllPreferences, SORT_ORDERS } from './preferences-schema';
 export type { DevtoolsProxyOptions } from '@mongodb-js/devtools-proxy-support';

packages/compass-settings/src/components/settings/settings-list.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 import type { UserConfigurablePreferences } from 'compass-preferences-model';
 import {
   getSettingDescription,
-  getSettingSelectableValues,
   featureFlags,
 } from 'compass-preferences-model/provider';
+import { SORT_ORDER_VALUES } from 'compass-preferences-model/provider';
 import { settingStateLabels } from './state-labels';
 import {
   Checkbox,
@@ -158,20 +158,18 @@ function NumericSetting<PreferenceName extends NumericPreferences>({
   );
 }
 
-function DropdownSetting<PreferenceName extends StringPreferences>({
+function DefaultSortOrderSetting<PreferenceName extends 'defaultSortOrder'>({
   name,
   onChange,
-  selectableValues,
   value,
   disabled,
 }: {
   name: PreferenceName;
   onChange: HandleChange<PreferenceName>;
-  selectableValues: ReadonlyArray<{ label: string; value: string }>;
   value: string | undefined;
   disabled: boolean;
 }) {
-  selectableValues = JSON.parse(JSON.stringify(selectableValues));
+  const optionDescriptions = getSettingDescription(name).description.options;
   const onChangeEvent = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       onChange(
@@ -195,9 +193,9 @@ function DropdownSetting<PreferenceName extends StringPreferences>({
         onChange={onChangeEvent}
         disabled={disabled}
       >
-        {selectableValues.map(({ label, value }, i) => (
-          <option key={i} value={value}>
-            {label}
+        {SORT_ORDER_VALUES.map((option, i) => (
+          <option key={i} value={option}>
+            {(optionDescriptions && optionDescriptions[option]) || value}
           </option>
         ))}
       </select>
@@ -255,7 +253,6 @@ type AnySetting = {
   name: string;
   type: unknown;
   value?: unknown;
-  selectableValues?: ReadonlyArray<{ label: string; value: string }>;
   onChange(field: string, value: unknown): void;
 };
 
@@ -301,7 +298,7 @@ function SettingsInput({
 
   let input = null;
 
-  const { name, type, onChange, value, selectableValues } = props;
+  const { name, type, onChange, value } = props;
 
   if (type === 'boolean') {
     input = (
@@ -312,11 +309,10 @@ function SettingsInput({
         disabled={!!disabled}
       />
     );
-  } else if (type === 'string' && selectableValues) {
+  } else if (type === 'string' && name === 'defaultSortOrder') {
     input = (
-      <DropdownSetting
+      <DefaultSortOrderSetting
         name={name}
-        selectableValues={selectableValues}
         onChange={onChange}
         value={value as string}
         disabled={!!disabled}
@@ -364,7 +360,6 @@ const ConnectedSettingsInput = connect(
 
     return {
       value: settings[name],
-      selectableValues: getSettingSelectableValues(name).selectableValues,
       type: type,
       disabled: !!preferenceStates[name],
       stateLabel: settingStateLabels[preferenceStates[name] ?? ''],