changes

Author: djechlin-mongodb

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

@@ -17,6 +17,14 @@ import {
 export const THEMES_VALUES = ['DARK', 'LIGHT', 'OS_THEME'] as const;
 export type THEMES = typeof THEMES_VALUES[number];
 
+export const SORT_ORDER_VALUES = [
+  '',
+  '{ $natural: -1 }',
+  '{ _id: 1 }',
+  '{_id: -1 }',
+] as const;
+export type SORT_ORDERS = typeof SORT_ORDER_VALUES[number];
+
 export type PermanentFeatureFlags = {
   showDevFeatureFlags?: boolean;
   enableDebugUseCsfleSchemaMap?: boolean;
@@ -69,7 +77,7 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     enableGenAISampleDocumentPassing: boolean;
     enablePerformanceAdvisorBanner: boolean;
     maximumNumberOfActiveConnections?: number;
-    showRecentDocumentsFirst: boolean;
+    defaultSortOrder: SORT_ORDERS;
     enableShowDialogOnQuit: boolean;
     enableCreatingNewConnections: boolean;
     enableProxySupport: boolean;
@@ -200,6 +208,8 @@ type PreferenceDefinition<K extends keyof AllPreferences> = {
       ? boolean
       : false
     : boolean;
+
+  selectableValues?: ReadonlyArray<AllPreferences[K]>;
   validator: z.Schema<
     AllPreferences[K],
     z.ZodTypeDef,
@@ -541,16 +551,17 @@ export const storedUserPreferencesProps: Required<{
   /**
    * Set the default sort.
    */
-  showRecentDocumentsFirst: {
+  defaultSortOrder: {
     ui: true,
     cli: true,
     global: true,
     description: {
       short: 'Default Sort for Query Bar',
       long: "All queries executed from the query bar will apply the sort order '$natural: -1'.",
     },
-    validator: z.boolean().default(false),
-    type: 'boolean',
+    selectableValues: SORT_ORDER_VALUES,
+    validator: z.enum(SORT_ORDER_VALUES).default(''),
+    type: 'string',
   },
 
   /**

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

@@ -157,6 +157,52 @@ function NumericSetting<PreferenceName extends NumericPreferences>({
   );
 }
 
+function DropdownSetting<PreferenceName extends StringPreferences>({
+  name,
+  onChange,
+  selectableValues,
+  value,
+  disabled,
+}: {
+  name: PreferenceName;
+  onChange: HandleChange<PreferenceName>;
+  selectableValues: string[];
+  value: string | undefined;
+  disabled: boolean;
+}) {
+  const onChangeEvent = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(
+        name,
+        event.target.value as UserConfigurablePreferences[PreferenceName]
+      );
+    },
+    [name, onChange]
+  );
+
+  return (
+    <>
+      <SettingLabel name={name} />
+      <select
+        className={inputStyles}
+        aria-labelledby={`${name}-label`}
+        id={name}
+        name={name}
+        data-testid={name}
+        value={value === undefined ? '' : `${value}`}
+        onChange={onChangeEvent}
+        disabled={disabled}
+      >
+        {selectableValues.map((valu, ie) => (
+          <option key={i} value={value}>
+            {value}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+}
+
 function StringSetting<PreferenceName extends StringPreferences>({
   name,
   onChange,
@@ -206,6 +252,7 @@ function StringSetting<PreferenceName extends StringPreferences>({
 type AnySetting = {
   name: string;
   type: unknown;
+  selectableValues?: unknown[];
   value?: unknown;
   onChange(field: string, value: unknown): void;
 };
@@ -252,7 +299,7 @@ function SettingsInput({
 
   let input = null;
 
-  const { name, type, onChange, value } = props;
+  const { name, type, onChange, value, selectableValues } = props;
 
   if (type === 'boolean') {
     input = (
@@ -263,9 +310,17 @@ function SettingsInput({
         disabled={!!disabled}
       />
     );
-  }
-
-  if (type === 'number') {
+  } else if (type === 'string' && selectableValues) {
+    input = (
+      <DropdownSetting
+        name={name}
+        selectableValues={selectableValues}
+        onChange={onChange}
+        value={value as string}
+        disabled={!!disabled}
+      />
+    );
+  } else if (type === 'number') {
     input = (
       <NumericSetting
         name={name}
@@ -275,9 +330,7 @@ function SettingsInput({
         disabled={!!disabled}
       />
     );
-  }
-
-  if (type === 'string') {
+  } else if (type === 'string') {
     input = (
       <StringSetting
         name={name}