From d83193f0c43eda51b524f3bb6ea86397390dd7c2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 10 Jul 2025 14:19:12 -0600
Subject: [PATCH] adjust new select

---
 apps/web/src/api/asset_interfaces/index.ts    |  1 -
 .../asset_interfaces/organizations/index.ts   |  1 -
 .../organizations/interfaces.ts               |  9 --
 .../users/ListUsersComponent.tsx              |  2 +-
 .../[userId]/_overview/UserDefaultAccess.tsx  | 24 +----
 .../SelectDatasetInput.tsx                    |  2 +-
 .../security/AccessRoleSelect.stories.tsx     | 92 +++++++++++++++++++
 .../features/security/AccessRoleSelect.tsx    | 26 ++++++
 .../security/WorkspaceRestrictions.tsx        | 26 ++----
 apps/web/src/components/ui/select/Select.tsx  | 43 ++++++---
 .../ui/select/SelectMultiple.stories.tsx      |  2 +-
 .../components/ui/select/SelectMultiple.tsx   |  2 +-
 .../src/components/ui/select/SelectOld.tsx    |  4 +-
 apps/web/src/components/ui/select/index.ts    |  2 +-
 .../controllers/HomePage/NewChatWarning.tsx   |  6 +-
 apps/web/src/lib/organization/translations.ts | 33 +++++--
 16 files changed, 199 insertions(+), 76 deletions(-)
 delete mode 100644 apps/web/src/api/asset_interfaces/organizations/index.ts
 delete mode 100644 apps/web/src/api/asset_interfaces/organizations/interfaces.ts
 create mode 100644 apps/web/src/components/features/security/AccessRoleSelect.stories.tsx
 create mode 100644 apps/web/src/components/features/security/AccessRoleSelect.tsx

diff --git a/apps/web/src/api/asset_interfaces/index.ts b/apps/web/src/api/asset_interfaces/index.ts
index 7d3cb8c59..5c09795f1 100644
--- a/apps/web/src/api/asset_interfaces/index.ts
+++ b/apps/web/src/api/asset_interfaces/index.ts
@@ -6,7 +6,6 @@ export * from './dataset_groups';
 export * from './datasets';
 export * from './datasources';
 export * from './metric';
-export * from './organizations';
 export * from './permission';
 export * from './permission_groups';
 export * from './search';
