ui v2: restyle metadata table (#729)

frontend/packages/core/src/Table/index.tsx

@@ -1,5 +1,5 @@
 import { ExpandableRow, ExpandableTable, StatusRow } from "./expandable-table";
-import MetadataTable from "./metadata-table";
+import { MetadataTable } from "./metadata-table";
 import { Row, Table } from "./table";
 import TreeTable from "./tree-table";
 

frontend/packages/core/src/Table/metadata-table.tsx

@@ -1,11 +1,16 @@
-import React from "react";
+import * as React from "react";
 import { useForm } from "react-hook-form";
+import styled from "@emotion/styled";
 import { DevTool } from "@hookform/devtools";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Table, TableBody, TableCell, TableContainer, TableRow } from "@material-ui/core";
-import type { Size } from "@material-ui/core/TableCell";
+import {
+  Table as MuiTable,
+  TableBody as MuiTableBody,
+  TableCell as MuiTableCell,
+  TableContainer as MuiTableContainer,
+  TableRow,
+} from "@material-ui/core";
 import _ from "lodash";
-import styled from "styled-components";
 import type { Schema } from "yup";
 import { object } from "yup";
 
@@ -26,66 +31,90 @@ interface IdentifiableRowData extends RowData {
   id: string;
 }
 
+const TableContainer = styled(MuiTableContainer)({
+  borderWidth: "0",
+  border: "0",
+  padding: "16px 32px",
+});
+
+const Table = styled(MuiTable)({
+  border: "1px solid rgba(13, 16, 48, 0.12)",
+  borderRadius: "4px",
+  borderCollapse: "unset",
+});
+
+const TableBody = styled(MuiTableBody)({
+  "tr:first-of-type > td:first-of-type": {
+    borderTopLeftRadius: "3px",
+  },
+  "tr:first-of-type > td:last-of-type": {
+    borderTopRightRadius: "3px",
+  },
+  "tr:last-of-type > td": {
+    borderBottom: "0",
+  },
+  "tr:last-of-type > td:first-of-type": {
+    borderBottomLeftRadius: "3px",
+  },
+  "tr:last-of-type > td:last-of-type": {
+    borderBottomRightRadius: "3px",
+  },
+});
+
+const TableCell = styled(MuiTableCell)({
+  color: "#0D1030",
+  fontSize: "14px",
+  fontWeight: "normal",
+  height: "48px",
+  padding: "0 16px",
+});
+
+const KeyCellContainer = styled(TableCell)({
+  width: "45%",
+  background: "rgba(13, 16, 48, 0.03)",
+  fontWeight: 500,
+});
+
 interface KeyCellProps {
   data: IdentifiableRowData;
-  size: Size;
 }
 
