QueueSelect

import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

const queues: QueueInfo[] = [
    {key: 'DEV', display: 'Development'},
    {key: 'DESIGN', display: 'Design'},
];

<QueueSelect
    queues={queues}
    defaultQueue={queues[0]}
    onChange={(queue) => console.log(queue)}
/>;

import React, {useEffect, useState} from 'react';
import {CancellablePromise} from '@gravity-ui/sdk';
import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

interface Props {
    trackerApi: TrackerApi;
    onChange: (queue: QueueInfo) => void;
}

export const QueueSelectWithApi: React.FC<Props> = ({trackerApi, onChange}) => {
    const [queues, setQueues] = useState<QueueInfo[]>([]);
    const [loading, setLoading] = useState(true);

    // Load all queues on mount
    useEffect(() => {
        trackerApi.v3
            .get['/queues']()
            .then((result) => setQueues(result.data))
            .finally(() => setLoading(false));
    }, [trackerApi]);

    // Suggest on user input
    const handleSearch = (text: string): CancellablePromise<QueueInfo[]> => {
        const promise = trackerApi.v3
            .get['/queues/_suggest']({queryParams: {input: text, fields: []}})
            .then((result) => result.data);

        return new CancellablePromise(promise, () => {});
    };

    return (
        <QueueSelect
            queues={queues}
            loading={loading}
            onSearch={handleSearch}
            onChange={onChange}
            placeholder="Select a queue"
        />
    );
};