feat(ui): add account details in IAM Identity Center to GUI (#1406)

Author: konippi

packages/dashboard-app/src/pages/settings/preferences.tsx

@@ -1,5 +1,6 @@
 import { UserPrefView } from "@/components/preference/list";
 import { Button } from "@/components/ui/button";
+import { Link } from "@/components/ui/link";
 import settings from "@/data/preferences";
 import { useAuth } from "@/hooks/store/useAuth";
 import { Native, User } from "@aws/amazon-q-developer-cli-api-bindings";
@@ -94,39 +95,61 @@ export default function Page() {
             </p>
 
             {auth.authed && auth.authKind === "IamIdentityCenter" && (
-              <div className="py-4 flex flex-col gap-1">
-                <h3 className="font-medium leading-none">Active Profile</h3>
-                <p className="font-light leading-tight text-sm">
-                  SSO users with multiple profiles can select them here
-                </p>
-                {profiles ? (
-                  <Select
-                    value={profile?.arn}
-                    onValueChange={(profile) => {
-                      onProfileChange(profiles?.find((p) => p.arn === profile));
-                    }}
-                    disabled={!profiles}
-                  >
-                    <SelectTrigger className="w-60">
-                      <SelectValue placeholder="No Profile Selected" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {profiles &&
-                        profiles.map((p) => (
-                          <SelectItem
-                            key={p.arn}
-                            value={p.arn}
-                            description={p.arn}
-                          >
-                            {p.profileName}
-                          </SelectItem>
-                        ))}
-                    </SelectContent>
-                  </Select>
-                ) : (
-                  <Skeleton className="w-60 h-10" />
-                )}
-              </div>
+              <>
+                <div className="flex flex-col p-4 mt-2 gap-4 rounded-lg bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-700">
+                  <div className="flex flex-col items-start gap-1">
+                    <h4 className="font-medium leading-none">Start URL</h4>
+                    <Link
+                      href={auth.startUrl ?? ""}
+                      className="font-light leading-tight text-sm text-black/50 dark:text-white/50"
+                    >
+                      {auth.startUrl}
+                    </Link>
+                  </div>
+                  <div className="flex flex-col items-start gap-1">
+                    <h4 className="font-medium leading-none">Region</h4>
+                    <p className="font-light leading-tight text-sm text-black/50 dark:text-white/50">
+                      {auth.region}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="py-4 flex flex-col gap-1">
+                  <h3 className="font-medium leading-none">Active Profile</h3>
+                  <p className="font-light leading-tight text-sm">
+                    SSO users with multiple profiles can select them here
+                  </p>
+                  {profiles ? (
+                    <Select
+                      value={profile?.arn}
+                      onValueChange={(profile) => {
+                        onProfileChange(
+                          profiles?.find((p) => p.arn === profile),
+                        );
+                      }}
+                      disabled={!profiles}
+                    >
+                      <SelectTrigger className="w-60">
+                        <SelectValue placeholder="No Profile Selected" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {profiles &&
+                          profiles.map((p) => (
+                            <SelectItem
+                              key={p.arn}
+                              value={p.arn}
+                              description={p.arn}
+                            >
+                              {p.profileName}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Skeleton className="w-60 h-10" />
+                  )}
+                </div>
+              </>
             )}
             <div className="pt-2">
               <Button