feat(web): "New ADR" button

thomvaill · Dec 10, 2020 · 8bbb4d1 · 8bbb4d1
1 parent 77955d2
commit 8bbb4d1
Showing 1 changed file with 98 additions and 11 deletions.
diff --git a/packages/web/src/layouts/AdrBrowserLayout/components/AdrMenu/AdrMenu.tsx b/packages/web/src/layouts/AdrBrowserLayout/components/AdrMenu/AdrMenu.tsx
@@ -1,6 +1,17 @@
 import React from "react";
 import moment from "moment";
-import { Typography, Link as MuiLink } from "@material-ui/core";
+import {
+  Typography,
+  Link as MuiLink,
+  Fab,
+  Tooltip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button
+} from "@material-ui/core";
 import {
   Timeline,
   TimelineConnector,
@@ -13,21 +24,18 @@ import {
 import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
 import {
   EmojiFlags as EmojiFlagsIcon,
-  CropFree as CropFreeIcon
+  CropFree as CropFreeIcon,
+  Add as AddIcon
 } from "@material-ui/icons";
 import Link from "next/link";
 import clsx from "clsx";
+import { Log4brainsMode, Log4brainsModeContext } from "../../../../contexts";
 import { AdrStatusChip } from "../../../../components";
 import { AdrLight } from "../../../../types";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    emptyLabel: {
-      color: theme.palette.grey[500],
-      marginTop: theme.spacing(3),
-      marginLeft: "6ch"
-    },
     timeline: {
       padding: 0
     },
@@ -57,9 +65,16 @@ const useStyles = makeStyles((theme: Theme) =>
         }
       }
     },
+    timelineOppositeContentRootAdd: {
+      flex: "0 0 calc(12ch - 11.5px)"
+    },
     timelineOppositeContentRoot: {
       flex: "0 0 12ch"
     },
+    newAdrFab: {
+      width: 35,
+      height: 35
+    },
     date: {
       fontSize: "0.8rem",
       color: theme.palette.grey[500]
@@ -114,6 +129,9 @@ type Props = {
 export function AdrMenu({ adrs, currentAdrSlug, className, ...props }: Props) {
   const classes = useStyles();
 
+  const [newAdrOpen, setNewAdrOpen] = React.useState(false);
+  const mode = React.useContext(Log4brainsModeContext);
+
   if (adrs === undefined) {
     return null; // Because inside a <Grow>
   }
@@ -122,13 +140,82 @@ export function AdrMenu({ adrs, currentAdrSlug, className, ...props }: Props) {
 
   return (
     <div className={clsx(className, classes.root)} {...props}>
-      {adrs.length === 0 && (
-        <Typography variant="body2" className={classes.emptyLabel}>
-          No ADR found :-(
-        </Typography>
+      {mode === Log4brainsMode.preview && (
+        <Dialog
+          open={newAdrOpen}
+          onClose={() => setNewAdrOpen(false)}
+          aria-labelledby="newadr-dialog-title"
+          aria-describedby="newadr-dialog-description"
+        >
+          <DialogTitle id="newadr-dialog-title">Create a new ADR</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="newadr-dialog-description">
+              <Typography>
+                Run the following command in your terminal:
+              </Typography>
+              <pre>
+                <code className="hljs bash">
+                  npm run adr -- new{"\n"}# OR{"\n"}yarn adr new
+                </code>
+              </pre>
+              <Typography>
+                This will create a new ADR from your template and will open it
+                in your editor.
+                <br />
+                Just press <code>Ctrl+S</code> to watch your changes here,
+                thanks to Hot Reload.
+              </Typography>
+              <Typography variant="body2" style={{ marginTop: 20 }}>
+                Would you have preferred to create a new ADR directly from here?
+                <br />
+                Leave a 👍 on{" "}
+                <MuiLink
+                  href="https://github.com/thomvaill/log4brains/issues/9"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  this GitHub issue
+                </MuiLink>{" "}
+                then!
+              </Typography>
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => setNewAdrOpen(false)}
+              color="primary"
+              autoFocus
+            >
+              OK
+            </Button>
+          </DialogActions>
+        </Dialog>
       )}
 
       <Timeline className={classes.timeline}>
+        {mode === Log4brainsMode.preview && (
+          <TimelineItem className={classes.timelineItem}>
+            <TimelineOppositeContent
+              classes={{ root: classes.timelineOppositeContentRootAdd }}
+            />
+            <TimelineSeparator>
+              <Tooltip title="Create a new ADR">
+                <Fab
+                  size="small"
+                  color="primary"
+                  aria-label="create a new ADR"
+                  className={classes.newAdrFab}
+                  onClick={() => setNewAdrOpen(true)}
+                >
+                  <AddIcon />
+                </Fab>
+              </Tooltip>
+              <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent />
+          </TimelineItem>
+        )}
+
         {adrs.map((adr) => {
           const currentDateString = moment(
             adr.publicationDate || adr.creationDate