use render props in WithPermissionConrtol

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 ? (
+    <Tooltip
+      content="You do not have permission to perform this action. Ask an admin to upgrade your permissions."
+      placement="top"
+    >
+      <span>{element}</span>
+    </Tooltip>
+  ) : (
+    element
+  );
+});

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<any, any> {
-  async componentDidMount() {}
-
-  componentDidUpdate() {}
-
   render() {
     return (
       <div className={cx('root')}>
-        <GSelect
-          isMulti
-          showSearch
-          allowClear
-          modelName="userStore"
-          displayField="username"
-          valueField="pk"
-          placeholder="Select Users"
-          className={cx('select', 'control')}
-          value={undefined}
-          onChange={this.slackChannelChangeHandler}
-          nullItemName={PRIVATE_CHANNEL_NAME}
-        />
+        <WithPermissionControl userAction={UserAction.UpdateSchedules}>
+          {(disabled) => <Button disabled={disabled}>Click me!</Button>}
+        </WithPermissionControl>
       </div>
     );
   }
-
-  slackChannelChangeHandler = (value: any) => {
-    console.log(value);
-  };
 }
 
 export default withMobXProviderContext(Test);

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<OnCallAppSettings>) {
     this.resetStatusToDefault();
 
+    console.log(meta);
+
     if (!meta.jsonData?.onCallApiUrl) {
       this.pluginIsInitialized = false;
       return;