feat: add orphan support (#3849)

* feat: add resource orphanage

* feat: deny custom state in build for regular users

* Minor protoc improvements

site/src/components/CodeExample/CodeExample.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles, Theme } from "@material-ui/core/styles"
 import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
@@ -9,6 +9,7 @@ export interface CodeExampleProps {
   className?: string
   buttonClassName?: string
   tooltipTitle?: string
+  inline?: boolean
 }
 
 /**
@@ -19,8 +20,9 @@ export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
   className,
   buttonClassName,
   tooltipTitle,
+  inline,
 }) => {
-  const styles = useStyles()
+  const styles = useStyles({ inline: inline })
 
   return (
     <div className={combineClasses([styles.root, className])}>
@@ -34,35 +36,41 @@ export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
   )
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
+interface styleProps {
+  inline?: boolean
+}
+
+const useStyles = makeStyles<Theme, styleProps>((theme) => ({
+  root: (props) => ({
+    display: props.inline ? "inline-flex" : "flex",
     flexDirection: "row",
     alignItems: "center",
-    background: "hsl(223, 27%, 3%)",
-    border: `1px solid ${theme.palette.divider}`,
+    background: props.inline ? "rgb(0 0 0 / 30%)" : "hsl(223, 27%, 3%)",
+    border: props.inline ? undefined : `1px solid ${theme.palette.divider}`,
     color: theme.palette.primary.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 14,
     borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(0.5),
-  },
-  code: {
+    padding: props.inline ? "0px" : theme.spacing(0.5),
+  }),
+  code: (props) => ({
     padding: `
-      ${theme.spacing(0.5)}px
+      ${props.inline ? 0 : theme.spacing(0.5)}px
       ${theme.spacing(0.75)}px
-      ${theme.spacing(0.5)}px
-      ${theme.spacing(2)}px
+      ${props.inline ? 0 : theme.spacing(0.5)}px
+      ${props.inline ? theme.spacing(1) : theme.spacing(2)}px
     `,
     width: "100%",
     display: "flex",
     alignItems: "center",
     wordBreak: "break-all",
-  },
-  button: {
+  }),
+  button: (props) => ({
     border: 0,
-    minWidth: 42,
-    minHeight: 42,
+    minWidth: props.inline ? 30 : 42,
+    minHeight: props.inline ? 30 : 42,
     borderRadius: theme.shape.borderRadius,
-  },
+    padding: props.inline ? theme.spacing(0.4) : undefined,
+    background: "transparent",
+  }),
 }))