feat(UiKit): Users select

.changeset/cuddly-cycles-nail.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-ui-kit": minor
+"@rocket.chat/ui-kit": minor
+---
+
+Introduced new elements for apps to select users

packages/fuselage-ui-kit/jest.config.ts

@@ -24,4 +24,12 @@ export default {
       },
     ],
   },
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+    '^react($|/.+)': '<rootDir>/../../node_modules/react$1',
+  },
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/jest.setup.ts',
+  ],
 };

packages/fuselage-ui-kit/jest.setup.ts

@@ -0,0 +1,11 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+global.TextEncoder = TextEncoder;
+// @ts-ignore
+global.TextDecoder = TextDecoder;
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

packages/fuselage-ui-kit/package.json

@@ -34,6 +34,7 @@
     ".:build:cjs": "tsc -p tsconfig-cjs.json",
     "test": "jest",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "testunit": "jest",
     "typecheck": "tsc --noEmit",
     "docs": "cross-env NODE_ENV=production build-storybook -o ../../static/fuselage-ui-kit",
     "storybook": "start-storybook -p 6006 --no-version-updates",
@@ -68,6 +69,7 @@
     "@rocket.chat/fuselage-hooks": "^0.33.1",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/icons": "^0.34.0",
+    "@rocket.chat/mock-providers": "workspace:^",
     "@rocket.chat/prettier-config": "~0.31.25",
     "@rocket.chat/styled": "~0.31.25",
     "@rocket.chat/ui-avatar": "workspace:^",
@@ -82,8 +84,9 @@
     "@storybook/source-loader": "~6.5.16",
     "@storybook/theming": "~6.5.16",
     "@tanstack/react-query": "^4.16.1",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.3",
     "@types/babel__preset-env": "^7.9.4",
     "@types/react": "~17.0.69",

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

@@ -0,0 +1,105 @@
+import { MockedServerContext } from '@rocket.chat/mock-providers';
+import type { MultiUsersSelectElement as MultiUsersSelectElementType } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { contextualBarParser } from '../../surfaces';
+import MultiUsersSelectElement from './MultiUsersSelectElement';
+import { useUsersData } from './hooks/useUsersData';
+
+const usersBlock: MultiUsersSelectElementType = {
+  type: 'multi_users_select',
+  appId: 'test',
+  blockId: 'test',
+  actionId: 'test',
+};
+
+jest.mock('./hooks/useUsersData');
+
+const mockedOptions = [
+  {
+    value: 'user1_id',
+    label: 'User 1',
+  },
+  {
+    value: 'user2_id',
+    label: 'User 2',
+  },
+  {
+    value: 'user3_id',
+    label: 'User 3',
+  },
+];
+
+const mockUseUsersData = jest.mocked(useUsersData);
+mockUseUsersData.mockReturnValue(mockedOptions);
+
+describe('UiKit MultiUsersSelect Element', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    render(
+      <MockedServerContext>
+        <MultiUsersSelectElement
+          index={0}
+          block={usersBlock}
+          context={BlockContext.FORM}
+          surfaceRenderer={contextualBarParser}
+        />
+      </MockedServerContext>
+    );
+  });
+
+  it('should render a UiKit multiple users selector', async () => {
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should open the users selector', async () => {
+    const input = await screen.findByRole('textbox');
+    input.focus();
+
+    expect(await screen.findByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should select users', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option1 = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option1, { delay: null });
+
+    const option2 = (await screen.findAllByRole('option'))[2];
+    await userEvent.click(option2, { delay: null });
+
+    const selected = await screen.findAllByRole('button');
+    expect(selected[0]).toHaveValue('user1_id');
+    expect(selected[1]).toHaveValue('user3_id');
+  });
+
+  it('should remove a user', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option1 = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option1, { delay: null });
+
+    const option2 = (await screen.findAllByRole('option'))[2];
+    await userEvent.click(option2, { delay: null });
+
+    const selected1 = (await screen.findAllByRole('button'))[0];
+    expect(selected1).toHaveValue('user1_id');
+    await userEvent.click(selected1, { delay: null });
+
+    const remainingSelected = (await screen.findAllByRole('button'))[0];
+    expect(remainingSelected).toHaveValue('user3_id');
+  });
+});

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