diff --git a/apps/web/src/api/asset_interfaces/organizations/index.ts b/apps/web/src/api/asset_interfaces/organizations/index.ts
deleted file mode 100644
index 957860982..000000000
--- a/apps/web/src/api/asset_interfaces/organizations/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './interfaces';
diff --git a/apps/web/src/api/asset_interfaces/organizations/interfaces.ts b/apps/web/src/api/asset_interfaces/organizations/interfaces.ts
deleted file mode 100644
index bb2c45314..000000000
--- a/apps/web/src/api/asset_interfaces/organizations/interfaces.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { OrganizationRole } from '@buster/server-shared/organization';
-
-export const BusterOrganizationRoleLabels: Record<OrganizationRole, string> = {
-  workspace_admin: 'Workspace Admin',
-  data_admin: 'Data Admin',
-  querier: 'Querier',
-  restricted_querier: 'Restricted Querier',
-  viewer: 'Viewer',
-};
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/ListUsersComponent.tsx b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/ListUsersComponent.tsx
index 3b0ad6bbf..d8ea40aba 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/ListUsersComponent.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/ListUsersComponent.tsx
@@ -32,7 +32,7 @@ export const ListUsersComponent: React.FC<{
         dataIndex: 'role',
         width: 165,
         render: (role: OrganizationUser['role']) => {
-          return <Text variant="secondary">{OrganizationUserRoleText[role]}</Text>;
+          return <Text variant="secondary">{OrganizationUserRoleText[role].title}</Text>;
         }
       }
     ],
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/_overview/UserDefaultAccess.tsx b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/_overview/UserDefaultAccess.tsx
index 6acb5084f..4a0c4d35f 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/_overview/UserDefaultAccess.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/_overview/UserDefaultAccess.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { BusterOrganizationRoleLabels } from '@/api/asset_interfaces';
 import { useUpdateUser } from '@/api/buster_rest/users';
 import {
   Card,
@@ -14,6 +13,8 @@ import { Text } from '@/components/ui/typography';
 import { useMemoizedFn } from '@/hooks';
 import { User } from '@buster/server-shared/user';
 import type { OrganizationUser } from '@buster/server-shared/organization';
+import { OrganizationUserRoleText } from '@/lib/organization/translations';
+import { AccessRoleSelect } from '@/components/features/security/AccessRoleSelect';
 
 export const UserDefaultAccess: React.FC<{
   user: OrganizationUser;
@@ -41,20 +42,6 @@ export const UserDefaultAccess: React.FC<{
   );
 };
 
-const accessOptions: SelectItem<OrganizationUser['role']>[] = [
-  { label: BusterOrganizationRoleLabels.data_admin, value: 'data_admin' },
-  {
-    label: BusterOrganizationRoleLabels.workspace_admin,
-    value: 'workspace_admin'
-  },
-  { label: BusterOrganizationRoleLabels.querier, value: 'querier' },
-  {
-    label: BusterOrganizationRoleLabels.restricted_querier,
-    value: 'restricted_querier'
-  },
-  { label: BusterOrganizationRoleLabels.viewer, value: 'viewer' }
-];
-
 const DefaultAccessCard = React.memo(
   ({
     role,
@@ -91,12 +78,7 @@ const DefaultAccessCard = React.memo(
                       : 'Only admins can change access'
                     : undefined
                 }>
-                <Select
-                  items={accessOptions}
-                  value={role}
-                  onChange={onChange}
-                  disabled={isDisabled}
-                />
+                <AccessRoleSelect role={role} onChange={onChange} />
               </AppTooltip>
             </div>
           </div>
diff --git a/apps/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx b/apps/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
index eefe109ad..efd9cb6a9 100644
--- a/apps/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
+++ b/apps/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useGetDatasets } from '@/api/buster_rest/datasets';
-import { Select, type SelectItem } from '@/components/ui/select/SelectOld';
+import { Select, type SelectItem } from '@/components/ui/select';
 import { SelectMultiple } from '@/components/ui/select/SelectMultiple';
 import { useMemoizedFn } from '@/hooks';
 
diff --git a/apps/web/src/components/features/security/AccessRoleSelect.stories.tsx b/apps/web/src/components/features/security/AccessRoleSelect.stories.tsx
new file mode 100644
index 000000000..10cceeadd
--- /dev/null
+++ b/apps/web/src/components/features/security/AccessRoleSelect.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { AccessRoleSelect } from './AccessRoleSelect';
+import type { OrganizationRole } from '@buster/server-shared/organization';
+
+const meta: Meta<typeof AccessRoleSelect> = {
+  title: 'Features/Security/AccessRoleSelect',
+  component: AccessRoleSelect,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A select component for choosing organization access roles with titles and descriptions.'
+      }
+    }
+  },
+  argTypes: {
+    role: {
+      control: 'select',
+      options: ['viewer', 'restricted_querier', 'querier', 'data_admin', 'workspace_admin'],
+      description: 'The currently selected organization role'
+    },
+    onChange: {
+      action: 'role-changed',
+      description: 'Callback function called when role selection changes'
+    }
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessRoleSelect>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    role: 'viewer',
+    onChange: action('role-changed')
+  }
+};
+
+// Interactive story where users can change roles
+export const Interactive: Story = {
+  args: {
+    role: 'querier',
+    onChange: action('role-changed')
+  }
+};
+
+// Stories for each specific role
+export const Viewer: Story = {
+  args: {
+    role: 'viewer',
+    onChange: action('role-changed')
+  }
+};
+
+export const RestrictedQuerier: Story = {
+  args: {
+    role: 'restricted_querier',
+    onChange: action('role-changed')
+  }
+};
+
+export const Querier: Story = {
+  args: {
+    role: 'querier',
+    onChange: action('role-changed')
+  }
+};
+
+export const DataAdmin: Story = {
+  args: {
+    role: 'data_admin',
+    onChange: action('role-changed')
+  }
+};
+
+export const WorkspaceAdmin: Story = {
+  args: {
+    role: 'workspace_admin',
+    onChange: action('role-changed')
+  }
+};
+
+// Story without initial role (uses default)
+export const NoInitialRole: Story = {
+  args: {
+    onChange: action('role-changed')
+  }
+};
diff --git a/apps/web/src/components/features/security/AccessRoleSelect.tsx b/apps/web/src/components/features/security/AccessRoleSelect.tsx
new file mode 100644
index 000000000..176e5b409
--- /dev/null
+++ b/apps/web/src/components/features/security/AccessRoleSelect.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Select, type SelectItem } from '@/components/ui/select';
+import { OrganizationRoleEnum, type OrganizationRole } from '@buster/server-shared/organization';
+import { OrganizationUserRoleText } from '@/lib/organization';
+
+const items: SelectItem<OrganizationRole>[] = Object.values(OrganizationRoleEnum).map((role) => ({
+  label: OrganizationUserRoleText[role as OrganizationRole].title,
+  secondaryLabel: OrganizationUserRoleText[role as OrganizationRole].description,
+  value: role as OrganizationRole
+}));
+
+interface AccessRoleSelectProps {
+  role?: OrganizationRole;
+  onChange: (role: OrganizationRole) => void;
+}
+
+export const AccessRoleSelect = ({ role = 'viewer', onChange }: AccessRoleSelectProps) => {
+  return (
+    <Select
+      items={items}
+      className="w-36 max-w-72"
+      value={role}
+      onChange={(v) => onChange(v as OrganizationRole)}
+    />
+  );
+};
diff --git a/apps/web/src/components/features/security/WorkspaceRestrictions.tsx b/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
index e689c24ed..e2af92a9f 100644
--- a/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
+++ b/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
@@ -12,11 +12,12 @@ import type {
   GetWorkspaceSettingsResponse,
   UpdateWorkspaceSettingsRequest
 } from '@buster/server-shared/security';
