chore: Restructure Editor sidebar

editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx → editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx

@@ -19,8 +19,9 @@ import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import React, { useState } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
-import { formatLastEditDate, Operation } from "..";
-import { useStore } from "../lib/store";
+import { useStore } from "../../lib/store";
+import { Operation } from "types";
+import { formatLastEditDate } from "../../utils";
 
 const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} placement="left-start" classes={{ popper: className }} />

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx → editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx

@@ -31,17 +31,19 @@ import { useAsync } from "react-use";
 import Caret from "ui/icons/Caret";
 import Input from "ui/shared/Input";
 
-import Questions from "../../Preview/Questions";
-import { useStore } from "../lib/store";
+import Questions from "../../../Preview/Questions";
+import { useStore } from "../../lib/store";
 import EditHistory from "./EditHistory";
 
+type SidebarTabs = "PreviewBrowser" | "History";
+
 const Console = styled(Box)(() => ({
   overflow: "auto",
   padding: 20,
   maxHeight: "50%",
 }));
 
-const EmbeddedBrowser = styled(Box)(({ theme }) => ({
+const Root = styled(Box)(({ theme }) => ({
   position: "relative",
   top: "0",
   right: "0",
@@ -158,8 +160,6 @@ interface AlteredNode {
   data?: any;
 }
 
-type SideBarTabs = "PreviewBrowser" | "History";
-
 const AlteredNodeListItem = (props: { node: AlteredNode }) => {
   const { node } = props;
   let text, data;
@@ -359,7 +359,7 @@ const AlteredNodesSummaryContent = (props: {
   );
 };
 
-const PreviewBrowser: React.FC<{
+const Sidebar: React.FC<{
   url: string;
 }> = React.memo((props) => {
   const [showDebugConsole, setDebugConsoleVisibility] = useState(false);
@@ -392,9 +392,9 @@ const PreviewBrowser: React.FC<{
   const [alteredNodes, setAlteredNodes] = useState<AlteredNode[]>();
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   const [summary, setSummary] = useState<string>();
-  const [activeTab, setActiveTab] = useState<SideBarTabs>("PreviewBrowser");
+  const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
 
-  const handleChange = (event: React.SyntheticEvent, newValue: SideBarTabs) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => {
     setActiveTab(newValue);
   };
 
@@ -416,7 +416,7 @@ const PreviewBrowser: React.FC<{
   const teamSlug = window.location.pathname.split("/")[1];
 
   return (
-    <EmbeddedBrowser id="embedded-browser">
+    <Root>
       <Header>
         <Box width="100%" display="flex">
           <input
@@ -657,8 +657,8 @@ const PreviewBrowser: React.FC<{
         </SidebarContainer>
       )}
       {showDebugConsole && <DebugConsole />}
-    </EmbeddedBrowser>
+    </Root>
   );
 });
 
-export default PreviewBrowser;
+export default Sidebar;

editor.planx.uk/src/pages/FlowEditor/index.tsx

@@ -7,34 +7,16 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { OT } from "@planx/graph/types";
-import { formatDistanceToNow } from "date-fns";
 import React, { useRef } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import { Operation } from "types";
 
 import { rootFlowPath } from "../../routes/utils";
 import Flow from "./components/Flow";
-import PreviewBrowser from "./components/PreviewBrowser";
+import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
 import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition";
-
-export interface Operation {
-  id: number;
-  createdAt: string;
-  actor?: {
-    id: number;
-    firstName: string;
-    lastName: string;
-  };
-  data: Array<OT.Op>;
-}
-
-export const formatLastEditDate = (date: string): string => {
-  return formatDistanceToNow(new Date(date), {
-    includeSeconds: true,
-    addSuffix: true,
-  });
-};
+import { formatLastEditMessage } from "./utils";
 
 const EditorContainer = styled(Box)(() => ({
   display: "flex",
@@ -43,18 +25,6 @@ const EditorContainer = styled(Box)(() => ({
   flexGrow: 1,
 }));
 
-const formatLastEditMessage = (
-  date: string,
-  actor?: { firstName: string; lastName: string },
-): string => {
-  if (!actor) {
-    return `Last edited ${formatLastEditDate(date)}`;
-  }
-
-  const name = `${actor.firstName} ${actor.lastName}`;
-  return `Last edited ${formatLastEditDate(date)} by ${name}`;
-};
-
 export const LastEdited = () => {
   const [flowId] = useStore((state) => [state.id]);
 
@@ -133,7 +103,7 @@ export const LastEdited = () => {
 const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   useScrollControlsAndRememberPosition(scrollContainerRef);
-  const showPreview = useStore((state) => state.showPreview);
+  const showSidebar = useStore((state) => state.showSidebar);
 
   return (
     <EditorContainer id="editor-container">
@@ -150,8 +120,8 @@ const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
         </Box>
       </Box>
-      {showPreview && (
-        <PreviewBrowser
+      {showSidebar && (
+        <Sidebar
           url={`${window.location.origin}${rootFlowPath(false)}/published`}
         />
       )}

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -37,7 +37,7 @@ const send = (ops: Array<any>) => {
 
 export interface EditorUIStore {
   flowLayout: FlowLayout;
-  showPreview: boolean;
+  showSidebar: boolean;
   togglePreview: () => void;
   isTestEnvBannerVisible: boolean;
   hideTestEnvBanner: () => void;
@@ -51,10 +51,10 @@ export const editorUIStore: StateCreator<
 > = (set, get) => ({
   flowLayout: FlowLayout.TOP_DOWN,
 
-  showPreview: true,
+  showSidebar: true,
 
   togglePreview: () => {
-    set({ showPreview: !get().showPreview });
+    set({ showSidebar: !get().showSidebar });
   },
 
   isTestEnvBannerVisible: !window.location.href.includes(".uk"),

editor.planx.uk/src/pages/FlowEditor/utils.ts

@@ -0,0 +1,20 @@
+import { formatDistanceToNow } from "date-fns";
+
+export const formatLastEditDate = (date: string): string => {
+  return formatDistanceToNow(new Date(date), {
+    includeSeconds: true,
+    addSuffix: true,
+  });
+};
+
+export const formatLastEditMessage = (
+  date: string,
+  actor?: { firstName: string; lastName: string }
+): string => {
+  if (!actor) {
+    return `Last edited ${formatLastEditDate(date)}`;
+  }
+
+  const name = `${actor.firstName} ${actor.lastName}`;
+  return `Last edited ${formatLastEditDate(date)} by ${name}`;
+};

editor.planx.uk/src/types.ts

@@ -7,6 +7,7 @@ import { useFormik } from "formik";
 
 import { Store } from "./pages/FlowEditor/lib/store/index";
 import { SharedStore } from "./pages/FlowEditor/lib/store/shared";
+import { OT } from "@planx/graph/types";
 
 export type Maybe<T> = T | undefined;
 
@@ -122,3 +123,14 @@ export interface AdminPanelData {
   linkColour?: string;
   actionColour?: string;
 }
+
+export interface Operation {
+  id: number;
+  createdAt: string;
+  actor?: {
+    id: number;
+    firstName: string;
+    lastName: string;
+  };
+  data: Array<OT.Op>;
+}