frontend: Clutch redesign (#876)

https://github.com/lyft/clutch/wiki/Frontend-V2

Co-authored-by: Derek Schaller <d_a_schaller@yahoo.com>
Co-authored-by: Daniel Hochman <danielhochman@users.noreply.github.com>
Co-authored-by: Derek <dschaller@users.noreply.github.com>

README.md

@@ -35,7 +35,7 @@
 </p>
 
 <div align="center">
-  <img src="https://user-images.githubusercontent.com/1004789/86184218-8bde4480-bae8-11ea-84cc-f2e8e73fdde8.gif" width="75%" />
+  <img src="https://user-images.githubusercontent.com/39421794/104223887-39c09900-5412-11eb-9791-af10afdc6bbb.gif" width="75%" />
 </div>
 
 ## Key Features

docs/about/lyft-case-study.md

@@ -36,7 +36,7 @@ In the event that the cluster required a resize, developers had three main optio
 
 Lyft is all-in on infrastructure-as-code. However, resizing a cluster during an incident via GitOps is a painful experience.
 
-In our implementation of GitOps, applying orchestration changes requires a full deploy of a service to minimize the possibility of configuration drift. It can take 10 minutes or more for CI to run tests, launch a deploy pipeline, and enact the latest declaration. In the event that the first value was not enough, the engineer would have to repeat the process. This would drastically increase the time it takes to mitigate the issue. 
+In our implementation of GitOps, applying orchestration changes requires a full deploy of a service to minimize the possibility of configuration drift. It can take 10 minutes or more for CI to run tests, launch a deploy pipeline, and enact the latest declaration. In the event that the first value was not enough, the engineer would have to repeat the process. This would drastically increase the time it takes to mitigate the issue.
 
 In addition, the `desired` size of a cluster is not generally controlled by orchestration code. It's a dynamic value that changes in response to average CPU usage. Committing this value would reset it on every deploy regardless of current conditions. For this reason developers would simply use minimum to enforce the desired size during an incident. Sometimes they would forget to revert their change after the incident was over costing thousands of dollars in unnecessary cloud resource usage.
 
@@ -49,18 +49,18 @@ Developers often avoided the CLI due to the friction of performing 2FA flows on
 $ aws-okta exec elevated-role -- aws autoscaling update-auto-scaling-group \
  --auto-scaling-group-name my-auto-scaling-group \
  --min-size 1 --max-size 3
-$ 
+$
 ```
 
 #### UI
-The console presents a large amount of functionality and information needed to perform a task which slows down operations and increases cognitive load. 
+The console presents a large amount of functionality and information needed to perform a task which slows down operations and increases cognitive load.
 
 {{/* TODO: this is too fuzzy, may be possible to redact information rather than pixelizing the entire gif */}}
 <img style={ {border: "2px solid gray"} } alt="Resizing an ASG in the AWS console" src={require('@docusaurus/useBaseUrl').default('img/docs/aws-resize.gif')} width="50%" />
 
 ### Mitigation (after)
 
-<img style={ {border: "2px solid gray"} } alt="Resizing an ASG in Clutch" src={require('@docusaurus/useBaseUrl').default('img/docs/aws-resize-clutch.gif')} width="65%" />
+<img style={ {border: "2px solid gray"} } alt="Resizing an ASG in Clutch" src={require('@docusaurus/useBaseUrl').default('https://user-images.githubusercontent.com/39421794/104223887-39c09900-5412-11eb-9791-af10afdc6bbb.gif')} width="65%" />
 
 #### Preventing Accidents
 Next, we added rules to validate actions and prevent accidents that had occurred before with legacy tools.

docs/getting-started/docker.md

@@ -40,7 +40,7 @@ If desired, use a custom configuration with the Docker image by mapping it into
 ```bash
 docker run --rm -p 8080:8080 -it lyft/clutch:latest
 ```
- 
+
 </TabItem>
 <TabItem value="custom">
 
@@ -49,7 +49,7 @@ docker run --rm -p 8080:8080 \
 -v /host/absolute/path/to/config.yaml:/clutch-config.yaml:ro \
 -it lyft/clutch:latest
 ```
- 
+
 </TabItem>
 <TabItem value="env">
 
@@ -59,7 +59,7 @@ docker run --rm -p 8080:8080 \
 -e AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY \
 -it lyft/clutch:latest
 ```
- 
+
 </TabItem>
 </Tabs>
 
@@ -75,7 +75,7 @@ For more information on configuring Clutch, see the [Configuration Reference](/d
 ### Accessing Clutch
 :tada: Clutch should now be accessible from `localhost:8080` in the browser.
 
-<img style={ {border: "1px solid black"} } alt="Clutch Landing Page Screenshot" src={useBaseUrl('img/docs/screenshot-landing.png')} width="50%" />
+<img alt="Clutch Landing Page Screenshot" src={useBaseUrl('img/docs/landing-page.png')} width="50%" />
 
 ## Building the Container From Scratch
 

docs/getting-started/local-build.md

@@ -76,7 +76,7 @@ Launch Clutch with back-end configuration [clutch-config.yaml](https://github.co
 #### 4. Use
 :tada: Clutch should now be accessible from `localhost:8080` in the browser.
 
-<img style={ {border: "1px solid black"} } alt="Clutch Landing Page Screenshot" src={useBaseUrl('img/docs/screenshot-landing.png')} width="50%" />
+<img alt="Clutch Landing Page Screenshot" src={useBaseUrl('img/docs/landing-page.png')} width="50%" />
 
 :::info
 Clutch may have external dependencies, to run Clutch with mocked dependencies see [Mock Gateway](/docs/getting-started/mock-gateway).

frontend/.storybook/main.js

@@ -2,9 +2,17 @@ module.exports = {
   stories: [
     "../packages/**/*.stories.@(tsx|jsx)",
   ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
+  },
   addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-links",
   ],
 }

frontend/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />

frontend/.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.22.4.js"
+yarn-path ".yarn/releases/yarn-1.22.5.js"

frontend/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clutch-sh/api",
-  "version": "0.0.0-beta",
+  "version": "1.0.0-beta",
   "description": "Clutch API",
   "license": "Apache-2.0",
   "author": "clutch@lyft.com",

frontend/package.json

@@ -62,13 +62,13 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@material-ui/core": "^4.11.0",
-    "@storybook/addon-actions": "^6.0.21",
-    "@storybook/addon-essentials": "^6.0.21",
-    "@storybook/addon-links": "^6.0.21",
-    "@storybook/node-logger": "^6.0.21",
+    "@storybook/addon-actions": "^6.1.0",
+    "@storybook/addon-essentials": "^6.1.0",
+    "@storybook/addon-links": "^6.1.1",
+    "@storybook/node-logger": "^6.1.1",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.0.21",
-    "@storybook/theming": "^6.0.22",
+    "@storybook/react": "^6.1.0",
+    "@storybook/theming": "^6.1.1",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
     "babel-loader": "^8.1.0",

frontend/packages/app/cypress/integration/navigation_spec.js

@@ -1,12 +1,10 @@
-const MENU_BUTTON = "menuBtn";
 const DRAWER = "drawer";
 const WORKFLOW_GROUP = "workflowGroup";
-const TOGGLE = "toggle";
+const WORKFLOW_GROUP_ITEM = "workflowGroupItem";
 
 describe("Navigation drawer", () => {
   before(() => {
     cy.visit("localhost:3000");
-    cy.element(MENU_BUTTON).click();
     cy.element(DRAWER).should("be.visible");
   });
 
@@ -18,62 +16,31 @@ describe("Navigation drawer", () => {
 
   it("displays and hides routes", () => {
     cy.element(WORKFLOW_GROUP).each((_, idx) => {
-      cy.element(WORKFLOW_GROUP).eq(idx).descendent(TOGGLE).children().first().click();
-      cy.element(WORKFLOW_GROUP)
-        .eq(idx)
-        .find("a")
-        .each(link => {
-          cy.wrap(link).should("have.attr", "href");
-        });
-      cy.element(WORKFLOW_GROUP).eq(idx).descendent(TOGGLE).children().first().click();
-      cy.element(WORKFLOW_GROUP).eq(idx).find("a").should("not.be.visible");
-    });
-  });
-
-  describe("routes to homepage", () => {
-    it("via nav icon", () => {
-      cy.element(DRAWER).element("logo").click();
-      cy.url().should("equal", "http://localhost:3000/");
-    });
-
-    it("via nav title", () => {
-      cy.element(MENU_BUTTON).click();
-      cy.element(DRAWER).element("title").click();
-      cy.url().should("equal", "http://localhost:3000/");
+      cy.element(WORKFLOW_GROUP).eq(idx).click();
+      cy.element(WORKFLOW_GROUP_ITEM).each(link => {
+        cy.wrap(link).should("have.attr", "href");
+      });
+      cy.element(WORKFLOW_GROUP).eq(idx).click();
+      cy.element(WORKFLOW_GROUP).eq(idx).descendent(WORKFLOW_GROUP_ITEM).should("not.be.visible");
     });
   });
 
   describe("routes to workflows", () => {
-    const groupItemId = "workflowGroupItem";
-    beforeEach(() => {
-      cy.element(MENU_BUTTON).click();
-    });
-
     it("can route correctly", () => {
       return cy.element(WORKFLOW_GROUP).each((_, groupIdx) => {
-        cy.element(WORKFLOW_GROUP).eq(groupIdx).descendent(TOGGLE).children().first().click();
-        cy.element(WORKFLOW_GROUP)
-          .eq(groupIdx)
-          .descendent(groupItemId)
-          .each((__, itemIdx) => {
-            cy.element(WORKFLOW_GROUP)
-              .eq(groupIdx)
-              .descendent(groupItemId)
-              .eq(itemIdx)
-              .should("be.visible");
-            cy.element(WORKFLOW_GROUP)
-              .eq(groupIdx)
-              .descendent(groupItemId)
-              .eq(itemIdx)
-              .should("have.attr", "href")
-              .then(href => {
-                cy.element(WORKFLOW_GROUP).eq(groupIdx).descendent(groupItemId).eq(itemIdx).click();
-                cy.url().should("include", href);
-                cy.element(MENU_BUTTON).click();
-              });
-
-            // TODO: validate header of workflow here when it's landed
-          });
+        cy.element(WORKFLOW_GROUP).eq(groupIdx).click();
+        cy.element(WORKFLOW_GROUP_ITEM).each((__, linkIdx) => {
+          cy.element(WORKFLOW_GROUP_ITEM).eq(linkIdx).should("be.visible");
+          cy.element(WORKFLOW_GROUP_ITEM)
+            .eq(linkIdx)
+            .should("have.attr", "href")
+            .then(href => {
+              cy.element(WORKFLOW_GROUP_ITEM).eq(linkIdx).click();
+              cy.url().should("include", href);
+            });
+          cy.element(WORKFLOW_GROUP).eq(groupIdx).click();
+          // TODO: validate header of workflow here when it's landed
+        });
       });
     });
   });

frontend/packages/app/package.json

@@ -18,12 +18,12 @@
     "test:e2e": "cypress run"
   },
   "dependencies": {
-    "@clutch-sh/core": "^0.0.0-beta",
+    "@clutch-sh/core": "^1.0.0-beta",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@clutch-sh/tools": "^0.0.0-beta"
+    "@clutch-sh/tools": "^1.0.0-beta"
   },
   "proxy": "http://localhost:8080"
 }

frontend/packages/app/public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/icon.svg" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

frontend/packages/app/src/clutch.config.js

@@ -4,6 +4,12 @@ module.exports = {
       trending: true,
       componentProps: {
         resolverType: "clutch.aws.ec2.v1.Instance",
+        notes: [
+          {
+            severity: "info",
+            text: "The instance may take several minutes to shut down.",
+          },
+        ],
       },
     },
     rebootInstance: {
@@ -52,4 +58,11 @@ module.exports = {
       },
     },
   },
+  "@clutch-sh/kinesis": {
+    updateShardCount: {
+      componentProps: {
+        resolverType: "clutch.aws.kinesis.v1.Stream",
+      },
+    },
+  },
 };

frontend/packages/app/src/index.css

@@ -1,3 +1,20 @@
-#root {
-  height: 100%; 
+html, body, #root, #App {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
+
+#App {
+  background-color: #f9fafe;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover, 
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  font-size: 16px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: #0D1030 !important;
+}

frontend/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clutch-sh/core",
-  "version": "0.0.0-beta",
+  "version": "1.0.0-beta",
   "description": "Clutch Core Components",
   "homepage": "https://clutch.sh/docs/development/frontend#clutch-shcore",
   "license": "Apache-2.0",
@@ -25,8 +25,10 @@
     "test:watch": "yarn run test --watch"
   },
   "dependencies": {
-    "@clutch-sh/api": "^0.0.0-beta",
+    "@clutch-sh/api": "^1.0.0-beta",
     "@date-io/core": "^1.3.6",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@hookform/devtools": "^2.2.1",
     "@hookform/resolvers": "^1.0.0",
     "@material-ui/core": "^4.11.0",
@@ -50,6 +52,6 @@
     "yup": "^0.31.0"
   },
   "devDependencies": {
-    "@clutch-sh/tools": "^0.0.0-beta"
+    "@clutch-sh/tools": "^1.0.0-beta"
   }
 }