fix: Flow URLs should re-compute on re-render of Sidebar

theopensystemslab · Sep 17, 2024 · 07d3086 · 07d3086
1 parent 3389060
commit 07d3086
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishFlowButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishFlowButton.tsx
@@ -14,15 +14,16 @@ import React, { useState } from "react";
 import { useAsync } from "react-use";
 import Input from "ui/shared/Input";
 
-import { urls } from "..";
 import {
   AlteredNode,
   AlteredNodesSummaryContent,
   ValidationCheck,
   ValidationChecks,
 } from "./PublishDialog";
 
-export const PublishFlowButton = () => {
+export const PublishFlowButton: React.FC<{ previewURL: string }> = ({
+  previewURL,
+}) => {
   const [
     flowId,
     publishFlow,
@@ -147,7 +148,7 @@ export const PublishFlowButton = () => {
                 <Box pb={2}>
                   <Typography variant="body2">
                     {`Preview these content changes in-service before publishing `}
-                    <Link href={urls.preview} target="_blank">
+                    <Link href={previewURL} target="_blank">
                       {`here (opens in a new tab).`}
                     </Link>
                   </Typography>

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -24,14 +24,6 @@ import StyledTab from "./StyledTab";
 
 type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";
 
-const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
-
-export const urls = {
-  preview: baseUrl + "/preview",
-  draft: baseUrl + "/draft",
-  analytics: baseUrl + "/published" + "?analytics=false",
-};
-
 const Root = styled(Box)(({ theme }) => ({
   position: "relative",
   top: "0",
@@ -111,10 +103,21 @@ const Sidebar: React.FC = React.memo(() => {
 
   const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
 
-  const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => {
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    newValue: SidebarTabs,
+  ) => {
     setActiveTab(newValue);
   };
 
+  const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
+
+  const urls = {
+    preview: baseUrl + "/preview",
+    draft: baseUrl + "/draft",
+    analytics: baseUrl + "/published" + "?analytics=false",
+  };
+
   return (
     <Root>
       <Header>
@@ -166,7 +169,7 @@ const Sidebar: React.FC = React.memo(() => {
             </Tooltip>
           )}
         </Box>
-        <PublishFlowButton />
+        <PublishFlowButton previewURL={urls.preview} />
       </Header>
       <TabList>
         <Tabs onChange={handleChange} value={activeTab} aria-label="">