11import React from 'react' ;
22
3- import { Field , Input , Switch } from '@grafana/ui ' ;
4- import cn from 'classnames/bind ' ;
3+ import { css } from '@emotion/css ' ;
4+ import { Field , Input , Switch , useStyles2 } from '@grafana/ui ' ;
55import { observer } from 'mobx-react' ;
66import { LegacyNavHeading } from 'navbar/LegacyNavHeading' ;
77
@@ -10,86 +10,71 @@ import { ApiTokenSettings } from 'containers/ApiTokenSettings/ApiTokenSettings';
1010import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip' ;
1111import { TeamsSettings } from 'pages/settings/tabs/TeamsSettings/TeamsSettings' ;
1212import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers' ;
13- import { WithStoreProps } from 'state/types' ;
14- import { withMobXProviderContext } from 'state/withStore' ;
13+ import { useStore } from 'state/useStore' ;
1514import { UserActions } from 'utils/authorization/authorization' ;
1615
17- import styles from './MainSettings.module.css' ;
16+ export const MainSettings = observer ( ( ) => {
17+ const styles = useStyles2 ( getStyles ) ;
18+ const {
19+ organizationStore : { currentOrganization, saveCurrentOrganization } ,
20+ pluginStore : { apiUrlFromStatus } ,
21+ } = useStore ( ) ;
1822
19- const cx = cn . bind ( styles ) ;
20-
21- interface SettingsPageProps extends WithStoreProps { }
22-
23- interface SettingsPageState {
24- apiUrl ?: string ;
25- }
26-
27- @observer
28- class Settings extends React . Component < SettingsPageProps , SettingsPageState > {
29- state : SettingsPageState = {
30- apiUrl : '' ,
31- } ;
32-
33- async componentDidMount ( ) {
34- const { store } = this . props ;
35- const url = await store . getApiUrlForSettings ( ) ;
36- this . setState ( { apiUrl : url } ) ;
37- }
38-
39- render ( ) {
40- const { organizationStore } = this . props . store ;
41- const { currentOrganization } = organizationStore ;
42- const { apiUrl } = this . state ;
43-
44- return (
45- < div className = { cx ( 'root' ) } >
46- < LegacyNavHeading >
47- < Text . Title level = { 3 } className = { cx ( 'title' ) } >
48- Organization settings
49- </ Text . Title >
50- </ LegacyNavHeading >
23+ return (
24+ < div >
25+ < LegacyNavHeading >
26+ < Text . Title level = { 3 } className = { styles . title } >
27+ Organization settings
28+ </ Text . Title >
29+ </ LegacyNavHeading >
5130
52- < div className = { cx ( 'settings' ) } >
53- < Text . Title level = { 3 } className = { cx ( 'title' ) } >
54- Resolution Note
55- </ Text . Title >
56- < Field
57- loading = { ! currentOrganization }
58- label = "Require a resolution note when resolving Alert Groups"
59- description = { `Once user clicks "Resolve" for an Alert Group, they will be required to fill in a resolution note about the Alert Group` }
60- >
61- < WithPermissionControlTooltip userAction = { UserActions . OtherSettingsWrite } >
62- < Switch
63- value = { currentOrganization ?. is_resolution_note_required }
64- onChange = { ( event ) => {
65- organizationStore . saveCurrentOrganization ( {
66- is_resolution_note_required : event . currentTarget . checked ,
67- } ) ;
68- } }
69- />
70- </ WithPermissionControlTooltip >
71- </ Field >
72- </ div >
73- { ! isTopNavbar ( ) && (
74- < div style = { { marginBottom : '20px' } } >
75- < Text . Title level = { 3 } className = { cx ( 'title' ) } >
76- Teams and Access Settings
77- </ Text . Title >
78- < TeamsSettings />
79- </ div >
80- ) }
81- < Text . Title level = { 3 } className = { cx ( 'title' ) } >
82- API URL
31+ < div className = { styles . settings } >
32+ < Text . Title level = { 3 } className = { styles . title } >
33+ Resolution Note
8334 </ Text . Title >
84- < div >
85- < Field >
86- < Input value = { apiUrl } disabled />
87- </ Field >
35+ < Field
36+ loading = { ! currentOrganization }
37+ label = "Require a resolution note when resolving Alert Groups"
38+ description = { `Once user clicks "Resolve" for an Alert Group, they will be required to fill in a resolution note about the Alert Group` }
39+ >
40+ < WithPermissionControlTooltip userAction = { UserActions . OtherSettingsWrite } >
41+ < Switch
42+ value = { currentOrganization ?. is_resolution_note_required }
43+ onChange = { ( event ) => {
44+ saveCurrentOrganization ( {
45+ is_resolution_note_required : event . currentTarget . checked ,
46+ } ) ;
47+ } }
48+ />
49+ </ WithPermissionControlTooltip >
50+ </ Field >
51+ </ div >
52+ { ! isTopNavbar ( ) && (
53+ < div style = { { marginBottom : '20px' } } >
54+ < Text . Title level = { 3 } className = { styles . title } >
55+ Teams and Access Settings
56+ </ Text . Title >
57+ < TeamsSettings />
8858 </ div >
89- < ApiTokenSettings />
59+ ) }
60+ < Text . Title level = { 3 } className = { styles . title } >
61+ API URL
62+ </ Text . Title >
63+ < div >
64+ < Field >
65+ < Input value = { apiUrlFromStatus } disabled />
66+ </ Field >
9067 </ div >
91- ) ;
92- }
93- }
68+ < ApiTokenSettings />
69+ </ div >
70+ ) ;
71+ } ) ;
9472
95- export const MainSettings = withMobXProviderContext ( Settings ) ;
73+ const getStyles = ( ) => ( {
74+ settings : css `
75+ width : fit-content;
76+ ` ,
77+ title : css `
78+ margin-bottom : 20px ;
79+ ` ,
80+ } ) ;
0 commit comments