-import { Select, type SelectItem } from '@/components/ui/select';
-import { type OrganizationRole, OrganizationRoleEnum } from '@buster/server-shared/organization';
-import { OrganizationUserRoleText } from '@/lib/organization/translations';
+import { type SelectItem } from '@/components/ui/select';
+import { type OrganizationRole } from '@buster/server-shared/organization';
 import { useGetDatasets } from '@/api/buster_rest/datasets';
 import { SelectMultiple } from '@/components/ui/select/SelectMultiple';
+import { AccessRoleSelect } from './AccessRoleSelect';
+import { useMemoizedFn } from '@/hooks';
 
 export const WorkspaceRestrictions = React.memo(() => {
   const { data: workspaceSettings } = useGetWorkspaceSettings();
@@ -31,7 +32,7 @@ export const WorkspaceRestrictions = React.memo(() => {
       />,
       <DefaultRole
         key="default-role"
-        default_role={workspaceSettings?.default_role ?? 'viewer' as OrganizationRole}
+        default_role={workspaceSettings?.default_role ?? ('viewer' as OrganizationRole)}
         updateWorkspaceSettings={updateWorkspaceSettings}
       />,
       <DefaultDatasets
@@ -84,13 +85,6 @@ const DefaultRole = ({
 }: Pick<GetWorkspaceSettingsResponse, 'default_role'> & {
   updateWorkspaceSettings: (request: UpdateWorkspaceSettingsRequest) => Promise<unknown>;
 }) => {
-  const items: SelectItem<OrganizationRole>[] = useMemo(() => {
-    return Object.values(OrganizationRoleEnum).map((role) => ({
-      label: OrganizationUserRoleText[role as OrganizationRole],
-      value: role as OrganizationRole
-    }));
-  }, []);
-
   return (
     <div className="flex items-center justify-between">
       <div className="flex min-w-0 flex-1 flex-col space-y-0.5">
@@ -99,13 +93,11 @@ const DefaultRole = ({
           {`Select which default role is assigned to new users`}
         </Text>
       </div>
-      <Select
-        items={items}
-        className="w-36 max-w-72"
-        value={default_role}
-        onChange={(v) => {
+      <AccessRoleSelect
+        role={default_role}
+        onChange={useMemoizedFn((v) => {
           updateWorkspaceSettings({ default_role: v });
-        }}
+        })}
       />
     </div>
   );
diff --git a/apps/web/src/components/ui/select/Select.tsx b/apps/web/src/components/ui/select/Select.tsx
index 5b72c7fa6..8df96a34d 100644
--- a/apps/web/src/components/ui/select/Select.tsx
+++ b/apps/web/src/components/ui/select/Select.tsx
@@ -27,10 +27,10 @@ export interface SelectItem<T = string> {
 
 type SearchFunction<T> = (item: SelectItem<T>, searchTerm: string) => boolean;
 
-export interface SelectProps<T> {
+// Base interface with common properties
+interface BaseSelectProps<T> {
   items: SelectItem<T>[] | SelectItemGroup<T>[];
   disabled?: boolean;
-  onChange: (value: T | null) => void;
   placeholder?: string;
   value?: string | undefined;
   onOpenChange?: (open: boolean) => void;
@@ -41,10 +41,24 @@ export interface SelectProps<T> {
   dataTestId?: string;
   loading?: boolean;
   search?: boolean | SearchFunction<T>;
-  clearable?: boolean;
   emptyMessage?: string;
 }
 
+// Clearable version - onChange can return null
+interface ClearableSelectProps<T> extends BaseSelectProps<T> {
+  clearable: true;
+  onChange: (value: T | null) => void;
+}
+
+// Non-clearable version - onChange cannot return null
+interface NonClearableSelectProps<T> extends BaseSelectProps<T> {
+  clearable?: false;
+  onChange: (value: T) => void;
+}
+
+// Union type for type-safe props
+export type SelectProps<T> = ClearableSelectProps<T> | NonClearableSelectProps<T>;
+
 function isGroupedItems<T>(
   items: SelectItem<T>[] | SelectItemGroup<T>[]
 ): items is SelectItemGroup<T>[] {
@@ -83,17 +97,19 @@ const SelectItemComponent = React.memo(
         onSelect={onSelect}
         disabled={item.disabled}
         className={cn(
-          'flex h-7 items-center gap-2 px-2',
+          'flex min-h-7 items-center gap-2 px-2',
           item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
           isSelected && 'bg-item-select'
         )}>
         {item.icon}
         <span className="flex-1">
           {showIndex && `${index + 1}. `}
-          {item.label}
-          {item.secondaryLabel && (
-            <span className="text-text-secondary ml-2 text-sm">{item.secondaryLabel}</span>
-          )}
+          <div className="flex flex-col space-y-0">
+            <span className="text-foreground">{item.label}</span>
+            {item.secondaryLabel && (
+              <span className="text-text-secondary text-sm">{item.secondaryLabel}</span>
+            )}
+          </div>
         </span>
         {isSelected && (
           <div className="text-icon-color flex h-4 w-4 items-center">
@@ -191,11 +207,14 @@ function SelectComponent<T = string>({
     (e: React.MouseEvent) => {
       e.stopPropagation();
       e.preventDefault();
-      onChange(null);
-      setSearchValue('');
-      handleOpenChange(false);
+      // Type assertion is safe here because handleClear is only called when clearable is true
+      if (clearable) {
+        (onChange as (value: T | null) => void)(null);
+        setSearchValue('');
+        handleOpenChange(false);
+      }
     },
-    [onChange, handleOpenChange]
+    [onChange, handleOpenChange, clearable]
   );
 
   const handleInputChange = React.useCallback(
diff --git a/apps/web/src/components/ui/select/SelectMultiple.stories.tsx b/apps/web/src/components/ui/select/SelectMultiple.stories.tsx
index 29f1354be..71c1f3a2b 100644
--- a/apps/web/src/components/ui/select/SelectMultiple.stories.tsx
+++ b/apps/web/src/components/ui/select/SelectMultiple.stories.tsx
@@ -4,7 +4,7 @@ import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { useMemo, useState } from 'react';
-import type { SelectItem } from './SelectOld';
+import type { SelectItem } from './Select';
 import { SelectMultiple } from './SelectMultiple';
 
 const meta = {
diff --git a/apps/web/src/components/ui/select/SelectMultiple.tsx b/apps/web/src/components/ui/select/SelectMultiple.tsx
index 5f168945a..0520f4a19 100644
--- a/apps/web/src/components/ui/select/SelectMultiple.tsx
+++ b/apps/web/src/components/ui/select/SelectMultiple.tsx
@@ -6,7 +6,7 @@ import { useMemoizedFn } from '@/hooks';
 import { cn } from '@/lib/classMerge';
 import { Dropdown, type DropdownItem, type DropdownProps } from '../dropdown/Dropdown';
 import { InputTag } from '../inputs/InputTag';
-import type { SelectItem } from './SelectOld';
+import type { SelectItem } from './Select';
 import { selectVariants } from './SelectBase';
 import { CircleSpinnerLoader } from '../loaders';
 
diff --git a/apps/web/src/components/ui/select/SelectOld.tsx b/apps/web/src/components/ui/select/SelectOld.tsx
index 3345246c1..1eff053d1 100644
--- a/apps/web/src/components/ui/select/SelectOld.tsx
+++ b/apps/web/src/components/ui/select/SelectOld.tsx
@@ -36,6 +36,7 @@ export interface SelectProps<T> {
   open?: boolean;
   showIndex?: boolean;
   className?: string;
+  contentClassName?: string;
   defaultValue?: string;
   dataTestId?: string;
   loading?: boolean;
@@ -50,6 +51,7 @@ export const Select = <T extends string>({
   value,
   onOpenChange,
   open,
+  contentClassName,
   loading = false,
   className = '',
   defaultValue,
@@ -69,7 +71,7 @@ export const Select = <T extends string>({
       <SelectTrigger className={className} data-testid={dataTestId} loading={loading}>
         <SelectValue placeholder={placeholder} defaultValue={value || defaultValue} />
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent className={contentClassName}>
         {items.map((item, index) => (
           <SelectItemSelector
             key={index.toString()}
diff --git a/apps/web/src/components/ui/select/index.ts b/apps/web/src/components/ui/select/index.ts
index 738e015b0..7868ecbae 100644
--- a/apps/web/src/components/ui/select/index.ts
+++ b/apps/web/src/components/ui/select/index.ts
@@ -1 +1 @@
-export * from './SelectOld';
+export * from './Select';
diff --git a/apps/web/src/controllers/HomePage/NewChatWarning.tsx b/apps/web/src/controllers/HomePage/NewChatWarning.tsx
index b4d6204d9..fa01e8bda 100644
--- a/apps/web/src/controllers/HomePage/NewChatWarning.tsx
+++ b/apps/web/src/controllers/HomePage/NewChatWarning.tsx
@@ -5,11 +5,11 @@ import { ArrowUpRight, CircleCheck, AlertWarning } from '@/components/ui/icons';
 import { Paragraph, Text } from '@/components/ui/typography';
 import { cn } from '@/lib/classMerge';
 import type { useNewChatWarning } from './useNewChatWarning';
-import { BusterOrganizationRoleLabels } from '@/api/asset_interfaces/organizations';
 import type { OrganizationRole } from '@buster/server-shared/organization';
+import { OrganizationUserRoleText } from '@/lib/organization/translations';
 
-const translateRole = (role: OrganizationRole) => {
-  return BusterOrganizationRoleLabels[role];
+const translateRole = (role: OrganizationRole): string => {
+  return OrganizationUserRoleText[role].title;
 };
 
 export const NewChatWarning = React.memo(
diff --git a/apps/web/src/lib/organization/translations.ts b/apps/web/src/lib/organization/translations.ts
index 0a2dd79d9..d54b2e852 100644
--- a/apps/web/src/lib/organization/translations.ts
+++ b/apps/web/src/lib/organization/translations.ts
@@ -1,9 +1,30 @@
 import type { OrganizationRole } from '@buster/server-shared/organization';
 
-export const OrganizationUserRoleText: Record<OrganizationRole, string> = {
-  data_admin: 'Data Admin',
-  workspace_admin: 'Workspace Admin',
-  querier: 'Querier',
-  restricted_querier: 'Restricted Querier',
-  viewer: 'Viewer',
+export const OrganizationUserRoleText: Record<
+  OrganizationRole,
+  {
+    title: string;
+    description: string;
+  }
+> = {
+  viewer: {
+    title: 'Viewer',
+    description: 'Can only view metrics that have been shared with them.'
+  },
+  restricted_querier: {
+    title: 'Restricted Querier',
+    description: 'Can only query datasets that have been provisioned to them.'
+  },
+  querier: {
+    title: 'Querier',
+    description: 'Can query all datasets associated with the workspace.'
+  },
+  data_admin: {
+    title: 'Data Admin',
+    description: 'Full access, except for billing.'
+  },
+  workspace_admin: {
+    title: 'Workspace Admin',
+    description: 'Full access, including billing.'
+  }
 };