feat: Shareable Public Link in Service Settings

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx

@@ -1,16 +1,20 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import FormControlLabel, {
   formControlLabelClasses,
 } from "@mui/material/FormControlLabel";
+import Link from "@mui/material/Link";
 import Snackbar from "@mui/material/Snackbar";
 import Switch, { SwitchProps } from "@mui/material/Switch";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React, { useState } from "react";
+import { rootFlowPath } from "routes/utils";
 import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 import InputLegend from "ui/editor/InputLegend";
@@ -24,6 +28,127 @@ import InputRowItem from "ui/shared/InputRowItem";
 import type { FlowSettings } from "../../../../types";
 import { useStore } from "../../lib/store";
 
+const CopyButton = (props: { link: string; isActive: boolean }) => {
+  const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy");
+  return (
+    <Tooltip title={copyMessage}>
+      <Button
+        disabled={!props.isActive}
+        variant="help"
+        onMouseLeave={() => {
+          setTimeout(() => {
+            setCopyMessage("copy");
+          }, 500);
+        }}
+        onClick={() => {
+          setCopyMessage("copied");
+          navigator.clipboard.writeText(props.link);
+        }}
+        sx={{ marginLeft: 0.5 }}
+      >
+        <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
+        <Typography ml={0.5} variant="body3">
+          {copyMessage}
+        </Typography>
+      </Button>
+    </Tooltip>
+  );
+};
+
+const TitledLink: React.FC<{
+  link: string;
+  isActive: boolean;
+  helpText: string | undefined;
+}> = ({ link, isActive, helpText }) => {
+  return (
+    <Box paddingBottom={0.5} mt={1}>
+      <Typography mb={0.5} variant="h4">
+        Your public link
+        <CopyButton isActive={isActive} link={link} />
+      </Typography>
+      <SettingsDescription>
+        <Typography variant="body2">{helpText}</Typography>
+      </SettingsDescription>
+      {isActive ? (
+        <Link
+          variant="body2"
+          href={link}
+          target={"_blank"}
+          rel={"noopener noreferrer"}
+        >
+          {link}
+        </Link>
+      ) : (
+        <Typography
+          style={{ color: "GrayText", textDecoration: "underline" }}
+          variant="body2"
+        >
+          {link}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+const PublicLink: React.FC<{
+  isFlowPublished: boolean;
+  status: FlowStatus;
+  subdomain: string;
+  publishedLink: string;
+}> = ({ isFlowPublished, status, subdomain, publishedLink }) => {
+  const isFlowPublic = isFlowPublished && status === "online";
+  const hasSubdomain = Boolean(subdomain);
+
+  const publicLinkHelpText = () => {
+    const isFlowOnline = status === "online";
+    switch (true) {
+      case isFlowPublished && isFlowOnline:
+        return undefined;
+      case !isFlowPublished && isFlowOnline:
+        return "Publish your flow to activate the public link.";
+      case isFlowPublished && !isFlowOnline:
+        return "Switch your flow to 'online' to activate the public link.";
+      case !isFlowPublished && !isFlowOnline:
+        return "Publish your flow and switch it to 'online' to activate the public link.";
+    }
+  };
+
+  switch (true) {
+    case isFlowPublic && hasSubdomain:
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={true}
+          link={subdomain}
+        />
+      );
+    case isFlowPublic && !hasSubdomain:
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={true}
+          link={publishedLink}
+        />
+      );
+    case !isFlowPublic && hasSubdomain:
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={false}
+          link={subdomain}
+        />
+      );
+    case !isFlowPublic && !hasSubdomain:
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={false}
+          link={publishedLink}
+        />
+      );
+  }
+};
+
 const TextInput: React.FC<{
   title: string;
   richText?: boolean;
@@ -81,19 +206,29 @@ const TextInput: React.FC<{
 };
 
 const ServiceSettings: React.FC = () => {
-  const [flowSettings, updateFlowSettings, flowStatus, updateFlowStatus] =
-    useStore((state) => [
-      state.flowSettings,
-      state.updateFlowSettings,
-      state.flowStatus,
-      state.updateFlowStatus,
-    ]);
+  const [
+    flowSettings,
+    updateFlowSettings,
+    flowStatus,
+    updateFlowStatus,
+    flowSlug,
+    teamDomain,
+    isFlowPublished,
+  ] = useStore((state) => [
+    state.flowSettings,
+    state.updateFlowSettings,
+    state.flowStatus,
+    state.updateFlowStatus,
+    state.flowSlug,
+    state.teamDomain,
+    state.isFlowPublished,
+  ]);
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
 
   const handleClose = (
     _event?: React.SyntheticEvent | Event,
-    reason?: string,
+    reason?: string
   ) => {
     if (reason === "clickaway") {
       return;
@@ -143,6 +278,12 @@ const ServiceSettings: React.FC = () => {
     },
   });
 
+  const publishedLink = `${window.location.origin}${rootFlowPath(
+    false
+  )}/published`;
+
+  const subdomainLink = teamDomain && `https://${teamDomain}/${flowSlug}`;
+
   return (
     <Container maxWidth="formWrap">
       <Box component="form" onSubmit={elementsForm.handleSubmit} mb={2}>
@@ -264,9 +405,7 @@ const ServiceSettings: React.FC = () => {
                 onChange={() =>
                   statusForm.setFieldValue(
                     "status",
-                    statusForm.values.status === "online"
-                      ? "offline"
-                      : "online",
+                    statusForm.values.status === "online" ? "offline" : "online"
                   )
                 }
               />
@@ -280,6 +419,14 @@ const ServiceSettings: React.FC = () => {
             </p>
             <p>Offline services can still be edited and published as normal.</p>
           </SettingsDescription>
+
+          <PublicLink
+            isFlowPublished={isFlowPublished}
+            status={flowStatus || "offline"}
+            subdomain={subdomainLink}
+            publishedLink={publishedLink}
+          />
+
           <Box>
             <Button
               type="submit"