From b6c2b724c4b943e60dcb6d01154d00ab4e54c697 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Mon, 23 Sep 2024 10:23:45 +0100
Subject: [PATCH] feat: Environment dependant header chip styling (#3717)

---
 editor.planx.uk/src/components/Header.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index e15200994e..622d368bf7 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -1,11 +1,14 @@
 import Edit from "@mui/icons-material/Edit";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
 import Person from "@mui/icons-material/Person";
 import Visibility from "@mui/icons-material/Visibility";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
 import { grey } from "@mui/material/colors";
 import Container from "@mui/material/Container";
 import IconButton from "@mui/material/IconButton";
@@ -172,6 +175,8 @@ const SkipLink = styled("a")(({ theme }) => ({
 
 const ServiceTitleRoot = styled("span")(({ theme }) => ({
   display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
   flexGrow: 1,
   flexShrink: 1,
   lineHeight: LINE_HEIGHT_BASE,
@@ -428,9 +433,24 @@ const PublicToolbar: React.FC<{
 
 const ServiceTitle: React.FC = () => {
   const flowName = useStore((state) => state.flowName);
+  const route = useCurrentRoute();
+  const path = route.url.pathname.split("/").slice(-1)[0];
 
   return (
     <ServiceTitleRoot data-testid="service-title">
+      {(path === "preview" || path === "draft") && (
+        <Chip
+          label={capitalize(path)}
+          variant="notApplicableTag"
+          size="medium"
+          icon={
+            {
+              preview: <OpenInNewIcon fontSize="small" />,
+              draft: <OpenInNewOffIcon fontSize="small" />,
+            }[path]
+          }
+        />
+      )}
       <Typography component="span" variant="h4">
         {flowName}
       </Typography>