chore: BROS-679: Rename CustomInterface → ReactCode

pyproject.toml

@@ -74,7 +74,7 @@ dependencies = [
     "tldextract (>=5.1.3)",
     "uuid-utils (>=0.11.0,<1.0.0)",
     ## HumanSignal repo dependencies :start
-    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/bda59f2a1f46da111dac5542dbc27714c1ae4d3e.zip",
+    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/5b349a30313c8ce04d9597ca92634d1a7999aca4.zip",
     ## HumanSignal repo dependencies :end
 ]
 

web/libs/editor/src/regions/Area.js

@@ -17,7 +17,6 @@ import { TimeSeriesRegionModel } from "./TimeSeriesRegion";
 import { ParagraphsRegionModel } from "./ParagraphsRegion";
 import { VideoRectangleRegionModel } from "./VideoRectangleRegion";
 import { BitmaskRegionModel } from "./BitmaskRegion";
-import { CustomRegionModel } from "./CustomRegion";
 
 // general Area type for classification Results which doesn't belong to any real Area
 const ClassificationArea = types.compose(
@@ -100,7 +99,6 @@ const Area = types.union(
   BitmaskRegionModel,
   VideoRectangleRegionModel,
   ClassificationArea,
-  CustomRegionModel,
   ...Registry.customTags.map((t) => t.region).filter(Boolean),
 );
 

web/libs/editor/src/regions/Result.js

@@ -37,7 +37,6 @@ const resultTypes = [
   "pairwise",
   "videorectangle",
   "ranker",
-  "custominterface",
 ];
 
 const resultValues = {
@@ -66,7 +65,6 @@ const resultValues = {
   bitmasklabels: types.maybe(types.array(types.string)),
   taxonomy: types.frozen(), // array of arrays of strings
   sequence: types.frozen(),
-  custom: types.maybe(types.frozen()), // for CustomInterface regions
 };
 
 const Result = types

web/libs/editor/src/regions/index.js

@@ -15,7 +15,6 @@ import { HtxTextAreaRegion, TextAreaRegionModel } from "./TextAreaRegion";
 import { RichTextRegionModel } from "./RichTextRegion";
 import { TimelineRegionModel } from "./TimelineRegion";
 import { VideoRectangleRegionModel } from "./VideoRectangleRegion";
-import { CustomRegionModel } from "./CustomRegion";
 
 const AllRegionsType = types.union(
   AudioRegionModel,
@@ -33,7 +32,6 @@ const AllRegionsType = types.union(
   TimelineRegionModel,
   ParagraphsRegionModel,
   VideoRectangleRegionModel,
-  CustomRegionModel,
   ...Registry.customTags.map((t) => t.region).filter(Boolean),
 );
 
@@ -62,5 +60,4 @@ export {
   TextAreaRegionModel,
   TimelineRegionModel,
   VideoRectangleRegionModel,
-  CustomRegionModel,
 };

web/libs/editor/src/tags/Custom.jsx

@@ -1,9 +1,14 @@
+/** Placeholder for CustomInterface tag to display Enterprise-only warning. **/
+/** Tag is renamed to ReactCode so we support both names. **/
+
 import { types } from "mobx-state-tree";
 import { observer } from "mobx-react";
 import { EnterpriseBadge } from "@humansignal/ui";
 import Registry from "../core/Registry";
 import ControlBase from "./control/Base";
 
+const ENTERPRISE_URL = "https://docs.humansignal.com/guide/label_studio_compare";
+
 const CustomInterfaceModel = types.compose(
   "CustomInterfaceModel",
   ControlBase,
@@ -12,13 +17,23 @@ const CustomInterfaceModel = types.compose(
   }),
 );
 
+const Code = ({ children }) => (
+  <code className="text-sm font-mono bg-neutral-surface border border-neutral-border rounded px-tighter py-tightest">
+    {children}
+  </code>
+);
+
 // Register custom tag placeholder for opensource
 if (!APP_SETTINGS?.billing?.enterprise && !Registry.models.custominterface) {
   const CustomComponentWrapper = observer(({ item }) => {
     return (
-      <div className="flex items-center gap-2 py-base">
-        <EnterpriseBadge />
-        CustomInterface tag is only available in the enterprise.
+      <div className="py-base">
+        <EnterpriseBadge /> <Code>{item.type === "custominterface" ? "CustomInterface" : "React"}</Code> tag is only
+        available in{" "}
+        <a className="no-go" href={ENTERPRISE_URL} target="_blank" rel="noreferrer">
+          Enterprise
+        </a>
+        .
       </div>
     );
   });