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

@@ -63,6 +63,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
       flex-grow: 1;
       flex-grow: 1;
       overflow: ${!scollableContent ? 'hidden' : 'auto'};
       overflow: ${!scollableContent ? 'hidden' : 'auto'};
       z-index: 0;
       z-index: 0;
+      height: 100%;
     `,
     `,
   };
   };
 });
 });

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -22,6 +22,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       flex-direction: row;
       flex-direction: row;
+      flex-shrink: 0;
       white-space: nowrap;
       white-space: nowrap;
       cursor: pointer;
       cursor: pointer;
       border-left: 2px solid transparent;
       border-left: 2px solid transparent;

public/app/core/components/TagFilter/TagOption.tsx

@@ -28,9 +28,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
   return {
     option: css`
     option: css`
       padding: 8px;
       padding: 8px;
-      display: flex;
-      align-items: center;
-      flex-direction: row;
       white-space: nowrap;
       white-space: nowrap;
       cursor: pointer;
       cursor: pointer;
       border-left: 2px solid transparent;
       border-left: 2px solid transparent;

public/app/core/services/search_srv.ts

@@ -71,7 +71,7 @@ export class SearchSrv {
     if (query.layout === SearchLayout.List) {
     if (query.layout === SearchLayout.List) {
       return backendSrv
       return backendSrv
         .search({ ...query, type: DashboardSearchItemType.DashDB })
         .search({ ...query, type: DashboardSearchItemType.DashDB })
-        .then(results => (results.length ? [{ items: results }] : []));
+        .then(results => (results.length ? [{ title: '', items: results }] : []));
     }
     }
 
 
     if (!filters) {
     if (!filters) {

public/app/features/alerting/AlertRuleList.tsx

@@ -108,7 +108,7 @@ export class AlertRuleList extends PureComponent<Props, any> {
             <div className="gf-form">
             <div className="gf-form">
               <label className="gf-form-label">States</label>
               <label className="gf-form-label">States</label>
 
 
-              <div className="gf-form-select-wrapper width-13">
+              <div className="width-13">
                 <Select
                 <Select
                   options={this.stateFilters}
                   options={this.stateFilters}
                   onChange={this.onStateFilterChanged}
                   onChange={this.onStateFilterChanged}

public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Render should render alert rules 1`] = `
           States
           States
         </label>
         </label>
         <div
         <div
-          className="gf-form-select-wrapper width-13"
+          className="width-13"
         >
         >
           <Select
           <Select
             onChange={[Function]}
             onChange={[Function]}
@@ -162,7 +162,7 @@ exports[`Render should render component 1`] = `
           States
           States
         </label>
         </label>
         <div
         <div
-          className="gf-form-select-wrapper width-13"
+          className="width-13"
         >
         >
           <Select
           <Select
             onChange={[Function]}
             onChange={[Function]}

public/app/features/search/components/ManageDashboards.tsx

@@ -119,6 +119,7 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
           query={query}
           query={query}
           hideLayout={!!folderUid}
           hideLayout={!!folderUid}
           onLayoutChange={onLayoutChange}
           onLayoutChange={onLayoutChange}
+          editable={hasEditPermissionInFolders}
         />
         />
         <SearchResults
         <SearchResults
           loading={loading}
           loading={loading}

public/app/features/search/components/SearchResultsFilter.test.tsx

@@ -21,6 +21,7 @@ const setup = (propOverrides?: Partial<Props>, renderMethod = shallow) => {
     //@ts-ignore
     //@ts-ignore
     query: { starred: false, sort: null, tag: ['tag'] },
     query: { starred: false, sort: null, tag: ['tag'] },
     onSortChange: noop,
     onSortChange: noop,
+    editable: true,
   };
   };
 
 
   Object.assign(props, propOverrides);
   Object.assign(props, propOverrides);

public/app/features/search/components/SearchResultsFilter.tsx

@@ -20,6 +20,7 @@ export interface Props {
   onTagFilterChange: onSelectChange;
   onTagFilterChange: onSelectChange;
   onToggleAllChecked: () => void;
   onToggleAllChecked: () => void;
   query: DashboardQuery;
   query: DashboardQuery;
+  editable?: boolean;
 }
 }
 
 
 export const SearchResultsFilter: FC<Props> = ({
 export const SearchResultsFilter: FC<Props> = ({
@@ -35,6 +36,7 @@ export const SearchResultsFilter: FC<Props> = ({
   onTagFilterChange,
   onTagFilterChange,
   onToggleAllChecked,
   onToggleAllChecked,
   query,
   query,
+  editable,
 }) => {
 }) => {
   const showActions = canDelete || canMove;
   const showActions = canDelete || canMove;
   const theme = useTheme();
   const theme = useTheme();
@@ -42,7 +44,7 @@ export const SearchResultsFilter: FC<Props> = ({
 
 
   return (
   return (
     <div className={styles.wrapper}>
     <div className={styles.wrapper}>
-      <Checkbox value={allChecked} onChange={onToggleAllChecked} />
+      {editable && <Checkbox value={allChecked} onChange={onToggleAllChecked} />}
       {showActions ? (
       {showActions ? (
         <HorizontalGroup spacing="md">
         <HorizontalGroup spacing="md">
           <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">
           <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">

public/app/features/search/components/SectionHeader.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import { useLocalStorage } from 'react-use';
 import { useLocalStorage } from 'react-use';
 import { GrafanaTheme } from '@grafana/data';
 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 { DashboardSection, OnToggleChecked } from '../types';
 import { SearchCheckbox } from './SearchCheckbox';
 import { SearchCheckbox } from './SearchCheckbox';
 import { getSectionIcon, getSectionStorageKey } from '../utils';
 import { getSectionIcon, getSectionStorageKey } from '../utils';
@@ -51,7 +51,7 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
       <span className={styles.text}>{section.title}</span>
       <span className={styles.text}>{section.title}</span>
       {section.url && (
       {section.url && (
         <a href={section.url} className={styles.link}>
         <a href={section.url} className={styles.link}>
-          <IconButton name="cog" className={styles.button} />
+          <Icon name="cog" />
         </a>
         </a>
       )}
       )}
       {section.itemsFetching ? <Spinner /> : <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />}
       {section.itemsFetching ? <Spinner /> : <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />}
@@ -97,8 +97,5 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
       opacity: 0;
       opacity: 0;
       transition: opacity 150ms ease-in-out;
       transition: opacity 150ms ease-in-out;
     `,
     `,
-    button: css`
-      margin-top: 3px;
-    `,
   };
   };
 });
 });

public/app/features/search/hooks/useManageDashboards.ts

@@ -48,7 +48,7 @@ export const useManageDashboards = (
   ]);
   ]);
 
 
   const canSave = folder?.canSave;
   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;
   const noFolders = canSave && folder?.id && results.length === 0 && !loading && !initialLoading;
 
 
   return {
   return {

public/sass/layout/_page.scss

@@ -33,11 +33,13 @@
   min-height: 100%;
   min-height: 100%;
   flex-direction: column;
   flex-direction: column;
   width: 100%;
   width: 100%;
+  height: 100%;
 }
 }
 
 
 .page-container {
 .page-container {
   flex-grow: 1;
   flex-grow: 1;
   width: 100%;
   width: 100%;
+  flex-basis: 100%;
   margin-left: auto;
   margin-left: auto;
   margin-right: auto;
   margin-right: auto;
   padding-left: $spacer * 2;
   padding-left: $spacer * 2;