@ant-design/icons#WarningOutlined TypeScript Examples

render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <WarningOutlined className="error-icon" />
          <div>加载出错,请刷新页面</div>
        </div>
      );
    }
    return this.props.children;
  }

export function FunnelInvalidExclusionState(): JSX.Element {
    return (
        <div className="insight-empty-state warning">
            <div className="empty-state-inner">
                <div className="illustration-main">
                    <WarningOutlined />
                </div>
                <h2>Invalid exclusion filters</h2>
                <p>
                    You're excluding events or actions that are part of the funnel steps. Try changing your funnel step
                    filters, or removing the overlapping exclusion event.
                </p>
                <div className="mt text-center">
                    <a
                        data-attr="insight-funnels-emptystate-help"
                        href="https://posthog.com/docs/user-guides/funnels?utm_medium=in-product&utm_campaign=funnel-exclusion-filter-state"
                        target="_blank"
                        rel="noopener"
                    >
                        Learn more about funnels in our support documentation
                        <IconOpenInNew style={{ marginLeft: 4, fontSize: '0.85em' }} />
                    </a>
                </div>
            </div>
        </div>
    )
}

hijackMap: { [key: string]: any } = {
  log: {
    bgColor: '#272823',
    textColor: '#ffffff',
    borderColor: 'rgba(128, 128, 128, 0.35)',
    icon: <div className={styles.logIcon} />,
    originMethod: console.log,
  },
  info: {
    bgColor: '#272823',
    textColor: '#ffffff',
    borderColor: 'rgba(128, 128, 128, 0.35)',
    icon: <InfoCircleOutlined className={styles.logIcon} />,
    originMethod: console.info,
  },
  warn: {
    bgColor: 'rgb(51, 42, 0)',
    textColor: 'rgb(245, 211, 150)',
    borderColor: 'rgb(102, 85, 0)',
    icon: <WarningOutlined className={styles.logIcon} />,
    originMethod: console.warn,
  },
  debug: {
    bgColor: '#272823',
    textColor: 'rgb(77, 136, 255)',
    borderColor: 'rgba(128, 128, 128, 0.35)',
    icon: <BugOutlined className={styles.logIcon} />,
    originMethod: console.debug,
  },
  error: {
    bgColor: 'rgb(40, 0, 0)',
    textColor: 'rgb(254, 127, 127)',
    borderColor: 'rgb(91, 0, 0)',
    icon: <CloseCircleOutlined className={styles.logIcon} />,
    originMethod: console.error,
  },
}

