refactor: Move refresh button to browser preview (#3573)

theopensystemslab · Aug 27, 2024 · 68a7ca9 · 68a7ca9
1 parent 8ea145a
commit 68a7ca9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 25 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -2,7 +2,6 @@ import LanguageIcon from "@mui/icons-material/Language";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -23,6 +22,7 @@ import { formatLastPublishMessage } from "pages/FlowEditor/utils";
 import React, { useState } from "react";
 import { useAsync } from "react-use";
 import Permission from "ui/editor/Permission";
+import Reset from "ui/icons/Reset";
 import Input from "ui/shared/Input";
 
 import Questions from "../../../Preview/Questions";
@@ -64,6 +64,7 @@ const SidebarContainer = styled(Box)(() => ({
   overflow: "auto",
   flex: 1,
   background: "#fff",
+  position: "relative",
 }));
 
 const Header = styled("header")(({ theme }) => ({
@@ -83,6 +84,15 @@ const Header = styled("header")(({ theme }) => ({
   },
 }));
 
+const ResetToggle = styled(Button)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: theme.spacing(3),
+  padding: theme.spacing(1, 1, 1, 0),
+  textDecorationStyle: "solid",
+  color: theme.palette.text.primary,
+}));
+
 const TabList = styled(Box)(({ theme }) => ({
   position: "relative",
   // Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides
@@ -175,7 +185,6 @@ const Sidebar: React.FC<{
     state.validateAndDiffFlow,
     state.isFlowPublished,
   ]);
-  const [key, setKey] = useState<boolean>(false);
   const [lastPublishedTitle, setLastPublishedTitle] = useState<string>(
     "This flow is not published yet",
   );
@@ -261,15 +270,6 @@ const Sidebar: React.FC<{
             value={props.url.replace("/published", "/preview")}
           />
 
-          <Tooltip arrow title="Refresh preview">
-            <RefreshIcon
-              onClick={() => {
-                resetPreview();
-                setKey((a) => !a);
-              }}
-            />
-          </Tooltip>
-
           <Tooltip arrow title="Toggle debug console">
             <MenuOpenIcon
               onClick={() => setDebugConsoleVisibility(!showDebugConsole)}
@@ -442,7 +442,16 @@ const Sidebar: React.FC<{
       </TabList>
       {activeTab === "PreviewBrowser" && (
         <SidebarContainer>
-          <Questions previewEnvironment="editor" key={String(key)} />
+          <ResetToggle
+            variant="link"
+            onClick={() => {
+              resetPreview();
+            }}
+          >
+            <Reset fontSize="small" />
+            Restart
+          </ResetToggle>
+          <Questions previewEnvironment="editor" />
         </SidebarContainer>
       )}
       {activeTab === "History" && (

diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx
@@ -1,6 +1,6 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import Box from "@mui/material/Box";
-import ButtonBase from "@mui/material/ButtonBase";
+import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
@@ -23,23 +23,12 @@ const BackBar = styled(Box)(() => ({
   zIndex: "1000",
 }));
 
-export const BackButton = styled(ButtonBase)(({ theme, hidden }) => ({
+export const BackButton = styled(Button)(({ theme, hidden }) => ({
   visibility: "visible",
   pointerEvents: "auto",
-  display: "flex",
-  cursor: "pointer",
   userSelect: "none",
   alignSelf: "start",
-  fontSize: "inherit",
-  background: "transparent",
-  border: "none",
-  columnGap: theme.spacing(1),
   padding: theme.spacing(1, 1, 1, 0),
-  minHeight: "48px",
-  textDecoration: "underline",
-  "&:hover": {
-    textDecorationThickness: "3px",
-  },
   ...(hidden && {
     visibility: "hidden",
     pointerEvents: "none",
@@ -180,6 +169,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
       <BackBar hidden={!showBackBar}>
         <Container maxWidth={false}>
           <BackButton
+            variant="link"
             hidden={!showBackButton}
             data-testid="backButton"
             onClick={() => goBack()}

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -324,6 +324,31 @@ const getThemeOptions = ({
               },
             },
           },
+          {
+            props: { variant: "link" },
+            style: {
+              color: palette.text.primary,
+              boxShadow: "none",
+              padding: 0,
+              width: "auto",
+              fontWeight: "initial",
+              fontSize: "inherit",
+              textDecoration: "underline",
+              textUnderlineOffset: "0.1em",
+              gap: "10px",
+              minHeight: "48px",
+              "&:hover": {
+                textDecoration: "underline",
+                textDecorationThickness: "3px",
+                background: "transparent",
+                boxShadow: "none",
+              },
+              "&:focus": {
+                borderColor: palette.text.primary,
+                borderStyle: "solid",
+              },
+            },
+          },
         ],
         defaultProps: {
           // Removes default box shadow on buttons

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -76,6 +76,7 @@ declare module "@mui/material/styles/createPalette" {
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     help: true;
+    link: true;
   }
 
   interface ButtonPropsColorOverrides {