From 8f4b76a3ded8422c9bb9ae80f50f1dacfe23cfe0 Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Mon, 15 Jul 2024 15:38:31 +0100 Subject: [PATCH] RestoreDashboards: Hide restore/delete actions when no items are selected (#90431) * RecentlyDeleted: Only show actions when items selected * RestoreDashboards: Hide actions when no items are selected --- .betterer.results | 4 +- .../BrowseDashboardsPage.tsx | 36 ++++++++--- .../browse-dashboards/RecentlyDeletedPage.tsx | 62 ++++++++++++------- .../BrowseActions/BrowseActions.tsx | 18 +----- .../components/BrowseFilters.tsx | 32 +++++----- .../components/RecentlyDeletedActions.tsx | 23 +------ .../search/page/components/ActionRow.tsx | 25 +++----- 7 files changed, 94 insertions(+), 106 deletions(-) diff --git a/.betterer.results b/.betterer.results index f80d11894df..3e3882d44ee 100644 --- a/.betterer.results +++ b/.betterer.results @@ -5231,9 +5231,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/search/page/components/ActionRow.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/search/page/components/SearchResultsTable.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], diff --git a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx index 1aabecafc40..93c73f97d01 100644 --- a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx +++ b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx @@ -130,14 +130,22 @@ const BrowseDashboardsPage = memo(({ match }: Props) => { } > - stateManager.onQueryChange(e)} - /> +
+ stateManager.onQueryChange(e)} + /> +
- {hasSelection ? : } + {hasSelection ? ( + + ) : ( +
+ +
+ )}
@@ -163,16 +171,24 @@ const BrowseDashboardsPage = memo(({ match }: Props) => { const getStyles = (theme: GrafanaTheme2) => ({ pageContents: css({ - display: 'grid', - gridTemplateRows: 'auto auto 1fr', + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), height: '100%', - rowGap: theme.spacing(1), }), // AutoSizer needs an element to measure the full height available subView: css({ height: '100%', }), + + filters: css({ + display: 'none', + + [theme.breakpoints.up('md')]: { + display: 'block', + }, + }), }); BrowseDashboardsPage.displayName = 'BrowseDashboardsPage'; diff --git a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx index cf0da923000..7c11c697b68 100644 --- a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx +++ b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx @@ -16,13 +16,14 @@ import { RecentlyDeletedActions } from './components/RecentlyDeletedActions'; import { RecentlyDeletedEmptyState } from './components/RecentlyDeletedEmptyState'; import { SearchView } from './components/SearchView'; import { getFolderPermissions } from './permissions'; -import { setAllSelection } from './state'; +import { setAllSelection, useHasSelection } from './state'; const RecentlyDeletedPage = memo(() => { const dispatch = useDispatch(); const styles = useStyles2(getStyles); const [searchState, stateManager] = useRecentlyDeletedStateManager(); + const hasSelection = useHasSelection(); const { canEditFolders, canEditDashboards } = getFolderPermissions(); const canSelect = canEditFolders || canEditDashboards; @@ -42,26 +43,33 @@ const RecentlyDeletedPage = memo(() => { return ( - - +
+ +
- + {hasSelection ? ( + + ) : ( +
+ +
+ )}
@@ -84,16 +92,24 @@ const RecentlyDeletedPage = memo(() => { const getStyles = (theme: GrafanaTheme2) => ({ pageContents: css({ - display: 'grid', - gridTemplateRows: 'auto auto auto 1fr', + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), height: '100%', - rowGap: theme.spacing(1), }), // AutoSizer needs an element to measure the full height available subView: css({ height: '100%', }), + + filters: css({ + display: 'none', + + [theme.breakpoints.up('md')]: { + display: 'block', + }, + }), }); RecentlyDeletedPage.displayName = 'RecentlyDeletedPage'; diff --git a/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx b/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx index ecc96464c2a..5942fe4a517 100644 --- a/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx +++ b/public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx @@ -1,9 +1,7 @@ -import { css } from '@emotion/css'; import { useMemo } from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; import { config, reportInteraction } from '@grafana/runtime'; -import { Button, Tooltip, useStyles2 } from '@grafana/ui'; +import { Button, Stack, Tooltip } from '@grafana/ui'; import appEvents from 'app/core/app_events'; import { t, Trans } from 'app/core/internationalization'; import { useSearchStateManager } from 'app/features/search/state/SearchStateManager'; @@ -20,7 +18,6 @@ import { MoveModal } from './MoveModal'; export interface Props {} export function BrowseActions() { - const styles = useStyles2(getStyles); const dispatch = useDispatch(); const selectedItems = useActionSelectionState(); const [deleteItems] = useDeleteItemsMutation(); @@ -87,7 +84,7 @@ export function BrowseActions() { ); return ( -
+ {moveIsInvalid ? ( {moveButton} @@ -99,19 +96,10 @@ export function BrowseActions() { -
+ ); } -const getStyles = (theme: GrafanaTheme2) => ({ - row: css({ - display: 'flex', - flexDirection: 'row', - gap: theme.spacing(1), - marginBottom: theme.spacing(2), - }), -}); - const actionMap = { move: 'grafana_manage_dashboards_item_moved', delete: 'grafana_manage_dashboards_item_deleted', diff --git a/public/app/features/browse-dashboards/components/BrowseFilters.tsx b/public/app/features/browse-dashboards/components/BrowseFilters.tsx index f7f8554d731..a34c47806df 100644 --- a/public/app/features/browse-dashboards/components/BrowseFilters.tsx +++ b/public/app/features/browse-dashboards/components/BrowseFilters.tsx @@ -6,22 +6,20 @@ export function BrowseFilters() { const [searchState, stateManager] = useSearchStateManager(); return ( -
- -
+ ); } diff --git a/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx b/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx index acabd5e7391..f199544539f 100644 --- a/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx +++ b/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx @@ -1,9 +1,7 @@ -import { css } from '@emotion/css'; import { useMemo } from 'react'; -import { GrafanaTheme2 } from '@grafana/data/'; import { reportInteraction } from '@grafana/runtime'; -import { Button, useStyles2 } from '@grafana/ui'; +import { Button, Stack } from '@grafana/ui'; import { GENERAL_FOLDER_UID } from 'app/features/search/constants'; import appEvents from '../../../core/app_events'; @@ -18,8 +16,6 @@ import { PermanentlyDeleteModal } from './PermanentlyDeleteModal'; import { RestoreModal } from './RestoreModal'; export function RecentlyDeletedActions() { - const styles = useStyles2(getStyles); - const dispatch = useDispatch(); const selectedItemsState = useActionSelectionState(); const [, stateManager] = useRecentlyDeletedStateManager(); @@ -112,26 +108,13 @@ export function RecentlyDeletedActions() { }; return ( -
+ -
+ ); } - -const getStyles = (theme: GrafanaTheme2) => ({ - row: css({ - display: 'flex', - flexDirection: 'row', - gap: theme.spacing(1), - margin: theme.spacing(2, 0), - - [theme.breakpoints.up('md')]: { - marginTop: 0, - }, - }), -}); diff --git a/public/app/features/search/page/components/ActionRow.tsx b/public/app/features/search/page/components/ActionRow.tsx index 0035f508f9d..631b4167d5b 100644 --- a/public/app/features/search/page/components/ActionRow.tsx +++ b/public/app/features/search/page/components/ActionRow.tsx @@ -76,7 +76,7 @@ export const ActionRow = ({ : []; return ( -
+ {config.featureToggles.panelTitleSearch && ( @@ -129,7 +129,7 @@ export const ActionRow = ({ isClearable /> -
+ ); }; @@ -137,21 +137,10 @@ ActionRow.displayName = 'ActionRow'; export const getStyles = (theme: GrafanaTheme2) => { return { - actionRow: css` - display: none; - - ${theme.breakpoints.up('md')} { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: ${theme.spacing(2)}; - width: 100%; - } - `, - checkboxWrapper: css` - label { - line-height: 1.2; - } - `, + checkboxWrapper: css({ + label: { + lineHeight: '1.2', + }, + }), }; };