export function BillingAlerts(): JSX.Element | null {
    const { billing } = useValues(billingLogic)
    const { alertToShow, percentage, strokeColor } = useValues(billingLogic)

    if (!alertToShow) {
        return null
    }

    return (
        <>
            <div style={{ marginTop: 32 }} />
            {alertToShow === BillingAlertType.SetupBilling && (
                <Card>
                    <div style={{ display: 'flex' }}>
                        <div style={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
                            <WarningOutlined className="text-warning" style={{ paddingRight: 8 }} />
                            <b>Action needed!&nbsp;</b>
                            {billing?.plan?.custom_setup_billing_message ||
                                'Please finish setting up your billing information.'}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Button type="primary" href={billing?.subscription_url} icon={<ToolFilled />}>
                                Set up now
                            </Button>
                        </div>
                    </div>
                </Card>
            )}
            {alertToShow === BillingAlertType.UsageNearLimit && (
                <Card>
                    <div style={{ display: 'flex' }}>
                        <div style={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
                            <WarningOutlined className="text-warning" style={{ paddingRight: 16 }} />
                            <div>
                                <b>Warning!</b> Nearing the monthly limit of events for your organization. You have
                                already used{' '}
                                <b style={{ color: typeof strokeColor === 'string' ? strokeColor : 'inherit' }}>
                                    {percentage && percentage * 100}%
                                </b>{' '}
                                of your event allocation this month. To avoid losing access to your data,{' '}
                                <b>we recommend upgrading</b> your billing plan now.
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', paddingLeft: 16 }}>
                            <LinkButton type="primary" to="/organization/billing">
                                <ToolFilled /> Manage billing
                            </LinkButton>
                        </div>
                    </div>
                </Card>
            )}
        </>
    )
}

export function CurrentPlan({ plan }: { plan: PlanInterface }): JSX.Element {
    const { billing } = useValues(billingLogic)

    return (
        <>
            <div className="space-top" />
            {billing?.should_setup_billing ? (
                <Alert
                    type="warning"
                    message={
                        <>
                            Your plan is <b>currently inactive</b> as you haven't finished setting up your billing
                            information.
                        </>
                    }
                    action={
                        billing.subscription_url && (
                            <Button href={billing.subscription_url} icon={<ToolOutlined />}>
                                Finish setup
                            </Button>
                        )
                    }
                    showIcon
                    icon={<WarningOutlined />}
                />
            ) : (
                <Card title="Organization billing plan">
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div>
                            <img src={plan.image_url || defaultImg} alt="" height={100} width={100} />
                        </div>
                        <div style={{ flexGrow: 1, paddingLeft: 16 }}>
                            <h3 className="l3" style={{ marginBottom: 8 }}>
                                {plan.name}
                            </h3>
                            <Link target="_blank" to={`https://posthog.com/pricing#plan-${plan.key}?${UTM_TAGS}`}>
                                More plan details <IconOpenInNew />
                            </Link>
                            <div style={{ marginTop: 4 }}>{plan.price_string}</div>
                            <div className="text-muted mt">
                                Click on <b>manage subscription</b> to cancel your billing agreement,{' '}
                                <b>update your card</b> or other billing information,
                            </div>
                        </div>
                        <div>
                            <Button type="primary" href="/billing/manage" icon={<ToolOutlined />}>
                                Manage subscription
                            </Button>
                            <div className="text-muted text-center">Get past invoices too</div>
                        </div>
                    </div>
                </Card>
            )}
        </>
    )
}

export function InsightDeprecatedState({
    color,
    itemId,
    itemName,
    deleteCallback,
}: {
    itemId: number
    itemName: string
    deleteCallback?: () => void
    color?: string
}): JSX.Element {
    const { currentTeamId } = useValues(teamLogic)
    return (
        <div className={clsx('insight-empty-state', color)}>
            <div className="empty-state-inner">
                <div className="illustration-main">
                    <WarningOutlined />
                </div>
                <h2>This insight no longer exists.</h2>
                <p className="text-center">This type of insight no longer exists in PostHog.</p>
                <div>
                    <LemonButton
                        type="highlighted"
                        style={{ margin: '0 auto' }}
                        onClick={() =>
                            deleteWithUndo({
                                object: {
                                    id: itemId,
                                    name: itemName,
                                },
                                endpoint: `projects/${currentTeamId}/insights`,
                                callback: deleteCallback,
                            })
                        }
                    >
                        Remove from dashboard
                    </LemonButton>
                </div>
            </div>
        </div>
    )
}

export function FunctionDebuggerStatusbar({
  coverage,
  testStats,
}: FunctionDebuggerStatusbarProps): React.ReactElement {
  const coverageIsOk = coverage && coverage.status !== "failed";
  const totalCoverage = useMemo(
    () => (coverageIsOk ? getTotalCoverage(coverage) : null),
    [coverageIsOk, coverage]
  );
  const coverageStats = useMemo(
    () => (coverageIsOk ? getCoverageStats(coverage) : null),
    [coverageIsOk, coverage]
  );

  return (
    <div className={styles.debuggerStatusbar} data-override-theme="dark">
      <div className={styles.coverage}>
        {coverage == null ? (
          <span>
            <span className={styles.coverageIcon}>
              <QuestionOutlined />
            </span>
            <span>Coverage: expired</span>
          </span>
        ) : testStats?.failed > 0 ? (
          <span className={styles.hasFailedTests}>
            <span className={styles.coverageIcon}>
              <WarningOutlined />
            </span>
            <span>
              {testStats.failed}/{testStats.total} tests failed!
            </span>
          </span>
        ) : coverageIsOk ? (
          <>
            <span
              className={
                totalCoverage < 60
                  ? styles.coverageLow
                  : totalCoverage < 90
                  ? styles.coverageMedium
                  : totalCoverage < 100
                  ? styles.coverageHigh
                  : styles.coverageFull
              }
            >
              <span className={styles.coverageIcon}>
                {totalCoverage < 100 ? <WarningOutlined /> : <CheckOutlined />}
              </span>
              <span>Coverage: {totalCoverage}%</span>
            </span>
            {Object.entries(coverageStats).map(
              ([type, { covered, total, percentage }]) => (
                <span key={type} className={styles.subCoverage}>
                  <span>{upperFirst(type)}: </span>
                  <span>
                    {percentage}% ({covered}/{total})
                  </span>
                </span>
              )
            )}
          </>
        ) : (
          <span className={styles.coverageFailed}>
            <span className={styles.coverageIcon}>
              <CloseOutlined />
            </span>
            <span>{(coverage as RawCoverageFailed).error}</span>
          </span>
        )}
      </div>
    </div>
  );
}

export function VolumeTable({
    type,
    data,
}: {
    type: EventTableType
    data: Array<EventDefinition | PropertyDefinition>
}): JSX.Element {
    const [searchTerm, setSearchTerm] = useState(false as string | false)
    const [dataWithWarnings, setDataWithWarnings] = useState([] as VolumeTableRecord[])
    const { user } = useValues(userLogic)
    const { openDrawer } = useActions(definitionDrawerLogic)

    const hasTaxonomyFeatures = user?.organization?.available_features?.includes(AvailableFeature.INGESTION_TAXONOMY)

    const columns: ColumnsType<VolumeTableRecord> = [
        {
            title: `${capitalizeFirstLetter(type)} name`,
            render: function Render(_, record): JSX.Element {
                return (
                    <span>
                        <div style={{ display: 'flex', alignItems: 'baseline', paddingBottom: 4 }}>
                            <span className="ph-no-capture" style={{ paddingRight: 8 }}>
                                <PropertyKeyInfo
                                    style={hasTaxonomyFeatures ? { fontWeight: 'bold' } : {}}
                                    value={record.eventOrProp.name}
                                />
                            </span>
                            {hasTaxonomyFeatures ? (
                                <ObjectTags tags={record.eventOrProp.tags || []} staticOnly />
                            ) : null}
                        </div>
                        {hasTaxonomyFeatures &&
                            (isPosthogEvent(record.eventOrProp.name) ? null : (
                                <VolumeTableRecordDescription
                                    id={record.eventOrProp.id}
                                    description={record.eventOrProp.description}
                                    type={type}
                                />
                            ))}
                        {record.warnings?.map((warning) => (
                            <Tooltip
                                key={warning}
                                color="orange"
                                title={
                                    <>
                                        <b>Warning!</b> {warning}
                                    </>
                                }
                            >
                                <WarningOutlined style={{ color: 'var(--warning)', marginLeft: 6 }} />
                            </Tooltip>
                        ))}
                    </span>
                )
            },
            sorter: (a, b) => ('' + a.eventOrProp.name).localeCompare(b.eventOrProp.name || ''),
            filters: [
                { text: 'Has warnings', value: 'warnings' },
                { text: 'No warnings', value: 'noWarnings' },
            ],
            onFilter: (value, record) => (value === 'warnings' ? !!record.warnings.length : !record.warnings.length),
        },
        type === 'event' && hasTaxonomyFeatures
            ? {
                  title: 'Owner',
                  render: function Render(_, record): JSX.Element {
                      const owner = record.eventOrProp?.owner
                      return isPosthogEvent(record.eventOrProp.name) ? <>-</> : <Owner user={owner} />
                  },
              }
            : {},
        type === 'event'
            ? {
                  title: function VolumeTitle() {
                      return (
                          <Tooltip
                              placement="right"
                              title="Total number of events over the last 30 days. Can be delayed by up to an hour."
                          >
                              30 day volume (delayed by up to an hour)
                              <InfoCircleOutlined className="info-indicator" />
                          </Tooltip>
                      )
                  },
                  render: function RenderVolume(_, record) {
                      return <span className="ph-no-capture">{compactNumber(record.eventOrProp.volume_30_day)}</span>
                  },
                  sorter: (a, b) =>
                      a.eventOrProp.volume_30_day == b.eventOrProp.volume_30_day
                          ? (a.eventOrProp.volume_30_day || -1) - (b.eventOrProp.volume_30_day || -1)
                          : (a.eventOrProp.volume_30_day || -1) - (b.eventOrProp.volume_30_day || -1),
              }
            : {},
        {
            title: function QueriesTitle() {
                return (
                    <Tooltip
                        placement="right"
                        title={`Number of queries in PostHog that included a filter on this ${type}`}
                    >
                        30 day queries (delayed by up to an hour)
                        <InfoCircleOutlined className="info-indicator" />
                    </Tooltip>
                )
            },
            render: function Render(_, item) {
                return <span className="ph-no-capture">{compactNumber(item.eventOrProp.query_usage_30_day)}</span>
            },
            sorter: (a, b) =>
                a.eventOrProp.query_usage_30_day == b.eventOrProp.query_usage_30_day
                    ? (a.eventOrProp.query_usage_30_day || -1) - (b.eventOrProp.query_usage_30_day || -1)
                    : (a.eventOrProp.query_usage_30_day || -1) - (b.eventOrProp.query_usage_30_day || -1),
        },
        hasTaxonomyFeatures
            ? {
                  render: function Render(_, item) {
                      return (
                          <>
                              {isPosthogEvent(item.eventOrProp.name) ? null : (
                                  <Button
                                      type="link"
                                      icon={<ArrowRightOutlined style={{ color: '#5375FF' }} />}
                                      onClick={() => openDrawer(type, item.eventOrProp.id)}
                                  />
                              )}
                          </>
                      )
                  },
              }
            : {},
    ]

    useEffect(() => {
        setDataWithWarnings(
            data.map((eventOrProp: EventOrPropType): VolumeTableRecord => {
                const record = { eventOrProp } as VolumeTableRecord
                record.warnings = []
                if (eventOrProp.name?.endsWith(' ')) {
                    record.warnings.push(`This ${type} ends with a space.`)
                }
                if (eventOrProp.name?.startsWith(' ')) {
                    record.warnings.push(`This ${type} starts with a space.`)
                }
                return record
            }) || []
        )
    }, [data])

    return (
        <>
            <Input.Search
                allowClear
                enterButton
                style={{ marginTop: '1.5rem', maxWidth: 400, width: 'initial', flexGrow: 1 }}
                onChange={(e) => {
                    setSearchTerm(e.target.value)
                }}
                placeholder={`Filter ${type === 'property' ? 'properties' : 'events'}....`}
            />
            <br />
            <br />
            <Table
                dataSource={searchTerm ? search(dataWithWarnings, searchTerm) : dataWithWarnings}
                columns={columns}
                rowKey={(item) => item.eventOrProp.name}
                size="small"
                style={{ marginBottom: '4rem' }}
                pagination={{ pageSize: 100, hideOnSinglePage: true }}
                onRow={(record) =>
                    hasTaxonomyFeatures && !isPosthogEvent(record.eventOrProp.name)
                        ? { onClick: () => openDrawer(type, record.eventOrProp.id), style: { cursor: 'pointer' } }
                        : {}
                }
            />
        </>
    )
}

export function PluginCard({
    plugin,
    error,
    maintainer,
    showUpdateButton,
    order,
    maxOrder,
    rearranging,
    DragColumn = ({ children }) => <Col className="order-handle">{children}</Col>,
    unorderedPlugin = false,
}: PluginCardProps): JSX.Element {
    const {
        name,
        description,
        url,
        plugin_type: pluginType,
        pluginConfig,
        tag,
        latest_tag: latestTag,
        id: pluginId,
        updateStatus,
        hasMoved,
        is_global,
        organization_id,
        organization_name,
    } = plugin

    const {
        editPlugin,
        toggleEnabled,
        installPlugin,
        resetPluginConfigError,
        rearrange,
        showPluginLogs,
        showPluginMetrics,
    } = useActions(pluginsLogic)
    const { loading, installingPluginUrl, checkingForUpdates, pluginUrlToMaintainer } = useValues(pluginsLogic)
    const { user } = useValues(userLogic)

    const hasSpecifiedMaintainer = maintainer || (plugin.url && pluginUrlToMaintainer[plugin.url])
    const pluginMaintainer = maintainer || pluginUrlToMaintainer[plugin.url || '']

    return (
        <Col
            style={{ width: '100%', marginBottom: 20 }}
            className={`plugins-scene-plugin-card-col${rearranging ? ` rearranging` : ''}`}
            data-attr={`plugin-card-${pluginConfig ? 'installed' : 'available'}`}
        >
            <Card className="plugins-scene-plugin-card">
                <Row align="middle" className="plugin-card-row">
                    {typeof order === 'number' && typeof maxOrder === 'number' ? (
                        <DragColumn>
                            <div className={`arrow${order === 1 ? ' hide' : ''}`}>
                                <DownOutlined />
                            </div>
                            <div>
                                <Tag color={hasMoved ? '#bd0225' : '#555'} onClick={rearrange}>
                                    {order}
                                </Tag>
                            </div>
                            <div className={`arrow${order === maxOrder ? ' hide' : ''}`}>
                                <DownOutlined />
                            </div>
                        </DragColumn>
                    ) : null}
                    {unorderedPlugin ? (
                        <Tooltip title="This plugin does not do any processing in order." placement="topRight">
                            <Col>
                                <Tag color="#555">-</Tag>
                            </Col>
                        </Tooltip>
                    ) : null}
                    {pluginConfig && (
                        <Col>
                            <Popconfirm
                                placement="topLeft"
                                title={`Are you sure you wish to ${
                                    pluginConfig.enabled ? 'disable' : 'enable'
                                } this plugin?`}
                                onConfirm={() =>
                                    pluginConfig.id
                                        ? toggleEnabled({ id: pluginConfig.id, enabled: !pluginConfig.enabled })
                                        : editPlugin(pluginId || null, { __enabled: true })
                                }
                                okText="Yes"
                                cancelText="No"
                                disabled={rearranging}
                            >
                                <Switch checked={pluginConfig.enabled ?? false} disabled={rearranging} />
                            </Popconfirm>
                        </Col>
                    )}
                    <Col className={pluginConfig ? 'hide-plugin-image-below-500' : ''}>
                        <PluginImage pluginType={pluginType} url={url} />
                    </Col>
                    <Col style={{ flex: 1 }}>
                        <div>
                            <strong style={{ marginRight: 8 }}>{name}</strong>
                            {hasSpecifiedMaintainer && (
                                <CommunityPluginTag isCommunity={pluginMaintainer === 'community'} />
                            )}
                            {pluginConfig?.error ? (
                                <PluginError
                                    error={pluginConfig.error}
                                    reset={() => resetPluginConfigError(pluginConfig?.id || 0)}
                                />
                            ) : error ? (
                                <PluginError error={error} />
                            ) : null}
                            {is_global && (
                                <Tag color="blue">
                                    <GlobalOutlined /> Managed by {organization_name}
                                </Tag>
                            )}
                            {canInstallPlugins(user?.organization, organization_id) && (
                                <>
                                    {url?.startsWith('file:') ? <LocalPluginTag url={url} title="Local" /> : null}
                                    {updateStatus?.error ? (
                                        <Tag color="red">
                                            <WarningOutlined /> Error checking for updates
                                        </Tag>
                                    ) : checkingForUpdates &&
                                      !updateStatus &&
                                      pluginType !== PluginInstallationType.Source &&
                                      !url?.startsWith('file:') ? (
                                        <Tag color="blue">
                                            <LoadingOutlined /> Checking for updates…
                                        </Tag>
                                    ) : url && latestTag && tag ? (
                                        tag === latestTag ? (
                                            <Tag color="green">
                                                <CheckOutlined /> Up to date
                                            </Tag>
                                        ) : (
                                            <UpdateAvailable url={url} tag={tag} latestTag={latestTag} />
                                        )
                                    ) : null}
                                    {pluginType === PluginInstallationType.Source ? <SourcePluginTag /> : null}
                                </>
                            )}
                        </div>
                        <div>{endWithPunctation(description)}</div>
                    </Col>
                    <Col>
                        <Space>
                            {url && <PluginAboutButton url={url} disabled={rearranging} />}
                            {showUpdateButton && pluginId ? (
                                <PluginUpdateButton
                                    updateStatus={updateStatus}
                                    pluginId={pluginId}
                                    rearranging={rearranging}
                                />
                            ) : pluginId ? (
                                <>
                                    {Object.keys(plugin.metrics || {}).length > 0 ? (
                                        <Space>
                                            <Tooltip title="Metrics">
                                                <Button onClick={() => showPluginMetrics(pluginId)}>
                                                    <LineChartOutlined />
                                                </Button>
                                            </Tooltip>
                                        </Space>
                                    ) : null}
                                    <Tooltip
                                        title={
                                            pluginConfig?.id
                                                ? 'Logs'
                                                : 'Logs – enable the plugin for the first time to view them'
                                        }
                                    >
                                        <Button
                                            className="padding-under-500"
                                            disabled={rearranging || !pluginConfig?.id}
                                            onClick={() => showPluginLogs(pluginId)}
                                            data-attr="plugin-logs"
                                        >
                                            <UnorderedListOutlined />
                                        </Button>
                                    </Tooltip>
                                    <Tooltip title="Configure">
                                        <Button
                                            type="primary"
                                            className="padding-under-500"
                                            disabled={rearranging}
                                            onClick={() => editPlugin(pluginId)}
                                            data-attr="plugin-configure"
                                        >
                                            <SettingOutlined />
                                        </Button>
                                    </Tooltip>
                                </>
                            ) : !pluginId ? (
                                <Button
                                    type="primary"
                                    className="padding-under-500"
                                    loading={loading && installingPluginUrl === url}
                                    disabled={loading && installingPluginUrl !== url}
                                    onClick={
                                        url ? () => installPlugin(url, PluginInstallationType.Repository) : undefined
                                    }
                                    icon={<CloudDownloadOutlined />}
                                    data-attr="plugin-install"
                                >
                                    <span className="show-over-500">Install</span>
                                </Button>
                            ) : null}
                        </Space>
                    </Col>
                </Row>
            </Card>
        </Col>
    )
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

DestinationEditor = ({
  editorMode,
  paramsByProps,
  disableForceUpdateOnSave,
  onAfterSaveSucceded,
  onCancel,
  isOnboarding,
}: Props) => {
  const history = useHistory()

  const forceUpdate = useForceUpdate()

  const services = ApplicationServices.get()

  const urlParams = useParams<DestinationURLParams>()
  const params = paramsByProps || urlParams

  const [activeTabKey, setActiveTabKey] = useState<DestinationTabKey>("config")
  const [savePopover, switchSavePopover] = useState<boolean>(false)
  const [testConnecting, setTestConnecting] = useState<boolean>(false)
  const [destinationSaving, setDestinationSaving] = useState<boolean>(false)
  const [testConnectingPopover, switchTestConnectingPopover] = useState<boolean>(false)

  const sources = sourcesStore.list
  const destinationData = useRef<DestinationData>(getDestinationData(params))

  const destinationReference = useMemo<Destination | null | undefined>(() => {
    if (params.type) {
      return destinationsReferenceMap[params.type]
    }
    return destinationsReferenceMap[getDestinationData(params)._type]
  }, [params.type, params.id])

  if (!destinationReference) {
    return <DestinationNotFound destinationId={params.id} />
  }

  const submittedOnce = useRef<boolean>(false)

  const handleUseLibrary = async (newMappings: DestinationMapping, newTableName?: string) => {
    destinationData.current = {
      ...destinationData.current,
      _formData: {
        ...destinationData.current._formData,
        tableName: newTableName ? newTableName : destinationData.current._formData?.tableName,
      },
      _mappings: newMappings,
    }

    const { form: mappingsForm } = destinationsTabs[2]
    const { form: configForm } = destinationsTabs[0]

    await mappingsForm.setFieldsValue({
      "_mappings._mappings": newMappings._mappings,
      "_mappings._keepUnmappedFields": newMappings._keepUnmappedFields,
    })

    destinationsTabs[2].touched = true

    if (newTableName) {
      await configForm.setFieldsValue({
        "_formData.tableName": newTableName,
      })

      destinationsTabs[0].touched = true
    }

    await forceUpdate()

    actionNotification.success("Mappings library has been successfully set")
  }

  const validateTabForm = useCallback(
    async (tab: Tab) => {
      const tabForm = tab.form

      try {
        if (tab.key === "sources") {
          const _sources = tabForm.getFieldsValue()?._sources

          if (!_sources) {
            tab.errorsCount = 1
          }
        }

        tab.errorsCount = 0

        return await tabForm.validateFields()
      } catch (errors) {
        // ToDo: check errors count for fields with few validation rules
        tab.errorsCount = errors.errorFields?.length
        return null
      } finally {
        forceUpdate()
      }
    },
    [forceUpdate]
  )
  const configForm = Form.useForm()[0]
  const hideMapping =
    params.standalone == "true" ||
    isOnboarding ||
    editorMode === "add" ||
    (destinationsReferenceMap[destinationReference.id].defaultTransform.length > 0 &&
      !destinationData.current._mappings?._mappings) ||
    !destinationData.current._mappings?._mappings
  let mappingForm = undefined
  if (!hideMapping) {
    mappingForm = Form.useForm()[0]
  }

  const tabsInitialData: Tab<DestinationTabKey>[] = [
    {
      key: "config",
      name: "Connection Properties",
      getComponent: (form: FormInstance) => (
        <DestinationEditorConfig
          form={form}
          destinationReference={destinationReference}
          destinationData={destinationData.current}
          handleTouchAnyField={validateAndTouchField(0)}
        />
      ),
      form: configForm,
      touched: false,
    },
    {
      key: "transform",
      name: "Transform",
      getComponent: (form: FormInstance) => (
        <DestinationEditorTransform
          form={form}
          configForm={configForm}
          mappingForm={mappingForm}
          destinationReference={destinationReference}
          destinationData={destinationData.current}
          handleTouchAnyField={validateAndTouchField(1)}
        />
      ),
      form: Form.useForm()[0],
      touched: false,
      isHidden: params.standalone == "true",
    },
    {
      key: "mappings",
      name: "Mappings (Deprecated)",
      isDisabled: destinationData.current["_transform_enabled"],
      getComponent: (form: FormInstance) => (
        <DestinationEditorMappings
          form={form}
          initialValues={destinationData.current._mappings}
          handleTouchAnyField={validateAndTouchField(2)}
          handleDataUpdate={handleUseLibrary}
        />
      ),
      form: mappingForm,
      touched: false,
      isHidden: hideMapping,
    },
    {
      key: "sources",
      name: "Linked Connectors & API Keys",
      getComponent: (form: FormInstance) => (
        <DestinationEditorConnectors
          form={form}
          initialValues={destinationData.current}
          destination={destinationReference}
          handleTouchAnyField={validateAndTouchField(3)}
        />
      ),
      form: Form.useForm()[0],
      errorsLevel: "warning",
      touched: false,
      isHidden: params.standalone == "true",
    },
  ]

  const [destinationsTabs, setDestinationsTabs] = useState<Tab<DestinationTabKey>[]>(tabsInitialData)

  const validateAndTouchField = useCallback(
    (index: number) => (value: boolean) => {
      destinationsTabs[index].touched = value === undefined ? true : value

      setDestinationsTabs(oldTabs => {
        let tab = oldTabs[index]
        let oldErrorsCount = tab.errorsCount
        let newErrorsCount = tab.form.getFieldsError().filter(a => a.errors?.length > 0).length
        if (newErrorsCount != oldErrorsCount) {
          tab.errorsCount = newErrorsCount
        }
        if (
          oldTabs[1].form.getFieldValue("_transform_enabled") !== oldTabs[2].isDisabled ||
          newErrorsCount != oldErrorsCount
        ) {
          const newTabs = [
            ...oldTabs.slice(0, 2),
            { ...oldTabs[2], isDisabled: oldTabs[1].form.getFieldValue("_transform_enabled") },
            ...oldTabs.slice(3),
          ]
          if (newErrorsCount != oldErrorsCount) {
            newTabs[index].errorsCount = newErrorsCount
          }
          return newTabs
        } else {
          return oldTabs
        }
      })
    },
    [validateTabForm, destinationsTabs, setDestinationsTabs]
  )

  const handleCancel = useCallback(() => {
    onCancel ? onCancel() : history.push(projectRoute(destinationPageRoutes.root))
  }, [history, onCancel])

  const handleViewStatistics = () =>
    history.push(
      projectRoute(destinationPageRoutes.statisticsExact, {
        id: destinationData.current._id,
      })
    )

  const testConnectingPopoverClose = useCallback(() => switchTestConnectingPopover(false), [])

  const savePopoverClose = useCallback(() => switchSavePopover(false), [])

  const handleTestConnection = useCallback(async () => {
    setTestConnecting(true)

    const tab = destinationsTabs[0]

    try {
      const config = await validateTabForm(tab)
      const values = makeObjectFromFieldsValues<DestinationData>(config)
      destinationData.current._formData = values._formData
      destinationData.current._package = values._package
      destinationData.current._super_type = values._super_type
      await destinationEditorUtils.testConnection(destinationData.current)
    } catch (error) {
      switchTestConnectingPopover(true)
    } finally {
      setTestConnecting(false)
      forceUpdate()
    }
  }, [validateTabForm, forceUpdate])

  const handleSaveDestination = useCallback(() => {
    submittedOnce.current = true

    setDestinationSaving(true)

    Promise.all(destinationsTabs.filter((tab: Tab) => !!tab.form).map((tab: Tab) => validateTabForm(tab)))
      .then(async allValues => {
        destinationData.current = {
          ...destinationData.current,
          ...allValues.reduce((result: any, current: any) => {
            return {
              ...result,
              ...makeObjectFromFieldsValues(current),
            }
          }, {}),
        }

        try {
          await destinationEditorUtils.testConnection(destinationData.current, true)

          let savedDestinationData: DestinationData = destinationData.current
          if (editorMode === "add") {
            savedDestinationData = await flowResult(destinationsStore.add(destinationData.current))
          }
          if (editorMode === "edit") {
            await flowResult(destinationsStore.replace(destinationData.current))
          }
          await connectionsHelper.updateSourcesConnectionsToDestination(
            savedDestinationData._uid,
            savedDestinationData._sources || []
          )

          destinationsTabs.forEach((tab: Tab) => (tab.touched = false))

          if (savedDestinationData._connectionTestOk) {
            if (editorMode === "add") actionNotification.success(`New ${savedDestinationData._type} has been added!`)
            if (editorMode === "edit") actionNotification.success(`${savedDestinationData._type} has been saved!`)
          } else {
            actionNotification.warn(
              `${savedDestinationData._type} has been saved, but test has failed with '${firstToLower(
                savedDestinationData._connectionErrorMessage
              )}'. Data will not be piped to this destination`
            )
          }

          onAfterSaveSucceded ? onAfterSaveSucceded() : history.push(projectRoute(destinationPageRoutes.root))
        } catch (errors) {}
      })
      .catch(() => {
        switchSavePopover(true)
      })
      .finally(() => {
        setDestinationSaving(false)
        !disableForceUpdateOnSave && forceUpdate()
      })
  }, [
    destinationsTabs,
    destinationData,
    sources,
    history,
    validateTabForm,
    forceUpdate,
    editorMode,
    services.activeProject.id,
    services.storageService,
  ])

  const connectedSourcesNum = sources.filter(src =>
    (src.destinations || []).includes(destinationData.current._uid)
  ).length

  const isAbleToConnectItems = (): boolean =>
    editorMode === "edit" &&
    connectedSourcesNum === 0 &&
    !destinationData.current?._onlyKeys?.length &&
    !destinationsReferenceMap[params.type]?.hidden

  useEffect(() => {
    let breadcrumbs = []
    if (!params.standalone) {
      breadcrumbs.push({
        title: "Destinations",
        link: projectRoute(destinationPageRoutes.root),
      })
    }
    breadcrumbs.push({
      title: (
        <PageHeader
          title={destinationReference?.displayName ?? "Not Found"}
          icon={destinationReference?.ui.icon}
          mode={params.standalone ? "edit" : editorMode}
        />
      ),
    })
    currentPageHeaderStore.setBreadcrumbs(...breadcrumbs)
  }, [destinationReference])

  return (
    <>
      <div className={cn("flex flex-col items-stretch flex-auto", styles.wrapper)}>
        <div className={styles.mainArea} id="dst-editor-tabs">
          {isAbleToConnectItems() && (
            <Card className={styles.linkedWarning}>
              <WarningOutlined className={styles.warningIcon} />
              <article>
                This destination is not linked to any API keys or Connector. You{" "}
                <span className={styles.pseudoLink} onClick={() => setActiveTabKey("sources")}>
                  can link the destination here
                </span>
                .
              </article>
            </Card>
          )}
          <TabsConfigurator
            type="card"
            className={styles.tabCard}
            tabsList={destinationsTabs}
            activeTabKey={activeTabKey}
            onTabChange={setActiveTabKey}
            tabBarExtraContent={
              !params.standalone &&
              !isOnboarding &&
              editorMode == "edit" && (
                <Button
                  size="large"
                  className="mr-3"
                  type="link"
                  onClick={handleViewStatistics}
                  icon={<AreaChartOutlined />}
                >
                  Statistics
                </Button>
              )
            }
          />
        </div>

        <div className="flex-shrink border-t py-2">
          <EditorButtons
            save={{
              isRequestPending: destinationSaving,
              isPopoverVisible: savePopover && destinationsTabs.some((tab: Tab) => tab.errorsCount > 0),
              handlePress: handleSaveDestination,
              handlePopoverClose: savePopoverClose,
              titleText: "Destination editor errors",
              tabsList: destinationsTabs,
            }}
            test={{
              isRequestPending: testConnecting,
              isPopoverVisible: testConnectingPopover && destinationsTabs[0].errorsCount > 0,
              handlePress: handleTestConnection,
              handlePopoverClose: testConnectingPopoverClose,
              titleText: "Connection Properties errors",
              tabsList: [destinationsTabs[0]],
            }}
            handleCancel={params.standalone ? undefined : handleCancel}
          />
        </div>
      </div>

      <Prompt message={destinationEditorUtils.getPromptMessage(destinationsTabs)} />
    </>
  )
}

function Stats(stats: any) {
  return [
    {
      number: stats.SEEN_TASKS,
      text: "Total Tasks",
      icon: <UnorderedListOutlined />,
      tooltip: "Seen tasks names",
    },
    {
      number: stats.SEEN_WORKERS,
      text: "Total Workers",
      icon: <RobotFilled />,
      tooltip: "The total offline/online and beat workers",
    },
    {
      number: stats.PROCESSED_EVENTS,
      text: "Events Processed",
      icon: <ThunderboltOutlined />,
      tooltip: "The total processed events",
    },
    {
      number: stats.PROCESSED_TASKS,
      text: "Tasks Processed",
      icon: <SyncOutlined />,
      tooltip: "The total processed tasks",
    },
    {
      number: stats.QUEUED,
      text: "Tasks Queued",
      icon: <EllipsisOutlined />,
      tooltip: "The total tasks in the queues",
    },
    {
      number: stats.RETRY,
      text: "To Retry",
      icon: <RetweetOutlined style={{ color: STATES_COLORS.RETRY }} />,
      tooltip: "Tasks that are failed and waiting for retry",
    },
    {
      number: stats.RECEIVED,
      text: "Received",
      icon: <SendOutlined style={{ color: STATES_COLORS.RECEIVED }} />,
      tooltip: "Tasks were received by a worker. but not yet started",
    },
    {
      number: stats.STARTED,
      text: "Started",
      icon: <LoadingOutlined style={{ color: STATES_COLORS.STARTED }} />,
      tooltip:
        "Tasks that were started by a worker and still active, set (task_track_started) to True on worker level to report started tasks",
    },
    {
      number: stats.SUCCEEDED,
      text: "Succeeded",
      icon: <CheckCircleOutlined style={{ color: STATES_COLORS.SUCCEEDED }} />,
      tooltip: "Tasks that were succeeded",
    },
    {
      number: stats.RECOVERED,
      text: "Recovered",
      icon: <IssuesCloseOutlined style={{ color: STATES_COLORS.RECOVERED }} />,
      tooltip: "Tasks that were succeeded after retries.",
    },
    {
      number: stats.FAILED,
      text: "Failed",
      icon: <WarningOutlined style={{ color: STATES_COLORS.FAILED }} />,
      tooltip: "Tasks that were failed",
    },
    {
      number: stats.CRITICAL,
      text: "Critical",
      icon: <CloseCircleOutlined style={{ color: STATES_COLORS.CRITICAL }} />,
      tooltip: "Tasks that were failed after max retries.",
    },
    {
      number: stats.REJECTED,
      text: "Rejected",
      icon: <RollbackOutlined style={{ color: STATES_COLORS.REJECTED }} />,
      tooltip:
        "Tasks that were rejected by workers and requeued, or moved to a dead letter queue",
    },
    {
      number: stats.REVOKED,
      text: "Revoked",
      icon: <StopOutlined style={{ color: STATES_COLORS.REVOKED }} />,
      tooltip: "Tasks that were revoked by workers, but still in the queue.",
    },
  ];
}