feat(UiKit): Users select

.changeset/cuddly-cycles-nail.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-ui-kit": minor
+"@rocket.chat/ui-kit": patch
+---
+
+Introduce users select to UiKit

packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx

@@ -0,0 +1,38 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { ReactElement } from 'react';
+
+type UserAutoCompleteMultipleOptionProps = {
+  label: {
+    _federated?: boolean;
+  } & Pick<IUser, 'username' | 'name'>;
+};
+
+const UserAutoCompleteMultipleOption = ({
+  label,
+  ...props
+}: UserAutoCompleteMultipleOptionProps): ReactElement => {
+  const { name, username, _federated } = label;
+
+  return (
+    <Option
+      {...props}
+      data-qa-type='autocomplete-user-option'
+      avatar={<UserAvatar username={username || ''} size='x20' />}
+      icon={_federated ? 'globe' : undefined}
+      key={username}
+      label={
+        (
+          <>
+            {name || username}{' '}
+            {!_federated && <OptionDescription>({username})</OptionDescription>}
+          </>
+        ) as any
+      }
+      children={undefined}
+    />
+  );
+};
+
+export default UserAutoCompleteMultipleOption;

packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx

@@ -0,0 +1,37 @@
+import { Options } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement, Ref } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
+
+import UserAutoCompleteMultipleOption from './MulitUserAutoCompleteMultipleOption';
+
+// This is a hack in order to bypass the MultiSelect filter.
+// The select requires a forwarded ref component in the renderOptions property
+// but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
+
+type OptionsContextValue = {
+  options: ComponentProps<typeof Options>['options'];
+};
+
+export const OptionsContext = createContext<OptionsContextValue>({
+  options: [],
+});
+const MultiUserAutoCompleteMultipleOptions = forwardRef(
+  function MultiUserAutoCompleteMultipleOptions(
+    { onSelect, ...props }: ComponentProps<typeof Options>,
+    ref: Ref<HTMLElement>
+  ): ReactElement {
+    const { options } = useContext(OptionsContext);
+    return (
+      <Options
+        {...props}
+        key='AutocompleteOptions'
+        options={options}
+        onSelect={onSelect}
+        ref={ref}
+        renderItem={UserAutoCompleteMultipleOption}
+      />
+    );
+  }
+);
+
+export default MultiUserAutoCompleteMultipleOptions;

packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx

@@ -0,0 +1,157 @@
+import { MultiSelectFiltered, Box, Chip } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useQuery } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { memo, useState, useCallback, useMemo } from 'react';
+
+import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+import AutocompleteOptions, {
+  OptionsContext,
+} from './MultiUserAutoCompleteMultipleOptions';
+
+type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
+
+type MultiUserAutoCompleteOptionType = {
+  name: string;
+  username: string;
+};
+
+type MultiUserAutoCompleteOptions = {
+  [k: string]: MultiUserAutoCompleteOptionType;
+};
+
+const MultiUsersSelectElement = ({
+  block,
+  context,
+}: MultiUsersSelectElementProps): ReactElement => {
+  const [{ loading, value, error }, action] = useUiKitState(block, context);
+  const fromTextObjectToString = useStringFromTextObject();
+  const [filter, setFilter] = useState('');
+  const [selectedCache, setSelectedCache] =
+    useState<MultiUserAutoCompleteOptions>({});
+
+  const debouncedFilter = useDebouncedValue(filter, 500);
+  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+  const { data } = useQuery(
+    ['users.autocomplete', debouncedFilter],
+    async () => {
+      const users = await getUsers({
+        selector: JSON.stringify({ term: debouncedFilter }),
+      });
+      const options = users.items.map(
+        (item): [string, MultiUserAutoCompleteOptionType] => [
+          item.username,
+          item,
+        ]
+      );
+
+      return options;
+    },
+    { keepPreviousData: true }
+  );
+
+  const options = useMemo(() => data || [], [data]);
+
+  const onAddUser = useCallback(
+    (username: string): void => {
+      const user = options.find(([val]) => val === username)?.[1];
+      if (!user) {
+        throw new Error(
+          'UserAutoCompleteMultiple - onAddSelected - failed to cache option'
+        );
+      }
+      setSelectedCache((selectedCache) => ({
+        ...selectedCache,
+        [username]: user,
+      }));
+    },
+    [setSelectedCache, options]
+  );
+
+  const onRemoveUser = useCallback(
+    (username: string): void =>
+      setSelectedCache((selectedCache) => {
+        const users = { ...selectedCache };
+        delete users[username];
+        return users;
+      }),
+    [setSelectedCache]
+  );
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  const handleOnChange = useCallback(
+    (usernames: string[]) => {
+      handleChange(usernames);
+      const newAddedUsername = usernames.filter(
+        (username) => !value.includes(username)
+      )[0];
+      const removedUsername = value.filter(
+        (username) => !usernames.includes(username)
+      )[0];
+      setFilter('');
+      newAddedUsername && onAddUser(newAddedUsername);
+      removedUsername && onRemoveUser(removedUsername);
+    },
+    [handleChange, setFilter, onAddUser, onRemoveUser, value]
+  );
+
+  return (
+    <OptionsContext.Provider value={{ options }}>
+      <MultiSelectFiltered
+        error={error}
+        disabled={loading}
+        data-qa-type='user-auto-complete-input'
+        placeholder={fromTextObjectToString(block.placeholder)}
+        value={value}
+        onChange={handleOnChange}
+        filter={filter}
+        setFilter={setFilter}
+        renderSelected={({
+          value,
+          onMouseDown,
+        }: {
+          value: string;
+          onMouseDown: () => void;
+        }) => {
+          const currentCachedOption = selectedCache[value] || {};
+
+          return (
+            <Chip
+              key={value}
+              height='x20'
+              onMouseDown={onMouseDown}
+              mie={4}
+              mb={2}
+            >
+              <UserAvatar size='x20' username={value} />
+              <Box is='span' margin='none' mis={4}>
+                {currentCachedOption.name ||
+                  currentCachedOption.username ||
+                  value}
+              </Box>
+            </Chip>
+          );
+        }}
+        renderOptions={AutocompleteOptions}
+        options={options
+          .concat(Object.entries(selectedCache))
+          .map(([, item]) => [item.username, item.name || item.username])}
+        data-qa='create-channel-users-autocomplete'
+      />
+    </OptionsContext.Provider>
+  );
+};
+
+export default memo(MultiUsersSelectElement);

packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx

@@ -0,0 +1,83 @@
+import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+
+type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
+
+type UserAutoCompleteOptionType = {
+  value: string;
+  label: string;
+};
+
+const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
+  const [{ loading, value }, action] = useUiKitState(block, context);
+
+  const [filter, setFilter] = useState('');
+  const debouncedFilter = useDebouncedValue(filter, 1000);
+  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+  const { data } = useQuery(
+    ['users.autoComplete', debouncedFilter],
+    async () => {
+      const users = await getUsers({
+        selector: JSON.stringify({ term: debouncedFilter }),
+      });
+      const options = users.items.map(
+        (item): UserAutoCompleteOptionType => ({
+          value: item.username,
+          label: item.name || item.username,
+        })
+      );
+
+      return options;
+    },
+    { keepPreviousData: true }
+  );
+
+  const options = useMemo(() => data || [], [data]);
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  return (
+    <AutoComplete
+      //   error={error}
+      disabled={loading}
+      value={value}
+      options={options}
+      onChange={handleChange}
+      filter={filter}
+      setFilter={setFilter}
+      data-qa-id='UserAutoComplete'
+      renderSelected={({ selected: { value, label } }) => (
+        <Chip height='x20' value={value} mie={4}>
+          <UserAvatar size='x20' username={value} />
+          <Box verticalAlign='middle' is='span' margin='none' mi={4}>
+            {label}
+          </Box>
+        </Chip>
+      )}
+      renderItem={({ value, label, ...props }) => (
+        <Option
+          key={value}
+          label={label}
+          avatar={<UserAvatar size='x20' username={value} />}
+          {...props}
+        />
+      )}
+    />
+  );
+};
+
+export default UsersSelectElement;

packages/fuselage-ui-kit/src/stories/payloads/actions.ts

@@ -31,11 +31,11 @@ export const actionsWithAllSelects: readonly UiKit.LayoutBlock[] = [
         blockId: 'dummy-block-id',
         actionId: 'dummy-action-id',
         type: 'users_select',
-        // placeholder: {
-        //   type: 'plain_text',
-        //   text: 'Select a user',
-        //   emoji: true,
-        // },
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select a user',
+          emoji: true,
+        },
       },
       {
         appId: 'dummy-app-id',
@@ -122,11 +122,11 @@ export const actionsWithInitializedSelects: readonly UiKit.LayoutBlock[] = [
         blockId: 'dummy-block-id',
         actionId: 'dummy-action-id',
         type: 'users_select',
-        // placeholder: {
-        //   type: 'plain_text',
-        //   text: 'Select a user',
-        //   emoji: true,
-        // },
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select a user',
+          emoji: true,
+        },
         // initialUser: 'U123',
       },
       {