ui v2: restyle kinesis workflow (#801)

lyft · Dec 17, 2020 · 2c7c978 · 2c7c978
1 parent db0e6af
commit 2c7c978
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 50 deletions.
diff --git a/frontend/packages/app/src/clutch.config.js b/frontend/packages/app/src/clutch.config.js
@@ -58,4 +58,11 @@ module.exports = {
       },
     },
   },
+  "@clutch-sh/kinesis": {
+    updateShardCount: {
+      componentProps: {
+        resolverType: "clutch.aws.kinesis.v1.Stream",
+      },
+    },
+  },
 };
diff --git a/frontend/packages/core/src/Feedback/note.tsx b/frontend/packages/core/src/Feedback/note.tsx
@@ -1,16 +1,12 @@
 import React from "react";
+import styled from "@emotion/styled";
 import { Grid, Paper } from "@material-ui/core";
 import type { Color } from "@material-ui/lab/Alert";
 import MuiAlert from "@material-ui/lab/Alert";
-import styled from "styled-components";
 
-const Container = styled(Paper)`
-  margin: 1%;
-`;
-
-const Alert = styled(MuiAlert)`
-  align-items: center;
-`;
+const Alert = styled(MuiAlert)({
+  alignItems: "center",
+});
 
 export interface NoteProps {
   severity?: Color;
@@ -27,13 +23,13 @@ export interface NotePanelProps {
 
 const Note: React.FC<NoteProps> = ({ severity = "info", children }) => {
   return (
-    <Container elevation={0}>
+    <Paper elevation={0}>
       <Alert severity={severity}>
         <Grid container justify="center" alignItems="center">
           {children}
         </Grid>
       </Alert>
-    </Container>
+    </Paper>
   );
 };
 

diff --git a/frontend/packages/wizard/src/step.tsx b/frontend/packages/wizard/src/step.tsx
@@ -6,7 +6,7 @@ import { Grid as MuiGrid } from "@material-ui/core";
 const Grid = styled(MuiGrid)({
   width: "100%",
   "> *": {
-    padding: "8px",
+    padding: "8px 0",
   },
 });
 

diff --git a/frontend/workflows/kinesis/package.json b/frontend/workflows/kinesis/package.json
@@ -26,6 +26,7 @@
     "@clutch-sh/core": "^1.0.0-beta",
     "@clutch-sh/data-layout": "^1.0.0-beta",
     "@clutch-sh/wizard": "^1.0.0-beta",
+    "@emotion/styled": "^11.0.0",
     "@material-ui/core": "^4.11.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",

diff --git a/frontend/workflows/kinesis/src/update-shard-count.tsx b/frontend/workflows/kinesis/src/update-shard-count.tsx
@@ -5,18 +5,31 @@ import {
   ButtonGroup,
   client,
   Confirmation,
+  MetadataTable,
   NotePanel,
   Resolver,
+  Select,
   TextField,
   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 { Select } from "@material-ui/core";
+import styled from "@emotion/styled";
+import { Grid } from "@material-ui/core";
 
 import type { ResolverChild, WorkflowProps } from "./index";
 
+const Form = styled.form({
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  justifyItems: "space-evenly",
+  "> *": {
+    padding: "8px 0",
+  },
+});
+
 const StreamIdentifier: React.FC<ResolverChild> = ({ resolverType }) => {
   const { onSubmit } = useWizardContext();
   const resolvedResourceData = useDataLayout("resourceData");
@@ -37,10 +50,8 @@ const StreamDetails: React.FC<WizardChild> = () => {
   const { onSubmit, onBack } = useWizardContext();
   const resourceData = useDataLayout("resourceData");
   const stream = resourceData.displayValue();
-  const [targetShardCount, setTargetShardCount] = React.useState("");
-  const handleTargetShardCountChange = e => {
-    setTargetShardCount(e.target.value);
-    resourceData.updateData("targetShardCount", e.target.value);
+  const handleTargetShardCountChange = (value: string) => {
+    resourceData.updateData("targetShardCount", value);
   };
 
   const values = [
@@ -52,40 +63,36 @@ const StreamDetails: React.FC<WizardChild> = () => {
     Math.ceil(stream.currentShardCount * 1.75),
     Math.ceil(stream.currentShardCount * 2),
   ];
-
+  const options = values.map(value => {
+    return { label: value.toString() };
+  });
   return (
     <WizardStep error={resourceData.error} isLoading={resourceData.isLoading}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <TextField label="StreamName" name="streamName" value={stream.streamName} />
-        <TextField label="Region" name="region" value={stream.region} />
-        <TextField
-          label="Current Shard Count"
-          name="currentShardCount"
-          value={stream.currentShardCount}
-        />
-        Select Target Shard Count:
-        <Select
-          labelId="TargetShardCount"
-          id="targetShardCount"
-          value={targetShardCount}
-          onChange={handleTargetShardCountChange}
-          defaultValue={values[2]}
-          displayEmpty
-        >
-          <option value={values[0]}>{values[0]}</option>
-          <option value={values[1]}>{values[1]}</option>
-          <option value={values[2]}>{values[2]}</option>
-          <option value={values[3]}>{values[3]}</option>
-          <option value={values[4]}>{values[4]}</option>
-          <option value={values[5]}>{values[5]}</option>
-          <option value={values[6]}>{values[6]}</option>
-        </Select>
-      </form>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <TextField readOnly label="StreamName" name="streamName" value={stream.streamName} />
+        <TextField readOnly label="Region" name="region" value={stream.region} />
+        <Grid container alignItems="stretch" wrap="nowrap">
+          <Grid item style={{ flexBasis: "50%", paddingRight: "8px" }}>
+            <TextField
+              readOnly
+              label="Current Shard Count"
+              name="currentShardCount"
+              value={stream.currentShardCount}
+              disabled
+            />
+          </Grid>
+          <Grid item style={{ flexBasis: "50%", paddingLeft: "8px" }}>
+            <Select
+              label="TargetShardCount"
+              name="targetShardCount"
+              onChange={handleTargetShardCountChange}
+              options={options}
+              defaultOption={2}
+            />
+          </Grid>
+        </Grid>
+      </Form>
 
-      <ButtonGroup>
-        <Button text="Back" onClick={onBack} />
-        <Button text="Update" variant="destructive" onClick={onSubmit} />
-      </ButtonGroup>
       <NotePanel
         notes={[
           {
@@ -95,16 +102,28 @@ const StreamDetails: React.FC<WizardChild> = () => {
           },
         ]}
       />
+      <ButtonGroup>
+        <Button text="Back" onClick={onBack} />
+        <Button text="Update" variant="destructive" onClick={onSubmit} />
+      </ButtonGroup>
     </WizardStep>
   );
 };
 
 const Confirm: React.FC<WizardChild> = () => {
-  const streamData = useDataLayout("streamData");
-
+  const updateStreamData = useDataLayout("streamData");
+  const streamData = useDataLayout("resourceData").value;
   return (
-    <WizardStep error={streamData.error} isLoading={streamData.isLoading}>
+    <WizardStep error={updateStreamData.error} isLoading={updateStreamData.isLoading}>
       <Confirmation action="Update" />
+      <MetadataTable
+        data={[
+          { name: "Stream Name", value: streamData.streamName },
+          { name: "Region", value: streamData.region },
+          { name: "Current Shard Count", value: streamData.currentShardCount },
+          { name: "Target Shard Count", value: streamData.targetShardCount },
+        ]}
+      />
     </WizardStep>
   );
 };