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 ( return (
<> <>
<h3 className="page-heading">Permissions</h3> <h3 className="page-heading">Permissions</h3>
<div className="gf-form-group"> <div className={styles.container}>
<div className="gf-form"> <table className="filter-table form-inline">
<table className="filter-table form-inline"> <tbody>
<tbody> <tr>
<tr> <td className="width-16">Grafana Admin</td>
<td className="width-16">Grafana Admin</td> {isEditing ? (
{isEditing ? ( <td colSpan={2}>
<td colSpan={2}> <RadioButtonGroup
<RadioButtonGroup options={adminOptions}
options={adminOptions} value={currentAdminOption}
value={currentAdminOption} onChange={setCurrentAdminOption}
onChange={setCurrentAdminOption} autoFocus
autoFocus />
/> </td>
</td> ) : (
) : ( <td colSpan={2}>
<td colSpan={2}> {isGrafanaAdmin ? (
{isGrafanaAdmin ? ( <>
<> <Icon name="shield" /> Yes
<Icon name="shield" /> Yes </>
</> ) : (
) : ( <>No</>
<>No</>
)}
</td>
)}
<td>
{canChangePermissions && (
<ConfirmButton
onClick={onChangeClick}
onConfirm={handleGrafanaAdminChange}
onCancel={onCancelClick}
confirmText="Change"
>
Change
</ConfirmButton>
)}
{isExternalUser && (
<div className={styles.lockMessageClass}>
<ExternalUserTooltip lockMessage={lockMessage} />
</div>
)} )}
</td> </td>
</tr> )}
</tbody> <td>
</table> {canChangePermissions && (
</div> <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> </div>
</> </>
); );
@ -99,4 +97,7 @@ const getTooltipStyles = (theme: GrafanaTheme2) => ({
font-style: italic; font-style: italic;
margin-right: ${theme.spacing(0.6)}; 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 { AnnotationQuery } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental'; import { EditorField, EditorRow } from '@grafana/experimental';
import { Input } from '@grafana/ui'; import { Input, Stack } from '@grafana/ui';
import { ElasticsearchQuery } from '../../types'; import { ElasticsearchQuery } from '../../types';
@ -18,8 +18,8 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
const onAnnotationChange = props.onAnnotationChange!; const onAnnotationChange = props.onAnnotationChange!;
return ( return (
<> <Stack direction="column" gap={5}>
<div className="gf-form-group"> <div>
<ElasticSearchQueryField <ElasticSearchQueryField
value={annotation.target?.query} value={annotation.target?.query}
onChange={(query) => { onChange={(query) => {
@ -37,7 +37,7 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
/> />
</div> </div>
<div className="gf-form-group"> <div>
<h6>Field mappings</h6> <h6>Field mappings</h6>
<EditorRow> <EditorRow>
<EditorField label="Time"> <EditorField label="Time">
@ -92,6 +92,9 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
</EditorField> </EditorField>
</EditorRow> </EditorRow>
</div> </div>
</>
{/*Empty div to preserve the bottom margin */}
<div />
</Stack>
); );
} }