feat(console): linkable ui.Field (#6418)

Closes #6003 

## Checklist

- [ ] Title matches [Winglang's style guide](https://www.winglang.io/contributing/start-here/pull_requests#how-are-pull-request-titles-formatted)
- [ ] Description explains motivation and solution
- [ ] Tests added (always)
- [ ] Docs updated (only required for features)
- [ ] Added `pr/e2e-full` label if this feature requires end-to-end testing

*By submitting this pull request, I confirm that my contribution is made under the terms of the [Wing Cloud Contribution License](https://github.com/winglang/wing/blob/main/CONTRIBUTION_LICENSE.md)*.

apps/wing-console/console/app/demo/main.w

@@ -176,7 +176,14 @@ class WidgetService {
       "Total widgets",
       inflight () => { return this.countWidgets(); },
       refreshRate: 5s,
-    );
+    ) as "TotalWidgets";
+
+    // a link field displays a clickable link
+    new ui.Field(
+      "Widgets Link",
+      inflight () => { return "https://winglang.io"; },
+      link: true,
+    ) as "WidgetsLink";
 
     // a button lets you invoke any inflight function
     new ui.Button("Add widget", inflight () => { this.addWidget(); });

apps/wing-console/console/ui/src/ui/custom-resource-item.tsx

@@ -42,6 +42,7 @@ export const CustomResourceUiItem = ({ item }: { item: UIComponent }) => {
         <CustomResourceUiFieldItem
           label={uiComponent.label}
           handlerPath={uiComponent.handler}
+          link={uiComponent.link}
         />
       )}
       {uiComponent.kind === "button" && (

apps/wing-console/console/ui/src/ui/custom-resource-ui-field.tsx

@@ -1,21 +1,33 @@
 import { Attribute } from "@wingconsole/design-system";
+import { Link } from "@wingconsole/design-system";
 
 import { trpc } from "../services/trpc.js";
 
 export interface CustomResourceUiFieldItemProps {
   label: string;
   handlerPath: string;
+  link: boolean;
 }
 
 export const CustomResourceUiFieldItem = ({
   label,
   handlerPath,
+  link,
 }: CustomResourceUiFieldItemProps) => {
   const field = trpc["uiField.get"].useQuery(
     {
       resourcePath: handlerPath,
     },
     { enabled: !!handlerPath },
   );
-  return <Attribute name={label} value={field.data?.value ?? ""} />;
+  const fieldValue = field.data?.value ?? "";
+  return (
+    <Attribute name={label} value={link ? undefined : fieldValue}>
+      {link && (
+        <Link id={label} href={fieldValue} target="_blank">
+          {fieldValue}
+        </Link>
+      )}
+    </Attribute>
+  );
 };