From 511fab35fff7f5bd7dce71d287a89c081d359f4d Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Sat, 9 Jan 2021 21:14:23 +1100
Subject: [PATCH] add lock icon to FieldWrapper

---
 www/src/components/SideDrawer/Form/FieldWrapper.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/www/src/components/SideDrawer/Form/FieldWrapper.tsx b/www/src/components/SideDrawer/Form/FieldWrapper.tsx
index 763312e3..562763d0 100644
--- a/www/src/components/SideDrawer/Form/FieldWrapper.tsx
+++ b/www/src/components/SideDrawer/Form/FieldWrapper.tsx
@@ -9,6 +9,7 @@ import {
 } from "@material-ui/core";
 import DebugIcon from "@material-ui/icons/BugReportOutlined";
 import LaunchIcon from "@material-ui/icons/Launch";
+import LockIcon from "@material-ui/icons/Lock";
 
 import ErrorBoundary from "components/ErrorBoundary";
 import FieldSkeleton from "./FieldSkeleton";
@@ -20,10 +21,10 @@ const useStyles = makeStyles((theme) =>
     header: {
       marginBottom: theme.spacing(1),
       color: theme.palette.text.disabled,
+      "& svg": { display: "block" },
     },
     iconContainer: {
       marginRight: theme.spacing(0.5),
-      "& svg": { display: "block" },
     },
 
     disabledText: {
@@ -43,6 +44,7 @@ export interface IFieldWrapperProps {
   name?: string;
   label?: React.ReactNode;
   debugText?: React.ReactNode;
+  disabled?: boolean;
 }
 
 export default function FieldWrapper({
@@ -51,6 +53,7 @@ export default function FieldWrapper({
   name,
   label,
   debugText,
+  disabled,
 }: IFieldWrapperProps) {
   const classes = useStyles();
 
@@ -70,6 +73,11 @@ export default function FieldWrapper({
         <Grid item xs>
           <Typography variant="caption">{label}</Typography>
         </Grid>
+        {disabled && (
+          <Grid item>
+            <LockIcon />
+          </Grid>
+        )}
       </Grid>
 
       <ErrorBoundary fullScreen={false} basic>