From 4f48140ee0bfc6bc3cab9bd4541d4b9cbd76a609 Mon Sep 17 00:00:00 2001
From: Artem Ruts <1319181+artemruts@users.noreply.github.com>
Date: Tue, 19 Oct 2021 05:17:34 -0400
Subject: [PATCH] Codehost error/warning banner adjustments (#26254)

* Add gitlab scopes to the popup

* Update the warning banner
---
 .../user/settings/codeHosts/CodeHostItem.tsx  |  2 +-
 .../codeHosts/UserAddCodeHostsPage.tsx        | 20 ++++++++++++++++---
 .../user/settings/codeHosts/modalHints.tsx    | 10 +++-------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/web/src/user/settings/codeHosts/CodeHostItem.tsx b/client/web/src/user/settings/codeHosts/CodeHostItem.tsx
index 697b4ed1a4d..b4ab6dc2389 100644
--- a/client/web/src/user/settings/codeHosts/CodeHostItem.tsx
+++ b/client/web/src/user/settings/codeHosts/CodeHostItem.tsx
@@ -112,7 +112,7 @@ export const CodeHostItem: React.FunctionComponent<CodeHostItemProps> = ({
             )}
             <div className="align-self-center">
                 {service?.warning || service?.lastSyncError ? (
-                    <AlertCircleIcon className="icon-inline mb-0 mr-2 text-danger" />
+                    <AlertCircleIcon className="icon-inline mb-0 mr-2 text-warning" />
                 ) : service?.id ? (
                     <CheckCircleIcon className="icon-inline mb-0 mr-2 text-success" />
                 ) : (
diff --git a/client/web/src/user/settings/codeHosts/UserAddCodeHostsPage.tsx b/client/web/src/user/settings/codeHosts/UserAddCodeHostsPage.tsx
index 48dd24f0341..104516872e2 100644
--- a/client/web/src/user/settings/codeHosts/UserAddCodeHostsPage.tsx
+++ b/client/web/src/user/settings/codeHosts/UserAddCodeHostsPage.tsx
@@ -239,9 +239,23 @@ export const UserAddCodeHostsPage: React.FunctionComponent<UserAddCodeHostsPageP
     const handleError = useCallback((error: ErrorLike): void => setStatusOrError(error), [])
 
     const getServiceWarningFragment = (service: serviceProblem): JSX.Element => (
-        <div className="alert alert-danger my-3" key={service.id}>
-            <h4 className="align-middle mb-1">Could not connect with {service.displayName}</h4>
-            <p className="align-middle mb-0">{service.problem}. Try connecting again.</p>
+        <div className="alert alert-warning my-3" key={service.id}>
+            <h4 className="align-middle mb-1">Can't connect with {service.displayName}</h4>
+            <p className="align-middle mb-0">
+                <span className="align-middle">Please try</span>{' '}
+                {owner.type === 'org' ? (
+                    <button
+                        type="button"
+                        className="btn btn-link font-weight-normal shadow-none p-0 border-0"
+                        onClick={toggleUpdateModal}
+                    >
+                        updating the code host connection
+                    </button>
+                ) : (
+                    <span className="align-middle">reconnecting the code host connection</span>
+                )}{' '}
+                <span className="align-middle">with {service.displayName} to restore access.</span>
+            </p>
         </div>
     )
 
diff --git a/client/web/src/user/settings/codeHosts/modalHints.tsx b/client/web/src/user/settings/codeHosts/modalHints.tsx
index 1ce011763ba..da62dc40528 100644
--- a/client/web/src/user/settings/codeHosts/modalHints.tsx
+++ b/client/web/src/user/settings/codeHosts/modalHints.tsx
@@ -8,7 +8,7 @@ export const hints: Partial<Record<ExternalServiceKind, React.ReactFragment>> =
     [ExternalServiceKind.GITHUB]: (
         <small>
             <Link
-                to="https://github.com/settings/tokens/new?description=Sourcergaph&scopes=user:email,repo,read:org"
+                to="https://github.com/settings/tokens/new?description=Sourcegraph.com&scopes=user:email,repo,read:org"
                 target="_blank"
                 rel="noopener noreferrer"
             >
@@ -29,13 +29,9 @@ export const hints: Partial<Record<ExternalServiceKind, React.ReactFragment>> =
             </Link>
             <span className="text-muted">
                 {' '}
-                {/* eslint-disable-next-line react/forbid-dom-props */}
-                with <span style={{ color: 'red' }}>which???</span>{' '}
-                {/* <code className="user-code-hosts-page__code--inline">read_user</code>,{' '}
+                with <code className="user-code-hosts-page__code--inline">read_user</code>,{' '}
                 <code className="user-code-hosts-page__code--inline">read_api</code> and{' '}
-                <code className="user-code-hosts-page__code--inline">read_repository</code>
-                 */}
-                scopes.
+                <code className="user-code-hosts-page__code--inline">read_repository</code> scopes.
             </span>
         </small>
     ),