@ant-design/icons#SlackOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#SlackOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: constants.tsx From datart with Apache License 2.0 | 6 votes |
|
AUTH_CLIENT_ICON_MAPPING = {
github: <GithubOutlined />,
dingding: <DingdingOutlined />,
qq: <QqOutlined />,
gitlab: <GitlabOutlined />,
weibo: <WeiboCircleOutlined />,
zhihu: <ZhihuOutlined />,
alipay: <AlipayCircleOutlined />,
aliyun: <AliyunOutlined />,
google: <GoogleOutlined />,
facebook: <FacebookOutlined />,
slack: <SlackOutlined />,
instagram: <InstagramOutlined />,
codepen: <CodepenCircleOutlined />,
}
Example #2
| Source File: TriggerData.tsx From leek with Apache License 2.0 | 5 votes |
|
function TriggerData(props) {
return [
{
title: "ID",
dataIndex: "id",
key: "id",
render: (id) => {
return (
<Space direction="horizontal">
<SlackOutlined /> <Text strong>{id}</Text>
</Space>
);
},
},
{
title: "Status",
dataIndex: "enabled",
key: "ENABLED",
render: (enabled) => {
return enabled ? (
<Tag color="green">Enabled</Tag>
) : (
<Tag color="red">Disabled</Tag>
);
},
},
{
title: "States",
dataIndex: "states",
key: "states",
render: (states) => {
return states && states.length > 0 ? (
states.map((state, key) => <TaskState state={state} key={key} />)
) : (
<Tag>{"All STATES"}</Tag>
);
},
},
{
title: "Environments",
dataIndex: "envs",
key: "envs",
render: (envs) => {
return envs && envs.length > 0 ? (
envs.map((env, key) => <Tag key={key}>{env}</Tag>)
) : (
<Tag>{"All ENVS"}</Tag>
);
},
},
{
title: "Actions",
dataIndex: "id",
key: "id",
render: (id, record) => {
return (
<Space direction="horizontal">
<Button
onClick={() => props.handleEditTrigger(id, record)}
size="small"
loading={props.triggersModifying}
icon={<EditOutlined />}
/>
<Button
onClick={() => props.handleDeleteTrigger(id)}
size="small"
type="primary"
ghost
danger
loading={props.triggersModifying}
icon={<DeleteOutlined />}
/>
</Space>
);
},
},
];
}
Example #3
| Source File: OnboardingSetup.tsx From posthog-foss with MIT License | 4 votes |
|
export function OnboardingSetup(): JSX.Element {
const {
stepProjectSetup,
stepInstallation,
projectModalShown,
stepVerification,
currentSection,
teamInviteAvailable,
progressPercentage,
slackCalled,
} = useValues(onboardingSetupLogic)
const { switchToNonDemoProject, setProjectModalShown, completeOnboarding, callSlack } =
useActions(onboardingSetupLogic)
const { showInviteModal } = useActions(inviteLogic)
const { currentTeam, currentTeamLoading } = useValues(teamLogic)
const { updateCurrentTeam } = useActions(teamLogic)
const { currentOrganizationLoading } = useValues(organizationLogic)
const UTM_TAGS = 'utm_medium=in-product&utm_campaign=onboarding-setup-2822'
return (
<div className="onboarding-setup">
{currentSection ? (
<>
<Row gutter={16}>
<Col span={18}>
<PageHeader
title="Setup"
caption="Get your PostHog instance up and running with all the bells and whistles"
/>
</Col>
<Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
<Progress percent={progressPercentage} strokeColor="var(--purple)" strokeWidth={16} />
</Col>
</Row>
<Collapse defaultActiveKey={currentSection} expandIconPosition="right" accordion>
<Panel
header={
<PanelHeader
title="Event Ingestion"
caption="First things first, you need to connect PostHog to your website. You’ll be able to add more sources later."
stepNumber={1}
/>
}
key="1"
>
<div className="step-list">
<OnboardingStep
label="Set up project"
icon={<ProjectOutlined />}
title="Step 1"
identifier="set-up-project"
completed={stepProjectSetup}
handleClick={() => setProjectModalShown(true)}
/>
<OnboardingStep
label="Install PostHog"
icon={<CodeOutlined />}
title="Step 2"
identifier="install-posthog"
disabled={!stepProjectSetup}
completed={stepInstallation}
handleClick={() => switchToNonDemoProject('/ingestion')}
/>
<OnboardingStep
label="Verify your events"
icon={<CheckOutlined />}
title="Step 3"
identifier="verify-events"
disabled={!stepProjectSetup || !stepInstallation}
completed={stepVerification}
handleClick={() => switchToNonDemoProject('/ingestion/verify')}
/>
</div>
</Panel>
<Panel
header={
<PanelHeader
title="Configuration"
caption="Tune the settings of PostHog to make sure it works best for you and your team."
stepNumber={2}
/>
}
key="2"
collapsible={currentSection < 2 ? 'disabled' : undefined}
>
<div className="step-list">
<OnboardingStep
title="Enable session recording"
icon={<PlaySquareOutlined />}
identifier="session-recording"
handleClick={() =>
updateCurrentTeam({
session_recording_opt_in: !currentTeam?.session_recording_opt_in,
})
}
caption={
<>
Play user interactions as if you were right there with them.{' '}
<Link
to={`https://posthog.com/docs/features/session-recording?${UTM_TAGS}`}
rel="noopener"
target="_blank"
>
Learn more
</Link>
.
</>
}
customActionElement={
<div style={{ fontWeight: 'bold' }}>
{currentTeam?.session_recording_opt_in ? (
<span style={{ color: 'var(--success)' }}>Enabled</span>
) : (
<span style={{ color: 'var(--danger)' }}>Disabled</span>
)}
<Switch
checked={currentTeam?.session_recording_opt_in}
loading={currentTeamLoading}
style={{ marginLeft: 6 }}
/>
</div>
}
analyticsExtraArgs={{
new_session_recording_enabled: !currentTeam?.session_recording_opt_in,
}}
/>
<OnboardingStep
title="Join us on Slack"
icon={<SlackOutlined />}
identifier="slack"
handleClick={() => {
callSlack()
window.open(`https://posthog.com/slack?s=app&${UTM_TAGS}`, '_blank')
}}
caption="Fastest way to reach the PostHog team and the community."
customActionElement={
<Button type={slackCalled ? 'default' : 'primary'} icon={<SlackOutlined />}>
Join us
</Button>
}
/>
{teamInviteAvailable && (
<OnboardingStep
title="Invite your team members"
icon={<UsergroupAddOutlined />}
identifier="invite-team"
handleClick={showInviteModal}
caption="Spread the knowledge, share insights with everyone in your team."
customActionElement={
<Button type="primary" icon={<PlusOutlined />}>
Invite my team
</Button>
}
/>
)}
</div>
<div className="text-center" style={{ marginTop: 32 }}>
<Button
type="default"
onClick={completeOnboarding}
loading={currentOrganizationLoading}
data-attr="onboarding-setup-complete"
>
Finish setup
</Button>
</div>
</Panel>
</Collapse>
<CreateProjectModal
isVisible={projectModalShown}
onClose={() => setProjectModalShown(false)}
title="Set up your first project"
caption={
<div className="mb">
<div>
Enter a <b>name</b> for your first project
</div>
<div className="text-muted">
It's helpful to separate your different apps in multiple projects. Read more about
our recommendations and{' '}
<Link
to={`https://posthog.com/docs/features/organizations?${UTM_TAGS}`}
rel="noopener"
target="_blank"
>
best practices <IconOpenInNew />
</Link>
</div>
</div>
}
/>
</>
) : (
<div className="already-completed">
<CheckCircleOutlined className="completed-icon" />{' '}
<h2 className="">Your organization is set up!</h2>
<div className="text-muted">
Looks like your organization is good to go. If you still need some help, check out{' '}
<Link
to={`https://posthog.com/docs?${UTM_TAGS}&utm_message=onboarding-completed`}
target="_blank"
>
our docs <IconOpenInNew />
</Link>
</div>
<div style={{ marginTop: 32 }}>
<LinkButton type="primary" to="/" data-attr="onbording-completed-insights">
Go to insights <ArrowRightOutlined />
</LinkButton>
</div>
</div>
)}
</div>
)
}
Example #4
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
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>
);
}
Example #5
| Source File: Triggers.tsx From leek with Apache License 2.0 | 4 votes |
|
Triggers = (props) => {
const [form] = Form.useForm();
const service = new ApplicationService();
const { updateApplication } = useApplication();
const [createTriggerModalVisible, setCreateTriggerModalVisible] =
useState<boolean>(false);
const [editTriggerModalVisible, setEditTriggerModalVisible] =
useState<boolean>(false);
const [patternType, setPatternType] = useState<string>("all");
const [loading, setLoading] = useState<boolean>(false);
const [triggerId, setTriggerId] = useState();
useEffect(() => {}, []);
function doAddTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.addFanoutTrigger(props.selectedApp.app_name, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doEditTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.editFanoutTrigger(props.selectedApp.app_name, triggerId, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doDeleteTrigger(trigger_id) {
setLoading(true);
service
.deleteFanoutTrigger(props.selectedApp.app_name, trigger_id)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function handleEditTrigger(trigger_id, selected) {
setTriggerId(trigger_id);
if (selected.include && selected.include.length)
selected.patterns = "include";
else if (selected.exclude && selected.exclude.length)
selected.patterns = "exclude";
else selected.patterns = "all";
setPatternType(selected.patterns);
form.setFieldsValue(selected);
setEditTriggerModalVisible(true);
}
function reset() {
setCreateTriggerModalVisible(false);
setEditTriggerModalVisible(false);
setTriggerId(undefined);
form.resetFields();
}
const formItems = (
<>
<FormItem name="type">
<Select>
<Option value="slack">
<SlackOutlined />
Slack
</Option>
</Select>
</FormItem>
<FormItem
name="slack_wh_url"
rules={[
{ required: true, message: "Please input slack webhook url!" },
{
type: "url",
message: "This field must be a valid url.",
},
]}
>
<Input
prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
placeholder="Webhook URL"
/>
</FormItem>
<FormItem name="states">
<Select
mode="multiple"
tagRender={TaskStateClosable}
style={{ width: "100%" }}
placeholder="States"
options={statesOptions}
/>
</FormItem>
<FormItem name="envs">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Environments"
/>
</FormItem>
<Divider />
<FormItem name="runtime_upper_bound">
<InputNumber
style={{ width: "100%" }}
min={0}
max={1000}
step={0.00001}
placeholder="Runtime upper bound (Only succeeded Tasks)"
/>
</FormItem>
<FormItem name="patterns" valuePropName="value">
<Radio.Group
buttonStyle="solid"
onChange={(e) => setPatternType(e.target.value)}
>
<Radio.Button value="all">All tasks</Radio.Button>
<Radio.Button value="exclude">Exclude</Radio.Button>
<Radio.Button value="include">Include</Radio.Button>
</Radio.Group>
</FormItem>
{"include" === patternType && (
<FormItem name="include">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to include"
/>
</FormItem>
)}
{"exclude" === patternType && (
<FormItem name="exclude">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to exclude"
/>
</FormItem>
)}
<FormItem name="enabled" valuePropName="checked">
<Switch
checkedChildren="Enabled"
unCheckedChildren="Disabled"
defaultChecked
size="small"
/>
</FormItem>
</>
);
return (
<Row style={{ width: "100%", marginBottom: "16px" }}>
{/*Create Trigger*/}
<Modal
title={
<Space>
<BellOutlined />
Create Trigger
</Space>
}
visible={createTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="createTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Create
</Button>,
]}
>
<Form
onFinish={doAddTrigger}
form={form}
id="createTrigger"
initialValues={{ type: "slack", patterns: "all", enabled: false }}
>
{formItems}
</Form>
</Modal>
{/*Edit Trigger*/}
<Modal
title={() => (
<>
<BellOutlined /> `Edit Trigger ${triggerId}`
</>
)}
visible={editTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="editTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Update
</Button>,
]}
>
<Form onFinish={doEditTrigger} form={form} id="editTrigger">
{formItems}
</Form>
</Modal>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
title={
<Row justify="space-between">
<Col>
<Space>
<BellOutlined />
<Text strong>Fanout Triggers</Text>
</Space>
</Col>
<Col>
<Button
onClick={() => setCreateTriggerModalVisible(true)}
size="small"
type="primary"
ghost
icon={<AppstoreAddOutlined />}
/>
</Col>
</Row>
}
>
<Table
dataSource={props.selectedApp.fo_triggers}
columns={TriggerDataColumns({
handleEditTrigger: handleEditTrigger,
handleDeleteTrigger: doDeleteTrigger,
triggersModifying: loading,
})}
showHeader={false}
pagination={false}
size="small"
rowKey="id"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">triggers</a> found
</span>
}
/>
</div>
),
}}
expandable={{
expandedRowRender: (record) => (
<>
<Row justify="space-between">
<Col span={12}>
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Webhook URL"}
description={<Tag>{record.slack_wh_url}</Tag>}
/>
</Col>
<Col span={12}>
{record.exclude && record.exclude.length > 0 && (
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Exclusions"}
description={record.exclude.map((exclusion, key) => (
<Tag key={key}>{exclusion}</Tag>
))}
/>
)}
{record.include && record.include.length > 0 && (
<List.Item.Meta
title={"Inclusions"}
description={record.include.map((inclusion, key) => (
<Tag key={key}>{inclusion}</Tag>
))}
/>
)}
</Col>
</Row>
</>
),
rowExpandable: (record) => true,
}}
/>
</Card>
</Row>
);
}
