refactor: use SDK for console list

extensions/amazon-aws/package.json

@@ -92,6 +92,7 @@
     "@aws-sdk/client-lambda": "^3.216.0",
     "@aws-sdk/client-s3": "^3.216.0",
     "@aws-sdk/client-sqs": "^3.216.0",
+    "@aws-sdk/client-ssm": "^3.218.0",
     "@aws-sdk/shared-ini-file-loader": "^3.215.0",
     "@raycast/api": "^1.38.2",
     "@raycast/utils": "^1.4.9"

extensions/amazon-aws/src/console.tsx

@@ -1,50 +1,107 @@
-import { ActionPanel, List, Action } from "@raycast/api";
-import { readFile } from "fs/promises";
+import { GetParametersByPathCommand, GetParametersCommand, SSMClient } from "@aws-sdk/client-ssm";
+import { Action, ActionPanel, Icon, List } from "@raycast/api";
 import { useCachedPromise } from "@raycast/utils";
-import { AWS_URL_BASE } from "./util/aws-profile-dropdown";
+import { useEffect, useState } from "react";
+import AWSProfileDropdown, { AWS_URL_BASE } from "./util/aws-profile-dropdown";
 
 export default function Console() {
-  const { data: services, isLoading } = useCachedPromise(loadJSON);
+  const { data: services, error, isLoading, revalidate } = useCachedPromise(loadServices);
+  const progressIcon = useProgressIcon({ show: isLoading && !services });
 
   return (
-    <List isLoading={isLoading} searchBarPlaceholder="Filter services by name...">
-      {services?.map((service) => (
-        <List.Item
-          id={service.uid}
-          key={service.uid}
-          title={service.title}
-          subtitle={service.subtitle}
-          icon={service.icon.path}
-          actions={
-            <ActionPanel>
-              <Action.OpenInBrowser url={`${AWS_URL_BASE}${service.arg}`} />
-            </ActionPanel>
-          }
+    <List
+      isLoading={isLoading && !!services}
+      searchBarPlaceholder="Filter services by name..."
+      searchBarAccessory={<AWSProfileDropdown onProfileSelected={revalidate} />}
+    >
+      {error ? (
+        <List.EmptyView title={error.name} description={error.message} icon={Icon.Warning} />
+      ) : progressIcon ? (
+        <List.EmptyView
+          title="Loading..."
+          icon={progressIcon}
+          description="The first run of this command will take a few seconds. But don't worry, the next time it'll already be very fast."
         />
-      ))}
+      ) : (
+        services?.map((service, index) => (
+          <List.Item
+            title={service?.name || service.id}
+            key={index}
+            actions={
+              <ActionPanel>
+                <Action.OpenInBrowser title="Open in Browser" url={`${AWS_URL_BASE}/${service.id}`} />
+              </ActionPanel>
+            }
+          />
+        ))
+      )}
     </List>
   );
 }
 
-type AWSService = {
-  uid: string;
-  title: string;
-  subtitle: string;
-  arg: string;
-  icon: AWSIcon;
-};
-
-type AWSIcon = {
-  path: string;
-};
-
-async function loadJSON() {
-  const file = await readFile(`${__dirname}/assets/aws-services.json`, "utf8");
-  const services = (JSON.parse(file).items as AWSService[])
-    .filter((service) => {
-      return !!service.title; // Only include services that have a title
+interface Service {
+  id: string;
+  name: string;
+}
+
+async function loadServices(token?: string, accServices?: Service[]): Promise<Service[]> {
+  const ssm = new SSMClient({});
+  const prefix = "/aws/service/global-infrastructure";
+  const { Parameters: idParameters, NextToken } = await ssm.send(
+    new GetParametersByPathCommand({
+      Path: `${prefix}/regions/${process.env.AWS_REGION}/services`,
+      Recursive: true,
+      NextToken: token,
+    })
+  );
+
+  const serviceIds = (idParameters || []).map((p) => p.Value).filter((v): v is string => !!v);
+
+  const { Parameters: nameParameters } = await ssm.send(
+    new GetParametersCommand({ Names: serviceIds.map((id) => `${prefix}/services/${id}/longName`) })
+  );
+
+  const services = serviceIds
+    .map((id) => {
+      const name = nameParameters?.find((p) => p.Name?.split("/").at(-2) === id)?.Value;
+      return name && { id, name };
     })
-    .sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0));
+    .filter((s): s is Service => !!s);
+
+  if (NextToken) {
+    return loadServices(NextToken, [...(accServices ?? []), ...services]);
+  }
+
+  return [...(accServices ?? []), ...services];
+}
+
+function useProgressIcon({ show }: { show: boolean }) {
+  const [progress, setProgress] = useState<
+    Icon.CircleProgress25 | Icon.CircleProgress50 | Icon.CircleProgress75 | Icon.CircleProgress100
+  >(Icon.CircleProgress25);
+
+  useEffect(() => {
+    if (!show) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setProgress((progress) => {
+        switch (progress) {
+          case Icon.CircleProgress25:
+            return Icon.CircleProgress50;
+          case Icon.CircleProgress50:
+            return Icon.CircleProgress75;
+          case Icon.CircleProgress75:
+            return Icon.CircleProgress100;
+          case Icon.CircleProgress100:
+            return Icon.CircleProgress25;
+        }
+      });
+    }, 700);
+
+    return () => clearInterval(interval);
+  }, [show]);
 
-  return services;
+  return show ? progress : undefined;
 }