readonly version when model is not editable

quantified-uncertainty · Sep 28, 2023 · 0aead43 · 0aead43
1 parent 1618ec9
commit 0aead43
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 28 deletions.
diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx
@@ -3,7 +3,7 @@ import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { graphql, useFragment } from "react-relay";
 
 import { PlaygroundToolbarItem } from "@quri/squiggle-components";
-import { Button, LinkIcon, useToast } from "@quri/ui";
+import { Button, LinkIcon, TextTooltip, useToast } from "@quri/ui";
 
 import { EditSquiggleSnippetModel$key } from "@/__generated__/EditSquiggleSnippetModel.graphql";
 import {
@@ -18,6 +18,7 @@ import {
   SquigglePlaygroundVersionPicker,
   VersionedSquigglePlayground,
   type SquiggleVersion,
+  SquiggleVersionShower,
 } from "@quri/versioned-playground";
 
 export const Mutation = graphql`
@@ -182,12 +183,25 @@ export const EditSquiggleSnippetModel: FC<Props> = ({ modelRef }) => {
                     onClick={() => openModal("exports")}
                   />
                 )}
-                <SquigglePlaygroundVersionPicker
-                  version={version}
-                  onChange={handleVersionChange}
-                  size="small"
-                  showUpdatePolicy
-                />
+                {model.isEditable ? (
+                  <SquigglePlaygroundVersionPicker
+                    version={version}
+                    onChange={handleVersionChange}
+                    size="small"
+                    showUpdatePolicy
+                  />
+                ) : (
+                  <TextTooltip
+                    text="Squiggle Version" // FIXME - positioning is bad for some reason
+                    placement="bottom"
+                    offset={5}
+                  >
+                    {/* div wrapper is required because TextTooltip clones its children and SquiggleVersionShower doesn't forwardRef */}
+                    <div>
+                      <SquiggleVersionShower version={version} />
+                    </div>
+                  </TextTooltip>
+                )}
                 {model.isEditable && (
                   <Button
                     theme="primary"

diff --git a/packages/ui/src/components/Dropdown/DropdownMenuModalActionItem.tsx b/packages/ui/src/components/Dropdown/DropdownMenuModalActionItem.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { FC, ReactNode, useState } from "react";
 import { ItemLayoutProps } from "./DropdownMenuItemLayout.js";
 import { DropdownMenuActionItem } from "./DropdownMenuActionItem.js";

diff --git a/packages/versioned-playground/src/SquigglePlaygroundVersionPicker.tsx b/packages/versioned-playground/src/SquigglePlaygroundVersionPicker.tsx
@@ -3,7 +3,6 @@ import { FC } from "react";
 
 import {
   Button,
-  CodeBracketIcon,
   Dropdown,
   DropdownMenu,
   DropdownMenuActionItem,
@@ -13,14 +12,14 @@ import {
   DropdownMenuSeparator,
   HelpIcon,
   Modal,
-  WrenchIcon,
 } from "@quri/ui";
 
 import {
-  SquiggleVersion,
-  checkSquiggleVersion,
-  squiggleVersions,
-} from "./versions.js";
+  SquiggleVersionShower,
+  versionIcon,
+  versionTitle,
+} from "./SquiggleVersionShower.js";
+import { SquiggleVersion, squiggleVersions } from "./versions.js";
 
 const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog";
 
@@ -32,16 +31,6 @@ export const SquigglePlaygroundVersionPicker: FC<{
   // "medium" was intended for "New Model" form in Squiggle Hub, but it's currently unused
   size: "small" | "medium";
 }> = ({ version, onChange, showUpdatePolicy, size }) => {
-  const versionIsValid = checkSquiggleVersion(version);
-
-  const versionTitle = (version: string) =>
-    version === "dev" ? "Next" : version;
-
-  const versionIcon = (version: string) =>
-    version === "dev" ? WrenchIcon : CodeBracketIcon;
-
-  const CurrentIcon = versionIcon(version);
-
   return (
     <div className="flex">
       <Dropdown
@@ -104,11 +93,7 @@ export const SquigglePlaygroundVersionPicker: FC<{
         )}
       >
         <Button size={size}>
-          <div className="flex items-center gap-2">
-            <CurrentIcon size={14} className="text-slate-500" />
-            {versionTitle(version)}
-            {versionIsValid ? "" : ` (unknown)`}
-          </div>
+          <SquiggleVersionShower version={version} />
         </Button>
       </Dropdown>
     </div>

diff --git a/packages/versioned-playground/src/SquiggleVersionShower.tsx b/packages/versioned-playground/src/SquiggleVersionShower.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { FC } from "react";
+import { SquiggleVersion, checkSquiggleVersion } from "./versions.js";
+import { CodeBracketIcon, WrenchIcon } from "@quri/ui";
+
+export function versionTitle(version: SquiggleVersion) {
+  return version === "dev" ? "Next" : version;
+}
+
+export function uncheckedVersionTitle(version: string) {
+  const versionIsValid = checkSquiggleVersion(version);
+  if (versionIsValid) {
+    return versionTitle(version);
+  } else {
+    return `${version} (unknown)`;
+  }
+}
+
+export function versionIcon(version: string) {
+  return version === "dev" ? WrenchIcon : CodeBracketIcon;
+}
+
+export const SquiggleVersionShower: FC<{ version: string }> = ({ version }) => {
+  const CurrentIcon = versionIcon(version);
+
+  return (
+    <div className="flex items-center gap-2">
+      <CurrentIcon size={14} className="text-slate-500" />
+      <div className="text-slate-600 text-sm">
+        {uncheckedVersionTitle(version)}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/versioned-playground/src/index.ts b/packages/versioned-playground/src/index.ts
@@ -1,5 +1,6 @@
 export { VersionedSquigglePlayground } from "./VersionedSquigglePlayground.js";
 export { SquigglePlaygroundVersionPicker } from "./SquigglePlaygroundVersionPicker.js";
+export { SquiggleVersionShower } from "./SquiggleVersionShower.js";
 
 export {
   squiggleVersions,