diff --git a/grafana-plugin/src/containers/WithPermissionControl2/WithPermissionControl.tsx b/grafana-plugin/src/containers/WithPermissionControl2/WithPermissionControl.tsx new file mode 100644 index 00000000..b5074956 --- /dev/null +++ b/grafana-plugin/src/containers/WithPermissionControl2/WithPermissionControl.tsx @@ -0,0 +1,33 @@ +import React, { ReactElement, useMemo } from 'react'; + +import { Tooltip } from '@grafana/ui'; +import { observer } from 'mobx-react'; + +import { useStore } from 'state/useStore'; +import { UserAction } from 'state/userAction'; + +interface WithPermissionControlProps { + userAction: UserAction; + children: (disabled?: boolean) => ReactElement; +} + +export const WithPermissionControl = observer((props: WithPermissionControlProps) => { + const { userAction, children } = props; + + const store = useStore(); + + const disabled = !store.isUserActionAllowed(userAction); + + const element = useMemo(() => children(disabled), [disabled]); + + return disabled ? ( + + {element} + + ) : ( + element + ); +}); diff --git a/grafana-plugin/src/pages/test/Test.tsx b/grafana-plugin/src/pages/test/Test.tsx index 34562e4c..ab40b2d0 100644 --- a/grafana-plugin/src/pages/test/Test.tsx +++ b/grafana-plugin/src/pages/test/Test.tsx @@ -1,10 +1,11 @@ import React from 'react'; +import { Button } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; -import GSelect from 'containers/GSelect/GSelect'; -import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config'; +import { WithPermissionControl } from 'containers/WithPermissionControl2/WithPermissionControl'; +import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; import styles from './Test.module.css'; @@ -13,33 +14,15 @@ const cx = cn.bind(styles); @observer class Test extends React.Component { - async componentDidMount() {} - - componentDidUpdate() {} - render() { return (
- + + {(disabled) => } +
); } - - slackChannelChangeHandler = (value: any) => { - console.log(value); - }; } export default withMobXProviderContext(Test); diff --git a/grafana-plugin/src/state/rootBaseStore.ts b/grafana-plugin/src/state/rootBaseStore.ts index ce4ebb1d..4062749b 100644 --- a/grafana-plugin/src/state/rootBaseStore.ts +++ b/grafana-plugin/src/state/rootBaseStore.ts @@ -36,8 +36,9 @@ import { getPluginSyncStatus, installPlugin, startPluginSync, - SYNC_STATUS_RETRY_LIMIT, syncStatusDelay, - updateGrafanaToken + SYNC_STATUS_RETRY_LIMIT, + syncStatusDelay, + updateGrafanaToken, } from './plugin'; import { UserAction } from './userAction'; @@ -190,28 +191,29 @@ export class RootBaseStore { } async waitForSyncStatus(retryCount = 0) { - if (retryCount > SYNC_STATUS_RETRY_LIMIT) { this.retrySync = true; return; } - getPluginSyncStatus().then((get_sync_response) => { - if (get_sync_response.hasOwnProperty('token_ok')) { - this.finishSync(get_sync_response); - } else { - syncStatusDelay(retryCount + 1) - .then(() => this.waitForSyncStatus(retryCount + 1)) - } - }).catch((e) => { + getPluginSyncStatus() + .then((get_sync_response) => { + if (get_sync_response.hasOwnProperty('token_ok')) { + this.finishSync(get_sync_response); + } else { + syncStatusDelay(retryCount + 1).then(() => this.waitForSyncStatus(retryCount + 1)); + } + }) + .catch((e) => { this.handleSyncException(e); }); - } async setupPlugin(meta: AppPluginMeta) { this.resetStatusToDefault(); + console.log(meta); + if (!meta.jsonData?.onCallApiUrl) { this.pluginIsInitialized = false; return;