snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-apps/public/slack/src/front-components/components/WorkspaceMemberPicker.tsx

@@ -0,0 +1,65 @@
+import { isNonEmptyString } from '@sniptt/guards';
+import { isDefined } from 'twenty-sdk/utils';
+import { useState } from 'react';
+
+import { SearchDropdownPicker } from 'src/front-components/components/SearchDropdownPicker';
+import { SlackPickedEntityButton } from 'src/front-components/components/SlackPickedEntityButton';
+import { useWorkspaceMemberSearch } from 'src/front-components/hooks/use-workspace-member-search';
+import { type WorkspaceMemberOption } from 'src/front-components/types/workspace-member-option.type';
+import { getMemberDisplayName } from 'src/front-components/utils/get-member-display-name.util';
+
+type WorkspaceMemberPickerProps = {
+  selectedMember: WorkspaceMemberOption | null;
+  onSelect: (member: WorkspaceMemberOption) => void;
+  onClear: () => void;
+  disabled?: boolean;
+};
+
+export const WorkspaceMemberPicker = ({
+  selectedMember,
+  onSelect,
+  onClear,
+  disabled,
+}: WorkspaceMemberPickerProps) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isReopening, setIsReopening] = useState(false);
+  const { options, isSearching, searchErrorMessage } = useWorkspaceMemberSearch(
+    { searchTerm },
+  );
+
+  if (isDefined(selectedMember)) {
+    return (
+      <SlackPickedEntityButton
+        name={getMemberDisplayName(selectedMember)}
+        changeLabel="Change the workspace member"
+        onChangeRequest={() => {
+          setIsReopening(true);
+          onClear();
+        }}
+        disabled={disabled}
+      />
+    );
+  }
+
+  return (
+    <SearchDropdownPicker
+      searchTerm={searchTerm}
+      onSearchTermChange={setSearchTerm}
+      options={options}
+      isSearching={isSearching}
+      onSelect={(member) => {
+        setIsReopening(false);
+        onSelect(member);
+      }}
+      getOptionKey={(member) => member.id}
+      getOptionName={(member) =>
+        isNonEmptyString(member.name) ? member.name : member.id
+      }
+      getOptionMeta={(member) => member.userEmail ?? undefined}
+      searchLabel="Search a workspace member by name"
+      emptyText={searchErrorMessage ?? 'No members found'}
+      disabled={disabled}
+      autoFocus={isReopening}
+    />
+  );
+};