import * as React from 'react'; import {useState} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import {ModalRenderProps} from 'app/actionCreators/modal'; import Tag from 'app/components/tagDeprecated'; import {t} from 'app/locale'; import space from 'app/styles/space'; import {Organization} from 'app/types'; import {DashboardDetails, Widget} from 'app/views/dashboardsV2/types'; import {WidgetTemplate} from 'app/views/dashboardsV2/widgetLibrary/data'; import Button from '../../button'; import ButtonBar from '../../buttonBar'; import DashboardWidgetCustomTab from './customTab'; import DashboardWidgetLibraryTab from './libraryTab'; export type DashboardWidgetLibraryModalOptions = { organization: Organization; dashboard: DashboardDetails; onAddWidget: (widgets: Widget[]) => void; }; export enum TAB { Library = 'library', Custom = 'custom', } type Props = ModalRenderProps & DashboardWidgetLibraryModalOptions; function DashboardWidgetLibraryModal({ Header, Body, Footer, dashboard, closeModal, onAddWidget, }: Props) { const [tab, setTab] = useState(TAB.Library); const [selectedWidgets, setSelectedWidgets] = useState([]); const [errored, setErrored] = useState(false); function handleSubmit() { onAddWidget([...dashboard.widgets, ...selectedWidgets]); closeModal(); } return (

{t('Add Widget')}

{tab === TAB.Library ? ( ) : ( )} ); } export const modalCss = css` width: 100%; max-width: 700px; margin: 70px auto; `; const StyledButtonBar = styled(ButtonBar)` grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: ${space(1)}; `; const FooterButtonbar = styled(ButtonBar)` justify-content: space-between; width: 100%; `; const SelectedBadge = styled(Tag)` padding: 3px ${space(0.75)}; display: inline-flex; align-items: center; margin-left: ${space(1)}; margin-right: ${space(1)}; top: -1px; `; export default DashboardWidgetLibraryModal;