feat: show Red Hat SSO status icon with tooltip in status bar (#91)

Signed-off-by: Denis Golovin <[email protected]>
Co-authored-by: Florent BENOIT <[email protected]>

Author: dgolovin

package.json

@@ -15,8 +15,21 @@
       {
         "command": "redhat.authentication.signin",
         "title": "Red Hat SSO Provider: Sign In"
+      },
+      {
+        "command": "redhat.authentication.navigate.settings",
+        "title": "Red Hat SSO Provider: Navigate to Authentication Settings"
+      }
+    ],
+    "icons": {
+      "redhat-icon": {
+        "description": "Red Hat icon",
+        "default": {
+          "fontPath": "redhat-icon.woff2",
+          "fontCharacter": "\\e900"
+        }
       }
-    ]
+    }
   },
   "scripts": {
     "build": "rollup --bundleConfigAsCjs --config rollup.config.js --compact --environment BUILD:production  && node ./scripts/build.js",

redhat-icon.woff2

@@ -24,10 +24,11 @@ import {
 } from './authentication-service';
 import { ServiceAccountV1, ContainerRegistryAuthorizerClient } from '@redhat-developer/rhcra-client';
 import path from 'node:path';
-import { accessSync, constants, existsSync, readFileSync } from 'node:fs';
+import { accessSync, constants, readFileSync } from 'node:fs';
 import { restartPodmanMachine, runRpmInstallSubscriptionManager, runSubscriptionManager, runSubscriptionManagerActivationStatus, runSubscriptionManagerRegister, runSubscriptionManagerUnregister } from './podman-cli';
 import { SubscriptionManagerClient } from '@redhat-developer/rhsm-client';
 import { isLinux } from './util';
+import { SSOStatusBarItem } from './status-bar-item';
 
 let authenticationServicePromise: Promise<RedHatAuthenticationService>;
 let currentSession: extensionApi.AuthenticationSession | undefined;
@@ -201,16 +202,27 @@ async function removeSession(sessionId: string): Promise<void> {
   onDidChangeSessions.fire({ removed: [session!] });
 }
 
+async function buildAndInitializeAuthService(context: extensionApi.ExtensionContext, statusBarItem: SSOStatusBarItem) {
+  const service = await RedHatAuthenticationService.build(context, getAuthConfig())
+  context.subscriptions.push(service);
+  await service.initialize();
+  const storedSessions = await service.getSessions();
+  if (storedSessions.length > 0) {
+    statusBarItem.logInAs(storedSessions[0].account.label);
+  }
+  return service;
+}
+
 export async function activate(context: extensionApi.ExtensionContext): Promise<void> {
   console.log('starting redhat-authentication extension');
-  if (!authenticationServicePromise) {
-    authenticationServicePromise = RedHatAuthenticationService.build(context, getAuthConfig())
-      .then(service => {
-        context.subscriptions.push(service);
-        service.initialize();
-        return service;
-    });
-  }
+
+  // create status bar item for Red Hat SSO Provider
+  const statusBarItem = new SSOStatusBarItem();
+  statusBarItem.show();
+  context.subscriptions.push(statusBarItem);
+
+  // build and initialize auth service and update status bar state
+  authenticationServicePromise = buildAndInitializeAuthService(context, statusBarItem);
   context.subscriptions.push(extensionApi.registry.suggestRegistry({
     name: 'Red Hat Container Registry',
     icon: fileToBase64(path.resolve(__dirname,'..', 'icon.png')),
@@ -240,14 +252,18 @@ export async function activate(context: extensionApi.ExtensionContext): Promise<
     },
   );
 
-  const onDidChangeSessionDisposable = extensionApi.authentication.onDidChangeSessions(async (e) => {
-    if(e.provider.id === 'redhat.authentication-provider') {
+  const onDidChangeSessionDisposable = extensionApi.authentication.onDidChangeSessions(async e => {
+    if (e.provider.id === 'redhat.authentication-provider') {
       const newSession = await signIntoRedHatDeveloperAccount(false);
       if (!currentSession && newSession) {
         currentSession = newSession;
+        statusBarItem.logInAs(newSession.account.label);
         return extensionApi.commands.executeCommand('redhat.authentication.signin');
       }
       currentSession = newSession;
+      if (!newSession) {
+        statusBarItem.logOut();
+      }
     }
   });
 
@@ -257,6 +273,8 @@ export async function activate(context: extensionApi.ExtensionContext): Promise<
 
   const SignInCommand = extensionApi.commands.registerCommand('redhat.authentication.signin', async () => {
 
+    await signIntoRedHatDeveloperAccount(true); //for the use case when user logged out, vm activated and registry configured
+
     const registryAccess = extensionApi.window.withProgress({
         location: extensionApi.ProgressLocation.TASK_WIDGET, title: 'Configuring Red Hat Registry'
       }, 
@@ -315,7 +333,14 @@ export async function activate(context: extensionApi.ExtensionContext): Promise<
     );
   });
 
-  context.subscriptions.push(SignInCommand, SignOutCommand, SignUpCommand, onDidChangeSessionDisposable);
+  const GotoAuthCommand = extensionApi.commands.registerCommand(
+    'redhat.authentication.navigate.settings',
+    async () => {
+      extensionApi.navigation.navigateToAuthentication();
+    },
+  );
+
+  context.subscriptions.push(SignInCommand, SignOutCommand, SignUpCommand, onDidChangeSessionDisposable, GotoAuthCommand);
 }
 
 export function deactivate(): void {

src/extension.ts

@@ -0,0 +1,46 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { StatusBarAlignLeft, StatusBarItem, window, Disposable } from '@podman-desktop/api';
+
+export class SSOStatusBarItem implements Disposable {
+  #statusBarItem: StatusBarItem = window.createStatusBarItem(StatusBarAlignLeft, 50);
+
+  constructor() {
+    this.#statusBarItem.iconClass = '${redhat-icon}';
+    this.logOut();
+  }
+
+  public dispose(): void {
+    this.#statusBarItem.dispose();
+  }
+
+  public logInAs(email: string) {
+    this.#statusBarItem.tooltip = `Red Hat SSO: Logged in as ${email}`;
+    this.#statusBarItem.command = 'redhat.authentication.navigate.settings';
+  }
+
+  public logOut() {
+    this.#statusBarItem.tooltip = 'Red Hat SSO: Logged Out';
+    this.#statusBarItem.command = 'redhat.authentication.signin';
+  }
+
+  public show() {
+    this.#statusBarItem.show();
+  }
+}

src/status-bar-item.ts

@@ -1,19 +1,16 @@
 {
   "compilerOptions": {
-    "lib": [
-        "ES2017",
-        "webworker"
-    ],
+    "lib": [ "ES2017", "webworker" ],
+    "module": "esnext",
+    "target": "esnext",
     "sourceMap": true,
     "rootDir": "src",
     "outDir": "dist",
     "skipLibCheck": true,
-    "types": [
-        "node",
-    ],
-    "allowSyntheticDefaultImports": true
+    "types": [ "node" ],
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "esModuleInterop": true
 },
-"include": [
-    "src/**/*.ts"
-]
+"include": [ "src/**/*.ts" ]
 }