ui v2: restyle resize workflows (#794)

frontend/packages/core/src/Resolver/input.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import type { UseFormMethods } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type { clutch } from "@clutch-sh/api";
-import SearchIcon from "@material-ui/icons/Search";
 import styled from "@emotion/styled";
+import SearchIcon from "@material-ui/icons/Search";
 
 import {
   Accordion,

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

@@ -4,12 +4,14 @@ import styled from "@emotion/styled";
 import { DevTool } from "@hookform/devtools";
 import { yupResolver } from "@hookform/resolvers/yup";
 import {
+  Grid as MuiGrid,
   Table as MuiTable,
   TableBody as MuiTableBody,
   TableCell as MuiTableCell,
   TableContainer as MuiTableContainer,
   TableRow,
 } from "@material-ui/core";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import _ from "lodash";
 import type { Schema } from "yup";
 import { object } from "yup";
@@ -68,6 +70,21 @@ const TableCell = styled(MuiTableCell)({
   padding: "0 16px",
 });
 
+const Grid = styled(MuiGrid)({
+  ".MuiFormControl-root": {
+    height: "40px",
+    width: "100px",
+    flexDirection: "row",
+  },
+  ".textfield-disabled .MuiFormControl-root": {
+    width: "41px",
+  },
+  ".textfield-disabled .MuiInput-input": {
+    padding: "0px",
+    textAlign: "center",
+  },
+});
+
 const KeyCellContainer = styled(TableCell)({
   width: "45%",
   background: "rgba(13, 16, 48, 0.03)",
@@ -114,18 +131,24 @@ const MutableRow: React.FC<MutableRowProps> = ({ data, onUpdate, onReturn, valid
     <TableRow key={data.id}>
       <KeyCell data={data} />
       <TableCell>
-        <TextField
-          id={data.id}
-          name={data.name}
-          defaultValue={data.value}
-          type={data?.input?.type}
-          onChange={onUpdate}
-          onReturn={onReturn}
-          onFocus={onUpdate}
-          inputRef={validation.register}
-          helperText={error?.message || ""}
-          error={!!error || false}
-        />
+        <Grid container alignItems="center" wrap="nowrap" spacing={2}>
+          <div className="textfield-disabled">
+            <TextField disabled id={data.id} name={data.name} defaultValue={data.value} />
+          </div>
+          <ChevronRightIcon />
+          <TextField
+            id={data.id}
+            name={data.name}
+            defaultValue={data.value}
+            type={data?.input?.type}
+            onChange={onUpdate}
+            onReturn={onReturn}
+            onFocus={onUpdate}
+            inputRef={validation.register}
+            helperText={error?.message || ""}
+            error={!!error || false}
+          />
+        </Grid>
       </TableCell>
     </TableRow>
   );

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

 import * as React from "react";
+import { action } from "@storybook/addon-actions";
 import type { Meta } from "@storybook/react";
 
 import { WizardContext } from "../../Contexts";
@@ -45,3 +46,31 @@ Primary.args = {
     { name: "Availability Zone", value: "us-east-1d" },
   ],
 };
+
+export const WithMutableRows = Template.bind({});
+WithMutableRows.args = {
+  onUpdate: action("update event"),
+  data: [
+    { name: "Name", value: "my-asg-name" },
+    { name: "Region", value: "us-mock-1" },
+    {
+      name: "Min Size",
+      value: 15,
+      input: {
+        type: "number",
+        key: "size.min",
+      },
+    },
+    {
+      name: "Max Size",
+      value: 25,
+      input: { type: "number", key: "size.max" },
+    },
+    {
+      name: "Desired Size",
+      value: 20,
+      input: { type: "number", key: "size.desired" },
+    },
+    { name: "Availability Zones", value: "us-mock-1b" },
+  ],
+};

frontend/packages/core/src/accordion.tsx

@@ -164,7 +164,6 @@ const StyledAccordionDetails = styled(MuiAccordionDetails)({
   boxSizing: "border-box",
   "> *": {
     padding: "8px 8px",
-
   },
   ".MuiFormLabel-root": {
     padding: "inherit",

frontend/workflows/ec2/src/resize-asg.tsx

@@ -5,14 +5,12 @@ import {
   client,
   Confirmation,
   MetadataTable,
-  NotePanel,
   Resolver,
   useWizardContext,
 } from "@clutch-sh/core";
 import { useDataLayout } from "@clutch-sh/data-layout";
 import type { WizardChild } from "@clutch-sh/wizard";
 import { Wizard, WizardStep } from "@clutch-sh/wizard";
-import { Paper } from "@material-ui/core";
 import { number } from "yup";
 
 import type { ConfirmChild, ResolverChild, WorkflowProps } from ".";
@@ -76,29 +74,28 @@ const GroupDetails: React.FC<WizardChild> = () => {
   );
 };
 
+// TODO (sperry): possibly show the previous size values
 const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
   const group = useDataLayout("groupData").displayValue();
   const resizeData = useDataLayout("resizeData");
+  const formattedNotes = notes?.map(note => <div>{note.text}</div>);
 
   return (
     <WizardStep error={resizeData.error} isLoading={resizeData.isLoading}>
-      <Confirmation action="Resize" />
-      <Paper style={{ width: "100%", margin: "2.5% 0" }} elevation={3}>
-        <MetadataTable
-          data={[
-            { name: "Name", value: group.name },
-            { name: "New Min Size", value: group.size.min },
-            { name: "New Max Size", value: group.size.max },
-            { name: "New Desired Size", value: group.size.desired },
-          ]}
-        />
-      </Paper>
-      <NotePanel notes={notes} />
+      <Confirmation action="Resize">{notes && formattedNotes}</Confirmation>
+      <MetadataTable
+        data={[
+          { name: "Name", value: group.name },
+          { name: "New Min Size", value: group.size.min },
+          { name: "New Max Size", value: group.size.max },
+          { name: "New Desired Size", value: group.size.desired },
+        ]}
+      />
     </WizardStep>
   );
 };
 
-const ResizeAutoscalingGroup: React.FC<WorkflowProps> = ({ heading, resolverType, notes = [] }) => {
+const ResizeAutoscalingGroup: React.FC<WorkflowProps> = ({ heading, resolverType, notes }) => {
   const dataLayout = {
     groupData: {},
     resizeData: {

frontend/workflows/ec2/src/terminate-instance.tsx

@@ -54,11 +54,13 @@ const InstanceDetails: React.FC<WizardChild> = () => {
   return (
     <WizardStep error={resourceData.error} isLoading={resourceData.isLoading}>
       <MetadataTable data={data} />
-      <Accordion title="Metadata">
-        <AccordionDetails>
-          <MetadataTable data={metadata} />
-        </AccordionDetails>
-      </Accordion>
+      {metadata.length > 0 && (
+        <Accordion title="Metadata">
+          <AccordionDetails>
+            <MetadataTable data={metadata} />
+          </AccordionDetails>
+        </Accordion>
+      )}
       <ButtonGroup justify="flex-end">
         <Button text="Back" variant="neutral" onClick={onBack} />
         <Button text="Terminate" variant="destructive" onClick={onSubmit} />
@@ -69,15 +71,18 @@ const InstanceDetails: React.FC<WizardChild> = () => {
 
 const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
   const terminationData = useDataLayout("terminationData");
-  const configData = JSON.parse(terminationData.displayValue()?.config?.data || "{}");
-  const confirmationData = Object.keys(configData).map(key => {
-    return { name: key, value: configData[key] };
-  });
-  const formattedNotes = notes.map(note => <div>{note.text}</div>);
+  const instance = useDataLayout("resourceData").displayValue();
+  const formattedNotes = notes?.map(note => <div>{note.text}</div>);
+
+  const data = [
+    { name: "Instance ID", value: instance.instanceId },
+    { name: "Region", value: instance.region },
+  ];
+
   return (
     <WizardStep error={terminationData.error} isLoading={terminationData.isLoading}>
       <Confirmation action="Termination">{notes && formattedNotes}</Confirmation>
-      <MetadataTable data={confirmationData} />
+      <MetadataTable data={data} />
     </WizardStep>
   );
 };

frontend/workflows/k8s/src/delete-pod.tsx

@@ -65,15 +65,17 @@ and
 const Confirm: React.FC<ConfirmChild> = () => {
   const deletionData = useDataLayout("deletionData");
   const podData = useDataLayout("resourceData");
-  const {name, cluster, namespace} = podData.displayValue();
+  const { name, cluster, namespace } = podData.displayValue();
   return (
     <WizardStep error={deletionData.error} isLoading={deletionData.isLoading}>
       <Confirmation action="Deletion" />
-      <MetadataTable data={[
-        {name: "Name", value: name},
-        {name: "Cluster", value: cluster},
-        {name: "Namespace", value: namespace},
-      ]} />
+      <MetadataTable
+        data={[
+          { name: "Name", value: name },
+          { name: "Cluster", value: cluster },
+          { name: "Namespace", value: namespace },
+        ]}
+      />
     </WizardStep>
   );
 };

frontend/workflows/k8s/src/resize-hpa.tsx

 import React from "react";
 import type { clutch as IClutch } from "@clutch-sh/api";
 import {
+  Accordion,
+  AccordionDetails,
   Button,
   ButtonGroup,
   client,
   Confirmation,
   MetadataTable,
-  NotePanel,
   Resolver,
   useWizardContext,
 } from "@clutch-sh/core";
 import { useDataLayout } from "@clutch-sh/data-layout";
 import type { WizardChild } from "@clutch-sh/wizard";
 import { Wizard, WizardStep } from "@clutch-sh/wizard";
+import _ from "lodash";
 import * as yup from "yup";
 
 import type { ConfirmChild, ResolverChild, WorkflowProps } from ".";
@@ -40,6 +42,20 @@ const HPADetails: React.FC<WizardChild> = () => {
     hpaData.updateData(key, value);
   };
 
+  const metadata = [];
+
+  if (hpa.annotations) {
+    _.forEach(hpa.annotations, (annotation, key) => {
+      metadata.push({ name: key, value: annotation });
+    });
+  }
+
+  if (hpa.labels) {
+    _.forEach(hpa.labels, (label, key) => {
+      metadata.push({ name: key, value: label });
+    });
+  }
+
   return (
     <WizardStep error={hpaData.error} isLoading={hpaData.isLoading}>
       <MetadataTable
@@ -66,6 +82,13 @@ const HPADetails: React.FC<WizardChild> = () => {
           { name: "Cluster", value: hpa.cluster },
         ]}
       />
+      {metadata.length > 0 && (
+        <Accordion title="Metadata">
+          <AccordionDetails>
+            <MetadataTable data={metadata} />
+          </AccordionDetails>
+        </Accordion>
+      )}
       <ButtonGroup>
         <Button text="Back" variant="neutral" onClick={onBack} />
         <Button text="Resize" variant="destructive" onClick={onSubmit} />
@@ -74,13 +97,15 @@ const HPADetails: React.FC<WizardChild> = () => {
   );
 };
 
+// TODO (sperry): possibly show the previous size values
 const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
   const hpa = useDataLayout("hpaData").displayValue() as IClutch.k8s.v1.HPA;
   const resizeData = useDataLayout("resizeData");
+  const formattedNotes = notes?.map(note => <div>{note.text}</div>);
 
   return (
     <WizardStep error={resizeData.error} isLoading={resizeData.isLoading}>
-      <Confirmation action="Resize" />
+      <Confirmation action="Resize">{notes && formattedNotes}</Confirmation>
       <MetadataTable
         data={[
           { name: "Name", value: hpa.name },
@@ -90,12 +115,11 @@ const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
           { name: "New Max Size", value: hpa.sizing.maxReplicas },
         ]}
       />
-      <NotePanel notes={notes} />
     </WizardStep>
   );
 };
 
-const ResizeHPA: React.FC<WorkflowProps> = ({ heading, resolverType, notes = [] }) => {
+const ResizeHPA: React.FC<WorkflowProps> = ({ heading, resolverType, notes }) => {
   const dataLayout = {
     hpaData: {},
     inputData: {},