IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Modals: Fix selects in modals (#33939)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-05-11 21:19:25 +02:00 committed by GitHub
parent f346bafdc9
commit 985a4dd2b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

@ -68,9 +68,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
`,
modalContent: css`
padding: ${theme.spacing(3)};
overflow: auto;
width: 100%;
max-height: calc(90vh - ${theme.spacing(4)});
`,
modalButtonRow: css`
padding-top: ${theme.spacing(3)};

67
public/app/core/components/OrgSwitcher.tsx
View File

@ -2,10 +2,11 @@ import React from 'react';
import { getBackendSrv } from '@grafana/runtime';
import { UserOrgDTO } from '@grafana/data';
import { Modal, Button } from '@grafana/ui';
import { Modal, Button, CustomScrollbar } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import config from 'app/core/config';
import { css } from '@emotion/css';
interface Props {
onDismiss: () => void;
@ -43,35 +44,47 @@ export class OrgSwitcher extends React.PureComponent<Props, State> {
const { orgs } = this.state;
const currentOrgId = contextSrv.user.orgId;
const contentClassName = css({
display: 'flex',
maxHeight: 'calc(85vh - 42px)',
});
return (
<Modal title="Switch Organization" icon="arrow-random" onDismiss={onDismiss} isOpen={true}>
<table className="filter-table form-inline">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th />
</tr>
</thead>
<tbody>
{orgs.map((org) => (
<tr key={org.orgId}>
<td>{org.name}</td>
<td>{org.role}</td>
<td className="text-right">
{org.orgId === currentOrgId ? (
<Button size="sm">Current</Button>
) : (
<Button variant="secondary" size="sm" onClick={() => this.setCurrentOrg(org)}>
Switch to
</Button>
)}
</td>
<Modal
title="Switch Organization"
icon="arrow-random"
onDismiss={onDismiss}
isOpen={true}
contentClassName={contentClassName}
>
<CustomScrollbar autoHeightMin="100%">
<table className="filter-table form-inline">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th />
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{orgs.map((org) => (
<tr key={org.orgId}>
<td>{org.name}</td>
<td>{org.role}</td>
<td className="text-right">
{org.orgId === currentOrgId ? (
<Button size="sm">Current</Button>
) : (
<Button variant="secondary" size="sm" onClick={() => this.setCurrentOrg(org)}>
Switch to
</Button>
)}
</td>
</tr>
))}
</tbody>
</table>
</CustomScrollbar>
</Modal>
);
}