feat(nakar-client-web): adds share link to scenario card

nakar-client-web/src/room/data-table/DataTable.tsx

@@ -3,7 +3,6 @@ import { useBearStore } from "../../state/useBearStore.ts";
 
 export function DataTable() {
   const tableData = useBearStore((s) => s.room.scenario.graph.table.data);
-  const selectGraph = useBearStore((s) => s.room.canvas.tabs.selectGraph);
 
   return (
     <Stack

nakar-client-web/src/room/run-scenario-modal/RunScenarioModal.tsx

@@ -6,13 +6,10 @@ import { Panel } from "../../shared/elements/Panel.tsx";
 import { NavbarButton } from "../../shared/elements/NavbarButton.tsx";
 import { ScenarioIcon } from "../scenarios-panel/ScenarioIcon.tsx";
 import { ArgumentDisplay } from "./ArgumentDisplay.tsx";
-import { actionControllerLoadScenario, ScenarioArgumentDto } from "api-client";
-import { Router } from "../../routing/Router.ts";
-import { CanvasSearchData } from "../canvas/CanvasSearchData.ts";
-import qs from "qs";
+import { actionControllerLoadScenario } from "api-client";
 import { ClipboardButton } from "../../shared/elements/ClipboardButton.tsx";
-import { Link } from "react-router";
 import { Collapsable } from "../../shared/elements/Collapsable.tsx";
+import { createScenarioShareUrl } from "../scenarios-panel/createScenarioShareUrl.ts";
 
 export function RunScenarioModal() {
   const roomContext = useCanvasContext();
@@ -41,34 +38,7 @@ export function RunScenarioModal() {
     if (scenario == null) {
       return null;
     }
-    try {
-      const canvasSearchData: CanvasSearchData = {
-        scenario: {
-          id: scenario.id,
-          args: scenarioArguments.reduce(
-            (
-              akku: Record<string, string>,
-              next: ScenarioArgumentDto,
-            ): Record<string, string> => ({
-              ...akku,
-              [next.identifier]: next.value,
-            }),
-            {},
-          ),
-        },
-      };
-      const url: URL = new URL(
-        window.location.origin +
-          Router.getCanvasPath(
-            roomContext.initialRoomData.id,
-            roomContext.initialCanvasData.id,
-          ),
-      );
-      url.search = qs.stringify(canvasSearchData);
-      return url;
-    } catch {
-      return null;
-    }
+    return createScenarioShareUrl(scenario, roomContext, scenarioArguments);
   })();
 
   const handleRun = async () => {
@@ -137,8 +107,10 @@ export function RunScenarioModal() {
                 >
                   <Stack className={"ps-3 pe-3"}>
                     <Stack direction={"horizontal"}>
-                      <span className={"small text-muted ellipsis"}>
-                        <Link to={shareUrl}>{shareUrl.toString()}</Link>
+                      <span className={"small text-muted text-break"}>
+                        <a href={shareUrl.toString()} target={"_blank"}>
+                          {shareUrl.toString()}
+                        </a>
                       </span>
                       <ClipboardButton
                         text={shareUrl.toString()}

nakar-client-web/src/room/scenarios-panel/ScenarioCard.tsx

@@ -9,6 +9,8 @@ import { Router } from "../../routing/Router.ts";
 import { CMSButton } from "../../shared/cms/CMSButton.tsx";
 import { useIsLoggedIn } from "../../state/useIsLoggedIn.ts";
 import MDEditor from "@uiw/react-md-editor";
+import { ClipboardButton } from "../../shared/elements/ClipboardButton.tsx";
+import { createScenarioShareUrl } from "./createScenarioShareUrl.ts";
 
 export function ScenarioCard(props: {
   hidden?: boolean;
@@ -19,6 +21,14 @@ export function ScenarioCard(props: {
   const canvasContext = useCanvasContext();
   const isLoggedIn: boolean = useIsLoggedIn();
 
+  const shareUrl: URL | null = ((): URL | null => {
+    if (props.scenario.parameters.length > 0) {
+      return null;
+    } else {
+      return createScenarioShareUrl(props.scenario, canvasContext, []);
+    }
+  })();
+
   return (
     <Stack
       className={"p-3 position-relative border rounded bg-body overflow-hidden"}
@@ -117,6 +127,24 @@ export function ScenarioCard(props: {
             <span className={"text-muted small fst-italic"}>None</span>
           )}
         </ScenarioCardSection>
+
+        {shareUrl && (
+          <ScenarioCardSection title={"Run Scenario URL"}>
+            <Stack>
+              <span className={"small text-muted"}>
+                Share this URL to run this scenario on start.
+              </span>
+              <Stack direction={"horizontal"} className={"align-items-start"}>
+                <ClipboardButton text={shareUrl.toString()}></ClipboardButton>
+                <span className={"small text-muted text-break"}>
+                  <a href={shareUrl.toString()} target={"_blank"}>
+                    {shareUrl.toString()}
+                  </a>
+                </span>
+              </Stack>
+            </Stack>
+          </ScenarioCardSection>
+        )}
       </Stack>
     </Stack>
   );

nakar-client-web/src/room/scenarios-panel/createScenarioShareUrl.ts

@@ -0,0 +1,36 @@
+import { CanvasSearchData } from "../canvas/CanvasSearchData.ts";
+import { ScenarioArgumentDto, ScenarioDto } from "api-client";
+import { Router } from "../../routing/Router.ts";
+import qs from "qs";
+import { CanvasContextData } from "../../pages/Canvas.tsx";
+
+export function createScenarioShareUrl(
+  scenario: ScenarioDto,
+  roomContext: CanvasContextData,
+  scenarioArguments: ScenarioArgumentDto[],
+): URL {
+  const canvasSearchData: CanvasSearchData = {
+    scenario: {
+      id: scenario.id,
+      args: scenarioArguments.reduce(
+        (
+          akku: Record<string, string>,
+          next: ScenarioArgumentDto,
+        ): Record<string, string> => ({
+          ...akku,
+          [next.identifier]: next.value,
+        }),
+        {},
+      ),
+    },
+  };
+  const url: URL = new URL(
+    window.location.origin +
+      Router.getCanvasPath(
+        roomContext.initialRoomData.id,
+        roomContext.initialCanvasData.id,
+      ),
+  );
+  url.search = qs.stringify(canvasSearchData);
+  return url;
+}