mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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
This commit is contained in:
parent
892f9f789c
commit
15ac76a47b
@ -63,6 +63,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
|
||||
flex-grow: 1;
|
||||
overflow: ${!scollableContent ? 'hidden' : 'auto'};
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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}
|
||||
|
@ -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]}
|
||||
|
@ -119,6 +119,7 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
|
||||
query={query}
|
||||
hideLayout={!!folderUid}
|
||||
onLayoutChange={onLayoutChange}
|
||||
editable={hasEditPermissionInFolders}
|
||||
/>
|
||||
<SearchResults
|
||||
loading={loading}
|
||||
|
@ -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);
|
||||
|
@ -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">
|
||||
|
@ -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;
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user