[#12] WIP: Add SSO support

Fixes #12

REMOVE HTTPS CERT WORKAROUND BEFORE MERGE TO MASTER! MCC instance
with SSO enabled for testing currently has invalid cert chain,
so this is needed as a temporary workaround during development.

Done:
- Renamed existing `AuthProvider` to `BasicAuthProvider`. This
  provider will fail with an error notification if it's used
  with an MCC instance that requires SSO auth.
- Added new `SsoAuthProvider` for handling all things SSO. This
  provider will fail with an error notification if it's used with
  an MCC instance that does not support Keycloak SSO auth.
- Moved a few effects out of View.js and into useClusterLoder.js hook
  to cut down on module size.
- Added 'SSO support' section to README with instructions on how
  to configure the MCC instance's Keycloak Client to work with the
  extension since it relies on `lens://` protocol handler requests.
- Added new "Use SSO" checkbox in Login component.
- Added new util.js method to make console logging more helpful
  and consistent, replaced all existing `console` calls with new
  `logger` calls.

Author: stefcameron

README.md

@@ -80,9 +80,14 @@ The `prepublishOnly` script will automatically produce a production build in the
 
 ## Help
 
-### SSO not supported
+### SSO support
 
-Mirantis Container Cloud instances that use third-party SSO authentication (e.g. Google OAuth) are __not supported__ at this time. We plan on adding support [soon](https://github.com/Mirantis/lens-extension-cc/issues/12).
+Mirantis Container Cloud instances that use third-party SSO authentication via __Keycloak__ are supported.
+
+Since the integration leverages the `lens://` URL protocol handling feature for extensions, __Lens 4.1__ is required, and the __Keycloak Client__ of the instance must be configured as follows:
+
+-   Allow requests from the `"*"` origin. This is because the internal Electron browser used by the Lens App uses a random port. Therefore, the originating URL cannot be predicted.
+-   Allow the following redirect URI: `lens://extensions/@mirantis/lens-extension-cc/oauth/code`
 
 ### Management clusters not selected by default
 

src/cc/Login.js

@@ -35,6 +35,7 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
   //
 
   const [cloudUrl, setCloudUrl] = useState(props.cloudUrl || '');
+  const [withSsoAuth, setWithSsoAuth] = useState(props.withSsoAuth || false);
   const [username, setUsername] = useState(props.username || '');
   const [password, setPassword] = useState(props.password || '');
   const [valid, setValid] = useState(false);
@@ -47,6 +48,10 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
     setCloudUrl(value);
   };
 
+  const handleSsoChange = function (value) {
+    setWithSsoAuth(value);
+  };
+
   const handleUsernameChange = function (value) {
     setUsername(value);
   };
@@ -56,7 +61,7 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
   };
 
   const handleClustersClick = function () {
-    onLogin({ cloudUrl, username, password });
+    onLogin({ cloudUrl, withSsoAuth, username, password });
   };
 
   //
@@ -65,9 +70,9 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
 
   useEffect(
     function () {
-      setValid(!!(cloudUrl && username && password));
+      setValid(!!(cloudUrl && (withSsoAuth || (username && password))));
     },
-    [username, password, cloudUrl]
+    [username, password, cloudUrl, withSsoAuth]
   );
 
   //
@@ -90,31 +95,42 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
         />
       </Field>
       <Field>
-        <label htmlFor="lecc-login-username">
-          {strings.login.username.label()}
-        </label>
-        <Component.Input
-          type="text"
-          theme="round-black" // borders on all sides, rounded corners
-          id="lecc-login-username"
-          disabled={loading}
-          value={username}
-          onChange={handleUsernameChange}
-        />
-      </Field>
-      <Field>
-        <label htmlFor="lecc-login-password">
-          {strings.login.password.label()}
-        </label>
-        <Component.Input
-          type="password"
-          theme="round-black" // borders on all sides, rounded corners
-          id="lecc-login-password"
-          disabled={loading}
-          value={password}
-          onChange={handlePasswordChange}
+        <Component.Checkbox
+          label={strings.login.sso.label()}
+          value={withSsoAuth}
+          onChange={handleSsoChange}
         />
       </Field>
+      {!withSsoAuth && (
+        <>
+          <Field>
+            <label htmlFor="lecc-login-username">
+              {strings.login.username.label()}
+            </label>
+            <Component.Input
+              type="text"
+              theme="round-black" // borders on all sides, rounded corners
+              id="lecc-login-username"
+              disabled={loading}
+              value={username}
+              onChange={handleUsernameChange}
+            />
+          </Field>
+          <Field>
+            <label htmlFor="lecc-login-password">
+              {strings.login.password.label()}
+            </label>
+            <Component.Input
+              type="password"
+              theme="round-black" // borders on all sides, rounded corners
+              id="lecc-login-password"
+              disabled={loading}
+              value={password}
+              onChange={handlePasswordChange}
+            />
+          </Field>
+        </>
+      )}
       <div>
         <Component.Button
           primary
@@ -124,6 +140,7 @@ export const Login = function ({ loading, disabled, onLogin, ...props }) {
           onClick={handleClustersClick}
         />
       </div>
+      {withSsoAuth && loading && <p>{strings.login.sso.browser()}</p>}
     </Section>
   );
 };
@@ -133,6 +150,7 @@ Login.propTypes = {
   loading: propTypes.bool, // if data fetch related to login is taking place
   disabled: propTypes.bool, // if login should be disabled entirely
   cloudUrl: propTypes.string,
+  withSsoAuth: propTypes.bool,
   username: propTypes.string,
   password: propTypes.string,
 };