Mirantis
diff --git a/‎CHANGELOG.md
+10-1 b/‎CHANGELOG.md
+10-1
diff --git a/‎README.md
+43-5 b/‎README.md
+43-5
diff --git a/‎docs/lens-protocol-permission.png
52.7 KB b/‎docs/lens-protocol-permission.png
52.7 KB
diff --git a/‎docs/sso-single-cluster-warning.png
59.8 KB b/‎docs/sso-single-cluster-warning.png
59.8 KB
diff --git a/‎src/cc/AddClusters.js
+29-4 b/‎src/cc/AddClusters.js
+29-4
diff --git a/‎src/cc/ClusterList.js
+35-17 b/‎src/cc/ClusterList.js
+35-17
diff --git a/‎src/cc/InlineNotice.js
+89 b/‎src/cc/InlineNotice.js
+89
@@ -2,12 +2,21 @@
 
 ## UNRELEASED
 
-Supports Lens `>= 4.2.2`.
+Supports Lens `>= 4.2.3`.
+
+### Added
+
+- SSO support ([#12](https://github.com/Mirantis/lens-extension-cc/issues/12)):
+    - This adds many UI changes, and makes it possible to connect to Mirantis Container Cloud instances that use Keycloak OAuth (SSO) for access control. Previously, only instances that used basic authentication were supported.
+    - Notice the new Access button under the "Instance URL" field. Click this button after entering the URL to have the extension detect whether it supports SSO or basic auth. If it's basic auth, you'll get username and password fields as before. If it's [SSO](README.md#sso-support), your default system browser will open so that you can authorize the extension with your SSO account. Use the new Cancel button (in the extension) if something goes wrong during this process.
+    - When accessing an SSO-enabled instance, only one cluster may be added at a time. This is a [known limitation](README.md#single-cluster-limitation).
+    - When adding a cluster, your default system browser will open again (because the cluster uses a different Keycloak client than the one used to list the clusters), and you will have another Cancel button (in the extension) in case something goes wrong during this process.
 
 ### Changed
 
 - Fixed: Emotion styles generated by this extension were conflicting with Emotion styles generated by Lens ([#205](https://github.com/Mirantis/lens-extension-cc/pull/205))
 - Fixed: Offline token option should default to false ([#217](https://github.com/Mirantis/lens-extension-cc/issues/217))
+- Fixed: There's no way to re-enter the password during an "Add clusters to Lens" event ([#215](https://github.com/Mirantis/lens-extension-cc/issues/215))
 
 ## v2.1.2
 
 
@@ -82,12 +82,50 @@ $ git push && git push --tags
 
 The `prepublishOnly` script will automatically produce a production build in the `./dist` directory, which will be published.
 
-## Help
+## SSO support
 
-### SSO not supported
+Mirantis Container Cloud instances that use third-party SSO authentication via __Keycloak__ are supported.
 
-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).
+### Keycloak Configuration
 
-### Management clusters not selected by default
+Since the integration leverages the `lens://` URL protocol handling feature for extensions, __Lens 4.2__ (or later) is required, and the __Keycloak Client__ of the instance must be configured as follows:
 
-The extension purposely doesn't not add management clusters to the default/initial set of selected clusters after retrieving clusters from a Mirantis Container Cloud instance because they are typically of less interest than workload clusters.
+-   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`
+
+> 💡 Be sure to make these configuration adjustments __on every Keycloak Client__ (`kaas` for the management cluster, and `k8s` for child clusters by default) that manages clusters you will want to add. The extension does not know ahead of time whether you have given it the appropriate access, and adding clusters without this configuration will result in an error.
+
+### Authentication flow
+
+The extension will automatically detect when an instance uses SSO (upon clicking the __Access__ button).
+
+If that's the case, Lens will open the instance's SSO authorization page in the system's default browser.
+
+Once authorized, Keycloak will redirect to the `lens://...` URL, triggering the browser to ask permission to open the Lens app to process the request (unless permission was granted previously with the _always allow_ check box for your SSO ID Provider, e.g. `accounts.google.com`):
+
+![Lens protocol permission - always allow](docs/lens-protocol-permission.png)
+
+> ⚠️ Even if you check the "Always allow" box, your browser may still continue to show a popup message waiting for you to click on an "Open Lens.app" button. This is a built-in security feature. Please be on the look out for this popup in your browser whenever accessing your Container Cloud instance, or adding clusters to Lens.
+
+Whether the permission was already given, or upon clicking __Open Lens.app__, Lens will receive focus again, and the extension will then read the list of namespaces and clusters as it normally would when using basic (username/password) authentication.
+
+The temporary browser window used for SSO authorization will likely still be open, and should now be closed manually.
+
+### Single cluster limitation
+
+Due to technical issues with generating a unique kubeConfig per cluster, when the Container Cloud instance uses SSO authorization, cluster selection is __limited to a single cluster__:
+
+![Single cluster SSO limitation](docs/sso-single-cluster-warning.png)
+
+We hope to overcome this limitation in the future.
+
+## FAQ
+
+- Why are management clusters not selected by default?
+    - The extension purposely doesn't not add management clusters to the default/initial set of selected clusters after retrieving clusters from a Mirantis Container Cloud instance because they are typically of less interest than workload clusters.
+- I get an error, "Invalid redirect_uri", when I attempt to access or add my clusters.
+    - Make sure you have properly [configured](#keycloak-configuration) all your Keycloak clients for use with the extension.
+- Why can I only selected one cluster to add at a time?
+    - See [Single cluster limitation](#single-cluster-limitation) when using SSO.
+- I was able to add my cluster to Lens, but Lens fails to show it because of an authentication error.
+    - Check if the cluster is only accessible over a private network (i.e. VPN) connection, and try opening it in Lens once connected to the network. Even though you can see the cluster in Container Cloud, as well as in the extension, accessing the cluster's details may still require a VPN connection in this case.
@@ -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
   //
@@ -65,7 +71,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}
           />
@@ -80,11 +86,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()
@@ -93,6 +99,25 @@ 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>
   );
 };
 
@@ -1,9 +1,10 @@
 import propTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Component } from '@k8slens/extensions';
-import { useClusterActions } from './store/ClusterActionsProvider';
+import { useClusterLoadingState } from './hooks/useClusterLoadingState';
 import { Cluster } from './store/Cluster';
 import { Section } from './Section';
+import { InlineNotice, types as noticeTypes, iconSizes } from './InlineNotice';
 import { layout, mixinFlexColumnGaps } from './styles';
 import * as strings from '../strings';
 
@@ -26,17 +27,17 @@ const CheckList = styled.div(function () {
 
 export const ClusterList = function ({
   clusters,
+  onlyNamespaces,
   selectedClusters,
+  singleSelectOnly,
   onSelection,
   onSelectAll,
 }) {
   //
   // STATE
   //
 
-  const {
-    state: { loading: addingClusters },
-  } = useClusterActions();
+  const loading = useClusterLoadingState();
 
   // only ready clusters can actually be selected
   const selectableClusters = clusters.filter((cl) => cl.ready);
@@ -80,6 +81,18 @@ export const ClusterList = function ({
   return (
     <Section className="lecc-ClusterList">
       <h3>{strings.clusterList.title()}</h3>
+      {onlyNamespaces && (
+        <p>{strings.clusterList.onlyNamespaces(onlyNamespaces)}</p>
+      )}
+      {singleSelectOnly && (
+        <InlineNotice type={noticeTypes.WARNING} iconSize={iconSizes.SMALL}>
+          <small
+            dangerouslySetInnerHTML={{
+              __html: strings.clusterList.ssoLimitationHtml(),
+            }}
+          />
+        </InlineNotice>
+      )}
       <CheckList>
         {clusters.sort(compareClusters).map((
           cluster // list ALL clusters
@@ -89,36 +102,41 @@ export const ClusterList = function ({
             label={`${cluster.namespace} / ${cluster.name}${
               cluster.ready ? '' : ` ${strings.clusterList.notReady()}`
             }`}
-            disabled={!cluster.ready || addingClusters}
+            disabled={!cluster.ready || loading}
             value={isClusterSelected(cluster)}
             onChange={(checked) => handleClusterSelect(checked, cluster)}
           />
         ))}
       </CheckList>
-      <div>
-        <Component.Button
-          primary
-          disabled={selectableClusters.length <= 0 || addingClusters}
-          label={
-            selectedClusters.length < selectableClusters.length
-              ? strings.clusterList.action.selectAll.label()
-              : strings.clusterList.action.selectNone.label()
-          }
-          onClick={handleSelectAllNone}
-        />
-      </div>
+      {!singleSelectOnly && (
+        <div>
+          <Component.Button
+            primary
+            disabled={loading || selectableClusters.length <= 0}
+            label={
+              selectedClusters.length < selectableClusters.length
+                ? strings.clusterList.action.selectAll.label()
+                : strings.clusterList.action.selectNone.label()
+            }
+            onClick={handleSelectAllNone}
+          />
+        </div>
+      )}
     </Section>
   );
 };
 
 ClusterList.propTypes = {
   clusters: propTypes.arrayOf(propTypes.instanceOf(Cluster)), // ALL clusters, even non-ready ones
+  onlyNamespaces: propTypes.arrayOf(propTypes.string), // optional list of namespace IDs to which the list is restricted
   selectedClusters: propTypes.arrayOf(propTypes.instanceOf(Cluster)),
+  singleSelectOnly: propTypes.bool, // true if only one cluster may be selected; false if any number can be selected
   onSelection: propTypes.func, // ({ cluster: Cluster, selected: boolean }) => void
   onSelectAll: propTypes.func, // ({ selected: boolean }) => void
 };
 
 ClusterList.defaultProps = {
+  singleSelectOnly: false,
   clusters: [],
   selectedClusters: [],
 };
@@ -0,0 +1,89 @@
+//
+// Inline notice message (i.e. only the icon has color, no background)
+//
+
+import propTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Component } from '@k8slens/extensions';
+import { layout } from './styles';
+
+// notice types enumeration, maps to Material icon
+export const types = Object.freeze({
+  NOTE: 'announcement', // or 'description' could work too
+  INFO: 'info',
+  WARNING: 'warning',
+  ERROR: 'error',
+  SUCCESS: 'check_circle',
+});
+
+// icon size enumeration
+export const iconSizes = Object.freeze({
+  NORMAL: 'NORMAL', // matched to normal <p> text
+  SMALL: 'SMALL', // good for use with <small>
+});
+
+const Notice = styled.div(function ({ iconSize }) {
+  return {
+    marginTop: iconSize === iconSizes.SMALL ? 0 : 2, // to center with icon
+    marginLeft: layout.grid,
+  };
+});
+
+const Container = styled.div(function () {
+  return {
+    display: 'flex',
+  };
+});
+
+export const InlineNotice = function ({ type, iconSize, children, ...props }) {
+  let color;
+  switch (type) {
+    case types.NOTE:
+      color = 'var(--textColorPrimary)';
+      break;
+    case types.INFO:
+      color = 'var(--colorInfo)';
+      break;
+    case types.WARNING:
+      color = 'var(--colorWarning)';
+      break;
+    case types.ERROR:
+      color = 'var(--colorError)';
+      break;
+    case types.SUCCESS:
+      color = 'var(--colorSuccess)';
+      break;
+    default:
+      color = 'var(--colorVague)';
+      break;
+  }
+
+  return (
+    <Container type={type} {...props}>
+      <Component.Icon
+        material={type}
+        smallest={iconSize === iconSizes.SMALL}
+        focusable={false}
+        interactive={false}
+        style={{ color }}
+      />
+      <Notice iconSize={iconSize}>{children}</Notice>
+    </Container>
+  );
+};
+
+InlineNotice.propTypes = {
+  iconSize: propTypes.oneOf(Object.values(iconSizes)),
+  type: propTypes.oneOf(Object.values(types)),
+
+  // zero or more child nodes
+  children: propTypes.oneOfType([
+    propTypes.arrayOf(propTypes.node),
+    propTypes.node,
+  ]),
+};
+
+InlineNotice.defaultProps = {
+  iconSize: iconSizes.NORMAL,
+  type: types.INFO,
+};