From 15ac76a47bc218bea6b1c30787cbfbf2ac7c1aaf Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 12 May 2020 17:10:48 +0300
Subject: [PATCH] Search: Safari UI fixes (#24567)

* Search: Add height: 100% to page containers

* Search: Reset TagOption display to block

* Search: Add title to result list

* Search: Use flex-basis vs height

* Search: Remove IconButton

* Search: Do not shrink select options

* Search: Fix hasEditPermissionInFolders

* Search: Update tests

* Search: Fix prop

* Remove select wrapper class

* Update snapshot
---
 packages/grafana-ui/src/components/Drawer/Drawer.tsx       | 1 +
 .../grafana-ui/src/components/Select/getSelectStyles.ts    | 1 +
 public/app/core/components/TagFilter/TagOption.tsx         | 3 ---
 public/app/core/services/search_srv.ts                     | 2 +-
 public/app/features/alerting/AlertRuleList.tsx             | 2 +-
 .../alerting/__snapshots__/AlertRuleList.test.tsx.snap     | 4 ++--
 public/app/features/search/components/ManageDashboards.tsx | 1 +
 .../search/components/SearchResultsFilter.test.tsx         | 1 +
 .../app/features/search/components/SearchResultsFilter.tsx | 4 +++-
 public/app/features/search/components/SectionHeader.tsx    | 7 ++-----
 public/app/features/search/hooks/useManageDashboards.ts    | 2 +-
 public/sass/layout/_page.scss                              | 2 ++
 12 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 7ec37aa2521..a5fedb24245 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -63,6 +63,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
       flex-grow: 1;
       overflow: ${!scollableContent ? 'hidden' : 'auto'};
       z-index: 0;
+      height: 100%;
     `,
   };
 });
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 38ca6a795d5..b1d899b87da 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -22,6 +22,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       display: flex;
       align-items: center;
       flex-direction: row;
+      flex-shrink: 0;
       white-space: nowrap;
       cursor: pointer;
       border-left: 2px solid transparent;
diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index 07a3e9e8037..b8be8846173 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/public/app/core/components/TagFilter/TagOption.tsx
@@ -28,9 +28,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     option: css`
       padding: 8px;
-      display: flex;
-      align-items: center;
-      flex-direction: row;
       white-space: nowrap;
       cursor: pointer;
       border-left: 2px solid transparent;
diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts
index 57716413ed7..2e2243959c0 100644
--- a/public/app/core/services/search_srv.ts
+++ b/public/app/core/services/search_srv.ts
@@ -71,7 +71,7 @@ export class SearchSrv {
     if (query.layout === SearchLayout.List) {
       return backendSrv
         .search({ ...query, type: DashboardSearchItemType.DashDB })
-        .then(results => (results.length ? [{ items: results }] : []));
+        .then(results => (results.length ? [{ title: '', items: results }] : []));
     }
 
     if (!filters) {
diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx
index d8f0ca4b8bf..30f427c0992 100644
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/public/app/features/alerting/AlertRuleList.tsx
@@ -108,7 +108,7 @@ export class AlertRuleList extends PureComponent<Props, any> {
             <div className="gf-form">
               <label className="gf-form-label">States</label>
 
-              <div className="gf-form-select-wrapper width-13">
+              <div className="width-13">
                 <Select
                   options={this.stateFilters}
                   onChange={this.onStateFilterChanged}
diff --git a/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap b/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
index 88dc8f0f6fe..635471e0d48 100644
--- a/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
+++ b/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Render should render alert rules 1`] = `
           States
         </label>
         <div
-          className="gf-form-select-wrapper width-13"
+          className="width-13"
         >
           <Select
             onChange={[Function]}
@@ -162,7 +162,7 @@ exports[`Render should render component 1`] = `
           States
         </label>
         <div
-          className="gf-form-select-wrapper width-13"
+          className="width-13"
         >
           <Select
             onChange={[Function]}
diff --git a/public/app/features/search/components/ManageDashboards.tsx b/public/app/features/search/components/ManageDashboards.tsx
index 28e13db3b33..f128f3a68c6 100644
--- a/public/app/features/search/components/ManageDashboards.tsx
+++ b/public/app/features/search/components/ManageDashboards.tsx
@@ -119,6 +119,7 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
           query={query}
           hideLayout={!!folderUid}
           onLayoutChange={onLayoutChange}
+          editable={hasEditPermissionInFolders}
         />
         <SearchResults
           loading={loading}
diff --git a/public/app/features/search/components/SearchResultsFilter.test.tsx b/public/app/features/search/components/SearchResultsFilter.test.tsx
index 4d2b62554f2..f580a8a749b 100644
--- a/public/app/features/search/components/SearchResultsFilter.test.tsx
+++ b/public/app/features/search/components/SearchResultsFilter.test.tsx
@@ -21,6 +21,7 @@ const setup = (propOverrides?: Partial<Props>, renderMethod = shallow) => {
     //@ts-ignore
     query: { starred: false, sort: null, tag: ['tag'] },
     onSortChange: noop,
+    editable: true,
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/search/components/SearchResultsFilter.tsx b/public/app/features/search/components/SearchResultsFilter.tsx
index 3344ddbc087..aba873b8daf 100644
--- a/public/app/features/search/components/SearchResultsFilter.tsx
+++ b/public/app/features/search/components/SearchResultsFilter.tsx
@@ -20,6 +20,7 @@ export interface Props {
   onTagFilterChange: onSelectChange;
   onToggleAllChecked: () => void;
   query: DashboardQuery;
+  editable?: boolean;
 }
 
 export const SearchResultsFilter: FC<Props> = ({
@@ -35,6 +36,7 @@ export const SearchResultsFilter: FC<Props> = ({
   onTagFilterChange,
   onToggleAllChecked,
   query,
+  editable,
 }) => {
   const showActions = canDelete || canMove;
   const theme = useTheme();
@@ -42,7 +44,7 @@ export const SearchResultsFilter: FC<Props> = ({
 
   return (
     <div className={styles.wrapper}>
-      <Checkbox value={allChecked} onChange={onToggleAllChecked} />
+      {editable && <Checkbox value={allChecked} onChange={onToggleAllChecked} />}
       {showActions ? (
         <HorizontalGroup spacing="md">
           <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">
diff --git a/public/app/features/search/components/SectionHeader.tsx b/public/app/features/search/components/SectionHeader.tsx
index 6fda6dd7630..f5428d16767 100644
--- a/public/app/features/search/components/SectionHeader.tsx
+++ b/public/app/features/search/components/SectionHeader.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import { css, cx } from 'emotion';
 import { useLocalStorage } from 'react-use';
 import { GrafanaTheme } from '@grafana/data';
-import { Icon, IconButton, Spinner, stylesFactory, useTheme } from '@grafana/ui';
+import { Icon, Spinner, stylesFactory, useTheme } from '@grafana/ui';
 import { DashboardSection, OnToggleChecked } from '../types';
 import { SearchCheckbox } from './SearchCheckbox';
 import { getSectionIcon, getSectionStorageKey } from '../utils';
@@ -51,7 +51,7 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
       <span className={styles.text}>{section.title}</span>
       {section.url && (
         <a href={section.url} className={styles.link}>
-          <IconButton name="cog" className={styles.button} />
+          <Icon name="cog" />
         </a>
       )}
       {section.itemsFetching ? <Spinner /> : <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />}
@@ -97,8 +97,5 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
       opacity: 0;
       transition: opacity 150ms ease-in-out;
     `,
-    button: css`
-      margin-top: 3px;
-    `,
   };
 });
diff --git a/public/app/features/search/hooks/useManageDashboards.ts b/public/app/features/search/hooks/useManageDashboards.ts
index 5cdcdb94c90..f272c03cb13 100644
--- a/public/app/features/search/hooks/useManageDashboards.ts
+++ b/public/app/features/search/hooks/useManageDashboards.ts
@@ -48,7 +48,7 @@ export const useManageDashboards = (
   ]);
 
   const canSave = folder?.canSave;
-  const hasEditPermissionInFolders = canSave ? contextSrv.hasEditPermissionInFolders : false;
+  const hasEditPermissionInFolders = folder ? canSave : contextSrv.hasEditPermissionInFolders;
   const noFolders = canSave && folder?.id && results.length === 0 && !loading && !initialLoading;
 
   return {
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index f4cd65615af..003fcfacf56 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -33,11 +33,13 @@
   min-height: 100%;
   flex-direction: column;
   width: 100%;
+  height: 100%;
 }
 
 .page-container {
   flex-grow: 1;
   width: 100%;
+  flex-basis: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: $spacer * 2;