IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

use components for modal styles

Browse Source
This commit is contained in:
joshhunt 2023-05-02 19:48:10 +01:00
parent d71ef0a0c4
commit 80ac1152f8
No known key found for this signature in database
GPG Key ID: F767869890CBA3F6
2 changed files with 32 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, ConfirmModal, Spinner, useStyles2 } from '@grafana/ui';
import { Space, Stack } from '@grafana/experimental';
import { Alert, ConfirmModal, Spinner } from '@grafana/ui';
import { P } from '@grafana/ui/src/unstable';
import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
import { DashboardTreeSelection } from '../../types';
@ -17,7 +17,6 @@ export interface Props {
}
export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
const styles = useStyles2(getStyles);
const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
const onDelete = () => {
@ -28,16 +27,19 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
return (
<ConfirmModal
body={
<div className={styles.modalBody}>
This action will delete the following content:
<div className={styles.breakdown}>
<>
{data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
{(isFetching || isLoading) && <Spinner size={12} />}
{error && <Alert severity="error" title="Unable to retrieve descendant information" />}
</>
</div>
</div>
<>
<Stack direction="column" gap={0.5}>
<P>This action will delete the following content:</P>
<P color="secondary">
<>
{data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
{(isFetching || isLoading) && <Spinner size={12} />}
{error && <Alert severity="error" title="Unable to retrieve descendant information" />}
</>
</P>
</Stack>
<Space v={2} />
</>
}
confirmationText="Delete"
confirmText="Delete"
@ -48,14 +50,3 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
/>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
breakdown: css({
...theme.typography.bodySmall,
color: theme.colors.text.secondary,
marginBottom: theme.spacing(2),
}),
modalBody: css({
...theme.typography.body,
}),
});

36
public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, Button, Field, Modal, Spinner, useStyles2 } from '@grafana/ui';
import { Space, Stack } from '@grafana/experimental';
import { Alert, Button, Field, Modal, Spinner } from '@grafana/ui';
import { P } from '@grafana/ui/src/unstable';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
@ -19,7 +19,6 @@ export interface Props {
export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
const [moveTarget, setMoveTarget] = useState<string>();
const styles = useStyles2(getStyles);
const selectedFolders = Object.keys(selectedItems.folder).filter((uid) => selectedItems.folder[uid]);
const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
@ -33,14 +32,19 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
return (
<Modal title="Move" onDismiss={onDismiss} {...props}>
{selectedFolders.length > 0 && <Alert severity="warning" title="Moving this item may change its permissions." />}
This action will move the following content:
<div className={styles.breakdown}>
<>
{data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
{(isFetching || isLoading) && <Spinner size={12} />}
{error && <Alert severity="error" title="Unable to retrieve descendant information" />}
</>
</div>
<Stack direction="column" gap={0.5}>
<P>This action will delete the following content:</P>
<P color="secondary">
<>
{data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
{(isFetching || isLoading) && <Spinner size={12} />}
{error && <Alert severity="error" title="Unable to retrieve descendant information" />}
</>
</P>
</Stack>
<Space v={2} />
<Field label="Folder name">
<FolderPicker allowEmpty onChange={({ uid }) => setMoveTarget(uid)} />
</Field>
@ -55,11 +59,3 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
</Modal>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
breakdown: css({
...theme.typography.bodySmall,
color: theme.colors.text.secondary,
marginBottom: theme.spacing(2),
}),
});