From 89c8855f9dab1301e848b3dd2743de40bff34117 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Fri, 17 Apr 2020 15:29:20 +0300 Subject: [PATCH] Search: migrate manage dashboards (#23530) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Search: add search wrapper * Search: add DashboardSearch.tsx * Search: enable search * Search: update types * Search: useReducer for saving search results * Search: use default query * Search: add toggle custom action * Search: add onQueryChange * Search: debounce search * Search: pas dispatch as a prop * Search: add tag filter * Search: Fix types * Search: revert changes * Search: close overlay on esc * Search: enable tag filtering * Search: clear query * Search: add autofocus to search field * Search: Rename close to closeSearch * Search: Add no results message * Search: Add loading state * Search: Remove Select from Forms namespace * Remove Add selectedIndex * Remove Add getFlattenedSections * Remove Enable selecting items * Search: add hasId * Search: preselect first item * Search: Add utils tests * Search: Fix moving selection down * Search: Add findSelected * Search: Add type to section * Search: Handle Enter key press on item highlight * Search: Move reducer et al. to separate files * Search: Remove redundant render check * Search: Close overlay on Esc and ArrowLeft press * Search: Add close button * Search: Document utils * Search: use Icon for remove icon * Search: Add DashboardSearch.test.tsx * Search: Move test data to a separate file * Search: Finalise DashboardSearch.test.tsx * Add search reducer tests * Search: Add search results loading indicator * Search: Remove inline function * Search: Do not mutate item * Search: Tweak utils * Search: Do not clear query on tag clear * Search: Fix folder:current search * Search: Fix results scroll * Search: Update tests * Search: Close overlay on cog icon click * Add mobile styles for close button * Search: Use CustomScrollbar * Search: Memoize TagList.tsx * Search: Fix type errors * Search: More strictNullChecks fixes * Search: Add ManageDashboards.tsx * Search: Add mergeReducers * Search: Use mergeReducers * Search: remove default state from reducers * Search: Fix recent and starred icons * Search: Enable search * Search: Add markup * Search: Separate manageDashboardsReducer * Search: Add DashboardActions.tsx * Use new Select for TagFilter * Search: Use TagFilter for search filters * Search: Use TagList * Search: Add toggleSection * Search: Add more actions * Search add manageDashboards.test.ts * Search: Add getCheckedUids * Search: Add modify and toggle checked actions * Search: Update tests * Search: Update component template * Search: Enable section toggle * Search: Derive canMove and canDelete * Search: Handle delete items * Search: Fix tests * Search: Enable toggle items * Search: Add confirm modal subtitle * Search: Use theme vars * Search: Add getCheckedDashboardsUids * Search: Add MoveToFolderModal * Search: Enable moving dashboards * Search: Fix strict null checks errors * Search: Fix strict null checks errors[2] * Search: Enable filters * Search: Add useSearchQuery.ts * Search: Toggle items when toggling all * Search: Update useSearchQuery to accept custom params * Search: Add useSearchQuery to dashboard search * Search: use SearchField for manage dashboards * Search: Remove event param from query change * Search: Add base search hooks * Search: refactor useSearch to accept reducer * Search: use useDashboardSearch hook * Search: Fix useSearchQuery params * Search: Enable folder search * Search: Update tests * Search: Pass the props to manage-dashboards * Search: Add search filters margin * Search: Remove search-field-wrapper class and hide logic for it * Search: Adjust SearchField styles * Search: Move search-results-container inside SearchResults * Search: Fix type errors * Search: Add EmptyListCTA * Search: Update move message * Search: Cleanup * Search: Add todo * Search: Fix action type * Search: Use React wrapper vs FolderDashboardsCtrl and DashboardListCtrl * Search: DashboardList => DashboardListPage * Search: Remove ManageDashboards from angular_wrappers * Minor style tweaks * Search: Use LinkButton Co-authored-by: Torkel Ödegaard --- .../cli/templates/component.tsx.template.ts | 5 +- .../core/components/Select/FolderPicker.tsx | 2 +- .../manage_dashboards/manage_dashboards.ts | 23 +-- public/app/core/selectors/location.ts | 1 + .../features/folders/FolderDashboardsCtrl.ts | 36 ---- .../folders/partials/folder_dashboards.html | 7 - .../partials/dashboard_list.html | 7 - .../search/components/ConfirmDeleteModal.tsx | 72 ++++++++ .../search/components/DashboardActions.tsx | 28 +++ .../search/components/DashboardListPage.tsx | 50 ++++++ .../components/DashboardSearch.test.tsx | 70 ++++---- .../search/components/DashboardSearch.tsx | 151 ++++------------ .../search/components/ManageDashboards.tsx | 169 ++++++++++++++++++ .../search/components/MoveToFolderModal.tsx | 91 ++++++++++ .../search/components/SearchField.tsx | 63 +++---- .../search/components/SearchItem.test.tsx | 3 +- .../features/search/components/SearchItem.tsx | 13 +- .../search/components/SearchResults.tsx | 103 +++++------ .../components/SearchResultsFilter.test.tsx | 16 +- .../search/components/SearchResultsFilter.tsx | 28 +-- .../search/hooks/useDashboardSearch.ts | 48 +++++ .../search/hooks/useManageDashboards.ts | 80 +++++++++ public/app/features/search/hooks/useSearch.ts | 53 ++++++ .../features/search/hooks/useSearchQuery.ts | 60 +++++++ public/app/features/search/index.ts | 3 + .../features/search/reducers/actionTypes.ts | 17 ++ .../search/reducers/dashboardSearch.test.ts | 27 +-- .../search/reducers/dashboardSearch.ts | 6 +- .../search/reducers/manageDashboards.test.ts | 104 +++++++++++ .../search/reducers/manageDashboards.ts | 97 ++++++++++ .../search/reducers/searchQueryReducer.ts | 42 +++++ public/app/features/search/testData.ts | 6 +- public/app/features/search/types.ts | 44 +++-- public/app/features/search/utils.test.ts | 67 ++++++- public/app/features/search/utils.ts | 89 ++++++++- public/app/partials/error.html | 2 +- public/app/routes/GrafanaCtrl.ts | 9 - public/app/routes/routes.ts | 31 ++-- public/sass/components/_tags.scss | 2 +- 39 files changed, 1317 insertions(+), 408 deletions(-) delete mode 100644 public/app/features/folders/FolderDashboardsCtrl.ts delete mode 100644 public/app/features/folders/partials/folder_dashboards.html delete mode 100644 public/app/features/manage-dashboards/partials/dashboard_list.html create mode 100644 public/app/features/search/components/ConfirmDeleteModal.tsx create mode 100644 public/app/features/search/components/DashboardActions.tsx create mode 100644 public/app/features/search/components/DashboardListPage.tsx create mode 100644 public/app/features/search/components/ManageDashboards.tsx create mode 100644 public/app/features/search/components/MoveToFolderModal.tsx create mode 100644 public/app/features/search/hooks/useDashboardSearch.ts create mode 100644 public/app/features/search/hooks/useManageDashboards.ts create mode 100644 public/app/features/search/hooks/useSearch.ts create mode 100644 public/app/features/search/hooks/useSearchQuery.ts create mode 100644 public/app/features/search/reducers/manageDashboards.test.ts create mode 100644 public/app/features/search/reducers/manageDashboards.ts create mode 100644 public/app/features/search/reducers/searchQueryReducer.ts diff --git a/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts b/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts index 3beb79f06e2..9cf159aefc1 100644 --- a/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts +++ b/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts @@ -1,7 +1,6 @@ -export const componentTpl = ` -import React, { FC } from 'react'; +export const componentTpl = `import React, { FC } from 'react'; -interface Props = {}; +interface Props {}; export const <%= name %>: FC = (props) => { return ( diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx index fe783fb0c40..a6063dcfe74 100644 --- a/public/app/core/components/Select/FolderPicker.tsx +++ b/public/app/core/components/Select/FolderPicker.tsx @@ -43,7 +43,7 @@ export class FolderPicker extends PureComponent { enableReset: false, initialTitle: '', enableCreateNew: false, - useInNextGenForms: false, + useNewForms: false, }; componentDidMount = async () => { diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 307489d313e..deec960960a 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -1,6 +1,7 @@ import { IScope } from 'angular'; import _ from 'lodash'; import { SelectableValue } from '@grafana/data'; +//@ts-ignore import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; import { SearchSrv } from 'app/core/services/search_srv'; @@ -337,26 +338,6 @@ export class ManageDashboardsCtrl { return url; } - - // TODO handle this inside SearchResults component - toggleSelection = (item: any, evt: any) => { - if (evt) { - evt.stopPropagation(); - evt.preventDefault(); - } - - item.checked = !item.checked; - - if (item.items) { - _.each(item.items, i => { - i.checked = item.checked; - }); - } - - if (this.selectionChanged) { - this.selectionChanged(); - } - }; } export function manageDashboardsDirective() { @@ -373,4 +354,4 @@ export function manageDashboardsDirective() { }; } -coreModule.directive('manageDashboards', manageDashboardsDirective); +//coreModule.directive('manageDashboards', manageDashboardsDirective); diff --git a/public/app/core/selectors/location.ts b/public/app/core/selectors/location.ts index b49bdbe0513..97bb61c43cb 100644 --- a/public/app/core/selectors/location.ts +++ b/public/app/core/selectors/location.ts @@ -2,3 +2,4 @@ import { LocationState } from 'app/types'; export const getRouteParamsId = (state: LocationState) => state.routeParams.id; export const getRouteParamsPage = (state: LocationState) => state.routeParams.page; +export const getRouteParams = (state: LocationState) => state.routeParams; diff --git a/public/app/features/folders/FolderDashboardsCtrl.ts b/public/app/features/folders/FolderDashboardsCtrl.ts deleted file mode 100644 index 96b2b9d6d5d..00000000000 --- a/public/app/features/folders/FolderDashboardsCtrl.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { ILocationService, IScope } from 'angular'; - -import { FolderPageLoader } from './services/FolderPageLoader'; -import locationUtil from 'app/core/utils/location_util'; -import { NavModelSrv } from 'app/core/core'; -import { promiseToDigest } from '../../core/utils/promiseToDigest'; - -export default class FolderDashboardsCtrl { - navModel: any; - folderId: number; - uid: string; - - /** @ngInject */ - constructor( - navModelSrv: NavModelSrv, - private $routeParams: any, - $location: ILocationService, - private $scope: IScope - ) { - if (this.$routeParams.uid) { - this.uid = $routeParams.uid; - - const loader = new FolderPageLoader(); - - promiseToDigest(this.$scope)( - loader.load(this, this.uid, 'manage-folder-dashboards').then((folder: any) => { - const url = locationUtil.stripBaseFromUrl(folder.url); - - if (url !== $location.path()) { - $location.path(url).replace(); - } - }) - ); - } - } -} diff --git a/public/app/features/folders/partials/folder_dashboards.html b/public/app/features/folders/partials/folder_dashboards.html deleted file mode 100644 index d8dfd9f82f8..00000000000 --- a/public/app/features/folders/partials/folder_dashboards.html +++ /dev/null @@ -1,7 +0,0 @@ - - -
- -
- -