Refactor metadata and logs button

coder · BrunoQuaresma · Jan 19, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
commit 0a2cb43f5889a1c6c41f21a97066be8e7cb7d4f6
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -98,16 +98,14 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
     return null;
   }
   return (
-    <div css={styles.root}>
-      <Stack alignItems="baseline" direction="row" spacing={6}>
-        {metadata.map((m) => {
-          if (m.description === undefined) {
-            throw new Error("Metadata item description is undefined");
-          }
-          return <MetadataItem key={m.description.key} item={m} />;
-        })}
-      </Stack>
-    </div>
+    <section css={styles.root}>
+      {metadata.map((m) => {
+        if (m.description === undefined) {
+          throw new Error("Metadata item description is undefined");
+        }
+        return <MetadataItem key={m.description.key} item={m} />;
+      })}
+    </section>
   );
 };
 
@@ -162,13 +160,19 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
 
   if (metadata === undefined) {
     return (
-      <div css={styles.root}>
+      <section css={styles.root}>
         <AgentMetadataSkeleton />
-      </div>
+      </section>
     );
   }
 
-  return <AgentMetadataView metadata={metadata} />;
+  return (
+    <AgentMetadataView
+      metadata={[...metadata].sort((a, b) =>
+        a.description.display_name.localeCompare(b.description.display_name),
+      )}
+    />
+  );
 };
 
 export const AgentMetadataSkeleton: FC = () => {
@@ -221,33 +225,29 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 const styles = {
-  root: (theme) => ({
-    padding: "20px 32px",
-    borderTop: `1px solid ${theme.palette.divider}`,
-    overflowX: "auto",
-    scrollPadding: "0 32px",
-  }),
+  root: {
+    padding: "0 24px 32px",
+    display: "flex",
+    alignItems: "baseline",
+    flexWrap: "wrap",
+    gap: 32,
+    rowGap: 16,
+  },
 
   metadata: {
-    fontSize: 12,
-    lineHeight: "normal",
+    lineHeight: "1.6",
     display: "flex",
     flexDirection: "column",
-    gap: 4,
     overflow: "visible",
-
-    // Because of scrolling
-    "&:last-child": {
-      paddingRight: 32,
-    },
+    flexShrink: 0,
   },
 
   metadataLabel: (theme) => ({
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    fontWeight: 500,
+    fontSize: 13,
   }),
 
   metadataValue: {
@@ -259,9 +259,7 @@ const styles = {
   },
 
   metadataValueSuccess: (theme) => ({
-    // color: theme.palette.success.light,
-    color: theme.experimental.roles.success.fill,
-    // color: theme.experimental.roles.success.text,
+    color: theme.experimental.roles.success.outline,
   }),
 
   metadataValueError: (theme) => ({

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -243,7 +243,7 @@ export const AgentRow: FC<AgentRowProps> = ({
       )}
 
       {agent.status === "connecting" && (
-        <div css={styles.apps}>
+        <section css={styles.apps}>
           <Skeleton
             width={80}
             height={32}
@@ -256,13 +256,13 @@ export const AgentRow: FC<AgentRowProps> = ({
             variant="rectangular"
             css={styles.buttonSkeleton}
           />
-        </div>
+        </section>
       )}
 
       <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
       {hasStartupFeatures && (
-        <div css={styles.logsPanel}>
+        <section>
           <Collapse in={showLogs}>
             <AutoSizer disableHeight>
               {({ width }) => (
@@ -417,16 +417,14 @@ export const AgentRow: FC<AgentRowProps> = ({
             </AutoSizer>
           </Collapse>
 
-          <div css={{ display: "flex" }}>
-            <button
-              css={styles.logsPanelButton}
-              onClick={() => setShowLogs((v) => !v)}
-            >
-              <DropdownArrow close={showLogs} />
-              {showLogs ? "Hide" : "Show"} logs
-            </button>
-          </div>
-        </div>
+          <button
+            css={styles.logsPanelButton}
+            onClick={() => setShowLogs((v) => !v)}
+          >
+            <DropdownArrow close={showLogs} margin={false} />
+            {showLogs ? "Hide" : "Show"} logs
+          </button>
+        </section>
       )}
     </Stack>
   );
@@ -583,7 +581,7 @@ const styles = {
   }),
 
   apps: (theme) => ({
-    padding: 24,
+    padding: "32px 24px",
     display: "flex",
     gap: 16,
     flexWrap: "wrap",
@@ -602,6 +600,7 @@ const styles = {
   startupLogs: (theme) => ({
     maxHeight: 256,
     borderBottom: `1px solid ${theme.palette.divider}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     paddingTop: 16,
 
@@ -654,16 +653,12 @@ const styles = {
     },
   }),
 
-  logsPanel: (theme) => ({
-    borderTop: `1px solid ${theme.palette.divider}`,
-  }),
-
   logsPanelButton: (theme) => ({
     textAlign: "left",
     background: "transparent",
     border: 0,
     fontFamily: "inherit",
-    padding: "12px 32px",
+    padding: "16px 24px",
     color: theme.palette.text.secondary,
     cursor: "pointer",
     display: "flex",