From f11fd84c8b3de843d07050135689cc80814dbe6a Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Tue, 7 Jun 2022 12:10:59 +0200
Subject: [PATCH 1/3] Retry button returned, infobox has been changed

---
 .../PluginConfigPage.module.css               |  8 +--
 .../PluginConfigPage/PluginConfigPage.tsx     | 61 +++++++++++++------
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
index 8996189b..2cca3ca5 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
+++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
@@ -1,7 +1,7 @@
-.delete_configuration_button {
-  margin-top: 20px;
-}
-
 .command-line {
   width: 100%;
 }
+
+.info-block {
+  margin-bottom: 24px;
+}
diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
index b83170a4..c105fb05 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
+++ b/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';
@@ -218,27 +219,31 @@ 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>
@@ -285,6 +290,21 @@ export const PluginConfigPage = (props: Props) => {
               </Text>
             </pre>
           </VerticalGroup>
+          <Block withBackground className={cx('info-block')}>
+            <Text type="secondary">
+              Need help?
+              <br />
+              1. Talk to the developers in the #grafana-oncall channel at{' '}
+              <a href="http://oncall-stub.com">
+                <Text type="link">Slack</Text>
+              </a>
+              <br />
+              2. Search for issues or create a new one in the{' '}
+              <a href="http://oncall-stub.com">
+                <Text type="link">GitHub</Text>
+              </a>
+            </Text>
+          </Block>
 
           <p>2. Conect the backend and the plugin </p>
           <p>{'Plugin <-> backend connection status:'}</p>
@@ -308,10 +328,15 @@ 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>

From 36e71acf438c744a382a3452b11c21a85fbafc52 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 9 Jun 2022 11:56:27 +0200
Subject: [PATCH 2/3] Removed dublicating information

---
 .../PluginConfigPage/PluginConfigPage.tsx       | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
index c105fb05..4295c72e 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
+++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
@@ -249,22 +249,7 @@ export const PluginConfigPage = (props: Props) => {
         <React.Fragment>
           <Legend>Configure Grafana OnCall</Legend>
           <p>This page will help you to connect OnCall backend and OnCall Grafana plugin 👋</p>
-          <p>
-            <Text type="secondary">
-              - Talk to the OnCall team in the #grafana-oncall channel at{' '}
-              <a href="https://slack.grafana.com/">
-                <Text type="link">Slack</Text>
-              </a>
-              <br />- Ask questions at{' '}
-              <a href="https://github.com/grafana/oncall/discussions/categories/q-a">
-                <Text type="link">GitHub Discussions</Text>
-              </a>{' '}
-              or file bugs at{' '}
-              <a href="https://github.com/grafana/oncall/issues">
-                <Text type="link">GitHub Issues</Text>
-              </a>
-            </Text>
-          </p>
+
           <p>1. Launch backend</p>
           <VerticalGroup>
             <Text type="secondary">

From 1070fc0bd351eb9d9bf5983c9cb979d3560f25a0 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Fri, 10 Jun 2022 20:05:36 +0200
Subject: [PATCH 3/3] Grafana URL saved at localstorage, confirmation window
 deleted

---
 .../PluginConfigPage.module.css               |  1 +
 .../PluginConfigPage/PluginConfigPage.tsx     | 44 ++-----------------
 2 files changed, 5 insertions(+), 40 deletions(-)

diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
index 2cca3ca5..d0eafdf8 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
+++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css
@@ -4,4 +4,5 @@
 
 .info-block {
   margin-bottom: 24px;
+  margin-top: 24px;
 }
diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
index f77c7dc1..a76af84c 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
+++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
@@ -35,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,
@@ -258,21 +255,6 @@ export const PluginConfigPage = (props: Props) => {
                 <Text type="link">getting started.</Text>
               </a>
             </Text>
-
-            <Text type="secondary">Or run the local one:</Text>
-            <pre className={cx('command-line')}>
-              <Text type="link">
-                <CopyToClipboard
-                  text="docker build -t grafana/amixr-all-in-one -f Dockerfile.all-in-one ."
-                  onCopy={() => {
-                    openNotification('Grafana OnCall command copied');
-                  }}
-                >
-                  <Icon name="copy" />
-                </CopyToClipboard>{' '}
-                docker build -t grafana/amixr-all-in-one -f Dockerfile.all-in-one .
-              </Text>
-            </pre>
           </VerticalGroup>
           <Block withBackground className={cx('info-block')}>
             <Text type="secondary">
@@ -329,32 +311,14 @@ Seek for such a line:  “Your invite token: <<LONG TOKEN>> , use it in the Graf
           <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>