@@ -0,0 +1,76 @@
+import {
+  Box,
+  Chip,
+  AutoComplete,
+  Option,
+  OptionAvatar,
+  OptionContent,
+  OptionDescription,
+} from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import type { ReactElement } from 'react';
+import { memo, useCallback, useState } from 'react';
+
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+import { useUsersData } from './hooks/useUsersData';
+
+type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
+
+const MultiUsersSelectElement = ({
+  block,
+  context,
+}: MultiUsersSelectElementProps): ReactElement => {
+  const [{ loading, value }, action] = useUiKitState(block, context);
+  const [filter, setFilter] = useState('');
+
+  const debouncedFilter = useDebouncedValue(filter, 500);
+
+  const data = useUsersData({ filter: debouncedFilter });
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  return (
+    <AutoComplete
+      value={value || []}
+      options={data}
+      placeholder={block.placeholder?.text}
+      disabled={loading}
+      filter={filter}
+      setFilter={setFilter}
+      onChange={handleChange}
+      multiple
+      renderSelected={({
+        selected: { value, label },
+        onRemove,
+        ...props
+      }): ReactElement => (
+        <Chip {...props} height='x20' value={value} onClick={onRemove} mie={4}>
+          <UserAvatar size='x20' username={value} />
+          <Box is='span' margin='none' mis={4}>
+            {label}
+          </Box>
+        </Chip>
+      )}
+      renderItem={({ value, label, ...props }): ReactElement => (
+        <Option key={value} {...props}>
+          <OptionAvatar>
+            <UserAvatar username={value} size='x20' />
+          </OptionAvatar>
+          <OptionContent>
+            {label} <OptionDescription>({value})</OptionDescription>
+          </OptionContent>
+        </Option>
+      )}
+    />
+  );
+};
+
+export default memo(MultiUsersSelectElement);

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

@@ -0,0 +1,82 @@
+import { MockedServerContext } from '@rocket.chat/mock-providers';
+import type { UsersSelectElement as UsersSelectElementType } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { contextualBarParser } from '../../surfaces';
+import UsersSelectElement from './UsersSelectElement';
+import { useUsersData } from './hooks/useUsersData';
+
+const userBlock: UsersSelectElementType = {
+  type: 'users_select',
+  appId: 'test',
+  blockId: 'test',
+  actionId: 'test',
+};
+
+jest.mock('./hooks/useUsersData');
+
+const mockedOptions = [
+  {
+    value: 'user1_id',
+    label: 'User 1',
+  },
+  {
+    value: 'user2_id',
+    label: 'User 2',
+  },
+  {
+    value: 'user3_id',
+    label: 'User 3',
+  },
+];
+
+const mockUseUsersData = jest.mocked(useUsersData);
+mockUseUsersData.mockReturnValue(mockedOptions);
+
+describe('UiKit UserSelect Element', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    render(
+      <MockedServerContext>
+        <UsersSelectElement
+          index={0}
+          block={userBlock}
+          context={BlockContext.FORM}
+          surfaceRenderer={contextualBarParser}
+        />
+      </MockedServerContext>
+    );
+  });
+
+  it('should render a UiKit user selector', async () => {
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should open the user selector', async () => {
+    const input = await screen.findByRole('textbox');
+    input.focus();
+
+    expect(await screen.findByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should select a user', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option, { delay: null });
+
+    const selected = await screen.findByRole('button');
+    expect(selected).toHaveValue('user1_id');
+  });
+});

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

@@ -0,0 +1,62 @@
+import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useCallback, useState } from 'react';
+
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+import { useUsersData } from './hooks/useUsersData';
+
+type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
+
+export type UserAutoCompleteOptionType = {
+  value: string;
+  label: string;
+};
+
+const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
+  const [{ value, loading }, action] = useUiKitState(block, context);
+
+  const [filter, setFilter] = useState('');
+  const debouncedFilter = useDebouncedValue(filter, 300);
+
+  const data = useUsersData({ filter: debouncedFilter });
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  return (
+    <AutoComplete
+      value={value}
+      placeholder={block.placeholder?.text}
+      disabled={loading}
+      options={data}
+      onChange={handleChange}
+      filter={filter}
+      setFilter={setFilter}
+      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}
+          {...props}
+          label={label}
+          avatar={<UserAvatar username={value} size='x20' />}
+        />
+      )}
+    />
+  );
+};
+
+export default UsersSelectElement;