Merge pull request #30 from grafana/plugin-configuration-polish

Plugin configuration polish

grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css

@@ -1,7 +1,8 @@
-.delete_configuration_button {
-  margin-top: 20px;
-}
-
 .command-line {
   width: 100%;
 }
+
+.info-block {
+  margin-bottom: 24px;
+  margin-top: 24px;
+}

grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx

@@ -19,6 +19,7 @@ import cn from 'classnames/bind';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { OnCallAppSettings } from 'types';
 
+import Block from 'components/GBlock/Block';
 import Text from 'components/Text/Text';
 import WithConfirm from 'components/WithConfirm/WithConfirm';
 import logo from 'img/logo.svg';
@@ -34,23 +35,20 @@ const cx = cn.bind(styles);
 interface Props extends PluginConfigPageProps<AppPluginMeta<OnCallAppSettings>> {}
 
 export const PluginConfigPage = (props: Props) => {
+  const grafanaUrlDefault = getItem('grafanaUrl') || window.location.origin;
   const { plugin } = props;
   const [onCallApiUrl, setOnCallApiUrl] = useState<string>(getItem('onCallApiUrl'));
   const [onCallInvitationToken, setOnCallInvitationToken] = useState<string>();
-  const [grafanaUrl, setGrafanaUrl] = useState<string>(window.location.origin);
+  const [grafanaUrl, setGrafanaUrl] = useState<string>(grafanaUrlDefault);
   const [pluginConfigLoading, setPluginConfigLoading] = useState<boolean>(true);
   const [pluginStatusOk, setPluginStatusOk] = useState<boolean>();
   const [pluginStatusMessage, setPluginStatusMessage] = useState<string>();
   const [isSelfHostedInstall, setIsSelfHostedInstall] = useState<boolean>(true);
   const [retrySync, setRetrySync] = useState<boolean>(false);
-  const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
 
-  const configurePlugin = () => {
-    setShowConfirmationModal(true);
-  };
   const setupPlugin = useCallback(async () => {
     setItem('onCallApiUrl', onCallApiUrl);
-    setShowConfirmationModal(false);
+    setItem('grafanaUrl', grafanaUrl);
     await getBackendSrv().post(`/api/plugins/grafana-oncall-app/settings`, {
       enabled: true,
       pinned: true,
@@ -218,35 +216,50 @@ export const PluginConfigPage = (props: Props) => {
               <img alt="Grafana OnCall Logo" src={logo} width={18} />
             </p>
           )}
+          <p>{'Plugin <-> backend connection status'}</p>
+          <pre>
+            <Text type="link">{pluginStatusMessage}</Text>
+          </pre>
 
-          {isSelfHostedInstall ? (
-            <div>
-              <p>{'Plugin <-> backend connection status:'}</p>
+          <HorizontalGroup>
+            {/* <p>{'Plugin <-> backend connection status'}</p>
               <pre>
                 <Text type="link">{pluginStatusMessage}</Text>
-              </pre>
+              </pre> */}
+            {retrySync && (
+              <Button variant="primary" onClick={startSync} size="md">
+                Retry
+              </Button>
+            )}
+            {isSelfHostedInstall ? (
               <WithConfirm title="Are you sure to delete OnCall plugin configuration?">
-                <Button
-                  variant="destructive"
-                  onClick={resetPlugin}
-                  size="md"
-                  className={cx('delete_configuration_button')}
-                >
+                <Button variant="destructive" onClick={resetPlugin} size="md">
                   Remove current configuration
                 </Button>
               </WithConfirm>
-            </div>
-          ) : (
-            <Label>This is a cloud managed configuration.</Label>
-          )}
+            ) : (
+              <Label>This is a cloud managed configuration.</Label>
+            )}{' '}
+          </HorizontalGroup>
         </>
       ) : (
         <React.Fragment>
           <Legend>Configure Grafana OnCall</Legend>
           <p>This page will help you to connect OnCall backend and OnCall Grafana plugin 👋</p>
-          <p>
+
+          <p>1. Launch backend</p>
+          <VerticalGroup>
             <Text type="secondary">
-              - Talk to the OnCall team in the #grafana-oncall channel at{' '}
+              Run hobby, dev or production backend:{' '}
+              <a href="https://github.com/grafana/oncall#getting-started">
+                <Text type="link">getting started.</Text>
+              </a>
+            </Text>
+          </VerticalGroup>
+          <Block withBackground className={cx('info-block')}>
+            <Text type="secondary">
+              Need help?
+              <br />- Talk to the OnCall team in the #grafana-oncall channel at{' '}
               <a href="https://slack.grafana.com/">
                 <Text type="link">Slack</Text>
               </a>
@@ -259,17 +272,8 @@ export const PluginConfigPage = (props: Props) => {
                 <Text type="link">GitHub Issues</Text>
               </a>
             </Text>
-          </p>
-          <p>1. Launch backend</p>
-          <p>
-            <Text type="secondary">
-              Run hobby, dev or production backend:{' '}
-              <a href="https://github.com/grafana/oncall#getting-started">
-                <Text type="link">getting started.</Text>
-              </a>
-            </Text>
-          </p>
-          <p></p>
+          </Block>
+
           <p>2. Conect the backend and the plugin </p>
           <p>{'Plugin <-> backend connection status:'}</p>
           <pre>
@@ -292,42 +296,29 @@ Seek for such a line:  “Your invite token: <<LONG TOKEN>> , use it in the Graf
 
           <Field
             label="OnCall backend URL"
-            description="It should be reachable from Grafana. Possible options:
-http://host.docker.internal:8000 (if you run backend in the docker locally)
-http://localhost:8000
-..."
+            description={
+              <Text>
+                It should be rechable from Grafana. Possible options: <br />
+                http://host.docker.internal:8000 (if you run backend in the docker locally)
+                <br />
+                http://localhost:8000 <br />
+                ...
+              </Text>
+            }
           >
             <Input id="onCallApiUrl" onChange={handleApiUrlChange} defaultValue={onCallApiUrl} />
           </Field>
           <Field label="Grafana Url" description="URL of the current Grafana instance. ">
             <Input id="grafanaUrl" onChange={handleGrafanaUrlChange} defaultValue={grafanaUrl} />
           </Field>
-          {/* <WithConfirm title="Admin API key for OnCall will be created in Grafana. Continue?" confirmText="Continue"> */}
           <Button
             variant="primary"
-            onClick={configurePlugin}
+            onClick={setupPlugin}
             disabled={!onCallApiUrl || !onCallInvitationToken || !grafanaUrl}
             size="md"
           >
             Connect
           </Button>
-          {/* </WithConfirm> */}
-          {showConfirmationModal && (
-            <Modal
-              isOpen
-              title="Admin API key for OnCall will be created in Grafana. Continue?"
-              onDismiss={() => setShowConfirmationModal(false)}
-            >
-              <HorizontalGroup>
-                <Button variant="primary" onClick={setupPlugin}>
-                  Continue
-                </Button>
-                <Button variant="secondary" onClick={() => setShowConfirmationModal(false)}>
-                  Cancel
-                </Button>
-              </HorizontalGroup>
-            </Modal>
-          )}
         </React.Fragment>
       )}
     </div>