Chore: Remove gf-form in UserPermission & Annotation Query (#78785)

* Chore: Remove gf-form in UserPermission

* more changes

* Update public/app/features/admin/UserPermissions.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* more change

* Added annotationQueryEditor

* empty div

* Update public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* final

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Khushi Jain 2023-12-14 12:57:30 +05:30 committed by GitHub
parent 590bab21b0
commit ee82801843
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 50 deletions

View File

@ -40,53 +40,51 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, o
return (
<>
<h3 className="page-heading">Permissions</h3>
<div className="gf-form-group">
<div className="gf-form">
<table className="filter-table form-inline">
<tbody>
<tr>
<td className="width-16">Grafana Admin</td>
{isEditing ? (
<td colSpan={2}>
<RadioButtonGroup
options={adminOptions}
value={currentAdminOption}
onChange={setCurrentAdminOption}
autoFocus
/>
</td>
) : (
<td colSpan={2}>
{isGrafanaAdmin ? (
<>
<Icon name="shield" /> Yes
</>
) : (
<>No</>
)}
</td>
)}
<td>
{canChangePermissions && (
<ConfirmButton
onClick={onChangeClick}
onConfirm={handleGrafanaAdminChange}
onCancel={onCancelClick}
confirmText="Change"
>
Change
</ConfirmButton>
)}
{isExternalUser && (
<div className={styles.lockMessageClass}>
<ExternalUserTooltip lockMessage={lockMessage} />
</div>
<div className={styles.container}>
<table className="filter-table form-inline">
<tbody>
<tr>
<td className="width-16">Grafana Admin</td>
{isEditing ? (
<td colSpan={2}>
<RadioButtonGroup
options={adminOptions}
value={currentAdminOption}
onChange={setCurrentAdminOption}
autoFocus
/>
</td>
) : (
<td colSpan={2}>
{isGrafanaAdmin ? (
<>
<Icon name="shield" /> Yes
</>
) : (
<>No</>
)}
</td>
</tr>
</tbody>
</table>
</div>
)}
<td>
{canChangePermissions && (
<ConfirmButton
onClick={onChangeClick}
onConfirm={handleGrafanaAdminChange}
onCancel={onCancelClick}
confirmText="Change"
>
Change
</ConfirmButton>
)}
{isExternalUser && (
<div className={styles.lockMessageClass}>
<ExternalUserTooltip lockMessage={lockMessage} />
</div>
)}
</td>
</tr>
</tbody>
</table>
</div>
</>
);
@ -99,4 +97,7 @@ const getTooltipStyles = (theme: GrafanaTheme2) => ({
font-style: italic;
margin-right: ${theme.spacing(0.6)};
`,
container: css({
marginBottom: theme.spacing(5),
}),
});

View File

@ -2,7 +2,7 @@ import React from 'react';
import { AnnotationQuery } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Input } from '@grafana/ui';
import { Input, Stack } from '@grafana/ui';
import { ElasticsearchQuery } from '../../types';
@ -18,8 +18,8 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
const onAnnotationChange = props.onAnnotationChange!;
return (
<>
<div className="gf-form-group">
<Stack direction="column" gap={5}>
<div>
<ElasticSearchQueryField
value={annotation.target?.query}
onChange={(query) => {
@ -37,7 +37,7 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
/>
</div>
<div className="gf-form-group">
<div>
<h6>Field mappings</h6>
<EditorRow>
<EditorField label="Time">
@ -92,6 +92,9 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
</EditorField>
</EditorRow>
</div>
</>
{/*Empty div to preserve the bottom margin */}
<div />
</Stack>
);
}