feat(status-bar): improve status bar display and actions

- The status bar will always show the LS instance status (running, stopping, etc) if the LS CLI is installed — it doesn’t need to have the full setup complete
- The status bar commands will always allow starting and stopping LS if the LS CLI is installed — it doesn’t need to have the full setup complete
- The status bar will be red if any part of the setup is incomplete

Author: skyrpex

src/plugins/status-bar.ts

@@ -15,31 +15,31 @@ export default createPlugin(
 	}) => {
 		context.subscriptions.push(
 			commands.registerCommand("localstack.showCommands", async () => {
-				const shouldShowLocalStackStart = async () =>
-					(await checkLocalstackInstalled(outputChannel)) &&
+				const shouldShowLocalStackStart = () =>
+					setupStatusTracker.statuses().isInstalled &&
 					localStackStatusTracker.status() === "stopped";
-				const shouldShowLocalStackStop = async () =>
-					(await checkLocalstackInstalled(outputChannel)) &&
+				const shouldShowLocalStackStop = () =>
+					setupStatusTracker.statuses().isInstalled &&
 					localStackStatusTracker.status() === "running";
 				const shouldShowRunSetupWizard = () =>
 					setupStatusTracker.status() === "setup_required";
 
-				const getCommands = async () => {
+				const getCommands = () => {
 					const commands: (QuickPickItem & { command: string })[] = [];
 					commands.push({
 						label: "Manage",
 						command: "",
 						kind: QuickPickItemKind.Separator,
 					});
 
-					if (await shouldShowLocalStackStart()) {
+					if (shouldShowLocalStackStart()) {
 						commands.push({
 							label: "Start LocalStack",
 							command: "localstack.start",
 						});
 					}
 
-					if (await shouldShowLocalStackStop()) {
+					if (shouldShowLocalStackStop()) {
 						commands.push({
 							label: "Stop LocalStack",
 							command: "localstack.stop",
@@ -59,7 +59,7 @@ export default createPlugin(
 
 					if (shouldShowRunSetupWizard()) {
 						commands.push({
-							label: "Run LocalStack setup Wizard",
+							label: "Run LocalStack Setup Wizard",
 							command: "localstack.setup",
 						});
 					}
@@ -81,30 +81,30 @@ export default createPlugin(
 			commands.registerCommand("localstack.refreshStatusBar", () => {
 				// TODO
 				const setupStatus = setupStatusTracker.status();
-
-				if (setupStatus === "setup_required") {
-					statusBarItem.command = "localstack.showCommands";
-					statusBarItem.text = "$(error) LocalStack";
-					statusBarItem.backgroundColor = new ThemeColor(
-						"statusBarItem.errorBackground",
-					);
-				} else {
-					statusBarItem.command = "localstack.showCommands";
-					statusBarItem.backgroundColor = undefined;
-					const localStackStatus = localStackStatusTracker.status();
-					if (
-						localStackStatus === "starting" ||
-						localStackStatus === "stopping"
-					) {
-						statusBarItem.text = `$(sync~spin) LocalStack (${localStackStatus})`;
-					} else if (
-						localStackStatus === "running" ||
-						localStackStatus === "stopped"
-					) {
-						statusBarItem.text = `$(localstack-logo) LocalStack (${localStackStatus})`;
-					}
-				}
-
+				const localStackStatus = localStackStatusTracker.status();
+				const localStackInstalled = setupStatusTracker.statuses().isInstalled;
+
+				statusBarItem.command = "localstack.showCommands";
+				statusBarItem.backgroundColor =
+					setupStatus === "setup_required"
+						? new ThemeColor("statusBarItem.errorBackground")
+						: undefined;
+
+				const shouldSpin =
+					localStackStatus === "starting" || localStackStatus === "stopping";
+				const icon =
+					setupStatus === "setup_required"
+						? "$(error)"
+						: shouldSpin
+							? "$(sync~spin)"
+							: "$(localstack-logo)";
+
+				const statusText = localStackInstalled
+					? `${localStackStatus}`
+					: "not installed";
+				statusBarItem.text = `${icon} LocalStack: ${statusText}`;
+
+				statusBarItem.tooltip = "Show LocalStack commands";
 				statusBarItem.show();
 			}),
 		);
@@ -118,6 +118,7 @@ export default createPlugin(
 				});
 			}
 		};
+
 		context.subscriptions.push({
 			dispose() {
 				clearImmediate(refreshStatusBarImmediateId);
@@ -127,10 +128,12 @@ export default createPlugin(
 		refreshStatusBarImmediate();
 
 		localStackStatusTracker.onChange(() => {
+			outputChannel.trace("[status-bar]: localStackStatusTracker changed");
 			refreshStatusBarImmediate();
 		});
 
 		setupStatusTracker.onChange(() => {
+			outputChannel.trace("[status-bar]: setupStatusTracker changed");
 			refreshStatusBarImmediate();
 		});
 	},

src/utils/promises.ts

@@ -32,3 +32,8 @@ export function minDelay<T>(
 		MIN_TIME_BETWEEN_STEPS_MS,
 	);
 }
+
+/**
+ * Extracts the resolved type from a Promise.
+ */
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

src/utils/setup-status.ts

@@ -2,13 +2,15 @@ import ms from "ms";
 import type { Disposable, LogOutputChannel } from "vscode";
 
 import { createEmitter } from "./emitter.ts";
-import { checkIsSetupRequired } from "./setup.ts";
+import type { UnwrapPromise } from "./promises.ts";
+import { checkSetupStatus } from "./setup.ts";
 import type { TimeTracker } from "./time-tracker.ts";
 
 export type SetupStatus = "ok" | "setup_required";
 
 export interface SetupStatusTracker extends Disposable {
 	status(): SetupStatus;
+	statuses(): UnwrapPromise<ReturnType<typeof checkSetupStatus>>;
 	onChange(callback: (status: SetupStatus) => void): void;
 }
 
@@ -20,6 +22,7 @@ export async function createSetupStatusTracker(
 	timeTracker: TimeTracker,
 ): Promise<SetupStatusTracker> {
 	const start = Date.now();
+	let statuses: UnwrapPromise<ReturnType<typeof checkSetupStatus>> | undefined;
 	let status: SetupStatus | undefined;
 	const emitter = createEmitter<SetupStatus>(outputChannel);
 	const end = Date.now();
@@ -29,13 +32,18 @@ export async function createSetupStatusTracker(
 
 	let timeout: NodeJS.Timeout | undefined;
 	const startChecking = async () => {
-		const setupRequired = await checkIsSetupRequired(outputChannel);
+		statuses = await checkSetupStatus(outputChannel);
+
+		const setupRequired = Object.values(statuses).some(
+			(check) => check === false,
+		);
 		const newStatus = setupRequired ? "setup_required" : "ok";
 		if (status !== newStatus) {
 			status = newStatus;
 			await emitter.emit(status);
 		}
 
+		// TODO: Find a smarter way to check the status (e.g. watch for changes in AWS credentials or LocalStack installation)
 		timeout = setTimeout(() => void startChecking(), 1_000);
 	};
 
@@ -48,6 +56,10 @@ export async function createSetupStatusTracker(
 			// biome-ignore lint/style/noNonNullAssertion: false positive
 			return status!;
 		},
+		statuses() {
+			// biome-ignore lint/style/noNonNullAssertion: false positive
+			return statuses!;
+		},
 		onChange(callback) {
 			emitter.on(callback);
 			if (status) {

src/utils/setup.ts

@@ -5,9 +5,7 @@ import { checkIsProfileConfigured } from "./configure-aws.ts";
 import { checkLocalstackInstalled } from "./install.ts";
 import { checkIsLicenseValid } from "./license.ts";
 
-export async function checkIsSetupRequired(
-	outputChannel: LogOutputChannel,
-): Promise<boolean> {
+export async function checkSetupStatus(outputChannel: LogOutputChannel) {
 	const [isInstalled, isAuthenticated, isLicenseValid, isProfileConfigured] =
 		await Promise.all([
 			checkLocalstackInstalled(outputChannel),
@@ -16,7 +14,10 @@ export async function checkIsSetupRequired(
 			checkIsProfileConfigured(),
 		]);
 
-	return (
-		!isInstalled || !isAuthenticated || !isLicenseValid || !isProfileConfigured
-	);
+	return {
+		isInstalled,
+		isAuthenticated,
+		isLicenseValid,
+		isProfileConfigured,
+	};
 }