Mirantis
diff --git a/‎CHANGELOG.md
+1 b/‎CHANGELOG.md
+1
diff --git a/‎README.md
+29-2 b/‎README.md
+29-2
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
+26-4 b/‎src/cc/AddClusters.js
+26-4
diff --git a/‎src/cc/ClusterList.js
+31-17 b/‎src/cc/ClusterList.js
+31-17
diff --git a/‎src/cc/InlineNotice.js
+83 b/‎src/cc/InlineNotice.js
+83
@@ -8,6 +8,7 @@ Supports Lens `>= 4.2.2`.
 
 - 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
 
 
@@ -84,9 +84,36 @@ 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.2__ (or later) 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`
+
+#### 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)
+
+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.
 
 ### Management clusters not selected by default
 
 
@@ -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,10 +52,15 @@ export const AddClusters = function ({ onAdd, clusters, passwordRequired }) {
     }
   };
 
+  const handleSsoCancelClick = function () {
+    clusterActions.ssoCancelAddClusters();
+  };
+
   //
   // RENDER
   //
 
+  // DEBUG TODO: need to show similar SSO notice as for "Access" case, with Cancel button
   return (
     <Section className="lecc-AddClusters">
       <h3>{strings.addClusters.title()}</h3>
@@ -65,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}
           />
@@ -80,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()
@@ -93,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>
   );
 };
 
@@ -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,14 @@ 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 +98,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,83 @@
+//
+// 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,
+};