[#12] WIP: Add SSO support

- Fixes #12: SSO
- Fixes #216: SSO instructions
- Fixes #215: Make sure bad password can be fixed during "add
  clusters" event

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.

SEE '// DEBUG' COMMENTS for what still needs refactoring, which
at this point should ONLY BE 'add clusters' under SSO. Everything
else _should_ be working now.

*** SHOULD BASIC AUTH SUPPORT BE REMOVED? ***

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 util.js method to make console logging more helpful
  and consistent, replaced all existing `console` calls with new
  `logger` calls.
- `AuthClient` now supports both Basic auth and SSO auth.
- Auto-refreshing tokens under SSO works.
- Possible to activate a cluster without having to re-query for
  the list of clusters that was already loaded (if any).
- Renamed ClustersProvider to ClusterDataProvider to make it
  more different from ClusterActionsProvider when we use
  it throughout the code (we had `clustersActions` and
  `clusterActions` objects; now we have `clusterDataActions`
  and `clusterActions` with less chance of a mistake).
- Fixed a bug in eventBus.ts where an exception thrown in an
  event handler would cause the event bus to infinitely call
  that handler in a loop.
- Added 'Refresh' feature where once clusters are loaded, the
  'Sign in' button changes to 'Refresh' and clicking it uses
  existing creds to reload/refresh the cluster list without
  going through full auth again (if creds are still valid).
- Added ability to filter clusters to a list of specified
  namespaces via the 'add clusters' extension event.
- Added instructions to Help section in README.
- Cluster selection is limited to ONE cluster when using SSO
  because supporting multiple clusters would lead to a really
  bad UX (browser opening multiple times, user likely missing
  some of them) and spaghetti code (because it's more than just
  async requests since the event loop goes idle while waiting
  for the user to respond in the browser).
- Added new "Refresh Data" experience where it's now possible
  to refresh (i.e. reload) clusters from the instance without
  re-authenticating (basic and SSO).
- 'Add Clusters' via SSO now shows an info message to inform
  the user to expect their browser to open, and to click on
  "Open Lens" after authorization, and like the Login view,
  provides a Cancel button to abort the process in case something
  goes wrong in the browser.

Author: stefcameron

src/cc/AddClusters.js

@@ -11,6 +11,7 @@ import { useClusterActions } from './store/ClusterActionsProvider';
 import { useExtState } from './store/ExtStateProvider';
 import { Section as BaseSection } from './Section';
 import { layout } from './styles';
+import { InlineNotice } from './InlineNotice';
 import * as strings from '../strings';
 
 const Section = styled(BaseSection)(function () {
@@ -31,7 +32,8 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
   } = useExtState();
 
   const {
-    state: { loading: addingClusters },
+    state: { loading: addClustersLoading },
+    actions: clusterActions
   } = useClusterActions();
 
   const [password, setPassword] = useState('');
@@ -50,6 +52,10 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
     }
   };
 
+  const handleSsoCancelClick = function () {
+    clusterActions.ssoCancelAddClusters();
+  };
+
   //
   // RENDER
   //
@@ -66,7 +72,7 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
             style={{ width: 200 }}
             type="password"
             theme="round-black" // borders on all sides, rounded corners
-            disabled={addingClusters}
+            disabled={addClustersLoading}
             value={password}
             onChange={handlePasswordChange}
           />
@@ -81,11 +87,11 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
           primary
           disabled={
             clusters.length <= 0 ||
-            addingClusters ||
+            addClustersLoading ||
             (passwordRequired && !password)
           }
           label={strings.addClusters.action.label()}
-          waiting={addingClusters}
+          waiting={addClustersLoading}
           tooltip={
             clusters.length <= 0
               ? strings.addClusters.action.disabledTip()
@@ -94,6 +100,21 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
           onClick={handleAddClick}
         />
       </div>
+
+      {addClustersLoading &&
+        <>
+          <InlineNotice>
+            <p dangerouslySetInnerHTML={{ __html: strings.addClusters.sso.messageHtml() }}/>
+          </InlineNotice>
+          <div>
+            <Component.Button
+              primary
+              label={strings.addClusters.action.ssoCancel()}
+              onClick={handleSsoCancelClick}
+            />
+          </div>
+        </>
+      }
     </Section>
   );
 };

src/cc/store/ClusterActionsProvider.js

@@ -625,6 +625,9 @@ const _addClusters = async function ({
     const authClient = new AuthClient({ config });
     const url = authClient.getSsoAuthUrl({
       offline,
+      // DEBUG TODO: specifying the cluster's client ID results in `invalid redirect_uri` error
+      //  on the ICC instance, so does the 'k8s' client somehow need to also whitelist it
+      //  like the 'kaas' does (since that client ID clearly works for accessing the API)?
       clientId: newClusters[0].idpClientId, // tokens unique to the cluster
       state: SSO_STATE_ADD_CLUSTERS
     });

src/cc/store/SsoAuthProvider.js

@@ -183,7 +183,7 @@ export const useSsoAuth = function () {
        * @param {boolean} [options.notify] If true, error notification will be displayed;
        *  otherwise, error is silent.
        */
-      cancel({ reason = strings.ssoAuthProvider.error.userCanceled(), notify = false }) {
+      cancel({ reason = strings.ssoAuthProvider.error.userCanceled(), notify = false } = {}) {
         if (pr.loading) {
           pr.loading = false;
           pr.loaded = true;

src/strings.ts

@@ -173,9 +173,14 @@ export const addClusters: Dict = {
     tip: (username) =>
       `Password for user "${username}" is required to generate kubeConfigs`,
   },
+  sso: {
+    messageHtml: () =>
+      `<strong>This instance uses SSO:</strong> Your default browser should open to the ${mccShortName} sign in page, if you aren't already signed in. Once you have signed-in, your browser will prompt you to open Lens. Be sure to accept in order to complete the process. Once you have opted to open Lens, the browser window can be closed.`,
+  },
   action: {
     label: () => 'Add selected clusters',
     disabledTip: () => 'Select at least one cluster to add',
+    ssoCancel: () => 'Cancel',
   },
 };