openreplay/frontend/app/components/Dashboard/components/CreateCardButton.tsx
Delirium d604f9920b
feat ui: dashboards redesign (#2230)
* feat ui: dashboards redesign start

* more cards

* fix ui: more different cards...

* feat ui: finish cards, all trigger, all icons

* change(ui): added missin const

* feature(ui): new dashboard modal

* feature(ui): new dashboard modal

* change(ui): new cards

* change(ui): dashboard redesign

* change(ui): dashboard redesign

* change(ui): dashboard redesign

* change(ui): modal context and alert form

* change(ui): table card show more with modal

* change(ui): examples

* change(ui): example categorize and other improvements

* change(ui): example categorize and other improvements

* change(ui): performance cards

* change(ui): insights card

* Various style updates in dashboards and other pages. (#2308)

* Various minor style updates

* Various style improvements

* Update ExampleCards.tsx

* change(ui): fixed an issue with card create

* change(ui): fixed an issue with card create

* change(ui): default filters and events order

* change(ui): random data

* Dashboards redesign - improvments (#2313)

* Various minor style updates

* Various style improvements

* Update ExampleCards.tsx

* various minor improvements in dashbaords.

* revised dashboard widget header

* change(ui): sessions by user

* change(ui): funnel example

* change(ui): modal height and scroll

* change(ui): example cards with data

* change(ui): example cards with data

* change(ui): funnel bar text color

* change(ui): example cards overlay click

* change(ui): path analysis filter card

---------

Co-authored-by: Shekar Siri <sshekarsiri@gmail.com>
Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
2024-06-27 19:47:34 +02:00

32 lines
1 KiB
TypeScript

import React from "react";
import {Tooltip} from "UI";
import {Button} from "antd";
import { PlusOutlined } from '@ant-design/icons';
import AddCardSelectionModal from "Components/Dashboard/components/AddCardSelectionModal";
import {useStore} from "App/mstore";
const MAX_CARDS = 29;
function CreateCardButton() {
const [open, setOpen] = React.useState(false);
const {dashboardStore} = useStore();
const dashboard: any = dashboardStore.selectedDashboard;
const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
return <>
<Tooltip delay={0} disabled={canAddMore}
title="The number of cards in one dashboard is limited to 30.">
<Button
type="primary"
disabled={!canAddMore}
onClick={() => setOpen(true)}
icon={<PlusOutlined />}
>
Add Card
</Button>
</Tooltip>
<AddCardSelectionModal open={open} onClose={() => setOpen(false)}/>
</>;
}
export default CreateCardButton;