fix(site): fix metadata sorting

coderd/workspaceagents.go

@@ -1601,6 +1601,7 @@ func convertWorkspaceAgentMetadata(db []database.WorkspaceAgentMetadatum) []code
 	result := make([]codersdk.WorkspaceAgentMetadata, len(db))
 	for i, datum := range db {
 		result[i] = codersdk.WorkspaceAgentMetadata{
+			Order: datum.DisplayOrder,
 			Result: codersdk.WorkspaceAgentMetadataResult{
 				Value:       datum.Value,
 				Error:       datum.Error,

codersdk/workspaceagents.go

@@ -134,6 +134,7 @@ type WorkspaceAgentMetadataDescription struct {
 type WorkspaceAgentMetadata struct {
 	Result      WorkspaceAgentMetadataResult      `json:"result"`
 	Description WorkspaceAgentMetadataDescription `json:"description"`
+	Order       int32                             `json:"order"`
 }
 
 type DisplayApp string

site/src/api/typesGenerated.ts

@@ -1737,6 +1737,7 @@ export interface WorkspaceAgentLogSource {
 export interface WorkspaceAgentMetadata {
   readonly result: WorkspaceAgentMetadataResult;
   readonly description: WorkspaceAgentMetadataDescription;
+  readonly order: number;
 }
 
 // From codersdk/workspaceagents.go

site/src/modules/resources/AgentMetadata.stories.tsx

@@ -32,6 +32,7 @@ const Example: Story = {
   args: {
     metadata: [
       {
+        order: 6,
         result: {
           ...resultDefaults,
           value: "110%",
@@ -43,6 +44,7 @@ const Example: Story = {
         },
       },
       {
+        order: 5,
         result: {
           ...resultDefaults,
           value: "50GB",
@@ -54,6 +56,7 @@ const Example: Story = {
         },
       },
       {
+        order: 4,
         result: {
           ...resultDefaults,
           value: "stale value",
@@ -67,6 +70,7 @@ const Example: Story = {
         },
       },
       {
+        order: 3,
         result: {
           ...resultDefaults,
           value: "oops",
@@ -79,6 +83,7 @@ const Example: Story = {
         },
       },
       {
+        order: 2,
         result: {
           ...resultDefaults,
           value: "",
@@ -92,6 +97,7 @@ const Example: Story = {
         },
       },
       {
+        order: 1,
         result: {
           ...resultDefaults,
           value: "r".repeat(1000),

site/src/modules/resources/AgentMetadata.tsx

@@ -34,9 +34,11 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
   }
   return (
     <section css={styles.root}>
-      {metadata.map((m) => (
-        <MetadataItem key={m.description.key} item={m} />
-      ))}
+      {[...metadata]
+        .sort((a, b) => a.order - b.order)
+        .map((m) => (
+          <MetadataItem key={m.description.key} item={m} />
+        ))}
     </section>
   );
 };