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

app/react/components/TeamsSelector/TeamsSelector.mocks.ts

@@ -0,0 +1,9 @@
+import { TeamViewModel } from '@/portainer/models/team';
+
+export function createMockTeam(id: number, name: string): TeamViewModel {
+  return {
+    Id: id,
+    Name: name,
+    Checked: false,
+  };
+}

app/react/components/TeamsSelector/TeamsSelector.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { TeamsSelector } from './TeamsSelector';
+import { createMockTeam } from './TeamsSelector.mocks';
+
+const meta: Meta = {
+  title: 'Components/TeamsSelector',
+  component: TeamsSelector,
+};
+
+export default meta;
+export { Example };
+
+function Example() {
+  const [selectedTeams, setSelectedTeams] = useState([1]);
+
+  const teams = [createMockTeam(1, 'team1'), createMockTeam(2, 'team2')];
+
+  return (
+    <TeamsSelector
+      value={selectedTeams}
+      onChange={setSelectedTeams}
+      teams={teams}
+      placeholder="Select one or more teams"
+    />
+  );
+}

app/react/components/TeamsSelector/TeamsSelector.tsx

@@ -0,0 +1,41 @@
+import { Team, TeamId } from '@/portainer/teams/types';
+
+import { Select } from '@@/form-components/ReactSelect';
+
+interface Props {
+  name?: string;
+  value: TeamId[];
+  onChange(value: TeamId[]): void;
+  teams: Team[];
+  dataCy?: string;
+  inputId?: string;
+  placeholder?: string;
+}
+
+export function TeamsSelector({
+  name,
+  value,
+  onChange,
+  teams,
+  dataCy,
+  inputId,
+  placeholder,
+}: Props) {
+  return (
+    <Select
+      name={name}
+      isMulti
+      getOptionLabel={(team) => team.Name}
+      getOptionValue={(team) => String(team.Id)}
+      options={teams}
+      value={teams.filter((team) => value.includes(team.Id))}
+      closeMenuOnSelect={false}
+      onChange={(selectedTeams) =>
+        onChange(selectedTeams.map((team) => team.Id))
+      }
+      data-cy={dataCy}
+      inputId={inputId}
+      placeholder={placeholder}
+    />
+  );
+}

app/react/components/TeamsSelector/index.ts

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