create-bubbles 0.1.26 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberBrowser.tsx

@@ -0,0 +1,146 @@
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationMemberCandidate } from 'shared/types'
+import BasicTableSelector, { type BasicTableSelectorRef } from '../BasicTableSelector'
+import { useOrganizationMemberCandidateColumns } from './OrganizationMemberCandidateColumns'
+import OrganizationMemberFilterPanel, {
+  createEmptyOrganizationMemberFilterValue,
+} from './OrganizationMemberFilterPanel'
+import type {
+  OrganizationMemberBrowserProps,
+  OrganizationMemberResourceFilters,
+} from './OrganizationMemberSelectorTypes'
+
+/** 提供左侧组织浏览、右侧分页选人、跨页选择和 resolve 回显。 */
+export default function OrganizationMemberBrowser({
+  ref,
+  candidateContextKey,
+  scope,
+  multiple = false,
+  title,
+  filters,
+  request,
+  resolve,
+  getCandidateDisabled,
+  onConfirm,
+}: OrganizationMemberBrowserProps) {
+  const { tr } = useI18n()
+  const columns = useOrganizationMemberCandidateColumns()
+  const selectorRef = useRef<BasicTableSelectorRef<OrganizationMemberCandidate>>(null)
+  const projectFilterRequestId = useRef(0)
+  const [filterValue, setFilterValue] = useState(createEmptyOrganizationMemberFilterValue)
+  const [projectResourceFilters, setProjectResourceFilters] =
+    useState<OrganizationMemberResourceFilters>()
+  const [projectFiltersLoading, setProjectFiltersLoading] = useState(false)
+  const loadProjectFilters = filters?.loadProjectFilters
+
+  const currentResourceFilters = useMemo<OrganizationMemberResourceFilters | undefined>(() => {
+    if (!filters) return undefined
+    return {
+      organizationUnits: filters.organizationUnits,
+      positions: filters.positions,
+      roles: filters.roles,
+      allowUnassigned: filters.allowUnassigned,
+    }
+  }, [filters])
+  const projectIdsKey = filterValue.projectIds.join('\u0000')
+
+  /** 企业范围切到项目身份域时，按实际可见权限异步加载该域筛选项。 */
+  useEffect(() => {
+    const requestId = ++projectFilterRequestId.current
+    if (!filterValue.projectIds.length) {
+      setProjectResourceFilters(undefined)
+      setProjectFiltersLoading(false)
+      return
+    }
+    if (!loadProjectFilters) {
+      setProjectResourceFilters({})
+      setProjectFiltersLoading(false)
+      return
+    }
+    setProjectResourceFilters(undefined)
+    setProjectFiltersLoading(true)
+    void loadProjectFilters(filterValue.projectIds)
+      .then((nextFilters) => {
+        if (projectFilterRequestId.current === requestId) setProjectResourceFilters(nextFilters)
+      })
+      .catch(() => {
+        if (projectFilterRequestId.current === requestId) setProjectResourceFilters({})
+      })
+      .finally(() => {
+        if (projectFilterRequestId.current === requestId) setProjectFiltersLoading(false)
+      })
+  }, [candidateContextKey, loadProjectFilters, projectIdsKey, scope.type])
+
+  useImperativeHandle(ref, () => ({
+    /** 使用既有 userId 和候选快照打开隔离会话，并重置上次浏览筛选。 */
+    show: (value, selectedRows) => {
+      projectFilterRequestId.current += 1
+      setFilterValue(createEmptyOrganizationMemberFilterValue())
+      setProjectResourceFilters(undefined)
+      setProjectFiltersLoading(false)
+      selectorRef.current?.show({ value, selectedRows })
+    },
+    /** 关闭当前选择会话并丢弃尚未确认的改动。 */
+    hide: () => {
+      projectFilterRequestId.current += 1
+      selectorRef.current?.hide()
+    },
+  }))
+
+  const resourceFilters = filterValue.projectIds.length
+    ? projectResourceFilters
+    : currentResourceFilters
+
+  return (
+    <BasicTableSelector<OrganizationMemberCandidate>
+      ref={selectorRef}
+      title={title ?? tr('选择成员')}
+      rowKey="userId"
+      multiple={multiple}
+      columns={columns}
+      params={filterValue}
+      sidePanel={
+        <OrganizationMemberFilterPanel
+          scope={scope}
+          projects={scope.type === 'company' ? filters?.projects : undefined}
+          resourceFilters={resourceFilters}
+          loading={projectFiltersLoading}
+          value={filterValue}
+          onChange={setFilterValue}
+        />
+      }
+      request={
+        /** 合并搜索、左侧身份域与资源筛选，并保持服务端分页结果。 */ async (params) => {
+          const result = await request({
+            page: params.current ?? 1,
+            pageSize: params.pageSize ?? 20,
+            query: params.query as string | undefined,
+            organizationUnitIds: filterValue.organizationUnitIds.length
+              ? filterValue.organizationUnitIds
+              : undefined,
+            positionIds: filterValue.positionIds.length ? filterValue.positionIds : undefined,
+            roleIds: filterValue.roleIds.length ? filterValue.roleIds : undefined,
+            projectIds: filterValue.projectIds.length ? filterValue.projectIds : undefined,
+            unassigned: filterValue.unassigned || undefined,
+          })
+          return { data: result.items, total: result.total, success: true }
+        }
+      }
+      requestByKeys={
+        /** 按稳定 userId 批量补查跨页或历史选择。 */ async (keys) => resolve(keys.map(String))
+      }
+      labelRender={(candidate) => `${candidate.name} · ${candidate.account}`}
+      getCheckboxProps={(candidate) => {
+        const disabled = candidate.disabled || getCandidateDisabled?.(candidate)
+        return {
+          disabled,
+          title: disabled ? tr('该成员当前不可新增，既有选择仍可移除') : undefined,
+        }
+      }}
+      onChange={(keys, rows) => onConfirm(keys.map(String), rows)}
+      pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+      scroll={{ y: 400 }}
+      modalProps={{ width: 1380 }}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberCandidateColumns.tsx

@@ -0,0 +1,137 @@
+import type { ProColumns } from '@ant-design/pro-components'
+import { Space, Tag, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CandidateDisabledReason, OrganizationMemberCandidate } from 'shared/types'
+
+/** 把候选禁选原因转换为用户能直接处理的状态说明。 */
+function disabledReasonText(reason: CandidateDisabledReason) {
+  switch (reason) {
+    case 'accountInactive':
+      return '账号不可用'
+    case 'memberInactive':
+      return '成员已停用'
+    case 'scopeInactive':
+      return '所属企业或项目已停用'
+    case 'organizationInactive':
+      return '命中的组织已停用'
+    case 'positionInactive':
+      return '命中的岗位已停用'
+    default:
+      return '不可选择'
+  }
+}
+
+/** 没有标签时展示稳定占位，避免组织、岗位和角色被误认为同一列。 */
+function EmptyTagValue() {
+  return <Typography.Text type="secondary">—</Typography.Text>
+}
+
+/** 构造成员候选表格列，同名组织始终携带来源作用域和完整路径。 */
+export function useOrganizationMemberCandidateColumns(): ProColumns<OrganizationMemberCandidate>[] {
+  const { tr } = useI18n()
+  return [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索姓名或完整账号') },
+    },
+    { title: tr('姓名'), dataIndex: 'name', search: false, width: 130 },
+    {
+      title: tr('完整账号'),
+      dataIndex: 'account',
+      search: false,
+      copyable: true,
+      width: 180,
+    },
+    {
+      title: tr('企业 / 项目'),
+      search: false,
+      width: 180,
+      render: (_, candidate) => (
+        <Space size={[0, 4]} wrap>
+          {candidate.identities.map((identity) => (
+            <Tag key={identity.memberId}>{identity.scopeName}</Tag>
+          ))}
+        </Space>
+      ),
+    },
+    {
+      title: tr('组织'),
+      search: false,
+      width: 300,
+      render: (_, candidate) => {
+        const tags = candidate.identities.flatMap((identity) =>
+          identity.organizationUnits.map((unit) => (
+            <Tag key={`${identity.memberId}:${unit.membershipId}`} color="purple">
+              {identity.scopeName} / {unit.fullPath}
+            </Tag>
+          )),
+        )
+        return tags.length ? (
+          <Space size={[0, 4]} wrap>
+            {tags}
+          </Space>
+        ) : (
+          <EmptyTagValue />
+        )
+      },
+    },
+    {
+      title: tr('岗位'),
+      search: false,
+      width: 220,
+      render: (_, candidate) => {
+        const tags = candidate.identities.flatMap((identity) =>
+          identity.positions.map((position) => (
+            <Tag key={`${identity.memberId}:${position.id}`} color="blue">
+              {identity.scopeName} / {position.name}
+            </Tag>
+          )),
+        )
+        return tags.length ? (
+          <Space size={[0, 4]} wrap>
+            {tags}
+          </Space>
+        ) : (
+          <EmptyTagValue />
+        )
+      },
+    },
+    {
+      title: tr('权限角色'),
+      search: false,
+      width: 220,
+      render: (_, candidate) => {
+        const tags = candidate.identities.flatMap((identity) =>
+          identity.roles.map((role) => (
+            <Tag key={`${identity.memberId}:${role.id}`} color="cyan">
+              {identity.scopeName} / {role.name}
+            </Tag>
+          )),
+        )
+        return tags.length ? (
+          <Space size={[0, 4]} wrap>
+            {tags}
+          </Space>
+        ) : (
+          <EmptyTagValue />
+        )
+      },
+    },
+    {
+      title: tr('状态'),
+      search: false,
+      fixed: 'right',
+      width: 150,
+      render: (_, candidate) =>
+        candidate.disabled ? (
+          <Typography.Text type="danger">
+            {tr(disabledReasonText(candidate.disabledReason))}
+          </Typography.Text>
+        ) : (
+          <Typography.Text type="success">{tr('可选择')}</Typography.Text>
+        ),
+    },
+  ]
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberFilterPanel.tsx

@@ -0,0 +1,209 @@
+import {
+  ApartmentOutlined,
+  BankOutlined,
+  ClearOutlined,
+  IdcardOutlined,
+  ProjectOutlined,
+  SafetyCertificateOutlined,
+} from '@ant-design/icons'
+import { Button, Flex, Select, Spin, Switch, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  OrganizationMemberBrowserScope,
+  OrganizationMemberFilterOption,
+  OrganizationMemberResourceFilters,
+} from './OrganizationMemberSelectorTypes'
+
+/** 左侧浏览面板当前提交给候选查询的筛选值。 */
+export interface OrganizationMemberFilterValue {
+  projectIds: string[]
+  organizationUnitIds: string[]
+  positionIds: string[]
+  roleIds: string[]
+  unassigned: boolean
+}
+
+/** 创建互不共享数组引用的空筛选值。 */
+export function createEmptyOrganizationMemberFilterValue(): OrganizationMemberFilterValue {
+  return {
+    projectIds: [],
+    organizationUnitIds: [],
+    positionIds: [],
+    roleIds: [],
+    unassigned: false,
+  }
+}
+
+/** 渲染左侧单类多选入口，空列表仍明确展示当前没有可见项。 */
+function FilterSelect({
+  icon,
+  label,
+  emptyText,
+  options,
+  value,
+  onChange,
+}: {
+  icon: ReactNode
+  label: string
+  emptyText: string
+  options: readonly OrganizationMemberFilterOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+}) {
+  return (
+    <Flex vertical gap={6}>
+      <Flex align="center" gap={6}>
+        {icon}
+        <Typography.Text strong>{label}</Typography.Text>
+      </Flex>
+      <Select
+        mode="multiple"
+        value={value}
+        options={[...options]}
+        disabled={!options.length}
+        placeholder={options.length ? label : emptyText}
+        maxTagCount="responsive"
+        optionFilterProp="label"
+        popupMatchSelectWidth={320}
+        onChange={onChange}
+      />
+    </Flex>
+  )
+}
+
+/** 以作用域为第一层，提供组织、岗位和权限角色的左侧筛选轨道。 */
+export default function OrganizationMemberFilterPanel({
+  scope,
+  projects,
+  resourceFilters,
+  loading,
+  value,
+  onChange,
+}: {
+  scope: OrganizationMemberBrowserScope
+  projects?: readonly OrganizationMemberFilterOption[]
+  resourceFilters?: OrganizationMemberResourceFilters
+  loading?: boolean
+  value: OrganizationMemberFilterValue
+  onChange: (value: OrganizationMemberFilterValue) => void
+}) {
+  const { tr } = useI18n()
+  const currentScopeLabel =
+    scope.label ?? (scope.type === 'company' ? tr('当前企业') : tr('当前项目'))
+  const changeProjects = (projectIds: string[]) => {
+    onChange({ ...createEmptyOrganizationMemberFilterValue(), projectIds })
+  }
+
+  return (
+    <Flex
+      vertical
+      gap={16}
+      style={{
+        flex: '0 0 252px',
+        width: 252,
+        minHeight: 472,
+        padding: 16,
+        border: '1px solid rgba(113, 83, 184, .18)',
+        borderRadius: 12,
+        background:
+          'linear-gradient(180deg, rgba(118, 87, 190, .085) 0%, rgba(118, 87, 190, .025) 100%)',
+      }}
+    >
+      <Flex align="center" justify="space-between" gap={8}>
+        <div>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            {tr('浏览范围')}
+          </Typography.Text>
+          <Typography.Title level={5} style={{ margin: '2px 0 0' }}>
+            {tr('按组织定位人员')}
+          </Typography.Title>
+        </div>
+        <Button
+          type="text"
+          aria-label={tr('清除筛选')}
+          icon={<ClearOutlined />}
+          disabled={
+            !value.projectIds.length &&
+            !value.organizationUnitIds.length &&
+            !value.positionIds.length &&
+            !value.roleIds.length &&
+            !value.unassigned
+          }
+          onClick={() => onChange(createEmptyOrganizationMemberFilterValue())}
+        />
+      </Flex>
+
+      <Flex vertical gap={8}>
+        <Typography.Text strong>{tr('作用范围')}</Typography.Text>
+        <Button
+          type={!value.projectIds.length ? 'primary' : 'default'}
+          icon={<BankOutlined />}
+          block
+          style={{ textAlign: 'left' }}
+          onClick={() => changeProjects([])}
+        >
+          {currentScopeLabel}
+        </Button>
+        {scope.type === 'company' && projects !== undefined && (
+          <Select
+            mode="multiple"
+            value={value.projectIds}
+            options={[...projects]}
+            disabled={!projects.length}
+            prefix={<ProjectOutlined />}
+            placeholder={projects.length ? tr('选择可见项目') : tr('暂无可见项目')}
+            maxTagCount="responsive"
+            optionFilterProp="label"
+            popupMatchSelectWidth={320}
+            onChange={changeProjects}
+          />
+        )}
+      </Flex>
+
+      <Spin spinning={loading} size="small">
+        <Flex vertical gap={14}>
+          {resourceFilters?.organizationUnits !== undefined && (
+            <FilterSelect
+              icon={<ApartmentOutlined />}
+              label={tr('组织架构')}
+              emptyText={tr('暂无可见组织')}
+              options={resourceFilters.organizationUnits}
+              value={value.organizationUnitIds}
+              onChange={(organizationUnitIds) => onChange({ ...value, organizationUnitIds })}
+            />
+          )}
+          {resourceFilters?.positions !== undefined && (
+            <FilterSelect
+              icon={<IdcardOutlined />}
+              label={tr('岗位')}
+              emptyText={tr('暂无可见岗位')}
+              options={resourceFilters.positions}
+              value={value.positionIds}
+              onChange={(positionIds) => onChange({ ...value, positionIds })}
+            />
+          )}
+          {resourceFilters?.roles !== undefined && (
+            <FilterSelect
+              icon={<SafetyCertificateOutlined />}
+              label={tr('权限角色')}
+              emptyText={tr('暂无可见角色')}
+              options={resourceFilters.roles}
+              value={value.roleIds}
+              onChange={(roleIds) => onChange({ ...value, roleIds })}
+            />
+          )}
+          {resourceFilters?.allowUnassigned && (
+            <Flex align="center" justify="space-between" gap={12}>
+              <Typography.Text>{tr('只看未归属组织')}</Typography.Text>
+              <Switch
+                size="small"
+                checked={value.unassigned}
+                onChange={(unassigned) => onChange({ ...value, unassigned })}
+              />
+            </Flex>
+          )}
+        </Flex>
+      </Spin>
+    </Flex>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/OrganizationMemberSelector/OrganizationMemberSelector.tsx

@@ -0,0 +1,196 @@
+import { Select } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationMemberCandidate } from 'shared/types'
+import OrganizationMemberBrowser from './OrganizationMemberBrowser'
+import type {
+  OrganizationMemberBrowserRef,
+  OrganizationMemberSelectorProps,
+} from './OrganizationMemberSelectorTypes'
+
+/** 把单选或多选值统一转换为去重后的 userId 数组。 */
+function normalizeValue(value: string | string[] | undefined, multiple: boolean) {
+  if (multiple) return [...new Set(Array.isArray(value) ? value : value ? [value] : [])]
+  const selected = Array.isArray(value) ? value[0] : value
+  return selected ? [selected] : []
+}
+
+interface CandidateCache {
+  contextKey: string
+  candidateById: Map<string, OrganizationMemberCandidate>
+}
+
+/** 把业务传入的候选快照转换为按稳定 userId 索引的缓存。 */
+function candidateMap(candidates?: readonly OrganizationMemberCandidate[]) {
+  return new Map(candidates?.map((candidate) => [candidate.userId, candidate]))
+}
+
+/** Select 风格入口，点击后在弹窗中按组织、岗位、角色和项目浏览成员。 */
+export default function OrganizationMemberSelector({
+  value,
+  candidateContextKey,
+  scope,
+  multiple = false,
+  selectedCandidates,
+  filters,
+  request,
+  resolve,
+  getCandidateDisabled,
+  onChange,
+  placeholder,
+  disabled,
+  allowClear = true,
+  ...selectProps
+}: OrganizationMemberSelectorProps) {
+  const { tr } = useI18n()
+  const browserRef = useRef<OrganizationMemberBrowserRef>(null)
+  const [candidateCache, setCandidateCache] = useState<CandidateCache>(() => ({
+    contextKey: candidateContextKey,
+    candidateById: candidateMap(selectedCandidates),
+  }))
+  const resolveRef = useRef(resolve)
+  const resolveRequestRef = useRef({ sequence: 0, contextKey: '' })
+  const userIds = normalizeValue(value, multiple)
+  const userIdsKey = userIds.join('\u0000')
+  const suppliedCandidateById = useMemo(
+    () => candidateMap(selectedCandidates),
+    [candidateContextKey, selectedCandidates],
+  )
+  const candidateById =
+    candidateCache.contextKey === candidateContextKey
+      ? candidateCache.candidateById
+      : suppliedCandidateById
+  resolveRef.current = resolve
+
+  /** 合并业务传入的候选回显快照。 */
+  useEffect(() => {
+    const supplied = selectedCandidates ?? []
+    setCandidateCache((current) => {
+      const currentCandidates =
+        current.contextKey === candidateContextKey ? current.candidateById : suppliedCandidateById
+      let next: Map<string, OrganizationMemberCandidate> | undefined
+      for (const candidate of supplied) {
+        if (currentCandidates.get(candidate.userId) === candidate) continue
+        next ??= new Map(currentCandidates)
+        next.set(candidate.userId, candidate)
+      }
+      if (!next && current.contextKey === candidateContextKey) return current
+      return { contextKey: candidateContextKey, candidateById: next ?? currentCandidates }
+    })
+  }, [candidateContextKey, selectedCandidates, suppliedCandidateById])
+
+  /** 按需补查缺失候选，避免字段显示裸 userId。 */
+  useEffect(() => {
+    const missing = userIds.filter((userId) => !candidateById.has(userId))
+    if (!missing.length) {
+      resolveRequestRef.current = {
+        sequence: resolveRequestRef.current.sequence + 1,
+        contextKey: '',
+      }
+      return
+    }
+    const missingKey = [...missing].sort().join('\u0000')
+    const contextKey = `${candidateContextKey}\u0001${userIdsKey}\u0001${missingKey}`
+    const sequence = resolveRequestRef.current.sequence + 1
+    resolveRequestRef.current = { sequence, contextKey }
+    void resolveRef
+      .current(missing)
+      .then((rows) => {
+        const activeRequest = resolveRequestRef.current
+        if (
+          activeRequest.sequence !== sequence ||
+          activeRequest.contextKey !== contextKey ||
+          !rows.length
+        )
+          return
+        setCandidateCache((current) => {
+          const currentCandidates =
+            current.contextKey === candidateContextKey ? current.candidateById : candidateById
+          let changed = false
+          const next = new Map(currentCandidates)
+          for (const candidate of rows) {
+            if (currentCandidates.get(candidate.userId) !== candidate) changed = true
+            next.set(candidate.userId, candidate)
+          }
+          if (!changed && current.contextKey === candidateContextKey) return current
+          return { contextKey: candidateContextKey, candidateById: next }
+        })
+      })
+      .catch(() => {
+        const activeRequest = resolveRequestRef.current
+        if (activeRequest.sequence === sequence && activeRequest.contextKey === contextKey) {
+          resolveRequestRef.current = { sequence: sequence + 1, contextKey: '' }
+        }
+      })
+    return () => {
+      const activeRequest = resolveRequestRef.current
+      if (activeRequest.sequence === sequence && activeRequest.contextKey === contextKey) {
+        resolveRequestRef.current = { sequence: sequence + 1, contextKey: '' }
+      }
+    }
+  }, [candidateById, candidateContextKey, userIdsKey])
+
+  const options = userIds.map((userId) => {
+    const candidate = candidateById.get(userId)
+    return {
+      value: userId,
+      label: candidate ? `${candidate.name} · ${candidate.account}` : userId,
+    }
+  })
+
+  /** 提交弹窗选择并缓存候选快照，表单值只保留稳定 userId。 */
+  const confirm = (selectedUserIds: string[], candidates: OrganizationMemberCandidate[]) => {
+    setCandidateCache((current) => {
+      const currentCandidates =
+        current.contextKey === candidateContextKey ? current.candidateById : candidateById
+      const next = new Map(currentCandidates)
+      for (const candidate of candidates) next.set(candidate.userId, candidate)
+      return { contextKey: candidateContextKey, candidateById: next }
+    })
+    onChange?.(multiple ? selectedUserIds : selectedUserIds[0], candidates)
+  }
+
+  return (
+    <>
+      <Select
+        {...selectProps}
+        value={multiple ? userIds : userIds[0]}
+        mode={multiple ? 'multiple' : undefined}
+        options={options}
+        open={false}
+        showSearch={false}
+        disabled={disabled}
+        allowClear={allowClear}
+        placeholder={placeholder ?? tr('请选择成员')}
+        onClick={() => {
+          if (!disabled)
+            browserRef.current?.show(
+              userIds,
+              userIds
+                .map((userId) => candidateById.get(userId))
+                .filter((candidate): candidate is OrganizationMemberCandidate => !!candidate),
+            )
+        }}
+        onChange={
+          /** 允许通过清空按钮或多选标签删除立即更新受控表单值。 */ (nextValue) => {
+            const nextIds = normalizeValue(nextValue, multiple)
+            const rows = nextIds
+              .map((userId) => candidateById.get(userId))
+              .filter((candidate): candidate is OrganizationMemberCandidate => !!candidate)
+            onChange?.(multiple ? nextIds : nextIds[0], rows)
+          }
+        }
+      />
+      <OrganizationMemberBrowser
+        ref={browserRef}
+        candidateContextKey={candidateContextKey}
+        scope={scope}
+        multiple={multiple}
+        filters={filters}
+        request={request}
+        resolve={resolve}
+        getCandidateDisabled={getCandidateDisabled}
+        onConfirm={confirm}
+      />
+    </>
+  )
+}