-const StyledKeyCell = styled(TableCell)`
-  width: 50%;
-`;
-
-const KeyCell: React.FC<KeyCellProps> = ({ data, size }) => {
+const KeyCell: React.FC<KeyCellProps> = ({ data }) => {
   let { name } = data;
   if (data.value instanceof Array && data.value.length > 1) {
     name = `${data.name}s`;
   }
-  return (
-    <StyledKeyCell size={size}>
-      <strong>{name}</strong>
-    </StyledKeyCell>
-  );
+  return <KeyCellContainer>{name}</KeyCellContainer>;
 };
 
-interface ViewOnlyRowProps {
-  data: IdentifiableRowData;
-  size: Size;
-}
+interface ImmutableRowProps extends KeyCellProps {}
 
-const ViewOnlyRow: React.FC<ViewOnlyRowProps> = ({ data, size }) => {
+const ImmutableRow: React.FC<ImmutableRowProps> = ({ data }) => {
   let { value } = data;
   if (data.value instanceof Array && data.value.length > 1) {
     value = data.value.join(", ");
   }
   return (
     <TableRow key={data.id}>
-      <KeyCell data={data} size={size} />
-      <TableCell size={size}>{value}</TableCell>
+      <KeyCell data={data} />
+      <TableCell>{value}</TableCell>
     </TableRow>
   );
 };
 
-interface EditableRowProps {
-  data: IdentifiableRowData;
+interface MutableRowProps extends ImmutableRowProps {
   onUpdate: (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
   onReturn: () => void;
   validation: any;
-  size: Size;
 }
 
-const EditableRow: React.FC<EditableRowProps> = ({
-  data,
-  onUpdate,
-  onReturn,
-  validation,
-  size,
-}) => {
+const MutableRow: React.FC<MutableRowProps> = ({ data, onUpdate, onReturn, validation }) => {
   const error = validation.errors?.[data.name];
 
   return (
     <TableRow key={data.id}>
-      <KeyCell data={data} size={size} />
-      <TableCell size={size}>
+      <KeyCell data={data} />
+      <TableCell>
         <TextField
           id={data.id}
           name={data.name}
@@ -103,20 +132,12 @@ const EditableRow: React.FC<EditableRowProps> = ({
   );
 };
 
-interface MetadataTableProps {
+export interface MetadataTableProps {
   data: RowData[];
   onUpdate?: (id: string, value: unknown) => void;
-  variant?: Size;
 }
 
-const MetadataTable: React.FC<MetadataTableProps> = ({
-  data,
-  onUpdate,
-  children,
-  variant,
-  ...props
-}) => {
-  const displayVariant = variant || "medium";
+export const MetadataTable: React.FC<MetadataTableProps> = ({ data, onUpdate, children }) => {
   const { onSubmit, setOnSubmit } = useWizardContext();
   let rows = data;
   if (_.isEmpty(data)) {
@@ -145,22 +166,21 @@ const MetadataTable: React.FC<MetadataTableProps> = ({
   }, []);
 
   return (
-    <TableContainer {...props}>
+    <TableContainer>
       {process.env.REACT_APP_DEBUG_FORMS && onUpdate !== undefined && <DevTool control={control} />}
-      <Table {...props}>
+      <Table>
         <TableBody>
           {rows.map((row: IdentifiableRowData) => {
             return row.input !== undefined && onUpdate ? (
-              <EditableRow
+              <MutableRow
                 data={row}
                 onUpdate={e => onUpdate(e.target.id, e.target.value)}
                 onReturn={onSubmit}
                 key={row.id}
                 validation={validation}
-                size={displayVariant}
               />
             ) : (
-              <ViewOnlyRow data={row} key={row.id} size={displayVariant} />
+              <ImmutableRow data={row} key={row.id} />
             );
           })}
           {children}

frontend/packages/core/src/Table/stories/metadata-table.stories.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { Meta } from "@storybook/react";
+
+import { WizardContext } from "../../Contexts";
+import type { MetadataTableProps } from "../metadata-table";
+import { MetadataTable } from "../metadata-table";
+
+export default {
+  title: "Core/Table/Metadata Table",
+  decorators: [
+    story => (
+      <WizardContext.Provider
+        value={() => {
+          return {
+            onSubmit: () => {},
+            setOnSubmit: () => {},
+            setIsLoading: () => {},
+            displayWarnings: () => {},
+            onBack: () => {},
+          };
+        }}
+      >
+        {story()}
+      </WizardContext.Provider>
+    ),
+  ],
+  component: MetadataTable,
+} as Meta;
+
+const Template = (props: MetadataTableProps) => (
+  <div style={{ display: "flex", maxWidth: "800px" }}>
+    <MetadataTable {...props} />
+  </div>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  data: [
+    { name: "Instance ID", value: "i-01cb1d09a5a1801e9" },
+    { name: "Region", value: "us-east-1" },
+    { name: "State", value: "RUNNING" },
+    { name: "Instance Type", value: "c5.large" },
+    { name: "Public IP Address", value: "54.234.102.49" },
+    { name: "Private IP Address", value: "10.46.191.123" },
+    { name: "Availability Zone", value: "us-east-1d" },
+  ],
+};

frontend/workflows/envoy/src/server-info.tsx

@@ -36,16 +36,15 @@ const ServerInfo: React.FC<{ info: IClutch.envoytriage.v1.IServerInfo }> = ({ in
     return { name: key, value: cliOptions[key] };
   });
   const midPoint = Math.floor(cliOptionMetadata.length / 2);
-  const variant = "small";
   return (
     <ExpansionPanel heading="Server Info" summary={status}>
-      <MetadataTable data={serverData} variant="small">
+      <MetadataTable data={serverData}>
         <TableRow>
-          <TableCell size={variant}>
-            <MetadataTable data={cliOptionMetadata.slice(0, midPoint)} variant={variant} />
+          <TableCell>
+            <MetadataTable data={cliOptionMetadata.slice(0, midPoint)} />
           </TableCell>
-          <TableCell size={variant}>
-            <MetadataTable data={cliOptionMetadata.slice(midPoint)} variant={variant} />
+          <TableCell>
+            <MetadataTable data={cliOptionMetadata.slice(midPoint)} />
           </TableCell>
         </TableRow>
       </MetadataTable>