refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/UsersSelector/UsersSelector.mocks.ts

@@ -0,0 +1,29 @@
+import { UserViewModel } from '@/portainer/models/user';
+
+export function createMockUser(id: number, username: string): UserViewModel {
+  return {
+    Id: id,
+    Username: username,
+    Role: 2,
+    UserTheme: '',
+    EndpointAuthorizations: {},
+    PortainerAuthorizations: {
+      PortainerDockerHubInspect: true,
+      PortainerEndpointGroupInspect: true,
+      PortainerEndpointGroupList: true,
+      PortainerEndpointInspect: true,
+      PortainerEndpointList: true,
+      PortainerMOTD: true,
+      PortainerRoleList: true,
+      PortainerTeamList: true,
+      PortainerTemplateInspect: true,
+      PortainerTemplateList: true,
+      PortainerUserInspect: true,
+      PortainerUserList: true,
+      PortainerUserMemberships: true,
+    },
+    RoleName: 'user',
+    Checked: false,
+    AuthenticationMethod: '',
+  };
+}

app/react/components/UsersSelector/UsersSelector.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { UsersSelector } from './UsersSelector';
+import { createMockUser } from './UsersSelector.mocks';
+
+const meta: Meta = {
+  title: 'Components/UsersSelector',
+  component: UsersSelector,
+};
+
+export default meta;
+
+export { Example };
+
+function Example() {
+  const [selectedUsers, setSelectedUsers] = useState([1]);
+
+  const users = [createMockUser(1, 'user1'), createMockUser(2, 'user2')];
+
+  return (
+    <UsersSelector
+      value={selectedUsers}
+      onChange={setSelectedUsers}
+      users={users}
+      placeholder="Select one or more users"
+    />
+  );
+}

app/react/components/UsersSelector/UsersSelector.tsx

@@ -0,0 +1,41 @@
+import { User, UserId } from '@/portainer/users/types';
+
+import { Select } from '@@/form-components/ReactSelect';
+
+interface Props {
+  name?: string;
+  value: UserId[];
+  onChange(value: UserId[]): void;
+  users: User[];
+  dataCy?: string;
+  inputId?: string;
+  placeholder?: string;
+}
+
+export function UsersSelector({
+  name,
+  value,
+  onChange,
+  users,
+  dataCy,
+  inputId,
+  placeholder,
+}: Props) {
+  return (
+    <Select
+      isMulti
+      name={name}
+      getOptionLabel={(user) => user.Username}
+      getOptionValue={(user) => `${user.Id}`}
+      options={users}
+      value={users.filter((user) => value.includes(user.Id))}
+      closeMenuOnSelect={false}
+      onChange={(selectedUsers) =>
+        onChange(selectedUsers.map((user) => user.Id))
+      }
+      data-cy={dataCy}
+      inputId={inputId}
+      placeholder={placeholder}
+    />
+  );
+}

app/react/components/UsersSelector/index.ts

@@ -0,0 +1 @@
+export { UsersSelector } from './UsersSelector';