@twilio/flex-ui/src/components/view/TeamsView/TeamsView.definitions.d.ts

Twilio Flex UI

import { FilterDefinition } from "../../../flex-ui-core/src";
import { RouteComponentProps } from "react-router-dom";
import { ITask, IWorker } from "../../../models";
import { SupervisorWorkerState } from "../../../state/State.definition";
import { LiveQueryError } from "../../../state/Supervisor/SupervisorState";
import { AppliedFilter, Teams } from "../../../state/Supervisor/SupervisorState.definitions";
import { FlexState } from "../../../store";
import { WorkerListFilter } from "../../supervisor/WorkersDataTable";
import { ThemeProps } from "../../theme";
import { metricDataType } from "../../supervisor/TeamFiltersPanel/AgentMetricsTab/AgentMetricsTab.definitions";
/**
 * The type of filters on teams view
 * @enum {"teams-view-search" | "teams-view-filter"} FiltersType
 * @property {"teams-view-search"} search search
 * @property {"teams-view-filter"} filter filter
 * @memberof TeamsView
 */
export declare enum FiltersType {
    search = "teams-view-search",
    filter = "teams-view-filter",
    legacy = "teams-view-legacy-query"
}
export declare enum TeamsViewChildrenKeys {
    agentsTable = "agents-table",
    taskCanvas = "task-canvas",
    workerCanvas = "worker-canvas",
    teamFilterPanel = "team-filter-panel",
    filters = "filters"
}
/**
 * @typedef {Function} TeamsView.FilterDefinitionFactory
 */
export type FilterDefinitionFactory = (state: FlexState, ownProps: TeamsViewProps) => FilterDefinition;
/**
 * Properties of Teams view.
 * @typedef TeamsView.TeamsViewProps
 * @property {RouteComponentProps<TeamsView.TeamsViewRouteParams>} [route] Represents route params.
 * @property {Array<FilterDefinition | FilterDefinitionFactory>} [filters] - List of filters or filterFactories
 * @property {AppliedFilter | Array<AppliedFilter> | string} [hiddenFilter] - Hidden filter definition
 */
export type TeamsViewProps = Omit<TeamsViewImplOwnProps, "selectedTask" | "selectedWorker"> & ViewProps<RouteComponentProps>;
export type TeamsViewProgrammableProps = Partial<Pick<TeamsViewProps, "filters" | "hiddenFilter">>;
/**
 * Properties of routes in teams view.
 * @typedef TeamsView.TeamsViewRouteParams
 * @property {("tasks" | "workers")} [resources] Represents if task or worker is part of route resource.
 * @property {string} [sid] Represents the indentification of the task or worker
 */
export interface TeamsViewRouteParams {
    resource?: string;
    sid?: string;
}
export interface TeamsViewImplStateProps {
    appliedFilters: AppliedFilter[];
    appliedFiltersCount: number;
    appliedLegacyFilterQuery: string;
    filterDefinitions: FilterDefinition[];
    filterQuery: string;
    isLoadingWorkers: boolean;
    isSearchFilterApplied: boolean;
    legacyFilters?: WorkerListFilter[];
    monitoredTaskSid?: string;
    stickyWorker?: SupervisorWorkerState;
    workers: SupervisorWorkerState[];
    errorLoadingWorkers: LiveQueryError;
    selectedTask?: ITask;
    selectedWorker?: IWorker;
    flexUserSid?: string;
}
export interface ViewProps<RouteComponentProps> {
    isViewActive?: boolean;
    route?: RouteComponentProps;
}
export type TeamsViewImplOwnProps = ThemeProps & {
    isViewActive?: boolean;
    hiddenFilter?: AppliedFilter | AppliedFilter[] | string;
    filters: (FilterDefinition | FilterDefinitionFactory)[];
    selectedTaskSid?: string;
    selectedWorkerSid?: string;
    teams?: Teams[];
    teamsHierarchy?: {
        [key: string]: string;
    };
    selectedTeams?: string[];
    textSearch?: string;
    isNewTeamsViewEnabled?: boolean;
    isNewTeamsViewColumnsEnabled?: boolean;
    agentMetricsColumnsPreference?: metricDataType[];
    isGraphQLPreferenceEnabled?: boolean;
    isCustomColumnsTeamsViewEnabled?: boolean;
    preferenceHooks?: {
        createFlexUserPreference: (input: {
            variables: {
                input: {
                    preferenceKey: string;
                    preferenceValue: string;
                    flexUserSid: string;
                };
            };
        }) => Promise<any>;
        fetchPreferences: (input: {
            variables: {
                input: {
                    preferenceKey: string;
                    flexUserSid: string;
                };
            };
        }) => Promise<{
            data: {
                flexUserPreference: {
                    preferenceValue: any;
                };
            };
        }>;
    };
};
export type TeamsViewImplProps = TeamsViewImplStateProps & TeamsViewImplOwnProps;
/**
 * @typedef {TeamsViewImplProps} TeamsView.TeamsViewChildrenProps
 * @property {Array<AppliedFilter>} [appliedFilters] Represents applied filters.
 * @property {Array<FiltersList.FilterDefinition>} [filters] - List of filter definitions.
 * @property {string} [monitoredTaskSid] - Represents current monitoring task.
 * @property {SupervisorWorkerState} [stickyWorker] - Represents selected worker.
 * @property {Array<SupervisorWorkerState>} [workers] - Represents list of workers.
 * @property {boolean} isViewActive - Indicates whether the view is active.
 * @property {boolean} isLoadingWorkers - Indicates whether workers are loading.
 * @property {boolean} isSearchFilterApplied - Indicates whether search filter is applied.
 */
export type TeamsViewChildrenProps = Pick<TeamsViewImplProps, "appliedFilters" | "filters" | "monitoredTaskSid" | "stickyWorker" | "workers" | "isViewActive" | "isLoadingWorkers" | "isSearchFilterApplied" | "errorLoadingWorkers">;
export interface TeamsViewImplState {
    isFilterPanelOpen: boolean;
    searchText: string;
    shouldFilterOnUI?: boolean;
    teamsViewError?: boolean;
}